@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');
}

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

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

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

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




* {
    scroll-behavior: smooth !important;
}


/* header */

.header {
    /* les colomnes font donc 92vh (viewport height)*/
    height: 10vh;
    min-height: 68px;

    background-color: rgb(255, 255, 255);
    position: sticky;
    border-bottom: 2px solid rgb(38, 38, 37);

    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;     
    gap: auto;                
    /* overflow: hidden; */
}

.analyse-comparative {
    text-align: center;
    width: 100%;
    font-family: Inter-extra-light;
    /* font-size: 22px; */
    padding-top: 5px;

    font-size: clamp(35px, 1.5vw, 22px); /* Taille fluide : s'adapte à l'écran */
    line-height: 1.2;
    white-space: nowrap;
}

.boutons{
    display: flex;
    gap: 10px;
    height: 18px;
}

.bouton-image-1{
    border: 1px solid rgb(38, 38, 37);
    border-bottom: none;
    cursor: pointer;
    padding: 0;
    /* height: 20px; */
}

.bouton-image-2{
    border: 1px solid rgb(38, 38, 37);
    border-bottom: none;
    cursor: pointer;
    padding: 0;
    /* height: 20px; */
}

.bouton-image-3{
    border: 1px solid rgb(38, 38, 37);
    border-bottom: none;
    cursor: pointer;
    padding: 0;
    /* height: 20px; */
}


.bouton-image-1:hover{
    border: 2px solid rgb(38, 38, 37);
    border-bottom: none;
}

.bouton-image-2:hover{
    border: 2px solid rgb(38, 38, 37);
    border-bottom: none;
}

.bouton-image-3:hover{
    border: 2px solid rgb(38, 38, 37);
    border-bottom: none;
}





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

    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Interdit le scroll sur la page entière */
}



.flex-separation-2-columns {
    display: flex;
    flex: 1;
    overflow: hidden;
}


.left-column {
    /* vh = viewport height */
    flex: 1;
    overflow-y: scroll;
    height: 100%;

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

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

    container-type: inline-size;
    container-name: colonne-gauche;
    width: 100%; 
}


.right-column {
    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);

    container-type: inline-size;
    container-name: colonne-droite;
    width: 100%;
}


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




/* S'applique à tous les summary */

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

    height: 55px;
    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: 20px;
    font-family: Inter-light;

}

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



.espace-top-right{
    height: 55px;
}




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

.summary-bouton-categorie-left:hover{
    font-family: Inter-medium;
}


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

.summary-bouton-categorie-right:hover{
    font-family: Inter-medium;
}



.categorie-left-top{
    font-family: Inter-semi-bold;
}



.comparaison-right{
    scroll-margin-top: calc(8vh + 50px);
}



.rond-noir-close {
    height: 100.5%;
    margin-left: 0px;
    margin-right: 10px;
}

.rond-noir-open {
    height: 100.5%;
    margin-left: 0px;
    margin-right: 10px;
    display: none;
}

details[open].categorie-left .rond-noir-open {
    display: block;
}

details[open].categorie-left .rond-noir-close {
    display: none;
}

details[open].categorie-left-top .rond-noir-open {
    display: block;
}

details[open].categorie-left-top .rond-noir-close {
    display: none;
}


details[open].categorie-left .summary-bouton-categorie-left {
    font-family: Inter-medium;
}




.rond-blanc-close {
    height: 100.2%;
    margin-left: 0px;
    margin-right: 10px;
}

.rond-blanc-open {
    height: 100.5%;
    margin-left: 0px;
    margin-right: 10px;
    display: none;
}

details[open].categorie-right .rond-blanc-open {
    display: block;
}

details[open].categorie-right .rond-blanc-close {
    display: none;
}

details[open].categorie-right .summary-bouton-categorie-right {
    font-family: Inter-medium;
}






/* Textes */

h2:before {
    content: "•";
    margin-right: 5px;
    /* color: rgb(255, 255, 255); */
}


.h2-flex {
    font-family: Inter-regular;
    font-size: 14px;
    margin-bottom: 14px;
    padding-left: 5px;
    margin-top: 0px;
    /* border: 1px solid blue; */
}

.h2-2-colonnes {
    font-family: Inter-regular;
    font-size: 14px;
    margin-top: 0px;
    margin-left: 24px;
    padding-left: 5px;
    margin-bottom: 14px;
    /* border: 1px solid rgb(0, 195, 255); */
}


.texte-2-colonnes {
    padding: 0px 24px 0px 24px;
    font-family: Inter-extra-light;
    font-size: 14.5px;
    flex: 1;
    /* border: 1px solid rgb(255, 0, 221); */
}

.h2-bibliographie {
    font-family: Inter-regular;
    font-size: 14px;
    margin-left: 24px;
    padding-left: 5px;
    margin-bottom: 14px;
    padding-top: 0;
    margin-top: 0;
}



.texte-flex {
    padding: 0px 24px 0px 24px;
    font-family: Inter-extra-light;
    font-size: 14.5px;

    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 35px;
}

.texte-flex>div {
    flex: 1;
    /* border: 1px solid red; */
}


/* .img-video-width-100 {
     margin-top: 20px;
} */

.image-2-colonnes {
    width: 100%;
    /* border: 1px solid red; */
}


.comparaison-left {
    margin: 0px 0px 0px 0px;
    padding: 16px 24px 16px 24px;
    background-color: white;
    color: rgb(38, 38, 37);
    font-family: Inter-semi-bold;
    font-size: 14px;
}

.comparaison-left-lien {
    text-decoration: none;
    color: rgb(38, 38, 37);
}

.comparaison-left-lien:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
    color: rgb(38, 38, 37);
}

.comparaison-left-lien:selected {
    text-decoration: none;
    color: rgb(38, 38, 37);
}



.comparaison-left::before {
    content: "•";
    margin-right: 1px;
}



.comparaison-right-titre {
    font-family: Inter-semi-bold;
    font-size: 14px;
    margin-left: 24px;
    /* margin-bottom: 10px; */
}

.comparaison-right-titre:hover .comparaison-soulignee {
    text-decoration: underline;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
}



.comparaison-right-titre::before {
    content: "•";
    margin-right: 5px;
    display: inline-block;
    text-decoration: none;
}



.comparaison-right {
    margin: 0px 0px 0px 0px;
    /* padding: 1px 16px 1px 16px; */
    background-color: rgb(38, 38, 37);
    color: white;
    font-family: Inter-extra-light;
    font-size: 14.5px;
}

.comparaison-right-texte {
    padding: 0px 24px 24px 24px;
    margin: 0px;
}





.comparaison-left-conclusion-titre {
    margin: 0px 0px 0px 0px;
    padding: 16px 32px 0px 32px;
    background-color: white;
    color: rgb(38, 38, 37);
    font-family: Inter-semi-bold;
    font-size: 14px;
}

.comparaison-left-conclusion-titre::before {
    content: "•";
    margin-right: 5px;
}


.comparaison-left-conclusion {
    padding: 10px 32px 16px 32px;
    background-color: white;
    color: rgb(38, 38, 37);
    font-family: Inter-extra-light;
    font-size: 14.5px;
}


.comparaison-right-conclusion-titre {
    margin: 0px 0px 0px 0px;
    padding: 16px 32px 0px 32px;
    background-color: rgb(38, 38, 37);
    color: white;
    font-family: Inter-semi-bold;
    font-size: 14px;
}

.comparaison-right-conclusion-titre::before {
    content: "•";
    margin-right: 5px;
}


.comparaison-right-conclusion {
    padding: 10px 32px 16px 32px;
    background-color: rgb(38, 38, 37);
    color: white;
    font-family: Inter-extra-light;
    font-size: 14.5px;
}




/* Partie 1  */

.part-1-flex {
    padding: 0px 24px 0px 24px;
    font-family: Inter-extra-light;
    font-size: 14.5px;

    display: flex;
    flex-direction: row;
    gap: 20px;

    /* border: 1px solid red; */
}

.texte-flex-1 {
    margin-top: 0px;
    padding-top: 0px;
    flex: 1;
}



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



.images {
    width: 50%;
}

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


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





.espace {
    height: 36px;
}

.italic {
    font-family: Inter-extra-light-italic;
}




.bibliographie {
    color: rgb(38, 38, 37);
    text-decoration: none;
}

.bibliographie:hover {
    /* text-decoration: underline; */
        text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
}

.typo-medium{
    font-family: Inter-regular;
}



 


/* Quand la colonne de GAUCHE est petite */
@container colonne-gauche (max-width: 500px) {

    .texte-flex{
         display: flex;
        flex-direction: column; /* On passe en ligne au lieu de colonne */
        flex-wrap: wrap;     /* Permet aux éléments de revenir à la ligne si besoin */
        gap: 50px;
    }

    .part-1-flex{
         display: flex;
        flex-direction: column; /* On passe en ligne au lieu de colonne */
        flex-wrap: wrap;     /* Permet aux éléments de revenir à la ligne si besoin */
        gap: 50px;
    }

    .espace{
        height: 35px;
    }

    .texte-flex-empty {
        display: none;
    }
}

/* Quand la colonne de gauche est grande */
@container colonne-gauche (min-width: 1000px) {

    .texte-2-colonnes{
        font-size: 17px;
    }
    .texte-flex-1{
        font-size: 17px;
    }
    .texte-flex{
        font-size: 17px;
    }

    .h2-flex{
        font-size: 16px;
    }

    .h2-2-colonnes{
        font-size: 16px;
    }

    .comparaison-left-conclusion-titre{
        font-size: 16px;
    }

    .comparaison-left{
        font-size: 16px;
    }
    .comparaison-left-conclusion{
        font-size: 16px;
    }
}




/* Quand la colonne de droite est petite */
@container colonne-droite (max-width: 500px) {

    .texte-flex{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;     
        gap: 50px;
    }

    .part-1-flex{
         display: flex;
        flex-direction: column; 
        flex-wrap: wrap;     
        gap: 50px;
    }

    .espace{
        height: 35px;
    }

    .texte-flex-empty {
        display: none;
    }
}

/* Quand la colonne de droite est grande */
@container colonne-droite (min-width: 1000px) {

    .texte-2-colonnes{
        font-size: 17px;
    }
    .texte-flex-1{
        font-size: 17px;
    }
    .texte-flex{
        font-size: 17px;
    }

    .h2-flex{
        font-size: 16px;
    }
    
    .h2-2-colonnes{
        font-size: 16px;
    }

    .comparaison-right-conclusion-titre{
        font-size: 16px;
    }

    .comparaison-right{
        font-size: 16px;
    }

    .comparaison-right-conclusion{
        font-size: 16px;
    }

    .comparaison-right-titre{
        font-size: 16px;
    }
}