@import url("https://use.typekit.net/ccs2nbz.css");
:root{
    --graphite: #38322eff;
    --color-primary:#6f6860;
    --mushroom-taupe:#A99F96 ;
    --clay-dust:#DCD6CC;
    --linen:#F7F5F2;
}
*{
    margin:0;
    padding:0;
}
body{
    background-color: var(--linen);
}

/**systéme de menu**/

nav{
    background-color:var(--color-primary);
    position: sticky; /** la barre du menu reste fixe**/
    top: 0; /** au top de la page **/
    z-index:1000; /**Superposé devant **/
}
.menu-container, .hamburger-group{
    display: flex;
    min-height:10dvh;
    justify-content: space-evenly;
    align-items: center;
    font-size:1.5em;
}
.hamburger-group{
    justify-content:end;
    padding-right:5dvw;
    display: none;
}
.menu-item{
    list-style: none;
}
.menu-link{
    color:var(--cornsilk);
    text-decoration: none;
    padding:5px 15px;
    border-radius:30px;
}
.menu-link:hover{
    background-color:var(--graphite);
    color:var(--clay-dust);
}
.label-toggle{
    color:var(--cornsilk);
}
nav:has(#menu-toggle:checked) .menu-container{  /*attention a l'espace et le ID!!*/
    display: flex;
}
#menu-toggle{
    display: none; /*on a rendu invisible la case a chequer*/
}

@media(max-width:768px){
    .menu-container{
        flex-direction: column;
        gap:25px;
        padding:25px 0;
        display: none;
    }
    .hamburger-group{
        display: flex; /*remaplace le dysplay:none; par un display flex*/
    }
}

/**systéme de grille**/

.grid{
    display: grid;
    grid-template-columns:1fr;
    padding:5dvh 10dvw;
    gap:3dvh;
}
.gap-lg{
    gap: 50px;
}

@media(min-width:768px){ /*max-width c'est la taille minimale accépté*/
    .grid-2-1{
        grid-template-columns: 2fr 1fr;
    }
    .grid-1-1-1{
        grid-template-columns: 1fr 1fr 1fr;

    }
}


/**la typographie par defaut**/
h1{
    font-size: 7rem;
    font-family: parfumerie-script, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--graphite);
}
h2{
    font-size:3rem;
    font-family: fiona, sans-serif;
    font-weight: 400;
    font-style: normal;
    color:var(--graphite);
}
h3{
    font-size:1rem;
    font-family: articulat-heavy-cf, sans-serif;
    font-weight: 900;
    font-style: normal;
    color:var(--graphite);
    
}
p{
    font-size:1rem;
    font-family: "gravesend-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}
/**Classes de design réutilisables**/

.bg-primary{
    background-color: var(--color-primary);    
    color:var(--graphite);
}
.text-center{
    text-align: center;
}
.v-padding{
    padding-top:6dvh;
    padding-bottom:5dvh;
}
.divider path{
    fill:var(--color-primary);
}
.shadow{
    filter: drop-shadow(0 5px 10px rgba(68, 67, 67, 0.5));
}
.title-box{
    font-size:2rem;
}
.bg-darker{
    background-color:var(--graphite);
    color:var(--mushroom-taupe);
}
.small{
    font-size:1rem;
}


/* Composants*/

.card{
   display: flex;
   flex-direction: column;
   gap: 2dvh;
   border-radius:30px 0 30px 0;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.card:hover{
    background-color:#a99f96a7;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    color:var(--graphite);
    filter: brightness(1.2);/* filtre eclaircissant */
}
.card img{
    width:100%;
    height: auto;
    border-radius: 30px 0 0 0;
}
.card h3{
    font-size:1.25rem;
    padding:0 2dvh;
    text-align: center;
    font-family: fiona, sans-serif;
    font-weight: 400;
    font-style: normal;
    color:var(--graphite);
}
.card p {
     padding:3dvh 2dvh;
     font-size:1rem;
     font-family: "gravesend-sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}
/* Barres de progression*/

.skill{
    font-size:2em;
    color: var(--graphite);
}
.skill progress{
    width:100%;
    color: #6f6860;
}

/*Formulaire*/

form{
    
}

form label{
    font-size:1.25em;
    font-family:"Roboto","Sans-serif";
}
form input, form textarea{
    border-radius:5px;
    border: 0.75px solid var(--color-primary);
    font-size:1em;
    padding:7px 15px ;
}

 form input{
    height:4dvh;
}

form textarea{
    height: 30dvh;
}

button{
    background-color: var(--color-primary);
    color:var(--linen);
    width: 20dvw;
    font-size:1.25em;
    border-radius:6px;
    padding:7px 15px;
}

button:hover{
    background-color:var(--clay-dust);
    color:var(--graphite);
}

img{
    width:250px;
    height:250px;
    border-radius:20%;
    object-fit:cover;
}
.link-footer{
     color:var(--cornsilk);
    text-decoration: none;
    border-radius:30px;
}

.link-footer:hover{
    color: #ebf96c;
}
footer{
    padding:1dvh;
}