/* =========================================================
   TOP CLEAN — STYLE.CSS COMPLET ET RESPONSIVE
   Bleu : #062A59
   Doré : #D8A441
   Compatible PC / tablette / mobile
========================================================= */

:root{
    --blue:#062A59;
    --blue-dark:#041D3D;
    --gold:#D8A441;
    --gold-dark:#B88912;
    --white:#fff;
    --gray:#f6f7fb;
    --text:#555;
    --muted:#69727a;
    --border:#e1e6eb;
}

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

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

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    font-family:"Poppins",Arial,sans-serif;
    background:var(--gray);
    color:var(--blue);
    line-height:1.5;
}

img{
    max-width:100%;
    height:auto;
}

a,button{
    -webkit-tap-highlight-color:transparent;
}

button,input,select,textarea{
    font-family:inherit;
}

/* =========================
   CONTENEUR
========================= */

.container{
    width:min(1200px,92%);
    margin:0 auto;
}

/* =========================================================
   HEADER
   IMPORTANT :
   PC      = menu horizontal
   901+    = menu horizontal
   <=900   = hamburger
   <=768   = hamburger mobile
========================================================= */

.header{
    width:100%;
    position:sticky;
    top:0;
    z-index:9999;
    background:var(--blue);
    box-shadow:0 4px 18px rgba(0,0,0,.12);
}

.header-container{
    width:min(1200px,94%);
    min-height:72px;
    margin:0 auto;

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

    gap:18px;
    position:relative;
}

/* Logo */

.header .logo{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    text-decoration:none;
}

.header .logo img{
    display:block;
    width:auto;
    height:52px;
    max-width:160px;
    object-fit:contain;
}

/* Menu desktop */

.header .navbar{
    flex:1 1 auto;

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

    flex-wrap:nowrap;
    gap:20px;

    min-width:0;
}

.header .navbar a{
    position:relative;

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

    padding:10px 4px;

    color:#fff;
    text-decoration:none;

    font-size:14px;
    font-weight:600;
    white-space:nowrap;

    transition:color .25s ease;
}

.header .navbar a::after{
    content:"";

    position:absolute;
    left:4px;
    right:4px;
    bottom:2px;

    height:2px;
    border-radius:5px;

    background:var(--gold);

    transform:scaleX(0);
    transition:transform .25s ease;
}

.header .navbar a:hover,
.header .navbar a.active{
    color:var(--gold);
}

.header .navbar a:hover::after,
.header .navbar a.active::after{
    transform:scaleX(1);
}

/* Bouton devis header */

.header .header-devis,
.btn-gold{
    flex:0 0 auto;

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

    min-height:44px;
    padding:11px 20px;

    background:var(--gold);
    color:var(--blue);

    border:2px solid var(--gold);
    border-radius:50px;

    text-decoration:none;
    font-size:13px;
    font-weight:800;
    line-height:1.2;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(216,164,65,.16);

    transition:all .25s ease;
}

.header .header-devis:hover,
.btn-gold:hover{
    background:#fff;
    border-color:#fff;
    color:var(--blue);
    transform:translateY(-2px);
}

/* Hamburger */

#menu-toggle{
    display:none;

    flex:0 0 44px;

    width:44px;
    height:44px;

    padding:0;
    margin:0;

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

    border:2px solid var(--gold);
    border-radius:9px;

    background:transparent;
    color:#fff;

    font-size:22px;
    line-height:1;

    cursor:pointer;

    transition:all .25s ease;
}

#menu-toggle:hover{
    background:var(--gold);
    color:var(--blue);
}

#menu-toggle:focus-visible{
    outline:3px solid rgba(216,164,65,.4);
    outline-offset:3px;
}

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

.hero{
    position:relative;

    width:100%;
    min-height:720px;
    height:720px;

    background-image:url("photos/img1.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.hero-content{
    position:relative;
    z-index:2;

    width:min(650px,92%);
    padding-top:140px;
    margin-left:3%;
}

.small-title{
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
}

.hero h1,
.hero h2{
    margin:20px 0;

    color:var(--blue);

    font-size:clamp(44px,5vw,72px);
    line-height:1.08;
    font-weight:800;
}

.hero h1 span,
.hero h2 span{
    display:block;
    margin-top:6px;
    color:var(--gold);
}

.hero p{
    max-width:650px;
    margin:25px 0 35px;

    font-size:20px;
    line-height:1.6;
}

.hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:12px 25px;

    background:#fff;
    color:var(--blue);

    border:2px solid var(--blue);
    border-radius:50px;

    text-decoration:none;
    font-weight:700;

    transition:all .25s ease;
}

.btn-outline:hover{
    background:var(--blue);
    color:#fff;
    transform:translateY(-2px);
}

/* =========================================================
   AVANTAGES
========================================================= */

.advantages{
    padding:55px 0;
    background:#fff;
}

.advantages .container{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;
}

.adv-card{
    text-align:center;
}

.adv-card i{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:90px;
    height:90px;

    margin-bottom:18px;

    border:4px solid var(--gold);
    border-radius:50%;

    background:var(--blue);
    color:var(--gold);

    font-size:36px;
}

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

div.service{
    width:100%;
    padding:70px 0 100px;
}

.service h6,
.service h3{
    width:92%;
    margin:0 auto 10px;

    color:var(--blue);
    font-size:20px;
    font-weight:700;
}

.service p{
    width:92%;
    margin:0 auto;

    color:#476c97;
    line-height:1.7;
}

.service hr{
    width:60%;
    height:3px;

    margin:25px auto;

    border:0;
    background:#977f38;
}

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

#card-rea{
    width:min(1200px,92%);
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;

    padding:30px 0;
}

.rea-card{
    width:100%;
    min-height:470px;

    overflow:hidden;

    background:#fff;
    border-radius:25px;

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

    transition:all .3s ease;
}

.rea-card img{
    display:block;

    width:90%;
    height:390px;

    margin:10px 5% 0;

    object-fit:cover;

    border-radius:20px;
}

.rea-card:hover{
    transform:translateY(-7px);
    box-shadow:0 25px 60px rgba(6,42,89,.18);
}

.rea-card h4{
    padding:15px 10px 5px;
    text-align:center;
}

.rea-card p{
    margin:10px 5%;
    color:var(--text);
}

/* =========================================================
   PRÉSENTATION
========================================================= */

.port h1{
    width:min(900px,92%);
    margin:70px auto 0;

    color:#0B3768;

    font-size:clamp(42px,6vw,70px);
    line-height:1.1;
    text-align:center;
}

.port p{
    width:min(1200px,92%);
    margin:35px auto 70px;

    color:#111;
    font-size:19px;
    line-height:1.8;

    text-align:justify;
}

/* =========================================================
   BANDEAU CONTACT
========================================================= */

.contact-banner{
    width:min(1200px,92%);
    min-height:140px;

    margin:50px auto 0;
    padding:22px 30px;

    background:var(--blue);
    color:#fff;

    border-radius:20px;
    overflow:hidden;
}

.banner-content{
    width:100%;
    min-height:95px;

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

    gap:25px;
}

.logo2{
    flex:0 0 auto;
}

.logo2 img{
    display:block;
    width:180px;
    height:auto;
}

.message{
    flex:1;
    margin:0;
}

.message h2{
    margin-bottom:5px;
    color:#fff;
    font-size:25px;
    line-height:1.2;
}

.message p{
    color:#fff;
    font-size:13px;
    line-height:1.5;
}

.actions{
    width:220px;
    flex:0 0 220px;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.btn-devis{
    position:relative;

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

    width:100%;
    min-height:48px;

    padding:11px 42px 11px 18px;

    background:var(--gold);
    color:var(--blue);

    border:2px solid var(--gold);
    border-radius:50px;

    text-align:center;
    text-decoration:none;

    font-size:14px;
    font-weight:800;
    line-height:1.2;

    transition:all .25s ease;
}

.btn-devis:hover{
    background:#fff;
    border-color:#fff;
    transform:translateY(-2px);
}

.btn-devis span{
    position:absolute;
    right:16px;
    font-size:18px;
}

.telephone{
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-size:12px;
    font-weight:700;
}

.telephone:hover{
    color:var(--gold);
}

/* =========================================================
   CONFIANCE
========================================================= */

.confiance{
    width:min(1200px,92%);

    margin:70px auto 0;
    padding:25px 30px;

    background:#fff;
    border-radius:15px;

    box-shadow:0 10px 35px rgba(6,42,89,.06);
}

.confiance-titre{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    margin-bottom:25px;
}

.confiance-titre h3{
    color:var(--blue);
    font-size:18px;
    text-align:center;
}

.confiance-titre span{
    width:45px;
    height:2px;
    background:var(--gold);
}

.confiance-container{
    display:flex;
    align-items:stretch;
    justify-content:center;
}

.confiance-item{
    width:33.333%;

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

    gap:12px;
    padding:8px 20px;

    border-right:1px solid var(--gold);
}

.confiance-item:last-child{
    border-right:0;
}

.icone{
    flex-shrink:0;
    color:var(--blue);
    font-size:25px;
}

.confiance-item p{
    color:var(--blue);
    font-size:11px;
    line-height:1.4;
    text-align:center;
}

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

.footer{
    margin-top:70px;
    padding-top:55px;

    background:var(--blue);
    color:#fff;
}

.footer-grid{
    width:min(1200px,92%);
    margin:0 auto;

    padding-bottom:45px;

    display:grid;
    grid-template-columns:2fr 1fr 1.5fr;
    gap:50px;
}

.footer-logo{
    display:block;
    width:220px;
    margin-bottom:18px;
}

.footer h4{
    margin-bottom:18px;
    color:#fff;
    font-size:18px;
}

.footer p{
    margin:12px 0;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.7;
}

.footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer li{
    margin-bottom:10px;
}

.footer a{
    color:#fff;
    text-decoration:none;
    transition:color .25s ease;
}

.footer a:hover{
    color:var(--gold);
}

.footer i{
    width:25px;
    margin-right:8px;
    color:var(--gold);
}

.copyright{
    padding:20px;
    border-top:1px solid rgba(255,255,255,.18);

    color:#fff;
    font-size:12px;
    text-align:center;
}

/* =========================================================
   PAGE DÉBARRAS
========================================================= */

.debarraimg,
.debarras{
    position:relative;

    width:100%;
    min-height:650px;

    background-image:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("photos/img2.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.debarras-overlay{
    width:100%;
    min-height:650px;

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

    padding:60px 20px;
}

.debarras-content{
    width:min(1000px,92%);
    margin:auto;
    text-align:center;
}

.debarras-small-title{
    display:inline-block;
    margin-bottom:20px;

    color:var(--gold);
    font-size:15px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.debarras h1{
    max-width:950px;
    margin:0 auto 40px;

    color:#fff;
    font-size:clamp(35px,5vw,58px);
    line-height:1.15;
    font-weight:800;
}

.debarras h1 span{
    display:block;
    margin-top:8px;
    color:var(--gold);
}

.deba-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.debabtn-gold,
.debabtn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:220px;
    min-height:50px;

    padding:14px 28px;

    border-radius:50px;

    font-size:15px;
    font-weight:800;

    text-decoration:none;

    transition:all .25s ease;
}

.debabtn-gold{
    background:var(--gold);
    border:2px solid var(--gold);
    color:var(--blue);
}

.debabtn-outline{
    background:transparent;
    border:2px solid #fff;
    color:#fff;
}

.debabtn-gold:hover{
    background:#fff;
    border-color:#fff;
    transform:translateY(-3px);
}

.debabtn-outline:hover{
    background:#fff;
    color:var(--blue);
    transform:translateY(-3px);
}

.debarras-intro{
    width:100%;
    padding:90px 20px;
    background:#fff;
}

.debarras-text{
    width:min(900px,92%);
    margin:auto;
    text-align:center;
}

.section-label{
    display:inline-block;
    margin-bottom:15px;

    color:var(--gold-dark);
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.debarras-text h2{
    margin-bottom:25px;

    color:var(--blue);
    font-size:clamp(32px,4vw,44px);
    line-height:1.2;
}

.debarras-text h2 span{
    display:block;
    color:var(--gold);
}

.debarras-text p{
    margin-bottom:18px;

    color:#555;
    font-size:17px;
    line-height:1.8;
}

.debarras-why{
    width:min(1100px,92%);
    margin:0 auto 90px;
    padding:60px;

    background:#f7f8fa;
    border-radius:25px;
}

.why-content{
    max-width:800px;
    margin:auto;
    text-align:center;
}

.why-content h2{
    margin-bottom:20px;
    color:var(--blue);
    font-size:clamp(28px,4vw,38px);
}

.why-content h2 span{
    display:block;
    color:var(--gold);
}

.why-content p{
    color:#666;
    font-size:16px;
    line-height:1.8;
}

.problemes{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:20px;
    margin-top:35px;
}

.probleme{
    min-height:140px;

    padding:25px;

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

    background:#fff;
    border-radius:18px;

    color:var(--blue);
    text-align:center;
    font-weight:700;

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

    transition:transform .25s ease;
}

.probleme:hover{
    transform:translateY(-5px);
}

.cle-en-main{
    width:min(1100px,92%);
    margin:0 auto 90px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.cle-image img{
    width:100%;
    height:500px;
    object-fit:cover;

    border-radius:25px;

    box-shadow:0 20px 50px rgba(6,42,89,.12);
}

.cle-content h2{
    margin-bottom:20px;
    color:var(--blue);
    font-size:clamp(30px,4vw,44px);
}

.cle-content h2 span{
    display:block;
    color:var(--gold);
}

.cle-content ul{
    margin:25px 0;
    padding:0;
    list-style:none;
}

.cle-content li{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:16px;

    color:#444;
    font-size:16px;
}

.cle-content li i{
    flex-shrink:0;
    color:var(--gold);
}

.cle-content p{
    margin-bottom:25px;
    color:#555;
    font-size:16px;
    line-height:1.7;
}

/* =========================================================
   PAGE DEVIS
========================================================= */

.devis-page{
    min-height:100vh;

    padding:75px 15px 100px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(216,164,65,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f5f7fa,
            #fff 50%,
            #eef3f8
        );
}

.devis-container{
    width:min(1000px,94%);
    margin:auto;
}

.devis-header{
    margin-bottom:40px;
    text-align:center;
}

.devis-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 20px;
    margin-bottom:18px;

    border:1px solid var(--gold);
    border-radius:50px;

    color:var(--gold-dark);

    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.devis-header h1{
    margin:0;

    color:var(--blue);

    font-size:clamp(35px,5vw,55px);
    line-height:1.1;
    font-weight:800;
}

.devis-header h1 span{
    color:var(--gold);
}

.devis-header h1::after{
    content:"";

    display:block;

    width:70px;
    height:5px;

    margin:20px auto 0;

    background:var(--gold);
    border-radius:10px;
}

.devis-header p{
    width:min(650px,100%);
    margin:22px auto 0;

    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.containerdevis{
    width:100%;
    max-width:900px;

    margin:auto;
    padding:48px;

    background:#fff;

    border:1px solid rgba(6,42,89,.08);
    border-radius:28px;

    box-shadow:0 25px 70px rgba(6,42,89,.10);
}

.containerdevis h2{
    margin-bottom:40px;

    color:var(--blue);
    font-size:34px;
    font-weight:800;
    text-align:center;
}

.containerdevis h2::after{
    content:"";

    display:block;

    width:55px;
    height:4px;

    margin:14px auto 0;

    background:var(--gold);
    border-radius:10px;
}

.containerdevis form{
    display:flex;
    flex-direction:column;
}

.containerdevis .form-group{
    margin-bottom:23px;
}

.containerdevis label{
    display:block;
    margin-bottom:9px;

    color:var(--blue);
    font-size:15px;
    font-weight:700;
}

.containerdevis input[type="text"],
.containerdevis input[type="tel"],
.containerdevis input[type="email"],
.containerdevis input[type="file"],
.containerdevis select,
.containerdevis textarea{
    display:block;

    width:100%;
    min-height:52px;

    padding:14px 16px;

    border:1.5px solid var(--border);
    border-radius:13px;

    background:#f8fafc;
    color:var(--blue);

    font-size:15px;

    outline:none;

    transition:all .25s ease;
}

.containerdevis input::placeholder,
.containerdevis textarea::placeholder{
    color:#9ba5ae;
}

.containerdevis input:focus,
.containerdevis select:focus,
.containerdevis textarea:focus{
    border-color:var(--gold);
    background:#fff;

    box-shadow:0 0 0 4px rgba(216,164,65,.12);
}

.containerdevis textarea{
    min-height:150px;
    resize:vertical;
    line-height:1.6;
}

.containerdevis select{
    cursor:pointer;
}

.containerdevis input[type="file"]{
    padding:12px;
    background:#fff;
    cursor:pointer;
}

.containerdevis small{
    display:block;
    margin-top:7px;

    color:#7b8389;
    font-size:12px;
}

.containerdevis button{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:54px;

    margin-top:10px;
    padding:15px 25px;

    border:2px solid var(--gold);
    border-radius:50px;

    background:var(--gold);
    color:var(--blue);

    font-size:16px;
    font-weight:800;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(216,164,65,.20);

    transition:all .25s ease;
}

.containerdevis button:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;

    transform:translateY(-3px);
}

.containerdevis .success{
    margin-bottom:25px;
    padding:16px 18px;

    border-left:5px solid #2e8b57;
    border-radius:10px;

    background:#edf8f1;
    color:#216b43;

    font-size:14px;
}

.containerdevis .erreur{
    margin-bottom:12px;
    padding:15px 18px;

    border-left:5px solid #c0392b;
    border-radius:10px;

    background:#fff1f0;
    color:#a52b20;

    font-size:14px;
}

.containerdevis .devis-note{
    margin-top:15px;
    color:#8a9298;
    font-size:12px;
    text-align:center;
}

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

.contact-page{
    min-height:750px;
    padding:90px 20px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(6,42,89,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f9fa,
            #eef1f3
        );
}

.contact-container{
    width:min(1100px,94%);
    margin:auto;
}

.contact-header{
    margin-bottom:55px;
    text-align:center;
}

.contact-label{
    display:inline-block;

    padding:8px 18px;
    margin-bottom:15px;

    border:1px solid var(--gold);
    border-radius:50px;

    color:var(--gold-dark);

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.contact-header h1{
    margin-bottom:18px;

    color:var(--blue);

    font-size:clamp(35px,5vw,50px);
    line-height:1.15;
    font-weight:800;
}

.contact-header h1 span{
    color:var(--gold);
}

.contact-header p{
    max-width:680px;
    margin:auto;

    color:var(--muted);

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

.contact-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;

    overflow:hidden;

    background:#fff;
    border-radius:22px;

    box-shadow:0 25px 70px rgba(6,42,89,.13);
}

.contact-left{
    position:relative;

    padding:55px 45px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(216,164,65,.18),
            transparent 30%
        ),
        var(--blue);

    color:#fff;
}

.contact-left h2{
    margin-bottom:22px;
    color:#fff;
    font-size:36px;
    line-height:1.2;
}

.contact-left h2 span{
    color:var(--gold);
}

.contact-description{
    max-width:400px;
    margin-bottom:35px;

    color:rgba(255,255,255,.78);

    font-size:16px;
    line-height:1.8;
}

.contact-badge{
    display:inline-block;
    margin-bottom:25px;
}

.contact-badge span{
    color:var(--gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.contact-main-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    padding:15px 24px;

    background:var(--gold);
    color:var(--blue);

    border-radius:50px;

    text-decoration:none;
    font-weight:800;

    transition:all .25s ease;
}

.contact-main-button:hover{
    background:#fff;
    transform:translateY(-3px);
}

.contact-main-button span{
    font-size:20px;
}

.contact-right{
    display:flex;
    flex-direction:column;
    gap:14px;

    padding:35px;

    background:#fff;
}

.contact-box{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    background:#f8fafc;

    border:1px solid #edf0f2;
    border-radius:14px;

    color:var(--blue);
    text-decoration:none;

    transition:all .25s ease;
}

.contact-box:hover{
    transform:translateX(5px);
    border-color:var(--gold);
    background:#fff;

    box-shadow:0 8px 25px rgba(6,42,89,.08);
}

.contact-box-icon{
    width:52px;
    height:52px;
    min-width:52px;

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

    background:var(--blue);
    color:var(--gold);

    border-radius:12px;
    font-size:22px;
}

.contact-box-content{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
}

.contact-box-label{
    color:#8a9298;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.contact-box-content strong{
    color:var(--blue);
    font-size:16px;
}

.contact-box-content small{
    color:#7b8389;
    font-size:13px;
}

.contact-arrow{
    color:var(--gold);
    font-size:22px;
}

.contact-bottom{
    display:flex;
    align-items:center;
    gap:25px;

    margin-top:30px;

    color:#737b82;
    font-size:13px;
}

.contact-bottom strong{
    color:var(--blue);
    margin-right:8px;
}

.contact-bottom-line{
    flex:1;
    height:1px;
    background:#d9dde0;
}

/* =========================================================
   TABLETTE LARGE
   769px → 1100px
========================================================= */

@media screen and (min-width:769px) and (max-width:1100px){

    .header-container{
        width:94%;
        gap:10px;
    }

    .header .logo img{
        height:46px;
        max-width:140px;
    }

    .header .navbar{
        gap:10px;
    }

    .header .navbar a{
        padding:9px 3px;
        font-size:12px;
    }

    .header .header-devis{
        min-width:125px;
        padding:10px 14px;
        font-size:12px;
    }

    .hero{
        min-height:600px;
        height:600px;
    }

    .hero-content{
        max-width:58%;
        padding-top:100px;
        margin-left:4%;
    }

    .advantages .container{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #card-rea{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rea-card{
        min-height:450px;
    }

    .rea-card img{
        height:370px;
    }

    .problemes{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cle-en-main{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-card{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   TABLETTE / MOBILE
   <= 768px
   LE MENU NE PREND PLUS DEUX LIGNES :
   il devient hamburger.
========================================================= */

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

    .header{
        padding:7px 0;
    }

    .header-container{
        width:94%;
        min-height:52px;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;

        align-items:center;
        justify-content:space-between;

        gap:7px;
    }

    .header .logo{
        flex:1 1 auto;
        min-width:0;
    }

    .header .logo img{
        height:41px;
        max-width:145px;
    }

    /* bouton devis reste à côté du hamburger */
    .header .header-devis{
        flex:0 0 auto;

        min-width:115px;
        height:40px;

        padding:8px 12px;

        font-size:11px;
    }

    /* hamburger visible */
    #menu-toggle{
        display:flex !important;

        flex:0 0 42px;

        width:42px;
        height:42px;
    }

    /* menu fermé */
    .header .navbar{
        display:none;

        position:absolute;

        top:calc(100% + 8px);
        left:0;

        width:100%;

        padding:10px;

        flex-direction:column;
        flex-wrap:nowrap;

        align-items:stretch;
        justify-content:flex-start;

        gap:4px;

        background:var(--blue);

        border-radius:0 0 15px 15px;

        box-shadow:0 15px 35px rgba(0,0,0,.28);

        z-index:10000;
    }

    /* menu ouvert par ton JS */
    .header .navbar.active{
        display:flex;
    }

    .header .navbar a{
        display:flex;

        width:100%;
        min-height:43px;

        margin:0;
        padding:11px 8px;

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

        border-radius:8px;

        font-size:14px;
        white-space:normal;
    }

    .header .navbar a::after{
        display:none;
    }

    .header .navbar a:hover,
    .header .navbar a.active{
        background:rgba(255,255,255,.08);
        color:var(--gold);
    }

    /* HERO */
    .hero{
        min-height:620px;
        height:auto;

        background-position:center;
    }

    .hero-content{
        width:92%;
        max-width:100%;

        padding:90px 0 60px;

        margin:0 auto;
    }

    .hero h1,
    .hero h2{
        font-size:clamp(34px,9vw,50px);
    }

    .hero p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .hero-buttons a{
        width:100%;
    }

    /* AVANTAGES */
    .advantages{
        padding:45px 0;
    }

    .advantages .container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:25px 12px;
    }

    .adv-card i{
        width:72px;
        height:72px;
        border-width:3px;
        font-size:28px;
    }

    /* SERVICES */
    div.service{
        padding:55px 0 70px;
    }

    .service h6,
    .service h3{
        font-size:18px;
    }

    .service p{
        font-size:14px;
    }

    /* CARTES */
    #card-rea{
        width:92%;

        grid-template-columns:1fr;

        gap:25px;

        padding:15px 0;
        margin:0 auto;
    }

    .rea-card{
        min-height:400px;
        height:auto;
    }

    .rea-card img{
        height:320px;
    }

    .rea-card:hover{
        transform:none;
    }

    /* PRESENTATION */
    .port h1{
        width:92%;
        margin:60px auto 0;

        font-size:clamp(32px,9vw,45px);
    }

    .port p{
        width:92%;
        margin:25px auto 50px;

        font-size:16px;
        text-align:left;
    }

    /* BANDEAU */
    .contact-banner{
        width:92%;

        margin:40px auto 0;

        padding:25px 18px;
    }

    .banner-content{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .logo2 img{
        width:150px;
        margin:auto;
    }

    .message{
        width:100%;
    }

    .message h2{
        font-size:21px;
    }

    .message p{
        font-size:12px;
    }

    .actions{
        width:100%;
        flex:0 0 auto;
    }

    .btn-devis{
        width:100%;
    }

    /* CONFIANCE */
    .confiance{
        width:92%;
        margin:55px auto 0;
        padding:20px 15px;
    }

    .confiance-container{
        flex-direction:column;
    }

    .confiance-item{
        width:100%;

        padding:15px 8px;

        border-right:0;
        border-bottom:1px solid var(--gold);
    }

    .confiance-item:last-child{
        border-bottom:0;
    }

    /* FOOTER */
    .footer{
        margin-top:50px;
        padding-top:40px;
    }

    .footer-grid{
        width:92%;

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;
    }

    .footer-logo{
        width:200px;
        margin:0 auto 15px;
    }

    /* DEBARRAS */
    .debarras,
    .debarraimg{
        min-height:550px;
    }

    .debarras-overlay{
        min-height:550px;
        padding:40px 15px;
    }

    .debarras-content{
        width:94%;
    }

    .debarras-small-title{
        font-size:11px;
        letter-spacing:1.2px;
    }

    .debarras h1{
        font-size:clamp(29px,8vw,40px);
        margin-bottom:30px;
    }

    .deba-buttons{
        flex-direction:column;
        width:100%;
        gap:12px;
    }

    .debabtn-gold,
    .debabtn-outline{
        width:100%;
        min-width:0;
        padding:14px 18px;
        font-size:14px;
    }

    .debarras-intro{
        padding:60px 15px;
    }

    .debarras-text{
        width:94%;
    }

    .debarras-text h2{
        font-size:30px;
    }

    .debarras-text p{
        font-size:15px;
    }

    .debarras-why{
        width:92%;
        padding:35px 20px;
        margin-bottom:60px;
    }

    .why-content h2{
        font-size:27px;
    }

    .why-content p{
        font-size:15px;
    }

    .problemes{
        grid-template-columns:1fr;
        gap:15px;
    }

    .probleme{
        min-height:100px;
    }

    .cle-en-main{
        width:92%;

        grid-template-columns:1fr;

        gap:35px;

        margin-bottom:60px;
    }

    .cle-image img{
        height:300px;
    }

    .cle-content h2{
        font-size:29px;
    }

    /* DEVIS */
    .devis-page{
        padding:50px 10px 70px;
    }

    .devis-container{
        width:100%;
    }

    .devis-header{
        margin-bottom:30px;
    }

    .devis-header h1{
        font-size:clamp(29px,8vw,40px);
    }

    .devis-header p{
        font-size:14px;
    }

    .containerdevis{
        width:100%;
        padding:32px 20px;
        border-radius:20px;
    }

    .containerdevis h2{
        font-size:27px;
        margin-bottom:30px;
    }

    .containerdevis label{
        font-size:14px;
    }

    .containerdevis input[type="text"],
    .containerdevis input[type="tel"],
    .containerdevis input[type="email"],
    .containerdevis input[type="file"],
    .containerdevis select,
    .containerdevis textarea{
        min-height:50px;
        padding:13px 14px;
        font-size:14px;
    }

    .containerdevis textarea{
        min-height:130px;
    }

    .containerdevis button{
        min-height:52px;
        font-size:15px;
    }

    /* CONTACT */
    .contact-page{
        padding:60px 15px;
    }

    .contact-container{
        width:94%;
    }

    .contact-header{
        margin-bottom:35px;
    }

    .contact-header h1{
        font-size:clamp(31px,8vw,40px);
    }

    .contact-header p{
        font-size:14px;
    }

    .contact-card{
        grid-template-columns:1fr;
    }

    .contact-left{
        padding:40px 25px;
    }

    .contact-left h2{
        font-size:30px;
    }

    .contact-description{
        font-size:14px;
    }

    .contact-main-button{
        width:100%;
    }

    .contact-right{
        padding:20px;
    }

    .contact-box{
        padding:15px;
        gap:12px;
    }

    .contact-box-icon{
        width:45px;
        height:45px;
        min-width:45px;
        font-size:19px;
    }

    .contact-box-content strong{
        font-size:14px;
    }

    .contact-box-content small{
        font-size:12px;
    }

    .contact-bottom{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .contact-bottom-line{
        width:100%;
    }
}

/* =========================================================
   PETIT MOBILE
   <= 480px
========================================================= */

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

    .container{
        width:94%;
    }

    .header-container{
        width:95%;
        gap:6px;
    }

    .header .logo img{
        height:37px;
        max-width:125px;
    }

    .header .header-devis{
        min-width:105px;
        height:38px;
        padding:8px 10px;
        font-size:10px;
    }

    #menu-toggle{
        flex-basis:39px;
        width:39px;
        height:39px;
        font-size:18px;
    }

    .hero{
        min-height:590px;
    }

    .hero-content{
        padding-top:75px;
    }

    .hero h1,
    .hero h2{
        font-size:clamp(30px,10vw,40px);
    }

    .hero p{
        font-size:15px;
    }

    .advantages .container{
        grid-template-columns:1fr;
    }

    #card-rea{
        width:94%;
    }

    .rea-card{
        min-height:380px;
    }

    .rea-card img{
        height:300px;
    }

    .contact-banner{
        width:94%;
        padding:20px 14px;
    }

    .message h2{
        font-size:19px;
    }

    .message p{
        font-size:11px;
    }

    .debarras,
    .debarras-overlay{
        min-height:530px;
    }

    .debarras h1{
        font-size:28px;
    }

    .debabtn-gold,
    .debabtn-outline{
        width:100%;
    }

    .containerdevis{
        padding:28px 16px;
    }

    .containerdevis h2{
        font-size:24px;
    }

    .devis-header h1{
        font-size:29px;
    }

    .contact-page{
        padding:45px 10px;
    }

    .contact-container{
        width:96%;
    }

    .contact-header h1{
        font-size:30px;
    }

    .contact-left{
        padding:32px 20px;
    }

    .contact-left h2{
        font-size:27px;
    }

    .contact-right{
        padding:15px;
    }

    .contact-box{
        padding:13px;
    }
}

/* =========================================================
   TRÈS PETIT MOBILE
   <= 380px
========================================================= */

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

    .header .logo img{
        max-width:105px;
    }

    .header .header-devis{
        min-width:96px;
        padding:8px;
        font-size:9px;
    }

    #menu-toggle{
        width:37px;
        height:37px;
        flex-basis:37px;
    }
}

/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}


/* =========================================================
   TOP CLEAN — CORRECTION FINALE DU HEADER
   ---------------------------------------------------------
   À placer à la FIN du style.css.
   Compatible avec le header.php fourni :
       <header class="header">
           <div class="container">
               ...
           </div>
       </header>

   Bootstrap peut modifier .container et .navbar.
   Ces règles reprennent donc le contrôle UNIQUEMENT
   à l'intérieur du header.
========================================================= */


/* =========================
   HEADER + CONTAINER BOOTSTRAP
========================= */

.header > .container,
.header > .header-container {

    width: min(1200px, 94%) !important;
    max-width: 1200px !important;

    min-height: 72px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    position: relative;
}


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

.header .logo {

    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}

.header .logo img {

    display: block !important;

    width: auto !important;
    height: 50px !important;

    max-width: 165px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
}


/* =========================
   MENU DESKTOP
========================= */

.header .navbar {

    flex: 1 1 auto !important;

    width: auto !important;
    max-width: none !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    position: static !important;
}


/* liens */

.header .navbar a {

    flex: 0 0 auto !important;

    width: auto !important;

    min-width: 0 !important;
    min-height: auto !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 2px !important;

    background: transparent !important;
    border: 0 !important;

    color: #ffffff !important;

    font-family: "Poppins", Arial, sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* soulignement */

.header .navbar a::after {

    content: "" !important;

    position: absolute;

    left: 0;
    right: 0;
    bottom: 2px;

    width: auto;
    height: 2px;

    padding: 0;
    margin: 0;

    background: #D8A441;

    border-radius: 5px;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}

.header .navbar a:hover,
.header .navbar a.active {

    color: #D8A441 !important;
}

.header .navbar a:hover::after,
.header .navbar a.active::after {

    transform: scaleX(1);
}


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

.header .btn-gold,
.header .header-devis {

    flex: 0 0 auto !important;

    width: 145px !important;
    min-width: 145px !important;

    min-height: 44px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 16px !important;

    background: #D8A441 !important;
    color: #062A59 !important;

    border: 2px solid #D8A441 !important;
    border-radius: 50px !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: 0 8px 20px rgba(216,164,65,.18);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.header .btn-gold:hover,
.header .header-devis:hover {

    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #062A59 !important;

    transform: translateY(-2px);
}


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

#menu-toggle {

    display: none;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    margin: 0 !important;
    padding: 0 !important;

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

    flex-direction: column;

    gap: 5px;

    background: transparent;

    border: 2px solid #D8A441;

    border-radius: 9px;

    color: #ffffff;

    cursor: pointer;

    z-index: 100001;
}

#menu-toggle span {

    display: block;

    width: 21px;
    height: 2.5px;

    background: #ffffff;

    border-radius: 5px;
}

#menu-toggle i {
    pointer-events: none;
}


/* =========================================================
   TABLETTE
   769px → 1100px
========================================================= */

@media screen and (min-width: 769px) and (max-width: 1100px) {

    .header > .container,
    .header > .header-container {

        width: 95% !important;

        min-height: 66px !important;

        gap: 10px !important;
    }

    .header .logo img {

        height: 45px !important;
        max-width: 140px !important;
    }

    .header .navbar {

        gap: 12px !important;
    }

    .header .navbar a {

        padding: 9px 1px !important;

        font-size: 12px !important;
    }

    .header .btn-gold,
    .header .header-devis {

        width: 125px !important;
        min-width: 125px !important;

        min-height: 42px !important;

        padding: 9px 10px !important;

        font-size: 11px !important;
    }

    #menu-toggle {
        display: none !important;
    }
}


/* =========================================================
   MOBILE + TABLETTE
   0 → 768px
========================================================= */

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

    .header {

        position: relative;

        min-height: 64px;

        padding: 7px 0;
    }

    .header > .container,
    .header > .header-container {

        width: 94% !important;

        min-height: 50px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 7px !important;
    }


    /* LOGO */

    .header .logo {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        max-width: none !important;
    }

    .header .logo img {

        height: 40px !important;

        max-width: 125px !important;
    }


    /* DEVIS */

    .header .btn-gold,
    .header .header-devis {

        flex: 0 0 auto !important;

        width: 115px !important;
        min-width: 115px !important;

        min-height: 40px !important;

        padding: 8px 9px !important;

        font-size: 10px !important;
    }


    /* HAMBURGER */

    #menu-toggle {

        display: flex !important;

        flex: 0 0 41px !important;

        width: 41px !important;
        height: 41px !important;
    }


    /* MENU FERMÉ */

    .header .navbar {

        display: none !important;

        position: absolute !important;

        top: calc(100% + 7px) !important;
        left: 0 !important;

        width: 100% !important;
        max-width: none !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 10px !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 3px !important;

        background: #062A59 !important;

        border-radius: 0 0 15px 15px;

        box-shadow: 0 15px 35px rgba(0,0,0,.28);

        z-index: 100000;
    }


    /* MENU OUVERT */

    .header .navbar.active {

        display: flex !important;
    }


    /* LIENS */

    .header .navbar a {

        width: 100% !important;

        min-height: 44px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 11px 8px !important;

        border-radius: 8px !important;

        font-size: 14px !important;

        white-space: normal !important;

        background: transparent !important;
    }

    .header .navbar a::after {

        display: none !important;
    }

    .header .navbar a:hover,
    .header .navbar a.active {

        background: rgba(255,255,255,.08) !important;

        color: #D8A441 !important;
    }


    /* =====================================================
       CONTENU DU SITE — MOBILE
    ====================================================== */

    .hero {

        width: 100%;

        height: auto;

        min-height: 560px;

        background-size: cover;

        background-position: center center;
    }

    .hero-content {

        width: 92%;

        max-width: 100%;

        margin: 0 auto;

        padding: 70px 0 55px;
    }

    .hero h1,
    .hero h2 {

        font-size: clamp(32px, 9vw, 48px);

        line-height: 1.1;
    }

    .hero p {

        max-width: 100%;

        font-size: 15px;

        line-height: 1.65;
    }

    .hero-buttons {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

    .hero-buttons a {

        width: 100%;

        text-align: center;
    }


    /* AVANTAGES */

    .advantages {

        padding: 45px 0;
    }

    .advantages .container {

        width: 92%;

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

        gap: 25px 12px;
    }


    /* SERVICES */

    div.service {

        padding: 50px 0 65px;
    }

    .service h6,
    .service h3,
    .service p {

        width: 92%;

        margin-left: auto;
        margin-right: auto;
    }

    .service p {

        font-size: 14px;

        line-height: 1.7;
    }


    /* CARTES SERVICES */

    #card-rea {

        width: 92%;

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 15px 0;

        margin: 0 auto;
    }

    .rea-card {

        width: 100%;

        height: auto;

        min-height: 400px;

        margin: 0;
    }

    .rea-card img {

        width: 90%;

        height: 310px;

        margin: 10px 5% 0;
    }


    /* PRÉSENTATION */

    .port h1 {

        width: 92%;

        margin: 50px auto 0;

        font-size: clamp(30px, 8vw, 44px);

        line-height: 1.15;
    }

    .port p {

        width: 92%;

        margin: 25px auto 45px;

        font-size: 15px;

        line-height: 1.7;
    }


    /* CONTACT BANNER */

    .contact-banner {

        width: 92%;

        min-height: auto;

        margin: 40px auto 0;

        padding: 25px 18px;
    }

    .banner-content {

        flex-direction: column;

        gap: 20px;

        text-align: center;
    }

    .logo2 img {

        width: 150px;

        margin: 0 auto;
    }

    .message {

        width: 100%;

        margin: 0;
    }

    .actions {

        width: 100%;
    }

    .btn-devis {

        width: 100%;

        min-height: 45px;
    }


    /* CONFIANCE */

    .confiance {

        width: 92%;

        margin: 50px auto 0;

        padding: 20px 15px;
    }

    .confiance-container {

        flex-direction: column;
    }

    .confiance-item {

        width: 100%;

        padding: 15px 8px;

        border-right: 0;

        border-bottom: 1px solid #D6A82C;
    }

    .confiance-item:last-child {

        border-bottom: 0;
    }


    /* FOOTER */

    .footer {

        margin-top: 50px;

        padding-top: 40px;
    }

    .footer-grid {

        width: 92%;

        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 35px;

        text-align: center;
    }

    .footer-logo {

        width: 190px;

        margin: 0 auto 15px;
    }


    /* DÉBARRAS */

    .debarras,
    .debarraimg {

        min-height: 540px;

        background-position: center center;
    }

    .debarras-overlay {

        min-height: 540px;

        padding: 40px 15px;
    }

    .debarras-content {

        width: 94%;
    }

    .debarras h1 {

        font-size: clamp(28px, 8vw, 40px);

        line-height: 1.18;

        margin-bottom: 30px;
    }

    .deba-buttons {

        width: 100%;

        flex-direction: column;

        gap: 12px;
    }

    .debabtn-gold,
    .debabtn-outline {

        width: 100%;

        min-width: 0;

        min-height: 48px;

        padding: 13px 18px;
    }

    .debarras-intro {

        padding: 55px 15px;
    }

    .debarras-text {

        width: 94%;
    }

    .debarras-text h2 {

        font-size: 29px;
    }

    .debarras-text p {

        font-size: 15px;

        line-height: 1.7;
    }

    .debarras-why {

        width: 92%;

        padding: 30px 20px;

        margin-bottom: 55px;
    }

    .problemes {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .cle-en-main {

        width: 92%;

        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 60px;
    }

    .cle-image img {

        height: 300px;
    }


    /* DEVIS */

    .devis-page {

        padding: 45px 10px 65px;
    }

    .devis-container {

        width: 100%;
    }

    .devis-header h1 {

        font-size: clamp(29px, 8vw, 40px);
    }

    .devis-header p {

        font-size: 14px;
    }

    .containerdevis {

        width: 100%;

        padding: 30px 20px;

        border-radius: 20px;
    }

    .containerdevis h2 {

        font-size: 27px;
    }

    .containerdevis input[type="text"],
    .containerdevis input[type="tel"],
    .containerdevis input[type="email"],
    .containerdevis input[type="file"],
    .containerdevis select,
    .containerdevis textarea {

        width: 100%;

        min-height: 50px;

        padding: 13px 14px;

        font-size: 14px;
    }

    .containerdevis textarea {

        min-height: 130px;
    }

    .containerdevis button {

        width: 100%;

        min-height: 52px;
    }


    /* CONTACT */

    .contact-page {

        padding: 55px 15px;
    }

    .contact-container {

        width: 94%;
    }

    .contact-header h1 {

        font-size: clamp(30px, 8vw, 40px);
    }

    .contact-header p {

        font-size: 14px;
    }

    .contact-card {

        grid-template-columns: 1fr;
    }

    .contact-left {

        padding: 38px 24px;
    }

    .contact-left h2 {

        font-size: 30px;
    }

    .contact-description {

        font-size: 14px;
    }

    .contact-main-button {

        width: 100%;

        justify-content: center;
    }

    .contact-right {

        padding: 20px;
    }

    .contact-bottom {

        flex-direction: column;

        gap: 10px;

        text-align: center;
    }
}


/* =========================================================
   PETIT MOBILE
   <= 480px
========================================================= */

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

    .header > .container,
    .header > .header-container {

        width: 95% !important;

        gap: 6px !important;
    }

    .header .logo img {

        height: 37px !important;

        max-width: 105px !important;
    }

    .header .btn-gold,
    .header .header-devis {

        width: 105px !important;
        min-width: 105px !important;

        min-height: 38px !important;

        padding: 7px 8px !important;

        font-size: 10px !important;
    }

    #menu-toggle {

        width: 39px !important;
        height: 39px !important;

        flex-basis: 39px !important;
    }

    .hero {

        min-height: 530px;
    }

    .advantages .container {

        grid-template-columns: 1fr;
    }

    .rea-card img {

        height: 285px;
    }

    .debarras h1 {

        font-size: 28px;
    }

    .containerdevis {

        padding: 27px 16px;
    }

    .containerdevis h2 {

        font-size: 24px;
    }

    .contact-left {

        padding: 30px 20px;
    }
}


/* =========================================================
   TRÈS PETIT MOBILE
   <= 380px
========================================================= */

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

    .header .logo img {

        height: 34px !important;

        max-width: 90px !important;
    }

    .header .btn-gold,
    .header .header-devis {

        width: 96px !important;
        min-width: 96px !important;

        font-size: 9px !important;
    }

    #menu-toggle {

        width: 37px !important;
        height: 37px !important;

        flex-basis: 37px !important;
    }
}

/* =========================================================
   TOP CLEAN — HEADER ACTUEL (.header-logo / .header-navbar)
   CORRECTION FINALE — À LA FIN DU FICHIER
========================================================= */

.header {
    width:100% !important;
    min-height:72px !important;
    margin:0 !important;
    padding:0 !important;
    background:#062A59 !important;
    position:sticky !important;
    top:0 !important;
    z-index:99999 !important;
    box-shadow:0 4px 18px rgba(0,0,0,.12) !important;
}

.header-container {
    width:min(1200px,94%) !important;
    max-width:1200px !important;
    min-height:72px !important;
    height:72px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    position:relative !important;
}

.header-logo {
    flex:0 0 auto !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    text-decoration:none !important;
}

.header-logo img {
    display:block !important;
    width:auto !important;
    height:50px !important;
    max-width:165px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
}

.header-navbar {
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:24px !important;
    background:transparent !important;
    position:static !important;
}

.header-navbar a {
    position:relative !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:40px !important;
    margin:0 !important;
    padding:8px 2px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    font-family:"Poppins",Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}

.header-navbar a::before {
    display:none !important;
}

.header-navbar a::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:2px !important;
    width:100% !important;
    height:2px !important;
    padding:0 !important;
    margin:0 !important;
    background:#D8A441 !important;
    border-radius:5px !important;
    transform:scaleX(0) !important;
    transform-origin:center !important;
    transition:transform .25s ease !important;
}

.header-navbar a:hover,
.header-navbar a.active {
    color:#D8A441 !important;
}

.header-navbar a:hover::after,
.header-navbar a.active::after {
    transform:scaleX(1) !important;
}

.header-devis {
    flex:0 0 auto !important;
    width:145px !important;
    min-width:145px !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 15px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#D8A441 !important;
    color:#062A59 !important;
    border:2px solid #D8A441 !important;
    border-radius:50px !important;
    font-family:"Poppins",Arial,sans-serif !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
    transition:all .25s ease !important;
}

.header-devis:hover {
    background:#fff !important;
    border-color:#fff !important;
    color:#062A59 !important;
    transform:translateY(-2px) !important;
}

.menu-toggle {
    display:none !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    background:transparent !important;
    border:2px solid #D8A441 !important;
    border-radius:9px !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
}

.menu-toggle span {
    display:block !important;
    width:21px !important;
    height:2.5px !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border-radius:5px !important;
}

@media (min-width:769px) and (max-width:1100px) {
    .header-container {
        width:95% !important;
        gap:10px !important;
    }

    .header-logo img {
        height:44px !important;
        max-width:140px !important;
    }

    .header-navbar {
        gap:13px !important;
    }

    .header-navbar a {
        font-size:11px !important;
        padding:7px 0 !important;
    }

    .header-devis {
        width:120px !important;
        min-width:120px !important;
        height:40px !important;
        min-height:40px !important;
        font-size:10px !important;
    }

    .menu-toggle {
        display:none !important;
    }
}

@media (max-width:768px) {
    .header {
        min-height:64px !important;
        padding:6px 0 !important;
    }

    .header-container {
        width:94% !important;
        height:52px !important;
        min-height:52px !important;
        gap:7px !important;
    }

    .header-logo {
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .header-logo img {
        height:39px !important;
        max-width:125px !important;
    }

    .header-devis {
        flex:0 0 auto !important;
        width:112px !important;
        min-width:112px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 8px !important;
        font-size:10px !important;
    }

    .menu-toggle {
        display:flex !important;
        flex:0 0 41px !important;
        width:41px !important;
        height:41px !important;
    }

    .header-navbar {
        display:none !important;
        position:absolute !important;
        top:calc(100% + 6px) !important;
        left:0 !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        margin:0 !important;
        padding:10px !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:3px !important;
        background:#062A59 !important;
        border-radius:0 0 14px 14px !important;
        box-shadow:0 15px 35px rgba(0,0,0,.28) !important;
        z-index:999999 !important;
    }

    .header-navbar.active {
        display:flex !important;
    }

    .header-navbar a {
        width:100% !important;
        min-height:44px !important;
        height:auto !important;
        padding:11px 8px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:14px !important;
        white-space:normal !important;
        color:#fff !important;
        background:transparent !important;
        border-radius:8px !important;
    }

    .header-navbar a::after {
        display:none !important;
    }

    .header-navbar a:hover,
    .header-navbar a.active {
        background:rgba(255,255,255,.08) !important;
        color:#D8A441 !important;
    }
}

@media (max-width:480px) {
    .header-container {
        width:95% !important;
        gap:6px !important;
    }

    .header-logo img {
        height:36px !important;
        max-width:105px !important;
    }

    .header-devis {
        width:103px !important;
        min-width:103px !important;
        height:38px !important;
        min-height:38px !important;
        font-size:10px !important;
    }

    .menu-toggle {
        width:39px !important;
        height:39px !important;
        flex-basis:39px !important;
    }
}

@media (max-width:380px) {
    .header-logo img {
        height:33px !important;
        max-width:90px !important;
    }

    .header-devis {
        width:94px !important;
        min-width:94px !important;
        height:36px !important;
        min-height:36px !important;
        font-size:9px !important;
    }

    .menu-toggle {
        width:37px !important;
        height:37px !important;
        flex-basis:37px !important;
    }
}