:root{
    --noir:#1f1f22;--noir-2:#222226;--or:#c2a14d;--or-clair:#d9bd6e;
    --creme:#f4f1ea;--blanc:#fff;--gris:#8a8a90;--rouge:#c5302b;--vert:#b6552e;
    --hero-img:url('../img/img-1.jpg');
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;color:var(--noir);background:var(--blanc);line-height:1.6}
  h1,h2,h3,.display{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:600}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
  img{max-width:100%;display:block}

  .logo{display:flex;align-items:center;gap:14px;text-decoration:none}
  .logo,.logo:hover,.logo:visited,.logo *{text-decoration:none;color:inherit}
  .logo-img{height:60px;width:auto;flex:none;display:block}
  .logo-txt{font-family:'Oswald',sans-serif;text-transform:uppercase;line-height:1}
  .logo-txt .n{font-size:20px;font-weight:700;color:var(--blanc);letter-spacing:.04em}
  .logo-txt .s{font-size:9.5px;font-weight:400;color:var(--or);letter-spacing:.18em;margin-top:3px;white-space:nowrap}

  /* ---- TOP BAR contact (lead) ---- */
  .topbar{background:var(--or);color:var(--noir-2);font-size:13px}
  /* min-height (et non height) : le contenu passe sur plusieurs lignes en mobile */
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap}
  .topbar b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em}
  .topbar a{color:var(--noir-2);text-decoration:none;font-weight:600}
  .topbar .tb-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .topbar .tb-nav{display:flex;align-items:center;gap:20px}
  .topbar .tb-nav ul{display:flex;align-items:center;gap:20px;list-style:none;flex-wrap:wrap;justify-content:center}
  .topbar .tb-nav a{text-transform:uppercase;letter-spacing:.04em;font-size:12px}
  .topbar .tb-nav a:hover{text-decoration:underline}

  header{position:sticky;top:0;z-index:50;background:rgb(13 14 19);backdrop-filter:blur(8px);border-bottom:1px solid rgba(194,161,77,.25)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  nav ul{display:flex;gap:22px;list-style:none}
  nav a{color:var(--creme);text-decoration:none;font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;transition:color .2s;white-space:nowrap}
  nav a:hover{color:var(--or)}
  /* Élément de menu actif. Restreint aux liens de page : sur l'accueil, les liens
     d'ancre du footer portent eux aussi « current-menu-item » et seraient tous surlignés. */
  header nav .current-menu-item>a,
  footer nav .menu-item-type-post_type.current-menu-item>a{color:var(--or)}
  @media(min-width:901px){
    header nav .current-menu-item>a{position:relative}
    header nav .current-menu-item>a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--or)}
  }
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--or);color:var(--noir-2);padding:13px 24px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:600;text-decoration:none;font-size:14px;border:none;cursor:pointer;transition:.2s;border-radius:8px}
  .btn:hover{background:var(--or-clair)}
  .btn-tel{background:var(--vert);color:#fff;font-size:16px;padding:13px 22px}
  .btn-tel:hover{background:#9d471f}
  .ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-.18em}
  .btn-line{background:transparent;border:1.5px solid var(--or);color:var(--or)}
  .btn-line:hover{background:var(--or);color:var(--noir-2)}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer}
  .menu-toggle span{display:block;width:26px;height:2px;background:var(--creme);margin:5px 0}

  /* ---- HERO photo (centré, bas arrondi) ---- */
  .hero{position:relative;color:var(--blanc);text-align:center;padding-bottom:130px;
        border-bottom-left-radius:50% 70px;border-bottom-right-radius:50% 70px;overflow:hidden}
  .hero-bg{position:absolute;inset:0;background:
     linear-gradient(180deg,rgba(18,18,20,.55),rgba(18,18,20,.78)),
     var(--hero-img) center/cover no-repeat}
  .hero-inner{position:relative;padding:96px 0 0;max-width:860px;margin:0 auto}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--or);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:13px;font-weight:500;margin-bottom:18px}
  .eyebrow::before,.eyebrow::after{content:"";width:38px;height:1px;background:var(--or)}
  /* Plancher à 32px : sous ~667px de large le 6vw ne pilote plus rien, le H1 restait
     bloqué à 40px et occupait 3 lignes au-dessus de la ligne de flottaison. */
  .hero h1{font-size:clamp(32px,6vw,76px);font-weight:700;line-height:1;color:var(--blanc)}
  .hero h1 .gold{color:var(--or)}
  .hero .lead{font-size:18px;color:var(--creme);margin:18px auto 0;max-width:620px;opacity:.95;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;line-height:1.6;font-weight:400}
  .hero-cta{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .hero-cta .btn{padding:17px 32px;font-size:15px}
  .btn-white{background:#fff;color:var(--noir-2)}
  .btn-white:hover{background:var(--creme)}

  /* ---- CARTES RÉASSURANCE (chevauchent le hero) ---- */
  .reassure{position:relative;z-index:5;margin-top:-92px}
  .reassure .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .rcard{background:var(--noir-2);color:#fff;border-radius:14px;padding:30px 22px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.18)}
  .rcard.light{background:#fff;color:var(--noir);border:1px solid #e7e2d6}
  .rcard .ic{width:62px;height:62px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px;color:var(--noir-2)}
  .rcard b{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:18px;font-weight:600;letter-spacing:.02em;line-height:1.15}
  .rcard small{display:block;color:var(--gris);font-size:12px;margin-top:8px;line-height:1.4}
  .rcard.light small{color:#888}

  /* ---- TRUST ---- */
  .trust{background:var(--noir);border-top:3px solid var(--or)}
  .trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:46px;padding:24px 0}
  .trust-item{display:flex;align-items:center;gap:13px;color:var(--creme)}
  .trust-item .badge{width:42px;height:42px;border:2px solid var(--or);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--or);font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;flex:none;line-height:1}
  .trust-item b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:14px;color:var(--blanc);display:block}
  .trust-item small{font-size:12px;color:var(--gris)}

  section{padding:84px 0}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
  .sec-head .eyebrow{justify-content:center;color:var(--or)}
  .sec-head h2{font-size:clamp(28px,4vw,42px);color:var(--noir);font-weight:700}
  .sec-head p{color:#555;margin-top:14px;font-size:16px}

  .services{background:var(--creme)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{background:var(--blanc);border:1px solid #e7e2d6;overflow:hidden;transition:.25s;border-radius:14px}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(28,28,30,.14)}
  .card .ph{height:170px;background-size:cover;background-position:center;position:relative}
  .card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,20,.4),transparent 60%)}
  .card .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .card .ic{width:46px;height:46px;margin:-46px 0 14px 22px;position:relative;z-index:2;background:var(--or);display:flex;align-items:center;justify-content:center;border-radius:10px}
  .card .body{padding:0 26px 28px}
  .card h3{font-size:22px;color:var(--noir);margin-bottom:10px}
  .card ul{list-style:none;margin-top:14px}
  .card li{font-size:14px;color:#555;padding:6px 0 6px 22px;position:relative}
  .card li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--or);transform:rotate(45deg)}

  .presta{background:var(--noir-2);color:var(--blanc)}
  .presta .sec-head h2{color:var(--blanc)}
  .presta .sec-head p{color:var(--gris)}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(194,161,77,.25);border:1px solid rgba(194,161,77,.25)}
  .pcol{background:var(--noir-2);padding:30px 26px}
  .pcol h3{font-family:'Oswald',sans-serif;text-transform:uppercase;color:var(--or);font-size:16px;letter-spacing:.06em;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .pcol p{font-size:14px;color:#cfcfcf;padding:7px 0;display:flex;gap:10px}
  .pcol p::before{content:"›";color:var(--or);font-weight:700}
  .pcol-more{display:inline-block;margin-top:16px;color:var(--or);font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px;letter-spacing:.06em;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(194,161,77,.45);padding-bottom:2px}
  .pcol-more:hover{color:var(--or-clair);border-bottom-color:var(--or-clair)}

  /* ---- INTRO + FORMULAIRE (devis en bas à droite) ---- */
  .intro{padding-top:70px}
  .intro-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:54px;align-items:start}
  .intro h2{font-size:clamp(26px,3.4vw,38px);color:var(--noir);line-height:1.1}
  .intro .eyebrow{color:var(--or)}
  .intro p{color:#555;margin-top:16px;font-size:16px}
  .intro .bignum{display:flex;gap:30px;margin-top:28px;flex-wrap:wrap}
  .intro .bignum div b{font-family:'Oswald',sans-serif;font-size:40px;color:var(--or);display:block;line-height:1}
  .intro .bignum div span{font-size:13px;color:#777;text-transform:uppercase;letter-spacing:.04em}
  /* encart local */
  .local{margin-top:30px;border:1px solid #e7e2d6;border-radius:14px;overflow:hidden;background:#fff}
  .local .row{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;border-bottom:1px solid #efeadd}
  .local .row .ic{width:40px;height:40px;border-radius:10px;background:#f6f1e6;color:var(--or);display:flex;align-items:center;justify-content:center;flex:none}
  .local .row .ic svg{width:20px;height:20px}
  .local .row b{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:var(--noir);display:block;margin-bottom:2px}
  .local .row p{margin:0;font-size:15px;color:#444;line-height:1.5}
  .local .map{height:230px;width:100%;border:0;display:block}
  .quote-card{background:#fff;color:var(--noir);padding:48px 46px;border-radius:16px;box-shadow:0 24px 60px rgba(28,28,30,.14);border-top:4px solid var(--or)}
  .quote-card h2{font-size:24px;color:var(--noir);line-height:1.1}
  .quote-card .sub{font-size:14px;color:#555;margin:8px 0 18px;font-family:'Inter';text-transform:none;letter-spacing:0;font-weight:400}
  .quote-card label{margin:12px 0 5px;font-size:12px}
  /* Champs de saisie uniquement : exclure le submit CF7 (un <input>) pour ne pas
     écraser le fond doré de .btn — sinon le CTA prend l'apparence d'un champ. */
  .quote-card input:not([type=submit]):not([type=button]),.quote-card select,.quote-card textarea{padding:12px 13px;font-size:15px;background:#f1ede3;border:none;border-radius:6px}
  .quote-card input:not([type=submit]):not([type=button]):focus,.quote-card select:focus,.quote-card textarea:focus{outline:none;box-shadow:0 0 0 2px var(--or)}
  /* Focus du CTA : halo foncé — un halo doré sur fond doré serait invisible. */
  .quote-card .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--noir-2)}
  .quote-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .quote-card .btn{width:100%;justify-content:center;margin-top:18px;padding:15px;font-size:15px;border-radius:6px}
  .quote-card .pay-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:10px 12px;background:#faf6ec;border:1px solid #e7dcbe;border-radius:6px;font-size:13px;font-weight:600;color:var(--noir-2);text-align:center}
  .quote-card .pay-note .ico{color:var(--or)}
  .quote-card .or-call{text-align:center;margin-top:14px;font-size:13px;color:#666}
  .quote-card .or-call a{color:var(--vert);font-weight:700;text-decoration:none}

  /* ---- RÉALISATIONS ---- */
  .realisations{background:#fff}
  .real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .real{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#ddd center/cover no-repeat;display:block;text-decoration:none}
  .real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .real::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,20,.78) 0%,rgba(18,18,20,.15) 45%,transparent 70%);transition:background .25s}
  .real:hover::after{background:linear-gradient(0deg,rgba(18,18,20,.82) 0%,rgba(18,18,20,.3) 55%,rgba(18,18,20,.08) 100%)}
  .real .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:#fff}
  .real .city{display:flex;align-items:center;gap:7px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;font-size:18px;letter-spacing:.02em}
  .real .city svg{width:18px;height:18px;color:var(--or);flex:none}
  .real .type{font-size:13px;color:#e8e3d6;margin-top:3px;display:block}
  .real .badge-dpt{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--noir-2);font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;letter-spacing:.03em}
  .realisations .more{text-align:center;margin-top:36px}

  /* ---- ZONES D'INTERVENTION ---- */
  .zones{background:var(--creme)}
  .zones-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .zcol{background:#fff;border:1px solid #e7e2d6;border-radius:14px;padding:30px 32px}
  .zcol h3{font-family:'Oswald',sans-serif;text-transform:uppercase;color:var(--noir);font-size:20px;letter-spacing:.02em;display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #efeadd}
  .zcol h3 .dpt{background:var(--or);color:var(--noir-2);font-size:13px;padding:3px 10px;border-radius:6px;letter-spacing:.04em}
  /* Le titre de colonne peut être un lien vers la page de département. Il n'y a
     pas de reset global sur <a> dans cette feuille : sans cette règle il repasse
     en bleu souligné du navigateur. Le titre garde donc son apparence, seul le
     survol signale qu'il est cliquable. */
  .zcol h3 a{color:inherit;text-decoration:none;transition:color .15s}
  .zcol h3 a:hover,.zcol h3 a:focus-visible{color:var(--vert)}
  .zcol ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
  /* Le gabarit d'une entrée porte sur <a> ET <span> : une commune dont la page
     n'est pas encore publiée s'affiche sans lien, et doit garder sa puce et son
     alignement — sans quoi la grille se disloque à chaque vague. */
  .zcol li a,.zcol li span{color:#444;text-decoration:none;font-size:15px;padding:5px 0 5px 18px;position:relative;display:block;transition:color .15s}
  .zcol li a::before,.zcol li span::before{content:"›";position:absolute;left:0;color:var(--or);font-weight:700}
  .zcol li a:hover{color:var(--vert)}
  /* Commune couverte, page à venir : même place, ton atténué, pas d'état survol. */
  .zcol li span{color:var(--gris)}
  .zcol li span::before{color:#ddd3b8}
  /* Page de ville : quand toutes les communes voisines sont dans le même
     département, l'unique encart occupe la largeur entière plutôt que de
     laisser la moitié droite vide. Sa liste est déjà sur deux colonnes. */
  .zones-grid .zcol:only-child{grid-column:1/-1}
  .zones .note{text-align:center;color:#777;font-size:14px;margin-top:30px}
  .zones .note a{color:var(--vert);font-weight:600;text-decoration:none}

  /* ---- DEVIS / LEAD ---- */
  .devis{background:var(--creme)}
  .devis-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
  .devis h2{font-size:clamp(28px,4vw,40px);color:var(--noir)}
  .devis .or{color:var(--or)}
  .devis p{color:#555;margin-top:14px}
  .devis .phones{margin-top:26px;display:flex;flex-direction:column;gap:14px}
  .devis .phones a{display:flex;align-items:center;gap:14px;color:var(--noir);text-decoration:none;font-family:'Oswald',sans-serif;font-size:20px;font-weight:600}
  .devis .phones .ic{width:46px;height:46px;background:var(--noir-2);color:var(--or);display:flex;align-items:center;justify-content:center;flex:none;font-size:20px}
  form{background:transparent;padding:0;border:none;box-shadow:none}
  form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  label{display:block;font-size:13px;font-weight:600;color:var(--noir);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.03em;font-family:'Oswald',sans-serif}
  input,select,textarea{width:100%;padding:12px 14px;border:1px solid #d8d2c4;font-family:inherit;font-size:15px;background:#fafaf7}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--or);border-color:var(--or)}
  a:focus,button:focus{outline:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
  .logo:focus,.logo:focus-visible{outline:none}
  form .btn{width:100%;justify-content:center;margin-top:20px;font-size:15px;padding:15px}
  form small{display:block;color:var(--gris);font-size:12px;margin-top:12px;text-align:center}

  .band{background:var(--or);text-align:center;padding:60px 0}
  .band h2{color:var(--noir-2);font-size:clamp(24px,3.5vw,38px);font-weight:700}
  .band p{color:#3a3320;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
  .band .btn{margin-top:24px;background:var(--noir-2);color:var(--blanc)}
  .band .btn:hover{background:var(--noir)}

  footer{background:var(--noir-2);color:var(--creme);padding:60px 0 26px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
  footer h3{font-family:'Oswald',sans-serif;text-transform:uppercase;color:var(--or);font-size:14px;letter-spacing:.08em;margin-bottom:16px}
  /* break-word : l'e-mail de contact est un mot insécable qui débordait de sa colonne. */
  footer a,footer p{color:#bdbdbd;text-decoration:none;font-size:14px;line-height:2;overflow-wrap:break-word}
  footer a:hover{color:var(--or)}
  /* Menu du footer : neutralise les règles globales « nav ul » / « nav a » du header.
     white-space:normal est indispensable — le nowrap hérité de « nav a » (menu du
     header) empêchait les libellés longs de se couper et élargissait la page. */
  footer nav ul{display:block;list-style:none}
  footer nav a{color:#bdbdbd;font-size:14px;text-transform:none;letter-spacing:0;line-height:2;white-space:normal}
  footer nav a:hover{color:var(--or)}
  .copy{text-align:center;padding-top:22px;color:var(--gris);font-size:13px}
  /* Adresse du siège dans le pied de page. <address> est en italique par défaut
     dans les navigateurs : on le neutralise pour rester aligné sur le reste. */
  .fadr{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-style:normal;
        color:#bdbdbd;font-size:14px;line-height:1.6}
  .fadr .ico{flex:none;margin-top:3px;color:var(--or)}
  /* Raison sociale : mention legale, mise en avant sans crier. */
  .fadr-rs{color:#e6e6e6;font-weight:600}

  /* Lien des mentions légales, discret à côté du copyright : présent parce
     qu'obligatoire, sans concurrencer les liens de navigation au-dessus. */
  .copy a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
  .copy a:hover,.copy a:focus-visible{color:var(--creme)}
  .copy .slg{color:var(--or);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:13px}

  /* sticky mobile call bar */
  .callbar{display:none}

  @media(max-width:900px){
    header nav ul{display:none} /* scopé au header : ne masque pas la topbar ni le footer */
    .menu-toggle{display:block}
    section{padding:56px 0}
    .vc_row.sec{padding:56px 0}
    .intro{padding-top:48px}
    .vc_row.sec.intro{padding-top:48px}
    .nav>.btn{display:none}
    header.nav-open nav ul{display:flex;flex-direction:column;gap:2px;position:absolute;top:74px;left:0;right:0;background:rgb(13 14 19);padding:10px 22px 18px;border-bottom:1px solid rgba(194,161,77,.25);box-shadow:0 16px 30px rgba(0,0,0,.3)}
    header.nav-open nav li{width:100%}
    header.nav-open nav a{display:block;padding:13px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.07)}
    header.nav-open nav li:last-child a{border-bottom:none}
    .hero{border-bottom-left-radius:50% 36px;border-bottom-right-radius:50% 36px;padding-bottom:110px}
    /* 96px de vide entre le header et le H1 : trop cher en hauteur sur mobile. */
    .hero-inner{padding-top:52px}
    .reassure{margin-top:-72px}
    .reassure .wrap{grid-template-columns:1fr 1fr;gap:16px}
    .intro-grid{grid-template-columns:1fr;gap:32px}
    .zones-grid{grid-template-columns:1fr;gap:18px}
    .real-grid{grid-template-columns:1fr 1fr;gap:14px}
    .quote-card{order:-1;padding:34px 26px}
    /* En rangée WPBakery, la cellule de grille est la colonne, pas la carte :
       c'est elle qui doit remonter pour garder le devis en tête sur mobile. */
    .intro-grid>.wpb_column:has(.quote-card){order:-1}
    .cards{grid-template-columns:1fr}
    .grid4{grid-template-columns:1fr 1fr}
    .devis-grid{grid-template-columns:1fr;gap:34px}
    /* Le footer restait en 3 colonnes quelle que soit la largeur d'écran. */
    .fgrid{grid-template-columns:1fr 1fr;gap:32px}
    /* Barre dorée compacte : sur mobile elle passait sur 3 lignes (~95px) au-dessus
       du logo. On ne garde que la mention de réassurance (décennale) sur une ligne.
       La zone est déjà dans le H1 du hero, et les liens secondaires sont accessibles
       dans le menu burger et le footer : les répéter ici coûte de la hauteur utile. */
    .topbar{font-size:11.5px}
    .topbar .wrap{justify-content:center;gap:0;min-height:0;padding:5px 24px;flex-wrap:nowrap}
    .topbar .tb-info{gap:0;flex-wrap:nowrap;min-width:0}
    .topbar .tb-info span,
    .topbar .tb-nav{display:none}
    .topbar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60}
    .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;text-decoration:none;font-size:14px}
    .callbar .c1{background:var(--vert);color:#fff}
    .callbar .c2{background:var(--or);color:var(--noir-2)}
    body{padding-bottom:52px}
  }
  @media(max-width:520px){
    .hero-inner{padding-top:40px}
    .fgrid{grid-template-columns:1fr;gap:26px}
    .grid4{grid-template-columns:1fr}
    /* Champs du formulaire de devis empilés (lead : lisibilité prioritaire) */
    .quote-card .row2,form .row{grid-template-columns:1fr}
    .real-grid{grid-template-columns:1fr}
    .zcol ul{grid-template-columns:1fr}
    section{padding:44px 0}
    .vc_row.sec{padding:44px 0}
  }
  /* CF7 impose rows="10" : on borne la hauteur pour garder le bouton visible */
  .quote-card textarea{height:104px;min-height:104px;resize:vertical}

  /* ---- Intégration Contact Form 7 dans la carte devis ---- */
  .quote-card .wpcf7-form-control-wrap{display:block}
  .quote-card .mi-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
  .quote-card form .wpcf7-spinner{margin:8px auto 0;display:block}
  .quote-card .wpcf7 .wpcf7-response-output{margin:14px 0 0;padding:10px 12px;font-size:13px;border-radius:6px;border-width:1px}
  .quote-card .wpcf7-not-valid-tip{font-size:12px;color:#c0392b;margin-top:4px}

  /* ================================================================
     PONT WPBAKERY ↔ GRILLES DU THÈME
     Permet de monter les pages avec des rangées et colonnes WPBakery
     NATIVES tout en conservant la mise en page définie plus haut.
     Une rangée porte la classe de grille du thème (cards, grid4,
     zones-grid, intro-grid) et ses colonnes natives en deviennent les
     cellules. Aucune règle visuelle n'est modifiée : on neutralise
     seulement la grille propre à WPBakery.
     js_composer.min.css est chargé APRÈS main.css : les sélecteurs
     ci-dessous sont volontairement plus spécifiques pour l'emporter.
     ================================================================ */

  /* Rangée de section : une rangée est un <div>, pas un <section> */
  .vc_row.sec{padding:84px 0}
  .vc_row.sec.intro{padding-top:70px}

  /* Colonne porteuse de .wrap : largeur max et gouttières du thème */
  /* float:none est indispensable : WPBakery flotte les colonnes à gauche à
     partir de 768px (.vc_col-sm-*{float:left}) et margin:0 auto ne centre pas
     un élément flottant — la section entière se collerait au bord gauche. */
  .vc_row.sec>.wrap.wpb_column{float:none;max-width:1240px;margin:0 auto;padding:0 24px}

  /* Rangées internes : la grille du thème remplace celle de WPBakery */
  .vc_row.intro-grid,.vc_row.cards,.vc_row.grid4,.vc_row.zones-grid,.vc_row.real-grid{margin-left:0;margin-right:0}

  /* WPBakery pose un clearfix ::before/::after en display:table sur .vc_row.
     Dans une grille CSS, ces deux pseudo-éléments deviennent des CELLULES :
     le contenu est décalé d'un cran et la dernière colonne passe à la ligne.
     Idem pour .vc_column-inner, dont les pseudo-éléments deviendraient des
     enfants flex fantômes. On les neutralise sur nos rangées de grille. */
  .vc_row.intro-grid::before,.vc_row.intro-grid::after,
  .vc_row.cards::before,.vc_row.cards::after,
  .vc_row.grid4::before,.vc_row.grid4::after,
  .vc_row.zones-grid::before,.vc_row.zones-grid::after,
  .vc_row.real-grid::before,.vc_row.real-grid::after,
  .intro-grid>.wpb_column>.vc_column-inner::before,.intro-grid>.wpb_column>.vc_column-inner::after,
  .cards>.wpb_column>.vc_column-inner::before,.cards>.wpb_column>.vc_column-inner::after,
  .grid4>.wpb_column>.vc_column-inner::before,.grid4>.wpb_column>.vc_column-inner::after,
  .zones-grid>.wpb_column>.vc_column-inner::before,.zones-grid>.wpb_column>.vc_column-inner::after,
  .real-grid>.wpb_column>.vc_column-inner::before,.real-grid>.wpb_column>.vc_column-inner::after{display:none}
  .intro-grid>.wpb_column,.cards>.wpb_column,.grid4>.wpb_column,
  .zones-grid>.wpb_column,.real-grid>.wpb_column{width:auto;float:none;padding:0}
  .intro-grid>.wpb_column>.vc_column-inner,.cards>.wpb_column>.vc_column-inner,
  .grid4>.wpb_column>.vc_column-inner,.zones-grid>.wpb_column>.vc_column-inner{padding:0}

  /* Hauteurs égales : l'atome remplit sa cellule comme lorsqu'il en était
     directement l'enfant (cartes et colonnes alignées en bas). */
  .cards>.wpb_column,.grid4>.wpb_column,.zones-grid>.wpb_column{display:flex;flex-direction:column;align-items:stretch}
  .cards>.wpb_column>.vc_column-inner,.grid4>.wpb_column>.vc_column-inner,
  .zones-grid>.wpb_column>.vc_column-inner{display:flex;flex-direction:column;flex-grow:1}
  .cards .wpb_wrapper,.grid4 .wpb_wrapper,.zones-grid .wpb_wrapper{display:flex;flex-direction:column;flex-grow:1}
  /* .zcol est aussi utilisé comme encart dans une grille .cards (sections
     « Bon à savoir » des pages de service) : il doit s'étirer comme .card. */
  .cards .card,.cards .zcol,.grid4 .pcol,.zones-grid .zcol{flex-grow:1}
  /* Paragraphes d'un encart .zcol : même confort de lecture que .ville-seo. */
  .zcol p{font-size:15px;line-height:1.7;color:#444;margin:0 0 12px}
  .zcol p:last-child{margin-bottom:0}
  .zcol p a{color:var(--vert);font-weight:600;text-decoration:none}
  .zcol p a:hover{text-decoration:underline}

  /* Rythme vertical : celui du thème, pas la marge par défaut de WPBakery */
  .vc_row.sec .wpb_content_element{margin-bottom:0}
  /* wpautop enveloppe le <span class="eyebrow"> d'un vc_column_text dans un <p>
     qui hérite alors de .intro p{margin-top:16px} : on rétablit l'espacement
     d'origine, où l'eyebrow était l'enfant direct du bloc de texte. */
  .vc_row.sec .wpb_text_column .wpb_wrapper>p:first-child{margin-top:0}

  /* ---- Pages de service : illustration (bloc michelet_service_intro OU
         élément natif vc_single_image portant la classe .service-media) ---- */
  .service-media{border-radius:14px;overflow:hidden;border:1px solid #e7e2d6}
  .service-media img{width:100%;height:auto}
  /* Dans une grille 2 colonnes, le texte s'aligne à gauche au lieu d'être centré */
  .intro-grid .ville-seo{margin-left:0}

  /* ---- Fil d'Ariane ----
     Posé sur la photo du hero, en blanc atténué : discret, et surtout sans
     bande supplémentaire qui repousserait le H1 vers le bas. Le hero porte déjà
     un voile sombre (rgba(18,18,20,.55) en haut), le contraste est donc tenu
     sans ajouter d'ombre portée. */
  .fil{position:relative;padding-top:22px;font-size:13px;line-height:1.4;
       color:rgba(255,255,255,.7);text-align:center}
  .fil a{color:rgba(255,255,255,.85);text-decoration:none}
  .fil a:hover,.fil a:focus-visible{color:var(--blanc);text-decoration:underline}
  .fil span{margin:0 5px}
  .fil [aria-current]{color:rgba(255,255,255,.7)}

  /* ---- Contenu SEO localisé des pages de ville et de service ---- */
  .ville-seo{max-width:820px;margin:0 auto;font-size:16px;line-height:1.7;color:#333}
  .ville-seo h2{font-family:'Oswald',sans-serif;color:var(--noir);font-size:26px;margin:26px 0 12px;line-height:1.15}
  .ville-seo h3{font-family:'Oswald',sans-serif;color:var(--noir);font-size:20px;margin:20px 0 10px}
  .ville-seo p{margin:0 0 14px}
  .ville-seo ul{margin:0 0 14px 20px;list-style:disc}
  .ville-seo li{margin:4px 0}