@font-face {
    font-family: 'Inter-light';
    src: url('./font/Inter_18pt-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-regular';
    src: url('./font/Inter_18pt-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-extra-light';
    src: url('./font/Inter_18pt-ExtraLight.woff2') format('woff2');
}



.intro {
    height: 100vh;
    padding: 32px 32px 0px 32px;
    
}




.header {
    /* les colomnes font donc 92vh (viewport height)*/
    height: 8vh;

    font-family: Inter-regular;

    background-color: rgb(255, 255, 255);

    /* Pour que les accès rapides et boutons colonnes soient collés au bas du header */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;

    position: sticky;
}

.header-titre {
    border: 1px solid red;
    padding: 0px 32px 0px 32px;
}


.header-part-2-flex {
    /* Part 2 = accès rapide et boutons */
    display: flex;
    justify-content: space-between;
    border: 1px solid red;
}


.body {
    margin: 0px 0px 0px 0px;
    font-family: Inter-regular;
}

.flex-separation-2-columns {
    display: flex;
}



.left-column {
    /* vh = viewport height */
    /* flex:1 valeur de base */
    height: 92vh;
    flex: 1;
    overflow-y: scroll;

    /* no scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;

    background-color: rgb(38, 38, 37);
    color: white;
}

/* Right part */
.right-column {
    height: 92vh;
    flex: 1;
    overflow-y: scroll;

    /* no scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;

    background-color: rgb(255, 255, 255);
    color: rgb(38, 38, 37);

}

.left-column,
.right-column {
    transition: flex 0.2s ease-in-out;
}




/* S'applique à tous les summary, gauche et droite */

summary {
    /* Enlève la flèche (Standard) */
    list-style: none;

    /* Centre verticalement */
    height: 50px;
    display: flex;
    align-items: center;

    cursor: pointer;
    user-select: none;
    /* Empêche la sélection du texte */
    -webkit-user-select: none;
    /* Pour Safari */
    outline: none;
    /* Enlève le cadre bleu au clic sur certains navigateurs */
    -webkit-tap-highlight-color: transparent;
    /* Enlève le flash bleu au clic sur mobile */

    font-size: 18px;
    font-family: Inter-light;
}

/* 2. Enlève la flèche (Safari) */
summary:-webkit-details-marker {
    display: none;
}



/* 3. Nouvelle forme (ex: un point bleu) */
.summary-bouton-categorie-left:before {
    content: "•";
    margin-right: 10px;
    color: rgb(38, 38, 37);
}

.summary-bouton-categorie-right:before {
    content: "•";
    margin-right: 10px;
    color: rgb(255, 255, 255);
}


/* Couleur summary gauche */
.summary-bouton-categorie-left {
    background-color: rgb(255, 255, 255);
    color: rgb(38, 38, 37);
    border-top: 1px solid rgb(38, 38, 37);
    border-bottom: 1px solid rgb(38, 38, 37);
}

/* Couleur summary droite */
.summary-bouton-categorie-right {
    background-color: rgb(38, 38, 37);
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}




/* Textes */

.h2-flex{
    font-family: Inter-regular;
    font-size: 12px;
    margin-top: 0;
    border: 1px solid blue;
    padding-top: 0px;
}

.h2-2-colonnes{
    font-family: Inter-regular;
    font-size: 12px;
    margin-top: 0;
    border: 1px solid blue;
    padding-top: 0px;
    padding-left: 32px;
}


.texte-2-colonnes {
    padding: 16px 32px 16px 32px;
    font-family: Inter-extra-light;
    font-size: 14px;
    border: 1px solid green;
}

.texte-flex {
    padding: 0px 32px 16px 32px;
    font-family: Inter-extra-light;
    font-size: 14px;

    display: flex;
    flex-direction: row;
    gap: 16px;   
}

.texte-flex > div {
    flex: 1;
    border: 1px solid red;
}
/* 
.img-video-width-100{
    width: 100%;
} */

.image-2-colonnes{
    width: 100%;
}


.comparaison-left{
    margin: 8px 0px 8px 0px;
    padding: 8px 32px 8px 32px;
    background-color: white;
    color: rgb(38, 38, 37);
}

.comparaison-right{
    margin: 8px 0px 8px 0px;
    padding: 8px 32px 8px 32px;
    background-color:rgb(38, 38, 37);
    color: white;
}



/* Pour les texte qui ne sont que à gauche */
.texte-flex-gauche{
    width: 50%;
}






.articles-colonnes {
    display: flex;
    flex-direction: row;
}



.images {
    width: 50%;
}

.images-flex {
    display: flex;
    flex-direction: row;
}


.image-change-scroll {
    width: 25%;
}