@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Unlock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marmelad&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Marck+Script&family=Seaweed+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Seaweed+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Coiny&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap");

                
/* *{
} */

p{
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 300;
  
}
h3{
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    font-weight: 300;
  
}

h1,h2{
    font-family: "Marmelad", sans-serif;
  font-weight: 400;
  font-style: normal;
}
a{
    text-decoration: none;
}
ul li{
    list-style-type: none;
}
body{
    /*background-color: #fffcf6;*/
    max-width: 95%;
    margin: auto;
    border-left: #90736B 1px solid;
    border-right: #90736B 1px solid;
}

/* HEADER-HOME */

/* HEADER ALL */
#H .all{
    grid-template-columns: 20% 10% 45% 25%;
}
.all{
    margin-top: 2%;
    display: grid;
    grid-template-columns: 10% 20% 45% 25%;
    border-top:1px solid #90736B;
    border-bottom: #90736B 1px solid;
    padding: 0;
    height:40px;
}

/* div1 */
.all .div1{
    display: flex;
    align-items: center;
    height: 40px;

}

.all .div1 img{
    object-fit: cover;
    width: 100%;
    height:100%;
}


/* div2 */
.all .div2{
    border-left: #90736B 1px solid;
    height: 40px;
    display: flex;
    align-items: center; 
    justify-content: center;
    z-index: 1;
   
}
#H .all .div2 img{
    width: 100px;
    margin: auto;
    display: flex;
    align-items: center;
}
.all .div2 img{
    width:250px;
    
} 
    

/* div3 */
.all .div3{
    border-left: #90736B 1px solid;
    height: 40px;
   
}

.all .div3 p{
    font-family: 'Marmelad', sans-serif;
    padding-left: 5px;
    font-size:1.2vw;
    margin: 0;
}
.all .div3 img{
    border-bottom: #90736B 1px solid;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* div4 */

.all .div4{
    border-left: #90736B 1px solid;
    height: 40px;
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    justify-content: center;
}

.all .div4 ul{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    height: 40px;
}
.all .div4 ul li{
    padding: 0;
    margin: 0;
}


.all .div4 nav a{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.8vw;
    color: black;
    padding: 10px;
    border-radius: 5%;
    margin: 0;

}
.all  .div4  nav a:hover{
    font-weight: 700;
}
.all  .div4 nav{
    width: 100%;
    margin: auto;
    height: 40px;
    border-right: #90736B 1px solid;
    display: flex;
  justify-content: center;
    
}
.all  .div4  >div{
    height: 40px;
    margin: auto;
}

.all .div4 >div ul li img{
    width:40px;
}
.all .div4 >div ul{
    display: flex;
    justify-content: center;
    align-items: center;
}
.all .div4 .CR{
    color:#ac0000;
    text-shadow: 0.5px 0 #ac0000, -0.5px 0 #ac0000, 0 0.5px #ac0000, 0 -0.5px #ac0000,
    0.5px 0.5px #ac0000, -0.5px -0.5px #ac0000, 0.5px -0.5px #ac0000, -0.5px 0.5px #ac0000;
    letter-spacing: 1px;
}


/* FOOTER HOME*/
footer{
    border-top:#90736B 2px solid;
    border-bottom: #90736B 1px solid;
   
}
footer >div:first-child{
    border-bottom:1px solid #90736B ;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    justify-content: space-between;
    height: 52px;
}
footer >div:first-child >div:first-child{
    display: flex;
    padding-left: 15px;
    align-items: center;
}
footer >div:first-child >div:last-child{
    display: flex;
    padding-right: 15px;
    justify-content: flex-end;
    align-items: center;
}
footer >div:first-child >div:nth-child(2) img{
   width:100%;
   height: 84%;
    object-fit: cover;
    margin-top: -2px;
    margin-bottom: -2px;
}
footer >div:first-child >div:nth-child(2){
    height: 100%;
}
footer >div:first-child >div:first-child img{
    width:36px;
    padding-left: 5px;
}
footer >div:first-child >div:last-child ul{
    display: flex;
    padding-left: 15px;
}
footer >div:first-child >div:last-child ul li img{
    width:30px;
}
footer >div:first-child >div:last-child ul li+li{
    margin-left:10px;
}

footer >div:last-child p{
    text-align: right;
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 11px;
    padding-right: 15px;
}
/* FOOTER ALL */

.allf{
    padding-top: 50px;
    border-top: 1px solid #90736B;
    border-bottom: #90736B 1px solid;
    
}
/* HOME */

.IntroFamma {
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    justify-content: center;
    background-image: url("Assets/Video-Nuages-1-2-clair.gif");
        background-position: top right;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 120%;
    margin-top: 20px;
    border-top: #90736B 1px solid;
}
.IntroFamma >div:first-child{
    border-right: #90736B 1px solid;
    height: 100%;
}
   

.IntroFamma >div:first-child .logF{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: #90736B 1px solid;
}
.IntroFamma >div:first-child .logF img{
    width: 70%;
    margin: auto;
    padding: 15px;
}
.IntroFamma >div:first-child >div:last-child img{
 width:95%;
}
.IntroFamma >div:last-child{
    display: flex;
    flex-direction: column;
}

.IntroFamma >div:last-child >div:first-child{
    display: grid;
    justify-content: center;
    align-items: center;
    background-color:rgba(201,255,255,0.6);
    border-radius: 20px;
    padding: 5%;
    margin: 20% 16% 0% 16%;
}

.IntroFamma >div:last-child >div:first-child p{
    font-family: "Anton";
    font-weight: 35;
    letter-spacing: 0px;
    text-align: center;
    font-style: bold;
    margin: 0;
    font-size: 20px;
    
}

.IntroFamma >div:last-child >div:last-child p{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.IntroFamma >div:last-child >div:first-child >div:nth-child(2).W p{
    font-family: "marmelad";
    font-style: bold;
    font-size: 40px;
    color:#2f77c4;
    text-shadow: 2px 0 #2f77c4, -2px 0 #2f77c4, 0 2px #2f77c4, 0 -2px #2f77c4,
     1px 1px #2f77c4, -1px -1px #2f77c4, 1px -1px #2f77c4, -1px 1px #2f77c4;
     border-radius:10%;
    width:100%;
    text-align: center;
    margin-top: 10px;
    margin: auto;
    line-height: 40px;
    
}
.IntroFamma >div:last-child >div:first-child .I p{
    font-family: "Seaweed Script", cursive;
  font-weight: 400;
  text-align: center;
  font-style: normal;
    letter-spacing:-1px;
    font-size: 30px;
    margin: 0;
    padding-top: 5px;

}
.IntroFamma >div:last-child >div:last-child{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 30px 0;
}
.IntroFamma >div:last-child >div:last-child .exp{
    width: 35%;
    padding-bottom: 40px;
}
.IntroFamma >div:last-child >div:last-child button{
    background-color: red;
    border: none;
    color:white;
    width: 50%;
    height: 38px;
    font-family: "marmelad";
    font-size: 15px;
    border-radius: 20px;
    margin-left: 15px;
    display: grid;
    grid-template-columns: 80% 20%;
   align-items: center;
   justify-content: center;
}
.IntroFamma >div:last-child >div:last-child button:hover{
    background-color: #ac0000;
}
.IntroFamma >div:last-child >div:last-child .download2{
    width:50%;
}
#home .separation{
    height: 15px;
    width:100%;
    object-fit: cover;
}
#home .separation1{
    height: 30px;
    width:100%;
    object-fit: cover;
    border-top: 1px solid #90736B;
    border-bottom: 1px solid #90736B;
}

.Hsection{
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    border-bottom:#90736B 1px solid;
    border-top:#90736B 1px solid;
    height: 200px;
    
}
.Hsujet{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width:140px;
    text-align: right;
    border-right: #90736B 1px solid;
    height: 100%;
    padding: 0 10px;
}
.hide{
    height:0px;
}
.show{
    border-left: #90736B 1px solid;
    display: block; 
    height: 100%;
    background-size:cover ;
    background-repeat: no-repeat;
    background-position: center;
}

/* Motion design */
 #Hsection1 .show{
    width:1150px;
    
    background-image: url(Assets/DART2608-FDM-Video-MAR_9.gif);
    
}  
/* Graphic design web */
#Hsection2 .show{
    width:500px;
    background-image: url(Assets/ND-Exterieur-26-News2.2.gif);
  
} 
/* Web design */
#Hsection3 .show{
    width:450px;
    background-image: url(Assets/Mockup-Naltia-tablette-mobile1.png);
   
}
/* Illustrations */
#Hsection4 .show{
    width:400px;
    background-image: url(Assets/Illustration_reading-girl1.png);
    
}
/* Graphic design Print */
#Hsection5 .show{
    width:800px;
    background-image: url(Assets/CATA-fdm.gif);
 
}
 #Hsection6 .show{
    width:400px;
    background-image: url(Assets/Illustration_reading-girl1.png);
  
} 

#Hsection7 .show{
    width:360px;
    background-image: url(Assets/Salyel-t-shirt-Shaya.jpg);
} 


.Htitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: #90736B 1px solid;
    height: 100%;
}

#home h2{
    font-family: "Gasoek One", sans-serif;
    font-size: 3vw;
    margin: 5px;
    line-height: 3VW;
    color:#ac0000;
    padding-left: 20px;
    margin: auto;
   
}

.Hthemes{
    display: grid;
    grid-template-columns: 25% 75%;
    height: 100%;
}

.Hthemes1{
   margin: auto;
   
}

.Hthemes1 p{
    text-align: center;
    line-height: 20px;

}

/*bouton*/
.Hbutton{
    display: flex;
    align-items: center;
    justify-content: center;
     border-right: #90736B 1px solid;
}
#Button1{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button1 .affiche{
    width:80%;
}

#Button1 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}

#Button5{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button5 .affiche{
    width:80%;
}

#Button5 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}
#Button6{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button6 .affiche{
    width:80%;
}

#Button6 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}
#Button4{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button4 .affiche{
    width:80%;
}

#Button4 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}

#Button2{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button2 .affiche{
    width:80%;
}

#Button2 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}
#Button3{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button3 .affiche{
    width:80%;
}

#Button3 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}
#Button5{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button5 .affiche{
    width:80%;
}

#Button5 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;

}
#Button7{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Button7 .affiche{
    width:80%;
}

#Button7 .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;

}

#ButtonNext{
    display: flex;
    align-items: center;
    justify-content: center;
}
#ButtonNext .affiche{
    width:80%;
}
#ButtonNext .masque{
    width:0%;
    height:0%;
    margin: 0;
    padding: 0;
}
/*bouton*/

#home a img{
    border-radius: 100px;
    padding: 5px; 
      
}
#home a img:hover{
   border-radius: 5px;
   padding:  20px;
   transition: padding 2s, border-radius 2s; 
}


#projets .infos1-2{
    display: flex;
    justify-content: center;
}
#projets .infos1-2 p{
    font-family: "Seaweed Script", cursive;
    font-size: 1vw;
    margin: 0;
    color: black;
   line-height: 60px;
}
#projets{
    border-bottom: #90736B solid 1px;
}
 /* PAGES PROJETS */

 .projet h2{
    font-family: 'Marmelad', sans-serif;
    letter-spacing: 2px;
    font-size:  18px;
    text-align: center;
    width:100%;
    margin-top: 0;
    margin-bottom: 0;

}
.projet h1{
    font-family: "Gasoek One", sans-serif;
    font-size: 40px;
    margin: 5px;
    line-height: 35px;
    color: #ac0000;
    padding-left: 20px;
    margin: auto;
    line-height: 50px;
    letter-spacing: 0px;
    text-align: center;
}
.projet .titreP{
    border-bottom: #90736B 1px solid;
    margin-bottom: 40px;
}
 /* Titre */
 .projetTitre{
    display: grid;
    grid-template-columns: 30% 70%;
    border-top:#90736B 1px solid;
    border-bottom: #90736B 1px solid;
    align-items: center;
    margin-top: 20px;
}


.projetTitre h1{
    font-size:3.8vw;
    margin: 0;
    padding-left: 40px;
    display: flex;
    align-items: center;
    line-height: 100%;
}
 .divers .projetTitre h1{
    font-size:3vw;
    padding-left: 30px;

 }
.infos{
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: center;
    border-left: #90736B 1px solid;
    height: 100%;
    padding-left: 20px;
}
.infos div:last-child{
    border-left: #90736B 1px solid;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
}

/* ProjetTitre2 */
.projetTitre2{
    display: grid;
    grid-template-columns: 35% 65%;
    border-top: none;
    border-bottom:#90736B 1px solid;
    border-top:#90736B 1px solid;
}
.projetTitre2 .infos1 p{
   text-align: center;
}
.projetTitre2 .infosC .infos1{
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: 15px;
   }
.projetTitre2 .infosC{
 display: flex;
 align-items: center;
 justify-content: center;
   border-right: #90736B 1px solid;
}

.projetTitre2 .infosC .infos1 h2{
    border: none;
 }
.projetTitre2 .infosC img{
    max-width: 150px;
    padding: 10px;
}
.projetTitre2 .brief h3{
border-bottom: #90736B 1px solid;
font-family: "Seaweed Script";
font: 30px;
text-align: center;
margin: 0;

}
.projetTitre2 .brief .briefC{
    display: grid;
    grid-template-columns: 40% 60%;
    margin-left: 10px;

}
.projetTitre2 .brief .briefC div:first-child{
   border-right: #90736B 1px solid;
   display: flex;
    justify-content: center;
    align-items: center;
}
.projetTitre2 .brief .briefC div:last-child{
    display: flex;
   justify-content: center;
 }
.projetTitre2 .brief .briefC img{
  max-width: 90%;
  object-fit: contain;
}

/* contenu */
.contenu img{
    width:35%;
    padding:10px;
}
.contenu{
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenu2{
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenu2 img{
    max-width:35%;
   margin:20px;
   padding: 5px;
    border:white solid 1px;
}
.contenu3 img{
    max-width:16%;
    padding:10px;
}
.contenu3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.contenu4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.contenu4 img{
    width:55%;
    padding:10px;

}
#FL {
   display: flex;
   flex-direction: column;
   justify-content: center;
}
#FL img{
    width:60%;
    padding:10px;
}
#FL .img2{
    width:30%;
    padding:10px;
    
}
#FL >div{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: #90736B 1px solid;
}
#FL{
    margin:auto;
    background-image: url("Assets/ND-Focus-Local-background-img.jpg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
 }
#exterieur{
        margin:auto;
        background-image: url("Assets/ND-News-Exterieur-background-img.jpg");
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
     }
#mama {
        background-color: #ffedf5;
     }
#green {
        background-color: #cceae2;
     }
#green >div{
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #90736B 1px solid;
    }     
#green img{
        max-width:30%;
        padding:10px;
    }
.habitat img{
    width:60%;
}
#soldes {
        background-color: #fff4b3;
     }   
#soldes img{
        width:30%;
     }
/* Graphic Print */
#fdm img{
    max-width:65%;
    padding:20px;
}

#ballade img{
    max-width:65%;
    padding:20px;
}
#ballade {
    margin:auto;
    background-image: url("Assets/ND-NOEL-2025-backgroung-img.jpg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: #90736B 1px solid;
}

#noel div:last-child{
    display: flex;
    align-items: center;
    justify-content: center;
}
#noel {
    display: grid;
    grid-template-columns: 25% 75%;
    margin-left: 10px;
}
/* Sujet */


.sujet{
    display: flex;
    border-top: 1px solid #90736B;
    border-bottom: none;
    margin-top: 20px;
}

.sujet img{
    max-width:850px;
}
.sujet >div{
    border-left: #90736B 1px solid;
}
.sujet p:first-child{
    font-family: 'Marmelad' ,sans-serif;
    font-size: 15px;
    border-bottom: #90736B 1px solid;
}
.sujet p{
    padding: 0 15px;
}

.separation{
    height:50px;
    width:100%;
    object-fit: cover;
    border-top: #90736B 1px solid;
    border-bottom: #90736B 1px solid;
   
}

.projet .multiples div:last-child img:last-child{
    width:500px;
    
}
.projet .multiples div:last-child img:first-child{
    padding-right: 50px;
    width:300px;
}

.projet .multiples div:last-child{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 30px 0;

}
.projet .multiples div:first-child,.P .couleurs div:first-child, .P .maquette div:first-child{
    border-bottom:1px solid #90736B ;
    border-top:1px solid #90736B ;
}

.projet .couleurs img{
    width:478px;
    object-fit: contain;
    padding: 0px 7px;
    
}
.projet .couleurs div{
   display: flex;
  justify-content: center;
  padding: 20px 0;
}
.projet .maquette >div:last-child{
   height:600px;
   margin:auto;
   background-image: url("Assets/Parimis-Design-Interface.jpg");
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.projet .voir{
    padding: 50px 0 50px 0;
    display: flex;
    justify-content: center;
}
.projet a button{
    background-color: red;
    border: none;
    color:white;
    width: 200px;
    height: 38px;
    font-family: "marmelad";
    font-size: 15px;
    border-radius: 20px;
    margin-left: 15px;
    display: grid;
    grid-template-columns: 80% 20%;
   align-items: center;
   justify-content: center;
}
.projet a button:hover{
    background-color: #ac0000;
    color: white;

}
.projet .next{
    padding: 50px 0 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top:1px solid #90736B ;
    margin-top: -5px;   
}
.next .Hbutton{
    border-right: none;
}

.fleche{
    color:white;
}
.fleche:hover{
    color:#ac0000;
}
.next .Hbutton .affiche{
    width:70px;
    margin-left:20px;
}

.next .Hbutton .masque{
    width:0px;
    margin-left:20px;
}
.projet .next div p:first-child{
   padding-right: 20px;
}
.projet .next div p:last-child{
    font-family: 'Marmelad', sans-serif;
    color: #2f77c4;
    text-shadow: 1px 0 #2f77c4, -1px 0 #2f77c4, 0 1px #2f77c4, 0 -1px #2f77c4,
    0.5px 0.5px #2f77c4, -0.5px -0.5px #2f77c4, 0.5px -0.5px #2f77c4, -0.5px 0.5px #2f77c4;
    font-size: 25px;
    letter-spacing: 1px;
    
}
.projet .next div:first-child{
    display: flex;
    align-items: center;
   
}


/* PARIMIS */


.logo p{
    border-bottom:1px solid #90736B ;
    text-align: center;
}
.logoParimis >div:first-child{
    display: flex;
    justify-content: center;
}
.logoParimis img{
    width:200px;
    padding: 20px;
}
.logoParimis >div:last-child{
    display: flex;
    justify-content: center;
}

.logoParimis >div:last-child img{
    width:300px;
    padding: 20px;
    margin: auto;
}
.illu{
    text-align: center;
}

.illu img{
    width:450px
}
.naltia #MP{
    border-bottom:#90736B 1px solid ;
}
#MP img{
    width:500px;
}

#MP div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
}
.naltia .travauxTop p{
    text-align: center;
}

  /* MOTION */

.motion h1{
    border:none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height:120px;
    }
  /* GRAPHIC WEB */

  .graphicWeb h1{
    border:none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height:120px;
    }

/* GRAPHIC PRINT */
.print h1{
    border:none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height:120px;
    }
    

/* EBONY */

    /* fruits */


.ebony .sousTitre{
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    border-top: 1px solid #90736B;
    margin-top: 50px;
   
}
.ebony .sousTitre h2{
    border-bottom: none;
    border-top: none;
}
 .sousTitre div:last-child{
    border-left:1px solid #90736B ;
}
 .sousTitre p{
    padding-left: 20px;
    max-width: 600px;
}
 .pattern1{
    min-height:400px;
   margin:auto;
   background-image: url("Assets/Ebony-Resume1.jpg");
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

 .detailsE >div:last-child{
    padding: 30px 0 30px 0;
    max-width:1200px;
    margin:auto;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
}
 .detailsE div:last-child img {
    width:200px;
    margin: 0 10px 0 0;
    border:1px solid #90736B;
}

 .detailsE div:last-child >div{
   display: flex;
   flex-direction: column;
   align-items: center;
}
 .lingerie div:last-child{ 
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}
.lingerie div:last-child img{
    width:250px;
}


    /* Adinkra */
.asterix p{
    padding-left: 30px;
    padding-right: 50px;
}
.asterix{
    border-bottom: #90736B 1px solid;
}
.pattern2{
    min-height:400px;
   margin:auto;
   background-image: url("Assets/Ebony_Resume2.png");
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
 .detailsA >div:last-child{
    padding-top: 30px;
    padding-bottom: 30px;
    max-width:800px;
    margin:auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
}
 .detailsA div:last-child >div{
    display: flex;
    flex-direction: column;
    align-items: center;


 }
 .detailsA div:last-child img {
    width:250px;
    margin: 20px;
    border:1px solid #90736B;

}

 .detailsA div:last-child p {
    width: 250px;

}

/* affiche */

.afficheEI >div:first-child {
    border-bottom:1px solid #90736B;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.afficheEI div:first-child p{
    text-align: left;
    max-width: 1100px;
    padding: 15px ;
    margin: 0;
    display: flex;
    justify-content: center;
}
.afficheEI >div:last-child{
    display: grid;
    grid-template-columns: 55% 45%;
    justify-content: space-around;
    padding: 0;
}

.afficheEI .affiche{
    display: flex;
    justify-content: center;
    border-right: #90736B solid 1px;
}
.afficheEI .affiche >img{
    max-width:480px;
    margin:20px;
    box-shadow: 10px 10px 15px rgba(56, 55, 55,0.2)
}
.composition >div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.composition  img{ 
    width:250px;
    object-fit: cover;
    padding: 20px;
}



/* POKE POKE*/
.poke .top{
    border-top: #90736B 1px solid;
   margin-top: -5px;
}
.poke .sousTitre{
    margin-top: 50px;
    border-top: #90736B 1px solid;
}

 .poke .sousTitre >div:last-child p{
   border-left:none;
} 
.poke .logo p{
    border:none;
}
.poke .sousTitre >div:last-child .logo img{
    width:180px;
    padding: 10px;

}
.poke .sousTitre >div:last-child .logo{
    border-left: #90736B 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.poke .sousTitre div:last-child{
    border-left: none;
}
.poke .sousTitre >div:last-child{
    display: grid;
    grid-template-columns: 55% 45%;
    justify-content: center;
    align-items: center;
}
.poke .travaux >div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
}
.poke .travaux .menu{
    background-image: url(Assets/Poke-background.jpg);
    background-size: cover;
    background-position:bottom;
   
}

.poke .travaux .img1{
    max-width:400px;
    object-fit: cover;
    box-shadow: 10px 10px 15px rgba(56, 55, 55,0.2);
    margin: 30px;
}
.poke .travaux .img2-1, .img2-2{
    box-shadow: 10px 10px 15px rgba(56, 55, 55,0.2);
    margin: 80px 0;
}
.poke .travaux .img2-1{   
    max-width:320px;
    transform: rotate(-15deg); 
}
.poke .travaux .img2-2{
    max-width:320px;
}
.poke .travaux .sacs{
    display:flex;
    justify-content:center;
}
.poke .travaux .sacs img{
   max-width:50%;
    object-fit: cover;
}

.poke .rs >div{
    display: grid;
    grid-template-columns: 60% 40%;
    justify-content: center;
    
}
.poke .rs >div >div:last-child{
    border-left: #90736B 1px solid;
}
.poke .rs >div >div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.poke .rs .img3-1{
    max-width:550px;
    margin-top:20px ;
}
.poke .rs .img3-2{
    max-width:380px;
    margin: 0;
}
.rs h3{
    width:100%;
    text-align: center;
}
.poke .travaux .img4{
    max-width: 400px;
    margin: 20px;
    box-shadow: 10px 10px 15px rgba(56, 55, 55,0.2);
}
/* NALTIA */

.naltia h1{
    border:none;
    font-size: 60px;
    line-height: 55px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height:120px;
    }
.macondo{
    font-family: 'Macondo Swash Caps', cursive;
    font-size: 20px;
}
.paytone{
    font-family: 'Paytone One', sans-serif;
    font-size: 20px;
}
.open{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;

}  
.naltia .projetTitre h2{
    border-top: none;
    border-bottom: none;
}
.naltia .titre {
    border:none;
}

.naltia .sujet h3{
border-top: #90736B 1px solid;
border-bottom: #90736B 1px solid;
font-family: "Seaweed Script";
font: 30px;
text-align: center;
margin: 0;
}

.naltia .sujet img {
    width: 40%;
}
.naltia .sujet >div p{
    margin-top:40px;
}
.naltia .sujet >div{
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.naltia h2{
    border-top:#90736B 1px solid ;
    border-bottom: #90736B 1px solid;
    width: 100%;
 }
 .naltia h3{
    text-align: center;
 }
.naltia p{
    border-bottom: none;
    text-align: left;
}
.naltia .top{
    border-top: #90736B 1px solid;
    margin-top: -5px;
}
.naltia .top >div{
    display: grid;
    grid-template-columns: 40% 60%;
}
.naltia .logo{
    border-right: #90736B 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}
.naltia .logo p{
    max-width: 75%;
}
.naltia .logo >img{
    width:15%;
}
.naltia .details .construction{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.naltia .details .construction img{
    width:40%;
    margin: auto;
}
.naltia .top .details .construction{
    border-bottom: #90736B 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.naltia .top .details .construction img{
    width: 30%;
}
.naltia .top .details .versions{
    display: grid;
    grid-template-columns: 50% 50%;
}

.details .versions .img1{
    width:10%;
    margin: auto;
}
.details .versions .img2{
    width:10%;
    padding-top:75px;
    margin: auto;
    padding-bottom: 20px;
}
.details .versions div:first-child{
    border-right: #90736B 1px solid;
}
.details .versions div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.naltia .logoCouleur{
    border-top: #90736B 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.naltia .logoCouleur img{
    max-width: 50%;
}

.naltia .travaux .typo{
    display: flex;
    justify-content: space-around;
    
}
.naltia .couleurs img{
    width:30%;
}

.naltia .graphics >div{
    display:grid;
    grid-template-columns: 40% 60%;
    justify-content: center;

}
.naltia .graphics .formes{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: #90736B 1px solid;
}
.naltia .graphics .formes div{
    display: flex;
    justify-content: center;
    align-items: center;
} 
.naltia .graphics .formes{
    display: flex;
    justify-content: center;
    align-items: center;
}
.naltia .graphics .formes img{
    width:70%;
    object-fit: cover;
}
.naltia .graphics .pictos .pictos1{
    display: flex;
    justify-content: center;
}
.naltia .graphics .pictos >div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.naltia .graphics .pictos1 img{
    width:25%;
    padding: 20px 0;
}
.naltia .graphics .pictos >div:last-child img{
    width:50%;
}
.naltia .graphics .pictos >div:nth-child(2) img{
    width:70%;
}


.naltia .graphics .pictos >div:first-child{
    border-bottom: #90736B 1px solid;
}
.naltia .graphics .pictos >div:nth-child(2){
    border-bottom: #90736B 1px solid;
}

.naltia .interface .img3{
    max-width: 380px;
    padding: 20px 0;
}
.naltia .interface .img4{
    max-width: 150px;
    padding: 20px 0;
}
.naltia .interface >div{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-around;
    background-image: url("Assets/Naltia-Interface-background.jpg");
    background-attachment: fixed;
   background-position: center;
    padding: 30px 50px;
    background-size: cover;
    background-repeat: no-repeat;
}

.naltia .interface img{
    max-width: 100%;
}
.naltia .interface >div >div{
    display: block;
    background-color: rgba(56, 55, 55, 0);
}

/* B 2 SEE */


.b2see section div{
    border-bottom:none;
}
.b2see h2{
    font-size: 25px;
    border-bottom: none;
}
.b2see p{
    border-bottom: #90736B 1px solid;
    text-align: center;
    margin: 0;
}
.b2see .next p{
    border-bottom: none;
}
.b2see h3{
    text-align: center;
    font-family: 'Marmelad', sans-serif;
    font-size: 16px;
    border-bottom: #90736B 1px solid;
}
.b2see .infos p{
    border-bottom: none;
    padding: 10px 0;
}

     /* HABITAT */
#habitat{
    border-bottom: #90736B 1px solid;
}
#habitat h2{
    border-bottom: none;
    border-top: none;
}

#habitat h3{
    border-bottom: none;
}
#habitat .logob2see img{
    width:13%;
    padding: 10px;
}

#habitat .catalog{
    border-left: #90736B 1px solid;
}
.cata, .cataND{
    border-top: #90736B 1px solid;
    border-bottom: #90736B 1px solid;
}

.infos-cata div:first-child{
    border-bottom: #90736B 1px solid;
   padding-bottom: 40px;
}
.infos-cata p{
    border-bottom: none;

}
.infos-cata div:last-child{
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.travauxB2see .cata{
    display:grid;
    grid-template-columns: 40% 60%;
    justify-content: center;
    align-items: center;
}
.logob2see{
background-image: url("Assets/Img-15-lignes\ -verticales.svg");
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
border-bottom: #90736B 1px solid;
border-top: #90736B 1px solid;
margin-top: 50px;
}

.cata img{
    width:50%;
    display: flex;
    margin: auto;
    border: #c5b8b4 1px solid;  
   margin-bottom: 10px;
   margin-top: 10px;
}

/* B2SEE MOTION*/
.travauxB2see .logob2see img{
    width: 12%;
    padding: 15px;
}

.travauxB2see video{
    width:60%;
    display: flex;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 15px;
    border: #c5b8b4 1px solid;  
    background-color: white;
}
.travauxB2see .banniere{
    border-top: #90736B 1px solid;
}
/* PAGE HABITAT*/

.closePage a img{
    width:2%;
    padding: 10px;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}
.closePage a{
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

.PHabitat .depliant{
margin-bottom: 40px;
border-top: #90736B 1px solid;
border-bottom:#90736B 1px solid ;
}

.PHabitat .depliant img{
    width:35%;
    display: flex;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: #c5b8b4 1px solid;  
}
.PSVal .depliant{
    margin-bottom: 40px;
    border-top: #90736B 1px solid;
    border-bottom:#90736B 1px solid ;
}
.PSVal .depliant img:first-child{
    width:35%; 
}
.PSVal .depliant img:last-child{
    width:35%; 
}
.PSVal .depliant img{
    width:70%;
    display: flex;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: #c5b8b4 1px solid;  
}

/* DIVERS */

.divers .projetTitre{
    display: grid;
    grid-template-columns: 35% 65%;
}

.divers .infos .infos2 img{
    width:100%;
    height: 100%;
    object-fit: cover;
} 
    /* A SENAH */

.divers section{
    border-top: #90736B 1px solid;
    margin-top: 50px;
    border-bottom: #90736B 1px solid;
    }
.divers h2{
    font-size: 25px;
    border-bottom: none;
    border-top: none;
    }
.divers h3{
    text-align: center;
    font-family: 'Marmelad', sans-serif;
    font-size: 16px;
    }
.infos-livreAS{
    display: flex;
    flex-direction: column;
    justify-content: center;
        } 

.infos-livreAS h3{
    line-height: 15px;
       border-bottom: none;
    }   
.infos-livreAS div:first-child{
    border-bottom: #90736B 1px solid;
}
.infos-livreAS p{
    text-align: center;
}
.divers .livreAS{
   display: grid;
   grid-template-columns: 30% 70%;
}
.divers .catalogAS img{
    width: 80%;    
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    margin: auto;
}
.divers .catalogAS {
    border-left: #90736B 1px solid;
    background-color: #fff8d3;
}
.PLivreCuisine .depliant img:first-child{
    width: 30%;
}
.PLivreCuisine .depliant img{
    width: 60%;
    display: flex;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border:#c5b8b4 1px solid;
}
.PLivreCuisine .closePage{
    border-bottom: #90736B 1px solid;
}
.PLivreCuisine .closePage a img{
    width:2%;
    padding: 10px;
    display: flex;
    justify-content: end;
    align-items: flex-end;
    
}
.PLivreCuisine .closePage a{
    display: flex;
    justify-content: end;
    align-items: flex-end;
}
.divers .couvs h3{
    border-bottom: none;
}
.divers .couvs p{
    text-align: center;
    line-height: 10px;
}
.divers .couvs p{
    text-align: center;
    line-height: 5px;
}
.illus{
    background-image: url("Assets/Fond-Illustrations.svg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.couvs .illus img{
    width:80px;
    height: 600px;
    object-fit: cover;
    margin: 20px 20px 20px 20px;   
}
.couvs .illus img:hover{
    width:400px;
    transition:width 2s ease-out;
    
}

.divers .illustrations >div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: #90736B 1px solid;
  
}
.divers .travaux >div >div h3{
    text-align: center;
}
.divers #mode h2{
    border-bottom: #90736B 1px solid;
   
}

.divers .illustrations .illu0 img{
    width:170px;
    object-fit: cover;
   
}

.divers .illustrations  .illu3 {
   padding: 20px 0;
    margin: auto;
    border-bottom: none;
    border-top:#90736B 1px solid ;
    margin-top: 30px;
    
}

.divers .illustrations  .illu3 img{
    width:300px;
    height: 300px;
    object-fit: cover;
    border:white 2px solid;
    margin: 5px;
}
.divers .illu3 .bd{
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:30px 0px;
}

/* SALYEL */

.salyel .sujet img {
 max-width: 90%;
 padding: 20px;
 display: flex;
    align-items: center;
    justify-content: center;
}
.salyel .sujet >div:first-child {
    display: flex;
       align-items: center;
       justify-content: center;
   }
.salyel .sujet {
    display: grid;
    grid-template-columns: 50% 50%;
}

  
.salyel .sujet .logo img {
    max-width: 60%;
  margin: auto;
}

.salyel .sujet .logo h2 {
   border-top: none;
}

.salyel .masques .d-p {
    display: grid;
    grid-template-columns: 50% 50%;
 }
 .salyel .masques .d-p div:first-child{
    border-right:  #90736B 1px solid;
 }
 .salyel .masques .d-p div:first-child >div img{
    max-width: 75%;
 }

 .salyel .masques .d-p div:last-child >div img{
    max-width: 60%;
    padding: 10px;

 }
 .salyel .masques .d-p div >div{
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .salyel .masques h3{
   text-align: center;
 }
 .salyel .collection {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

.salyel .collection img{
    max-width: 90%;
    margin: auto;
  }

.salyel .instagram {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
.salyel .instagram img{
    max-width: 90%;
    margin: auto;
    padding: 10px;
  }


/* CONTACT*/
.contact{
    background-color: rgba(201,255,255,0.6);
    margin: 50px;
    border-radius: 30px;

}
.contact section{
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
}
.contact .photo{
    display: flex;
    justify-content: right;
    align-items: center;
}
.contact .photo img{
    width: 90%;
    padding: 30px 30px 30px 30px;
}
.contact .titre{
    
    display: flex;
    flex-direction: column;
    justify-content: right;
    width:60%;


}
.contact .titre div:first-child p{
    font-family: "Seaweed Script";
    font-size: 20px;
    line-height: 10px;
    margin: 10px;
    font-weight: bold;
    text-align: center;
}

.contact .mailRS{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:30px 50px 30px 50px;
    margin-top: 50px;
}
.contact .mailRS button{
    background-color: red;
    border: none;
    color:white;
    width: 200px;
    height: 38px;
    font-family: "marmelad";
    font-size: 15px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 80% 20%;
    align-items: center;
    justify-content: center;

}
.contact .mailRS button:hover{
    background-color: #ac0000;
}
.contact .mailRS img{
    width: 20px;
}
.contact .titre div:last-child p{
    color: red;
    font-size: 15px;
    line-height: 10px;
    margin: 10px;
    font-weight: bold;
    text-align: center;
}

 @media screen  and (max-width: 1470px){
    .accueil .div2 > div:first-child p{
        font-size:3vw;
    }
    .accueil  .div4 .div4-1 nav a{
        font-size: 0.8vw;
    }
    .all .div2 > div:first-child p{
        font-size:3vw;
    }
    .titre h1 {
        font-size: 4.6vw;
        margin: 0;
        line-height: 100%;
    }
    .all .div2 > div:first-child a {
        font-size: 2.8vw;
        margin-left: 10px;
        font-weight: 100;
    }

    .all .div2 > div:last-child p {
        margin-left: 10px;
    }
    .accueil .div3 p{
        font-size: 1.6vw;
    }
    .accueil .div2 > div:last-child p{
        font-size: 1.9vw;
    }
    .all .div3 .div3-1 nav a{
        font-size: 0.8vw;
       }
} 



/* Tablette 1024px à 768px */
@media screen  and (max-width: 1024px){
    .accueil {
        grid-template-columns: 0% 27% 37% 36%;
    }
    .accueil .div1 img{
        display: none;
    }
    .accueil .div2 > div:last-child p{
        padding-left: 0;
        
    }
    .accueil .div4 .div4-1 nav a{
        font-size: 12px;
        padding-left:10px;
    }
    
    .accueil .div3 p{
        padding-top: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .accueil .div2 > div:first-child a {
        font-size: 3.5vw;
        margin: 0;
    }
    .all .div2 > div:first-child{
        grid-template-columns: 50% 50%;
    }


    .all .div2 > div:last-child p{
        font-size:2vw;
        padding-left: 0;
    }
    .all .div3 .div3-1 nav a{
        font-size: 1.1vw;
    }
    .all .div3 .div3-1 > div ul li + li{
        padding-left: 12px;
    }
    .all .div4 >div ul li img{
        width:20px;
    }
    
    #home h2 {
        font-size: 35px;
        line-height: 35px;
    }

    .Hthemes >div p{
        padding-left: 10px;
    }
    .Htitle{
        padding-left:10px;

    }
     .projet .projetTitre{
         grid-template-columns: 30% 70% 0%;
     }
    .titre h1{
        /* line-height: 100%; */
        height: 60%;
        font-size: 5.6vw;
        padding-left: 10px;
    }
    .titre img{
        height: 40%;
    }
    .infos .infos1{
        height: 60%;
    }
    .infos .infos1 .infos1-1{
        grid-template-columns: 45% 55%;
    }
     .infos .infos1 .infos1-1 p {
        padding-left: 15px;
        font-size: 1.5vw;
        width:100%;
    } 
   

    .infos1 .infos1-2 p{
        font-size: 2.2vw;
        padding-left: 15px;
    }
    .infos2 {
        height: 40%;
    }
    .infos2 p {
        padding: 0;
        width:95%;
    }
   
    .sujet img {
        width:100%;
        margin: auto;
    }
    .sujet{
        display: block;
    }
    .sujet p:first-child{
        border-top: #90736B 1px solid;
    }
    .sujet >div{
        border-left:none;
    }
    .parimis .couleurs div{
        padding:0;
    }
    .parimis .objectifs h2{
        border-top: #90736B 1px solid;
    }
    .separation{
        height: 29px;
    }
    .logo div:last-child > div:first-child img{
        width:220px;
    }
    .projet .maquette > div:last-child {
        background-size:cover;
        background-attachment:scroll ;
    }
    .pattern1{
        height:300px;
    }
    .pattern1, .pattern2{
        background-attachment: scroll;
    }
    .lingerie >div:last-child img {
        width: 200px;
    }
    .afficheEI >div:last-child{
        display: block;
    }
    .affiche{
        border-right: none;
    }
    .composition h2{
        border-top: #90736B 1px solid;
    }
    .poke .sousTitre {
        margin-top: 80px;
    }
    .poke .travaux .img1 {
        max-width:50%;

        }
    
    .poke .rs .img3-1 {
        max-width: 420px;
    }
    .poke .rs .img3-2 {
        max-width: 320px;
    }
    
    .naltia .sujet img {
        width: 80%;
        display: flex;
        align-items: center;
        border-bottom: #90736B 1px solid;
    }
    .naltia .sujet > div p {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .naltia .logo >img{
        width:65%;
        
    }
    .naltia .details .versions .img2 {
        padding-top:80px;
    }
    .naltia .top .logoCouleur img {
        max-width: 65%;
    }
    .naltia .logo > img {
        width: 50%;
    }
    .naltia .top .details .construction img {
        max-width: 60%;
    }
    
    .paytone, .open{
        font-size: 18px;
     }
     .naltia .couleurs >div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .naltia .couleurs >div img{
            height: 220px;
            object-fit: contain;
        
    }
    .naltia .graphics > div {
        grid-template-columns: 35% 65%;
    }
       
    .naltia .graphics .pictos > div:nth-child(2) img {
        width: 100%;
    }
    .btw .travaux .typo{
        justify-content: flex-start;
        padding-left:100px;
    }
    .btw .icons .icons2{
        grid-template-columns: 40% 45%;
    }
    .btw .icons .icons1 {
        grid-template-columns: 22% 25%;
    }
    .btw .interface >div >div{
        grid-template-columns: none;

    }
    .btw .interface > div > div > div {
        padding-top: 50px;
    }
    .btw .interface > div > div > div:last-child {
        padding-top: 50px;
    }
    
    .divers .travaux img {
        width:350px;
        
    }
    .divers h1{
        line-height: 100px;
        text-align: center;
    }
    .divers .illustrations .illu1 img {
        width: 220px;
        height: 320px;
    }    
    .divers .illustrations .illu2 img {
        width: 350px;
        height: 450px;
    }
    .divers .travaux > div > div:first-child img {
        width: 350px;
        height: 493px;
    }
    .divers .illustrations .illu3 img {
        width: 218px;
        height: 218px;
    }
    .divers .mag >div img{
        width:45%;
    }
    .divers .travaux2 > div > div img {
        width: 220px;
        height: 320px;
    }
    .travauxB2see video{
        width:80%;
    }
    footer > div:first-child{
        grid-template-columns: 31% 30% 30%;
    }
   
}




/* Mobile 767px à 320px */
@media screen  and  (max-width: 767px){
    

    #home .IntroFamma{
        border-top: #90736B 1px solid;
        grid-template-columns: none;
        background-image: url("Assets/Video-Nuages-1-2-clair-verticale.gif");
        background-attachment: fixed;
        background-position: top;
        background-repeat:repeat;
        background-size: contain;

    }
    #home h2{
        padding-left: 0;
        text-align: center;
    }

    .IntroFamma >div:first-child {
        border-right: none;
        grid-template-columns: none;
        height: 90%;
        
    }
    .IntroFamma >div:first-child >div:last-child{
        border-bottom: #90736B 1px solid;
        
    }
    .IntroFamma >div:first-child >div:last-child img{
        width:100%;
       }
    .IntroFamma >div:first-child .logF{
        display: flex;
        justify-content: center;
    }
    .IntroFamma >div:first-child .logF img{
        width:90%;
        justify-content: center;
    }
    .IntroFamma >div:last-child >div:first-child p{
        margin-bottom: 0;
    }
    .IntroFamma >div:last-child >div:first-child >div:nth-child(2).W p {
        font-size: 30px;
        line-height: 32px;
        letter-spacing: 3px;
    }
    .IntroFamma >div:last-child >div:first-child .I p{
        font-size: 20px; 
        padding-top: 0;
    }
    .IntroFamma >div:last-child{
        display: grid;
        grid-template-columns: 60% 40%;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .IntroFamma >div:last-child >div:first-child{
        margin: 40px 0px 40px 20px;
        padding: 18px;
        
    }
    .IntroFamma >div:last-child >div:last-child button{
        width:126px;
        margin-right: 10px;
        margin-top: 30px;
        font-size: 10px;
        height: 30px;
    }
    .IntroFamma >div:last-child >div:last-child .exp{
        width:80%;
        padding-bottom: 10px;
    }
    #projets .infos1-2 p {
        font-size: 7vw;
    }    
    #projets{
        margin-top: 20px;
        border-top: #90736B 1px solid;
    }
    #Button5 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button5 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }
      #Button1 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button1 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }
      #Button4 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button4 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }
      #Button2 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button2 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }
      #Button3 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button3 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }
      #Button6 .masque {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
      }
      #Button6 .affiche {
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
      }


    .all{
        margin-top: 10%;
        grid-template-columns: none;
        height: 105px;
        border-bottom: #90736B 2px solid;
    }  

    #H .all{
        grid-template-columns: none;
        height: 105px;
        border-bottom: #90736B 2px solid;
    }
    .all .div1{
        display: none;
    }
      
    .all .div2{
        border-left: none;
        height: 20px;
        align-items: center;
        
    }

    .all .div2 p{
        font-size: 4vw;
    }
    .all .div2 img{
        width:60%;
        margin: auto;
        display: flex;
        align-items: center;
       
    }
    #H .all .div2 img{
        width:25%;
    }
    .all .div3{
        border-left: none;
        border-top: #90736B 1px solid;
        margin: 0;
    }

    .all .div3 img{
        margin:0;
    }
    .all .div4 {
        border-left:none;
        height: 100%;
        margin-top:0;
        padding: 0%;

    }
    .all .div4 nav{
        height: 100%;
    }
    
    .all .div4 div:first-child{
        display: none;
    }
    
    .all .div4 nav a{
        font-size: 3vw;
    }
    .all .div4 >div ul li img {
        width: 80%;
    }
    .all .div4 >div ul:first-child{
       padding-left: 10px;
    }
    .all .div4 >div ul li{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: auto;
    }

   .Hsection{
    grid-template-columns: none;
    height: 260px;
    border-bottom: #90736B 2px solid;
    margin-top: 20px;
    border-top: #90736B 2px solid;
    }
    .Htitle{
        border-top: #90736B 1px solid;
        border-bottom: #90736B 1px solid;
        border-right: none;
        padding-left: 0;
    
    }
    
    .Hsujet{
        border-right: none;
        max-width: 100%;
        text-align: center;
        height: 20px;
    }

    .Hthemes{
        grid-template-columns: 35% 65%;
    }
    .Hthemes p{
       font-size: 10px;
    }
    .Hsujet p{
        width:100%;
    }
    .projet h1{
       padding-left: 0;
       font-size: 9vw;
       line-height: 9vw;
    }

    .projet .projetTitre{
        grid-template-columns: none;
        border-bottom: #90736B 1px solid;
    }
     .projetTitre >div:first-child{
        border-bottom: #90736B 1px solid;
    }
    
    .projetTitre2{
        grid-template-columns: none;
        border-bottom: #90736B 1px solid;
    }
    .projetTitre2 .infosC{
        border-right: none;
    }
    .projetTitre2 .brief h2{
      border-top: #90736B 1px solid;
    }
    .projetTitre2 .brief {
        border-top: #90736B 1px solid;
    }
    .projetTitre2 .brief .briefC{
        grid-template-columns: none;
    }
    .projetTitre2 .brief .briefC div:first-child{
        border-right: none;
    }

    .projetTitre2 .brief .briefC div:last-child{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .projetTitre2 .brief .briefC img{
        width:70%;
    }
    .projetTitre2 .brief .briefC{
        text-align: center;
    }
    #noel{
        grid-template-columns: none;
    }
    .contenu2 img{
        max-width: 90%;
    }
    .projet .next{
        padding: 20px 0 20px 0;
    }
    /* Mobile GRAPHIC DESIGN WEB*/
   
    #exterieur img{
        max-width: 300px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #mama img{
        max-width: 300px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
   
    #green >div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: #90736B 1px solid;
    }     
    #green img{
        max-width:70%;
        padding:10px;
    }
    #FL{
        background-image: url("Assets/ND-Focus-Local-background-img-verticale.jpg");
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
        background-color:#205634 ;

    }
    #FL >div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: #90736B 1px solid;
    }     
    #FL .img2{
        width:80%;
        padding:10px;
    }
    #exterieur{
        background-image: url("Assets/ND-News-Exterieur-background-img2.jpg");
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #soldes img{
        width:80%;
        padding:10px;
    }

 /* Mobile MOTION DESIGN*/

    .travauxB2see video{
        width:90%;
    }


    /* Mobile GRAPHIC DESIGN PRINT*/

    #ballade img{
        max-width: 90%;
    }

    .contenu3{
        flex-direction: column;
    }
    .contenu3 img{
        max-width: 70%;
    }
    .contenu4 img{
        width: 100%;
    }


    .titre h1{
        font-size: 15vw;
        padding-left: 10px;
        text-align: center;
    }
    .titre{
        border-bottom: #90736B 1px solid;
    }
    .titre img{
        margin-bottom: -5px;
    }

    .infos {
        height: 250px;
    }
    .infos .infos1 {
        height: 70%;
    }
    .infos .infos1 p{
        text-align: center;
    }
    .infos2 {
        height: 30%;
    }
    .infos .infos1 .infos1-1{
        grid-template-columns: none;
        
    }
   
    .infos{
        grid-template-columns: none;
        border-left: none;
        padding: 0;
    }
    .infos div:last-child{
        border-left: none;
        padding: 0;
    }
    .infos2{
        width:100%;
        padding: 0;
        border-top: #90736B 1px solid;
    }

    .infos2 p{
        padding-left: 10px;
    }
    

    .logoParimis >div:first-child{
        display: grid;
    }
    .logoParimis img{
        padding: 0;
    }

    .sujet img {
        max-width: 100%;
        margin: auto;

    }
    .logo div:last-child > div:first-child {
        display: block;
        text-align: center;
    }

        /* Mobile-B2SEE*/

    #habitat .logob2see img{
            width:30%;
            padding: 5px;
    }
    .travauxB2see .cata{
        grid-template-columns: none;
    }
    #habitat .catalog{
        border-left:none;
    }
    .b2see h3{
        margin: 5px 0;
    }
    .b2see .infos {
        height: 300px;
    }
    .b2see .infos p{
        border-bottom: none;
        text-align: left;
        padding-left: 10px;
    }
    .infos-cata div:first-child{
        padding:10px 0;
    }
    .infos-cata div:last-child{
        padding:0;
        border-bottom: #90736B 1px solid;
    }
    .cata img{
        width:85%;
    }
   
    .RS img{
        width:90%;
        padding: 0;
    }
    #ND .RS img{
       padding: 10px;
    }
    .valentin .assets .RS >div img{
        width:100%;
        padding: 0;
    }
    .valentin .assets{
        grid-template-columns: none;
    }
    #but .logob2see img{
        width:30%;
        padding: 5px;
    }
    #but .adr video{
        width:85%;
    }
    #but .literie img{
        width:85%;
    }
    #darty .logob2see img{
        width:30%;
        padding: 5px;
    }
    #video1 video{
        width:90%;
        cursor: pointer;
    }
    .closePage a img{
        width: 80%;
    }
    .PHabitat .depliant img{
        width:80%;
    }
    .PSVal .depliant img:first-child{
        width:45%;
    }
    .PSVal .depliant img{
        width:90%;
    }
    /* next*/
    .next .Hbutton img{
        margin: 0;
    }
    .projet .next div:first-child{
        display:inline;
    }
   
    .illu img{
        width:370px
    }

    /* Mobile-Parimis*/
    .parimis .sujet{
        grid-template-columns: none;
    }
    .parimis .couleurs img {
        width: 400px;
    }
    .parimis .sujet .objectifs h2{
        border-top: #90736B 1px solid;
        padding: 0;
    }
    .parimis .infos {
        height: 200px;
    }



    .separation {
        object-fit: cover;
        width:100%;
        height: 50px;
    }
    .projet .maquette > div:last-child{
        background-repeat: repeat-x;
    }
    .ebony .infos {
        height: 150px;
    }
    .detailsE div:last-child img {
        width:150px;

    }
    .lingerie div:last-child img{
        width:170px;
    }
    .afficheEI .affiche > img {
        max-width: 340px;

    }

     /*Mobile-Poke*/
     .poke .infos {
        height: 200px;
    }
    .poke .sousTitre > div:last-child {
        grid-template-columns: none;
    }
    .poke .sousTitre > div:last-child .logo{
        border-left: none;
        border-top: #90736B 1px solid;
    }
    
    .poke .travaux .img1 {
        max-width: 85%;

    }
    .poke .travaux > div {
        margin: auto;
    }
    .poke .travaux .img2-1 {
        max-width: 260px;
        margin: 55px 0;
    }
    .poke .travaux .img2-2 {
        max-width: 260px;
        margin-top: -35px;
        margin-bottom: 55px;
    }
    
    .poke .rs > div {
        grid-template-columns: none

    }
    
    .poke .rs .img3-1 {
        max-width: 350px;
    }
    .poke .rs > div > div:last-child {
        border-left:none;
    }
    .poke .travaux .sacs img {
        max-width:100%;
    }
    .poke .travaux .img4 {
        max-width: 320px;
    }

    /*Mobile-Naltia*/
    .naltia .infos {
        height: 180px;
    }
    .naltia .sujet img{
        padding: 0;
        width:90%;
        display: flex;
        align-items: center;
        border-bottom: none;
    }
   
    .naltia .top > div{
        grid-template-columns: none;
    }
    .naltia .logo{
        border-left: none;
        border-bottom: #90736B 1px solid;
        padding: 50px 0;
    }.naltia .top .details .construction img{
        padding: 30px 0;
    }
    .naltia .top .details .construction img {
        max-width: 85%;
    }
    .details .versions .img1 {
        width: 35%;
    }
    .details .versions .img2 {
        width: 35%;
        padding-top: 50px;
    }
    .naltia .top .logoCouleur img {
        max-width: 100%;
        padding: 20px 0;
    }
    .naltia .logo > img {
        width: 45%;
    }
    .sousTitre p {
        padding-left: 10px;
        max-width: 550px;
    }
    .naltia .travaux .typo p{
        padding-left:10px ;
    }
    .naltia .travaux .typo{
        display: block;
    }
    .paytone, .open{
       font-size: 16px;
    }
    .naltia .typo .typo1{
        margin: 35px 0;
    }
    .naltia .couleurs img {
        width: 360px;
        height: 180px;
    }
    .naltia .graphics >div{
        padding:30px 0;
    }
    .naltia .graphics .pictos .pictos1 {
       flex-direction: column;
       align-items: center;
    }
    .naltia .graphics .pictos > div:first-child{
        border-top: #90736B 1px solid;
    }
    .naltia .graphics .pictos .pictos1 img {
        width:55%;
        padding: 0;
    }
    .naltia .graphics .pictos > div:last-child img {
        width: 90%;
        padding: 20px 0;
    }
    .naltia .graphics .pictos > div:nth-child(2) img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }
    .naltia .interface >div{
        padding: 30px 10px;

    }
    .naltia .interface .img3 {
        max-width: 210px;
        padding: 10px 0;
    }
    .naltia .interface .img4 {
        max-width: 120px;
        padding: 10px 0;
    }
    .naltia .sujet > div p {
        margin-top: 15px;
    }
    .naltia .graphics > div {
        grid-template-columns: none;
        justify-content: center;
    }
    /*Mobile-Illustrations*/
    .divers .livreAS{
        grid-template-columns: none;
    }
    .divers .projetTitre h1{
        font-size: 9vw;
    }
    .divers .catalogAS{
        border-left: none;
    }
    .divers .catalogAS img{
        width:100%;
    }
    .infos-livreAS{
        border-bottom: #90736B 1px solid;
        padding-top:10px;
    }

    .couvs .illus img{
        width:90%;
        height: 450px;
        object-fit: cover;
    }
    .couvs .illus{
        flex-wrap: wrap;
        background-size: 180%;
        background-repeat: repeat-y;
    }
    .divers .travaux img{
        width: 95%;
        padding:0
    }
    .divers .travaux > div > div{
        padding:20px 0;
    }
    .divers .travaux > div > div:first-child{
        border-bottom: #90736B 1px solid;
    }

    .divers .travaux > div > div:first-child img {
        width: 95%;
        padding:0
    }
    .divers .illustrations{
        border-bottom: #90736B 1px solid;
    }
    .divers .illustrations > div{
        border-bottom: none;
    }
    .divers .illustrations .illu0 img{
        width:180px;
        
    }
    
    .divers .illustrations .illu3 img {
        width: 80%;
        height: 300px;
       margin: 10px;
    }
    .divers .mag >div img{
        width:48%;
    }
    .divers .travaux2 > div > div img {
        width: 95%;
        height: 500px;
        padding: 20px 10px;
        object-fit: cover;
        border:none;
    }

    .PLivreCuisine .closePage a img{
        width:8%;
    }
    .PLivreCuisine .depliant img:first-child{
        width:45%;

    }.PLivreCuisine .depliant img{
        width:90%;
    }
    /* Mobile-contact*/

    .contact{
        background-image: none;
        margin: 30px;
        
    }
    .contact section{
        grid-template-columns: none;
        padding-bottom: 30px;
       
       
    }
    .contact section .titre{
        margin-bottom:50px ;
        justify-content: center;
        width: 300px;
        margin: auto;
        border-bottom: none;
    }
    .contact .photo{
        justify-content: center;
    }
    .contact .photo img{
        width:120%;

    }
    .contact .titre h1{
        font-size: 30px;
        
    }
    .contact .mailRS{
        margin-top: 30px;
    }

    /* Mobile-footer*/
    footer{
        margin-top: 50px;
        
    }
    footer > div:first-child{
        grid-template-columns: none;
    }
    footer > div:first-child{
        height: 145px;
    }
    footer > div:first-child > div:nth-child(2) {
        border-top: #90736B 1px solid;
        border-bottom: #90736B 1px solid;
        height: 87%;
    }
    footer > div:first-child > div:nth-child(2) img{
        height: 40px;
    }
    
    footer > div:first-child > div:first-child{
        justify-content: center;
    }
    footer > div:first-child > div:last-child{
        justify-content: center;
    }
    footer > div:last-child p {
        text-align: center;
    }
}