/* =========================================================
   CLENOVA - STYLE CSS
   VERSION HARMONISEE
   COULEURS CLENOVA CONSERVEES
========================================================= */


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

    font-family:'Poppins', sans-serif;

}


html{

    scroll-behavior:smooth;

}


body{

    background:#f4f7fb;

    color:#333;

    overflow-x:hidden;

}


img{

    max-width:100%;

}


a{

    color:inherit;

}


button,
input,
select,
textarea{

    font-family:inherit;

}


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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    min-height:90px;

    padding:12px 6%;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    z-index:1000;

    box-shadow:0 5px 25px rgba(0,0,0,0.08);

}


/* =========================================================
   LOGO
========================================================= */

.logo{

    flex-shrink:0;

}


.logo img{

    height:62px;

    width:auto;

    display:block;

    transition:.3s;

}


.logo img:hover{

    transform:scale(1.05);

}


.logo h2{

    color:#0057D9;

    font-size:32px;

    font-weight:700;

    letter-spacing:1px;

}


/* =========================================================
   NAVIGATION
========================================================= */

header nav{

    flex:1;

}


header nav ul{

    display:flex;

    justify-content:center;

    align-items:center;

    list-style:none;

    gap:30px;

}


header nav ul li{

    position:relative;

}


header nav ul li a{

    position:relative;

    display:inline-block;

    padding:10px 0;

    text-decoration:none;

    color:#333;

    font-size:16px;

    font-weight:500;

    white-space:nowrap;

    transition:.3s ease;

}


/* Trait animé */

header nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:2px;

    width:0;

    height:3px;

    background:#0057D9;

    border-radius:10px;

    transition:.35s ease;

}


header nav ul li a:hover{

    color:#0057D9;

}


header nav ul li a:hover::after{

    width:100%;

}


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

.header-contact{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}


.telephone{

    display:flex;

    align-items:center;

    gap:8px;

    color:#0057D9;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    white-space:nowrap;

    transition:.3s;

}


.telephone i{

    font-size:18px;

}


.telephone:hover{

    color:#003c99;

}


/* =========================================================
   BOUTON DEVIS
========================================================= */

.btn-devis{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:11px 24px;

    background:#0057D9;

    color:white !important;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    white-space:nowrap;

    position:relative;

    z-index:10;

    transition:all .3s ease;

}


.btn-devis:hover{

    background:#003c99;

    transform:translateY(-3px);

}


/* =========================================================
   BOUTONS PRINCIPAUX
========================================================= */

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:50px;

    padding:14px 32px;

    border-radius:90px;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}


.btn-primary{

    background:#0057D9;

    color:white;

}


.btn-primary:hover{

    background:#0047B3;

    transform:translateY(-3px);

}


.btn-secondary{

    background:white;

    color:#0057D9;

}


.btn-secondary:hover{

    background:#e9f1ff;

    transform:translateY(-3px);

}


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

.hero{

    min-height:100vh;

    background:url("https://images.unsplash.com/photo-1581578731548-c64695cc6952")
    center/cover no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    text-align:center;

    padding:120px 6% 80px;

}


.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,20,60,0.65);

}


.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    color:white;

}


.hero-content h1{

    font-size:clamp(40px,5vw,60px);

    line-height:1.2;

    margin-bottom:25px;

}


.hero-content p{

    max-width:800px;

    margin:0 auto 40px;

    font-size:clamp(18px,2vw,22px);

}


.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


/* =========================================================
   BLOCS INFOS
========================================================= */

.infos{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,280px));

    justify-content:center;

    gap:30px;

    margin:-60px auto 0;

    padding:0 6%;

    position:relative;

    z-index:5;

}


.info{

    width:100%;

    padding:32px 25px;

    background:white;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

    transition:.3s ease;

}


.info:hover{

    transform:translateY(-6px);

}


.info i{

    display:block;

    font-size:40px;

    color:#0057D9;

    margin-bottom:18px;

}


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

section{

    padding:90px 10%;

}


section h2{

    text-align:center;

    font-size:42px;

    line-height:1.2;

    margin-bottom:45px;

    color:#123;

}


/* =========================================================
   CARTES PRESTATIONS
========================================================= */

.cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}


.card{

    background:white;

    padding:38px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.4s ease;

}


.card:hover{

    transform:translateY(-8px);

}


.card i{

    display:block;

    font-size:55px;

    color:#0057D9;

    margin-bottom:20px;

}


.card h3{

    margin-bottom:15px;

    color:#123;

}


.card p{

    color:#555;

}


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

#apropos{

    text-align:center;

}


#apropos p{

    max-width:900px;

    margin:auto;

    color:#555;

    font-size:18px;

}


/* =========================================================
   ENGAGEMENTS
========================================================= */

#engagements{

    background:white;

}


#engagements ul{

    max-width:700px;

    margin:auto;

    list-style:none;

}


#engagements li{

    background:#f0f5ff;

    padding:20px;

    margin:15px 0;

    border-radius:10px;

    color:#333;

    font-size:18px;

}


/* =========================================================
   RECRUTEMENT ACCUEIL
========================================================= */

#recrutement{

    text-align:center;

}


#recrutement p{

    margin-bottom:30px;

}


/* =========================================================
   CONTACT ACCUEIL
========================================================= */

#contact{

    background:#0057D9;

    color:white;

    text-align:center;

}


#contact h2{

    color:white;

}


#contact p{

    color:white;

}


/* =========================================================
   APPEL A L'ACTION
========================================================= */

.appel-action{

    background:#0057D9;

    color:white;

    text-align:center;

    padding:80px 10%;

}


.appel-action h2{

    color:white;

    font-size:40px;

    margin-bottom:20px;

}


.appel-action p{

    font-size:20px;

    margin-bottom:35px;

}


.appel-action .btn-primary{

    background:white;

    color:#0057D9;

}


.appel-action .btn-primary:hover{

    background:#e9f1ff;

}


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

footer{

    background:#071426;

    color:white;

    text-align:center;

    padding:30px;

}


.footer{

    background:#0b1f3a;

    color:white;

    padding:70px 10% 20px;

}


.footer-container{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}


.footer-col h2{

    color:white;

    font-size:32px;

    margin-bottom:20px;

}


.footer-col h3{

    color:#4da3ff;

    margin-bottom:20px;

    font-size:20px;

}


.footer-col p{

    color:#d8e3f0;

    line-height:1.6;

}


.footer-col ul{

    list-style:none;

    padding:0;

}


.footer-col li{

    margin-bottom:12px;

    color:#d8e3f0;

}


.footer-col a{

    color:#d8e3f0;

    text-decoration:none;

    transition:.3s;

}


.footer-col a:hover{

    color:#4da3ff;

}


.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.2);

    text-align:center;

}


.footer-bottom p{

    color:#d8e3f0;

}


/* =========================================================
   MENU HAMBURGER
========================================================= */

.menu-toggle{

    display:none;

    border:none;

    background:none;

    color:#0057D9;

    font-size:30px;

    cursor:pointer;

}


/* =========================================================
   CORRECTION DES PAGES SOUS LE HEADER
========================================================= */

.contact-page,
.apropos-page,
.devis-page,
.prestations-page,
.recrutement-page,
.galerie-page{

    position:relative;

    z-index:1;

}


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

@media(max-width:1100px){

    header{

        padding-left:4%;

        padding-right:4%;

        gap:15px;

    }


    header nav ul{

        gap:20px;

    }


    header nav ul li a{

        font-size:14px;

    }


    .header-contact{

        gap:10px;

    }


    .telephone{

        font-size:14px;

    }


    .btn-devis{

        padding:10px 18px;

        font-size:14px;

    }

}


/* =========================================================
   TABLETTE / MENU MOBILE
========================================================= */

@media(max-width:900px){

    header{

        min-height:80px;

        padding:10px 5%;

    }


    .logo img{

        height:55px;

    }


    .menu-toggle{

        display:block;

    }


    header nav{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        display:none;

        padding:25px 5%;

        background:white;

        box-shadow:0 10px 25px rgba(0,0,0,.1);

    }


    header nav.active{

        display:block;

    }


    header nav ul{

        flex-direction:column;

        gap:5px;

        text-align:center;

    }


    header nav ul li{

        width:100%;

    }


    header nav ul li a{

        display:block;

        padding:12px;

    }


    header nav ul li a::after{

        display:none;

    }


    .telephone{

        display:none;

    }


    .header-contact .btn-devis{

        display:none;

    }


    .infos{

        grid-template-columns:
            repeat(2,minmax(0,280px));

    }

}


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

@media(max-width:700px){

    header{

        min-height:72px;

        padding:8px 5%;

    }


    .logo img{

        height:50px;

    }


    .menu-toggle{

        font-size:27px;

    }


    header nav{

        top:72px;

    }


    .hero{

        min-height:90vh;

        padding:110px 5% 70px;

    }


    .hero-content h1{

        font-size:36px;

    }


    .hero-content p{

        font-size:17px;

        margin-bottom:30px;

    }


    .buttons{

        flex-direction:column;

        width:100%;

        gap:12px;

    }


    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:300px;

    }


    .infos{

        grid-template-columns:1fr;

        padding:0 5%;

        margin-top:-35px;

        gap:15px;

    }


    section{

        padding:65px 5%;

    }


    section h2{

        font-size:32px;

        margin-bottom:30px;

    }


    .cards{

        grid-template-columns:1fr;

        gap:20px;

    }


    .card{

        padding:30px 22px;

    }


    .appel-action{

        padding:60px 5%;

    }


    .appel-action h2{

        font-size:30px;

    }


    .appel-action p{

        font-size:17px;

    }


    .footer{

        padding:50px 5% 20px;

    }


    .footer-container{

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }

}


/* =========================================================
   TRES PETITS ECRANS
========================================================= */

@media(max-width:400px){

    .hero-content h1{

        font-size:31px;

    }


    .hero-content p{

        font-size:16px;

    }


    .btn-primary,
    .btn-secondary{

        max-width:280px;

    }

}









/* =========================================================
   CLENOVA - PARTIE 2
   PAGES INTERNES / FORMULAIRES / WHATSAPP / RESPONSIVE
   COULEURS D'ORIGINE CONSERVEES
========================================================= */


/* =========================================================
   PAGE DEMANDE DE DEVIS
========================================================= */

.devis-page{

    min-height:100vh;

    padding:145px 8% 80px;

    background:#f4f7fb;

    text-align:center;

}


.devis-page h1{

    max-width:900px;

    margin:0 auto 20px;

    color:#123;

    font-size:clamp(35px,5vw,45px);

    line-height:1.2;

}


.devis-page > p{

    max-width:800px;

    margin:0 auto 40px;

    color:#555;

    font-size:18px;

    line-height:1.6;

}


/* =========================================================
   FORMULAIRE
========================================================= */

.devis-form{

    width:100%;

    max-width:700px;

    margin:0 auto;

    padding:40px;

    background:white;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    text-align:left;

}


.devis-form label{

    display:block;

    margin-bottom:8px;

    color:#123;

    font-size:15px;

    font-weight:600;

}


.devis-form input,
.devis-form select,
.devis-form textarea{

    display:block;

    width:100%;

    max-width:100%;

    padding:14px 15px;

    margin-bottom:22px;

    border:1px solid #ddd;

    border-radius:10px;

    background:white;

    color:#333;

    font-size:16px;

    outline:none;

    transition:.3s ease;

}


.devis-form input,
.devis-form select{

    min-height:50px;

}


.devis-form textarea{

    min-height:140px;

    resize:vertical;

}


.devis-form input::placeholder,
.devis-form textarea::placeholder{

    color:#777;

}


.devis-form input:focus,
.devis-form select:focus,
.devis-form textarea:focus{

    border-color:#0057D9;

    box-shadow:0 0 8px rgba(0,87,217,.2);

}


/* =========================================================
   BOUTON FORMULAIRE
========================================================= */

.devis-form button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:52px;

    padding:15px 20px;

    border:none;

    border-radius:50px;

    background:#0057D9;

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}


.devis-form button:hover{

    background:#0047B3;

    transform:translateY(-3px);

}


/* =========================================================
   PAGE A PROPOS
========================================================= */

.apropos-page{

    min-height:100vh;

    padding:145px 8% 80px;

    background:#f4f7fb;

    text-align:center;

}


.apropos-page h1{

    max-width:900px;

    margin:0 auto 20px;

    color:#123;

    font-size:clamp(36px,5vw,50px);

    line-height:1.2;

}


.intro{

    max-width:900px;

    margin:0 auto 55px;

    color:#555;

    font-size:19px;

    line-height:1.7;

}


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

.apropos-blocs{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    max-width:1100px;

    margin:0 auto 65px;

}


.apropos-card{

    background:white;

    padding:38px 30px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s ease;

}


.apropos-card:hover{

    transform:translateY(-8px);

}


.apropos-card i{

    display:block;

    font-size:50px;

    color:#0057D9;

    margin-bottom:22px;

}


.apropos-card h2{

    margin-bottom:15px;

    color:#123;

    font-size:25px;

}


.apropos-card p{

    color:#555;

    font-size:16px;

    line-height:1.7;

}


/* =========================================================
   VALEURS
========================================================= */

.valeurs{

    max-width:1000px;

    margin:0 auto 50px;

    padding:45px;

    background:white;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}


.valeurs h2{

    margin-bottom:30px;

    color:#123;

}


.valeurs-list{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}


.valeurs-list div{

    padding:14px 23px;

    background:#edf4ff;

    color:#0057D9;

    border-radius:50px;

    font-weight:600;

}


/* =========================================================
   BOUTON A PROPOS
========================================================= */

.apropos-page .btn-primary{

    display:inline-flex;

    margin-top:5px;

}


/* =========================================================
   PAGE RECRUTEMENT
========================================================= */

.recrutement-page{

    min-height:100vh;

    padding:145px 8% 80px;

    background:#f4f7fb;

    text-align:center;

}


.recrutement-page h1{

    max-width:900px;

    margin:0 auto 20px;

    color:#123;

    font-size:clamp(36px,5vw,50px);

    line-height:1.2;

}


.recrutement-blocs{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    max-width:1100px;

    margin:55px auto;

}


.recrutement-card{

    background:white;

    padding:38px 30px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s ease;

}


.recrutement-card:hover{

    transform:translateY(-8px);

}


.recrutement-card i{

    display:block;

    font-size:50px;

    color:#0057D9;

    margin-bottom:22px;

}


.recrutement-card h2{

    margin-bottom:15px;

    color:#123;

    font-size:25px;

}


.recrutement-card p{

    color:#555;

    line-height:1.7;

}


.recrutement-page > h2{

    max-width:800px;

    margin:55px auto 0;

    color:#123;

    font-size:35px;

}


.recrutement-page .devis-form{

    margin-top:35px;

}


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

.galerie-page{

    min-height:100vh;

    padding:145px 8% 80px;

    background:#f4f7fb;

    text-align:center;

}


.galerie-page h1{

    max-width:900px;

    margin:0 auto 20px;

    color:#123;

    font-size:clamp(36px,5vw,50px);

    line-height:1.2;

}


.galerie-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    max-width:1200px;

    margin:55px auto;

}


.galerie-card{

    overflow:hidden;

    background:white;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.4s ease;

}


.galerie-card:hover{

    transform:translateY(-8px);

}


.galerie-card img{

    display:block;

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s ease;

}


.galerie-card:hover img{

    transform:scale(1.06);

}


.galerie-info{

    padding:25px;

}


.galerie-info h3{

    margin-bottom:10px;

    color:#0057D9;

    font-size:24px;

}


.galerie-info p{

    color:#555;

    line-height:1.6;

}


.galerie-page .btn-primary{

    display:inline-flex;

    margin-top:0;

}


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

.contact-page{

    min-height:100vh;

    padding:145px 8% 80px;

    background:#f4f7fb;

    text-align:center;

}


.contact-page h1{

    max-width:900px;

    margin:0 auto 20px;

    color:#123;

    font-size:clamp(36px,5vw,50px);

    line-height:1.2;

}


.contact-infos{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    max-width:1100px;

    margin:55px auto;

}


.contact-card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s ease;

}


.contact-card:hover{

    transform:translateY(-8px);

}


.contact-card i{

    display:block;

    font-size:45px;

    color:#0057D9;

    margin-bottom:20px;

}


.contact-card h3{

    margin-bottom:10px;

    color:#123;

}


.contact-card p{

    color:#555;

    line-height:1.6;

    overflow-wrap:anywhere;

}


.contact-page h2{

    max-width:800px;

    margin:50px auto 30px;

    color:#123;

    font-size:35px;

}


/* =========================================================
   AVIS CLIENTS
========================================================= */

.avis{

    background:#f4f7fb;

    text-align:center;

}


.avis h2{

    margin-bottom:50px;

}


.avis-container{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    max-width:1100px;

    margin:0 auto;

}


.avis-card{

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s ease;

}


.avis-card:hover{

    transform:translateY(-8px);

}


.etoiles{

    color:#0057D9;

    font-size:28px;

    letter-spacing:3px;

    margin-bottom:20px;

}


.avis-card p{

    margin-bottom:20px;

    color:#555;

    font-size:17px;

    line-height:1.7;

    font-style:italic;

}


.avis-card h3{

    color:#123;

    font-size:16px;

}


/* =========================================================
   CHIFFRES
========================================================= */

.chiffres{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

    padding:60px 10%;

    background:white;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    position:relative;

    z-index:5;

}


.chiffre{

    text-align:center;

    padding:20px;

}


.chiffre h2{

    margin-bottom:10px;

    color:#0057D9;

    font-size:45px;

    transition:.3s ease;

}


.chiffre p{

    color:#555;

    font-size:18px;

    font-weight:500;

}


.chiffre:hover h2{

    transform:scale(1.1);

}


/* =========================================================
   WHATSAPP FLOTTANT
========================================================= */

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    min-height:60px;

    padding:14px 21px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#25D366;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    font-size:16px;

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

    z-index:9999;

    transition:.3s ease;

}


.whatsapp-float i{

    font-size:28px;

}


.whatsapp-float:hover{

    transform:translateY(-5px);

    background:#1ebe5d;

}


/* =========================================================
   POPUP WHATSAPP
========================================================= */

.whatsapp-popup{

    position:fixed;

    right:25px;

    bottom:100px;

    width:320px;

    max-width:calc(100vw - 40px);

    background:white;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    overflow:hidden;

    z-index:9999;

}


.popup-header{

    background:#25D366;

    color:white;

    padding:20px;

    display:flex;

    align-items:center;

    gap:15px;

}


.popup-header i{

    font-size:35px;

}


.popup-header p{

    margin:0;

    font-size:14px;

    line-height:1.4;

}


.popup-body{

    padding:25px;

    color:#333;

    font-size:15px;

    line-height:1.5;

}


.popup-btn{

    display:block;

    margin:20px;

    padding:15px;

    background:#25D366;

    color:white;

    text-align:center;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}


.popup-btn:hover{

    background:#1ebe5d;

}


/* =========================================================
   RESEAUX SOCIAUX FLOTTANTS
========================================================= */

.social-floating{

    position:fixed;

    bottom:25px;

    left:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9999;

}


.social-floating a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0057D9;

    color:white;

    border-radius:50%;

    font-size:20px;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);

    transition:.3s ease;

}


.social-floating a:hover{

    transform:translateY(-5px) scale(1.1);

    background:#003c99;

}


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

@media(max-width:900px){

    .devis-page,
    .apropos-page,
    .recrutement-page,
    .galerie-page,
    .contact-page{

        padding:125px 6% 65px;

    }


    .devis-form{

        padding:35px;

    }


    .galerie-card img{

        height:240px;

    }


    .social-floating{

        left:15px;

    }

}


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

@media(max-width:700px){

    .devis-page,
    .apropos-page,
    .recrutement-page,
    .galerie-page,
    .contact-page{

        padding:110px 5% 55px;

    }


    .devis-page h1,
    .apropos-page h1,
    .recrutement-page h1,
    .galerie-page h1,
    .contact-page h1{

        font-size:35px;

        line-height:1.2;

    }


    .devis-page > p{

        font-size:16px;

        margin-bottom:30px;

    }


    .devis-form{

        padding:25px 20px;

        border-radius:20px;

    }


    .devis-form input,
    .devis-form select,
    .devis-form textarea{

        padding:13px;

        margin-bottom:19px;

    }


    .devis-form button{

        font-size:17px;

    }


    .intro{

        font-size:17px;

        margin-bottom:35px;

    }


    .apropos-blocs,
    .recrutement-blocs,
    .galerie-grid,
    .contact-infos,
    .avis-container{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }


    .apropos-card,
    .recrutement-card{

        padding:30px 22px;

    }


    .valeurs{

        padding:30px 20px;

        border-radius:20px;

    }


    .valeurs-list{

        gap:10px;

    }


    .valeurs-list div{

        padding:11px 17px;

        font-size:14px;

    }


    .galerie-card img{

        height:220px;

    }


    .contact-card{

        padding:30px 20px;

    }


    .contact-page h2{

        font-size:30px;

    }


    .avis-card{

        padding:28px 22px;

    }


    .chiffres{

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

        padding:40px 5%;

        gap:10px;

    }


    .chiffre{

        padding:15px 5px;

    }


    .chiffre h2{

        font-size:35px;

    }


    .chiffre p{

        font-size:15px;

    }


    /* WhatsApp mobile */

    .whatsapp-float{

        right:18px;

        bottom:18px;

        width:60px;

        height:60px;

        min-height:60px;

        padding:0;

        border-radius:50%;

    }


    .whatsapp-float span{

        display:none;

    }


    .whatsapp-float i{

        font-size:32px;

    }


    /* Popup WhatsApp */

    .whatsapp-popup{

        right:15px;

        bottom:90px;

        width:calc(100vw - 30px);

    }


    /* Réseaux sociaux */

    .social-floating{

        left:15px;

        bottom:18px;

        gap:8px;

    }


    .social-floating a{

        width:42px;

        height:42px;

        font-size:18px;

    }

}


/* =========================================================
   TRES PETITS TELEPHONES
========================================================= */

@media(max-width:400px){

    .devis-page h1,
    .apropos-page h1,
    .recrutement-page h1,
    .galerie-page h1,
    .contact-page h1{

        font-size:31px;

    }


    .devis-form{

        padding:22px 16px;

    }


    .devis-form input,
    .devis-form select,
    .devis-form textarea{

        font-size:16px;

    }


    .chiffres{

        grid-template-columns:1fr;

    }


    .social-floating{

        display:none;

    }

}


/* =========================================================
   ACCESSIBILITE
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

    outline:3px solid rgba(0,87,217,.35);

    outline-offset:3px;

}


/* =========================================================
   FIN PARTIE 2
========================================================= */
/* ================================
   ESPACE CLIENT
================================ */

.btn-espace-client {
    color: #0057D9 !important;
    font-weight: 700;
    border: 1px solid #0057D9;
    border-radius: 6px;
    padding: 8px 14px !important;
    transition: all 0.3s ease;
}

.btn-espace-client:hover {
    background: #0057D9;
    color: #ffffff !important;
}
/* =========================================================
   ANIMATION D'ACCUEIL CLENOVA
========================================================= */
/* =========================================================
   CLENOVA — INTRO GOUTTE D'EAU
========================================================= */
/* =========================================================
   CLENOVA — CHUTE ULTRA FLUIDE
   UNE SEULE TRAJECTOIRE CONTINUE
========================================================= */


/* ---------------------------------------------------------
   CONTENEUR DE LA GOUTTE
   Le conteneur s'occupe UNIQUEMENT du déplacement
--------------------------------------------------------- */
/* =========================================================
   GOUTTE CLENOVA — CHUTE FLUIDE
========================================================= */
/* =========================================================
   CLENOVA — INTRODUCTION GOUTTE D'EAU
   VERSION COMPLETE
   - Chute fluide
   - Ralentissement naturel avant impact
   - Fusion de la goutte
   - Impact central
   - Grandes ondulations inclinées
   - Compatible ordinateur + mobile
========================================================= */


/* =========================================================
   INTRO PRINCIPALE
========================================================= */

#intro-animation {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    z-index: 99999;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            #ffffff 0%,
            #ffffff 40%,
            #f5fbff 70%,
            #e8f6ff 100%
        );

    opacity: 1;

    pointer-events: all;

    transition:
        opacity 0.8s ease;
}


/* =========================================================
   SCÈNE
========================================================= */

.intro-scene {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   SURFACE DE L'EAU
   Vue légèrement inclinée
========================================================= */

.water-surface {

    position: absolute;

    left: 50%;
    top: 55%;

    width: 100%;
    height: 360px;

    transform:
        translateX(-50%)
        perspective(1100px)
        rotateX(66deg);

    transform-origin:
        center center;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   LUMIÈRE CENTRALE
========================================================= */

.water-light {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 260px;
    height: 75px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.15);

    opacity: 0;

    background:
        radial-gradient(
            ellipse,
            rgba(120,210,255,0.75) 0%,
            rgba(70,180,245,0.35) 30%,
            rgba(80,190,250,0.12) 52%,
            transparent 76%
        );

    filter:
        blur(5px);

    animation:
        water-light-pulse
        1.8s
        ease-out
        2.75s
        forwards;
}


@keyframes water-light-pulse {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    15% {

        opacity: 1;
    }

    40% {

        opacity: 0.85;

        transform:
            translate(-50%, -50%)
            scale(1.6);
    }

    70% {

        opacity: 0.45;

        transform:
            translate(-50%, -50%)
            scale(2.7);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(4.5);
    }
}


/* =========================================================
   GOUTTE
========================================================= */

#intro-drop {

    position: absolute;

    left: 50%;
    top: 55%;

    width: 210px;
    height: 210px;

    object-fit: contain;

    z-index: 10;

    opacity: 0;

    transform:
        translate3d(-50%, -115vh, 0);

    transform-origin:
        center center;

    /*
     * UNE SEULE animation contrôle toute la chute.
     *
     * Aucun autre transform ne vient perturber
     * la trajectoire.
     */

    animation:
        smooth-drop
        2.75s
        cubic-bezier(
            0.20,
            0.65,
            0.28,
            1
        )
        0s
        forwards;

    will-change:
        transform,
        opacity;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


/* =========================================================
   CHUTE
   Trajectoire continue
========================================================= */

@keyframes smooth-drop {

    0% {

        opacity: 0;

        transform:
            translate3d(-50%, -115vh, 0);
    }

    4% {

        opacity: 1;
    }

    /*
     * La goutte traverse rapidement
     * la partie haute.
     */

    35% {

        transform:
            translate3d(-50%, -70vh, 0);
    }

    /*
     * Accélération.
     */

    60% {

        transform:
            translate3d(-50%, -35vh, 0);
    }

    /*
     * Début du ralentissement.
     */

    78% {

        transform:
            translate3d(-50%, -13vh, 0);
    }

    /*
     * Arrivée progressive.
     */

    90% {

        transform:
            translate3d(-50%, -4vh, 0);
    }

    97% {

        transform:
            translate3d(-50%, -0.8vh, 0);
    }

    100% {

        opacity: 1;

        transform:
            translate3d(-50%, 0, 0);
    }
}


/* =========================================================
   FUSION DE LA GOUTTE
   NE COMMENCE QU'APRÈS LA CHUTE
========================================================= */

#intro-drop.melting {

    animation:
        dissolve-drop
        0.65s
        cubic-bezier(
            0.25,
            0.1,
            0.25,
            1
        )
        forwards;
}


/* =========================================================
   DISPARITION / FUSION
========================================================= */

@keyframes dissolve-drop {

    0% {

        opacity: 1;

        filter:
            blur(0);

        transform:
            translate3d(-50%, 0, 0)
            scale(1);
    }

    15% {

        opacity: 0.98;

        filter:
            blur(0.2px);

        transform:
            translate3d(-50%, 1px, 0)
            scale(1.01);
    }

    35% {

        opacity: 0.82;

        filter:
            blur(0.8px);

        transform:
            translate3d(-50%, 3px, 0)
            scale(1.025);
    }

    55% {

        opacity: 0.55;

        filter:
            blur(1.5px);

        transform:
            translate3d(-50%, 5px, 0)
            scale(1.045);
    }

    75% {

        opacity: 0.22;

        filter:
            blur(2.5px);

        transform:
            translate3d(-50%, 8px, 0)
            scale(1.065);
    }

    100% {

        opacity: 0;

        filter:
            blur(4px);

        transform:
            translate3d(-50%, 11px, 0)
            scale(1.08);
    }
}


/* =========================================================
   IMPACT
========================================================= */

.impact {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 38px;
    height: 14px;

    border-radius: 50%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.1);

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,1) 0%,
            rgba(100,205,255,0.9) 25%,
            rgba(50,165,235,0.45) 48%,
            transparent 78%
        );

    filter:
        blur(1px);

    animation:
        impact-wave
        0.9s
        cubic-bezier(.2,.6,.3,1)
        2.73s
        forwards;
}


/* =========================================================
   IMPACT LUMINEUX
========================================================= */

@keyframes impact-wave {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.1);
    }

    12% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(0.8);
    }

    35% {

        opacity: 0.9;

        transform:
            translate(-50%, -50%)
            scale(2);
    }

    65% {

        opacity: 0.45;

        transform:
            translate(-50%, -50%)
            scale(4);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(7);
    }
}


/* =========================================================
   ONDULATIONS
========================================================= */

.ripple {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.02);

    border:
        3px solid rgba(30,145,225,0.72);

    box-shadow:
        0 0 12px rgba(50,170,235,0.22);

    will-change:
        transform,
        opacity,
        width,
        height;

    backface-visibility:
        hidden;
}


/* =========================================================
   ONDE 1
========================================================= */

.ripple-1 {

    animation:
        ripple-one
        1.9s
        cubic-bezier(.12,.55,.20,1)
        2.75s
        forwards;
}


@keyframes ripple-one {

    0% {

        width: 25px;
        height: 9px;

        opacity: 0.98;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    15% {

        opacity: 0.95;
    }

    40% {

        opacity: 0.82;
    }

    65% {

        opacity: 0.50;
    }

    100% {

        width: 620px;
        height: 180px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   ONDE 2
========================================================= */

.ripple-2 {

    animation:
        ripple-two
        2.1s
        cubic-bezier(.12,.55,.20,1)
        2.88s
        forwards;
}


@keyframes ripple-two {

    0% {

        width: 25px;
        height: 9px;

        opacity: 0.88;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    20% {

        opacity: 0.82;
    }

    50% {

        opacity: 0.65;
    }

    75% {

        opacity: 0.32;
    }

    100% {

        width: 870px;
        height: 255px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   ONDE 3
========================================================= */

.ripple-3 {

    animation:
        ripple-three
        2.3s
        cubic-bezier(.12,.55,.20,1)
        3.02s
        forwards;
}


@keyframes ripple-three {

    0% {

        width: 25px;
        height: 9px;

        opacity: 0.76;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    25% {

        opacity: 0.70;
    }

    55% {

        opacity: 0.48;
    }

    80% {

        opacity: 0.22;
    }

    100% {

        width: 1120px;
        height: 330px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   ONDE 4
========================================================= */

.ripple-4 {

    animation:
        ripple-four
        2.5s
        cubic-bezier(.12,.55,.20,1)
        3.16s
        forwards;
}


@keyframes ripple-four {

    0% {

        width: 25px;
        height: 9px;

        opacity: 0.60;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    30% {

        opacity: 0.52;
    }

    60% {

        opacity: 0.34;
    }

    82% {

        opacity: 0.14;
    }

    100% {

        width: 1400px;
        height: 410px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   ONDE 5
========================================================= */

.ripple-5 {

    animation:
        ripple-five
        2.7s
        cubic-bezier(.12,.55,.20,1)
        3.30s
        forwards;
}


@keyframes ripple-five {

    0% {

        width: 30px;
        height: 10px;

        opacity: 0.48;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    35% {

        opacity: 0.38;
    }

    70% {

        opacity: 0.18;
    }

    100% {

        width: 1750px;
        height: 510px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   DISPARITION DE L'INTRO
========================================================= */

#intro-animation.hide-intro {

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.8s ease;
}


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

@media (max-width: 768px) {

    #intro-drop {

        width: 145px;
        height: 145px;
    }


    .water-surface {

        top: 55%;

        width: 145%;

        height: 300px;
    }


    .water-light {

        width: 180px;
        height: 55px;
    }


    .ripple-1 {

        animation-name:
            ripple-one-mobile;
    }


    .ripple-2 {

        animation-name:
            ripple-two-mobile;
    }


    .ripple-3 {

        animation-name:
            ripple-three-mobile;
    }


    .ripple-4 {

        animation-name:
            ripple-four-mobile;
    }


    .ripple-5 {

        animation-name:
            ripple-five-mobile;
    }
}


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

@keyframes ripple-one-mobile {

    0% {

        width: 20px;
        height: 7px;

        opacity: 0.9;
    }

    100% {

        width: 380px;
        height: 110px;

        opacity: 0;
    }
}


@keyframes ripple-two-mobile {

    0% {

        width: 20px;
        height: 7px;

        opacity: 0.8;
    }

    100% {

        width: 550px;
        height: 160px;

        opacity: 0;
    }
}


@keyframes ripple-three-mobile {

    0% {

        width: 20px;
        height: 7px;

        opacity: 0.65;
    }

    100% {

        width: 730px;
        height: 215px;

        opacity: 0;
    }
}


@keyframes ripple-four-mobile {

    0% {

        width: 20px;
        height: 7px;

        opacity: 0.5;
    }

    100% {

        width: 900px;
        height: 265px;

        opacity: 0;
    }
}


@keyframes ripple-five-mobile {

    0% {

        width: 20px;
        height: 7px;

        opacity: 0.35;
    }

    100% {

        width: 1050px;
        height: 305px;

        opacity: 0;
    }
}

/* ============================================================
   ILS NOUS FONT CONFIANCE
============================================================ */

.confiance {
    padding: 80px 20px;
    background: #f4f7fb;
    text-align: center;
}


.confiance-header {
    max-width: 800px;
    margin: 0 auto 45px;
}


.confiance-surtitle {
    display: inline-block;
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #0057D9;
    text-transform: uppercase;
}


.confiance h2 {
    margin: 0 0 15px;

    font-size: 34px;
    font-weight: 700;

    color: #0b1f3a;
}


.confiance-header p {
    margin: 0 auto;

    max-width: 650px;

    font-size: 16px;
    line-height: 1.7;

    color: #667085;
}


/* LOGOS */

.logos-confiance {
    max-width: 1000px;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}


.logo-client {
    width: 250px;
    height: 120px;

    background: #ffffff;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    box-shadow: 0 5px 20px rgba(11, 31, 58, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.logo-client:hover {
    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(11, 31, 58, 0.10);
}


.logo-client img {
    max-width: 180px;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.70;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}


.logo-client:hover img {
    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.04);
}


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

@media (max-width: 768px) {

    .confiance {
        padding: 60px 20px;
    }


    .confiance h2 {
        font-size: 28px;
    }


    .confiance-header p {
        font-size: 15px;
    }


    .logos-confiance {
        gap: 20px;
    }


    .logo-client {
        width: 100%;

        max-width: 280px;

        height: 105px;
    }

}