body{
    margin:0;
    padding:0;

}
a{
    text-decoration:none;
}

.box1{
    width:100%;
    height:260px;
    background-color:rgb(147, 0, 0);
    text-align:center;
    color:rgb(0, 0, 0);
}

.box1 .sousTitre{
   
    font-size:30px;
    color:rgb(0, 0, 0);
    opacity:1;
    transition: opacity 0.8s ease-out;
    padding-top:30px;

}

 

 .box1 .sousTitre.active{
    opacity:1;

}

.box1 .langues.active{
    opacity:1;
    
}

.box1 .sousTitre span{
    font-weight:bold;
    opacity:1;
    transition: opacity 0.8s ease-out;
}

.box1 .titre{
    font-size:70Px;
    font-weight:bold;

    padding-top:20px;
    color:white;

}
.barres{
width:80%;
margin-left:auto;
margin-right:auto;
border-left:1Px solid black;
border-right:1Px solid black;
}

.gauche{
    display:flex;
    height:500px;
    padding-top:70px;

}

.droite{
    display:flex;
    height:520px;
}
.box2{
width:30%;
position:absolute;
left:20%;


}

.box2 .titre{
    font-size:60px;
    font-weight:bold;
}

.box2 .sousTitre{
    font-size:50px;
    font-weight:bold;
   
    font-family: 'Dancing Script', cursive;
    margin-top:10px;
    margin-bottom:10px;
}

.box2 .desc{
    font-size:19px;
}

.box3{
    position:absolute;
    right:20%;
    width:350px;
    height:400px;
    background-image:url("../mesImages/cesar-rincon-XHVpWcr5grQ-unsplash.jpg");
    
    background-size: cover;
background-position: center;
}






.box4{
    width:30%;
    position:absolute;
    right:20%;
    
    
    }
    
    .box4 .titre{
        font-size:60px;
        font-weight:bold;
        
        
    }
    
    .box4 .sousTitre{
        font-size:50px;
        font-weight:bold;
        font-family: 'Dancing Script', cursive;
        margin-top:10px;
    margin-bottom:10px;
    }
    
    .box4 .desc{
        font-size:19px;
    }
    
    .box5{
      /*  position:absolute;
     left:20%;
    width:350px;
    height:450px;
    background-color:black;
    overflow:hidden;*/
    position:absolute;
    left:20%;
    width:350px;
    height:400px;
    background-image:url('../mesImages/damian-barczak-5st86wYikQQ-unsplash.jpg');
    
    background-size: cover;
background-position: center;
        
    }

    


    .regroupementCoupes{
       
        width:100%;
        overflow:hidden;
        background-color:black;
    }


    .coupesHomme{
        width:100%;
        height:600Px;
        overflow:hidden;
        text-align:center;
        
    }

    .coupesHomme .titre{
        padding-top:30px;
        font-size:180px;
        font-weight:bold;
        color:rgb(162, 0, 0);

    }

    .coupesHomme .btn{
        margin-left:80Px;
    font-size:40px;
    text-align:center;
    border:1px solid white;
    width:200px;
    padding:6px;
    border-radius:6px;
    color:white;
    background-color:rgb(156, 48, 183);
    }


   

    

    .femme{
        background-image:url("../mesImages/pexels-jack-winbow-1559486.jpg");
        background-size: cover;
    background-position: center;
    width:100%;
    height:600px;
    transition: transform .1s;
    }


   

    .boxCarte{
        display:flex;
        flex-wrap:wrap;
        flex-wrap: wrap;
        margin-bottom:50px;
      }
      
     .violet hr{
        width:200px;
        height:5Px;
        background:rgb(156, 48, 183);
        margin-top:50px;
    }
      
      
      .box{
          
        position: relative; 
         width:40%;
         margin-left:auto;
         margin-right:auto;
         
      }
      
      .box .carte{
         width:100%;
         height:450px;
         background-color:none;
         margin-left: auto;
         margin-right:auto;
         margin-top:50px;
         position: relative;
         overflow:hidden;
         flex-grow:0;
         
         /*
         background-image: url('brushing.jpg');
         background-size: cover;
      background-position: center;
      transform: scale(1);
      overflow: hidden;
      */
      }
      
      
      
      .box .photoCoupe1{
        /* width:320px;
         height:450px;
         */
    
         width:100%;
         height:450px;
      
         background-size: cover;
      background-position: center;
      transform: scale(1);
      
      }
      .n1{
         background-image:url('../mesImages/mide\ fade3.jpg');
      }

      .n2{
        background-image:url('../mesImages/mullet\ .jpg');
     }

     .n3{
        background-image:url('../mesImages/hipster\ 1.jpg');
     }

     .n4{
        background-image:url('../mesImages/hipster\ 2.jpg');
     }
      
     .n5{
        background-image:url('../mesImages/coupe\ classique.jpg');
     }
      
      
     .n6{
        background-image:url('../mesImages/degrade\ bas.jpg');
     }
      
      
     .n7{
        background-image:url('../mesImages/degrade\ bas\ naturel.jpg');
     }
      
      
     .n8{
        background-image:url('../mesImages/degrade\ haut.jpg');
     }
      
     .n9{
        background-image:url('../mesImages/crazy\ hair\ cute.jpg');
     }
      

     .n10{
        background-image:url('../mesImages/crazy\ haircute.jpg');
     }
      


     .n11{
        background-image:url('../mesImages/creasy\ hair\ cut.jpg');
     }
      

     .n12{
        background-image:url('../mesImages/french\ crop.jpg');
     }
      

      
      
      .box .boxDesc{
      height:85px;
      /*width:320px;*/
      width:100%;
      
      position: absolute;
         z-index: 100;
         bottom: 0;
         background-image: repeating-linear-gradient(90deg, hsla(168,0%,63%,0.09) 0px, hsla(168,0%,63%,0.09) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(168,0%,63%,0.09) 0px, hsla(168,0%,63%,0.09) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(168,0%,63%,0.09) 0px, hsla(168,0%,63%,0.09) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(90deg, hsla(168,0%,63%,0.09) 0px, hsla(168,0%,63%,0.09) 1px,transparent 1px, transparent 12px),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20));
         transform: translateY(220px);
         padding:10px;
      }
      .box .boxDesc h2{
         color:white;
         position: relative;
         top:0px;
         padding:0;
         margin:0;
      }
      .box .boxDesc .hr2{
         position: relative;
         top:0px;
         width:30%;
         height:2px;
         margin-top:5px;
         margin-left:0;
         color:white;
         background-color:white;
      }
      .box .boxDesc p{
      color:rgb(255, 255, 255);
      position: relative;
      top:0px;
      font-size:20Px;
      }
      
      .box .boxDesc span{
        text-transform: lowercase;
         font-weight:bold;
         color:white;
         font-size:20px;
      }
      
      
      
      
      .box .bouton{
         width:30%;
         
         text-align:center;
         
         margin-right:auto;
         background-color:rgb(0, 0, 0);
         border-radius:3px;
         font-size:24Px;
         color:rgb(199, 178, 87);
      
      }
      
      .box .bouton1{
         width:30%;
         
         text-align:center;
         margin-right:auto;
         
         background-color:rgb(0, 0, 0);
         border-radius:3px;
         font-size:24Px;
         color:rgb(199, 178, 87);
      
      }
      
      .box .retour{
         width:48px;
         margin-left:auto;
         position:absolute;
         top:10px;
         right:35px;
         
      }
      
      .box .voir{
       background-color:rgb(147, 0, 0);
       width:160px;
       margin-left:auto;
       margin-right:auto;
       color:rgb(255, 255, 255);
       font-size:26px;
       text-align:center;
       border-bottom-left-radius:5px;
       border-bottom-right-radius:5px;
       
       
      }
      


















    
    

        footer{
            background-color:rgb(147, 0, 0);
            width:100%;
            height:200px;
            
        }


        .boxContact{
            display:flex;
            justify-content: space-around;
            align-items: center;
            
            
           
          
           }
           
           .boxContact .item{
               color:rgb(255, 255, 255);
               margin:3%;
               
           }
           
           
           .boxContact .titre{
               font-size:26px;
               font-weight:bold;
               color:rgb(0, 0, 0);
           }
           
           .boxContact .ligne{
               font-size:20px;
               padding:2Px;
           }
           
           .boxContact span{
               font-size:20px;
               font-weight:bold;
           }
           
           .milieu{
            margin-top:7px;
           
           }


           @media(max-width:1200Px)
           {
            .gauche{
              height:530px;
            }
            .droite{
                height:530px ;
            }
            .box2{
            left:16%;
            }
            .box3{
            right:16%; 
            }
            .box4{
              right:16%;  
            }
            .box5{
                left:16%;  
            }

            .coupesHomme .titre{
                font-size:140px;
            }
           }

           @media(max-width:1000px){
            .box1{
                height:310px;
            }
            .coupesHomme .titre{
                font-size:100px;
            }
            .langues{
                width:40px;
                background-color:rgb(0, 0, 0);
                position: relative;
                left:20px;
                
                
                
            }
            .box1 .titre{
                font-size:80px;
            }
            .gauche{
                flex-direction:column;
                align-items:center;
                height:670px;
            }
            .droite{
                flex-direction:column;
                align-items:center;
                height:800px;
            }
            .box2{
                position:relative;
                width:80%;
                left:0;
                margin-bottom:30px;
                
            }
            .box2 .sousTitre{
                padding-top:20px;
            }
            .box3{
                position:relative;
               
                width:100%;
                height:400px;
                right:0;
                margin-bottom:40px;
            }
            .box4{
                position:relative;
                width:80%;

                right:0%;
                margin-bottom:30px;
            }
            .box4 .sousTitre{
                padding-top:20px;
            }
            .box5{
                position:relative;
                width:100%;
                height:400px;
                left:0%;
                margin-bottom:0px;
            }
           

            .box5 .image{
                width:100%;
            }

            /*.barres{
                width:90%;
            }*/
            
            .boxCarte .box{
                width:45%;
               }
            

           
           }





           @media(max-width:700px){

            .barres{
                width:100%;
                border:none;
            }
            .gauche{
            height:880px;
            }

            .droite{
             height:890px;
            }
            .box1{
                height:250px;
            }
            .box1 .titre{
                font-size:38px;
            }
            .regroupementCoupes{
                flex-direction:column;
            }
            .coupesHomme{
                width:100%;
                height:440px;
            }

            .coupesHomme .titre{
                font-size:70px;
            }
            .coupesHomme .btn{
                margin-left:0;
                position:relative;
                left:40%;
                top:0px;
                margin-bottom:100px;
                border:none;
                text-decoration:underline;
                color:rgb(229, 229, 229);
            }
            .shop{
                height:600px;
            }
            .shop .titre{
                font-size:60px;
             top:0px;
            }

            .shop .btn{
               /* margin-left:0;
                position:relative;
                left:40%;
                top:0px;
                margin-bottom:100px;
                border:none;
                text-decoration:underline;*/
                top:200px;
                margin-left:0px;
                margin-right:auto;
                margin-left:auto;
            }
            footer{
                
                height:470px;
                
            }
            .boxContact{
                flex-direction:column;
                align-items:center;
                justify-content:space-around;
                
            }
            .item{
                width:220px;
                
                
            }

            .boxCarte{
                flex-direction:column;
            }


            .boxCarte .box{
             width:100%;
            }

            .box5{
                height:500px;
            }

            .box5 .image{
                width:100%;
            }

            .coupesHomme .titre{
                font-size:50px;
            }

            .box5{
           margin-bottom:50px;
            }

            
           }