/* Tous */

*{
    margin:0;
    font-family: 'Poppins', sans-serif;
}

a{
    text-decoration: none;

}


.image-responsive {
    max-width: 80%;
    height: auto;
}


li{
    list-style: none;
}

img{
    display: block;
}

.bodyaccueil{
    background: url("img/fond3.png") no-repeat center;
    background-size:cover;
}

.bouton{
    padding: 4px 35px 4px 35px;
    color:rgb(255, 255, 255);
    font-size: 15px;
    background-color: black;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
}


.bouton a{
    color: white;
    
}


/* Nav */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px;
}

.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-block: 1%;
}

.navbar a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.logo {
    background: url(img/logo.png) no-repeat center;
    background-size: cover;
    margin: 10px;
    padding: 5px;
    height:42px;
    width:52px;
}

.navbar ul li {
    margin-left:3.8em;
}

.navbar a:hover{
    color: #cccccc;
}

.list {
    list-style: none;
    display: flex;
    gap: 25px;
}



#toggler,
.navbar label {
    display: none;
}

@media screen and (max-width: 900px) {


    .navbar{
        justify-content: space-between;
    }
    .menu {
        width: 100%;
        max-height: 0;
        overflow: hidden;
    }
    .list {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .navbar label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    #toggler:checked ~ .menu {
        margin: 0;
        max-height: 100%;
        background-color: #1f2327;
    }

    #toggler:checked ~ .container{
        background-color: #1f2327;
    }

    .navbar ul li {
        margin: 0;
    }
}



/* Header */
h1{
    color:white;
    font-size: 96px;
}

a{
    text-decoration: none;
}

.headaccueil{
    background: url("img/entete3.png") no-repeat center;
    background-size:cover;
    height:776px;
    width: 100%;
    position:relative;
}

.flecheaccueil{
    height: 86px;
    position: relative;
    top: 82%;
    left: 73%;
}


h2{
    font-size: 20px;
}


/* Main */
/* trs */
.lignetrs{
    /* width: 331px; */
    width: 100%;
    height:2px;
    background-color: black;
    border-radius: 20px;
}

.trs{
    display:flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top:72px;
}

.ind>h3, .illu>h3, .photosh>h3{
    margin-top:10px;
    font-weight: bold;
    font-size: 20px;
}

.ind{
    width: 331px;
}

.illu{
    width:331px;
    margin-left:20px;
    margin-right:20px;
}

.photosh{
    width:331px;
}

/* marge bouton */
.ind :last-child{
    margin-top:27px;
}

.illu :last-child{
    margin-top:50px;
}

.photosh :last-child{
    margin-top:51px;
}












/* slider */

.wrapper {
    margin: 0 auto;
    width:100%;
    margin-top: 70px;

}

.slider{
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: auto;
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    align-items: stretch;
    scroll-snap-type: x mandatory;
    justify-content: center;
}

.slider::-webkit-scrollbar {
    display: none;
}

.slider .slide {
    flex-shrink: 0;
    padding: 0;
    scroll-snap-align: center;
}

/* .slider .slide:last-child {
    padding-right: 20px;
} */

.slider .slide > div {
    background-color: #ffffff;
    border-radius: 10px;
    width: 333px; 
    height: 210px; 
}


















/* pres */
.pres{
    margin-top: 146px;
    justify-content: center;
    display:flex;
    flex-flow: wrap;
}

.ind>p{
    margin-top:20px;
}

.illu>p{
    margin-top:20px;
}

.photosh>p{
    margin-top:20px;
}

.presDiv{
    margin-left:47px;
    width: 485px;
    max-width: 80%;
}

.presDiv :last-child{
    margin-top:24px;
}

.lignepres{
    /* width: 485px; */
    width:100%;
    height:2px;
    background-color: black;
    border-radius: 20px;
}

.presDiv{
    margin-top: 172px;
}

.presDiv>h2{
    margin-top:13px;
    font-weight: bold;
    font-size: 32px;
}
/* Section Indesign */

.inde{
    height: 718px;
    background-color: black;
    margin-top: 103px;
    text-align: center;
}

.inde h2{
    color:white;
    font-size: 32px;
    padding-top: 47px;

}

.inde p{
    color:white;
    margin-top:17px;
    font-weight: bold;
    font-size: 20px;
}

.in2{
    align-items: center;
}

.dansIn{
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 46px;
    
}

.dansInmag, .dansInalbum, .dansInlivre{
    margin-left:19px;
}

.inde .bouton{
    margin: 0 auto;
    margin-top: 40px;
    background-color: white;
    padding: 8px 87px 8px 87px;
    color:black;
    font-size: 18px;
}

.inde .btDiv{
    margin-top: 40px;
}



/* Photo */
.photo{
    margin-top: 97px;
    justify-content: center;
    display:flex;
    flex-flow: wrap;
}

.photoDiv{
    margin-top:129px;
    text-align: right;
    margin-right: 52px;
}

.photoDiv h2{
    font-size: 32px;
    font-weight: bold;
    margin-top:11px;
}

.photoDiv p{
    margin-top:5px;
    width: 270px;
}

.lignephoto{
    width: 270px;
    height:2px;
    background-color: black;
    border-radius: 20px;
}

.photoDiv .btDiv{
    margin-top:33px;
}

/* Illustrator */


.barreill{
    margin-top:46px;
    width:100%;
}


.ligneillu{
    width: 100%;
    height:2px;
    background-color: black;
    border-radius: 20px;

}

.illu1{
    margin-top:44px;
    /* margin-left: 385px; */
    /* margin-right: 322px; */
    justify-content: center;
    display:flex;
    flex-flow: wrap;
}
 .illuDiv{
    margin-left: 45px;
    margin-top:181px;
    width:331px;
 }

 .illu2{
    display:flex;
    flex-flow: wrap;
    /* margin-left: 388px; */
    /* margin-right: 322px; */
    justify-content: center;
    margin-top: 93px;

 }

 .illuDiv2{
    margin-top:173px;
    width:306px;
    text-align: right;
 }

 /* .illu2 img{
    margin-left: -37px;;
 } */

 .illustrator p{
    margin-top: 14px;
 }

 .illuDiv h3{
    font-weight: bold;
    font-size: 32px;
 }

 .illuDiv2 h3{
    font-weight: bold;
    font-size: 32px;
 }

 .illustrator .bouton{
    padding: 15px 139px 15px 139px;
    border-radius: 100px;
    font-size: 20px;
 }

 .illustrator .btDiv{
    margin-top: 105px;
    text-align: center;
 }

 /* Photoshop */



 .photoshop{
    margin-top: 90px;
    background-color: black;
    padding-bottom: 90px;

 }

 .photoshop h2{
    padding-top:44px;
    font-weight: bold;
    font-size: 32px;
 }

 .photoshopDiv{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top:24px;
 }

 .photoshop p, .photoshop h3{
    color: white;
 }

 .photoshop h2{
    color: white;
    text-align: center;
 }

 .dansphotodiv{
    margin-right: 46px;
    margin-top:141px;
    text-align: right;  
    width:285px;

 }

 .dansphotodiv h3{
    font-size: 32px;
    font-weight: bold;
    margin-top: 7px;
}

 .dansphotodiv .bouton{
    background-color: white;
    color:black;
 }

 .dansphotodiv .btDiv{
    margin-top: 36px;
 }

 .lignephotosh{
    width: 285px;
    height:2px;
    background-color: white;
    border-radius: 20px;
   
 }




.swipe{
    display:none;
}



.bouton:hover{
    background-color: #cccccc;
}


/*  */
/*  */
/* Responsive Accueil */
/*  */
/*  */
@media (max-width: 1040px) {

    .bodyaccueil{
        background-image: none;
    }

    .headaccueil{
        background-size:cover;
        height:507px;
        width: 100%;
        position:relative;
    }

    /* .photosh{
        display: none;
    } */

    .flecheaccueil{
        display:none;
    }

    .presDiv{
        margin: 0;
        margin-top: 38px;
        text-align: center;
    }

    .inde{
        margin-top:63px;
    }

    .dansInmag{
        display: none;
    }

    .dansInalbum{
        margin: 0;
    }

    .photo img{
        order:1;
    }

    .photoDiv{
        margin: 0;
        padding: 0;
        padding-top: 27px;
        order:2;
        text-align: center;
    }

    .illuDiv{
        margin: 0;
        margin-top: 48px;
        text-align: center;
    }

    .illuDiv2{
        margin: 0;
        margin-top: 45px;
        order:2;
        text-align: center;
    }
    
    .illu2{
        order:1;
    }

    .dansphotodiv{
        order:2;
        text-align: center;
        margin: 0;
        margin-top: 35px;
    }

    .photoshopDiv{
        order:1;
    }




      
}


@media (max-width: 900px) {

    .bodyaccueil{
        background-image: none;
    }

    .headaccueil{
        background: url("img/enteteaccueilreponsive.png") no-repeat center;
        background-size: cover;
        height:407px;
    }

    

    .ind, .illu, .photosh{
        text-align: center;
    }

    .wrapper{
        width:331px;
    }

    .slider{
        justify-content: left;
    }

    /* .illu{
        display: none;
    } */

    /* .photosh{
        display: none;
    } */

    .dansInlivre{
        display: none;
    }

    .photoDiv{
        margin: 0;

    }

    .pres{
        margin-top: 80px
    }

    /* nav ul li{
        margin-left: 5px;


    } */

    .illustrator .bouton{
        padding: 15px 35px 15px 35px;
        border-radius: 100px;
        font-size: 15px;
     }


     .swipe{
        display: block;
        height:30px;
        margin-left: 280px;
     }

    

}






























 /*  */
 /*  */
 /* illustrator */
 /*  */
 /*  */

 .bodyillu{
    background: url("img/fondillu.jpg") no-repeat center;
    background-size:cover;
}

 .headillu{
    background: url("img/enteteillu.png") no-repeat center;
    background-size: cover;
    height: 361px;
 }

 .lignedep{
    background-color: black;
    width: 331px;
    height: 2px;
    border-radius: 20px;
 }

.flecheillu{
    height: 86px;
    position: relative;
    top: 64.5%;
    left: 20%;
}



 .dep{
    display:flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top: 133px;
 }

 .divDep{
    width: 331px;
    margin-top: 171px;
 }

 .rickm{
    background-color: black;
    /* height:570px; */
    margin-top: 87px;
    padding-top: 97px;
    padding-bottom: 103px;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    
 }

 .rickm img{
    height: 370px;
 }

.rickm .lignedep{
    background-color:#ffffff;
}

.rickmDiv{
    color:white;
    margin-top: 125px;
    margin-right: 48px;
    text-align: right;
 }


.pxl{
    display:flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top: 147px;
    margin-bottom: 123px;
 }

.pxlDiv{
    margin-left: 47px;
    margin-top:188px;
 }

.rickm h2, .dep h2, .pxl h2{
    font-weight: bold;
    font-size: 32px;
    margin-top: 10px;

 }

.rickm p, .dep p, .pxl p{
    margin-top: 25px;
    width: 331px;

 }


 @media (max-width: 1040px){

    .bodyillu{
        background: none;
    }


}



@media (max-width: 900px){

    .headillu{
        background: url("img/enteteillusratoresponsive.png") no-repeat center;
        background-size: cover;
        height: 407px;
    }

    .flecheillu{
        display: none;
    }

    .divDep, .rickmDiv, .pxlDiv{
        text-align: center;
        margin: 0;
        margin-top: 30px;
        order:2;

    }

    .dep img, .rickm img, .pxl img{
        order:1;
        height: 80%;
    }



}




























 /*  */
 /*  */
 /* Photoshop */
 /*  */
 /*  */

 .flechephotosh{
    height: 86px;
    top: 61.7%;
    left: 20%;
    position: relative;
}

 .bodyphotosh{
    background: url("img/fondphotoshop.jpg") no-repeat center;
    background-size:cover;
 }

.bodyphotosh h2{
    font-weight: bold;
    font-size: 32px;
    margin-top: 10px;
}

.bodyphotosh p{
    margin-top: 10px;
}

.headphotosh{
    background: url("img/entetephotoshop.jpg") no-repeat center;
    background-size:cover;
    height:361px;
 }

.phmt{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin-top: 136px;
 }

.phmt img{
    height: 308px;
    width: auto;
}

.phmtDiv{
    margin-top: 70px;
    margin-left: 46px;
    width: 319px;
}


.barrephotosh{
    width:100%;
    margin-top:-100px;
}

.mlb{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin-bottom: 88px;
    margin-top: -86px;
    text-align: right;
}

.mlb img{
    height: 620px;
}

.mlbDiv{
    margin-top:205px;
    margin-right:46px;
    width: 319px;

}

.lignephotoshop{
    background-color: black;
    width: 319px;
    height:2px;
    border-radius: 20px;
}


@media (max-width: 1040px) {

    .flechephotosh{
        display: none;
    }

    .bodyphotosh{
        background: none;
    }
    

}


@media (max-width: 900px) {

    .headphotosh{
        background: url("img/entetephotoshopresponsive.png") no-repeat center;
        background-size: cover;
        height: 407px;
    }

    .mlb{
        margin: 0;
    }

    .phmt{
        margin: 0;
        margin-top: 30px;
    }

    .phmt img, .mlb img{
        height: 80%;
    }

    .mlbDiv{
        order:2;
        margin: 0;
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: center;
    }

    .phmtDiv{
        order:1;
        margin: 0;
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: center;
    }

    .barrephotosh{
        display: none;

    }


}


















/*  */
/*  */
/* Photographie */
/*  */
/*  */


.flechephoto{
    height: 86px;
    top: 64.5%;
    left: 20%;
    position: relative;
}


.bodyphotograhie{
    background: url("img/fondphotographie.jpg") no-repeat center;
    background-size:cover;
}

.headphotographie{
    background: url("img/entetephotographie.jpg") no-repeat center;
    background-size: cover;
    height: 361px;
 }


.divPht{
    display: flex;
    flex-flow: wrap;
    margin-top: 90px;
    margin-bottom: 30px;
    width:auto;
}


.divPht img{
    margin-top: 30px;
    height:331px;
    margin-right: 30px;
}

main .divPht{
    justify-content: center;
}


@media (max-width: 1040px){
    
    .bodyphotograhie{
        background: none;
    }

}



@media (max-width: 900px){

    .divPht{
        justify-content: center;
        margin-top: 20px;
        align-items: center;
        text-align: center;
    }
    
    .divPht img{
        margin-right: 0;

    }

    .flechephoto{
        display: none;
    }

    .headphotographie{
        background: url(img/entetephotographieresponsive.png) no-repeat center;
        background-size:cover;
        height:407px;
    }

    
    

}
































/*  */
/*  */
/* Indesign */
/*  */
/*  */

.flecheind{
    height: 86px;
    top: 64.5%;
    left: 20%;
    position: relative;
}

.bodyind{
    background: url("img/fondind.jpg") no-repeat center;
    background-size:cover;
 }

.bodyind h2{
    font-weight: bold;
    font-size: 32px;
    margin-top:20px;
}


.bodyind p{
    margin-top: 20px;
}

.headind{
    background: url("img/enteteindesign.png") no-repeat center;
    background-size: cover;
    height: 361px;
}

.disque img{
    height:400px;
}   

.disque{
    padding-top:134px;
    padding-bottom: 110px;
}


.lotus{
    background-color: black;
    color: white;
    padding-top: 128px;
    padding-bottom: 128px;

}

.livre{
    background-color: black;
    color:white;
    padding-top:112px;
    padding-bottom:112px;
}

.mag{
    padding-top: 160px;
    padding-bottom: 135px;
}
.mag img{
    height:620px;
}

.livre img{
    height: 620px;
}


.lotus img{
    height:427px;
}

.ligneind{
    background-color: black;
    border-radius: 20px;
    width: 334px;
    height:2px;
}



.mag, .lotus, .livre, .disque{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}


.disqueDiv, .livreDiv, .lotusDiv, .magDiv{
    width:334px;

} 

.livreDiv, .lotusDiv{
    margin-right:44px;
    text-align:right;
}

.disqueDiv, .magDiv{
    margin-left: 44px;
}

.disqueDiv{
    margin-top:118px;
}

.livreDiv{
    margin-top: 228px;
}

.magDiv{
    margin-top:200px;
}

.lotusDiv{
    margin-top: 134px;
}

.livre .ligneind, .lotus .ligneind{
    background-color: #ffffff;

}



/*  */
/*  */
/* Responsive */
/*  */
/*  */

@media (max-width: 1040px){



    .bodyind{
        background: none;
    }


    .flecheind{
        display:none;
    }

    nav ul li{
        margin-left: 2px;
    }

   


}



@media (max-width: 900px){

    .headind{
        background: url(img/enteteindesignresponsive.png) no-repeat center;
        background-size:cover;
        height:407px;
    }

    .disque{
        margin:0;
    }

    .disque img{
        height:auto;
    }

    .livre img{
        order:1;
        height:auto;
    }

    .mag img{
        height:auto;
    }

    .livreDiv{
        order:2;
    }

    .lotus img{
        order:1;
        height: auto;
    }

    .lotusDiv{
        order:2;
    }

    .livreDiv, .magDiv, .disqueDiv, .lotusDiv{
        margin: 0;
        margin-top:30px;
        max-width: 80%;
        text-align:center;
    }
}


































/*  */
/*  */
/* Footer */
/*  */
/*  */

footer{
    color:#ffffff;
    flex-flow: wrap;
    background-color: black;
    margin-top: 1px;
    justify-content: center;
    padding-top: 54px;
    padding-bottom: 50px;
}

.footerDiv{
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

.midft{
    display: flex;
    flex-flow: wrap;
    margin-left: 20px;
}

.ftpres{
    display:flex;
}

.ftcontact :first-child, .ftnav p{
    font-weight: bold;
}

.ftpres p{
    width:77px;
    font-weight: bold;
    font-size: 15px;

}

.fticon{
    display:flex;
    margin-left: 100px;
    margin-top:50px;
}

.fticon img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.ftpres img{
    width: 36px;
    height:30px;
    margin-top: 7px;

}

footer p{
    font-weight: normal;
}

footer h5{
    font-size:15px;
}


/* Ajustez l'apparence de la liste de la barre de navigation */
footer nav ul {
    list-style: none;
    margin: 0;
    margin-top: 0px;
    padding: 0;
    display: flex;
    width: 200px;
    flex-wrap: wrap;
}
  
/* Ajustez l'apparence des éléments de la liste de la barre de navigation */
footer nav ul li {
    margin-left: 0px;
    margin-right: 10px;
}
  
/* Ajustez l'apparence des liens de la barre de navigation */
footer nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 12px;
}
  
/* Ajustez l'apparence des liens de la barre de navigation lorsqu'ils sont survolés par la souris */
footer nav ul li a:hover {
    color: #cccccc;
}

footer nav{
    display:flex;
    justify-content: center;
}


@media (max-width: 900px){


   .ftpres{
    margin: 0;
   }

   .midft{
    margin: 0;
    margin-top: 20px;
    margin-left:0;
    justify-content: center;
   }

    
    .ftcontact{
        margin: 0;
    }
}