/* ==========================================================================
   Plaquiste Express — style.css v8 — correctifs 1.8 du 16 octobre 2026 (barre collante, bloc pros, villes repliées, bandeau compact) ; v7 « Rythme encre » du 11 octobre 2026
   Sous le premier écran (inchangé) : labels de section, prix, numéros, chevrons FAQ, filet des cartes
   Prestations et étiquette APRÈS en accent ; sections 02 Tarifs et 06 Zone sur encre #1D1F21,
   bloc final + pied de page sur encre. Alternance : 01 clair · 02 encre · 03 clair · 04 #EFEDE8 ·
   05 clair · 06 encre · 07 clair · final encre · pied encre. Sur encre : texte blanc, secondaire
   #D9D6CF (jamais #5B5E61), accent réservé aux chiffres ≥ 22 px, aux éléments graphiques et aux
   labels monospace 13 px (3,6:1, choix du propriétaire comme sur le hero).
   Direction « la précision du plaquiste » : lignes 1 px, angles nets, surfaces
   lisses, un seul accent. Le premier écran (barre, hero, bandeau, barre fixe)
   est repris de la variante B1 « Chaleur » (8 octobre 2026 : fond #EFEDE8, photo
   chaude visible autour d'une carte sur 5 colonnes, accent sur le label, les coches
   et « 4,9/5 », bandeau sur encre) ; les sections 01 à 07, le bloc final et le pied
   de page prolongent le même système.
   Palette : fond #FAFAF7 · surface #EFEDE8 · texte #1D1F21 · secondaire #5B5E61
             lignes #D9D6CF · accent #CF4722 · blanc #FFFFFF · étoiles #FBBC04
             (+ les quatre couleurs officielles du G de Google, dans le SVG).
   Points de rupture : ≥ 1200 ordinateur large · 1024–1199 ordinateur étroit ·
   640–1023 tablette · < 640 mobile.
   Écarts assumés (à valider par le client) :
   · bordure des champs au repos en #D9D6CF (spécifiée par le brief) = 1,45:1 sur
     la carte blanche, sous le seuil 3:1 de WCAG 1.4.11 ; les libellés, les textes
     d'exemple et la bordure #1D1F21 au focus identifient les champs ;
   · gabarit H1 ?offre=prix&ville= raccourci en « Placo {ville} dès … €/m² » : le
     gabarit d'inline-titres.js dépasse 2 lignes pour 18 à 51 villes sur 63 à 40–48 px
     (mesures scratchpad/qa/fix1-h1sim.txt), règle STRICTE « H1 2 lignes maximum » ;
   · légende des réalisations sur 2 lignes fixes (type / ville · m² · mois) : 60 à 85
     caractères en mono 13 px ne tiennent pas sur une ligne de 368 px ;
   · hero à 760 px de hauteur minimale et 80 px de marge haute comme la maquette B1 ; les
     champs Surface et Message (absents de la maquette) sont repliés derrière un <details>
     natif « Surface ou message (facultatif) » : la carte reste proche des 425 px de la
     maquette et la photo reste visible au-dessus et en dessous (ajouter l'attribut open
     dans index.html pour les afficher d'emblée) ;
   · IBM Plex Mono servie en graisse 600 (fichier auto-hébergé) pour le 500 demandé : un
     cran plus gras que la maquette sur tout le monospace de la page, de façon homogène ;
     pour coller à la maquette, auto-héberger la coupe Medium 500 (voir README §8) ;
   · accent #CF4722 sur le label monospace, les coches et « 4,9/5 » du hero = 3,9:1 sur
     #EFEDE8, sous le seuil AA du texte courant (4,5:1) : choix du propriétaire.
   ========================================================================== */

/* 0. Polices auto-hébergées (Inter 400/500/600 arrive par Google Fonts, voir <head>) */
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plexmono-600-latin.woff2) format('woff2');font-weight:500 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plexmono-600-latin-ext.woff2) format('woff2');font-weight:500 600;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Polices de repli à métriques alignées (Arial local) : le texte ne bouge pas quand
   Inter (CDN) ou Archivo arrivent → pas de décalage de mise en page (CLS) au swap.
   Valeurs = largeur moyenne / ascendante / descendante mesurées par rapport à Arial. */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.12%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:103.5%;ascent-override:85%;descent-override:20.3%;line-gap-override:0%}

/* 1. Jetons */
:root{
  --bg:#FAFAF7;--surface:#EFEDE8;--ink:#1D1F21;--ink-2:#5B5E61;--line:#D9D6CF;--accent:#CF4722;--white:#FFFFFF;--star:#FBBC04;
  --head:"Archivo","Archivo Fallback",sans-serif;--body:"Inter","Inter Fallback",sans-serif;--mono:"IBM Plex Mono",monospace;
  --container:1200px;--gutter:24px;--radius:8px;--btn-h:52px;--bar-h:80px;--hero-pt:80px;--hero-min:760px;
  --section:112px;
}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:20;display:inline-flex;align-items:center;height:var(--btn-h);padding:0 20px;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius);font-weight:500;text-decoration:none}
.skip:focus{top:calc(var(--bar-h) + 8px)} /* sous la barre : ne recouvre plus le logo */

/* 3. Boutons — états survol/actif dans la palette seule (aucune ombre, aucun calcul de couleur) */
/* min-height (et non height) + retour à la ligne autorisé : 52 px en usage normal, et le libellé
   se replie au lieu de déborder si l'espacement du texte est forcé (WCAG 1.4.12) ou à 320 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 24px;border:1px solid var(--ink);border-radius:var(--radius);background:transparent;font:600 16px/1.2 var(--body);text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn--secondary{border-color:var(--ink);color:var(--ink)}
.btn--inverse{border-color:var(--white);color:var(--white)}
.btn--block{width:100%}
.btn--primary:hover{background:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--surface)}
.btn--inverse:hover{background:var(--white);color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* 4. Barre du haut */
.topbar{border-bottom:1px solid var(--line)}
.topbar__inner{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 18px/1 var(--head);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.logo__mark{flex:none;width:32px;height:32px}
.only-mobile{display:none}
/* Actions de la barre : téléphone + « Devis gratuit » (ordinateur seulement ; sur mobile la barre fixe du bas a déjà « Devis »).
   Dès 1024 px la barre reste collée en haut : l'appel à l'action suit le visiteur sur toute la page. */
.topbar__actions{display:flex;align-items:center;gap:12px}
.topbar__devis{display:none}
@media (min-width:1024px){
  .topbar{position:sticky;top:0;z-index:30;background:var(--bg)}
  .topbar__devis{display:inline-flex}
  html{scroll-padding-top:calc(var(--bar-h) + 16px)} /* les ancres (#devis, #tarifs…) s'arrêtent sous la barre collante */
}

/* 5. Hero (variante B1 « Chaleur » : formulaire dans le premier écran, photo chaude autour de la carte) */
.hero{position:relative;background:var(--surface)}
.hero__inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding-top:var(--hero-pt);padding-bottom:0;min-height:var(--hero-min)}
.hero__copy{grid-column:1/7;padding-right:40px}
.eyebrow,.label{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
.eyebrow,.label{color:var(--accent)} /* variante B : label du hero ET labels 01–07 / bloc final en accent */
h1{margin-top:16px;font:800 56px/1.05 var(--head);letter-spacing:-.03em;text-wrap:balance}
/* Titres dynamiques (?ville=, ?offre=prix&ville=) : l'attribut html[data-ville] est posé par le
   script inline avant le rendu. 2 lignes maximum pour toutes les villes de la liste blanche ;
   les noms composés (tiret) sont des mots longs insécables → un cran plus petit. */
html[data-ville] h1{font-size:48px}
html[data-ville*="-"] h1{font-size:40px}
.sub{margin-top:20px;font-size:19px;line-height:1.6;color:var(--ink-2)}
.benefits{margin-top:28px;display:grid;gap:12px}
.benefits li{display:flex;align-items:flex-start;gap:12px;font-weight:500;line-height:1.45}
.benefits svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--accent)}
.hero__actions{margin-top:32px}
.marks{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;overflow:hidden;font:500 14px/1.4 var(--mono);color:var(--ink-2)}
.marks li{position:relative;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.marks li+li::before{content:"";position:absolute;left:-12px;top:3px;bottom:3px;width:1px;background:var(--line)}
.marks .rating{color:var(--accent)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:12px;height:12px;fill:var(--star)}

/* Photo chaleureuse en fond de la moitié droite (colonne 7 jusqu'au bord de la fenêtre) */
.hero__media{position:absolute;top:var(--hero-pt);right:0;bottom:0;left:calc(50% + var(--gutter) / 2)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Trait de cote (ligne de mesure, flèches, valeur monospace) — un seul par section */
.cote{display:flex;align-items:center;height:16px;color:var(--accent);font:500 13px/1 var(--mono);letter-spacing:.04em}
.cote__tick{flex:none;width:1px;height:16px;background:currentColor}
.cote__arrow{flex:none;width:8px;height:8px}
.cote__line{flex:1;height:1px;background:currentColor}
.cote__value{padding:0 12px}
.hero__media .cote{position:absolute;left:0;right:var(--gutter);top:-40px} /* 40 px sous la barre, 24 px au-dessus de la photo */

/* Carte formulaire sur 5 colonnes (8/13), sans débord : la photo reste visible au-dessus, à droite, en dessous et à gauche */
.hero__card{grid-column:8/13;position:relative;z-index:1;scroll-margin-top:16px}
.card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)} /* filet 4 px, clippé par le rayon de la carte */
.card__title{font:800 24px/1.2 var(--head);letter-spacing:-.02em}
.form{display:grid;gap:20px;margin-top:24px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{min-width:0}
.f>label,.f legend{display:block;margin-bottom:8px;font:500 14px/1.4 var(--body)}
.f .opt{color:var(--ink-2)}
/* Rangée Surface / Message (2 colonnes ≥ 1024 px) : les deux libellés partagent une même rangée de grille
   (display:contents sur .f, libéllés calés en bas) → les champs démarrent à la même hauteur quel que soit le
   nombre de lignes du libellé (carte de 5 colonnes : « Surface approximative en m² (facultatif) » sur 2 lignes,
   « Message (facultatif) » sur 1). L'arbre DOM est inchangé (main.js lit toujours .closest('.f')). */
@media (min-width:1024px){
  .row2--bas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:0}
  .row2--bas .f{display:contents}
  .row2--bas .f>label{grid-row:1;align-self:end}
  .row2--bas .f>.input{grid-row:2}
  .row2--bas .f:first-child>*{grid-column:1} /* placement explicite : l'auto-placement suivrait l'ordre du DOM (libellé + champ par rangée) */
  .row2--bas .f:last-child>*{grid-column:2}
}
.input{display:block;width:100%;height:var(--btn-h);padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--ink-2);opacity:1}
.input:focus{border-color:var(--ink)}
.input:focus-visible{outline-offset:0} /* l'anneau de focus rejoint la bordure encre : un seul trait, comme les boutons */
/* Champs facultatifs (Surface, Message) repliés derrière un <details> natif, sans JS : ligne de 24 px
   (cible de 44 px par marge négative, comme .zone__note a), chevron du même dessin que la FAQ. */
.form__plus summary{display:flex;align-items:center;gap:8px;margin:-10px 0;padding:10px 0;font:500 14px/1.4 var(--body);color:var(--ink);cursor:pointer;list-style:none}
.form__plus summary::-webkit-details-marker{display:none}
.form__plus summary svg{flex:none;width:16px;height:16px;transition:transform .2s ease}
.form__plus[open] summary svg{transform:rotate(180deg)}
.form__plus .row2--bas{margin-top:16px}
.input--area{height:auto;padding:12px 16px;line-height:1.5;resize:vertical}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.chip span{display:flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);font-weight:500;font-size:15px;cursor:pointer;user-select:none}
.chip input:checked+span{border:2px solid var(--ink);background:var(--surface)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.chip input:not(:checked)+span:hover{background:var(--surface)}
/* Focus posé par le JS (validation) sur le premier bouton radio : visible même à la souris */
.f--err .chip input:focus+span{outline:2px solid var(--ink);outline-offset:2px}
.f__err{margin:0;font-size:14px;line-height:1.4;color:var(--accent)}
.f__err:not(:empty){margin-top:8px}
.f--err .input,.f--err .chip span{border-color:var(--accent)}
.f--warn .f__err{color:var(--ink-2)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Zone aria-live toujours présente dans l'arbre (jamais display:none) : un <p> vide n'a aucune hauteur */
.status{display:block;margin-top:0;font-size:15px;line-height:1.5}
.status.on{margin-top:16px}
.status--ko{color:var(--accent)}
.status a{color:var(--ink)}
.card__note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* 6. Bandeau de confiance sur encre : chiffres blancs Archivo 700 22 px, libellés monospace #D9D6CF, séparateurs 1 px #5B5E61 */
.trust{background:var(--ink);color:var(--line)}
.trust__list{min-height:72px;display:flex;align-items:center;justify-content:center;padding:16px 0;font:500 15px/1.4 var(--mono)}
.trust__list li{display:flex;align-items:baseline;gap:10px;padding:0 28px;border-left:1px solid var(--ink-2);white-space:nowrap}
.trust__list li:first-child{border-left:0}
.trust__list .num{color:var(--white);font:700 22px/1 var(--head);letter-spacing:-.02em}

/* 7. Barre fixe mobile */
.fixedbar{display:none}

/* ==========================================================================
   8. Sections communes
   ========================================================================== */
.section{padding:var(--section) 0}
.section--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Sections sur encre (02 Tarifs, 06 Zone) : texte blanc, secondaire #D9D6CF, cartes blanches (texte encre)
   ou cartes encre bordées #5B5E61 ; anneau de focus blanc ; transition nette avec les sections claires. */
.section--ink{background:var(--ink);color:var(--white)}
.section--ink :focus-visible{outline-color:var(--white)}
.section--ink .h2{color:var(--white)}
.section--ink .label,.final .label{color:#E8673F} /* accent éclairci pour l'encre : 5,1:1 (l'accent #CF4722 ne fait que 3,6:1 sur #1D1F21) */
.section--ink .lead{color:var(--line)}
.section--ink .box{color:var(--ink)} /* carte blanche posée sur l'encre : son texte reste encre */
.section__head{margin-bottom:48px}
.h2{margin-top:16px;font:700 36px/1.1 var(--head);letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.lead{margin-top:16px;max-width:58ch;color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}

/* 01 — Prestations */
.prestas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.presta{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:28px}
.presta::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)} /* filet 4 px, comme .card::before */
.presta h3{font:700 22px/1.2 var(--head);letter-spacing:-.02em}
.presta p{margin:12px 0 28px;font-size:16px;color:var(--ink-2)}
.presta .presta__prix{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);font:500 15px/1.4 var(--mono);color:var(--accent)} /* 4,6:1 sur blanc */

/* Professionnels (bloc court entre 01 et 02) : bande surface, carte blanche en deux colonnes */
.pros{padding:0 0 var(--section)}
.pros__box{display:grid;grid-template-columns:5fr 7fr;gap:32px 48px;padding:36px 40px}
.pros__h2{font-size:28px;max-width:none}
.pros__points{display:grid;gap:14px}
.pros__points li{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.pros__points svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--accent)}
.pros__points b{display:block;font-weight:600}
.pros__points span{font-size:16px;color:var(--ink-2)}
.pros__cta{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.pros__cta a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--ink);font-weight:500;text-decoration-thickness:1px;text-underline-offset:3px} /* cible ≥ 44 px */

/* 02 — Tarifs au m² */
.tarifs__head{grid-column:1/6}
.tarifs__body{grid-column:6/13}
.tarifs__body .cote{margin-bottom:24px}
.tarifs-wrap{overflow:hidden}
.tarifs{width:100%;border-collapse:separate;border-spacing:0}
.tarifs th,.tarifs td{padding:18px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.tarifs thead th{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--bg)}
.tarifs tbody th{width:30%;font:500 17px/1.4 var(--body)}
.tarifs tbody tr:last-child th,.tarifs tbody tr:last-child td{border-bottom:0}
.tarifs td{font:500 15px/1.4 var(--mono)}
.tarifs .val{color:var(--accent)} /* prix en accent sur la carte blanche (4,6:1) ; « à partir de » reste #5B5E61 */
.tarifs .des{display:block;font-size:12px;line-height:1.4;color:var(--ink-2)}
.tarifs__note{margin-top:20px;font-size:15px;color:var(--ink-2)}
.section--ink .tarifs__note{color:var(--line)} /* 11:1 sur encre */

/* 03 — Réalisations */
.reals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gutter)}
.real__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.real__img{position:relative;background:var(--surface)}
.real__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.tag{position:absolute;left:8px;top:8px;padding:3px 7px;background:var(--bg);border:1px solid var(--line);font:500 12px/1.2 var(--mono);letter-spacing:.08em;color:var(--ink)} /* étiquette de plan : angle net */
.real__img:last-child .tag{background:var(--accent);border-color:var(--accent);color:var(--white)} /* APRÈS : le résultat porte l'accent */
/* Légende sur deux lignes fixes : le type de travaux (13 px, #1D1F21) seul sur la première, puis
   « ville (dép.) · surface · mois » (12 px, #5B5E61) sur la seconde — la plus longue
   (Boulogne-Billancourt) fait 360 px pour 368 px de colonne. */
.real__cap{margin-top:12px;font:500 12px/1.5 var(--mono);color:var(--ink-2)}
.real__cap b{display:block;margin-bottom:2px;font-weight:500;font-size:13px;color:var(--ink)}
.real__cap time{white-space:nowrap}

/* 04 — Comment ça se passe */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.etape{position:relative;padding-top:64px}
.etape::before{content:"";position:absolute;left:0;right:calc(-1 * var(--gutter));top:20px;height:1px;background:var(--line)}
.etape:last-child::before{display:none} /* le trait s'arrête au dernier nœud */
.etape__num{position:absolute;left:0;top:0;z-index:1;width:40px;height:40px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--white);color:var(--accent);text-align:center;font:500 15px/38px var(--mono);letter-spacing:.04em}
.etape p{font-weight:500;line-height:1.45;max-width:24ch}

/* 05 — Avis Google */
.avis__resume{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:40px}
.g{flex:none;width:24px;height:24px}
.g--sm{width:14px;height:14px}
.avis__note{font:500 48px/1 var(--mono);letter-spacing:-.02em;color:var(--accent)}
.stars--lg svg{width:20px;height:20px}
.avis__total{font:500 15px/1.4 var(--mono)} /* même traitement que le bandeau et les repères du hero */
/* Grille 3 / 2 / 1 (ordre DOM a–f conservé) : les cartes d'une rangée s'alignent sur la plus
   haute, le bas du bloc est droit, l'espace vide reste à l'intérieur des cartes. */
.avis__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.avis{display:block;padding:24px}
.avis>*+*{margin-top:16px}
.avis__tete{display:flex;align-items:center;gap:12px}
.avis__avatar{position:relative;flex:none;width:48px;height:48px;border-radius:50%;background:var(--surface);overflow:hidden}
.avis__avatar::after{content:attr(data-initiales);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--mono);color:var(--ink)}
.avis__photo{position:relative;z-index:1;width:48px;height:48px;object-fit:cover}
.avis__id{flex:1;min-width:0}
.avis__nom{font-weight:500;line-height:1.3}
.avis__sous{margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink-2)}
/* Étoiles à gauche, date mono alignée à droite : même gabarit sur les 6 cartes, quelle que soit
   la longueur du nom (dans l'en-tête, la date passait sous le nom sur les cartes étroites). */
.avis__ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.avis__date{flex:none;font:500 13px/1.4 var(--mono);color:var(--ink-2);white-space:nowrap}
.avis .stars svg{width:16px;height:16px}
.stars .vide{fill:none;stroke:var(--line);stroke-width:1.5}
.avis__texte{font-size:16px}
.avis__img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius)}
.avis__pied{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.avis__plus{display:none}

/* 06 — Zone d'intervention */
.deps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.dep{padding:24px}
.dep__num{font:500 56px/1 var(--mono);letter-spacing:-.03em;color:var(--accent)} /* chiffre ≥ 22 px : accent autorisé sur encre */
.dep__nom{margin-top:12px;font-size:18px;font-weight:500;line-height:1.3}
/* Liste de villes : une ville par ligne, colonne alignée à gauche, sans séparateur (rien de
   superflu dans l'arbre d'accessibilité). Rangées de 36 px ; le lien garde une cible de 44 px
   (padding 4 px compensé par une marge négative, comme le numéro de .zone__note). */
.dep__villes{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:10px;font-size:14px;line-height:1.5} /* liste dense en ligne (178 communes), comme sur artisan-parquet.fr */
.dep__villes li{display:inline}
.dep__villes a{display:inline-block;min-height:24px;padding:2px 0;color:var(--ink);text-decoration:none;white-space:nowrap} /* cible 24 px (WCAG 2.5.8) */
.dep__villes a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html[data-dep="75"] .dep[data-dep="75"],html[data-dep="77"] .dep[data-dep="77"],html[data-dep="78"] .dep[data-dep="78"],html[data-dep="91"] .dep[data-dep="91"],html[data-dep="92"] .dep[data-dep="92"],html[data-dep="93"] .dep[data-dep="93"],html[data-dep="94"] .dep[data-dep="94"],html[data-dep="95"] .dep[data-dep="95"]{border-color:var(--accent)}
/* Liste compacte par département (8 cartes bordées, ville principale + 3 grandes villes) ; la liste complète
   (178 communes, .deps inchangé) est repliée derrière <details class="zone__all"> « Voir toutes les villes ». */
.zone__deps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.zone__dep{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--ink-2);border-radius:var(--radius)}
.zone__num{flex:none;font:500 28px/1 var(--mono);letter-spacing:-.03em;color:var(--accent)} /* chiffre ≥ 22 px : accent autorisé sur encre */
.zone__txt{min-width:0}
.zone__nom{display:block;font-size:17px;font-weight:600;line-height:1.3}
.zone__txt p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--line)}
.zone__txt a{display:inline-block;min-height:24px;padding:2px 0;color:inherit;text-decoration:none}
.zone__txt a:hover,.zone__txt a:focus-visible{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html[data-dep="75"] .zone__dep[data-dep="75"],html[data-dep="77"] .zone__dep[data-dep="77"],html[data-dep="78"] .zone__dep[data-dep="78"],html[data-dep="91"] .zone__dep[data-dep="91"],html[data-dep="92"] .zone__dep[data-dep="92"],html[data-dep="93"] .zone__dep[data-dep="93"],html[data-dep="94"] .zone__dep[data-dep="94"],html[data-dep="95"] .zone__dep[data-dep="95"]{border-color:var(--accent)}
.zone__all{margin-top:32px;border-top:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2)}
.zone__all summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:20px 0;font:500 18px/1.4 var(--body);cursor:pointer;list-style:none}
.zone__all summary::-webkit-details-marker{display:none}
.zone__all summary svg{flex:none;width:20px;height:20px;color:#E8673F;transition:transform .2s ease}
.zone__all[open] summary svg{transform:rotate(180deg)}
.zone__all-body{padding-bottom:32px}
.zone__note{margin-top:32px;color:var(--ink-2)}
.zone__note a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--ink);font-weight:500;text-decoration-thickness:1px;text-underline-offset:3px} /* cible ≥ 44 px sans changer l'interligne */
.section--ink .dep{background:var(--ink);border-color:var(--ink-2);color:var(--white)} /* la carte active (html[data-dep]) garde sa bordure accent */
.section--ink .dep__villes a{color:var(--line)}
.section--ink .dep__villes a:hover,.section--ink .dep__villes a:focus-visible{color:var(--white)}
.dep__villes a:focus-visible{outline-offset:-2px} /* l'anneau reste dans la boîte de 44 px, sans chevaucher les villes voisines */
.section--ink .zone__note{color:var(--line)}
.section--ink .zone__note a{color:var(--white)}

/* 07 — Questions fréquentes */
.faq__head{grid-column:1/6}
.faq__list{grid-column:6/13}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:20px 0;font:500 18px/1.4 var(--body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:20px;height:20px;color:var(--accent);transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 44px 24px 0;max-width:62ch;color:var(--ink-2)}

/* Bloc final (variante B : rappel vers l'unique formulaire du hero) */
.final{background:var(--ink);color:var(--white);padding:var(--section) 0}
.final :focus-visible{outline-color:var(--white)} /* anneau de focus visible sur le fond sombre */
.final .btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.final__copy{grid-column:1/6}
.final .label{color:var(--accent)} /* même traitement que 02 et 06 */
.final .h2{color:var(--white)}
.final__tel{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;font:700 28px/1.2 var(--head);letter-spacing:-.02em;color:var(--white);text-decoration:none}
.final__tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.final__points{margin-top:24px;font:500 14px/1.4 var(--mono);color:var(--line)}
.final__points li{padding:12px 0;border-top:1px solid var(--ink-2)}
.final__points li:last-child{border-bottom:1px solid var(--ink-2)}
.final__panel{grid-column:7/13;align-self:center;padding:32px;border:1px solid var(--ink-2);border-radius:var(--radius)}
.final__panel h3{font:700 24px/1.2 var(--head);letter-spacing:-.02em}
.final__panel p{margin-top:12px;color:var(--line)}
.final__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Pied de page */
.footer{background:var(--ink);border-top:1px solid var(--ink-2);padding:20px 0;font-size:14px;color:var(--line)} /* encre, filet 1 px #5B5E61 */
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.footer__inner>span{padding:12px 0}
.footer a,.footer__btn{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:none}
.footer :focus-visible{outline-color:var(--white)}
.footer__btn{padding:0;border:0;background:none;font:inherit;cursor:pointer} /* « Cookies » : révélé par le script de consentement (attribut hidden) */
.footer a:hover,.footer__btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.footer__copy{margin-left:auto}

/* ==========================================================================
   8 bis. Ordinateur étroit (1024–1199 px) : la carte reste sur 5 colonnes (8/13),
   la photo reste visible à sa gauche (≥ 83 px) et à sa droite (24 px) ; padding
   de carte réduit, les 4 cases restent sur une rangée.
   ========================================================================== */
@media (min-width:1024px) and (max-width:1199px){
  .card{padding:28px}
  .chip span{padding:0 4px} /* les 4 cases restent sur une rangée (carte de 417 à 490 px) */
  html[data-ville] h1{font-size:40px}
  html[data-ville*="-"] h1{font-size:32px} /* 2 lignes pour toutes les villes à tiret (colonne de 436 px) */
  .dep{padding:24px 20px}
  .dep__villes{font-size:13px}
}

/* ==========================================================================
   9. Tablette et mobile (≤ 1023 px)
   ========================================================================== */
@media (max-width:1023px){
  :root{--gutter:16px;--bar-h:72px;--section:64px}
  html{scroll-padding-bottom:calc(var(--btn-h) + 36px + env(safe-area-inset-bottom) + var(--cc-h,0px))} /* la barre fixe ne masque pas l'élément focalisé */
  body:not(.sans-barre){padding-bottom:0} /* réserve de la barre fixe déplacée dans .footer pour que l'encre file jusqu'en bas */
  body:not(.sans-barre) .footer{padding-bottom:calc(20px + var(--btn-h) + 24px + env(safe-area-inset-bottom))}
  .only-desktop{display:none}
  .topbar .btn{padding:0 16px}
  /* Ordre du DOM = ordre affiché : bande photo 16:9 pleine largeur → trait de cote → label → H1 → … → carte */
  .hero__inner{display:block;padding:0 var(--gutter) 40px;min-height:0}
  .hero__copy{padding:24px 0 0}
  h1{font-size:34px;line-height:1.08}
  html[data-ville] h1{font-size:30px}
  html[data-ville*="-"] h1{font-size:26px}
  .sub{font-size:17px;line-height:1.6}
  .benefits li{font-size:16px}
  .hero__actions .btn{width:100%}
  .hero__media{position:static;display:flex;flex-direction:column;margin:0 calc(-1 * var(--gutter))}
  .hero__media img{aspect-ratio:16/9;height:auto;object-position:center 40%}
  .hero__media .cote{position:static;order:1;margin:12px var(--gutter) 0} /* sous la photo */
  .hero__card{margin:28px 0 0}
  .card{padding:24px 20px}
  .row2{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr 1fr}
  .trust__list{justify-content:flex-start;flex-wrap:wrap;gap:12px 16px;font-size:13px;padding:20px 0}
  .trust__list li{padding:0;border-left:0;gap:8px}
  .trust__list .num{font-size:20px}
  .fixedbar{display:flex;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--bg);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));transition:transform .2s ease}
  .fixedbar .btn{flex:1}
  .fixedbar.bar--hidden{transform:translateY(110%)}

  .h2{font-size:26px}
  .section__head{margin-bottom:32px}
  .prestas,.deps,.reals,.zone__deps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pros{padding-bottom:64px}
  .pros__box{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 24px}
  .pros__h2{font-size:24px}
  .avis__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .etape:nth-child(even)::before{display:none} /* fin de rangée en 2 colonnes */
  .tarifs__head,.tarifs__body,.faq__head,.faq__list,.final__copy,.final__panel{grid-column:1/-1}
  .tarifs__body,.faq__list{margin-top:32px}
  .tarifs th,.tarifs td{padding:16px 20px}
  .final__panel{margin-top:40px}
}

/* ==========================================================================
   10. Mobile (< 640 px)
   ========================================================================== */
@media (max-width:639px){
  .prestas,.deps,.reals,.zone__deps{grid-template-columns:minmax(0,1fr)} /* jamais plus large que le conteneur */
  .zone__deps{gap:12px}
  .zone__dep{padding:14px 16px}
  .pros__box{padding:24px 20px}
  .avis__grille{grid-template-columns:minmax(0,1fr);gap:16px}
  .reals{gap:32px}
  .etapes{grid-template-columns:1fr;gap:28px}
  .etape{padding:0 0 0 60px;min-height:40px}
  .etape::before{left:19px;right:auto;top:40px;bottom:-28px;width:1px;height:auto}
  .etape:nth-child(even)::before{display:block}
  .etape:last-child::before{display:none}
  .etape p{max-width:none}
  .marks{overflow:visible}
  .marks li{white-space:normal}
  .marks li+li::before{display:none} /* chaque repère est seul sur sa ligne */
  .avis__resume{gap:12px 16px}
  .avis__grille:not(.avis__grille--tous) .avis:nth-child(n+4){display:none}
  .avis__plus{display:inline-flex;width:100%;margin-top:24px}
  .dep__num{font-size:48px}
  .final__panel{padding:24px 20px}
  .final__actions .btn{width:100%;padding:0 12px}
  .footer__copy{margin-left:0}

  /* Tableau des tarifs → cartes (les rôles ARIA conservent la sémantique) */
  .tarifs thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .tarifs,.tarifs tbody,.tarifs tr,.tarifs tbody th,.tarifs td{display:block}
  .tarifs tbody tr{border-bottom:1px solid var(--line)}
  .tarifs tbody tr:last-child{border-bottom:0}
  .tarifs tbody th{width:auto;padding:16px 20px 6px;border-bottom:0}
  .tarifs td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:4px 12px;padding:8px 20px;border-bottom:0}
  /* Libellé visuel seulement (texte alternatif vide) : l'en-tête de colonne th[scope=col] reste
     la seule annonce pour les lecteurs d'écran ; la première déclaration sert de repli. */
  .tarifs td::before{content:attr(data-label);content:attr(data-label) / "";flex:none;font:500 14px/1.4 var(--body);color:var(--ink-2)}
  .tarifs .val{margin-left:auto;text-align:right;overflow-wrap:anywhere}
  .tarifs td:last-child{padding-bottom:16px}
}
@media (max-width:374px){
  .trust__list{font-size:12px;gap:10px 12px} /* bandeau encre sur 2 lignes dès 360 px */
  .trust__list .num{font-size:18px}
}
@media (max-width:359px){
  .btn{padding:0 16px} /* « Recevoir mon devis gratuit » tient dans la carte à 320 px */
  .trust__list{gap:8px} /* 2 lignes dès 334 px ; 3 lignes de 320 à 333 px */
  html[data-ville*="-"] h1{font-size:24px} /* villes à tiret + prix : 2 lignes (sauf Sainte-Geneviève-des-Bois, cas limite) */
}

/* 11. Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faq summary svg,.form__plus summary svg,.zone__all summary svg,.fixedbar,.btn{transition:none}
  .btn:active{transform:none}
}

/* ==========================================================================
   12. Pages annexes : merci.html, mentions-legales.html, confidentialite.html
   (même barre du haut et même pied de page ; pas de barre fixe mobile, donc
   pas de réserve en bas du body ; le pied reste collé en bas de la fenêtre)
   ========================================================================== */
.sans-barre{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-bottom:0}
.sans-barre .footer{margin-top:auto}
.page{padding:var(--section) 0}
.page h1{max-width:18ch;text-wrap:balance}
.page .lead{font-size:19px}
.page__tel-label{margin-top:48px}
.page__tel{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font:700 32px/1.2 var(--head);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.page__tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.page__actions{margin-top:40px}
.page__text{max-width:72ch;margin-top:24px}
.page__text h2{margin-top:48px;font:700 24px/1.2 var(--head);letter-spacing:-.02em}
.page__text p{margin-top:12px}
.page__text ul{margin-top:16px}
.page__text li{padding:10px 0;border-top:1px solid var(--line)}
.page__text li:last-child{border-bottom:1px solid var(--line)}
.page__text a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.page__text .mono{font:500 15px/1.6 var(--mono)}
.page__nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.page__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:1023px){
  .page .lead{font-size:17px}
  .page__tel{font-size:28px}
  .page__text h2{margin-top:40px;font-size:22px}
  .page__actions .btn{width:100%}
}

/* 13. Barre du haut sur petit écran : « PLAQUISTE EXPRESS » sur une ligne, bouton réduit à « Appeler »
   (le numéro complet reste dans le hero, le bloc final et la barre fixe ; aria-label du lien inchangé) */
@media (max-width:639px){
  .logo{font-size:16px;letter-spacing:.03em;gap:8px}
  .logo__mark{width:32px;height:32px} /* 32 px = grille entière du signe (net à tous les DPR) ; tient dès 360 px */
  .topbar__inner{gap:12px}
  .topbar .btn{padding:0 12px}
  .topbar .btn .num{display:none}
  .topbar .btn .only-mobile{display:inline}
}

/* 14. Très petits écrans (≤ 359 px) : barre du haut compacte — placé APRÈS la section 13 pour l'emporter.
   Signe 24 px (grille entière à DPR 2), mot-marque 14 px, écarts resserrés : logo 194 px + 8 + bouton 83 px = 285 px ≤ 288 px à 320 px. */
@media (max-width:359px){
  .logo{font-size:14px;gap:6px}
  .logo__mark{width:24px;height:24px}
  .topbar__inner{gap:8px}
  .topbar .btn{padding:0 10px}
}

/* 16. Guides (conseils/), 11 oct. 2026 : cartes .gcard, article .guide* (README §11) */
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.gcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcard{position:relative;display:flex;flex-direction:column;padding:24px}
.gcard h3{margin-top:12px;font:700 20px/1.25 var(--head);letter-spacing:-.02em}
.gcard h3 a{color:inherit;text-decoration:none}
.gcard h3 a::after{content:"";position:absolute;inset:0}
.gcard:hover h3 a,.guide__all a,.crumbs a,.guide__body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gcard p{margin-top:10px;font-size:15px;color:var(--ink-2)}
.gcard__more{margin-top:auto;padding-top:20px;font:500 13px/1.4 var(--mono);letter-spacing:.04em;color:var(--accent)}
.gcard__more svg,.guide__all svg{margin-left:6px}
.guide__all{margin-top:40px}
.guide__all a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.crumbs,.guide__date{font:500 13px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.crumbs{display:flex;flex-wrap:wrap;gap:0 8px;padding:20px 0}
.crumbs li[aria-current]{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li+li::before{content:"›";margin-right:8px}
.crumbs a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--ink)}
.guide{padding:48px 0 var(--section)}
.guide__head,.guide__body{max-width:720px}
.guide__head h1{margin-top:16px;font-size:44px;line-height:1.08}
.guide__chapo{margin-top:20px;font-size:19px;line-height:1.6;color:var(--ink-2)}
.guide__date{margin-top:24px}
.guide__head .cote{margin-top:32px}
.guide__body{margin-top:48px;font-size:17px;line-height:1.7}
.guide__body h2{margin-top:56px;font:700 28px/1.15 var(--head);letter-spacing:-.02em;text-wrap:balance}
.guide__body p,.guide__body ul,.guide__body ol{margin-top:16px}
.guide__body li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--line)}
.guide__body li:last-child{border-bottom:1px solid var(--line)}
.guide__body ul li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--accent)}
.guide__body ol{counter-reset:g}
.guide__body ol li{padding-left:44px;counter-increment:g}
.guide__body ol li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:12px;font:500 14px/1.6 var(--mono);color:var(--accent)}
.guide__table{margin-top:24px;overflow-x:auto}
.guide__table table{width:100%;min-width:480px;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.5}
.guide__table th,.guide__table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.guide__table thead th{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--bg)}
.guide__table tbody th{font-weight:500}
.guide__table tbody tr:last-child th,.guide__table tbody tr:last-child td{border-bottom:0}
.guide__table .mono{font:500 14px/1.5 var(--mono)}
.guide__tip{margin-top:40px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.guide__tip p{margin-top:8px}
.guide__tip>:first-child{margin-top:0}
.guide__faq .faq__list{margin-top:24px}
.guide__faq details p{margin-top:0}
.guide__cta{padding:72px 0}
.guide__cta .h2{max-width:28ch}
.guide__cta p{margin-top:16px;max-width:58ch;color:var(--line)}
.guide__cta .btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.guide__related{padding:var(--section) 0}
.guide__head+.gcards,.guide__related .gcards{margin-top:40px}
@media (max-width:1023px){
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide__head h1{font-size:32px}
  .guide__chapo{font-size:17px}
  .guide__body{margin-top:40px}
  .guide__body h2{margin-top:44px;font-size:24px}
  .guide__tip{padding:20px}
  .guide__cta .final__actions .btn{width:100%}
}
@media (max-width:639px){
  .gcards{grid-template-columns:minmax(0,1fr)}
  .guide__table th,.guide__table td{padding:12px 10px;font-size:14px}
}

/* 17. Bandeau cookies (.cc) — Consent Mode v2, injecté par main.js. Fixé en bas, non bloquant,
   trois choix de même poids (refuser / accepter / personnaliser). Au-dessus de la barre fixe mobile. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 16px 16px}
.cc[hidden]{display:none}
body:not(.sans-barre) .cc{bottom:calc(var(--btn-h) + 24px + env(safe-area-inset-bottom))}
@media (min-width:1024px){body:not(.sans-barre) .cc{bottom:0}}
.cc__box{max-width:1200px;margin:0 auto;padding:20px 24px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.cc__t{margin:0 0 4px;font:800 16px/1.3 var(--head);color:var(--ink)}
.cc__p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.cc__p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cc__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc__btn{min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--white);color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.cc__btn--ok{background:var(--accent);border-color:var(--accent);color:var(--white)}
.cc__btn:hover{background:var(--surface)}
.cc__btn--ok:hover{background:var(--ink);border-color:var(--ink)}
.cc__more{margin-top:10px;padding:0;min-height:32px;border:0;background:none;color:var(--ink-2);font:500 13px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc__more:hover{color:var(--ink)}
.cc__panel{display:grid;grid-template-rows:0fr}
.cc__panel > div{overflow:hidden}
.cc.is-open .cc__panel{grid-template-rows:1fr}
.cc__opt{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.cc__opt:first-child{margin-top:12px}
.cc__opt input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.cc__opt input:disabled{opacity:.55}
.cc__opt b{display:block;font-size:14px;color:var(--ink)}
.cc__opt span span{display:block;font-size:13px;line-height:1.45;color:var(--ink-2)}
.cc__save{margin-top:8px;min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--white);font:600 15px/1 var(--body);cursor:pointer}
.cc :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Mobile : plaquette de 2–3 lignes (titre et 2e phrase masqués, 3 commandes sur une rangée) pour ne pas couvrir le premier écran.
   « Tout refuser » et « Tout accepter » restent identiques et de même largeur (CNIL) ; « Personnaliser » reste accessible. */
@media (max-width:639px){
  .cc{padding:0 8px 8px}
  .cc__box{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;padding:12px 12px}
  .cc__t,.cc__detail,.cc__more-long{display:none}
  .cc__p{grid-column:1/-1;margin:0;font-size:13px;line-height:1.45}
  .cc__acts{display:contents}
  .cc__btn{min-height:44px;padding:0 6px;font-size:14px;white-space:nowrap}
  .cc__more{grid-column:3;margin:0;min-height:44px;font-size:13px}
  .cc__panel{grid-column:1/-1}
}
@media (max-width:359px){ /* très petits écrans : « Personnaliser » passe sous les deux boutons, qui restent de même largeur */
  .cc__box{grid-template-columns:1fr 1fr}
  .cc__more{grid-column:1/-1;justify-self:start;min-height:36px}
}
@media (min-width:1024px){
  .cc__box{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center}
  .cc__t,.cc__p{grid-column:1}
  .cc__p{margin-bottom:0}
  .cc__acts{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr 1fr;min-width:320px}
  .cc__more{grid-column:1 / -1;text-align:left}
  .cc__panel{grid-column:1 / -1}
}