/* ============================================================
   Débouchage Express — feuille de style unique
   DESIGN SYSTEM : toutes les valeurs du site dérivent des
   variables ci-dessous. Modifier ici se répercute partout.
   ============================================================ */
:root{
  /* Couleurs — référence : README du pack d'assets
     Bleu marine #062F66 · Turquoise #0BA6B4 · Orange CTA #FF650D */
  --navy-900:#041E44;
  --navy-800:#052853;
  --navy:#062F66;
  --navy-soft:#0E4487;
  --teal:#0BA6B4;
  --teal-dark:#088692;
  --teal-soft:#E4F6F8;
  --orange:#FF650D;
  --orange-dark:#DB5200;
  --amber:#F5A623;

  --bg:#F4F7FB;
  --surface:#FFFFFF;
  --border:#E2E9F1;
  --border-strong:#CBD8E6;
  --text:#3A4A5C;
  --muted:#6E7F91;

  /* Typographie */
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Espacement */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px;

  /* Rayons & ombres */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(10,34,64,.06), 0 2px 8px rgba(10,34,64,.05);
  --sh:0 4px 14px rgba(10,34,64,.07), 0 1px 3px rgba(10,34,64,.05);
  --sh-lg:0 18px 45px rgba(10,34,64,.13);

  --wrap:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, les attributs width/height
   des balises <img> imposent la hauteur d'origine pendant que la largeur
   est reduite, ce qui etire l'image. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--navy);line-height:1.2;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- Utilitaires ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-9) 0}
.section--tight{padding-top:0}
.center{text-align:center}
.flex-1{flex:1}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.strong-navy{color:var(--navy)}
@media(max-width:820px){.section{padding:var(--sp-7) 0}}

.eyebrow{text-align:center;margin-bottom:var(--sp-7)}
.eyebrow h2{font-size:clamp(1.55rem,3.2vw,2.1rem)}
.eyebrow p{margin-top:var(--sp-3);color:var(--muted);max-width:620px;margin-inline:auto}

/* Mot mis en couleur dans un titre. <span>, pas <em> : c'est une
   nuance visuelle, pas une emphase sémantique. */
.hl{color:var(--teal)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{background:var(--orange-dark)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-dark)}
.btn--ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--ghost:hover{background:var(--teal-soft)}
.btn--lg{padding:18px 30px;font-size:1.35rem;border-radius:var(--r)}
.btn--block{width:100%}
.btn--cta{margin-top:12px}

.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
     stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:26px;height:26px}

/* ---------- Barre utilitaire ---------- */
.topbar{background:var(--navy-900);color:#D6E2F0;font-size:.85rem}
.topbar .wrap{display:flex;align-items:center;gap:var(--sp-5);
              min-height:44px;justify-content:space-between}
.topbar__group{display:flex;align-items:center;gap:var(--sp-5)}
.topbar__item{display:flex;align-items:center;gap:8px}
.topbar__item .ico{width:16px;height:16px}
.topbar__item--accent .ico{stroke:var(--amber)}
.topbar__phone{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:1rem}
@media(max-width:900px){.topbar__sep{display:none}}
@media(max-width:640px){
  .topbar .wrap{justify-content:center;font-size:.78rem;padding-block:6px}
  .topbar__group{gap:var(--sp-4)}
  .topbar__phone{display:none}
}

/* ---------- En-tête ---------- */
.header{background:var(--surface);border-bottom:1px solid var(--border);
        position:sticky;top:0;z-index:50}
.header .wrap{display:flex;align-items:center;gap:var(--sp-5);min-height:76px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo__img{height:42px;width:auto;display:block}
.logo__img--footer{height:40px;filter:brightness(0) invert(1)}
.logo__mark{width:38px;height:38px;flex:none;color:var(--teal)}
.logo__text{line-height:1.05}
.logo__text b{display:block;font-size:1.02rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.logo__text span{display:block;font-size:1.02rem;font-weight:800;color:var(--teal);letter-spacing:-.01em}

.nav{display:flex;gap:var(--sp-5)}
.nav a{font-size:.94rem;font-weight:600;color:var(--navy);padding:6px 0;
       border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--teal)}
.nav a[aria-current="page"]{color:var(--teal);border-bottom-color:var(--teal)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy)}
.burger .ico{width:28px;height:28px}
.header__cta{white-space:nowrap}

@media(max-width:980px){
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface);
    flex-direction:column;gap:0;padding:var(--sp-3) var(--sp-5) var(--sp-5);
    border-bottom:1px solid var(--border);box-shadow:var(--sh);
  }
  .nav[hidden]{display:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--border)}
  .burger{display:block;order:3}
  .header__cta{padding:12px 18px;font-size:.88rem}
}
@media(max-width:560px){
  .header__cta span{display:none}
  .header__cta{padding:12px 16px}
}

/* ---------- Hero ---------- */
.hero{background:var(--surface);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 400px;gap:var(--sp-7);
            align-items:start;padding-block:var(--sp-9);position:relative;z-index:1;
            min-height:660px}
.hero__title{font-size:clamp(2.1rem,4.6vw,3.15rem);line-height:1.08;max-width:640px}
.hero__title span{display:block;color:var(--teal)}
.hero__lead{margin-top:var(--sp-4);font-size:1.05rem;color:var(--muted);max-width:520px}

.checks{margin-top:var(--sp-5);display:grid;gap:var(--sp-3);max-width:560px}
.checks li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--navy);font-size:.97rem}
.checks .ico{color:var(--teal);width:22px;height:22px}

.rating{margin-top:var(--sp-5);display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}
.stars{display:flex;gap:2px;color:var(--amber)}
.stars svg{width:17px;height:17px;fill:currentColor;stroke:none}

.hero__call{margin-top:var(--sp-5)}
.hero__note{margin-top:10px;font-size:.85rem;color:var(--muted)}

/* Photo du hero, détourée en biseau côté gauche */
/* Comme dans la maquette : la photo occupe toute la hauteur et va
   jusqu'au bord droit de l'ecran, la carte blanche se posant par-dessus.
   object-position:right cadre sur la droite de la photo, ce qui place le
   technicien a gauche de la carte et les sanitaires derriere elle. */
.hero__media{position:absolute;inset:0 14% 0 auto;width:50%;z-index:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:right center}

/* Fondu blanc sur les bords de la photo.
   Aucun clip-path : c'est lui qui creait une arete diagonale visible,
   le degrade n'atteignant pas le blanc pur exactement sur cette ligne.
   Ici la photo se dissout dans le fond, sans aucun bord franc.
   Couche 1 : fondu gauche, sous le texte, legerement diagonal (100deg).
   Couche 2 : fondu droit, pour effacer la lisiere verticale. */
.hero__media::after,
.pagehero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      #fff 0%,
      #fff 14%,
      rgba(255,255,255,.94) 26%,
      rgba(255,255,255,.58) 38%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,0) 62%),
    linear-gradient(to left,
      #fff 0%,
      rgba(255,255,255,.55) 6%,
      rgba(255,255,255,0) 16%);
}

/* Carte "Quel problème rencontrez-vous ?" */
.card{background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--sp-5)}
.picker__title{text-align:center;font-size:1.12rem;margin-bottom:var(--sp-4)}
.picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.picker__item{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:var(--sp-4) var(--sp-2);border:1px solid var(--border);border-radius:var(--r);
  font-size:.83rem;font-weight:700;color:var(--navy);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.picker__item:hover{border-color:var(--teal);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.picker__item .ico{width:32px;height:32px;color:var(--navy)}

.callbox{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border);text-align:center}
.callbox__label{font-size:.86rem;color:var(--muted)}
.callbox__phone{display:flex;align-items:center;justify-content:center;gap:10px;
                margin:10px 0 var(--sp-4);font-size:1.6rem;font-weight:800;color:var(--navy)}
.callbox__phone .ico{color:var(--teal)}
.callbox .btn+.btn{margin-top:10px}
.callbox__facts{margin-top:var(--sp-4);display:grid;gap:10px}
.callbox__facts li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.callbox__facts .ico{width:17px;height:17px;color:var(--teal)}

@media(max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;padding-block:var(--sp-6);min-height:0}
  .hero__media::after,.pagehero__media::after{display:none}
  .hero__media{position:relative;inset:auto;width:auto;height:230px;clip-path:none;
               border-radius:var(--r-lg);margin-bottom:var(--sp-5);order:-1}
  .hero__media img{object-position:60% 30%}
}

/* ---------- Bande de réassurance ----------
   Maquette : carte blanche flottante, pas une bande pleine largeur. */
.trust{padding-top:var(--sp-6)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);
             background:var(--surface);border:1px solid var(--border);
             border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.trust__item{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-4)}
.trust__item+.trust__item{border-left:1px solid var(--border)}
.trust__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;
            border-radius:var(--r-full);background:var(--teal-soft);color:var(--teal)}
.trust__item b{display:block;color:var(--navy);font-size:.95rem}
.trust__item small{color:var(--muted);font-size:.83rem;line-height:1.45;display:block}
@media(max-width:900px){
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__item:nth-child(odd){border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .trust__grid{grid-template-columns:1fr}
  .trust__item+.trust__item{border-left:0;border-top:1px solid var(--border)}
}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
.service{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
         padding:var(--sp-5) var(--sp-4);text-align:center;display:flex;flex-direction:column;
         gap:var(--sp-3);transition:box-shadow .2s,transform .2s,border-color .2s}
.service:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:transparent}
.service__ico{width:56px;height:56px;margin:0 auto;border-radius:var(--r-full);
              display:grid;place-items:center;color:#fff}
.service:nth-child(odd) .service__ico{background:var(--teal)}
.service:nth-child(even) .service__ico{background:var(--navy)}
.service h3{font-size:.98rem}
.service p{font-size:.85rem;color:var(--muted);flex:1}
.service .btn{padding:9px 14px;font-size:.8rem}
@media(max-width:1040px){.services{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.services{grid-template-columns:repeat(2,1fr)}}

/* 7e prestation seule, centrée sous la grille */
.services--single{grid-template-columns:minmax(0,190px);justify-content:center;
                  margin-top:var(--sp-4)}
@media(max-width:680px){.services--single{grid-template-columns:minmax(0,240px)}}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
      padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start}
.step__num{width:40px;height:40px;flex:none;border-radius:var(--r-full);background:var(--teal);
           color:#fff;display:grid;place-items:center;font-weight:800}
.step__ico{color:var(--teal);flex:none}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{font-size:.86rem;color:var(--muted)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* ---------- Tarifs ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:start}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
      overflow:hidden;box-shadow:var(--sh-sm)}
.plan__head{padding:14px;text-align:center;color:#fff;font-weight:700;font-size:1rem}
.plan--a .plan__head{background:var(--teal)}
.plan--b .plan__head{background:var(--navy)}
.plan--c .plan__head{background:var(--teal-dark)}
.plan__body{padding:var(--sp-5)}
.plan__from{text-align:center;font-size:.82rem;color:var(--muted)}
.plan__price{text-align:center;font-size:2.9rem;font-weight:800;color:var(--navy);
             line-height:1.1;margin:2px 0 var(--sp-5)}
.plan__features{display:grid;gap:12px;margin-bottom:var(--sp-5)}
.plan__features li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem}
.plan__features .ico{width:18px;height:18px;color:var(--teal);margin-top:3px}
.plan__foot{text-align:center}
.plans__note{text-align:center;margin-top:var(--sp-5);font-size:.85rem;color:var(--muted)}
@media(max-width:880px){.plans{grid-template-columns:1fr}}

/* ---------- Zones + avis ---------- */
.split{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:var(--sp-6);align-items:start}
.split h2{font-size:1.5rem;margin-bottom:var(--sp-3)}
.split p{font-size:.9rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;background:var(--surface);
      border:1px solid var(--border);border-radius:var(--r-full);
      font-size:.85rem;font-weight:600;color:var(--navy)}
.chip .ico{width:15px;height:15px;color:var(--teal)}
.map{background:#EAF3F7;border:1px solid var(--border);border-radius:var(--r-lg);
     overflow:hidden;display:grid;place-items:center;
     color:#6E8A99;font-weight:700;font-size:.9rem;text-align:center}
.map img{width:100%;height:auto;display:block}
/* Maquette : les 3 avis sont côte à côte, sans encadré. */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
.review{display:flex;gap:10px;align-items:center}
.review__avatar{width:38px;height:38px;flex:none;border-radius:var(--r-full);
                background:var(--teal-soft);display:grid;place-items:center;overflow:hidden;
                color:var(--teal);font-weight:800;font-size:.82rem}
.review__avatar img{width:100%;height:100%;object-fit:cover}
.review b{display:block;font-size:.83rem;color:var(--navy);line-height:1.3}
.review small{color:var(--muted);font-size:.75rem}
@media(max-width:560px){.reviews{grid-template-columns:1fr;gap:var(--sp-4)}}
@media(max-width:980px){.split{grid-template-columns:1fr}}

/* ---------- FAQ (accordéons natifs <details>) ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-5)}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
             transition:border-color .18s,box-shadow .18s;align-self:start}
.faq details[open]{border-color:var(--teal);box-shadow:var(--sh-sm)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
             padding:16px var(--sp-4);cursor:pointer;font-weight:600;font-size:.92rem;
             color:var(--navy);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--muted);transition:transform .2s;flex:none}
.faq details[open] summary .ico{transform:rotate(180deg);color:var(--teal)}
.faq p{padding:0 var(--sp-4) var(--sp-4);font-size:.88rem;color:var(--muted)}
@media(max-width:820px){.faq{grid-template-columns:1fr}}

/* ---------- Bandeau CTA ---------- */
.cta{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:var(--sp-6);
     display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-5);align-items:center}
.cta__ring{width:62px;height:62px;border-radius:var(--r-full);border:2px solid var(--amber);
           display:grid;place-items:center;color:var(--amber)}
.cta h2{color:#fff;font-size:1.45rem}
.cta h2 span{display:block;color:#6FD2DE}
.cta__phone{font-size:1.85rem;font-weight:800}
.cta__phone small{display:block;font-size:.82rem;font-weight:500;color:#A9C2DC;margin-top:2px}
.cta__facts{display:flex;gap:var(--sp-4);margin-top:14px;font-size:.78rem;color:#A9C2DC;
            justify-content:center;flex-wrap:wrap}
.cta__facts li{display:flex;align-items:center;gap:6px}
.cta__facts .ico{width:15px;height:15px;color:#6FD2DE}
.cta__facts--start{justify-content:flex-start}
@media(max-width:980px){.cta__facts--start{justify-content:center}}
@media(max-width:980px){
  .cta{grid-template-columns:1fr;text-align:center;justify-items:center}
  .cta__facts{justify-content:center;flex-wrap:wrap}
}

/* ---------- Pied de page ---------- */
.footer{background:var(--navy-900);color:#B8CADC;margin-top:var(--sp-8)}
.footer .wrap{display:grid;grid-template-columns:1.2fr repeat(3,1fr);
              gap:var(--sp-5);padding-block:var(--sp-6);align-items:center}
.footer .logo__text b{color:#fff}
.footer__brand small{display:block;margin-top:10px;font-size:.76rem;color:#8FA6BE}
.footer__item{display:flex;gap:12px;align-items:center;
              border-left:1px solid rgba(255,255,255,.12);padding-left:var(--sp-5)}
.footer__item .ico{color:var(--teal);flex:none}
.footer__item b{display:block;color:#fff;font-size:.9rem;font-weight:700}
.footer__item small{font-size:.82rem}
.footer__copy{border-top:1px solid rgba(255,255,255,.1)}
.footer__copy .wrap{display:flex;justify-content:space-between;gap:var(--sp-4);
                    padding-block:var(--sp-4);font-size:.8rem;flex-wrap:wrap}
.footer__legal{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.footer__legal a:hover{color:#fff}
@media(max-width:880px){
  .footer .wrap{grid-template-columns:1fr 1fr}
  .footer__item:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:560px){
  .footer .wrap{grid-template-columns:1fr}
  .footer__item{border-left:0;padding-left:0}
}

/* ---------- Barre d'appel collante (mobile) ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--navy);color:#fff;padding:10px var(--sp-4);
  align-items:center;gap:var(--sp-4);box-shadow:0 -6px 20px rgba(10,34,64,.25)}
.stickybar b{display:block;font-size:.9rem}
.stickybar small{font-size:.76rem;color:#A9C2DC}
.stickybar .btn{padding:12px 18px;font-size:1rem}
@media(max-width:820px){.stickybar{display:flex}body{padding-bottom:76px}}

/* ============================================================
   COMPOSANTS DES PAGES INTÉRIEURES
   ============================================================ */

/* ---------- Fil d'Ariane ---------- */
.crumb{font-size:.83rem;color:var(--muted);padding-top:var(--sp-5)}
.crumb a{color:var(--teal);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 8px;color:var(--border-strong)}

/* ---------- Hero des pages intérieures ---------- */
.pagehero{background:var(--surface);position:relative;overflow:hidden}
.pagehero .wrap{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-7);
                align-items:start;padding-block:var(--sp-8);position:relative;z-index:1;
                min-height:560px}
.pagehero__title{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1;max-width:660px}
.pagehero__title span{display:block;color:var(--teal)}
.pagehero__lead{margin-top:var(--sp-4);color:var(--muted);max-width:520px}
.pagehero__media{position:absolute;inset:0 14% 0 auto;width:48%;z-index:0;overflow:hidden;
                 display:grid;place-items:center;color:#7D93A8;font-weight:600;font-size:.9rem}
.pagehero__media img{width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:1100px){
  .pagehero .wrap{grid-template-columns:1fr;min-height:0}
  .pagehero__media{position:relative;inset:auto;width:auto;height:200px;clip-path:none;
                   border-radius:var(--r-lg);margin-bottom:var(--sp-5);order:-1}
  .pagehero__media img{object-position:60% 30%}
}

/* ---------- Sélecteur large (4 tuiles en ligne) ---------- */
.duo{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-5);align-items:stretch}
.duo .card{display:flex;flex-direction:column;justify-content:center}
.picker__sub{text-align:center;font-size:.86rem;color:var(--muted);margin-bottom:var(--sp-4)}
.picker__grid--wide{grid-template-columns:repeat(4,1fr)}
.urgence{text-align:center}
.urgence__title{font-size:1.05rem;margin-bottom:var(--sp-3)}
.urgence__phone{display:flex;align-items:center;justify-content:center;gap:10px;
                font-size:1.75rem;font-weight:800;color:var(--navy);margin-bottom:var(--sp-4)}
.urgence__phone .ico{color:var(--teal)}
.urgence .btn+.btn{margin-top:10px}
.urgence__facts{display:flex;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;
                margin-top:var(--sp-4);font-size:.8rem;color:var(--muted)}
.urgence__facts li{display:flex;align-items:center;gap:7px}
.urgence__facts .ico{width:15px;height:15px;color:var(--teal)}
@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .picker__grid--wide{grid-template-columns:1fr 1fr}
}

/* ---------- Grille « Pourquoi nous faire confiance » ---------- */
.why{display:grid;grid-template-columns:repeat(5,1fr);
     background:var(--surface);border:1px solid var(--border);
     border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.why__item{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-5) var(--sp-4)}
.why__item+.why__item{border-left:1px solid var(--border)}
.why__item .ico{color:var(--navy);flex:none;margin-top:2px}
.why__item b{display:block;color:var(--navy);font-size:.9rem}
.why__item small{display:block;color:var(--muted);font-size:.8rem;line-height:1.45}
@media(max-width:1040px){
  .why{grid-template-columns:repeat(2,1fr)}
  .why__item:nth-child(odd){border-left:0}
  .why__item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .why{grid-template-columns:1fr}
  .why__item+.why__item{border-left:0;border-top:1px solid var(--border)}
}

/* Variante en cartes séparées (page Contact) */
.why--cards{background:none;border:0;box-shadow:none;gap:var(--sp-3);
            grid-template-columns:repeat(6,1fr)}
.why--cards .why__item{flex-direction:column;align-items:center;text-align:center;
                       background:var(--surface);border:1px solid var(--border);
                       border-radius:var(--r);padding:var(--sp-5) var(--sp-3)}
.why--cards .why__item+.why__item{border-left:1px solid var(--border)}
.why--cards .why__item .ico{width:30px;height:30px;color:var(--navy)}
@media(max-width:1040px){.why--cards{grid-template-columns:repeat(3,1fr)}
  .why--cards .why__item{border-top:1px solid var(--border)}}
@media(max-width:560px){.why--cards{grid-template-columns:1fr 1fr}}

/* ---------- Étapes sur 4 colonnes ---------- */
.steps--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.steps--4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps--4{grid-template-columns:1fr}}

/* ---------- Équipements ---------- */
.equip{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:var(--sp-5);align-items:start}
.equip h2{font-size:1.6rem;margin-bottom:var(--sp-3)}
.equip p{color:var(--muted);font-size:.9rem}
.equip__photo{background:#DCE7F2;border-radius:var(--r-lg);overflow:hidden;
              aspect-ratio:4/3;display:grid;place-items:center;color:#7D93A8;
              font-weight:600;font-size:.88rem;text-align:center}
.equip__photo img{width:100%;height:100%;object-fit:cover}
.equip__count{display:flex;align-items:center;gap:12px;margin-top:var(--sp-5);
              padding-top:var(--sp-4);border-top:1px solid var(--border)}
.equip__count b{display:block;color:var(--navy);font-size:.95rem}
.equip__count small{color:var(--muted);font-size:.8rem}
@media(max-width:980px){.equip{grid-template-columns:1fr}}

/* ---------- Départements ---------- */
.depts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.dept{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
      padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.dept__head{display:flex;align-items:center;gap:12px}
.dept__num{width:38px;height:38px;flex:none;border-radius:var(--r-full);background:var(--teal);
           color:#fff;display:grid;place-items:center;font-weight:800;font-size:.88rem}
.dept__head b{color:var(--navy);font-size:1.02rem;font-weight:800}
.dept__label{font-size:.8rem;font-weight:700;color:var(--navy)}
.dept__cities{font-size:.83rem;color:var(--muted);flex:1}
.dept .btn{padding:9px 14px;font-size:.8rem;width:100%}
@media(max-width:1040px){.depts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.depts{grid-template-columns:1fr}}

/* ---------- Pastilles de villes ---------- */
.pills{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
       padding:var(--sp-5);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
      border:1px solid var(--border);border-radius:var(--r-sm);
      font-size:.84rem;font-weight:600;color:var(--navy);transition:border-color .18s,color .18s}
.pill:hover{border-color:var(--teal);color:var(--teal)}
.pill .ico{width:15px;height:15px;color:var(--teal)}
.pills__more{margin-left:auto;font-size:.83rem;font-weight:600;color:var(--teal)}
.pills__more:hover{text-decoration:underline}

/* ---------- Cartes d'avis complètes ---------- */
.reviewcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.reviewcards--4{grid-template-columns:repeat(4,1fr)}
.reviewcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
            padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.reviewcard__top{display:flex;justify-content:space-between;align-items:center}
.reviewcard__date{font-size:.76rem;color:var(--muted)}
.reviewcard p{font-size:.86rem;color:var(--text);flex:1}
.reviewcard__who{display:flex;align-items:center;gap:10px;
                 padding-top:var(--sp-3);border-top:1px solid var(--border)}
.google{width:22px;height:22px;flex:none;display:grid;place-items:center;
        color:var(--teal);font-weight:800;font-size:.72rem}
.google img{width:20px;height:20px;display:block}
@media(max-width:1040px){.reviewcards,.reviewcards--4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reviewcards,.reviewcards--4{grid-template-columns:1fr}}

/* ---------- Barre de statistiques ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);
       background:var(--surface);border:1px solid var(--border);
       border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;text-align:center}
.stats__item{padding:var(--sp-5) var(--sp-3)}
.stats__item+.stats__item{border-left:1px solid var(--border)}
.stats__label{font-size:.83rem;color:var(--navy);font-weight:700}
.stats__value{font-size:1.85rem;font-weight:800;color:var(--teal);line-height:1.2;margin:6px 0 4px}
.stats__note{font-size:.76rem;color:var(--muted)}
.stats .stars{justify-content:center;margin:6px 0}
@media(max-width:1040px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__item:nth-child(odd){border-left:0}
  .stats__item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){.stats{grid-template-columns:1fr}
  .stats__item+.stats__item{border-left:0;border-top:1px solid var(--border)}}

/* ---------- Avant / après ---------- */
.bagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.ba{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    overflow:hidden;text-align:center}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ba__img{aspect-ratio:4/3;background:#DCE5EE;position:relative;overflow:hidden;
         display:grid;place-items:center;color:#6E8398;font-size:.78rem}
.ba__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__tag{position:absolute;top:8px;left:8px;z-index:2;background:var(--navy);color:#fff;
         font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:4px}
.ba__body{padding:var(--sp-4)}
.ba__body b{display:block;color:var(--navy);font-size:.9rem;margin-bottom:6px}
.ba__body small{display:block;color:var(--muted);font-size:.8rem;line-height:1.5}
@media(max-width:980px){.bagrid{grid-template-columns:1fr}}

/* ---------- Réalisations ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.case{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
      overflow:hidden;display:grid;grid-template-columns:96px 1fr}
.case__img{background:#DCE5EE;overflow:hidden}
.case__img img{width:100%;height:100%;object-fit:cover;display:block}
.case__body{padding:var(--sp-4)}
.case__city{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--teal);font-weight:600}
.case__city .ico{width:14px;height:14px}
.case__body h3{font-size:.92rem;margin:6px 0 8px}
.case__body ul{display:grid;gap:6px;font-size:.8rem;color:var(--muted)}
.case__body li{display:flex;gap:7px;align-items:flex-start}
.case__body li .ico{width:14px;height:14px;color:var(--teal);margin-top:3px}
.case__time{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;
            border-top:1px solid var(--border);font-size:.78rem;color:var(--navy);font-weight:600}
.case__time .ico{width:14px;height:14px;color:var(--teal)}
@media(max-width:1040px){.cases{grid-template-columns:1fr}}

/* ---------- Tableau comparatif ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);
              background:var(--surface)}
.compare{width:100%;border-collapse:collapse;min-width:680px;font-size:.87rem}
.compare th,.compare td{padding:13px var(--sp-4);text-align:center;
                        border-bottom:1px solid var(--border)}
.compare thead th{color:#fff;font-weight:700;font-size:.85rem;line-height:1.35}
.compare thead th:first-child{background:#F0F4F8;color:var(--navy);text-align:left}
.compare thead th:nth-child(2){background:var(--teal)}
.compare thead th:nth-child(3){background:var(--navy)}
.compare thead th:nth-child(4){background:var(--teal)}
.compare tbody th{text-align:left;font-weight:600;color:var(--navy);font-size:.85rem}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare .ok{color:var(--teal);font-weight:800}
.compare .no{color:var(--border-strong)}

/* ---------- Cartes d'information ---------- */
.cardgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start}
.cardgrid-2--wide{grid-template-columns:1fr 1.7fr}
.card h2,.card h3{font-size:1.15rem;margin-bottom:var(--sp-4)}
.contactlist{display:grid;gap:var(--sp-4)}
.contactlist li{display:flex;gap:14px;align-items:flex-start}
.contactlist .ico{color:var(--navy);flex:none;margin-top:2px}
.contactlist b{display:block;color:var(--navy);font-size:.88rem}
.contactlist span{font-size:.86rem;color:var(--muted)}
.notebox{margin-top:var(--sp-5);background:var(--bg);border-radius:var(--r);padding:var(--sp-4);
         display:flex;gap:12px}
.notebox .ico{color:var(--teal);flex:none;margin-top:2px}
.notebox b{display:block;color:var(--navy);font-size:.86rem}
.notebox small{color:var(--muted);font-size:.8rem;line-height:1.5}
.zonechips{display:flex;gap:var(--sp-5);flex-wrap:wrap;justify-content:center;
           margin-top:var(--sp-4);font-size:.85rem;color:var(--navy)}
.zonechips li{display:flex;align-items:center;gap:8px}
.zonechips .ico{width:17px;height:17px;color:var(--teal)}
@media(max-width:880px){.cardgrid-2,.cardgrid-2--wide{grid-template-columns:1fr}}

/* ---------- Liste à puces cochées ---------- */
.ticks{display:grid;gap:11px;margin-top:var(--sp-4)}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.87rem}
.ticks .ico{width:17px;height:17px;color:var(--teal);flex:none;margin-top:3px}

/* ---------- Bandeau CTA teal ---------- */
.cta--teal{background:var(--teal)}
.cta--teal h2 span{color:#CFF0F4}
.cta--teal .cta__ring{border-color:#fff;color:#fff}
.cta--teal .cta__phone small,.cta--teal .cta__facts{color:#D8F1F5}
.cta--teal .cta__facts .ico{color:#fff}

/* ---------- Bande de confiance basse ---------- */
.trustrow{display:grid;grid-template-columns:repeat(5,1fr);
          background:var(--surface);border:1px solid var(--border);
          border-radius:var(--r-lg);overflow:hidden}
.trustrow__item{display:flex;gap:12px;align-items:center;padding:var(--sp-4)}
.trustrow__item+.trustrow__item{border-left:1px solid var(--border)}
.trustrow .ico{color:var(--navy);flex:none}
.trustrow b{display:block;color:var(--navy);font-size:.83rem}
.trustrow small{display:block;color:var(--muted);font-size:.76rem}
@media(max-width:1040px){
  .trustrow{grid-template-columns:1fr 1fr}
  .trustrow__item:nth-child(odd){border-left:0}
  .trustrow__item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){.trustrow{grid-template-columns:1fr}
  .trustrow__item+.trustrow__item{border-left:0;border-top:1px solid var(--border)}}

/* ---------- Pied de page complet (pages intérieures) ---------- */
.footer--full .wrap{grid-template-columns:1.5fr repeat(4,1fr);align-items:start;
                    padding-block:var(--sp-7)}
.footer--full .footer__item{border-left:0;padding-left:0}
.footer__about{font-size:.83rem;line-height:1.6;margin-top:var(--sp-4);color:#9FB4C9}
.footer__social{display:flex;gap:10px;margin-top:var(--sp-4)}
.footer__social a{width:32px;height:32px;border-radius:var(--r-full);
                  background:rgba(255,255,255,.1);display:grid;place-items:center;
                  color:#fff;transition:background .18s}
.footer__social a:hover{background:var(--teal)}
.footer__social .ico{width:16px;height:16px}
.footer__col h3{color:#fff;font-size:.92rem;margin-bottom:var(--sp-4)}
.footer__col ul{display:grid;gap:10px}
.footer__col a,.footer__col li{font-size:.83rem;color:#9FB4C9}
.footer__col a:hover{color:#fff}
.footer__col li{display:flex;gap:9px;align-items:flex-start}
.footer__col li .ico{width:15px;height:15px;color:var(--teal);flex:none;margin-top:3px}
.footer--full .footer__copy .wrap{justify-content:center;padding-block:var(--sp-4)}
@media(max-width:980px){.footer--full .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer--full .wrap{grid-template-columns:1fr}}

/* ---------- Ajustements de mise en page ---------- */

/* Une FAQ placée dans une carte demi-largeur s'empile sur une colonne */
.card .faq{grid-template-columns:1fr}

/* Une offre tarifaire seule se place dans la colonne centrale */
@media(min-width:881px){.plans > .plan:only-child{grid-column:2}}

/* Nom et ville sur deux lignes dans les cartes d'avis */
.reviewcard__who b{display:block;font-size:.86rem;color:var(--navy);line-height:1.3}
.reviewcard__who small{display:block;color:var(--muted);font-size:.78rem}

/* Respiration avant un lien ou un bouton centré qui clôt une section */
.reviewcards + .center,
.bagrid + .center,
.cases + .center,
.zonechips + .center,
.faq + .center,
.pills + .center{margin-top:var(--sp-5)}

/* Lien texte discret, alternative au bouton encadré */
.link{display:inline-flex;align-items:center;gap:7px;
      font-size:.86rem;font-weight:700;color:var(--teal)}
.link:hover{text-decoration:underline}


/* ============================================================
   GABARIT DES FICHES DE PRESTATION
   Composants propres aux pages /debouchage-wc.html & co.
   ============================================================ */

/* Deux colonnes d'arguments dans le hero */
.checks--2col{grid-template-columns:1fr 1fr;column-gap:var(--sp-5);max-width:620px}
@media(max-width:620px){.checks--2col{grid-template-columns:1fr}}

/* Carte d'appel integree au hero (colonne de gauche) */
.callcard{margin-top:var(--sp-5);max-width:520px;background:var(--surface);
          border:1px solid var(--border);border-radius:var(--r-lg);
          box-shadow:var(--sh);padding:var(--sp-5);text-align:center}
.callcard__label{font-size:.92rem;font-weight:700;color:var(--navy)}
.callcard__phone{display:flex;align-items:center;justify-content:center;gap:10px;
                 margin:10px 0 var(--sp-4);font-size:1.75rem;font-weight:800;color:var(--navy)}
.callcard__phone .ico{color:var(--teal)}
.callcard__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.callcard__facts{display:flex;justify-content:center;gap:var(--sp-5);flex-wrap:wrap;
                 margin-top:var(--sp-4);padding-top:var(--sp-4);
                 border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.callcard__facts li{display:flex;align-items:center;gap:7px}
.callcard__facts .ico{width:15px;height:15px;color:var(--teal)}
@media(max-width:560px){.callcard__actions{grid-template-columns:1fr}}

/* Bandeau de symptomes : icone, titre, description, separateurs verticaux */
.symptoms{display:grid;grid-template-columns:repeat(5,1fr);
          background:var(--surface);border:1px solid var(--border);
          border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.symptoms--4{grid-template-columns:repeat(4,1fr)}
.symptom{padding:var(--sp-5) var(--sp-4);text-align:center}
.symptom + .symptom{border-left:1px solid var(--border)}
.symptom .ico{width:34px;height:34px;margin:0 auto var(--sp-3);color:var(--navy);stroke-width:1.6}
.symptom b{display:block;color:var(--navy);font-size:.9rem;margin-bottom:6px}
.symptom small{display:block;color:var(--muted);font-size:.8rem;line-height:1.5}
@media(max-width:1040px){
  .symptoms,.symptoms--4{grid-template-columns:repeat(2,1fr)}
  .symptom:nth-child(odd){border-left:0}
  .symptom:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .symptoms,.symptoms--4{grid-template-columns:1fr}
  .symptom + .symptom{border-left:0;border-top:1px solid var(--border)}
}

/* Panneau tarif : fond turquoise clair, trois colonnes */
.pricepanel{background:var(--teal-soft);border-radius:var(--r-xl);
            padding:var(--sp-7) var(--sp-6);
            display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-6);align-items:center}
.pricepanel__title{font-size:1.35rem;color:var(--teal-dark)}
.pricepanel__sub{margin-top:6px;font-size:1.15rem;font-weight:700;color:var(--navy)}
.pricepanel__price{font-size:3.2rem;font-weight:800;color:var(--teal-dark);line-height:1.1;
                   margin-top:var(--sp-3)}
.pricepanel .ticks{margin-top:0}
.pricepanel .btn{margin-top:var(--sp-5)}
.pricebox{position:relative;background:var(--surface);border-radius:var(--r-lg);
          padding:var(--sp-5);overflow:hidden}
.pricebox b{display:block;color:var(--navy);font-size:.98rem;margin-bottom:10px}
.pricebox p{font-size:.86rem;color:var(--muted);position:relative;z-index:1}
.pricebox::after{content:"€";position:absolute;right:-8px;bottom:-38px;
                 font-size:8rem;font-weight:800;color:var(--teal-soft);line-height:1;z-index:0}
@media(max-width:980px){.pricepanel{grid-template-columns:1fr;text-align:center}
  .pricepanel .ticks li{justify-content:center;text-align:left}}

/* Rangee "Pourquoi nous choisir" : icone cerclee, titre, description */
.whyrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.whyrow__item{display:flex;gap:var(--sp-4);align-items:flex-start}
.whyrow__ico{width:52px;height:52px;flex:none;border-radius:var(--r-full);
             border:1.5px solid var(--border-strong);display:grid;place-items:center;
             color:var(--navy)}
.whyrow__ico .ico{width:24px;height:24px;stroke-width:1.6}
.whyrow__item b{display:block;color:var(--navy);font-size:.92rem;margin-bottom:5px}
.whyrow__item small{display:block;color:var(--muted);font-size:.81rem;line-height:1.5}
@media(max-width:1040px){.whyrow{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.whyrow{grid-template-columns:1fr}}

/* Bandeau CTA de fiche : texte a gauche, deux boutons empiles a droite */
.cta--service{grid-template-columns:auto 1fr auto}
.cta--service .cta__stack{display:grid;gap:12px;min-width:290px}
.cta--service .cta__stack .btn{width:100%;font-size:1.25rem}
@media(max-width:980px){.cta--service .cta__stack{min-width:0;width:100%}}

/* Titre de colonne, plus discret qu'un titre de section */
.colhead{font-size:1.2rem;margin-bottom:var(--sp-5)}

/* FAQ empilee sur une seule colonne, hors carte */
.faq--1col{grid-template-columns:1fr}


/* ============================================================
   PAGES DE TEXTE (mentions legales, CGV...) ET ERREUR 404
   ============================================================ */

.prose{max-width:820px;margin:0 auto}
.prose__title{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:var(--sp-3)}
.prose__meta{color:var(--muted);font-size:.86rem;margin-bottom:var(--sp-7)}
.prose h2{font-size:1.25rem;margin:var(--sp-7) 0 var(--sp-4)}
.prose h3{font-size:1rem;margin:var(--sp-5) 0 var(--sp-2)}
.prose p{margin-bottom:var(--sp-4)}
.prose ul{margin-bottom:var(--sp-4);display:grid;gap:10px}
.prose li{display:flex;gap:11px;align-items:flex-start}
.prose li::before{content:"";width:6px;height:6px;flex:none;margin-top:9px;
                  border-radius:var(--r-full);background:var(--teal)}
.prose a{color:var(--teal);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--sp-5);
          margin-bottom:var(--sp-4);font-size:.92rem}
.prose dt{font-weight:700;color:var(--navy)}
.prose dd{margin:0}
@media(max-width:560px){.prose dl{grid-template-columns:1fr;gap:2px var(--sp-5)}
  .prose dd{margin-bottom:10px}}

/* Encadre signalant une section a completer */
.todo{background:#FFF6E8;border:1px solid #F5D9A8;border-left:4px solid var(--amber);
      border-radius:var(--r);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.todo b{display:block;color:var(--navy);margin-bottom:4px}
.todo p{margin:0;font-size:.88rem;color:#8A6A2F}

/* ---------- Page 404 ---------- */
.error{text-align:center;padding:var(--sp-9) 0;max-width:760px;margin:0 auto}
.error__code{font-size:clamp(5rem,16vw,9rem);font-weight:800;line-height:1;
             color:var(--teal-soft);letter-spacing:-.04em}
.error__title{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-top:calc(var(--sp-5) * -1)}
.error__lead{margin-top:var(--sp-4);color:var(--muted);max-width:520px;
             margin-inline:auto}
.error__actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;
                margin-top:var(--sp-6)}
.error__links{margin-top:var(--sp-8);padding-top:var(--sp-6);
              border-top:1px solid var(--border)}
.error__links h2{font-size:1.05rem;margin-bottom:var(--sp-5)}
.error__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
@media(max-width:820px){.error__grid{grid-template-columns:1fr 1fr}}

/* ---------- Accessibilité ---------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}