@media (min-width:400px){

    html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
        margin:0;
      }
    
    
    .main{
        background: #fff;
        min-width: 400px;
        margin: 0 auto;
        padding: 24px;
    } 
    
    }
    
 
 
 html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
    margin:0;
  }



.main{
    background: #fff;
    /*min-width: 960px;*/
    margin: 0 auto;
    padding: 24px;
} 
 
body{
    margin:0;
    font-family: 'Poppins', sans-serif;
}

figure{
    display:block;
    size: 100%;
    width: auto;
    padding: 0;
    margin: 0;
}

a{
   text-decoration: none; 
   color:#9EB8B7;
}

img{
    display: block;
    max-width: 100%;
    margin:auto;
}
 
 /* pour la home*/
 .index .grid{  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.header-title{
    grid-column: 1/4;
    color: #9EB8B7;
    font-size: 18px;
    font-weight: bold;
}

.biobis{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    margin: 60px;
    color: #686763;
    font-size: 0px;
    margin-top: 220px;
}




.bio{
    grid-column: 1/4;
    grid-row:3 / 4;
    margin: 40px;
    color: #686763;
    display: inline;
    font-size: 12px;
    line-height: 22px;

}

@media screen and (min-width:760px){
    .bio{
        grid-column: 2/4;
        grid-row:3 / 4;
        margin: 40px;
        color: #686763;
        font-size: 16px;
    }
    }


    @media screen and (min-width:760px){
    .biobis{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        margin: 60px;
        color: #686763;
        font-size: 18px;
    }    
}


.bio-bck{
    background: #FFE771;
    grid-column: 1/-1;
    grid-row:3 / 4;
    
}







.header-nav{
    grid-column: 2/4;
    display: flex;
    /*justify-content:*/
    text-align: left;
    font-size: 18px;
}


@media screen and (max-width:930px){
.header-nav{
display: block;
/*justify-content: left;*/
align-self: left;
align-items: left;
font-size: 18px;
}
} 

.projets .current{
    color: #686763;
    font-weight:bolder;
    /*text-decoration-line: underline;*/
   /* text-decoration-style: double;*/
    font-size: 18px;
   
    
}

.current:hover{
    color:  #FFE771;
    transition: opacity 0.8s;
}

.noncurrent:hover{
    color:  #FFE771;
    transition: opacity 0.8s;
}

.projets .noncurrent:hover{
    color:  #FFE771;
    transition: opacity 0.8s; 
}

.contact .noncurrent:hover{
    color:  #FFE771;
    transition: opacity 0.8s; 
}


.projets .noncurrent{
    color: #686763;
    font-size: 18px;
    opacity: 0.5;
   
}

.contact .noncurrent{
    color: #686763;
    font-size: 18px;
    
}

.projets {
    color: #686763;
    font-size: 18px;
   
}

.contact {
    color: #686763;
    font-size: 18px;
    
}



/* pour les autres */


@media screen and (min-width:760px){
.grid{
    display: grid;
    grid-template-columns: 1fr  1fr  1fr;
    grid-gap: 48px;
    gap:48px;
}
}


@media screen and (max-width:759px){
    body:before {
     display: block;
    }

    img {
    max-width: 100%;
    height: auto;
    margin: auto;
    }

    figure{
        margin: 24px;
    }

 }


 @media (min-width:760px){
.couverture-femmes1{
    grid-column: 2/4;
    width: 100%;
    max-width: 100%;
    margin:auto;
}


.femmes-planche1{
    grid-column: 2/4;
    align-content: center;
}

.femmes-planche3{
    grid-column: 2/4;
    align-content: center;
}

.femmes-planche2{
    grid-column: 2/4;
    align-content: center;
}



.couverture-femmes2{
    grid-column: 2/3;
    margin-top: 0;
    width: 100%;
    display: block;
}

.couverture-femmes3{
    grid-column: 3/4;
    margin-top: 0;
    width: 100%;
}

.couverture-femmes4{
    grid-column: 2/4;
    margin-top: 0;
    width: 100%;
}


.planchepoeme1{
    grid-column: 2/3;
    align-content: center;
}

.planchepoeme2{
    grid-column: 2/4;
    align-content: center;
}

}

.image-portfolio{
    /*display:block;*/
    grid-column: 1/4;
    justify-content: center;
    size:100%;
    /*height:100%;*/
}

@media screen and (min-width:760px){
.image-portfolio{
    grid-column: 1/4;
    justify-content: center;
     max-width:100%;
     height:100%;
}
}


.initialescontact{
    color:rgb(144, 206, 204);;
    font-size: 48px;
    font-weight: bold;
    font-family: 'Caveat', cursive;
}

.initiales{
    color: #FFE771;
    font-size: 48px;
    font-weight: bold;
    font-family: 'Caveat', cursive;
}

/*.contact .initiales{
    color:#FFE771;
    font-size: 48px;
    font-weight: bold;
}*/



.projetfemmes .initiales{
    color:#FFE771;
    font-size: 48px;
    font-weight: bold;
}








.projets figure{
    display: grid;
    color: #686763;
    font-size: 28px;
    text-align: center;
    

}

@media screen and (min-width:760px){
.projets figure>*{
    grid-area: 1/1/-1/-1;

}


.projets figcaption{
    opacity:0;
    color: #686763;
    font-size: 28px;
    font-weight: bold;
    background: #FFE771;
    transition: opacity 0.8s;
    display:flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
}

@media screen and (min-width:1300px){
    .projets figure>*{
        grid-area: 1/1/-1/-1;
    
    }
    
    
    .projets figcaption{
        opacity:0;
        color: #686763;
        font-size: 36px;
        font-weight: bold;
        background: #FFF;
        transition: opacity 0.8s;
        display:flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    }
    

    .projetmoujikgris{
        margin:0;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
     }
     
     .projetmoujikgris:hover figcaption{
        opacity:0.9;
    }
    
    .projetmoujikgris img{
        background: #686763;
        padding:12px;
    }
    
    
    
    
    .projetpictogris{
        margin:0;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
     }
    
     .projetpictogris:hover figcaption{
         opacity:0.9;
     }
     
     .projetpictogris img{
         background: #686763;
         padding:12px;
     }
    
    
    
    
     .projetspecimengris{
        margin:0;
        grid-column: 3 / 4;
         grid-row: 2 / 3;
     }
     
     
     .projetspecimengris:hover figcaption{
         opacity:0.9;
     }
     
     
     .projetspecimengris img{
         background: #686763;
         padding:12px;
     }
    


     
    


.projetfemmesgris{
    margin:0;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
 }
 
 .projetfemmesgris:hover figcaption{
    opacity:0.9;
}

.projetfemmesgris img{
    background: #686763;
    padding:12px;
}




.projetbanksygris{
    margin:0;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
 }

 .projetbanksygris:hover figcaption{
     opacity:0.9;
 }
 
 .projetbanksygris img{
     background: #686763;
     padding:12px;
 }




 .projetpoemegris{
    margin:0;
    grid-column: 3 / 4;
     grid-row: 3 / 4;
 }
 
 
 .projetpoemegris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetpoemegris img{
     background: #686763;
     padding:12px;
 }




.projetcensuregris{
    margin:0;
     grid-column: 1 / 2;
     grid-row: 4 / 5;
 }
 

 .projetcensuregris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetcensuregris img{
     background: #686763;
     padding:12px;
 }



.projetsignegris{
    margin:0;
     grid-column: 2 / 3;
     grid-row: 4 / 5;
 }
 

 .projetsignegris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetsignegris img{
     background: #686763;
     padding:12px;
 }



.projetcollectiongris{
    grid-column: 3 / 4;
     grid-row: 4 / 5;
 }
 

 .projetcollectiongris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetcollectiongris img{
     background: #686763;
     padding:12px;
 }

  
 
 .projetproyartgris{
    margin:0;
    grid-column: 1 / 2;
    grid-row: 5 / 6;
 }
 
 .projetproyartgris:hover figcaption{
    opacity:0.9;
}

.projetproyartgris img{
    background: #686763;
    padding:12px;
}




.projetdemaingris{
    margin:0;
    grid-column: 2 / 3;
    grid-row: 5 / 6;
 }

 .projetdemaingris:hover figcaption{
     opacity:0.9;
 }
 
 .projetdemaingris img{
     background: #686763;
     padding:12px;
 }




 .projetloutresgris{
    margin:0;
    grid-column: 3 / 4;
     grid-row: 5 / 6;
 }
 
 
 .projetloutresgris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetloutresgris img{
     background: #686763;
     padding:12px;
 }
 



 .projetobsessiongris{
    margin:0;
    grid-column: 1 / 2;
    grid-row: 6 / 7;
 }
 
 .projetobsessiongris:hover figcaption{
    opacity:0.9;
}

.projetobsessiongris img{
    background: #686763;
    padding:12px;
}




.projetrefugiesgris{
    margin:0;
    grid-column: 2 / 3;
    grid-row: 6 / 7;
 }

 .projetrefugiesgris:hover figcaption{
     opacity:0.9;
 }
 
 .projetrefugiesgris img{
     background: #686763;
     padding:12px;
 }




 .projetstepsgris{
    margin:0;
    grid-column: 3 / 4;
     grid-row: 6 / 7;
 }
 
 
 .projetstepsgris:hover figcaption{
     opacity:0.9;
 }
 
 
 .projetstepsgris img{
     background: #686763;
     padding:12px;
 }






 .header-nav a{
    color: #686763;
    font-size: 24px;
    font-weight: bold;
    margin-right: 370px;
    align-self: center;
}



.projets{
    background: #FFE771;
}

.index{
    background: rgb(144, 206, 204);
}







.bio-femmes{
    padding: 24px;
    grid-column: 1/2;
    color: #686763;
   width: 350px;
   margin-top: 24px;
   background: #fff;
   line-height: 20px;
   font-size: 14px;
   

}



@media (min-width:760px){
    .bio-femmes{
        position: fixed;
        top: 10%;

    }
}
.titre-bio-femmes{
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
    color: #686763;
    line-height: 28px;
}

.titre-bio-femmes2{
    margin-bottom: 24px;
    margin-top: 12px;
    font-weight: bolder;
    font-size: 16px;
    color: rgb(144, 206, 204);
    line-height: 28px;
}

@media (min-width:760px){
.couverture-femmes1{
    grid-column: 2/4;
    width: 100%;
    max-width: 100%;
    margin:auto;
}


.femmes-planche1{
    grid-column: 2/4;
    align-content: center;
}

.femmes-planche3{
    grid-column: 2/4;
    align-content: center;
}

.femmes-planche2{
    grid-column: 2/4;
    align-content: center;
}



.couverture-femmes2{
    grid-column: 2/3;
    margin-top: 0;
    width: 100%;
    display: block;
}

.couverture-femmes3{
    grid-column: 3/4;
    margin-top: 0;
    width: 100%;
}

.couverture-femmes4{
    grid-column: 2/4;
    margin-top: 0;
    width: 100%;
}


.planchepoeme1{
    grid-column: 2/3;
    align-content: center;
}

.planchepoeme2{
    grid-column: 2/4;
    align-content: center;
}

}

@media (min-width:760px){
    .couverture-femmes1{
        display:block;
        width: 100%;
        max-width: 100%;
        margin:auto;
    }
    
    
    .femmes-planche1{
        display: block;
        align-content: center;
    }
    
    .femmes-planche3{
        display: block;
        align-content: center;
    }
    
    .femmes-planche2{
        display: block;
        align-content: center;
    }
    
    
    
    .couverture-femmes2{
        display: block;
        margin-top: 0;
        width: 100%;
        display: block;
    }
    
    .couverture-femmes3{
        display: block;
        margin-top: 0;
        width: 100%;
    }
    
    .couverture-femmes4{
        display: block;
        margin-top: 0;
        width: 100%;
    }
    
    
    .planchepoeme1{
        display: block;
        align-content: center;
    }
    
    .planchepoeme2{
        display: block;
        align-content: center;
    }
    
    }

.voiraussi{
    grid-column: 2/4;
    color: #686763;
    font-size: 24px;
    margin: 0px;
    padding: 0px;
}

.nav-voiraussi{
    background:#686763;
    grid-column: 2/4;
    padding: 24px;
    color: white;
    justify-content: space-between;
    display: flex;
    font-weight: bold;

}
.nav-voiraussi a {
 color:white;
}



.contact{
    display: flex;
    color: #686763;
    margin: 24px;
    font-size:12px;
    /*margin-top: 12px;*/
}


@media (min-width:760px){
.contact{
    grid-column: 1/4;
    color: #686763;
    margin:12px;
}
}




}





/*CV*/


.photo-id{
    display: grid;
    grid-column: 1/2;
}


.header-title-CV{
    grid-column: 2 / 4;
    font-size: 32px;
    color: #FFE771;
    margin:48px;
    font-family: 'Caveat', cursive;
    /*line-height: 124px;
    max-width:2048px;
    margin: auto;
    padding: 64px;*/
    
}

@media screen and (min-width:960px){
    .header-title-CV{
        grid-column: 2 / 4;
        font-size: 50px;
        color: #686763;
        margin:48px;
        margin-top: 70px;
        
        
    }

    .photo-id{
        display: grid;
        grid-column: 1/2;
        margin-left: 46px;
    }
    


}



.categorie{
    grid-column: 1 / 2;
    margin-left: 24px;
    margin-right: 48px;
    margin-top: 0px;
    font-size: 20px;
    color: rgb(105, 102, 100);
    border-top: 10px solid  #FFE771;
}

@media screen and (min-width:960px){
.categorie{
    grid-column: 1 / 2;
    margin-left: 48px;
    margin-right: 48px;
    margin-top: 0px;
    font-size: 30px;
    color: rgb(105, 102, 100);
    border-top: 10px solid  #FFE771;
}
}



.lieu{
    grid-column: 2 / 4;
    color: rgb(144, 206, 204);
    font-size: 24px;
    margin-bottom: 0px;
    margin-left: 24px;

}



@media screen and (min-width:960px){
.lieu{
    grid-column: 2 / 4;
    color: rgb(144, 206, 204);
    font-size: 24px;
    margin-bottom: 0px;
    margin-left: 24px;

}
}

.infos{
    grid-column: 2 / 4;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 0px;
    margin-bottom: 24px;

}

@media screen and (min-width:960px){
    .infos{
        grid-column: 2 / 4;
        margin-left: 24px;
        margin-top: 0px;
        margin-bottom: 24px;
    }
}

.infos-qualites{
    grid-column: 2 / 4;
    padding: 24px;
    color: rgb(144, 206, 204);
    font-size: 20px;
    justify-content: space-between;
}


.portfolio-CV{
    grid-column: 2 / 4;
    margin-left: 24px;
    margin-top: 0px;
    margin-bottom: 24px;
}


a{
    color: rgb(144, 206, 204);
    text-decoration: none;
}