/*font Mendl-sans*/
    @import url(https://use.typekit.net/aqp5blx.css);
    
    :root{

        --font-mendl-sans-regular:"mendl-sans-dusk", sans-serif;
        --font-mendl-sans-bold:"mendl-sans-dusk", sans-serif;

        --couleur-noir:#0D0D0D;
        --couleur-bleuLight:#95D7F2;
        --couleur-bleuDark:#39668C;

        --taille-titre-mobile:40px;
        --taille-paragraphe-mobile:25px;
    }

    html{
        font-family: var(--font-mendl-sans-regular);
    }

    .index{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: var(--couleur-noir);
        color: white;
    }
    .critiques{
        background-color: var(--couleur-noir);
        color: white;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .stats{
        background-color: var(--couleur-noir);
        color: white;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .lightmode{
        background-color: white;
        color: var(--couleur-noir);
    }
    



@media (max-width: 600px) {
    /*Début page promotionnelle*/
    .body--index, .body--critiques, .body--stats{
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    
    .nav .nav__container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
    }
    .nav__container{
        width: 100%;
        height: 100px;
    }
    .nav__logo{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
    }
    .nav__list{
        list-style-type: none;
        display: none;
    }
    .nav__burger{
        background: none;
        border: none;        
    }
    .nav__button--mode{
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        width: 50px;
        height: 50px;
    }
    .nav__icone--mode{
        width: 35px;
        height: 35px;
    }
    .logo--index{
        width: 75px;
        height: 75px;
    }
    .titre--page{
        font-size: 20px;
        text-decoration: none;
        color: white;
    }
    
    
    .section--header{
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .container__titre{
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
    }
    .titre--headerBIG{
        
        width: 100%;
        height: 25%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: auto;
    }
    .titre--headerBIG:last-child{
        align-items: flex-end;
    }
    .headerBIG1, .headerBIG3{
        font-size: 50px;
        -webkit-text-stroke: 2px var(--couleur-noir);
    }
    .headerBIG2, .headerBIG4{
        font-size: 30px;
        color: var(--couleur-noir);
        -webkit-text-stroke: 1px white;
    }
    .img__bg--index{
        width: 100%;
        height: 100%;
        z-index: -1; 
        position: relative;
    }



    /*début section infos*/
    .section--infos, .section--principale{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .section--infos{
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas: 
            "p1 p1 p1"
            "fig_infos1 fig_infos1 fig_infos1"
            "p2 p2 p2";
        align-items: center;
        gap: .5em;
    }
    .section--infos .paragraphe{
        padding: 0 1em;
        margin: 0;
        font-size: var(--taille-paragraphe-mobile);
    }
    .p--infos1{
        grid-area: p1;
    }
    .p--infos2{
        grid-area: p2;
    }
    .figure--infos{
        grid-area: fig_infos1;
        margin: auto;
        display: flex;
        flex-direction: column;
        
    }
    .figure--infos figcaption{
        font-size: 15px;
        justify-content: flex-end;
        margin: auto;
    }
    .img--aiekillu{
        height: auto;
        width: 50%;
        margin: auto;
    }
/*fin section infos*/

/*début section principale*/

    .section--principale{
        grid-template-rows: repeat(18,auto);
        grid-template-areas: 
        "titre1 titre1 titre1"
        "p-main1 p-main1 p-main1"
        "img-main1 p-main2 p-main2"
        "titre2 titre2 titre2"
        "p-main3 p-main3 p-main3"
        "p-main4 p-main4 p-main4"
        ". . img-main2"
        "p-main5 p-main5 p-main5"
        ". . ."
        "titre3 titre3 titre3"
        "p-main6 p-main6 p-main6"
        "titre4 titre4 titre4"
        "p-main7 p-main7 p-main7"
        ". . ."
        "titre5 titre5 titre5"
        "p-main8 p-main8 p-main8"
        "titre6 titre6 titre6"
        "p-main9 p-main9 p-main9";
        align-items: center;
        gap: .5em;
    }
    .titre__section--principale{
        font-size: var(--taille-titre-mobile);
        align-self: end;
        margin: 1em .5em 0 .5em;
        color: var(--couleur-bleuLight);
    }
    .paragraphe__section--principale{
        font-size: var(--taille-paragraphe-mobile);
        padding: .5em .5em;
        margin: .5em .5em;
    }
    
    .titre--main1{
        grid-area: titre1;
    }
    .titre--main2{
        grid-area: titre2;
    }
    .titre--main3{
        grid-area: titre3;
    }
    .titre--main4{
        grid-area: titre4;
    }
    .titre--main5{
        grid-area: titre5;
    }
    .titre--main6{
        grid-area: titre6;
    }

    .p--main1{
        grid-area: p-main1;
    }
    .p--main2{
        grid-area: p-main2;
    }
    .p--main3{
        grid-area: p-main3;
    }
    .p--main4{
        grid-area: p-main4;
    }
    .p--main5{
        grid-area: p-main5;
    }
    .p--main6{
        grid-area: p-main6;
    }
    .p--main7{
        grid-area: p-main7;
    }
    .p--main8{
        grid-area: p-main8;
    }
    .p--main9{
        grid-area: p-main9;
    }
    .img--illuPerso1{
        width: 200px;
        height: 200px;
        grid-area: img-main1;
    }
    .img--illuPerso2{
        width: 200px;
        height: 200px;
        grid-area: img-main2;
    }
/*fin section principale*/
}
@media (min-width: 601px) {
    
}
@media (min-width: 900px) {
    
}
@media (min-width: 1200px) {
    
}
@media (min-width: 1500px) {
    
}