:root{
    --bleu-nuit:#0a2540;
    --bleu-nuit-2:#0d2f5a;
    --bleu:#134e8c;
    --bleu-clair:#1a5cad;
    --bleu-ciel:#e8f0fb;
    --orange:#f97316;
    --orange-fonce:#ea580c;
    --orange-pale:#fff3e6;
    /* Orange utilisé comme TEXTE sur fond clair. #f97316 ne donne que 2,8:1
       sur blanc (échec WCAG AA) : cette variante donne 5,18:1 sur blanc,
       4,79:1 sur --gris-pale et 4,51:1 sur --bleu-ciel. */
    --orange-texte:#c2410c;
    /* Variante claire, pour les dégradés et les états de survol. */
    --orange-clair:#fb923c;
    --encre:#0f1f38;
    --gris:#5a6b84;
    --gris-pale:#f4f6fa;
    --blanc:#ffffff;
    --ligne:#e3e9f2;
    --radius:18px;
    --ombre:0 18px 45px rgba(10,37,64,.12);
    --ombre-petite:0 6px 18px rgba(10,37,64,.08);
    --titre:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    --texte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  body{font-family:var(--texte);color:var(--encre);background:var(--blanc);line-height:1.65;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .conteneur{width:min(1180px,92%);margin-inline:auto}
  section{padding:88px 0}
  h1,h2,h3,h4{font-family:var(--titre);line-height:1.15;color:var(--encre)}
  .sur-titre{display:inline-flex;align-items:center;gap:8px;font-family:var(--titre);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-fonce);margin-bottom:14px}
  .sur-titre::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--orange);display:inline-block}
  h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em}
  .lead{color:var(--gris);font-size:1.06rem;max-width:62ch}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--titre);font-weight:700;font-size:.98rem;padding:15px 26px;border-radius:12px;border:none;cursor:pointer;transition:transform .45s ease,box-shadow .45s ease,background .45s ease,color .45s ease;white-space:nowrap}
  .btn svg{flex:none}
  .btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.35)}
  .btn-orange:hover{background:var(--orange-fonce);transform:translateY(-2px);box-shadow:0 14px 30px rgba(234,88,12,.4)}
  .btn-bleu{background:var(--bleu);color:#fff;box-shadow:0 10px 24px rgba(19,78,140,.3)}
    .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
  .btn-ghost:hover{border-color:var(--orange);color:#fff;background:rgba(249,115,22,.12);transform:translateY(-2px)}
  .btn-blanc{background:#fff;color:var(--bleu);box-shadow:0 10px 24px rgba(10,37,64,.25)}
  .btn-blanc:hover{transform:translateY(-2px)}

  /* ---------- Topbar ---------- */
  .topbar{background:var(--bleu-nuit);color:#c9d7ea;font-size:.82rem;padding:8px 0}
  .topbar .conteneur{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .topbar span{display:inline-flex;align-items:center;gap:7px}
  .topbar a{color:#fff;font-weight:600}
    .topbar .sep{opacity:.3}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne);transition:box-shadow .45s ease}
  header.scrolle{box-shadow:0 8px 28px rgba(10,37,64,.10)}

  /* ---------- Fil d'Ariane ---------- */
  /* Barre fine sur fond blanc, entre l'en-tete collant et le hero sombre.
     Le schema BreadcrumbList existait deja sur 29 pages sans fil visible :
     les deux disent maintenant la meme chose, dans le meme ordre. */
  .fil-ariane{padding:14px 0 0}
  .fil-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:.8rem;color:var(--gris)}
  .fil-ariane li{display:flex;align-items:center;gap:8px;min-width:0}
  .fil-ariane li+li::before{content:"\203A";color:var(--bleu-clair);font-weight:700;opacity:.55}
  .fil-ariane a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
  .fil-ariane a:hover{color:var(--bleu-nuit);border-bottom-color:var(--orange)}
  .fil-ariane [aria-current]{color:var(--bleu-nuit);font-weight:600;max-width:min(46ch,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- Encadre « en bref » ---------- */
  /* Resume en haut de page, sous le hero. Chaque ligne est une phrase complete
     et autonome, reutilisable telle quelle par un moteur de reponse. */
  .encadre{padding:34px 0 0}
  .encadre-carte{background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--orange);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--ombre-petite)}
  .encadre-titre{font-family:var(--titre);font-weight:800;color:var(--bleu-nuit);font-size:1.08rem;margin:0 0 16px}
  .encadre-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px}
  .encadre-liste li{display:flex;gap:9px;align-items:baseline;font-size:.92rem;color:var(--encre)}
  .encadre-cle{font-family:var(--titre);font-weight:800;color:var(--orange-fonce);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto;min-width:8.5rem}
  .encadre-val{color:var(--gris);line-height:1.55}
  @media(max-width:760px){.encadre-liste{grid-template-columns:1fr}.encadre{padding:26px 0 0}.encadre-carte{padding:20px 18px}.encadre-cle{min-width:0;display:block}.encadre-liste li{flex-direction:column;gap:2px}}
  .barre-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
  .logo{display:flex;align-items:center;gap:11px}
  .logo-icone{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--bleu),var(--bleu-nuit));display:grid;place-items:center;flex:none}
  .logo-texte{font-family:var(--titre);font-weight:900;font-size:1.12rem;line-height:1.05;color:var(--bleu-nuit);letter-spacing:-.01em}
  .logo-texte small{display:block;font-family:var(--texte);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-fonce)}
  nav.lien{display:flex;align-items:center;gap:30px}
  nav.lien a{font-weight:600;font-size:.95rem;color:var(--encre);position:relative;padding:6px 0}
  nav.lien a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;border-radius:2px;background:var(--orange-texte);transition:width .45s ease}
  nav.lien a:hover::after,nav.lien a.actif::after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:14px}
  .tel-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--titre);font-weight:800;color:var(--bleu-nuit);font-size:1.02rem}
  .tel-btn:hover{color:var(--orange-fonce)}
  .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px}
  .burger span{display:block;width:24px;height:2.5px;background:var(--bleu-nuit);margin:5px 0;border-radius:2px;transition:transform .45s ease,opacity .45s ease}
  .menu-mobile{display:none;flex-direction:column;gap:4px;padding:10px 0 18px;border-top:1px solid var(--ligne)}
  .menu-mobile a{padding:12px 4px;font-weight:600;font-size:1rem;border-bottom:1px solid var(--ligne);color:var(--encre)}
  .menu-mobile a:hover{color:var(--orange-fonce)}
  .menu-mobile .btn{margin-top:14px;width:100%}
  body.menu-ouvert .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.menu-ouvert .burger span:nth-child(2){opacity:0}
  body.menu-ouvert .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero{position:relative;background:radial-gradient(900px 520px at 88% -10%,rgba(249,115,22,.16),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(26,92,173,.35),transparent 60%),linear-gradient(160deg,var(--bleu-nuit) 0%,var(--bleu-nuit-2) 55%,var(--bleu) 130%);color:#fff;padding:72px 0 96px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none}
  .hero-grille{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .hero .sur-titre{color:var(--orange)}
  .hero .sur-titre::before{background:var(--orange)}
  .hero h1{color:#fff;font-weight:900;font-size:clamp(2.3rem,4.3vw,3.1rem);letter-spacing:-.025em;margin-bottom:8px}
  .hero h1 .orange{color:var(--orange)}
  .hero .sous-titre{font-family:var(--titre);font-weight:700;font-size:clamp(1.02rem,2vw,1.3rem);color:#ffd9b8;margin-bottom:20px}
  .hero p{color:#c9d7ea;max-width:56ch;font-size:1.05rem}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
  .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;font-weight:600;font-size:.82rem;padding:8px 14px;border-radius:999px}
  .badge svg{color:var(--orange);flex:none}
  .portrait-zone{position:relative;display:flex;justify-content:center}
  .portrait-cadre{position:relative;width:min(340px,80%);aspect-ratio:1/1;border-radius:50%;padding:9px;background:linear-gradient(145deg,var(--orange),#ffb37a 45%,var(--bleu-clair));box-shadow:0 30px 70px rgba(0,0,0,.45)}
  .portrait-cadre img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:7px solid var(--bleu-nuit);background:#000}
  .pastille-30{position:absolute;top:-16px;right:-16px;background:var(--orange);color:#fff;border-radius:50%;width:104px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;text-align:center;font-family:var(--titre);font-weight:900;line-height:1;box-shadow:0 14px 30px rgba(249,115,22,.5);border:4px solid #fff;animation:flotte 5s ease-in-out infinite;z-index:3}
  .pastille-30 strong{font-size:1.5rem;line-height:1}
  .pastille-30 .l1{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;line-height:1.05;margin-top:1px}
  .pastille-30 .l2{font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;line-height:1.1;white-space:nowrap;margin-top:1px}
  @keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .bande-stats{border-top:1px solid rgba(255,255,255,.14);margin-top:64px;padding-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
  .stat{text-align:left}
  .stat strong{display:block;font-family:var(--titre);font-weight:900;font-size:1.7rem;color:#fff}
  .stat strong em{font-style:normal;color:var(--orange)}
  .stat span{font-size:.85rem;color:#a9bcd4}

  /* ---------- Bandeau urgence ---------- */
  .urgence{background:linear-gradient(120deg,var(--orange) 0%,var(--orange-fonce) 100%);color:#fff;padding:30px 0}
  .urgence .conteneur{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
  .urgence-txt{display:flex;align-items:center;gap:20px}
  .urgence-ico{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;animation:clignote 2s ease-in-out infinite}
  @keyframes clignote{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
  .urgence h2{color:#fff;font-size:1.35rem;font-weight:800}
  .urgence p{color:#ffe9d2;font-size:.95rem}
  .urgence a.tel-gros{font-family:var(--titre);font-weight:900;font-size:1.9rem;color:#fff;display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);padding:12px 24px;border-radius:14px;border:2px solid rgba(255,255,255,.35);transition:background .45s ease,transform .45s ease}

  /* ---------- Services ---------- */
  .services{background:var(--gris-pale)}
  .services-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:44px}
  .services-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .carte-service{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ligne);transition:transform .45s ease,box-shadow .45s ease;display:flex;flex-direction:column}
    .carte-service figure{position:relative;aspect-ratio:4/4.2;overflow:hidden;background:var(--bleu-ciel)}
  .carte-service img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .45s ease}
    .carte-service figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,37,64,.55))}
  .carte-service .num{position:absolute;bottom:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.92);color:var(--bleu);font-family:var(--titre);font-weight:800;font-size:.9rem;display:grid;place-items:center}
  .carte-service figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;font-family:var(--titre);font-weight:700;font-size:1.02rem;padding:14px 18px 16px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
  .carte-service .corps{padding:18px;flex:1;display:flex;flex-direction:column;gap:10px}
  .carte-service .corps p{font-size:.88rem;color:var(--gris);flex:1}
  .carte-service .plus{font-family:var(--titre);font-weight:700;font-size:.85rem;color:var(--orange-fonce);display:inline-flex;align-items:center;gap:6px}
  .carte-service .plus svg{transition:transform .45s ease}
    .services-plus{margin-top:38px;background:var(--bleu-nuit);border-radius:var(--radius);padding:30px 34px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
  .services-plus::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.35),transparent 70%)}
  .services-plus h3{color:#fff;font-size:1.2rem;font-weight:800;margin-bottom:8px}
  .services-plus ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:#c9d7ea}
  .services-plus li{display:flex;align-items:center;gap:8px}
  .services-plus li svg{color:var(--orange);flex:none}
  .services-plus .btn{position:relative;z-index:1}

  /* ---------- À propos ---------- */
  .apropos-grille{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .apropos-grille .lead{margin-bottom:16px}
  .apropos-pts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
  .apropos-pts li{display:flex;gap:12px;align-items:flex-start;background:var(--gris-pale);border:1px solid var(--ligne);border-radius:14px;padding:16px}
  .apropos-pts svg{flex:none;margin-top:2px}
  .apropos-pts strong{display:block;font-family:var(--titre);font-size:.95rem;color:var(--encre)}
  .apropos-pts span{font-size:.83rem;color:var(--gris)}
  .apropos-visuel{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre)}
  .apropos-visuel img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.6}
  .apropos-visuel .carte-flottante{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:14px;padding:16px 18px;box-shadow:var(--ombre-petite)}
  .apropos-visuel .carte-flottante strong{font-family:var(--titre);font-weight:800;color:var(--bleu-nuit);font-size:1rem;display:flex;align-items:center;gap:8px}
  .apropos-visuel .carte-flottante p{font-size:.83rem;color:var(--gris)}

  /* ---------- Zone d'intervention ---------- */
  .zone{background:linear-gradient(180deg,var(--gris-pale),#fff)}
  .zone-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0 30px}
  .carte-zone{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:28px;transition:transform .45s ease,box-shadow .45s ease, border-color .45s ease}
  .carte-zone .zone-ico{width:52px;height:52px;border-radius:14px;background:var(--orange-pale);display:grid;place-items:center;margin-bottom:16px}
  .carte-zone h3{font-size:1.1rem;font-weight:800;margin-bottom:6px}
  .carte-zone p{font-size:.88rem;color:var(--gris)}
  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
  .chip{background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:600;color:var(--bleu);display:inline-flex;align-items:center;gap:8px;transition:all .45s ease}
  .chip svg{color:var(--orange)}
  .chip:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)}
  .chip:hover svg{color:#ffd9b8}

  /* ---------- CTA final ---------- */
  .cta-final{background:linear-gradient(120deg,var(--orange),var(--orange-fonce));color:#fff;padding:60px 56px;position:relative;overflow:hidden;text-align:center}
  .cta-final::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px;opacity:.4}
  .cta-final h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:900;position:relative}
  .cta-final p{color:#ffe9d2;max-width:56ch;margin:12px auto 28px;position:relative;font-size:1.04rem}
  .cta-final .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
  .cta-final .btn-blanc:hover{background:#fff7f0}

  /* ---------- Contact ---------- */
  .contact-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .contact-infos{display:flex;flex-direction:column;gap:18px;margin-top:30px}
  .ligne-contact{display:flex;align-items:center;gap:18px;background:var(--gris-pale);border:1px solid var(--ligne);border-radius:16px;padding:18px 20px;transition:transform .45s ease,box-shadow .45s ease}
  .ligne-contact:hover{transform:translateX(5px);box-shadow:var(--ombre-petite)}
  .ligne-contact .ico{width:50px;height:50px;border-radius:13px;background:var(--bleu);color:#fff;display:grid;place-items:center;flex:none}
  .ligne-contact .ico.orange{background:var(--orange)}
  .ligne-contact strong{display:block;font-family:var(--titre);font-weight:800;font-size:1.02rem;color:var(--encre)}
  .ligne-contact span{font-size:.9rem;color:var(--gris)}
  .ligne-contact a{color:var(--bleu);font-weight:700}
  .ligne-contact a:hover{color:var(--orange-fonce)}
  .socials{display:flex;gap:12px;margin-top:8px}
  .socials a{width:48px;height:48px;border-radius:13px;background:var(--gris-pale);border:1px solid var(--ligne);display:grid;place-items:center;color:var(--bleu);transition:all .45s ease}
  .contact-visuel{border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);position:relative}
  .contact-visuel img{width:100%;height:100%;object-fit:cover;object-position:center top;aspect-ratio:4/3.6}
  .contact-visuel .bandeau-photo{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(10,37,64,.92);backdrop-filter:blur(8px);color:#fff;border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px}
  .contact-visuel .bandeau-photo svg{color:var(--orange);flex:none}
  .contact-visuel .bandeau-photo strong{font-family:var(--titre);font-weight:800;display:block}
  .contact-visuel .bandeau-photo span{font-size:.82rem;color:#c9d7ea}

  /* ---------- Footer ---------- */
  footer{background:var(--bleu-nuit);color:#a9bcd4;padding:64px 0 0;margin-top:0}
  .footer-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:44px}
  footer .logo-texte{color:#fff}
  footer p{font-size:.9rem;max-width:40ch}
  /* Les trois titres de colonnes du pied de page sont passes de h4 a h3 pour
   supprimer un saut de niveau (h2 -> h4). La regle ci-dessous vise donc les
   deux balises : sans le h3, les titres heritaient du gris du pied de page et
   devenaient quasi illisibles sur le fond bleu nuit. */
footer h3,footer h4{color:#fff;font-family:var(--titre);font-weight:800;font-size:1rem;margin-bottom:18px}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  footer ul a{font-size:.92rem;transition:color .45s ease, padding-left .45s ease}
  footer ul a:hover{color:var(--orange);padding-left:5px}
  .footer-bas{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem}
  .footer-bas a{color:#c9d7ea}
  .footer-bas a:hover{color:var(--orange)}

  /* ---------- Formulaire de devis ---------- */
  .section-devis{background:var(--gris-pale)}
  .devis-grille{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
  .devis-infos .lead{margin-top:14px}
  .devis-points{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px}
  .devis-points li{display:flex;gap:13px;align-items:flex-start}
  .devis-points svg{flex:none;margin-top:2px}
  .devis-points strong{display:block;font-family:var(--titre);font-size:.98rem;color:var(--encre)}
  .devis-points span{font-size:.86rem;color:var(--gris)}
  .devis-call{margin-top:28px;background:var(--bleu-nuit);color:#fff;border-radius:16px;padding:20px 22px;display:flex;align-items:center;gap:16px}
  .devis-call svg{flex:none}
  .devis-call strong{display:block;font-family:var(--titre);font-size:1.05rem}
  .devis-call a{color:var(--orange);font-weight:800;font-size:1.15rem}
  .form-carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:34px;box-shadow:var(--ombre-petite)}
  .form-carte h3{font-size:1.25rem;font-weight:800;margin-bottom:4px}
  .form-carte>p{font-size:.88rem;color:var(--gris);margin-bottom:22px}
  .form-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .champ{display:flex;flex-direction:column;gap:6px}
  .champ label{font-weight:600;font-size:.84rem;color:var(--encre)}
  .champ label .req{color:var(--orange-fonce)}
  .champ input,.champ select,.champ textarea{width:100%;padding:13px 15px;border:1.5px solid var(--ligne);border-radius:11px;font-family:var(--texte);font-size:.95rem;color:var(--encre);background:#fff;transition:border-color .45s ease,box-shadow .45s ease}
  .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu-clair);box-shadow:0 0 0 3px rgba(26,92,173,.12)}
  .champ textarea{resize:vertical;min-height:110px}
  .pleine-largeur{grid-column:1/-1}
  .consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--gris)}
  .consent input{margin-top:3px;accent-color:var(--orange)}
  .form-carte .btn{width:100%;margin-top:6px}
  .form-retour{display:none;margin-top:14px;border-radius:12px;padding:13px 16px;font-size:.9rem;font-weight:600}
  .form-retour.ok{display:block;background:#e8f7ee;color:#16703c;border:1px solid #bfe8d0}
  .form-retour.err{display:block;background:#fdecec;color:#b3261e;border:1px solid #f5c6c6}
  .form-note{font-size:.74rem;color:var(--gris);margin-top:12px;text-align:center}

  /* ---------- Scroll top ---------- */
  .top-btn{position:fixed;right:22px;bottom:96px;width:48px;height:48px;border-radius:13px;background:var(--orange);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 28px rgba(249,115,22,.4);opacity:0;visibility:hidden;transform:translateY(12px);transition:all .45s ease;z-index:140}
  .top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}
  
  /* ---------- Reveal (activé uniquement si JS) ---------- */
  html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
  /* Le decalage est lu dans une variable pour que les etats de survol puissent
     s'appliquer : `transform:none` ici ecrasait tout `:hover` de carte, car la
     specificite de cette regle (0,3,1) est superieure a celle d'un survol de classe.
     Consequence mesuree avant correction : aucune carte de galerie ni de service ne
     se soulevait au survol sur 10 pages. */
  html.js .reveal.visible{opacity:1;transform:translate(var(--decalage-x,0px),var(--decalage-y,0px))}
  .delai-1{transition-delay:.08s}.delai-2{transition-delay:.16s}.delai-3{transition-delay:.24s}.delai-4{transition-delay:.32s}

  /* ---------- Responsive ---------- */
  @media(max-width:1080px){
    .services-grille{grid-template-columns:repeat(3,1fr)}
    .zone-grille{grid-template-columns:1fr 1fr}
  }
  @media(max-width:900px){
    section{padding:68px 0}
    .hero-grille{grid-template-columns:1fr;gap:44px}
    .portrait-zone{order:-1}
    .portrait-cadre{width:min(280px,70%)}
    .bande-stats{grid-template-columns:repeat(2,1fr)}
    .apropos-grille,.contact-grille{grid-template-columns:1fr;gap:40px}
    .apropos-visuel img{aspect-ratio:4/3.4}
    .footer-grille{grid-template-columns:1fr 1fr}
    nav.lien{display:none}
    .nav-cta .tel-btn{font-size:.86rem;gap:6px;white-space:nowrap}
    .burger{display:block}
    .menu-mobile.ouvert{display:flex}
    .urgence a.tel-gros{font-size:1.45rem}
  }
  @media(max-width:640px){
    .devis-grille{grid-template-columns:1fr;gap:32px}
    .form-carte{padding:24px}
    .top-btn{right:14px;bottom:80px}
    .services-grille{grid-template-columns:1fr 1fr;gap:14px}
    .zone-grille{grid-template-columns:1fr}
    .bande-stats{grid-template-columns:1fr 1fr;gap:14px}
    .stat strong{font-size:1.35rem}
    .pastille-30{width:84px;height:84px}
    .pastille-30 strong{font-size:1.25rem}
    .pastille-30 .l1{font-size:.6rem;letter-spacing:.12em}
    .pastille-30 .l2{font-size:.47rem;letter-spacing:.03em}
    .carte-service figcaption{font-size:.9rem;padding:10px 12px 12px}
    .carte-service .corps{padding:14px}
    .cta-final{padding:44px 24px}
    .topbar .sep,.topbar .zone-top{display:none}
  }
  @media(max-width:420px){
    .services-grille{grid-template-columns:1fr}
  }

  /* ---------- Refonte lisibilité et conversion ---------- */
  .icone{display:inline-block;vertical-align:middle;flex:none}
  .tel-btn{gap:8px}
  .tel-ico{width:31px;height:31px;border-radius:9px;background:var(--orange-pale);color:var(--orange-fonce);display:grid;place-items:center}
  .tel-ico .icone{width:17px;height:17px}
  .tel-num{white-space:nowrap}
  .hero-home{padding-top:66px;padding-bottom:0}
  .hero-home .hero-grille{grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
  .hero-copy{position:relative;z-index:2}
  .hero-copy h1{max-width:650px}
  .hero-checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px}
  .hero-checks span{display:inline-flex;align-items:center;gap:7px;color:#dce6f2;font-size:.84rem;font-weight:600}
  .hero-checks .icone{color:var(--orange)}
  .hero-chantiers{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:end;min-width:0}
  .hero-project{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 28px 60px rgba(0,0,0,.32);border:8px solid rgba(255,255,255,.9)}
  .hero-project img{width:100%;height:auto;display:block;object-fit:contain}
  .hero-project figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;background:rgba(10,37,64,.9);color:#fff;border-radius:10px;padding:10px 12px;font-family:var(--titre);font-weight:800;font-size:.82rem}
  .hero-project figcaption .icone{color:var(--orange)}
  .hero-project-secondary{margin-bottom:28px;transform:rotate(2deg)}
  .hero-bottom{display:flex;flex-wrap:wrap;gap:14px 28px;border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding:19px 0 22px;position:relative}
  .hero-bottom span{display:inline-flex;align-items:center;gap:7px;color:#c9d7ea;font-size:.8rem}
  .hero-bottom .icone{color:var(--orange)}
  .section-pad{padding:58px 0}
  .section-soft{background:var(--gris-pale)}
  .section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:26px}
  .section-heading>p{max-width:48ch;color:var(--gris);font-size:.98rem}
  .section-heading.centered{display:block;text-align:center}
  .section-heading.centered>p{margin:10px auto 0}
  .service-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .service-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:25px 22px;display:flex;flex-direction:column;min-height:245px;transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease}
  .service-card:hover{transform:translateY(-5px);box-shadow:var(--ombre);border-color:transparent}
  .service-card-ico,.info-card-ico{width:52px;height:52px;border-radius:15px;background:var(--orange-pale);color:var(--orange-fonce);display:grid;place-items:center;margin-bottom:19px}
  .service-card h3{font-size:1.13rem;margin-bottom:8px}
  .service-card p{font-size:.88rem;color:var(--gris);flex:1}
  .card-link{display:inline-flex;align-items:center;gap:6px;color:var(--orange-fonce);font-family:var(--titre);font-weight:800;font-size:.82rem;margin-top:16px}
  .card-link .icone{transition:transform .45s ease}
  a:hover .card-link .icone{transform:translateX(4px)}
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .gallery-card{margin:0;background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:10px;overflow:hidden;box-shadow:var(--ombre-petite)}
  .gallery-card img{width:100%;height:auto;display:block;object-fit:contain;border-radius:12px;background:#fff}
  .gallery-card figcaption{font-family:var(--titre);font-weight:800;color:var(--encre);font-size:.92rem;padding:14px 8px 9px;display:flex;align-items:center;gap:8px}
  .gallery-card figcaption::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--orange);display:inline-block;flex:none}
  .apropos-grille{grid-template-columns:.85fr 1.15fr;gap:72px}
  .apropos-visuel{background:#fff}
  .apropos-visuel img{object-fit:contain;background:#fff}
  .apropos-pts .icone{color:var(--orange-fonce);flex:none}
  .zone-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:25px;transition:transform .45s ease,box-shadow .45s ease;display:block}
  .zone-card:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
  .zone-card>.icone,.zone-card-ico{color:var(--orange-fonce);display:block;margin-bottom:15px}
  .zone-card h3{font-size:1.08rem;margin-bottom:7px}
  .zone-card p{color:var(--gris);font-size:.88rem}
  .zone-card .card-link{display:flex}
  .chips{justify-content:flex-start}
  .chip{padding:10px 15px}
  /* ---------- Hero et contenu des pages services ---------- */
  .service-hero{background:radial-gradient(900px 520px at 88% -10%,rgba(249,115,22,.16),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(26,92,173,.35),transparent 60%),linear-gradient(160deg,var(--bleu-nuit) 0%,var(--bleu-nuit-2) 72%,var(--bleu) 175%);color:#fff;padding:62px 0 0;overflow:hidden}
  .service-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}
  .service-hero-copy{padding:12px 0 40px}
  .service-hero-copy h1{color:#fff;font-size:clamp(2.05rem,4.5vw,3.55rem);margin:7px 0 20px;letter-spacing:-.025em}
  .service-hero-lead{color:#dce6f2;max-width:61ch;font-size:1.05rem}
  .service-hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
  .service-hero-points{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px}
  .service-hero-points span{display:inline-flex;align-items:center;gap:7px;color:#dce6f2;font-size:.81rem;font-weight:600}
  .service-hero-points .icone{color:var(--orange)}
  .service-hero-photo{margin:0 auto;max-width:480px;background:#fff;border:8px solid rgba(255,255,255,.92);border-radius:22px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.3);align-self:end}
  .service-hero-photo img{display:block;width:100%;height:auto;object-fit:contain}
  .service-hero-photo figcaption{display:flex;align-items:center;gap:7px;color:var(--encre);background:#fff;font-family:var(--titre);font-size:.84rem;font-weight:800;padding:11px 13px}
  .service-hero-photo figcaption .icone{color:var(--orange-fonce)}
  .service-hero-foot{border-top:1px solid rgba(255,255,255,.15);padding:17px 0 19px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .service-hero-foot span,.service-hero-foot a{display:inline-flex;align-items:center;gap:7px;color:#dce6f2;font-size:.82rem}
  .service-hero-foot span .icone{color:var(--orange)}
  .service-hero-foot a{color:#fff;font-weight:800}
  .service-hero-foot a .icone{color:var(--orange)}
  .compact-hero .service-hero-copy{max-width:760px;margin:0 auto;text-align:center;padding-bottom:54px}
  .compact-hero .service-hero-actions{justify-content:center}
  .service-section{padding:54px 0}
  .service-section-soft{background:var(--gris-pale)}
  .content-with-aside{display:grid;grid-template-columns:1fr 310px;gap:30px;align-items:start}
  .info-grid{display:grid;gap:14px}
  .info-grid-2{grid-template-columns:1fr 1fr}
  .info-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:23px;min-height:205px;box-shadow:var(--ombre-petite)}
  .info-card-ico{margin-bottom:15px}
  .info-card h3{font-size:1.05rem;margin-bottom:7px}
  .info-card p{color:var(--gris);font-size:.88rem}
  .service-side-card{background:var(--bleu-nuit);color:#fff;border-radius:var(--radius);padding:27px;position:sticky;top:105px;box-shadow:var(--ombre)}
  .service-side-ico{width:50px;height:50px;border-radius:14px;background:var(--orange);display:grid;place-items:center;margin-bottom:18px}
  .service-side-card h3{color:#fff;font-size:1.17rem;margin-bottom:8px}
  .service-side-card p{color:#c9d7ea;font-size:.88rem;margin-bottom:18px}
  .side-phone{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--titre);font-size:1.35rem;font-weight:900}
  .side-link{display:inline-flex;align-items:center;gap:6px;color:#ffd9b8;font-size:.82rem;font-weight:700;margin-top:17px}
  .side-link .icone{color:var(--orange)}
  .notice-card{display:flex;gap:14px;align-items:flex-start;border-radius:14px;padding:17px 19px;margin-top:20px;font-size:.88rem}
  .notice-card>span{color:var(--orange-fonce);flex:none}
  .notice-warning{background:var(--orange-pale);border:1px solid #ffd8b5;color:#704018}
  .notice-warning strong{color:#6a3210}
  .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .step-card{display:flex;gap:15px;background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:23px;box-shadow:var(--ombre-petite)}
  .step-number{width:43px;height:43px;border-radius:12px;background:var(--bleu-nuit);color:var(--orange);display:grid;place-items:center;font-family:var(--titre);font-weight:900;font-size:.8rem;flex:none}
  .step-card h3{font-size:1.02rem;margin:1px 0 7px}
  .step-card p{color:var(--gris);font-size:.86rem}
  .devis-banner{margin-top:28px;background:var(--bleu-nuit);border-radius:var(--radius);padding:25px 28px;color:#fff;display:flex;align-items:center;gap:17px;flex-wrap:wrap}
  .devis-banner-ico{width:50px;height:50px;border-radius:14px;background:rgba(249,115,22,.18);color:var(--orange);display:grid;place-items:center;flex:none}
  .devis-banner>div{flex:1;min-width:220px}
  .devis-banner h3{color:#fff;font-size:1.08rem;margin-bottom:5px}
  .devis-banner p{color:#c9d7ea;font-size:.86rem}
  .faq-wrap{max-width:880px;margin:0 auto}
  .qa-bloc{display:grid;gap:8px}
  .faq-item{background:#fff;border:1px solid var(--ligne);border-radius:14px;overflow:hidden;box-shadow:var(--ombre-petite)}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:18px 20px;font-family:var(--titre);font-weight:800;color:var(--encre)}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-ico{width:31px;height:31px;border-radius:9px;background:var(--orange-pale);color:var(--orange-fonce);display:grid;place-items:center;flex:none}
  .faq-question{flex:1}
  .faq-chevron{color:var(--bleu);display:grid;transition:transform .45s ease}
  .faq-item[open] .faq-chevron{transform:rotate(180deg)}
  .faq-answer{padding:0 20px 19px 64px;color:var(--gris);font-size:.92rem}
  .faq-answer p{max-width:70ch}

  /* ---------- Contact, formulaire et mentions ---------- */
  .contact-section,.legal-section{background:#fff}
  .contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
  .contact-infos{gap:13px}
  .ligne-contact{padding:16px 18px}
  .ligne-contact small{display:block;color:var(--gris);font-size:.82rem;margin-top:3px}
  .contact-form-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:30px;box-shadow:var(--ombre)}
  .form-card-heading{display:flex;gap:13px;align-items:center;margin-bottom:23px}
  .form-card-heading .info-card-ico{margin:0}
  .form-card-heading h3{font-size:1.25rem}
  .form-card-heading p{color:var(--gris);font-size:.84rem}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .champ{display:flex;flex-direction:column;gap:6px}
  .champ.full{grid-column:1/-1}
  .champ label{font-size:.83rem;font-weight:700;color:var(--encre)}
  .champ .req{color:var(--orange-fonce)}
  .champ input,.champ select,.champ textarea{width:100%;border:1.5px solid var(--ligne);border-radius:11px;padding:12px 14px;color:var(--encre);background:#fff;font:inherit;font-size:.9rem}
  .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu-clair);box-shadow:0 0 0 3px rgba(26,92,173,.12)}
  .champ textarea{resize:vertical;min-height:126px}
  .contact-form-card form>.btn{width:100%;margin-top:17px}
  .form-note{color:var(--gris);font-size:.74rem;text-align:center;margin-top:12px}
  .hidden-field{display:none}
  .legal-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px}
  .legal-card{background:var(--gris-pale);border:1px solid var(--ligne);border-radius:var(--radius);padding:28px}
  .legal-card .info-card-ico{margin-bottom:16px}
  .legal-card h2{font-size:1.4rem;margin-bottom:20px}
  .legal-card h3{font-size:1rem;margin:23px 0 7px}
  .legal-card p{color:var(--gris);font-size:.9rem;margin-top:13px}
  .legal-card dl{display:grid;grid-template-columns:1fr 1.2fr;gap:11px 15px;font-size:.88rem}
  .legal-card dt{font-weight:800;color:var(--encre)}
  .legal-card dd{color:var(--gris);margin:0}
  .legal-card a{color:var(--bleu);font-weight:700}
  .legal-note{border-left:3px solid var(--orange);padding-left:13px}
  .footer-contact a,.footer-contact li>span{display:flex;align-items:flex-start;gap:8px}
  .footer-contact .icone{color:var(--orange);margin-top:3px}
  .footer-tel{color:#fff;font-weight:800}
  .footer-tel .icone{color:var(--orange)}
  .footer-intro{margin-top:16px;max-width:350px}
  .footer-legal{margin-top:12px;font-size:.78rem;color:#8fa5c0}
  .mobile-call-bar{display:none}

  @media(max-width:1080px){
    .service-card-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:900px){
    .hero-home .hero-grille,.service-hero-grid{grid-template-columns:1fr;gap:30px}
    .hero-home .hero-chantiers{order:0}
    .hero-chantiers{max-width:650px;width:100%;margin:0 auto}
    .hero-home .hero-copy{padding-top:10px}
    .hero-bottom{margin-top:32px}
    .apropos-grille{grid-template-columns:1fr;gap:38px}
    .apropos-visuel{max-width:560px;margin:0 auto;width:100%}
    .content-with-aside,.contact-layout{grid-template-columns:1fr}
    .service-side-card{position:static}
    .legal-layout{grid-template-columns:1fr}
  }
  @media(max-width:640px){
    body{padding-bottom:78px}
    .mobile-call-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:160;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--orange);color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 12px 28px rgba(10,37,64,.28);font-family:var(--titre);font-size:.9rem;font-weight:800}
    .mobile-call-bar .icone{flex:none}
    .mobile-call-bar strong{font-size:.82rem;letter-spacing:.02em}
    .section-pad,.service-section{padding:42px 0}
    .apropos-pts{grid-template-columns:1fr}
    .section-heading{display:block;margin-bottom:20px}
    .section-heading>p{margin-top:13px}
    .hero-home{padding-top:45px}
    .hero-project{border-width:5px;border-radius:16px}
    .hero-project figcaption{left:7px;right:7px;bottom:7px;padding:8px;font-size:.72rem}
    .hero-project-secondary{margin-bottom:15px}
    .hero-bottom{gap:9px;display:grid;grid-template-columns:1fr 1fr}
    .hero-bottom span{font-size:.72rem}
    .service-card-grid,.gallery-grid,.info-grid-2,.steps-grid{grid-template-columns:1fr}
    .gallery-card{padding:7px}
    .gallery-card figcaption{padding:12px 6px 7px;font-size:.84rem}
    .service-hero{padding-top:42px}
    .service-hero-copy h1{font-size:2.15rem}
    .service-hero-photo{max-width:420px;border-width:5px}
    .service-hero-foot{padding-top:15px}
    .service-hero-foot a{width:100%}
    .faq-item summary{padding:15px 14px;font-size:.91rem}
    .faq-answer{padding:0 14px 16px 58px;font-size:.86rem}
    .devis-banner{padding:21px}
    .devis-banner .btn{width:100%}
    .form-grid{grid-template-columns:1fr}
    .champ.full{grid-column:auto}
    .contact-form-card{padding:22px}
    .legal-card{padding:22px}
    .legal-card dl{grid-template-columns:1fr;gap:4px}
    .legal-card dd{margin-bottom:9px}
  }
  .zone-content>h2,.zone-content>p{max-width:78ch}
  .zone-content>h2{margin-bottom:8px}
  .zone-content>p{color:var(--gris);font-size:.96rem}
  .zone-specifics,.zone-situations,.zone-preparation,.zone-faq{max-width:880px;margin:24px auto 0;padding:0}
  .zone-situations h2,.zone-preparation h2,.zone-faq h2{margin-bottom:14px}
  .zone-preparation>p{max-width:78ch;color:var(--gris);font-size:.96rem;margin-bottom:22px}
  .zone-specifics .check-list{margin-top:14px}
  .zone-specifics h2,.zone-faq h2{margin-bottom:14px}
  .check-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0}
  .check-list li{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--ligne);border-radius:13px;padding:15px;color:var(--gris);font-size:.88rem}
  .check-list li>span:first-child{color:var(--orange-fonce);flex:none;margin-top:1px}
  @media(max-width:640px){.check-list{grid-template-columns:1fr}.zone-specifics,.zone-faq{margin-top:22px}.footer-grille{grid-template-columns:1fr}}
  @media(max-width:640px){.footer-grille{grid-template-columns:1fr}}
/* --- Bandeau cookies (RGPD) --- */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:10000;display:none;background:var(--bleu-nuit);color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
#cookie-banner.displayed{display:block}
.cookie-content{padding:16px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:.9rem;line-height:1.5}
.cookie-content p{margin:0;max-width:640px}
#cookie-banner .btn-primary,.cookie-content button{cursor:pointer;font-size:.88rem;border-radius:8px;padding:10px 16px}
#btn-accept-cookies{background:var(--orange);color:var(--bleu-nuit);border:0;font-weight:600;white-space:nowrap}
#btn-refuse-cookies{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);white-space:nowrap}
#btn-accept-cookies:hover{background:var(--orange-clair);color:var(--bleu-nuit)}
@media(max-width:700px){.cookie-content{display:block;text-align:center;padding:14px}}
/* --- Sections marques (Viessmann, Vaillant, STG/Induscabel, toutes marques) --- */
.footer-sociaux{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.footer-sociaux a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:7px 13px;color:var(--encre);font-family:var(--titre);font-weight:600;font-size:.86rem;transition:border-color .45s,transform .45s}
.footer-sociaux a:hover{border-color:var(--orange);transform:translateY(-1px)}
.marques-liste{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.marque-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:9px 16px;font-family:var(--titre);font-weight:700;font-size:.92rem;color:var(--encre)}
.marque-item::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.marques-section{background:linear-gradient(135deg,#f8f9fa 0%,#fff9f5 100%);border:1px solid var(--ligne);border-radius:16px;padding:24px;margin-bottom:22px}
.marques-section .marques-liste{margin-top:14px}
.marques-chips .marques-liste{margin-top:12px}
/* --- Fonts auto-hébergées (OFL Google Fonts) : 0 requête externe, 0 problème GDPR --- */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-var.woff2) format(woff2)}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-var.woff2) format(woff2)}
/* Consentement formulaire + accessibilité */
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:#4b5563;line-height:1.45;cursor:pointer}
.consent input{margin-top:.2rem;flex:0 0 auto}
.consent a{color:var(--orange);text-decoration:underline}
.legal-maj{grid-column:1/-1;font-size:.85rem;color:var(--gris);text-align:center;margin-top:1rem}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* Tarifs indicatifs */
.tarifs-wrap{max-width:780px;margin:0 auto}
.tarifs-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(10,37,64,.05)}
.tarifs-table th,.tarifs-table td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid #eef1f4;font-size:.97rem}
.tarifs-table th{font-weight:600;color:var(--bleu-nuit)}
.tarifs-table td{white-space:nowrap;font-weight:700;color:var(--orange-texte);text-align:right}
.tarifs-table tr:last-child th,.tarifs-table tr:last-child td{border-bottom:none}
.tarifs-note{font-size:.8rem;color:var(--gris);margin-top:.8rem;text-align:center}
/* Pages zones : sections desservies + galerie */
.zone-preparation .chips{justify-content:flex-start;margin-top:14px}
.zone-note{font-size:.82rem;color:var(--gris);margin-top:14px}
.zone-galerie{max-width:880px;margin:0 auto}
#realisations .gallery-grid{margin-top:18px}
#realisations .section-heading{margin-bottom:6px}
/* Bouton flottant Appeler */
.call-float{position:fixed;right:22px;bottom:26px;z-index:150;display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-family:var(--titre);font-weight:800;font-size:.95rem;padding:14px 20px;border-radius:999px;box-shadow:0 12px 28px rgba(249,115,22,.42);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility .45s ease,background .45s ease}
.call-float.visible{opacity:1;visibility:visible;transform:translateY(0)}
.call-float:hover{background:var(--orange-fonce)}
@media(max-width:900px){.call-float{display:none}}
/* FAQ : hauteur animée */
.faq-answer{transition:height .45s ease}
@media print{html.js .reveal{opacity:1!important;transform:none!important}}
/* Zones : bandes de fond alternées */
.zone-band{padding:52px 0}
.zone-band-soft{background:var(--gris-pale)}
.zone-band-white{background:#fff}
.zone-band .zone-specifics{margin-top:38px}
.zone-band .zone-preparation,.zone-band .zone-situations,.zone-band .zone-faq,.zone-band .zone-galerie{margin-top:0}
.zone-band .zone-preparation + .zone-preparation{margin-top:36px}
@media(max-width:640px){.zone-band{padding:38px 0}}

/* ==========================================================================
   CORRECTIFS MESURES — ajoutes en fin de feuille pour gagner les conflits
   La feuille contient deux jeux de regles concatenes (72 selecteurs redefinis).
   A specificite egale, la derniere declaration gagne : ce bloc est donc place
   a la fin, et chaque regle vise une specificite superieure a celle qui la
   contredisait. A integrer proprement lors de la fusion des deux feuilles.
   ========================================================================== */

/* Case de consentement RGPD du formulaire de devis.
   Mesure avant correction : la case faisait 585 px de large (`.champ input
   {width:100%}` s'appliquait aussi aux cases a cocher) et repoussait le texte
   du libelle a droite de l'ecran, ce qui creait un defilement horizontal de la
   page (scrollWidth 1508 px pour 1425 px de fenetre). Le libelle etait aussi
   rendu en gras 700 et en bleu nuit par `.champ label`. */
.champ label.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.83rem;
  font-weight:400;color:var(--gris);line-height:1.45;cursor:pointer}
.champ .consent input[type="checkbox"]{width:1.5rem;height:1.5rem;min-width:1.5rem;
  padding:0;margin:.12rem 0 0;flex:0 0 auto;accent-color:var(--orange)}
.champ .consent a{color:var(--orange-fonce);text-decoration:underline;text-underline-offset:2px}
.champ .consent .req{color:var(--orange-fonce)}
.champ .consent:hover a{color:var(--orange)}

/* Liens secondaires : un lien doit se voir comme un lien.
   Mesure avant correction : `.faq-source a` et `.zone-note a` etaient rendus en
   gris sans soulignement, identiques au texte courant (retour utilisateur :
   « on ne voit pas qu'on peut cliquer »). */
.faq-source{margin-top:12px}
.faq-source a,.zone-note a.lien-chic{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--titre);font-weight:700;font-size:.82rem;color:var(--orange-fonce);
  text-decoration:none;border-bottom:1px solid rgba(234,88,12,.35);transition:color .2s ease,border-color .2s ease}
.faq-source a:hover,.zone-note a.lien-chic:hover{color:var(--orange);border-bottom-color:var(--orange)}
.faq-source a .icone{transition:transform .2s ease}
.faq-source a:hover .icone{transform:translateX(3px)}

/* Page « Questions » : les blocs par commune heritaient de `.zone-preparation`,
   plafonne a 880 px, alors que les blocs par theme font 1180 px (mesure : 880
   contre 1180, d'ou des FAQ plus etroites d'un bloc a l'autre). */
.question-commune{max-width:none;padding:0}
.question-commune+h3,.question-commune+.question-commune{margin-top:34px}
.question-commune h3{font-family:var(--titre);font-weight:800;color:var(--bleu-nuit);
  font-size:1.08rem;margin:34px 0 14px;padding-bottom:9px;border-bottom:2px solid var(--ligne)}
/* Le libelle du consentement contient du texte, un lien et un astérisque : dans
   un conteneur flex, chacun devenait une colonne distincte (le point final et
   l'asterisque se detachaient a droite). Le texte est desormais groupe dans un
   seul enfant. */
.champ .consent .consent-texte{min-width:0}

/* ==========================================================================
   CONTRASTES — WCAG 2.1 AA
   Mesures avant correction (ratios texte/fond calcules sur le rendu reel) :
     blanc sur orange #f97316 ....... 2,80:1  (4,5 requis)  boutons, bande CTA, bandeau cookies
     blanc sur orange #ea580c ....... 3,56:1  (4,5 requis)  fin du degrade de la bande CTA
     orange #f97316 sur blanc ....... 2,80:1  (4,5 requis)
     orange #ea580c sur blanc ....... 3,56:1  (4,5 requis)  sur-titres, liens de carte, tagline du logo
   Regle appliquee : l'orange reste la couleur de marque du site, mais
     - comme SURFACE, il porte du bleu nuit (5,54:1) plutot que du blanc ;
     - comme TEXTE sur fond clair, il utilise --orange-texte (5,18:1 sur blanc) ;
     - sur les surfaces sombres (hero, pied de page), il reste --orange (5,54:1).
   ========================================================================== */

/* Surfaces orange : texte bleu nuit */
.btn-orange{color:var(--bleu-nuit)}
.btn-orange:hover{background:var(--orange-clair);color:var(--bleu-nuit)}
.call-float{color:var(--bleu-nuit)}
.call-float:hover{background:var(--orange-clair);color:var(--bleu-nuit)}

.cta-final{background:linear-gradient(120deg,var(--orange),var(--orange-clair));color:var(--bleu-nuit)}
.cta-final h2,.cta-final p,.cta-final .sur-titre{color:var(--bleu-nuit)}
.cta-final .sur-titre::before{background:var(--bleu-nuit)}
.cta-final .btn-blanc{background:var(--blanc);color:var(--orange-texte)}
.cta-final .btn-blanc:hover{background:var(--orange-pale);color:var(--orange-texte)}

/* Orange comme texte, sur fond clair */
.sur-titre,.card-link{color:var(--orange-texte)}
.sur-titre::before{background:var(--orange-texte)}
.chip svg{color:var(--orange-texte)}
.faq-source a,.champ .consent a{color:var(--orange-texte);border-bottom-color:rgba(194,65,12,.35)}
.faq-source a:hover,.champ .consent a:hover{color:var(--orange-texte);border-bottom-color:var(--orange-texte)}
.champ .consent .req,.champ label .req,.champ .req{color:var(--orange-texte)}
.logo-texte small{color:var(--orange-texte);font-size:.72rem;letter-spacing:.18em}

/* Surfaces sombres : l'orange vif reste lisible, on le conserve */
.hero .sur-titre,.service-hero .sur-titre{color:var(--orange)}
.hero .sur-titre::before,.service-hero .sur-titre::before{background:var(--orange)}
footer .logo-texte small{color:var(--orange)}
footer ul a:hover{color:var(--orange-clair)}
.zone-note a.lien-chic{color:var(--orange-texte);border-bottom-color:rgba(194,65,12,.35)}

/* Le titre de l'accueil contient « Plombier-chauffagiste », un mot de 22
   caracteres qui depassait la largeur de colonne (650 px) a 62,4 px : le titre
   se coupait en 5 lignes (colonne de 580 px). La taille maximale est ramenee a
   3,1 rem, ce qui fait tenir le mot sur une ligne et redescend le titre a 3 lignes. */
.hero-copy h1{max-width:min(100%,680px)}

/* ==========================================================================
   MOBILE — mesures a 375 px de large (iPhone SE / 12 mini)
   Constat avant correction :
     - l'en-tete debordait de 3 px (nav-cta se terminait a 378 px pour 375 px) ;
     - le bloc de marque s'affichait sur 3 lignes et sa baseline sur 2 ;
     - les liens du pied de page mesuraient 18 px de haut (WCAG 2.5.8 exige 24 px) ;
     - la barre d'appel fixe affichait du blanc sur orange (2,8:1).
   ========================================================================== */

/* Barre d'appel mobile : surface orange -> texte bleu nuit (5,54:1) */
.mobile-call-bar{color:var(--bleu-nuit)}
.mobile-call-bar .icone{color:var(--bleu-nuit)}

/* Liens du pied de page : cibles tactiles utilisables (34 px au lieu de 18 px).
   L'espacement est reduit d'autant pour que le pied de page ne s'allonge pas
   de maniere disproportionnee. */
footer ul{gap:2px}
footer ul a{display:block;padding:8px 0}
footer ul a:hover{padding-left:5px}

/* En-tete compact sous 520 px.
   Mesure a 375 px : marque (3 lignes) + pastille telephone + burger depassaient
   de 3 px la largeur disponible (345 px utiles). Le numero de telephone est
   redondant sur mobile : la barre d'appel fixe en bas d'ecran l'affiche en
   permanence. On retire donc la pastille de l'en-tete et la baseline de la
   marque, ce qui laisse marque + burger = 197 px sur 345 px disponibles. */
@media(max-width:520px){
  header .conteneur{gap:8px}
  .logo{gap:8px}
  .logo-icone{width:40px;height:40px;border-radius:10px}
  .logo-texte{font-size:.95rem;white-space:nowrap}
  .logo-texte small{display:none}
  .nav-cta .tel-btn{display:none}
  .burger{padding:10px;margin-right:-4px}
}

/* Libelles de l'encadre « en bref » : 12,5 px en orange #ea580c sur blanc ne
   donnaient que 3,56:1 (4,5 requis). */
.encadre-cle{color:var(--orange-texte)}

/* Bande d'appel finale : le bouton secondaire reprenait `.btn-ghost`, dont le
   texte est blanc et la bordure blanche translucide — sur le degrade orange,
   cela donnait 2,8:1. Il suit la regle des surfaces orange : texte bleu nuit. */
.cta-final .btn-ghost{color:var(--bleu-nuit);border-color:rgba(10,37,64,.35)}
.cta-final .btn-ghost:hover{color:var(--bleu-nuit);border-color:var(--bleu-nuit);background:rgba(10,37,64,.08)}

/* ==========================================================================
   BANDEAU COOKIES — mise en page
   Avant : les trois paragraphes etaient des enfants directs du conteneur flex,
   donc chacun devenait une colonne a cote du suivant (titre a gauche, texte
   au milieu, boutons a droite) ; sous 700 px tout passait en texte centre sur
   quatre lignes, soit environ un tiers de l'ecran d'un telephone.
   Maintenant : un seul bloc de texte + un bloc d'actions, deux colonnes sur
   ordinateur, texte aligne a gauche et boutons cote a cote sur mobile.
   ========================================================================== */
.cookie-texte{min-width:0;flex:1 1 auto}
.cookie-texte p{margin:0 0 4px}
.cookie-texte p:last-child{margin-bottom:0}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}

@media(max-width:700px){
  #cookie-banner .cookie-content{display:block;text-align:left;padding:16px 16px 14px}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  #cookie-banner .cookie-actions button{width:100%;white-space:normal;overflow-wrap:anywhere}
  footer h3{font-size:1rem}
}

/* Boutons du bandeau cookies : 37 px de haut mesures sur mobile, sous la cible
   tactile recommandee de 44 px. */
#cookie-banner .cookie-actions button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Tableaux de tarifs sur mobile.
   Mesure : la cellule de prix etait en `white-space:nowrap`, donc la ligne
   « Selon disponibilite, sur devis » forcait le tableau a 426 px de large dans
   une fenetre de 375 px : 67 px de debordement horizontal sur les 4 pages de
   service. Les cellules repassent en texte normal et le rembourrage est reduit
   pour que les deux colonnes tiennent. */
@media(max-width:640px){
  .tarifs-table th,.tarifs-table td{padding:.8rem .7rem;font-size:.9rem;white-space:normal}
  .tarifs-table td{text-align:right}
}

/* Cibles tactiles des liens autonomes.
   Mesure : les liens « la page … » de la page Questions faisaient 23 px de haut
   et ceux du fil d'Ariane 22 px, sous le minimum de 24 px (WCAG 2.5.8). Les
   liens en ligne dans une phrase (pied de page) restent exemptes par la norme :
   on n'y touche pas. */
.faq-source a{padding:5px 0}
.fil-ariane a{padding:4px 0}

/* Derniers liens autonomes sous 24 px de haut (WCAG 2.5.8) : liens de bas de
   hero des pages de service, lien secondaire des encarts, et coordonnées de la
   page Mentions légales. Les liens en ligne dans une phrase restent exemptés. */
.service-hero-foot a{padding:6px 0}
.side-link{display:inline-block;padding:5px 0}
.legal-card dd a{display:inline-block;padding:4px 0}

/* ==========================================================================
   MARQUE — le carré à côté du nom de l'entreprise
   Constat mesuré : la flamme héritait de la couleur du texte (bleu nuit
   #0f1f38) alors que le carré portait un dégradé bleu. Contraste ≈ 1,1:1 : la
   flamme était quasiment invisible, dans l'en-tête comme dans le pied de page.
   Correction : le carré passe en orange, la flamme en bleu nuit (5,54:1), ce
   qui suit la règle du site — une surface orange porte un tracé bleu nuit.
   Mise en mouvement : la flamme respire, sur deux rythmes décalés (le contour
   et le cœur), ce qui donne un mouvement vivant sans scintillement. La règle
   `prefers-reduced-motion` en tête de feuille neutralise déjà toute animation
   pour les visiteurs qui l'ont demandé.
   ========================================================================== */
.logo-icone{
  background:linear-gradient(135deg,var(--orange),var(--orange-fonce));
  color:var(--bleu-nuit);
  box-shadow:0 6px 16px rgba(249,115,22,.30);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease
}
.logo:hover .logo-icone,.footer-logo:hover .logo-icone{
  transform:translateY(-1px) scale(1.05);
  box-shadow:0 10px 24px rgba(249,115,22,.45)
}
.logo-icone svg{overflow:visible}
.logo-icone svg path{transform-box:fill-box;transform-origin:50% 82%}
.logo-icone svg path:first-child{animation:flamme-contour 3.4s ease-in-out infinite}
.logo-icone svg path:last-child{animation:flamme-coeur 2.2s ease-in-out infinite}
.logo:hover .logo-icone svg path{animation-duration:2.1s,1.3s}
@keyframes flamme-contour{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.07) translateY(-.6px)}
}
@keyframes flamme-coeur{
  0%,100%{transform:scale(1);opacity:.9}
  38%{transform:scale(1.15) translateY(-.8px);opacity:1}
  68%{transform:scale(.95) translateY(0);opacity:.94}
}

/* ==========================================================================
   ÉTATS DE SURVOL — compléments
   Inventaire avant travaux : 40 règles de survol existaient déjà, dont 10
   visaient des classes absentes du HTML actuel (btn-bleu, carte-service,
   carte-zone, plus, socials, tel-gros, top-btn, topbar, urgence, lien-chic).
   Les composants réellement cliquables qui n'avaient aucune réaction étaient
   les plus fréquents du site : les 216 items de FAQ, les 132 cartes de galerie,
   les 68 cartes d'information, les 26 encadrés et les tableaux de tarifs.

   Deux règles de conduite :
     - chaque survol a son équivalent clavier `:focus-visible`, sinon les
       visiteurs au clavier n'ont aucun retour ;
     - les amplitudes restent faibles (2 à 6 px, échelle 1,03 à 1,06) et les
       transitions ne portent que sur transform, box-shadow, border-color,
       background-color et color — jamais `all` sur une longue liste.
   `prefers-reduced-motion` neutralise les transitions (règle globale en tête
   de feuille) : les changements d'état restent visibles, mais instantanés.
   ========================================================================== */

/* --- Cartes de galerie (132) ------------------------------------------- */
.gallery-card{transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,border-color .35s ease}
.gallery-card img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.gallery-card:hover,.gallery-card:focus-within{transform:translateY(-5px);box-shadow:var(--ombre);border-color:var(--orange)}
.gallery-card:hover img,.gallery-card:focus-within img{transform:scale(1.04)}
.gallery-card:hover figcaption,.gallery-card:focus-within figcaption{color:var(--bleu-nuit)}
.gallery-card figcaption{transition:color .35s ease}

/* --- Items de FAQ (216) : l'élément le plus cliqué du site ------------- */
.faq-item summary{transition:background-color .3s ease,padding-left .3s ease}
.faq-item summary:hover,.faq-item summary:focus-visible{background:var(--gris-pale);padding-left:26px}
.faq-item summary:hover .faq-chevron,.faq-item summary:focus-visible .faq-chevron{color:var(--orange-texte)}
.faq-item summary:hover .faq-ico,.faq-item summary:focus-visible .faq-ico{color:var(--orange-texte)}
.faq-ico{transition:color .3s ease}

/* --- Cartes d'information (68) ---------------------------------------- */
.info-card{transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,border-color .35s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--ombre);border-color:var(--orange)}
.info-card:hover .info-card-ico{background:var(--orange);color:var(--bleu-nuit)}
.info-card-ico{transition:background-color .35s ease,color .35s ease}

/* --- Encadrés « en bref » (26) ---------------------------------------- */
.encadre-carte{transition:box-shadow .35s ease,border-left-color .35s ease}
.encadre-carte:hover{box-shadow:var(--ombre);border-left-color:var(--orange-fonce)}

/* --- Cartes juridiques (11) ------------------------------------------ */
.legal-card{transition:box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
.legal-card:hover{box-shadow:var(--ombre-petite);border-color:var(--orange);background:#fff}

/* --- Pastilles de marques (12) -------------------------------------- */
.marque-item{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.marque-item:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:var(--ombre-petite)}
.marque-item::before{transition:transform .3s ease}
.marque-item:hover::before{transform:scale(1.35)}

/* --- Étapes numérotées (6) ------------------------------------------ */
.step-number{transition:background-color .35s ease,color .35s ease,transform .35s ease}
.steps-grid > *{transition:transform .35s ease}
.steps-grid > *:hover{transform:translateY(-3px)}
.steps-grid > *:hover .step-number{background:var(--orange);color:var(--bleu-nuit);transform:scale(1.06)}

/* --- Tableaux de tarifs : lecture ligne à ligne --------------------- */
.tarifs-table tr{transition:background-color .25s ease}
.tarifs-table tr:hover{background:var(--gris-pale)}
.tarifs-table tr:hover th{color:var(--bleu-nuit);font-weight:700}

/* --- Photos : cadre et portrait ------------------------------------- */
.service-hero-photo{transition:box-shadow .4s ease,border-color .4s ease}
.service-hero-photo:hover{box-shadow:0 34px 70px rgba(0,0,0,.38);border-color:#fff}
.service-hero-photo img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.service-hero-photo:hover img{transform:scale(1.03)}
.hero-project{transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.8,.3,1)}
.hero-project:hover{box-shadow:0 34px 70px rgba(0,0,0,.4);transform:translateY(-6px)}
.hero-project-secondary:hover{transform:translateY(-6px) rotate(2deg)}
.hero-project img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.hero-project:hover img{transform:scale(1.05)}
.apropos-visuel{transition:box-shadow .4s ease}
.apropos-visuel:hover{box-shadow:0 30px 66px rgba(10,37,64,.26)}
/* Le portrait porte deja var(--ombre) : reutiliser la meme valeur au survol
   ne produisait aucun changement visible (mesure : ombre identique avant/apres). */
.apropos-visuel img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.apropos-visuel:hover img{transform:scale(1.03)}
.apropos-visuel:hover .carte-flottante{transform:translateY(-4px)}
.carte-flottante{transition:transform .4s cubic-bezier(.2,.8,.3,1)}

/* --- Boutons secondaires et liens isolés ---------------------------- */
.btn-secondary{transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
.btn-secondary:hover,.btn-secondary:focus-visible{background:rgba(255,255,255,.28);border-color:#fff;transform:translateY(-1px)}
.side-link{transition:color .3s ease,gap .3s ease}
.side-link:hover,.side-link:focus-visible{color:#fff}
.side-link:hover .icone{transform:translateX(3px)}
.side-link .icone{transition:transform .3s ease}
.tel-btn{border-radius:10px;transition:color .3s ease,background-color .3s ease}
.tel-btn:hover{background:var(--orange-pale)}
.chip{transition:all .45s ease}
.chip:hover,.chip:focus-visible{transform:translateY(-2px)}

/* --- Liens de navigation et de contenu ------------------------------ */
nav.lien a,.menu-mobile a,.footer-bas a{transition:color .3s ease}
.menu-mobile a{transition:color .3s ease,background-color .3s ease,padding-left .3s ease}
.menu-mobile a:hover,.menu-mobile a:focus-visible{background:var(--gris-pale);padding-left:8px}

/* --- Focus clavier : même promesse que le survol -------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange-texte);outline-offset:3px;border-radius:6px}

/* Élévation des cartes portant `.reveal`.
   `html.js .reveal.visible` a une spécificité (0,3,1) supérieure à tout survol de
   classe : son `transform` gagnait, donc le soulèvement au survol des cartes de
   galerie et de service ne s'appliquait jamais. Elle lit désormais la variable
   `--decalage-y`, que ces survols renseignent. */
.gallery-card:hover,.gallery-card:focus-within,
.service-card:hover,.service-card:focus-within{--decalage-y:-5px}

/* ==========================================================================
   GUIDES — pages qui répondent à une question précise
   Le corps de ces pages est plus long que celui des pages de service : on
   soigne la mesure de lecture et l'espacement entre sections.
   ========================================================================== */
.guide-content{max-width:820px}
.guide-section{margin-top:38px}
.guide-section:first-child{margin-top:0}
.guide-section h2{font-family:var(--titre);font-weight:800;color:var(--bleu-nuit);
  font-size:1.42rem;line-height:1.25;margin:0 0 14px}
.guide-section p{color:var(--gris);font-size:1rem;line-height:1.7;margin:0 0 14px}
.guide-section p:last-child{margin-bottom:0}
.guide-section ul{margin:0 0 16px;padding-left:0;list-style:none}
.guide-section ul li{position:relative;padding-left:22px;margin-bottom:10px;
  color:var(--gris);font-size:1rem;line-height:1.6}
.guide-section ul li::before{content:"";position:absolute;left:2px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--orange)}
.guide-section strong{color:var(--encre);font-weight:700}
.guide-sources{margin-top:46px;padding-top:24px;border-top:1px solid var(--ligne)}
.guide-sources h2{font-size:1.05rem}
.guide-sources ul li{font-size:.88rem}
.guide-sources a{color:var(--bleu);text-decoration:underline;text-underline-offset:2px}
.guide-sources a:hover{color:var(--orange-texte)}
@media(max-width:640px){
  .guide-section h2{font-size:1.25rem}
  .guide-section{margin-top:30px}
}

/* Les liens de sources sont des liens autonomes dans une liste : la norme
   WCAG 2.5.8 exige 24 px minimum, ils n'en faisaient que 17. */
.guide-sources a{display:inline-block;padding:5px 0}

/* ---------- Lot conversion (1er octobre 2026) ---------- */
/* Bouton devis dans l'en-tête : visible sur ordinateur seulement, la barre
   fixe du bas prend le relais sur mobile. */
.nav-devis{display:inline-flex;align-items:center;background:var(--orange);color:var(--bleu-nuit);font-family:var(--titre);font-weight:800;font-size:.9rem;padding:11px 18px;border-radius:10px;white-space:nowrap;transition:background .3s ease}
.nav-devis:hover{background:var(--orange-clair)}
@media(max-width:1080px){.nav-devis{display:none}}

/* Barre fixe mobile : appel + devis côte à côte. */
@media(max-width:640px){
  .mobile-call-bar{padding:0;gap:0;overflow:hidden;background:var(--bleu-nuit)}
  .mobile-call-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;font-family:var(--titre);font-weight:800;font-size:.9rem}
  .mobile-call-bar .mcb-tel{background:var(--orange);color:var(--bleu-nuit)}
  .mobile-call-bar .mcb-devis{color:#fff}
  .mobile-call-bar .mcb-devis .icone{color:var(--orange)}
}

/* Bande de réassurance sous le hero. */
.reassurance{background:#fff;border-bottom:1px solid var(--ligne);padding:22px 0}
.rea-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rea-liste li{display:flex;gap:12px;align-items:flex-start}
.rea-ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--orange-pale);color:var(--orange-fonce);display:grid;place-items:center}
.rea-liste strong{display:block;font-family:var(--titre);font-size:.92rem;color:var(--encre);margin-bottom:2px}
.rea-liste span{font-size:.82rem;color:var(--gris);line-height:1.45}
.rea-liste a{color:var(--bleu);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 0}
@media(max-width:1080px){.rea-liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rea-liste{grid-template-columns:1fr;gap:14px}}

/* Bouton sous les étapes. */
.etapes-cta{text-align:center;margin-top:26px}
.etapes-cta .btn{width:auto}

/* Lien Instagram sous une galerie. */
.galerie-suite{text-align:center;margin-top:22px}
.galerie-suite a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--bleu);text-decoration:underline;text-underline-offset:3px;padding:6px 0}

/* Page contact : suite de la demande et photo de Xavier. */
.contact-suite{margin:14px 0 22px;padding-left:1.2em;color:var(--encre);font-size:.95rem}
.contact-suite li{margin:6px 0}
.contact-xavier{display:flex;gap:14px;align-items:center;background:var(--gris-pale);border:1px solid var(--ligne);border-radius:16px;padding:12px 16px;margin-bottom:18px}
.contact-xavier picture,.contact-xavier img{width:72px;height:72px;flex:none}
.contact-xavier img{border-radius:50%;object-fit:cover;object-position:50% 20%}
.contact-xavier p{font-size:.86rem;color:var(--gris);margin:0}
.contact-xavier strong{display:block;color:var(--encre);font-family:var(--titre)}
@media(max-width:900px){.contact-layout .contact-form-card{order:-1}}

/* Champ photos du formulaire. */
.champ-label{font-size:.83rem;font-weight:700;color:var(--encre)}
.champ-label small{font-weight:500;color:var(--gris)}
.photos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-input{position:relative;display:flex;align-items:center;gap:8px;border:1.5px dashed var(--ligne);border-radius:11px;padding:12px 14px;cursor:pointer;font-size:.86rem;color:var(--gris);overflow:hidden;transition:border-color .3s ease,background .3s ease}
.photo-input:hover,.photo-input:focus-within{border-color:var(--bleu-clair);background:var(--gris-pale)}
.photo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-input input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.photo-input.rempli{border-style:solid;border-color:var(--orange);color:var(--encre)}
.photo-input .icone{color:var(--orange-fonce);flex:none}
.photo-msg{font-size:.82rem;color:var(--orange-texte);margin:4px 0 0;min-height:1em}
@media(max-width:420px){.photos-grid{grid-template-columns:1fr}}

/* Galeries sur mobile : deux photos par ligne, sinon 6 photos verticales
   font plus de 3 000 px de défilement. */
@media(max-width:640px){
  .gallery-grid{grid-template-columns:1fr 1fr;gap:10px}
  .gallery-card{padding:5px}
  .gallery-card figcaption{font-size:.76rem;padding:9px 4px 5px;gap:6px}
  .gallery-card figcaption::before{width:12px}
}

/* Un bouton au libellé long ne doit jamais élargir la page sur mobile. */
@media(max-width:640px){.btn{white-space:normal;text-align:center;max-width:100%}}

/* Menu : libellés sur une ligne ; le bouton devis ne s affiche que s il y a la place. */
nav.lien a{white-space:nowrap}
@media(max-width:1279px){.nav-devis{display:none}}

/* Illustrations des guides et des pages par commune. */
.guide-figure{margin:28px 0 8px;max-width:760px}
.guide-figure img{width:100%;height:auto;display:block;border-radius:14px;background:var(--gris-pale)}
.guide-figure figcaption{font-size:.82rem;color:var(--gris);margin-top:8px;line-height:1.45}

.logo-texte small{white-space:nowrap}

/* Vraies photos (format portrait) dans les guides et les pages par commune :
   largeur limitée pour ne pas occuper tout l'écran en hauteur. */
.guide-figure-portrait{max-width:420px;margin-left:auto;margin-right:auto}
.zone-content .guide-figure{margin:24px auto 8px}


/* Bande de chiffres (accueil) : expérience et agréments confirmés. */
.chiffres{background:var(--bleu-nuit);color:#fff;padding:26px 0}
.chiffres-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.chiffres-liste li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.chiffres-ico{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--orange)}
.chiffres-liste strong{font-family:var(--titre);font-size:1.5rem;line-height:1.1}
.chiffres-liste span:not(.chiffres-ico){font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.35}
@media(max-width:1080px){.chiffres-liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.chiffres-liste{grid-template-columns:1fr;gap:14px}}

/* Avant / après : vraies photos de chantiers, deux par carte. */
.aa-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.aa-carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:14px;box-shadow:var(--ombre-petite)}
.aa-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aa-photo{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:var(--gris-pale)}
.aa-photo img{width:100%;height:100%;object-fit:cover;display:block}
.aa-etiquette{position:absolute;top:10px;left:10px;z-index:1;background:rgba(15,23,42,.78);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.aa-etiquette-apres{background:var(--orange)}
.aa-carte h3{margin:14px 0 6px;font-size:1.08rem}
.aa-carte p{margin:0;color:var(--gris);font-size:.92rem;line-height:1.5}
@media(max-width:820px){.aa-grille{grid-template-columns:1fr}}

/* Avis Google repris tels quels. */
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.avis-card{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:22px 22px 18px;box-shadow:var(--ombre-petite);display:flex;flex-direction:column;gap:10px}
.avis-quote{position:absolute;top:16px;right:18px;color:var(--orange);opacity:.55}
.avis-note{margin:0;color:var(--orange-texte);font-weight:600;font-size:.9rem;letter-spacing:.06em}
.avis-texte{margin:0;line-height:1.55;flex:1}
.avis-auteur{margin:0;display:flex;flex-direction:column;gap:2px}
.avis-auteur span{font-size:.82rem;color:var(--gris)}
.avis-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}
@media(max-width:1080px){.avis-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.avis-grid{grid-template-columns:1fr}}

/* Le bouton fantome des avis est sur fond clair : contours et texte foncés. */
.avis-actions .btn-ghost{color:var(--bleu-nuit);border-color:rgba(10,37,64,.35);background:#fff}

/* Signature des guides : auteur et date de mise à jour. */
.guide-byline{font-size:.86rem;color:var(--gris);margin:10px 0 0}
.guide-byline strong{color:inherit}

.aa-photo.aa-contain img{object-fit:contain;background:var(--gris-pale)}