:root{
    --coul-beige: #D9B384;
    --coul-orange: #A63922;
    --coul-marron: #5A150E;
    --coul-brun: #260A07;
    
    color-scheme: light dark;

}
@font-face {
    font-family: staatliches;
    src: url(../fonts/Staatliches-Regular.ttf);
}
@font-face {
    font-family: lalezar;
    src: url(../fonts/Lalezar-Regular.ttf);
}

@keyframes move-fleche {
    25%{
        opacity: 1;
        transform: translateY(0);
    }
    33.3%{
        opacity: 1;
        transform: translateY(1em);
    }
    66.6%{
        opacity: 1;
        transform: translateY(2em);
    }
    100%{
        opacity: 0;
        transform: translateY(3em);
    }
   }


html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--coul-beige);
    background-color: light-dark(var(--coul-beige), var(--coul-brun));
}

button:hover{
    cursor: pointer;
}

@media (max-width: 600px) {


    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: auto;
        
    }
    .navbar__logo3D{
        display: flex;
    }
    .logo3D{
        width: 6em;
        height: 6em;
    }
    .navbar__ul{
        display: flex;
        position: relative;
        justify-content: space-between;
        list-style-type: none;
        margin: auto;
        padding: 0;
        display: none;
    }
    .navbar__li{
        font-family: staatliches;
        font-size: 21px;
        justify-content: center;
        align-items: center;
    }
    .navbar__li a{
        text-decoration: none;
        color: var(--coul-marron);
    }
    .navbar__li a:active{
        color: var(--coul-orange);
    }

    .bouton__LightDark{
        grid-area: light_darkMode;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        border: none;
    }
    
    .menu-active{
        display: flex;
        flex-direction: column;
        position: fixed;
        justify-content: center;
        align-items: center;
        gap: 1.5em;
        width: 100vw;
        top: 50%;
        left: 50%;
        margin: auto;
        padding: 40vh 100vw;
        transform: translate(-50%, -50%);
        background-color: var(--coul-beige);
        z-index: 10;
        overflow: hidden;

    }
    /*debut burger menu*/
    label{ 
        display: flex;
        justify-content: center;
        flex-direction: column;
        right: 0px;
        width: 70px;
        cursor: pointer;
        z-index: 11;
        position: relative;
    }

    label span{
        background: var(--coul-marron);
        border-radius: 10px;
        height: 7px;
        margin: 7px 0;
        transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    span:nth-of-type(1){
        width: 50%;
    }
    span:nth-of-type(2){
        width: 100%;
    }
    span:nth-of-type(3){
        width: 75%;
    }

    input[type="checkbox"]{
        display: none;
    }

    input[type="checkbox"]:checked ~ span:nth-of-type(1){
        transform-origin: bottom;
        transform: rotateZ(45deg)translate(8px,0px);
    }

    input[type="checkbox"]:checked ~ span:nth-of-type(2){
        transform-origin:top;
        transform:rotatez(-45deg)
    }

    input[type="checkbox"]:checked ~ span:nth-of-type(3){
        transform-origin: bottom;
        width: 50%;
        transform: translate(30px, -11px)rotateZ(45deg);
    }

    /*fin burger menu*/


    .label--active{
        position: fixed;
        right: .8em;
        top: 1.5em;
        
    }


    .navbar__titre{
        font-size: 21px;
        font-weight: 500;
        font-family: staatliches;
        color: var(--coul-marron);
        align-self: center;
    }

    .titre{
        font-size: 38px;
        font-weight: 500;
        font-family: staatliches;
        color: var(--coul-marron);
        margin: 0;
    }
    .main__header{
        padding-top: .5em;
        height: 40vh;
        
    }
    .main__header h1{
        line-height: .5;
    }


    .ligne__svg{
        stroke:var(--coul-orange);
        stroke-width:10;
    }

    #container__modele3D{
        width: 100%;
        height: 45vh;
    }
    
    .modele--3D{
        padding: .5em 0 .5em 0;
    }

    .container__bouton{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5em;
        position: absolute;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
    }

   .bouton__theme{
    background-color: var(--coul-orange);
    color: white;
    font-family: staatliches;
    font-size: 21px;
    border: 2px solid var(--coul-marron);
    border-radius: .8em;
    text-transform: uppercase;
    -webkit-box-shadow: 0 .5em 0 0 var(--coul-marron);
    box-shadow: 0 .5em 0 0 var(--coul-marron);
    padding: .5em .8em;
    white-space: nowrap;
   }

   .bouton__theme:hover{
    background-color: var(--coul-orange);
   }
   .bouton__theme:active{
    background-color: var(--coul-marron);
    box-shadow: 0 0 0 0;
    transform: translateY(.5em);
   }
   /*
   .scroll__fleche--lien{
    
   }
   */


   .container__scroll{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 6em;
    margin: 4.5em 0 0 0;
   }

   .scroll__fleche{
    position: absolute;
    width: 3em;
    height: 1em;
    opacity: 0;
    transform: scale(.3);
    animation: move-fleche 3s ease-out infinite;
   }
   
   .scroll__fleche:first-child {
    animation: move-fleche 3s ease-out 1s infinite;
   }
   .scroll__fleche:nth-child(2){
    animation: move-fleche 3s ease-out 2s infinite;
   }


   .scroll__fleche:before,
   .scroll__fleche:after{
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background : var(--coul-marron);
   }

   .scroll__fleche:before{
    left: 0;
    transform: skewY(30deg);
   }
   .scroll__fleche:after{
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
   }

   header{
    padding: 0 0 45vh 0;
   }

   .section__contenu{
    display: flex;
    flex-direction: column;
    margin: 2em .5em;
   }

   .titre__contenu{
    font-family: staatliches;
    font-weight: 500;
    font-size: 21px;
    color: white;
    background-color: var(--coul-orange);
    margin: .5em 0 -.5em 0;
    padding: .2em;
    border-radius: .2em;
   }
   
   .p__contenu{
    font-family: lalezar;
    font-weight: 300;
    font-size: 16px;
    text-align: justify;
    text-justify:auto;
    color: var(--coul-brun);
   }

   .img__contenu{
    display: flex;
    width: 100%;
    height: 100%;
    border: solid var(--coul-orange);
    border-width: .3em .3em 2em .3em;
    border-radius: .5em;
    align-self: center;
    justify-self: center;
    margin: .5em;
   }
   .section__prix{
    
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
   }
   .section__prix p, .section__prix a{
    font-family: staatliches;
    font-size: 28px;
    display: flex;
    justify-content: center;
    margin: 1em auto;
    color: transparent;
   }

   .section__prix:hover{
    background-color: #d9b384c6;
    & p, & a{
        color: var(--coul-marron);
    }
   }
   
   
   .img__touchScreen{
    position: absolute;
    display: flex;
    width: 15%;
    top: 1.5em;
    left: 1em;
   }
   figure{
    position: relative;
    font-family: lalezar;
    font-weight: 100;
    font-size: 14px;
    color: white;
    margin: 0;
   }
   figcaption{
    position: relative;
    display: flex;
    align-self: center;
    justify-self: flex-end;
    top: -2.2em;
    right: .5em;
   }

   figcaption a{
    text-decoration: none;
    color: white;
    padding-left: .2em;
   }
   #chartConnaissance{
    width: 15em;
    height: 15em;
    margin: 1em auto;
   }
   #chartAmenagement{
    width: 16em;
    height: 16em;
    margin: 1em auto;
   }



   footer{
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    margin: .5em;
   }

   footer button{
    background-color: var(--coul-orange);
    color: white;
    font-family: staatliches;
    font-size: 21px;
    border: 2px solid var(--coul-marron);
    border-radius: .8em;
    text-transform: uppercase;
    -webkit-box-shadow: 0 .5em 0 0 var(--coul-marron);
    box-shadow: 0 .5em 0 0 var(--coul-marron);
    padding: .5em .8em;
    margin: auto;
    white-space: nowrap;
   }

   footer button:hover{
    background-color: var(--coul-orange);
   }

   footer button:active{
    background-color: var(--coul-marron);
    box-shadow: 0 0 0 0;
    transform: translateY(.5em);
   }

   .footer__logoContainer, .footer__logoContainer a{
    display: flex;
    justify-content: space-evenly;
   }

   
   .logo__ecole{
    width: 50%;
   }

   .copyright{
    display: flex;
    font-family: staatliches;
    font-weight: 500;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    margin: auto;
   }
}
@media (min-width: 601px) {
    
    .navbar{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr .5fr;
        grid-template-areas: 
        "logo3D logo3D nav_titre nav_titre light_darkMode"
        "navbar navbar navbar navbar navbar";
        width: 100%;
        height: 20%;
        margin: 0 0 1em 0;
    }
    .navbar__titre{
        grid-area: nav_titre;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: staatliches;
        font-weight: 500;
        font-size: 40px;
        color: var(--coul-marron);
    }
    .logo3D{
        grid-area: logo3D;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .bouton__LightDark{
        grid-area: light_darkMode;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 60%;
        height: 35%;
        background-color: transparent;
        border: none;
    }
    .icone__LightDark{
        width: 80%;
        margin: 0;
    }
    
    .navbar__ul{
        grid-area: navbar;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        margin: 0 2em;
        height: 3em;
        border-top: 5px solid var(--coul-orange);
    }
    .navbar__li, .navbar__li a{
        text-decoration: none;
        list-style-type: none;
        color: var(--coul-marron);
        font-family: staatliches;
        font-weight: 500;
        font-size: 17px;
    }
    .navbar__li a:hover{
        color: var(--coul-orange);
    }
    .navbar__li a:active{
        color: var(--coul-brun);
    }
    label{
        display: none;
    }
    .main__header{
        display: flex;
        flex-direction: column;
        position: relative;
    }
       
    
    /*    
    #section--contexte{
        grid-area: sect_contexte;
    } 
    #section--recherche{
        grid-area: sect_recherche;
    }    
    #section--sondages{
        grid-area: sect_sondages;
    }    
    #section--taches{
        grid-area: sect_taches;
    }
    #section--plans{
        grid-area: sect_plans;
    }   
    #section--etude{
        grid-area: sect_etude;
    }
    #section--conclusion{
        grid-area: sect_conclusion;
    }
    */

        .titre{
            font-size: 64px;
            font-weight: 500;
            font-family: staatliches;
            color: var(--coul-marron);
            margin: .1em .5em;
        }
        
        .main__header h1{
            line-height: .5;
        }
    
        #container__modele3D{
            width: 100%;
            height: 45vh;
        }
        
        .modele--3D{
            padding: .5em 0 .5em 0;
        }
    
        .container__bouton{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .5em;
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -50%);
            width: 100%;
        }
    
       .bouton__theme{
        background-color: var(--coul-orange);
        color: white;
        font-family: staatliches;
        font-size: 28px;
        border: 2px solid var(--coul-marron);
        border-radius: .8em;
        text-transform: uppercase;
        -webkit-box-shadow: 0 .5em 0 0 var(--coul-marron);
        box-shadow: 0 .5em 0 0 var(--coul-marron);
        padding: .5em .8em;
        white-space: nowrap;
       }
    
       .bouton__theme:hover{
        background-color: var(--coul-orange);
       }
       .bouton__theme:active{
        background-color: var(--coul-marron);
        box-shadow: 0 0 0 0;
        transform: translateY(.5em);
       }
    

       .container__scroll{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 6em;
        margin: 4.5em 0 0 0;
       }
    
       .scroll__fleche{
        position: absolute;
        width: 3em;
        height: 1em;
        opacity: 0;
        transform: scale(.3);
        animation: move-fleche 3s ease-out infinite;
       }
       
       .scroll__fleche:first-child {
        animation: move-fleche 3s ease-out 1s infinite;
       }
       .scroll__fleche:nth-child(2){
        animation: move-fleche 3s ease-out 2s infinite;
       }
    
    
       .scroll__fleche:before,
       .scroll__fleche:after{
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background : var(--coul-marron);
       }
    
       .scroll__fleche:before{
        left: 0;
        transform: skewY(30deg);
       }
       .scroll__fleche:after{
        right: 0;
        width: 50%;
        transform: skewY(-30deg);
       }
    
       .section__contenu{
        display: flex;
        flex-direction: column;
        margin: 2em 2.5em;
       }
       .section__contenu:nth-of-type(3){
        & #chartConnaissance, #chartAmenagement{
            display: flex;
            flex-direction: row;
            width: 50%;
            
        }
       }
    
       .titre__contenu{
        font-family: staatliches;
        font-weight: 500;
        font-size: 28px;
        color: white;
        background-color: var(--coul-orange);
        margin: .5em 0 -.5em 0;
        padding: .2em;
        border-radius: .2em;
        grid-area: titre_contenu;
       }
       
       .p__contenu{
        font-family: lalezar;
        font-weight: 300;
        font-size: 21px;
        line-height: 1.33;
        text-align: justify;
        text-justify:auto;
        color: var(--coul-brun);
        margin: 1em 0;
       }
    
       .img__contenu{
        display: flex;
        width: 90%;
        height: 100%;
        border: solid var(--coul-orange);
        border-width: .3em .3em 2em .3em;
        border-radius: .5em;
        align-self: center;
        justify-self: center;
        margin: .2em;
       }
       .section__prix{
        
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
       }
       .section__prix p, .section__prix a{
        font-family: staatliches;
        font-size: 28px;
        display: flex;
        justify-content: center;
        margin: 1em auto;
        color: transparent;
       }
    
       .section__prix:hover{
        background-color: #d9b384c6;
        & p, & a{
            color: var(--coul-marron);
        }
       }
       
       
       .img__touchScreen{
        position: absolute;
        display: flex;
        width: 15%;
        top: 1.5em;
        left: 5.5em;
       }
       figure{
        position: relative;
        font-family: lalezar;
        font-weight: 100;
        font-size: 14px;
        color: white;
        margin: 0;
       }
       figcaption{
        position: relative;
        display: flex;
        align-self: center;
        justify-self: flex-end;
        top: -1.8em;
        right: 2.5em;
        font-size: 16px;
       }
    
       figcaption a{
        text-decoration: none;
        color: white;
        padding-left: .2em;
       }
       #chartConnaissance{
        width: 15em;
        height: 15em;
        margin: 1em auto;
       }
       #chartAmenagement{
        width: 16em;
        height: 16em;
        margin: 1em auto;
       }
    
    
    
       footer{
        display: flex;
        flex-direction: column;
        gap: 2.5em;
        margin: .5em;
       }
    
       footer button{
        background-color: var(--coul-orange);
        color: white;
        font-family: staatliches;
        font-size: 21px;
        border: 2px solid var(--coul-marron);
        border-radius: .8em;
        text-transform: uppercase;
        -webkit-box-shadow: 0 .5em 0 0 var(--coul-marron);
        box-shadow: 0 .5em 0 0 var(--coul-marron);
        padding: .5em .8em;
        margin: auto;
        white-space: nowrap;
       }
    
       footer button:hover{
        background-color: var(--coul-orange);
       }
    
       footer button:active{
        background-color: var(--coul-marron);
        box-shadow: 0 0 0 0;
        transform: translateY(.5em);
       }
    
       .footer__logoContainer, .footer__logoContainer a{
        display: flex;
        justify-content: space-evenly;
       }
    
       
       .logo__ecole{
        width: 50%;
       }
    
       .copyright{
        display: flex;
        font-family: staatliches;
        font-weight: 500;
        font-size: 12px;
        justify-content: center;
        align-items: center;
        margin: auto;
       }
       
}
@media (min-width: 900px) {
    .navbar{
        grid-template-areas: 
        "logo3D logo3D nav_titre nav_titre light_darkMode"
        "navbar navbar navbar navbar navbar";
    }
    .navbar__titre{
        font-size: 64px;
    }
    .bouton__LightDark{
        width: 60%;
    }.navbar__li a{
    font-size: 23px;
    }
    .titre__contenu{
        font-size: 40px;
    }
    .titre{
        margin: .1em 1.5em;
    }
    .p__contenu{
       font-size: 30px;
    }
    figure{
        width: 60%;
        height: 60%;
        margin: auto;
    }
    
}
@media (min-width: 1200px) {
    .navbar__titre{
        font-size: 64px;
    }
    .bouton__LightDark{
        width: 60%;
    }.navbar__li a{
    font-size: 23px;
    }
    .bouton__LightDark{
        width: 35%;
    }
    .titre__contenu{
        font-size: 40px;
        width: 75%;
        margin: 2em auto 0 auto;
    }
    .titre{
        font-size: 95px;
        margin: .1em 1.5em;
    }
    .p__contenu{
       font-size: 30px;
       width: 75%;
       margin: 2em auto;
    }
    .container__bouton{
        margin: 3em auto;
        gap: 2em;
    }
    .copyright{
        font-size: 16px;
    }
    figure{
        width: 60%;
        height: 60%;
        margin: auto;
    }
    figcaption{
        right: 4em;
    }
    
}