/* ==================================================
   PIXELS ENSEIGNES
   CSS RESPONSIVE PC / TABLETTE / MOBILE
================================================== */


/* =========================
        RESET GENERAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:Arial, Helvetica, sans-serif;

    color:#222;

    overflow-x:hidden;

    background:#fff;

}



img{

    max-width:100%;

    display:block;

}



:root{

    --magenta:#e6007e;
    --black:#080808;
    --dark:#111;
    --grey:#f5f5f5;
    --white:#fff;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* ==================================================
        HEADER
================================================== */


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(10px);

}



.nav{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}




/* RESEAUX */

.social-menu{

    display:flex;

    align-items:center;

    gap:18px;

}



.social-menu a{

    color:white;

    font-size:20px;

    transition:.3s;

}



.social-menu a:hover{

    color:var(--magenta);

}





/* MENU PC */


nav#menu{

    display:flex;

    align-items:center;

    gap:35px;

}



nav#menu a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



nav#menu a:hover{

    color:var(--magenta);

}




.nav-btn{

    background:var(--magenta);

    color:white!important;

    padding:14px 28px;

    border-radius:40px;

}




/* BURGER */


.burger{

    display:none;

    background:none;

    border:0;

    color:white;

    font-size:30px;

    cursor:pointer;

}





/* ==================================================
        MENU MOBILE CORRIGE
================================================== */


@media(max-width:900px){


header{

    background:rgba(0,0,0,.85);

}



.nav{

    height:75px;

}




nav#menu{

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#111;

    display:none;

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:30px 0;

}



nav#menu.active{

    display:flex;

}



.burger{

    display:block;

}



}
/* ==================================================
        HERO
================================================== */


.hero{

    height:100vh;

    min-height:650px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-align:center;

    color:white;

}



.hero-slider{

    position:absolute;

    inset:0;

    display:flex;

    animation:slider 35s infinite;

}



.hero-slider img{

    width:100vw;

    height:100vh;

    object-fit:cover;

    flex-shrink:0;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}



.hero-content{

    position:relative;

    z-index:2;

    padding:20px;

}



.hero-logo{

    width:500px;

    max-width:90%;

    height:auto;

    margin:0 auto 30px;

}



.hero-slogan{

    font-size:22px;

    letter-spacing:1px;

}



/* ANIMATION */

@keyframes slider{


0%,14%{

transform:translateX(0);

}


20%,34%{

transform:translateX(-100vw);

}


40%,54%{

transform:translateX(-200vw);

}


60%,74%{

transform:translateX(-300vw);

}


80%,94%{

transform:translateX(-400vw);

}


100%{

transform:translateX(0);

}


}





/* ==================================================
        PRESENTATION
================================================== */


.presentation{

    background:var(--grey);

    padding:100px 0;

}



.presentation-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.presentation-text h1{

    font-size:40px;

    margin-bottom:30px;

    color:#111;

}



.presentation-text p{

    font-size:17px;

    line-height:1.8;

    margin-bottom:20px;

    color:#444;

}



.presentation-text strong{

    color:var(--magenta);

}



.presentation-image{

    position:relative;

}



.presentation-image img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:20px;

}



.presentation-image{
    position:relative;
    z-index:1;
}

.presentation-image::after{
    content:none !important;
    display:none !important;
}

/* ==================================================
        TITRES SECTIONS
================================================== */


.section{

    padding:100px 0;

}



h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

    color:#111;

}





/* ==================================================
        SERVICES
================================================== */


.services{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



.service{

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    transition:.3s;

}



.service:hover{

    transform:translateY(-10px);

}



.service img{

    width:100%;

    height:250px;

    object-fit:cover;

}



.service div{

    padding:30px;

}



.service i{

    font-size:35px;

    color:var(--magenta);

}



.service h1{

    font-size:24px;

    margin:20px 0;

    color:#111;

}



.service p{

    line-height:1.6;

    color:#555;

}





/* ==================================================
        TABLETTE
================================================== */


@media(max-width:1024px){


.presentation-content{

    grid-template-columns:1fr;

}


.presentation-image{

    order:-1;

}



.services{

    grid-template-columns:repeat(2,1fr);

}


}





/* ==================================================
        MOBILE
================================================== */


@media(max-width:600px){



.hero{

    height:90vh;

    min-height:550px;

}



.hero-logo{

    width:300px;

}



.hero-slogan{

    font-size:17px;

}



.presentation{

    padding:60px 0;

}



.presentation-text h1{

    font-size:30px;

}



.presentation-text p{

    font-size:16px;

}



.presentation-image img{

    height:300px;

}



.presentation-image::after{

    display:none;

}



.section{

    padding:60px 0;

}



h2{

    font-size:30px;

    margin-bottom:40px;

}



.services{

    grid-template-columns:1fr;

}



.service img{

    height:220px;

}



.service h1{

    font-size:21px;

}


}
/* ==================================================
        GALERIE
================================================== */


.gallery-section{

    background:#090909;

    color:white;

    padding:100px 0;

}



.gallery-section h2{

    color:white;

}



.gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.gallery img{

    width:100%;

    height:350px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;

}



.gallery img:hover{

    transform:scale(1.05);

}





/* ==================================================
        PAGE CONTACT
================================================== */


.contact-page{

    background:#111;

    color:white;

    padding:160px 0 80px;

}



.contact-page h1{

    text-align:center;

    font-size:42px;

    color:var(--magenta);

    margin-bottom:20px;

}



.contact-intro{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

    color:#ddd;

    font-size:18px;

    line-height:1.7;

}



.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}





.contact-form,
.contact-info{

    background:white;

    color:#222;

    padding:40px;

    border-radius:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}



.contact-form h2,
.contact-info h2{

    color:#111;

    text-align:left;

    font-size:26px;

    margin-bottom:25px;

}



.contact-form p{

    color:#555;

    line-height:1.6;

    margin-bottom:25px;

}




/* FORMULAIRE */


.contact-form label{

    display:block;

    font-weight:bold;

    margin-bottom:8px;

    color:#222;

}



.contact-form input,
.contact-form textarea{


    width:100%;

    padding:15px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    font-family:inherit;

}



.contact-form textarea{

    resize:none;

}



.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--magenta);

}



.contact-form button{

    background:var(--magenta);

    color:white;

    border:none;

    padding:16px 35px;

    border-radius:50px;

    cursor:pointer;

    font-weight:bold;

    font-size:16px;

}



.contact-form button:hover{

    background:#b90065;

}





/* INFORMATIONS CONTACT */


.info-box{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:25px;

}



.info-box i{

    color:var(--magenta);

    font-size:25px;

}



.info-box p{

    line-height:1.6;

}



.info-box a{

    color:#222;

    text-decoration:none;

}



.info-box a:hover{

    color:var(--magenta);

}



.contact-info iframe{

    width:100%;

    height:300px;

    border:0;

    border-radius:15px;

}



.honeypot{

    position:absolute;

    left:-9999px;

}





/* ==================================================
        FOOTER
================================================== */


.footer{

    background:#111;

    color:white;

    padding:80px 0 30px;

}



.footer-main{

    display:flex;

    justify-content:space-between;

    gap:60px;

}



.footer-brand{

    max-width:450px;

}



.footer-brand img{

    width:190px;

    margin-bottom:25px;

}



.footer-brand p{

    color:#ccc;

    line-height:1.8;

}



.footer-info h3{

    font-size:24px;

    margin-bottom:30px;

}



.footer-card{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



.footer-card i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    color:#111;

    border-radius:50%;

    font-size:22px;

}



.footer-card p{

    color:#ccc;

}



.footer-bottom{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid #333;

    text-align:center;

}



.footer a{

    color:var(--magenta);

    text-decoration:none;

}





/* ==================================================
        PAGE MENTIONS LEGALES
================================================== */


.legal-page{

    background:#111;

    color:white;

    min-height:80vh;

    padding:160px 0 80px;

}



.legal-page h1{

    text-align:center;

    color:var(--magenta);

    font-size:42px;

    margin-bottom:40px;

}



.legal-page h2{

    text-align:left;

    color:var(--magenta);

    font-size:28px;

    margin:40px 0 20px;

}



.legal-page p{

    color:#ddd;

    line-height:1.8;

    font-size:17px;

    margin-bottom:20px;

}





/* ==================================================
        TABLETTE
================================================== */


@media(max-width:1024px){


.gallery{

    grid-template-columns:repeat(2,1fr);

}



.contact-grid{

    grid-template-columns:1fr;

}



.footer-main{

    flex-direction:column;

}



}





/* ==================================================
        MOBILE
================================================== */


@media(max-width:600px){



.gallery-section{

    padding:60px 0;

}



.gallery{

    grid-template-columns:1fr;

}



.gallery img{

    height:280px;

}



.contact-page{

    padding:120px 20px 60px;

}



.contact-page h1{

    font-size:30px;

}



.contact-form,
.contact-info{

    padding:25px;

}



.contact-form h2,
.contact-info h2{

    font-size:23px;

}



.footer{

    padding:60px 20px 30px;

}



.footer-brand img{

    width:160px;

}



.footer-card{

    align-items:flex-start;

}



.legal-page{

    padding:120px 20px 60px;

}



.legal-page h1{

    font-size:30px;

}



.legal-page h2{

    font-size:23px;

}



.legal-page p{

    font-size:16px;

}


}