/* Polices auto-hébergées (RGPD) : assets/fonts/ du thème. Généré par scripts/portage-v2/port.py. */
@font-face{font-family:'DM Sans';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/DMSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/DMSans-Bold.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Inter-Regular.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Inter-Medium.woff2) format('woff2')}
/* ==========================================================================
   Stockage Givet — système V5 (prototype), 2026-09-26
   V3 (hybride validé) + la variante B « relief et jaune en surface », retenue par
   Antoine le 2026-09-26 et remontée ici composant par composant. Partagé par la home,
   /garde-meuble/, /garages/ et /contact/. Lié en relatif : ../system/site.css.
   Un composant = une seule définition, ici. Les page.css ne gardent que ce qui ne sert
   qu'à une page (taille du box, usages, formulaire…).

   Règles de couleur (variante B)
   - Fonds : blanc et blanc cassé, trame de points (--dots) pour les « tables à dessin ».
     Aucune grande surface noire.
   - Noir #1A1A1A : texte, filets forts, contours de boutons, pictogrammes.
   - Jaune #F5C518 : les actions de contact (.btn--contact), les étoiles, le surlignage
     .hl (un trait sous le mot, jamais un fond de texte), et AU PLUS DEUX aplats
     .sec--jaune par page. Sur un aplat jaune, les boutons de contact passent en NOIR.
     Le jaune n'est jamais du texte sur fond clair (1,8:1).
   Contrastes mesurés (WCAG AA, 4,5:1 pour le texte courant)
   - #1A1A1A sur #FFF 17,4:1 · sur #F8F7F4 16,1:1 · sur #F5C518 10,7:1
   - #3A3A3A sur #FFF 11,4:1 · sur #F8F7F4 10,5:1 · sur #F5C518 7,0:1
   - #595959 sur #FFF 7,0:1 · sur #F8F7F4 6,5:1 · sur #F5C518 4,3:1 → JAMAIS sur jaune
   - #FFF sur #1A1A1A 17,4:1 (bouton noir de l'aplat jaune) · #F5C518 sur #1A1A1A 10,7:1
   - #B83A3A (erreur) sur #FFF 5,67:1 · sur #F8F7F4 5,29:1
   Sommaire
    1. Jetons            2. Base               3. Boutons et liens
    4. Sections, titres, surlignage, aplat jaune
    5. En-tête           6. Héros, aiguillage, photo pleine largeur
    7. Portes            8. Plans et échelle   9. Prix, faits cochés
   10. Réassurance      11. Étapes            12. Avis
   13. FAQ              14. Zone desservie    15. Guides
   16. Bandeau contact  17. Pied de page      18. Fil d'Ariane, légende, « à confirmer »
   19. Offres des pages dédiées (.terms, .offer-card, .offers, .offer__act)
   20. Faits (.facts)                          21. Renvoi vers l'autre offre
   22. Belgique (.be)   23. Barre d'appel mobile
   24. Sécurité (.secure, home)                25. Visuel garde-meuble (.gm-visual)
   26. Fiche équipements (.equip, pages dédiées)
   27. Mouvement réduit
   28. Blog : index /blog/ et gabarit d'article (ajouté en fin de fichier, 2026-09-28)
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root{
  --color-primary:#F5C518; --color-primary-dark:#D9AD00;
  --color-primary-light:#FFF8E0;                   /* jaune pâle du thème en ligne : scène de la fiche .brief, plateau des offres */
  --color-dark:#1A1A1A; --color-ink-2:#3A3A3A; --color-gray:#595959;
  --color-bg:#F8F7F4; --color-white:#FFFFFF;
  --color-gray-light:#E8E6E1; --color-hair:#E3E0D9;
  --color-success:#2D8F4E; --color-error:#B83A3A;   /* disponibilité et validation seulement */

  --font-display:'DM Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --fs-h1:clamp(2.125rem,1rem + 4.4vw,4.5rem);
  --fs-h2:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);
  --fs-h3:clamp(1.125rem,1.02rem + .45vw,1.375rem);
  --fs-lead:clamp(1.0625rem,.98rem + .4vw,1.3125rem);
  --fs-body:clamp(1rem,.95rem + .25vw,1.125rem);
  --fs-meta:.875rem; --fs-micro:.75rem;
  --fs-price:clamp(1.75rem,1.5rem + 1vw,2.5rem);

  --space-2xs:.25rem; --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem;
  --gutter:1rem;                                   /* marge latérale ; 2rem dès 768 px */
  --section-y:clamp(3rem,2rem + 4vw,6rem);
  --card-pad:clamp(1.25rem,1rem + 1vw,2rem);
  --max-width:1200px;

  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --shadow-card:0 1px 2px rgba(26,26,26,.05),0 10px 24px -10px rgba(26,26,26,.16);
  --shadow-lift:0 2px 4px rgba(26,26,26,.06),0 14px 28px -10px rgba(26,26,26,.2),0 40px 70px -32px rgba(26,26,26,.34);
  --shadow-float:0 3px 8px rgba(26,26,26,.1),0 24px 48px -16px rgba(26,26,26,.38);
  /* Trame « plan technique » : un point tous les 20 px */
  --dots:radial-gradient(circle at 1px 1px,rgba(26,26,26,.2) 1.1px,transparent 1.6px);
  --dots-size:20px 20px;
  --ease-out:cubic-bezier(.16,1,.3,1); --duration-fast:150ms; --duration-normal:300ms;

  /* Échelle commune des plans : --k = pixels par mètre, identique pour TOUS les plans
     d'une page à une largeur d'écran donnée. Ne jamais la redéfinir localement, sauf pour
     les vignettes décoratives (.switch), qui ne prétendent pas être à l'échelle. */
  --k:13; --ctpx:11px;

  /* Matière des plans (tuiles.css du thème, inchangée) */
  --tvof-wall-a:#EFEBE3; --tvof-wall-b:#DFDAD1; --tvof-rib:#C4BFB4; --tvof-band:#FAF0D0;
  --tvof-kraft-t:#E3CBA4; --tvof-kraft-a:#C9A87C; --tvof-kraft-b:#AE8D62;
  --tvof-shelf:#E2DED6; --tvof-steel:#6E6A62; --tvof-wood:#D9CDB6;
  --tvof-car-t:#EDEAE3; --tvof-car-a:#C6C2B9; --tvof-car-b:#ADA89E;
  --tvof-glass-a:#6E7A78; --tvof-glass-b:#9AA5A2; --tvof-tyre:#2A2A28;
}
@media (min-width:768px){:root{--gutter:2rem;--k:14}}
@media (min-width:1024px){:root{--k:11;--ctpx:10.5px}}
@media (min-width:1180px){:root{--k:13;--ctpx:12px}}
@media (min-width:1280px){:root{--k:15;--ctpx:12.5px}}
@media (min-width:1440px){:root{--ctpx:13px}}

/* 2. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--color-white);color:var(--color-dark);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.2;text-wrap:balance}
p{text-wrap:pretty}
address{font-style:normal}
.wrap{max-width:calc(var(--max-width) + 2 * var(--gutter));margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right))}   /* viewport-fit=cover */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid var(--color-dark);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:20;background:var(--color-dark);color:var(--color-white);
  padding:.75rem 1rem;border-radius:var(--radius-md);font-weight:500}
.skip:focus{top:.5rem}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 3. Boutons et liens --------------------------------------------------------
   .btn--contact  jaune : toute action qui ouvre un contact (formulaire, appel).
   .btn--line     contour noir : l'autre action de la paire.
   Aucun bouton noir plein, sauf sur un aplat jaune (§4), où le jaune du bouton
   passe au noir. Tout bouton de contact porte AUSSI .btn-primary et un
   data-cta-text (contrat de suivi GA4 du thème) ; les liens vers le formulaire
   pointent sur /contact/?besoin=box|garage-45|atelier-90|entrepot#formulaire. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;
  padding:.75rem 1.4rem;border-radius:var(--radius-md);border:2px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;text-decoration:none;line-height:1.2;
  transition:transform var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--contact{background:var(--color-primary);color:var(--color-dark)}
.btn--line{background:transparent;border-color:var(--color-dark);color:var(--color-dark)}
.btn--sm{min-height:44px;padding:.5rem 1rem;font-size:.9375rem}
.btn--block{width:100%}
@media (hover:hover){
  .btn--contact:hover{background:var(--color-primary-dark)}
  .btn--line:hover{background:var(--color-white)}
}
/* Lien texte avec flèche : aller plus loin, jamais une action de contact */
.lnk{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-family:var(--font-display);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(26,26,26,.35)}
.lnk .ico{width:18px;height:18px;transition:transform var(--duration-fast) var(--ease-out)}
@media (hover:hover){.lnk:hover{text-decoration-color:currentColor}.lnk:hover .ico{transform:translateX(3px)}}
/* Paire d'actions « appel + disponibilité ». L'appel est PREMIER DANS LE DOM (79 % des
   visites sont mobiles : c'est lui que la tabulation atteint d'abord) et jaune sous 768 px.
   Dès 768 px, « Vérifier la disponibilité » repasse devant par order et reprend le jaune. */
.cta-pair{display:grid;gap:.625rem}
.cta-pair .btn{width:100%}
.cta-pair__call{background:var(--color-primary);border-color:transparent}
.cta-pair__dispo{background:transparent;border-color:var(--color-dark)}
@media (min-width:600px){.cta-pair{display:flex;flex-wrap:wrap}.cta-pair .btn{width:auto;white-space:nowrap}}
@media (min-width:768px){
  .cta-pair__dispo{order:-1;background:var(--color-primary);border-color:transparent}
  .cta-pair__call{background:transparent;border-color:var(--color-dark)}
}
@media (hover:hover) and (max-width:767.98px){.cta-pair__call:hover{background:var(--color-primary-dark)}.cta-pair__dispo:hover{background:var(--color-white)}}
@media (hover:hover) and (min-width:768px){.cta-pair__dispo:hover{background:var(--color-primary-dark)}.cta-pair__call:hover{background:var(--color-white)}}

/* Étoiles et note : le seul autre usage du jaune */
.stars{display:inline-flex;gap:2px;vertical-align:-2px}
.stars svg{width:15px;height:15px;fill:var(--color-primary);stroke:var(--color-dark);stroke-width:1.2;stroke-linejoin:round}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;font-size:var(--fs-meta);color:var(--color-gray);line-height:1.45}
.rating strong{color:var(--color-dark);font-weight:500}
.rating a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;text-underline-offset:.25em;text-decoration-thickness:1px}

/* 4. Sections et titres ------------------------------------------------------
   .sec          une section de page, marge verticale commune
   .sec--alt     fond blanc cassé ; alterner blanc / blanc cassé, jamais deux --alt collées
   .sec__hd      kicker + H2 (+ chapeau) ; .sec__hd--split pousse un lien ou une note à droite */
.sec{padding-block:var(--section-y)}
.sec--alt{background:var(--color-bg);border-block:1px solid var(--color-hair)}
.sec--tight{padding-block:calc(var(--section-y) * .75)}
/* Scène jaune pâle (#FFF8E0) : le bloc tarif des pages dédiées. Pas un aplat .sec--jaune (il n'entre
   pas dans le compte des deux) ; le texte y garde ses couleurs, les boutons de contact restent jaunes
   parce qu'ils sont posés sur des cartes blanches. */
.sec--pale{background:var(--color-primary-light);border-block:1px solid rgba(217,173,0,.22)}
.sec--pale .terms{border-bottom-color:rgba(217,173,0,.35)}
.sec__hd{max-width:46rem;margin-bottom:clamp(1.5rem,1rem + 1.6vw,2.75rem)}
.sec__hd--split{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.sec__hd--split > div{max-width:46rem}
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem .55rem;font-size:.8125rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
.kicker i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}
.kicker--rule::before{content:'';width:22px;height:2px;background:var(--color-dark);margin-right:.2rem}
.h2{margin-top:.6rem;font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.02}
.sec__lead{margin-top:.75rem;font-size:var(--fs-lead);line-height:1.5;color:var(--color-ink-2);max-width:40ch}

/* Surlignage : un trait jaune sous le mot-clé d'un titre, pas un fond. Un ou deux par
   titre au plus, sur le mot qui porte l'offre (« garde-meuble », « garage », « 100 m² »). */
.hl{background:linear-gradient(transparent 70%,var(--color-primary) 70%,var(--color-primary) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.03em;margin-inline:-.03em}

/* Aplat jaune : AU PLUS DEUX par page (règle B). Texte #1A1A1A ou #3A3A3A seulement.
   Les boutons de contact y passent en noir, texte blanc (17,4:1) : la paire garde sa
   logique (l'appel plein sous 768 px, « Vérifier la disponibilité » plein au-dessus). */
.sec--jaune{background-color:var(--color-primary);background-image:none;border-block:0}
.sec--jaune .kicker{color:var(--color-dark)}
.sec--jaune .btn--contact,.sec--jaune .cta-pair__call{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-white)}
.sec--jaune .cta-pair__dispo{background:transparent;border-color:var(--color-dark);color:var(--color-dark)}
@media (min-width:768px){
  .sec--jaune .cta-pair__dispo{background:var(--color-dark);border-color:var(--color-dark);color:var(--color-white)}
  .sec--jaune .cta-pair__call{background:transparent;border-color:var(--color-dark);color:var(--color-dark)}
}
@media (hover:hover){.sec--jaune .btn:hover,.sec--jaune .cta-pair .btn:hover{background:var(--color-white);border-color:var(--color-dark);color:var(--color-dark)}}

/* 5. En-tête clair, vrai logo -------------------------------------------------
   Logo : 34 px de haut sous 768 px, 40 px au-dessus (width/height explicites dans le HTML).
   Menu mobile en <details> : aucun JS. */
.site-hd{background:var(--color-white);border-bottom:1px solid var(--color-hair);height:64px;position:relative;z-index:10}
/* L'en-tête qui revient en remontant : voir § 29. */
.site-hd .wrap{height:100%;display:flex;align-items:center;gap:var(--space-sm)}
.site-hd__logo{display:flex;align-items:center;flex:none;min-height:44px;border-radius:var(--radius-sm)}
.site-hd__logo img{height:34px;width:auto}
.site-hd__nav,.site-hd__tel,.site-hd__cta{display:none}
.site-hd__call{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--color-dark);
  border-radius:var(--radius-md);color:var(--color-dark);flex:none}
.site-hd__menu{flex:none;margin-right:-10px}
.site-hd__menu > summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-md)}
.site-hd__menu > summary::-webkit-details-marker{display:none}
.site-hd__menu > summary .ico{width:26px;height:26px}
.site-hd__menu .ico--close{display:none}
.site-hd__menu[open] .ico--open{display:none}
.site-hd__menu[open] .ico--close{display:block}
.site-hd__menu:not([open]) .site-hd__panel{display:none}
.site-hd__panel{position:absolute;left:0;right:0;top:100%;background:var(--color-white);border-bottom:1px solid var(--color-hair);
  box-shadow:0 18px 30px -18px rgba(26,26,26,.35);padding:.5rem var(--gutter) 1.25rem}
.site-hd__panel ul{display:grid}
.site-hd__panel li + li{border-top:1px solid var(--color-hair)}
.site-hd__panel a:not(.btn){display:flex;align-items:center;min-height:52px;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;text-decoration:none}
.site-hd__panel .btn{margin-top:.75rem;width:100%}
@media (min-width:768px){.site-hd{height:80px}.site-hd__logo img{height:40px}}
@media (min-width:1024px){
  .site-hd__menu,.site-hd__call{display:none}
  .site-hd__logo img{height:36px}
  .site-hd__nav{display:flex;gap:1rem;margin-left:.75rem;font-size:.9375rem;font-weight:500}
  .site-hd__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
  .site-hd__nav a:hover,.site-hd__nav a[aria-current="page"]{border-bottom-color:var(--color-dark)}
  /* 1 024 – 1 179 px : le numéro en texte ne tient pas ; l'icône reste un lien tel: de 44 px */
  .site-hd__tel{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;margin-left:auto;min-height:44px;min-width:44px;
    font-family:var(--font-display);font-weight:700;text-decoration:none;white-space:nowrap;border:1.5px solid var(--color-dark);border-radius:var(--radius-md)}
  .site-hd__num{display:none}
  .site-hd__cta{display:inline-flex;white-space:nowrap}
}
@media (min-width:1180px){
  .site-hd__logo img{height:40px}
  .site-hd__nav{gap:1.5rem;margin-left:var(--space-md)}
  .site-hd__num{display:inline}
  .site-hd__tel{border:0;min-width:0}
}

/* 6. Héros, aiguillage mobile, photo pleine largeur ----------------------------
   section.hero > div.hero__in (PAS de .wrap : la grille pose elle-même la colonne de
   contenu et la pleine largeur, sans 100vw, donc sans débord de barre de défilement)
     > div.hero__txt > div.hero__hd (.crumbs, .kicker, h1.hero__title)
                     + div.hero__side (.hero__lead, .price-note, .cta-pair, .hero__next, .rating)
                     + nav.switch (home seulement)
     > .shots (photo pleine largeur, ou autre visuel : .gm-visual)
   Sous 1 024 px : tout en une colonne, dans cet ordre. Dès 1 024 px : le titre à gauche,
   le reste à droite, l'aiguillage sous le titre ; la photo passe dessous, bord à bord. */
.hero{background:var(--color-bg);border-bottom:1px solid var(--color-hair)}
.hero__in{display:grid;row-gap:1.75rem;padding-top:1.25rem;
  grid-template-columns:[full-start] minmax(max(var(--gutter),env(safe-area-inset-left)),1fr) [content-start] minmax(0,var(--max-width)) [content-end] minmax(max(var(--gutter),env(safe-area-inset-right)),1fr) [full-end]}
.hero__txt{grid-column:content}
.hero__in > :not(.hero__txt){grid-column:full}
.hero__title{margin-top:.75rem;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.035em}
.hero__lead{margin-top:var(--space-sm);font-size:var(--fs-lead);line-height:1.5;color:var(--color-ink-2);max-width:38ch}
.hero .cta-pair{margin-top:1.5rem}
.hero__next{margin-top:.75rem;font-size:var(--fs-body);line-height:1.5;color:var(--color-ink-2);max-width:48ch}
.hero .price-note{margin-top:.75rem}
.hero .rating{margin-top:.6rem}
@media (min-width:768px){.hero__in{padding-top:2.5rem}}
@media (min-width:1024px){
  .hero__in{row-gap:2rem;padding-top:clamp(2rem,1rem + 2vw,3.25rem)}
  .hero__txt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"hd side" "switch side";column-gap:clamp(2.5rem,1rem + 3vw,4.5rem);align-items:start}
  .hero__hd{grid-area:hd}
  .hero__side{grid-area:side}
  .hero__side > .hero__lead:first-child{margin-top:1.6rem}   /* aligné sur le haut du titre, sous le kicker */
  .hero__txt > .switch{grid-area:switch;align-self:end}
}

/* Aiguillage mobile : deux puces, un prix et une vignette de plan chacune (décoratives) */
.switch{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--color-hair);--cotes:none;--k:13}
.switch > p{font-size:var(--fs-meta);color:var(--color-gray);margin-bottom:.5rem}
.switch ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.switch a{display:flex;align-items:center;gap:.45rem;min-height:64px;height:100%;padding:.45rem .5rem .45rem .4rem;
  border:1.5px solid var(--color-dark);border-radius:var(--radius-md);text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;line-height:1.25;background:var(--color-white);box-shadow:var(--shadow-card)}
.switch li:last-child a{background:var(--color-bg)}
.switch .plan__mini{width:34px;height:auto;flex:none}
.switch a > span{display:flex;flex-direction:column;gap:.15rem}
.switch b{font-weight:700;font-size:.875rem;text-wrap:balance}   /* « TTC » passe à la ligne à 390 px plutôt que d'élargir la puce */
@media (min-width:1024px){.switch{max-width:31rem;margin-top:1.5rem}}

/* Photo pleine largeur, bord à bord ; sur la home, deux vignettes cadrées de blanc la
   chevauchent. Cadrage : --pos sur .shots (défaut 50% 62%).
   Photo seule légendée : figure.shots.shots--solo > div.shots__main + figcaption.cap,
   la légende reprend la colonne de contenu. */
.shots{position:relative;margin:0}
.shots__main{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--color-hair)}
.shots__main img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 62%)}
.shots__row{display:none}         /* sous 768 px, les puces .switch montrent déjà les deux offres */
.shot{background:var(--color-white);border-radius:10px;padding:6px;margin:0;box-shadow:var(--shadow-float)}
.shot img{border-radius:var(--radius-md);aspect-ratio:4/3;width:100%;object-fit:cover}
.shot .cap{padding:.4rem .3rem .2rem}
.shots--solo{padding-bottom:1rem}
.shots--solo > .cap{width:min(100% - 2 * var(--gutter),var(--max-width));margin:.6rem auto 0}
@media (min-width:768px){
  .shots__main{aspect-ratio:auto;height:clamp(20rem,12rem + 16vw,28rem)}
  .shots:not(.shots--solo){margin-bottom:clamp(5rem,3rem + 4vw,7rem)}
  .shots__row{position:absolute;right:max(var(--gutter),calc((100% - var(--max-width)) / 2));bottom:clamp(-7rem,-3rem - 4vw,-5rem);
    width:min(34rem,56%);display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .shot:first-child{transform:translateY(-1.5rem)}
}
@media (min-width:1024px){.shots__main{height:clamp(22rem,8rem + 20vw,30rem)}}

/* 7. Portes (cartes d'offre) ---------------------------------------------------
   Une porte = titre + pour qui + plan + prix + 2 ou 3 faits + contact + lien vers la page.
   .portes__grid aligne en-têtes, plans et corps des portes voisines par sous-grille. */
.portes{padding-block:clamp(1.5rem,1rem + 2vw,3rem) var(--section-y);
  background-color:var(--color-white);background-image:var(--dots);background-size:var(--dots-size)}
.portes__grid{display:grid;gap:var(--space-sm)}
.porte{display:flex;flex-direction:column;background:var(--color-white);--halo:var(--color-white);
  border:1px solid rgba(26,26,26,.08);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);scroll-margin-top:var(--space-sm)}
.porte__hd{padding:var(--card-pad) var(--card-pad) 0}
.porte__title{display:flex;align-items:center;gap:.75rem;font-size:clamp(1.875rem,1.4rem + 1.4vw,2.375rem);letter-spacing:-.03em;line-height:1}
.porte__pic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--color-dark);background:var(--color-bg)}
.porte__pic .ico{width:22px;height:22px}
.porte__use{margin-top:.6rem;line-height:1.5;max-width:44ch}
/* Le plan posé sur un plateau blanc cassé légèrement creusé, à trame de points */
.porte__plan{--halo:var(--color-bg);margin:1.1rem var(--card-pad) 0;padding:1.5rem .75rem .9rem;border-radius:var(--radius-lg);
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);
  box-shadow:inset 0 1px 3px rgba(26,26,26,.12),inset 0 -1px 0 rgba(255,255,255,.8);
  display:flex;flex-direction:column;justify-content:flex-end}
.porte__body{display:flex;flex-direction:column;padding:1.1rem var(--card-pad) var(--card-pad)}
.porte__act{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
.porte__act .btn{padding-inline:1rem;flex:1 1 100%;font-size:1rem}
.porte__foot{margin-top:.9rem;color:var(--color-ink-2);line-height:1.5}
@media (min-width:600px){.porte__act .btn{flex:0 0 auto}}
@media (min-width:768px){.porte__plan{padding-inline:1rem}}
@media (min-width:1024px){
  .portes__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto auto;gap:0 1rem}
  .porte{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .porte__call{display:none}
  .porte__act{margin-top:auto;padding-top:1.25rem}
}

/* 8. Plans isométriques et légende d'échelle -----------------------------------
   Un plan s'écrit {{plan:box|g45|a90|ent}} dans un <figure class="plan">. Sa largeur vaut
   --k (px/m, sur :root) x --w (largeur du viewBox en m, posée par le snippet). */
.scale-note{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:var(--fs-meta);font-weight:500;color:var(--color-dark)}
.scale-note__fig{width:10px;height:28px;flex:none}
.plan-row{display:flex;flex-direction:column;align-items:center;gap:1rem}
.plan{margin:0;display:flex;flex-direction:column;align-items:center;position:relative;isolation:isolate}
.plan__svg{display:block;width:calc(var(--k) * var(--w) * 1px);height:auto;max-width:none;overflow:visible}
/* Ombre portée au sol, sous un plan légendé ; le libellé devient une étiquette blanche */
.plan:has(figcaption)::before{content:'';position:absolute;z-index:-1;left:6%;right:6%;bottom:1.1rem;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,26,26,.28),rgba(26,26,26,.1) 60%,transparent)}
.plan figcaption{position:relative;margin-top:.25rem;padding:.1rem .5rem;background:var(--color-white);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-meta);line-height:1.4}
@media (min-width:768px){.plan-row{flex-direction:row;align-items:flex-end;justify-content:center;gap:12px}}
/* Matière des plans (tuiles.css) ; cotes ramenées à --ctpx à l'écran quel que soit --k */
.tvof-e,.tvof-c{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tvof-floor{fill:var(--color-gray-light)}
.tvof-e{stroke:var(--color-gray);stroke-width:1.4px}
.tvof-e--f{stroke:var(--color-dark);stroke-width:1.7px}
.tvof-e--in{stroke-width:1px}
.tvof-e--max{fill:none;stroke:var(--color-gray);stroke-width:1.2px;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.tvof-mesh{fill:none;stroke:var(--color-gray);stroke-opacity:.55}
/* Entrepôt : cloisons en pointillés et flèche de découpe (tuiles.css, valeurs ≥ 1 024 px :
   à l'échelle commune le plan est toujours servi grand) */
.tvof-e--part,.tvof-arrow{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tvof-e--part{stroke:var(--color-gray);stroke-opacity:.7;stroke-width:.9px;stroke-dasharray:5 4}
.tvof-arrow{stroke:var(--color-dark);stroke-width:1px;stroke-opacity:.75;stroke-linecap:round}
.tvof-cloison{stroke-opacity:.8;stroke-width:1.1px;stroke-dasharray:6 4}
.tvof-fleche{stroke-opacity:.85;stroke-width:1.2px}
.tvof-c{stroke:var(--color-dark);stroke-width:1px}
.tvof-c,.tvof-ct,.tvof-cx{display:var(--cotes,inline)}
.tvof-wa{fill:var(--tvof-wall-a)} .tvof-wb{fill:var(--tvof-wall-b)} .tvof-band{fill:var(--tvof-band)}
.tvof-rib{fill:none;stroke:var(--tvof-rib);stroke-width:.8px;vector-effect:non-scaling-stroke}
.tvof-kt{fill:var(--tvof-kraft-t)} .tvof-ka{fill:var(--tvof-kraft-a)} .tvof-kb{fill:var(--tvof-kraft-b)}
.tvof-shelf{fill:var(--tvof-shelf)} .tvof-wood{fill:var(--tvof-wood)}
.tvof-cart{fill:var(--tvof-car-t)} .tvof-cara{fill:var(--tvof-car-a)} .tvof-carb{fill:var(--tvof-car-b)}
.tvof-gla{fill:var(--tvof-glass-a)} .tvof-glb{fill:var(--tvof-glass-b)} .tvof-tyre{fill:var(--tvof-tyre)}
.tvof-sill{fill:var(--tvof-glass-a)} .tvof-caisse{fill:var(--tvof-steel)}
.tvof-o{stroke:var(--color-dark);stroke-width:.8px;stroke-opacity:.75;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tvof-oi{stroke-width:.7px;stroke-opacity:.55}
.tvof-post{fill:none;stroke:var(--tvof-steel);stroke-width:1.1px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.tvof-sh{fill:var(--color-dark);opacity:.09}
.tvof-figd{fill:var(--color-dark);stroke:var(--color-dark);stroke-width:.07;stroke-linejoin:round}
.tvof-figv{fill:var(--color-primary);stroke:none}
.tvof-ct{fill:var(--color-dark);font-family:var(--font-display);font-weight:600;
  font-size:calc(var(--ctpx,12px) * 21 / var(--k) / var(--s));
  paint-order:stroke;stroke:var(--halo,#fff);stroke-width:calc(2.5px * 21 / var(--k) / var(--s));stroke-linejoin:round}

/* 9. Lignes de prix, réassurance de prix, faits cochés ----------------------------
   .prices > li : .prices__name (h3), .prices__dims, .prices__amount (<small> pour /mois,
   charges), .prices__devis (lien de devis, entrepôt seulement). .prices--lead grossit le prix. */
.prices{border-bottom:1px solid var(--color-hair)}
.prices li{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.15rem 1rem;padding-block:1rem;border-top:1px solid var(--color-hair)}
.prices li:first-child{border-top:0;padding-top:0}
.prices__name{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:600}
.prices__dims{grid-column:1;font-size:var(--fs-meta);color:var(--color-gray);line-height:1.45}
/* Prix en très gros chiffres (B) ; « Sur devis », sans <small>, reste à taille de texte fort */
.prices__amount{grid-column:2;grid-row:1 / span 2;text-align:right;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.25rem,1.6rem + 1.8vw,3.25rem);line-height:.9;white-space:nowrap;letter-spacing:-.045em}
.prices__amount small{display:block;margin-top:.45rem;line-height:1.35;font-family:var(--font-body);font-weight:400;
  font-size:var(--fs-meta);color:var(--color-gray);letter-spacing:0}
.prices--lead .prices__amount{font-size:clamp(3.5rem,2.2rem + 4vw,5.75rem);letter-spacing:-.055em;line-height:.85}
.prices .prices__amount:not(:has(small)){font-size:clamp(1.5rem,1.3rem + .8vw,2rem);letter-spacing:-.02em;line-height:1.05}
.prices__devis{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-block:-.4rem -.6rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-meta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
/* La réassurance qui suit le prix (« 130 €, rien de plus ? ») : jamais une condition d'engagement */
.price-note{margin-top:.8rem;font-size:var(--fs-body);font-weight:500;line-height:1.45;color:var(--color-dark)}
/* L'argument du juste prix, là où l'on regarde le prix : une phrase complète, un surlignage.
   Jamais « le moins cher », jamais de comparaison, jamais de prix au m³. */
.deal{margin-top:1rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);
  line-height:1.2;letter-spacing:-.015em;max-width:28ch;text-wrap:balance;color:var(--color-dark)}
.deal + .price-note{margin-top:.5rem}
.checks{display:grid;gap:.35rem;margin-top:.7rem;font-size:var(--fs-body);color:var(--color-ink-2)}
.checks li{display:flex;align-items:flex-start;gap:.5rem;line-height:1.45}
.checks .ico{width:16px;height:16px;stroke-width:2.5;margin-top:.2em;color:var(--color-dark)}
/* Avantages du box (2026-09-27) : ul.perks > li > span.perks__pic (svg.ico) + libellé. Pictogramme noir
   sur disque jaune (10,7:1, celui de .brief__pic et .equip__pic). Chaque avantage s'écrit UNE fois par bloc :
   ni .price-note ni .terms ne le répètent à côté. Home (porte garde-meuble) : trois en ligne, centrés,
   entre deux filets. (Le bloc tarif de /garde-meuble/ a ses propres lignes .tf-bill, dans page.css.) */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:1rem;padding-block:1rem;border-block:1px solid var(--color-hair)}
.perks li{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:clamp(.9375rem,.85rem + .35vw,1.0625rem);line-height:1.2;letter-spacing:-.005em;color:var(--color-dark);text-wrap:balance}
.perks__pic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-primary);color:var(--color-dark);
  box-shadow:inset 0 -3px 0 rgba(26,26,26,.1),0 1px 2px rgba(26,26,26,.12)}
.perks__pic .ico{width:24px;height:24px}
.perks + .checks{margin-top:1rem}

/* 10. Bande de réassurance ---------------------------------------------------- */
.reassure{margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);display:grid;grid-template-columns:1fr 1fr;
  background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding-inline:var(--card-pad)}
.reassure li{display:flex;gap:.6rem;align-items:flex-start;padding:.85rem .25rem .85rem 0;min-width:0}
.reassure li:nth-child(n+3){border-top:1px solid var(--color-hair)}
.reassure li:last-child:nth-child(odd){grid-column:1 / -1}
.reassure .ico{width:20px;height:20px;margin-top:2px}
.reassure b{display:block;font-family:var(--font-display);font-weight:600;font-size:.9375rem;line-height:1.3}
.reassure span{display:block;font-size:var(--fs-meta);color:var(--color-gray);line-height:1.4}
.reassure a{display:inline-flex;align-items:center;min-height:24px;white-space:nowrap;text-underline-offset:.25em;text-decoration-thickness:1px}
.reassure__mail{font-size:var(--fs-meta);color:var(--color-dark)}
@media (min-width:1024px){
  .reassure{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between}
  .reassure li{padding:1.1rem 1rem 1.1rem 0}
  .reassure li:nth-child(n){border-top:0}
  .reassure li + li{padding-left:1rem;border-left:1px solid var(--color-hair)}
  .reassure li:last-child:nth-child(n){grid-column:auto}
  .reassure b{font-size:1rem} .reassure span{font-size:var(--fs-meta)}
}

/* 11. Étapes : cartes posées sur la trame, numéros en grand, en escalier dès 768 px.
   section.sec.sec--steps (+ .sec--jaune pour en faire un aplat) > ol.steps > li.step */
.sec--steps:not(.sec--jaune){background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size)}
.steps{display:grid;gap:1rem;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-content:start;
  background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);padding:var(--card-pad)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);grid-row:1 / span 2;display:block;
  font-family:var(--font-display);font-weight:700;font-size:clamp(2.75rem,2rem + 2.6vw,4.5rem);line-height:.8;letter-spacing:-.06em}
.step h3{font-size:var(--fs-h3);line-height:1.25}
.step p{margin-top:.35rem;color:var(--color-ink-2);max-width:34ch;line-height:1.55}
.sec--jaune .step{box-shadow:0 2px 4px rgba(26,26,26,.1),0 22px 40px -18px rgba(26,26,26,.45)}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .step{grid-template-columns:1fr}
  .step::before{grid-row:auto;margin-bottom:1.25rem}
  .step:nth-child(2){transform:translateY(1.5rem)}
  .step:nth-child(3){transform:translateY(3rem)}
  .sec--steps{padding-bottom:calc(var(--section-y) + 3rem)}
}

/* 12. Avis : grille desktop, défilement horizontal à accroche sur mobile (aucune animation) */
.reviews__score{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.reviews__score b{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,2.4rem + 3.4vw,5.75rem);line-height:.85;letter-spacing:-.055em}
.reviews__score .stars svg{width:24px;height:24px}
.reviews__score p{font-size:var(--fs-meta);color:var(--color-gray);line-height:1.4}
.reviews__score a{color:var(--color-dark);font-weight:500;text-underline-offset:.25em;text-decoration-thickness:1px;display:inline-flex;min-height:44px;align-items:center}
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16.5rem,84%);gap:.75rem;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;
  margin-inline:calc(-1 * var(--gutter));padding:.25rem var(--gutter) 1rem;scroll-padding-inline:var(--gutter)}
.reviews__hint{margin-top:.25rem;font-size:var(--fs-micro);color:var(--color-gray)}
.reviews > li{display:flex}
.review{flex:1;position:relative;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--color-white);border:1px solid rgba(26,26,26,.08);
  border-radius:var(--radius-lg);padding:1.25rem 1.25rem 1.1rem;box-shadow:var(--shadow-lift);margin:0}
.review blockquote{margin-top:.75rem;font-size:1rem;line-height:1.55;color:var(--color-dark)}
.review footer{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.6rem;font-size:var(--fs-meta);color:var(--color-gray)}
.review__ini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-bg);
  box-shadow:inset 0 0 0 1px var(--color-hair);font-family:var(--font-display);font-weight:700;font-size:.8125rem;color:var(--color-dark)}
.review cite{font-style:normal;font-weight:500;color:var(--color-dark)}
@media (min-width:768px){
  .reviews{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:1rem}
  .reviews__hint{display:none}
}
@media (min-width:1024px){.reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 13. FAQ en <details> (aucun JS) ------------------------------------------------ */
.faq-layout{display:grid;gap:1.5rem;grid-template-areas:"hd" "list" "more"}
.faq-layout .sec__hd{margin-bottom:0;grid-area:hd}
.faq-layout .faq{grid-area:list}
.faq-layout__more{grid-area:more}
.faq{border-bottom:1px solid var(--color-hair)}
.faq details{border-top:1px solid var(--color-hair)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;padding-block:.85rem;
  cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:18px;height:18px;flex:none;border-radius:50%;box-sizing:content-box;padding:6px;box-shadow:inset 0 0 0 1.5px var(--color-dark);
  transition:transform var(--duration-normal) var(--ease-out)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details > div{padding:0 2.5rem 1.25rem 0;color:var(--color-ink-2);max-width:68ch}
.faq details > div a{color:var(--color-dark);text-underline-offset:.2em;text-decoration-thickness:1px}
@media (hover:hover){.faq summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}}
@media (min-width:1024px){
  .faq-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto 1fr;grid-template-areas:"hd list" "more list";gap:1rem 4rem;align-items:start}
}

/* 14. Zone desservie : carte + villes + liens + fiche « en bref » ----------------- */
.zone{display:grid;gap:2rem}
.map{margin:0}
.map__frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-hair);background:var(--color-gray-light);box-shadow:var(--shadow-card)}
.map__frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* La frontière réelle (img/carte-givet-frontiere.svg, calée sur l'image par system/carte-frontiere.py) :
   France teintée de jaune, frontière en tirets noirs sur halo blanc. Le cadre garde le 4/3 de
   l'image à toutes les largeurs : les positions en % du calque, des pays et de l'épingle restent justes. */
.map__frame .map__border{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;pointer-events:none}
.map__pays{position:absolute;transform:translate(-50%,-50%);font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;color:var(--color-dark);
  background:rgba(255,255,255,.88);padding:.15rem .45rem;border-radius:3px;box-shadow:0 1px 2px rgba(26,26,26,.12)}
.map__pays--fr{background:var(--color-primary);box-shadow:0 1px 3px rgba(26,26,26,.25)}   /* #1A1A1A sur #F5C518 : 10,7:1 */
@media (min-width:768px){.map__pays{font-size:.8125rem}}
/* Villes belges sur la carte (2026-09-27) : span.map__town style="left;top" (position réelle de la ville,
   en % de l'image, calculée avec la projection GEO de system/carte-frontiere.py) > b (ville) + temps.
   Le point noir cerclé de blanc (::before) tombe sur la ville ; l'étiquette part à droite, dessous
   (.map__town--below) ou au-dessus (.map__town--up) quand elle toucherait un bord, l'épingle ou sa
   pastille à 390 px. Plus de libellé « BELGIQUE » : la frontière et la
   France teintée suffisent. Décoratif (aria-hidden) : la liste .cities porte l'information. */
.map__town{position:absolute;transform:translate(12px,-50%);padding:.3rem .5rem .32rem;white-space:nowrap;
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);box-shadow:0 1px 3px rgba(26,26,26,.22);
  font-family:var(--font-display);font-weight:500;font-size:.8125rem;line-height:1.1;color:var(--color-dark);pointer-events:none}
.map__town b{font-weight:700}
.map__town::before{content:'';position:absolute;left:-18px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--color-dark);box-shadow:0 0 0 2.5px var(--color-white),0 1px 4px 2px rgba(26,26,26,.28)}
.map__town--below{transform:translate(-50%,14px)}
.map__town--below::before{left:50%;top:-20px;margin:0 0 0 -6px}
/* Au-dessus, calée à gauche sur le point (Philippeville : à droite, elle toucherait l'épingle à 390 px) */
.map__town--up{transform:translate(-18px,calc(-100% - 14px))}
.map__town--up::before{left:12px;top:auto;bottom:-20px;margin:0}
@media (min-width:768px){.map__town{font-size:.9375rem;padding:.35rem .6rem .38rem}}
.map__pin{position:absolute;width:30px;height:40px;transform:translate(-50%,-100%)}
.map__chip{position:absolute;transform:translate(22px,-150%);background:var(--color-white);border:1.5px solid var(--color-dark);border-radius:var(--radius-md);
  padding:.2rem .5rem;font-family:var(--font-display);font-weight:600;font-size:.8125rem;white-space:nowrap;box-shadow:var(--shadow-lift)}
.map__go{position:absolute;right:.75rem;bottom:.75rem;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .9rem;
  background:var(--color-white);border:1.5px solid var(--color-dark);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:600;
  font-size:.9375rem;text-decoration:none}
.map .cap a{text-underline-offset:.2em}
.cities{border-top:1px solid var(--color-dark)}
.cities li{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:0 .6rem;padding-block:.7rem;border-bottom:1px solid var(--color-hair)}
.cities a{font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);text-underline-offset:.25em;text-decoration-thickness:1px;
  text-decoration-color:rgba(26,26,26,.35)}
.cities a::after{content:'';position:absolute;inset:0}               /* toute la ligne est cliquable */
.cities span{font-size:var(--fs-meta);color:var(--color-gray);line-height:1.3}
.cities > li > strong{font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}   /* ville sans page dédiée au sujet */
.cities b{grid-column:3;font-family:var(--font-display);font-weight:700;font-size:1.125rem;white-space:nowrap}
@media (hover:hover){.cities li:hover a{text-decoration-color:currentColor}}
.zone__more{margin-top:1.25rem;color:var(--color-ink-2);max-width:60ch}
.zone__more a{color:var(--color-dark);text-underline-offset:.2em;text-decoration-thickness:1px}
@media (min-width:1024px){
  /* La liste des villes chevauche la carte */
  .zone{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;align-items:center}
  .map__go{right:auto;left:.75rem}
  .zone > div{position:relative;z-index:1;margin-left:-4.5rem;padding:var(--card-pad);background:var(--color-white);
    border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
}

/* Fiche « en bref » (home, /garages/) : section.brief > h3.brief__title + dl.brief__dl
   > div.brief__it > dt (span.brief__pic + libellé) + dd (b.brief__num, le chiffre clé, puis la
   suite de la phrase). Le <dl> reste lisible tel quel par un moteur ou une IA : le chiffre et sa
   phrase sont dans le même <dd>. Tuiles blanches sur une scène jaune pâle, pictogramme noir sur
   disque jaune (celui de .equip__pic, 10,7:1). .brief__num--long : valeur longue (« 45 à 600 m² »).
   .brief__it--txt : fait sans chiffre, pleine largeur sous 1 024 px ; .brief__it--wide : deux
   colonnes dès 1 024 px. Deux colonnes sous 768 px, trois dès 768, quatre dès 1 024. */
.brief{margin-top:clamp(2rem,1.5rem + 2vw,3rem);padding:1rem .625rem .625rem;border-radius:var(--radius-xl);
  background:var(--color-primary-light);box-shadow:inset 0 0 0 1px rgba(217,173,0,.28)}
.brief__title{padding-inline:.4rem;font-size:var(--fs-h3);line-height:1.25}
.brief__dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.75rem}
.brief__it{display:flex;flex-direction:column;min-width:0;padding:.7rem .75rem .8rem;background:var(--color-white);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.brief__it dt{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-micro);font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-ink-2);line-height:1.2}
.brief__pic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-primary);color:var(--color-dark);
  box-shadow:inset 0 -2px 0 rgba(26,26,26,.1)}
.brief__pic .ico{width:15px;height:15px}
.brief__it dd{margin-top:.5rem;font-size:var(--fs-body);line-height:1.35;color:var(--color-ink-2)}
.brief__num{display:block;margin-bottom:.2rem;font-family:var(--font-display);font-weight:700;color:var(--color-dark);
  font-size:clamp(1.75rem,1.4rem + 1.3vw,2.5rem);line-height:1;letter-spacing:-.04em}
.brief__num small{display:inline-block;white-space:nowrap;font-size:.5em;font-weight:600;letter-spacing:0;margin-left:.1em}
/* « /mois TTC » passe en bloc à la ligne plutôt que de laisser « TTC » seul sur une tuile étroite */
.brief__num--long{font-size:clamp(1.25rem,1.05rem + 1vw,2rem);letter-spacing:-.03em}
/* Sous 600 px, « /mois TTC » passe toujours sous le prix : les tuiles de prix s'alignent sur les deux pages */
@media (max-width:599px){.brief__num small{display:block;margin-left:0;margin-top:.3rem}}
/* Fait sans chiffre sous 1 024 px : pleine largeur, texte aligné sur le libellé (pas de display:contents
   sur le <dt> : il lui ferait perdre son rôle dans l'arbre d'accessibilité) */
.brief__it--txt{grid-column:1 / -1}
.brief__it--txt dd{margin-top:0;padding-left:calc(28px + .45rem)}
@media (min-width:768px){
  .brief{padding:1.5rem 1.25rem 1.25rem}
  .brief__dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:.875rem}
  .brief__it{padding:1rem 1.1rem 1.1rem}
  .brief__it dt{letter-spacing:.1em}
  .brief__it dd{margin-top:.6rem}
  .brief__pic{width:36px;height:36px}.brief__pic .ico{width:18px;height:18px}
  .brief__it--txt dd{padding-left:calc(36px + .45rem)}
}
@media (min-width:1024px){
  .brief{padding:clamp(1.5rem,1rem + 1vw,2rem)}
  .brief__dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
  .brief__it--txt{grid-column:auto}
  .brief__it--txt dd{margin-top:.6rem;padding-left:0}
  .brief__it--wide{grid-column:span 2}
}

/* 15. Cartes de guides ---------------------------------------------------------- */
.guides{display:grid;gap:1rem}
.guide{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:start;text-decoration:none;border-radius:var(--radius-lg)}
.guide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);background:var(--color-hair);box-shadow:var(--shadow-card)}
.guide h3{font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.25;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:transparent;transition:text-decoration-color var(--duration-fast)}
.guide p{margin-top:.3rem;font-size:var(--fs-body);color:var(--color-ink-2);line-height:1.5}
@media (hover:hover){.guide:hover h3{text-decoration-color:currentColor}}
@media (min-width:768px){
  /* Le texte chevauche la photo */
  .guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
  .guide{grid-template-columns:1fr;gap:0}
  .guide img{aspect-ratio:4/3;border-radius:var(--radius-lg)}
  .guide > div{position:relative;margin:-3rem .9rem 0;padding:1rem 1.1rem 1.2rem;background:var(--color-white);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-lift)}
}

/* 16. Bandeau de contact final ---------------------------------------------------- */
/* Carte surélevée ; posée sur un aplat jaune (section.sec--contact.sec--jaune, le cas des
   trois pages), elle perd carte et ombre et le titre grossit. */
.contact-band{display:grid;gap:1.5rem;padding:var(--card-pad);border-radius:var(--radius-xl);background:var(--color-white);
  border-top:4px solid var(--color-dark);box-shadow:var(--shadow-lift)}
.sec--contact{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.sec--jaune .contact-band{background:transparent;box-shadow:none;border:0;border-radius:0;padding:0}
.sec--jaune .contact-band .h2{font-size:clamp(2rem,1.2rem + 3vw,3.5rem)}
.contact-band .h2{max-width:18em}
.contact-band p{margin-top:.6rem;color:var(--color-ink-2)}
.contact-band p + p{margin-top:.25rem}
.contact-band__act{display:grid;gap:.75rem;align-content:start}
.contact-band__mail{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:500;text-underline-offset:.25em;text-decoration-thickness:1px}
/* Choix de l'offre sous la paire d'actions : « Votre demande porte sur : » + boutons contour */
.contact-band .contact-band__label{margin-top:.25rem;font-size:var(--fs-body);color:var(--color-ink-2)}
.contact-band__choice{display:flex;flex-wrap:wrap;gap:.5rem}
@media (min-width:1024px){
  .contact-band{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3rem;padding:2.5rem 3rem}
  .sec--jaune .contact-band{padding:0}
  .contact-band__act{justify-items:end}
  .contact-band__choice{justify-content:flex-end}
}

/* 17. Pied de page clair ------------------------------------------------------------ */
.site-ft{background:var(--color-white);border-top:1px solid var(--color-hair);padding-block:clamp(2.5rem,2rem + 2vw,4rem) 1.5rem;font-size:var(--fs-meta);line-height:1.5}
.site-ft__top{display:grid;gap:2rem}
.site-ft__home{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--radius-sm)}
.site-ft__logo{height:36px;width:auto}
.site-ft__brand p{margin-top:.75rem;color:var(--color-ink-2);max-width:34ch}
.site-ft__partner{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.25rem;text-decoration:none;color:var(--color-gray);font-size:var(--fs-micro);border-radius:var(--radius-sm)}
.site-ft__partner img{height:52px;width:auto}
.site-ft__h{font-size:var(--fs-micro);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-2);margin-bottom:.4rem}
.site-ft__nav ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
.site-ft a{text-underline-offset:.25em;text-decoration-thickness:1px}
.site-ft__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-ft__contact a{display:flex;width:fit-content;align-items:center;min-height:44px;text-decoration:none}
@media (hover:hover){.site-ft__nav a:hover,.site-ft__contact a:hover{text-decoration:underline}}
.site-ft__contact address{line-height:1.5;margin-bottom:.25rem}
.site-ft__contact a{font-weight:500;gap:.45rem}
.site-ft__contact .ico{width:16px;height:16px}
.site-ft__contact p{color:var(--color-gray);margin-top:.25rem}
.site-ft__zones{margin-top:2rem;padding-block:1rem;border-block:1px solid var(--color-hair);color:var(--color-gray);line-height:2}
.site-ft__zones span{color:var(--color-ink-2);font-weight:500;margin-right:.35rem}
.site-ft__zones a{display:inline-block;color:var(--color-dark);white-space:nowrap;padding:10px .15rem;line-height:24px}   /* cible de 44 px */
.site-ft__zones i{font-style:normal;margin-inline:.35rem;color:var(--color-hair)}
.site-ft__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;margin-top:1rem;color:var(--color-gray);font-size:var(--fs-micro)}
.site-ft__legal nav{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.site-ft__legal a{display:inline-flex;align-items:center;min-height:44px}
/* Sous 768 px : pied compact (−219 px mesurés), tous les liens gardés */
@media (max-width:767.98px){
  .site-ft{padding-block:1.75rem 1rem}
  .site-ft__top{gap:1.5rem}
  .site-ft__brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
  .site-ft__brand p{display:none}
  .site-ft__partner{margin-top:0;gap:.5rem}
  .site-ft__partner img{height:44px}
  .site-ft__contact{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:start}
  .site-ft__contact > .site-ft__h,.site-ft__contact > p,.site-ft__contact > a[href^="mailto:"]{grid-column:1 / -1}
  .site-ft__contact address{grid-column:1;grid-row:2;margin-bottom:0}
  .site-ft__contact a[href^="tel:"]{grid-column:2;grid-row:2;margin-top:-.5rem}
  .site-ft__zones{margin-top:1.5rem;padding-block:.25rem;line-height:1.7}
  .site-ft__legal{margin-top:.5rem}
}
@media (min-width:768px){.site-ft__top{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.site-ft__top{grid-template-columns:1.3fr 1fr 1fr;gap:3rem}}

/* 18. Fil d'Ariane, légende de photo, emplacement « à confirmer » -------------------
   .crumbs : TOUJOURS premier enfant de .hero__txt (ou de .ct__intro sur /contact/), en <ol>.
   .cap    : LA légende de photo, partout (14 px). Les plans gardent leur libellé .plan figcaption.
   .tbc    : fait non confirmé par Antoine. Prototype seulement : à remplir ou à retirer avant
             portage, jamais stylé comme du contenu. .tbc__tag = l'étiquette « à confirmer ». */
.crumbs{margin-bottom:.5rem;font-size:var(--fs-meta);color:var(--color-gray)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:'›' / '';color:var(--color-gray)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-ink-2);text-underline-offset:.25em;text-decoration-thickness:1px}
.crumbs [aria-current]{color:var(--color-dark)}

.cap{font-size:var(--fs-meta);line-height:1.45;color:var(--color-ink-2)}
figure > .cap{margin-top:.5rem}
/* Photo légendée dans une section ; .media--rendu : image de synthèse sur fond blanc, jamais recadrée */
.media{margin:0}
.media img{width:100%;border-radius:var(--radius-lg);background:var(--color-hair);object-fit:cover}
.media--rendu img{object-fit:contain;background:var(--color-white);border:1px solid var(--color-hair)}

.tbc{outline:1.5px dashed var(--color-gray);outline-offset:-1px;border-radius:var(--radius-sm)}
p.tbc{margin-top:.6rem;padding:.45rem .65rem;color:var(--color-ink-2);line-height:1.5}
.faq details.tbc{padding-inline:.75rem}
.facts li.tbc{padding-inline:.75rem;border-bottom-color:transparent}
.step .tbc{grid-column:-2}                 /* dans une étape : sous le texte, pas sous la pastille */
.tbc__tag{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border:1px dashed var(--color-gray);border-radius:3px;
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-ink-2);background:var(--color-bg);vertical-align:.12em;white-space:nowrap}

/* 19. Offres des pages dédiées ---------------------------------------------------------
   Ordre de lecture imposé dans un bloc tarif : 1. .terms, la condition d'engagement en
   phrase complète ; 2. ce qui n'est pas facturé ; 3. le prix ; 4. l'action.
   .offer-card      carte tarif d'UNE offre : __body | __side (__media, __extra). Plus utilisée depuis
                    le 2026-09-28 (le bloc tarif de /garde-meuble/ est le ticket .tf- de page.css).
   .offers > .offer lignes tarifaires de plusieurs formats (/garages/) : __hd, __plan, __txt, __pic
   .offer__act      les boutons d'une offre, dans les deux cas */
.terms{display:flex;align-items:flex-start;gap:.75rem;padding-bottom:1rem;margin-bottom:clamp(1.5rem,1rem + 1.5vw,2.25rem);
  border-bottom:1px solid var(--color-hair);max-width:52rem}
.terms .ico{width:22px;height:22px;margin-top:.2em}
.terms p{color:var(--color-ink-2);line-height:1.5}
.terms b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
  line-height:1.25;letter-spacing:-.01em;color:var(--color-dark);margin-bottom:.2rem}

.offer__act{display:grid;gap:.625rem}
.offer__act .btn{width:100%}
@media (min-width:600px){.offer__act{display:flex;flex-wrap:wrap}.offer__act .btn{width:auto}}

.offer-card{display:grid;background:var(--color-white);border:1px solid var(--color-hair);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.offer-card__body{padding:var(--card-pad)}
.offer-card .terms{max-width:none;margin-bottom:1.25rem}
.offer-card .prices li{align-items:center}
.offer-card .prices__name{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:700;letter-spacing:-.02em}
.offer-card .offer__act{margin-top:1.4rem}
.offer-card__side{display:grid;align-content:start;gap:1.25rem;padding:0 var(--card-pad) var(--card-pad)}
.offer-card__media{margin:0;display:none}
.offer-card__media img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 60%;border-radius:var(--radius-md)}
.offer-card__extra{padding:1rem 1.1rem;background:var(--color-bg);border:1px solid var(--color-hair);border-radius:var(--radius-md)}
.offer-card__extra h3{font-size:var(--fs-h3);line-height:1.25}
.offer-card__extra p{margin-top:.4rem;color:var(--color-ink-2);line-height:1.55}
.offer-card__extra strong{color:var(--color-dark);font-weight:600;white-space:nowrap}
@media (min-width:768px){.offer-card__media{display:block}}
@media (min-width:1024px){
  .offer-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .offer-card__body{padding:2.25rem 2.5rem}
  .offer-card__side{padding:2.25rem 2.5rem 2.25rem 0;align-content:space-between}
}

/* Lignes tarifaires, en cartes (2026-09-27). Chaque format est une carte blanche posée sur la
   scène .sec--pale : plan sur un plateau à trame (.offer__plan), prix dans une pastille jaune pâle.
   Sous 768 px : nom + prix, plan (plateau bord à bord de la carte : l'entrepôt mesure 24,6 m de
   viewBox, soit 320 px à --k = 13), usage + bouton (vignette masquée).
   Dès 768 px : le plateau occupe la colonne gauche sur toute la hauteur de la carte, de la largeur
   du plus grand plan : les plans gardent la même échelle ET le même bord.
   Dès 1 024 px : plan | texte | vignette légendée. */
.offers{display:grid;gap:1rem}
.offer{--pad:var(--card-pad);display:grid;gap:1rem;padding:var(--pad);background:var(--color-white);
  border:1px solid rgba(26,26,26,.07);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);
  scroll-margin-top:var(--space-sm);grid-template-areas:"hd" "plan" "txt"}
.offer__hd{grid-area:hd}
.offer .prices{border-bottom:0}
.offer .prices li{padding-block:0;align-items:start}
.offer .prices__name{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.offer .prices__dims{margin-top:.2rem;font-size:var(--fs-meta);color:var(--color-ink-2)}
/* Le prix dans sa pastille : jaune pâle, filet jaune foncé, légèrement en relief (lignes tarifaires
   de /garages/ ET carte tarif de /garde-meuble/) */
.offer .prices__amount,.offer-card .prices__amount{grid-row:1 / span 2;align-self:start;padding:.55rem .7rem .5rem;border-radius:var(--radius-lg);
  background:var(--color-primary-light);box-shadow:inset 0 0 0 1px rgba(217,173,0,.35),0 1px 2px rgba(26,26,26,.06);
  font-size:clamp(2.5rem,1.9rem + 2.4vw,4rem);letter-spacing:-.05em;line-height:.9}
.offer .prices__amount small,.offer-card .prices__amount small{margin-top:.35rem;color:var(--color-ink-2)}
.offer .prices .prices__amount:not(:has(small)){padding:.6rem .8rem;font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem)}
.offer__plan{grid-area:plan;--halo:var(--color-bg);margin:0 calc(-1 * var(--pad));padding:1.25rem .5rem .75rem;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);
  border-block:1px solid var(--color-hair)}
.offer__txt{grid-area:txt;display:flex;flex-direction:column;gap:1rem}
.offer__use{color:var(--color-ink-2);line-height:1.5;max-width:44ch}
.offer__pic{grid-area:pic;margin:0;display:none}
.offer__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);background:var(--color-hair)}
.offers__foot{margin-top:1.5rem;color:var(--color-ink-2);max-width:72ch}
@media (min-width:768px){
  .offers{gap:1.25rem}
  .offer{grid-template-columns:calc(var(--k) * 24.6px + 2rem) minmax(0,1fr);column-gap:1.75rem;row-gap:1rem;
    grid-template-areas:"plan hd" "plan txt" "plan pic";grid-template-rows:auto auto 1fr}
  /* Le plan centré sur son plateau, dans les deux axes (Antoine, 2026-09-27 : il était posé en bas) */
  .offer__plan{margin:calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:1.25rem 1rem;
    justify-content:center;align-items:center;
    border-block:0;border-right:1px solid var(--color-hair);border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
  /* Le viewBox de l'entrepôt garde sous le dessin la marge de la ligne de sol commune (0,93 m de plus que
     le dessin, mesuré) : on le descend de la moitié pour que le dessin, et non sa boîte, soit centré */
  .offer__plan:has(use[href="#plan-ent"]) .plan__svg{translate:0 calc(var(--k) * .47px)}
  .offer__pic{display:grid;grid-template-columns:7rem 1fr;gap:.75rem;align-items:center;align-self:end}
  .offer__pic .cap{margin-top:0}
}
@media (min-width:1024px){
  .offer{grid-template-columns:calc(var(--k) * 24.6px + 2rem) minmax(0,1fr) 13.5rem;column-gap:2rem;
    grid-template-areas:"plan hd pic" "plan txt pic";grid-template-rows:auto 1fr}
  .offer__pic{display:block;align-self:start}
  .offer__pic .cap{margin-top:.45rem}
}
@media (min-width:1280px){.offer{grid-template-columns:calc(var(--k) * 24.6px + 2.5rem) minmax(0,1fr) 16rem;column-gap:2.5rem}}
/* 768 – 1 279 px : la colonne de texte est étroite ; la pastille de prix passe sous le nom et les cotes */
@media (min-width:768px) and (max-width:1279.98px){
  .offer .prices li{grid-template-columns:minmax(0,1fr)}
  .offer .prices__amount{grid-column:1;grid-row:auto;justify-self:start;text-align:left;margin-top:.6rem}
}

/* 20. Faits ------------------------------------------------------------------------------
   ul.facts > li > svg.ico + div > b (le fait) + p (la suite). Deux colonnes dès 768 px,
   trois dès 1 024 px avec .facts--3. */
.facts{display:grid;gap:0 2rem;border-top:1px solid var(--color-dark)}
.facts li{display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;padding-block:.9rem;border-bottom:1px solid var(--color-hair)}
.facts .ico{width:22px;height:22px;margin-top:.15em}
.facts b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.3}
.facts p{margin-top:.15rem;color:var(--color-ink-2);line-height:1.5}
@media (min-width:768px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 21. Renvoi vers l'autre offre ---------------------------------------------------------
   .alt-offer : kicker, .h2, UNE phrase qui porte l'ancre SEO, puis UNE carte .crosslink
   cliquable en entier (≈ 90 px). La vignette .plan__mini est décorative, cotes masquées ;
   --k n'est jamais redéfini ici (seules les puces .switch le font). */
.alt-offer{display:grid;gap:1.25rem;align-items:center}
.alt-offer p:not(.kicker){margin-top:.75rem;color:var(--color-ink-2);max-width:52ch}
.alt-offer p a{color:var(--color-dark);font-weight:500;text-underline-offset:.2em;text-decoration-thickness:1px}
.crosslink{--cotes:none;--halo:var(--color-primary-light);display:flex;align-items:center;gap:.9rem;min-height:88px;padding:.75rem 1rem .75rem .75rem;
  border:1px solid rgba(26,26,26,.07);border-radius:var(--radius-lg);background:var(--color-white);box-shadow:var(--shadow-lift);text-decoration:none;
  transition:box-shadow var(--duration-fast) var(--ease-out)}
/* La vignette sur un carreau jaune pâle ; la flèche dans un disque noir */
.crosslink .plan__mini{width:68px;height:auto;flex:none;padding:8px;box-sizing:content-box;border-radius:var(--radius-md);
  background:var(--color-primary-light);box-shadow:inset 0 0 0 1px rgba(217,173,0,.3)}
.crosslink > .ico{width:36px;height:36px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--color-dark);color:var(--color-white)}
.crosslink > span{flex:1;display:flex;flex-direction:column;gap:.15rem}
.crosslink b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.25}
.crosslink > span > span{font-size:var(--fs-body);color:var(--color-ink-2);line-height:1.45}
.crosslink > .ico{transition:transform var(--duration-fast) var(--ease-out)}
@media (hover:hover){.crosslink:hover{box-shadow:var(--shadow-float)}.crosslink:hover > .ico{transform:translateX(3px)}}
@media (min-width:768px){.alt-offer{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:3rem}}

/* 22. Depuis la Belgique ----------------------------------------------------------------
   .be = .sec__hd, .cities (liens ou <strong>), puis éventuellement .zone__more. Dans .be, les villes
   deviennent des cartes : nom, pays, et le temps de trajet en grand, filet jaune en tête de carte.
   Deux colonnes (la dernière ville seule prend la ligne), trois ou quatre dès 600 px.
   Plus de ligne .be__tel (« Depuis la Belgique : +33 … ») depuis le 2026-09-27 : le numéro est dans
   l'en-tête et le héros ; le format international n'est écrit qu'une fois, en texte, dans le chapeau
   du bloc Belgique de /contact/.
   Dès 1 024 px : titre à gauche, villes à droite. */
.be{display:grid;gap:0 3.5rem;grid-template-areas:"hd" "cities" "more"}
.be > .sec__hd{grid-area:hd;margin-bottom:1.25rem}
.be > .cities{grid-area:cities}
.be > .zone__more{grid-area:more}
.be .cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;border-top:0}
.be .cities li{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.8rem .9rem .85rem;background:var(--color-white);
  border:1px solid rgba(26,26,26,.07);border-top:3px solid var(--color-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.be .cities li:last-child:nth-child(odd){grid-column:1 / -1}
.be .cities b{order:3;margin-top:.35rem;font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem);line-height:1;letter-spacing:-.035em}
@media (hover:hover){.be .cities li:has(a):hover{box-shadow:var(--shadow-lift)}}
@media (min-width:600px){
  .be .cities{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .be .cities:has(> li:nth-child(4)){--n:2}
  .be .cities li:last-child:nth-child(odd){grid-column:auto}
}
@media (min-width:1024px){
  .be{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"hd cities" "more cities";align-items:start}
}

/* 23. Barre d'appel mobile ---------------------------------------------------------------
   Sous 768 px, fixe en bas : « Appeler » (jaune) + « Vérifier la disponibilité » (contour).
   L'état VISIBLE est l'état CSS par défaut : sans JS, la barre reste là. site.js ajoute
   .is-off tant que le héros est à l'écran, et seulement ça. build.py l'insère sur toutes
   les pages sauf /contact/ et pose .has-callbar sur <body> pour réserver sa place. */
.callbar{display:none}
@media (max-width:767.98px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;
    padding:.5rem max(var(--gutter),env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
    background:var(--color-white);border-top:1px solid var(--color-hair);box-shadow:0 -12px 24px -18px rgba(26,26,26,.4);
    transition:transform var(--duration-normal) var(--ease-out),visibility 0s}
  .callbar .btn{min-height:48px;padding-inline:1rem;font-size:1rem}
  .callbar.is-off{transform:translateY(calc(100% + 16px));visibility:hidden;
    transition:transform var(--duration-normal) var(--ease-out),visibility 0s var(--duration-normal)}
  .has-callbar{padding-bottom:calc(65px + env(safe-area-inset-bottom))}
}

/* 24. Sécurité ----------------------------------------------------------------------------
   Le bloc court de la HOME. Sur /garde-meuble/ et /garages/, la fiche .equip (§26) le
   remplace et porte ces faits avec le reste des équipements.
   section.secure > figure.secure__photo (img + figcaption.secure__badge « Vidéosurveillance
   24h/24 », le fait mis en grand sur la photo) + div.secure__txt (.kicker, h2.h2 avec .hl,
   .sec__lead, ul.secure__list > li > span.secure__pic + div > b + p).
   Faits autorisés SEULEMENT : vidéosurveillance 24h/24 ; site clos et clôturé ; portail à
   code, code personnel que le locataire est seul à connaître ; serrures individuelles sur
   les garages, cadenas inclus sur le box ; traitement anti-nuisibles « réduit le risque de
   rongeurs ». Jamais de nombre de caméras, de marque, d'alarme, de gardiennage ni de
   promesse d'intervention. Pas un aplat jaune : la force vient de la photo bord à bord et
   des pictogrammes pleins (disque noir, trait jaune : 10,7:1).
   Sous 1 024 px : photo pleine largeur, badge qui chevauche, texte dessous. Dès 1 024 px :
   la photo occupe la moitié gauche jusqu'au bord de l'écran, le texte la moitié droite. */
.secure{display:grid;background:var(--color-bg);border-block:1px solid var(--color-hair);padding-bottom:var(--section-y);
  grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,var(--max-width)) [content-end] minmax(var(--gutter),1fr) [full-end]}
.secure__photo{grid-column:full;position:relative;margin:0}
.secure__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,35% 45%);background:var(--color-hair)}
.secure__badge{position:absolute;left:max(var(--gutter),env(safe-area-inset-left));bottom:-1.75rem;display:flex;flex-direction:column;
  padding:.8rem 1.1rem .9rem;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
.secure__badge span{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
.secure__badge b{font-family:var(--font-display);font-weight:700;font-size:clamp(2.75rem,2rem + 3vw,4.75rem);line-height:.9;letter-spacing:-.05em;margin-top:.3rem}
.secure__txt{grid-column:content;padding-top:calc(1.75rem + clamp(1.5rem,1rem + 2vw,2.5rem))}
.secure__txt .h2{max-width:14em}
.secure__list{margin-top:clamp(1.5rem,1rem + 1.5vw,2.25rem);display:grid;gap:1.25rem 2rem}
.secure__list li{display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:start}
.secure__pic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--color-dark);color:var(--color-primary)}
.secure__pic .ico{width:26px;height:26px;stroke-width:2}
.secure__list b{display:block;padding-top:.2rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1.02rem + .45vw,1.375rem);line-height:1.25}
.secure__list p{margin-top:.2rem;color:var(--color-ink-2);line-height:1.5}
@media (min-width:600px){.secure__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.secure__photo img{aspect-ratio:auto;height:clamp(20rem,12rem + 16vw,28rem)}}
@media (min-width:1024px){
  .secure{padding-bottom:0;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,calc(var(--max-width) * .44)) [mid] minmax(0,calc(var(--max-width) * .56)) [content-end] minmax(var(--gutter),1fr) [full-end]}
  .secure__photo{grid-column:full-start / mid}
  .secure__photo img{height:100%;min-height:36rem}
  .secure__badge{left:auto;right:-2.5rem;bottom:var(--section-y)}
  .secure__txt{grid-column:mid / content-end;padding:var(--section-y) 0 var(--section-y) clamp(4rem,1rem + 4vw,6rem);align-self:center}
}

/* 25. Visuel garde-meuble ------------------------------------------------------------------
   figure.gm-visual(.gm-visual--photo | --rendu | --melange) : l'image du box (photo réelle
   ou rendu meublé) + l'argument en grand, .gm-claim « Le mobilier d'un logement de 100 m² »
   (surligné), le plus visible après le prix. --melange ajoute le plan du box en médaillon,
   À L'ÉCHELLE COMMUNE (--k de :root, jamais redéfini ici). Deux emplacements :
   - dans .hero, à la place de .shots (bord à bord) ;
   - dans une porte de la home, à la place de .porte__plan (.gm-visual--door). */
.gm-visual{margin:0;position:relative;--halo:var(--color-white)}
.gm-visual__img{margin:0;overflow:hidden;background:var(--color-hair)}
.gm-visual__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 55%)}
.gm-visual--rendu .gm-visual__img{background:var(--color-white)}
.gm-visual--rendu .gm-visual__img img{object-fit:contain}
.gm-claim{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2vw,3rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.gm-claim small{display:block;margin-bottom:.5rem;font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-ink-2);line-height:1.3}
.gm-visual__card{position:relative;z-index:1;background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-float);padding:1.1rem 1.25rem 1.2rem}
.gm-visual .cap{margin-top:.6rem}
/* Sous-titre de l'argument (héros de /garde-meuble/, 2026-09-27) : l'électroménager compris, le second box */
.gm-claim__sub{margin-top:.8rem;max-width:36ch;font-size:var(--fs-body);font-weight:500;line-height:1.45;color:var(--color-ink-2);text-wrap:pretty}
/* Le plan en médaillon : sur un plateau à trame, avec sa légende d'échelle */
.gm-visual__plan{--halo:var(--color-bg);display:flex;flex-direction:column;align-items:center;padding:.9rem .75rem .6rem;border-radius:var(--radius-lg);
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);box-shadow:inset 0 1px 3px rgba(26,26,26,.12)}
.gm-visual__plan .scale-note{margin:0 0 .4rem;font-size:var(--fs-micro)}

/* a. Dans le héros */
.hero .gm-visual{padding-bottom:1rem}
.hero .gm-visual > .cap{width:min(100% - 2 * var(--gutter),var(--max-width));margin:.6rem auto 0}
.hero .gm-visual__img{aspect-ratio:3/2}
.hero .gm-visual__card{margin:-3rem var(--gutter) 0}
.hero .gm-visual--melange .gm-visual__card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end}
.hero .gm-visual--rendu{background:var(--color-white);border-top:1px solid var(--color-hair)}
.hero .gm-visual--rendu .gm-visual__in{width:min(100% - 2 * var(--gutter),var(--max-width));margin-inline:auto;display:grid;gap:.5rem;padding-block:1rem 0}
.hero .gm-visual--rendu .gm-visual__img{aspect-ratio:16/9}
.hero .gm-visual--rendu .gm-claim{font-size:clamp(2.125rem,1.3rem + 3.2vw,4rem)}
.hero .gm-claim__sub{margin-top:clamp(.8rem,.6rem + .6vw,1.25rem);font-size:var(--fs-lead)}
@media (min-width:768px){
  .hero .gm-visual:not(.gm-visual--rendu){padding-bottom:0;margin-bottom:clamp(6rem,4rem + 4vw,8rem)}
  .hero .gm-visual:not(.gm-visual--rendu) .gm-visual__img{aspect-ratio:auto;height:clamp(20rem,12rem + 16vw,28rem)}
  .hero .gm-visual:not(.gm-visual--rendu) .gm-visual__card{position:absolute;margin:0;right:max(var(--gutter),calc((100% - var(--max-width)) / 2));
    bottom:clamp(-7rem,-4rem - 3vw,-5rem);width:min(30rem,60%)}
  .hero .gm-visual--melange:not(.gm-visual--rendu) .gm-visual__card{width:min(48rem,82%)}
  .hero .gm-visual > .cap{position:absolute;left:max(var(--gutter),calc((100% - var(--max-width)) / 2));bottom:clamp(-3.5rem,-2rem - 1vw,-2.5rem);width:auto;max-width:18rem;margin:0}
}
@media (min-width:1024px){
  .hero .gm-visual:not(.gm-visual--rendu) .gm-visual__img{height:clamp(22rem,8rem + 20vw,30rem)}
  .hero .gm-visual--rendu .gm-visual__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:center;gap:2.5rem;padding-block:1.5rem}
  .hero .gm-visual--rendu .gm-visual__img{order:2}
  .hero .gm-visual--rendu .cap{margin-top:1rem}
}

/* b. Dans la porte garde-meuble de la home : même emplacement et même rangée de
   sous-grille que le plan de la porte garages, pour que les deux portes restent égales. */
.gm-visual--door{margin:1.1rem var(--card-pad) 0;display:flex;flex-direction:column;gap:.9rem;justify-content:flex-end}
.gm-visual--door .gm-claim{order:-1;padding-top:.9rem;border-top:2px solid var(--color-dark);font-size:clamp(1.5rem,1.1rem + 1.2vw,2.125rem)}
.gm-visual--door .gm-visual__img{border-radius:var(--radius-lg);aspect-ratio:16/10}
.gm-visual--door.gm-visual--rendu .gm-visual__img{aspect-ratio:16/9;background:transparent}
.gm-visual--door .gm-visual__stage{position:relative}
/* Médaillon : il chevauche le bas de la photo, côté box vide, et déborde dessous */
.gm-visual--door .gm-visual__stage{display:flex;flex-direction:column}
.gm-visual--door .gm-visual__plan{align-self:flex-start;margin:-3.25rem 0 0 .6rem;background-color:var(--color-white);box-shadow:var(--shadow-float);--halo:var(--color-white)}
.gm-visual--door .cap{margin-top:0}

/* 26. Fiche équipements -------------------------------------------------------------------
   Une « fiche technique annotée », sur /garde-meuble/ et /garages/ (la home garde .secure).
   section.sec.equip > .wrap > div.equip__sheet :
     div.equip__hd  (.kicker, h2.h2 avec .hl ; pas de chapeau)
     figure.equip__board > div.equip__stage (style="--sw;--sh;--px;--py", en mètres)
         > div.plan ({{plan:box|a90}}) + svg.equip__lines (viewBox="0 0 sw sh" : .equip__site
           l'enceinte, .equip__way l'allée, .equip__lead les traits, .equip__dot les cibles)
         + span.equip__pin[data-n] (style="--x;--y", en mètres) + span.equip__tag
     div.equip__legend > section.equip__fam > h3
       > ol.equip__list > li[data-n] > span.equip__pic (svg.ico + i, le numéro) + div > b + p
   (2026-09-27, version 2 : cartouche, barre d'échelle, chapeau et plages de numéros retirés.)
   Échelle : la scène mesure --k x --sw px de large. --k vient de :root et n'est JAMAIS
   redéfini ici : le plan, les repères et les traits gardent leurs positions relatives à
   toutes les largeurs, et le plan reste à l'échelle commune du site. Les cotes du plan sont
   masquées (--cotes:none) : le cartouche et la section « taille » les donnent.
   Couleur (version 2, demandée par Antoine) : le pictogramme noir est posé sur un disque jaune
   (#1A1A1A sur #F5C518, 10,7:1) ; le numéro est une pastille noire à chiffre jaune (10,7:1),
   et chaque repère du plan est cette même pastille. Les cibles des traits sont des points
   jaunes cerclés de noir. Pas d'aplat de section jaune. Un repère « à confirmer »
   (.equip__pin--tbc) passe en contour pointillé, comme .tbc.
   Sous 1 024 px : titre, planche bord à bord, puis la légende famille par famille, sans
   accordéon (deux colonnes d'équipements dès 600 px). Dès 1 024 px : titre à gauche, planche
   à droite, les trois familles en trois colonnes dessous. */
.equip{background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);border-block:1px solid var(--color-hair)}
.equip__sheet{position:relative;display:grid;gap:1.5rem;padding:var(--card-pad);background:var(--color-white);
  border:1px solid rgba(26,26,26,.08);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
.equip__hd .h2{max-width:13em}
@media (min-width:1024px){.equip__hd .h2{font-size:clamp(2.25rem,1rem + 2.2vw,2.875rem)}}
.equip__hd .sec__lead{max-width:34ch}
/* La planche : trame de plan, bord à bord de la fiche sous 768 px */
.equip__board{margin:0 calc(-1 * var(--card-pad));padding-block:1.25rem;display:flex;flex-direction:column;
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);border-block:1px solid var(--color-hair)}
.equip__stage{--cotes:none;--halo:var(--color-bg);--pin:clamp(24px,calc(var(--k) * 1.9px),28px);position:relative;flex:none;margin-inline:auto;
  width:calc(var(--k) * var(--sw) * 1px);aspect-ratio:var(--sw) / var(--sh)}
/* La fiche ne montre qu'UN plan, sans comparaison : elle a sa propre échelle, plus grande que
   l'échelle commune, pour remplir la planche. Repères, traits et plan sont en mètres : tout suit --k.
   C'est la seule redéfinition de --k avec .switch. */
.equip__stage{--k:17}
@media (min-width:768px){.equip__stage{--k:28}}
@media (min-width:1024px){.equip__stage{--k:24}}
@media (min-width:1180px){.equip__stage{--k:28}}
@media (min-width:1440px){.equip__stage{--k:30}}
.equip__stage > .plan{position:absolute;left:calc(var(--px) / var(--sw) * 100%);top:calc(var(--py) / var(--sh) * 100%)}
.equip__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.equip__site{fill:none;stroke:var(--color-gray);stroke-width:1.25px;stroke-dasharray:8 5;vector-effect:non-scaling-stroke}
.equip__way{fill:none;stroke:var(--color-dark);stroke-opacity:.5;stroke-width:2px;stroke-dasharray:.1 6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.equip__lead{fill:none;stroke:var(--color-dark);stroke-width:1px;vector-effect:non-scaling-stroke}
.equip__dot{fill:var(--color-primary);stroke:var(--color-dark);stroke-width:1.5px;vector-effect:non-scaling-stroke;r:calc(3.5px / var(--k))}
.equip__pin{position:absolute;left:calc(var(--x) / var(--sw) * 100%);top:calc(var(--y) / var(--sh) * 100%);
  width:var(--pin);height:var(--pin);margin:calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);display:grid;place-items:center;border-radius:50%;
  background:var(--color-dark);color:var(--color-primary);font-family:var(--font-display);font-weight:700;font-size:.8125rem;line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--color-bg),0 4px 10px -3px rgba(26,26,26,.45);transition:transform var(--duration-fast) var(--ease-out)}
.equip__pin--tbc{background:var(--color-white);color:var(--color-ink-2);border:1.5px dashed var(--color-gray);box-shadow:0 0 0 3px var(--color-bg)}
/* Étiquette de la trame (« Portail ») : posée sous son point, sous les repères voisins */
.equip__tag{position:absolute;left:calc(var(--x) / var(--sw) * 100%);top:calc(var(--y) / var(--sh) * 100%);transform:translate(-50%,calc(var(--pin) / 2 + 3px));
  padding:0 .35em;background:var(--color-bg);font-size:var(--fs-micro);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-ink-2);line-height:1.3;white-space:nowrap}
/* La légende, famille par famille */
.equip__legend{display:grid;gap:1.75rem}
.equip__fam h3{padding-top:.7rem;border-top:2px solid var(--color-dark);font-size:var(--fs-h3);line-height:1.25}
.equip__list{display:grid;margin-top:.35rem}
.equip__list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:.9rem;align-items:start;padding-block:.65rem}
.equip__list li + li{border-top:1px solid var(--color-hair)}
.equip__pic{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:var(--color-dark);
  box-shadow:inset 0 -3px 0 rgba(26,26,26,.1),0 1px 2px rgba(26,26,26,.12)}
.equip__pic .ico{width:22px;height:22px}
.equip__pic i{position:absolute;top:-5px;left:-7px;min-width:22px;height:22px;padding-inline:5px;border-radius:11px;display:grid;place-items:center;
  background:var(--color-dark);color:var(--color-primary);font-style:normal;font-family:var(--font-display);font-weight:700;font-size:.75rem;line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--color-white)}
.equip__list b{display:block;padding-top:.1rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.25}
.equip__list p{margin-top:.15rem;color:var(--color-ink-2);line-height:1.45}
/* Équipement sans phrase (le libellé suffit) : centré sur son pictogramme, sans vide dessous */
.equip__list li:not(:has(p)){align-items:center}
.equip__list li:not(:has(p)) b{padding-top:0}
.equip__list li.tbc{padding-inline:.6rem;margin-block:.35rem}
.equip__list li.tbc .equip__pic{background:var(--color-bg);box-shadow:inset 0 0 0 1.5px var(--color-dark)}
.equip__list li.tbc .equip__pic i{background:var(--color-white);color:var(--color-ink-2);box-shadow:inset 0 0 0 1.5px var(--color-gray),0 0 0 2px var(--color-white)}
.equip__list li.tbc + li,.equip__list li + li.tbc{border-top-color:transparent}
/* Survol d'un équipement : son repère grossit sur le plan (souris seulement, aucun JS) */
@media (hover:hover){
  .equip:has(li[data-n="1"]:hover) .equip__pin[data-n="1"],.equip:has(li[data-n="2"]:hover) .equip__pin[data-n="2"],
  .equip:has(li[data-n="3"]:hover) .equip__pin[data-n="3"],.equip:has(li[data-n="4"]:hover) .equip__pin[data-n="4"],
  .equip:has(li[data-n="5"]:hover) .equip__pin[data-n="5"],.equip:has(li[data-n="6"]:hover) .equip__pin[data-n="6"],
  .equip:has(li[data-n="7"]:hover) .equip__pin[data-n="7"],.equip:has(li[data-n="8"]:hover) .equip__pin[data-n="8"],
  .equip:has(li[data-n="9"]:hover) .equip__pin[data-n="9"],.equip:has(li[data-n="10"]:hover) .equip__pin[data-n="10"]{transform:scale(1.3)}
}
@media (min-width:600px) and (max-width:1023.98px){
  .equip__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.75rem}
  .equip__list li + li{border-top:0}
  .equip__list li:nth-child(n+3){border-top:1px solid var(--color-hair)}
}
@media (min-width:768px){
  .equip__board{margin:0;border:0;border-radius:var(--radius-lg);overflow:hidden;padding-block:1.75rem;
    --card-pad:1.25rem;
    box-shadow:inset 0 1px 3px rgba(26,26,26,.12),inset 0 0 0 1px var(--color-hair)}
}
@media (min-width:1024px){
  .equip__sheet{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem 3rem;padding:clamp(2rem,1rem + 2vw,3rem)}
  .equip__hd{align-self:center}
  .equip__board{justify-content:center}
  .equip__legend{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
}

/* 27. Mouvement réduit -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   28. Blog : index /blog/ et gabarit d'article (passe 8, 2026-09-28)
   Section ajoutée d'un seul bloc ; elle ne redéfinit aucun composant plus haut, elle les
   complète (.guides, .crumbs, .crosslink, .perks). Pages : blog/, article-garage/, article-box/.
   Spec validée : scratchpad round8/BLOG-SPEC.txt. Aucun aplat jaune sur ces pages.
   a. Index : chips de thème, grille de cartes, carte de tête, carreau sans photo
   b. Article : en-tête, photo, sommaire, corps .prose, tableaux, encart d'offre, rail
   c. Offre de fin d'article (.post-offer) et guides liés (.more-guides)
   ========================================================================== */

/* a. Index -------------------------------------------------------------------------------------
   Héros sans photo (.hero.blog-hero) : titre, chapeau, puis nav.chips = trois ancres de la page
   avec leur nombre de guides. Aucun JS, aucune URL nouvelle. */
.blog-hero .hero__in{padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.chips{margin-top:1.25rem}
.chips ul{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .45rem .4rem .95rem;border:1.5px solid var(--color-dark);
  border-radius:999px;background:var(--color-white);font-family:var(--font-display);font-weight:600;font-size:.9375rem;line-height:1.2;
  text-decoration:none;box-shadow:var(--shadow-card)}
.chips__n{display:inline-grid;place-items:center;min-width:1.75rem;height:1.75rem;padding-inline:.45rem;border-radius:999px;
  background:var(--color-dark);color:var(--color-white);font-size:.8125rem;font-variant-numeric:tabular-nums}   /* 17,4:1 */
@media (hover:hover){.chips a:hover{background:var(--color-bg)}}

/* Grille de l'index : 1 colonne, 2 dès 768 px, 3 dès 1 024 px ; la première carte d'un thème
   (li.guides__lead > a.guide.guide--lead) prend toute la largeur, photo à gauche dès 768 px. */
.guides--index{row-gap:1.25rem}
.guides--index > .guides__lead{grid-column:1 / -1}
.guide img{object-position:var(--pos,50% 50%)}
.guide--lead{grid-template-columns:minmax(0,1fr);gap:.9rem}
.guide--lead img,.guide--lead .guide__ph{aspect-ratio:16/9;border-radius:var(--radius-lg)}
.guide--lead h3{font-size:clamp(1.3125rem,1.1rem + .9vw,1.875rem);line-height:1.2;letter-spacing:-.015em}
@media (min-width:768px){
  .guides--index{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.5rem}
  .guide--lead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}
  .guide--lead img,.guide--lead .guide__ph{aspect-ratio:16/10}
  .guide--lead > div{margin:0 0 0 -3.5rem;padding:1.5rem 1.75rem 1.75rem}
}
@media (min-width:1024px){.guides--index{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Carte sans photo : carreau jaune pâle à trame, vignette de l'offre du thème (décoratif) */
.guide__ph{--cotes:none;--halo:var(--color-primary-light);display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--radius-md);
  background-color:var(--color-primary-light);background-image:var(--dots);background-size:var(--dots-size);
  box-shadow:inset 0 0 0 1px rgba(217,173,0,.3),var(--shadow-card)}
.guide__ph .plan__mini{width:58%;height:auto;max-height:78%}
@media (min-width:768px){.guide__ph{border-radius:var(--radius-lg)}}
/* Renvoi final de l'index : deux cartes .crosslink l'une sous l'autre */
.alt-offer__cards{display:grid;gap:.75rem}

/* b. Article -----------------------------------------------------------------------------------
   article.post > div.wrap.post__grid > header.post__hd (fil, kicker, H1[data-callbar-watch],
   p.post__meta, p.post__lead) + figure.post__hero + details.toc + div.prose.
   Sous 1 024 px : une colonne, dans cet ordre. Dès 1 024 px : texte 40rem à gauche, rail de
   17rem à droite où le sommaire est collant et ouvert (site.js). Mesure : 40rem, soit ~70 signes. */
.post{padding-top:.75rem}
.post__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.post__hd{padding-bottom:1.5rem}
/* Fil : le titre de l'article tient sur une ligne, en points de suspension, sous 768 px */
.crumbs--post ol{flex-wrap:nowrap}
.crumbs--post li{flex:none}
.crumbs--post li:last-child{flex:0 1 auto;min-width:0}
.crumbs--post li:last-child span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px){.crumbs--post li:last-child span{white-space:normal;padding-block:.6rem;line-height:1.35}}
.post__title{margin-top:.6rem;font-size:clamp(2rem,1.35rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.03em}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;margin-top:.9rem;font-size:var(--fs-meta);line-height:1.45;color:var(--color-gray)}
.post__meta i{font-style:normal}
@media (max-width:599.98px){.post__meta{column-gap:1rem}.post__meta i{display:none}}   /* pas de point en début de ligne */
.post__lead{margin-top:1.1rem;font-size:var(--fs-lead);line-height:1.55;color:var(--color-ink-2)}
.post__lead strong{font-weight:600;color:var(--color-dark)}
/* Photo 16:9, sans légende. Portrait (assurance) : cadrage par --pos sur l'<img>. */
.post__hero{margin:0 calc(-1 * var(--gutter))}
.post__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:var(--pos,50% 50%);background:var(--color-hair)}
@media (min-width:768px){.post__hero{margin:0}.post__hero img{border-radius:var(--radius-lg)}}

/* Sommaire : <details> fermé sous 1 024 px (« Sommaire · N parties »), H2 seulement */
.toc{margin-top:1.25rem;border:1px solid var(--color-hair);border-radius:var(--radius-lg);background:var(--color-bg)}
.toc > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.5rem .75rem .5rem 1rem;
  cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;line-height:1.3}
.toc > summary::-webkit-details-marker{display:none}
.toc > summary i{font-style:normal;margin-inline:.45rem;color:var(--color-gray)}
.toc > summary .ico{width:18px;height:18px;flex:none;border-radius:50%;box-sizing:content-box;padding:5px;box-shadow:inset 0 0 0 1.5px var(--color-dark);
  transition:transform var(--duration-normal) var(--ease-out)}
.toc[open] > summary .ico{transform:rotate(45deg)}
.toc ol{counter-reset:toc;display:grid;padding:0 1rem .6rem}
.toc li{counter-increment:toc;border-top:1px solid var(--color-hair)}
.toc a{display:grid;grid-template-columns:1.9rem minmax(0,1fr);align-items:baseline;min-height:44px;padding-block:.6rem;
  font-size:var(--fs-body);line-height:1.35;text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-weight:700;font-size:.8125rem;color:var(--color-gray)}   /* 6,5:1 */
@media (hover:hover){.toc a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}

/* Corps : le contenu WordPress tel quel. site.css remet list-style à none : on le rend ici. */
.prose{padding-top:1.75rem;font-size:var(--fs-body);line-height:1.65;color:var(--color-dark)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2.5em;font-size:clamp(1.5rem,1.15rem + 1.3vw,2.125rem);line-height:1.15;letter-spacing:-.02em;scroll-margin-top:calc(64px + 1rem)}
.prose h3{margin-top:2em;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
.prose h2 + *,.prose h3 + *{margin-top:.65em}
.prose strong{font-weight:600}
.prose em{font-style:normal}                      /* aucune italique livrée (woff2) : pas d'oblique de synthèse */
.prose a:not(.crosslink){color:var(--color-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.prose ul{list-style:disc;padding-left:1.3em}
.prose ol{list-style:decimal;padding-left:1.5em}
.prose li{padding-left:.15em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--color-dark)}
.prose blockquote{padding:1rem 1.25rem;background:var(--color-bg);border-left:3px solid var(--color-dark);border-radius:0 var(--radius-md) var(--radius-md) 0}
.prose blockquote > * + *{margin-top:.8em}
.prose figure{margin-inline:0}
.prose figure img{width:100%;height:auto;border-radius:var(--radius-lg);background:var(--color-hair)}
.prose .faq{margin-top:1rem}
.prose .faq details > div > p + p{margin-top:.6em}
@media (min-width:768px){.prose h2{scroll-margin-top:calc(80px + 1rem)}}
/* Tableau : div.table-scroll[data-scroll-x][role=region][tabindex=0][aria-label=titre qui le précède].
   15 px sous 768 px ; dès 4 colonnes, largeur mini 42rem, défilement dans le cadre (jamais la page),
   première colonne collante ; ombre à droite tant qu'il reste des colonnes à voir. */
.table-scroll{margin-top:1.5em;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--color-hair);border-radius:var(--radius-lg);
  background:linear-gradient(270deg,var(--color-white) 40%,rgba(255,255,255,0)) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,rgba(26,26,26,.2),transparent) right / .9rem 100% no-repeat scroll,var(--color-white)}
.table-scroll table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.45}
.table-scroll table:has(tr > :nth-child(4)){min-width:42rem}
.table-scroll th,.table-scroll td{padding:.65rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-hair)}
.table-scroll tr:last-child > *{border-bottom:0}
.table-scroll th{background:var(--color-bg);font-family:var(--font-display);font-weight:600;font-size:.875rem;line-height:1.3}
.table-scroll tr > :first-child{font-family:var(--font-display);font-weight:600}
.table-scroll td strong{font-weight:600}
.table-scroll table:has(tr > :nth-child(4)) tr > :first-child{position:sticky;left:0;z-index:1;width:9.5rem;min-width:9.5rem;
  background:var(--color-white);border-right:1px solid var(--color-hair)}
.table-scroll table:has(tr > :nth-child(4)) th:first-child{background:var(--color-bg)}
@media (min-width:768px){.table-scroll table{font-size:1rem}.table-scroll th{font-size:.9375rem}}
/* Encart d'offre au milieu du texte (a.crosslink, sans prix), avant le H2 le plus proche de 40 % */
.prose > .post__mid{margin-top:2.25rem}
.prose > .post__mid + h2{margin-top:2.25rem}
@media (min-width:1024px){
  .post{padding-top:1.5rem}
  .post__grid{grid-template-columns:minmax(0,40rem) 17rem;column-gap:clamp(3rem,.5rem + 5vw,6rem);grid-template-rows:auto auto 1fr}
  .post__hd,.post__hero,.prose{grid-column:1}
  /* Rail : du fil d'Ariane à la fin du texte ; le sommaire y colle, ouvert, sans son bouton */
  .toc{grid-column:2;grid-row:1 / 4;align-self:start;position:sticky;top:calc(var(--hd-top,0px) + 1.5rem);margin-top:.75rem;max-height:calc(100vh - 3rem);overflow:auto;
    background:transparent;border:0;border-left:2px solid var(--color-dark);border-radius:0}
  .toc > summary{pointer-events:none;min-height:0;padding:.15rem 0 .5rem 1.1rem;font-family:var(--font-body);font-weight:500;font-size:.8125rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
  .toc > summary .ico{display:none}
  .toc ol{padding:0 0 0 1.1rem}
  .toc li{border-top:0}
  .toc a{min-height:0;padding-block:.4rem;font-size:.9375rem}
}

/* c. Offre de fin d'article et guides liés ------------------------------------------------------
   section.sec.sec--pale.post-offer > .wrap > div.post-offer__card (carte blanche en relief) :
   .post-offer__txt (kicker, H2 avec .hl, chapeau, lien vers la page de l'offre) +
   .post-offer__deal (.terms AVANT le prix, prix ou ul.prices, ul.perks--4 pour le box, .cta-pair
   avec l'appel premier dans le DOM, lien texte « Demander cet atelier » pour les garages). */
.post-offer__card{display:grid;gap:1.75rem;padding:var(--card-pad);background:var(--color-white);border:1px solid rgba(26,26,26,.07);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
.post-offer__lead{margin-top:.9rem;font-size:var(--fs-lead);line-height:1.5;color:var(--color-ink-2);max-width:40ch}
.post-offer__more{margin-top:1rem;color:var(--color-ink-2);max-width:44ch}
.post-offer__more a{color:var(--color-dark);font-weight:500;text-underline-offset:.2em;text-decoration-thickness:1px}
.post-offer .terms{margin-bottom:1.25rem}
.post-offer__price{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,2.2rem + 4vw,5rem);line-height:.9;letter-spacing:-.055em}
.post-offer__price small{margin-left:.45rem;font-family:var(--font-body);font-weight:400;font-size:var(--fs-meta);letter-spacing:0;color:var(--color-gray)}
.post-offer .perks{margin-top:1.25rem}
.post-offer .cta-pair{margin-top:1.25rem}
.post-offer__alt{margin-top:.35rem}
.perks--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}
@media (min-width:600px){.perks--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){
  .post-offer__card{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.5rem;padding:clamp(2rem,1rem + 2vw,3rem)}
  .post-offer__txt{align-self:center}
}
/* Guides liés : trois cartes .guide, puis les suivants en liste simple */
.more-guides{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--color-hair)}
.more-guides h3{font-size:var(--fs-h3);line-height:1.25}
.more-guides ul{display:grid;gap:0 2rem;margin-top:.4rem}
.more-guides a{display:flex;align-items:center;min-height:44px;padding-block:.35rem;font-weight:500;line-height:1.4;color:var(--color-dark);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(26,26,26,.35)}
@media (hover:hover){.more-guides a:hover{text-decoration-color:currentColor}}
@media (min-width:768px){.more-guides ul{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* 29. En-tête qui revient en remontant (2026-09-29) ------------------------------------------
   Collant en haut de l'écran. site.js le cache (.is-hidden, glissé vers le haut) dès que le lecteur
   descend sous l'en-tête, et le fait revenir seulement après une vraie remontée (≈ 120 px), pour ne
   pas clignoter au moindre mouvement. Il reste affiché près du haut de page et quand le menu mobile
   est ouvert. Tant qu'il est affiché plus bas dans la page, site.js pose --hd-top (sa hauteur) sur
   <html> : les éléments collants (index de la FAQ, sommaire des articles, colonnes collantes) se
   placent dessous. Sans JS : en-tête collant, toujours visible. */
.site-hd{position:sticky;top:0;z-index:50;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.site-hd.is-hidden{transform:translateY(-100%)}
.site-hd.is-floating{box-shadow:0 10px 24px -18px rgba(26,26,26,.45)}
.fq-index,.toc,.ct__intro,.ab-site__txt{transition:top .35s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.site-hd,.fq-index,.toc,.ct__intro,.ab-site__txt{transition:none}}


/* ==========================================================================
   Passe 9 · 404 et résultats de recherche (2026-10-04)
   Section ajoutée d'un seul bloc ; elle complète .hero, .crosslink et .guides sans les
   redéfinir. Pages : 404/, recherche/. Aucun aplat jaune sur ces pages.
   a. .hero--plain : héros sans photo (marge basse), comme celui de /blog/
   b. form.find : le champ de recherche (GET /?s=), libellé au-dessus, bouton contour
   c. .crosslink__price : le prix dans une carte de renvoi (130 € ; dès 200 € + charges)
   d. .guides--rows : les cartes .guide en lignes, à toutes les largeurs (résultats)
   e. .help-card : carte blanche « le gérant répond » (appel + e-mail), hors aplat jaune
   f. .alt-offer--duo : le renvoi .alt-offer avec ses deux cartes côte à côte dès 768 px
   ========================================================================== */

/* a. Héros sans photo */
.hero--plain .hero__in{padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}

/* b. Champ de recherche. 16 px dans le champ (pas de zoom iOS) ; filet #595959 (7:1 sur blanc) ;
   le bouton n'ouvre pas de contact : contour noir, jamais jaune. Loupe en SVG en ligne. */
.find{margin-top:1.25rem;max-width:34rem}
.find__label{display:block;margin-bottom:.45rem;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.3}
.find__row{display:flex;gap:.5rem}
.find__input{flex:1;min-width:0;min-height:52px;padding:.7rem .85rem;border:1px solid var(--color-gray);border-radius:var(--radius-md);
  background:var(--color-white);font:inherit;font-size:1rem;line-height:1.3;color:var(--color-dark);box-shadow:inset 0 1px 2px rgba(26,26,26,.06)}
.find__input::placeholder{color:var(--color-gray);opacity:1}
.find__input:focus{border-color:var(--color-dark)}
.find__input:focus-visible{outline:3px solid var(--color-dark);outline-offset:2px;border-radius:var(--radius-md)}
.find__btn{flex:none;padding-inline:1.05rem;background:var(--color-white);cursor:pointer}
@media (hover:hover){.find__input:hover{border-color:var(--color-dark)}.find__btn:hover{background:var(--color-bg)}}
@media (min-width:1024px){.hero__side > .find:first-child{margin-top:1.6rem}}

/* c. Prix dans une carte de renvoi */
.crosslink .crosslink__price{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--color-dark)}
.crosslink__price small{font-family:var(--font-body);font-weight:400;font-size:var(--fs-meta);color:var(--color-ink-2)}

/* d. Résultats en lignes : vignette à gauche, texte à droite, filet entre deux lignes */
.guides--rows{gap:0;border-top:1px solid var(--color-hair)}
.guides--rows > li{border-bottom:1px solid var(--color-hair)}
.guides--rows .guide{grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding-block:1.1rem}
.guides--rows .guide__ph{aspect-ratio:4/3;border-radius:var(--radius-md)}
.guides--rows .guide__ph .plan__mini{width:62%}
.guide .guide__type{margin:0 0 .2rem;font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-2)}
@media (min-width:768px){
  .guides--rows{grid-template-columns:minmax(0,1fr);gap:0}
  .guides--rows .guide{grid-template-columns:12rem minmax(0,1fr);gap:1.5rem;align-items:center;padding-block:1.4rem}
  .guides--rows .guide > div{position:static;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
}

/* e. Carte « le gérant répond » : appel jaune (.btn--contact) + e-mail, sur fond blanc cassé */
.help-card{display:grid;gap:1.1rem;align-content:start;padding:var(--card-pad);background:var(--color-white);border:1px solid rgba(26,26,26,.07);
  border-top:4px solid var(--color-dark);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
.help-card .h2{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem)}
.help-card p:not(.kicker){color:var(--color-ink-2);max-width:40ch}
.help-card__act{display:grid;gap:.5rem;justify-items:start}
.help-card__act .btn{width:100%}
@media (min-width:600px){.help-card__act .btn{width:auto}}

.help-card .h2 + p{margin-top:.6rem}
@media (min-width:600px){.help-card__act .btn{white-space:nowrap}}

/* f. .alt-offer--duo : titre au-dessus, les deux cartes côte à côte dès 768 px (404, recherche vide) */
@media (min-width:768px){
  .alt-offer--duo{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .alt-offer--duo .alt-offer__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
}

/* ==========================================================================
   Pages légales : /mentions-legales/, /politique-confidentialite/ (passe 9, 2026-10-04)
   Section ajoutée d'un seul bloc, préfixe .legal-. Elle ne redéfinit aucun composant : les deux
   pages reprennent le gabarit d'article (§28 b) : article.post.legal-doc > div.wrap.post__grid >
   header.post__hd (fil, kicker, H1[data-callbar-watch] avec .hl, p.post__meta « Mis à jour le »,
   p.post__lead) + details.toc + div.prose. Ni photo, ni aplat jaune, ni bandeau de contact.
   - details.toc porte « open » dans le HTML : sur un téléphone, le sommaire est la porte d'entrée
     (on vient chercher une rubrique : hébergeur, cookies, droits). Dès 1 024 px, rail collant (§28 b).
   - Les H2 du texte portent le même numéro que le sommaire (01, 02…), pour s'y retrouver.
   - dl.legal-id > div > dt + dd : fiche d'identité (éditeur, hébergeur, responsable du traitement).
     dt au-dessus du dd sous 768 px ; deux colonnes dès 768 px.
   - span.tbc dans le texte : bordure pointillée qui suit les retours à la ligne (une outline sur un
     élément en ligne se dessine mal). Le libellé est entre crochets, lisible même sans CSS.
   - p.legal-end : le lien de fin vers /contact/, après un filet.
   ========================================================================== */
.legal-doc{padding-bottom:clamp(3rem,2rem + 4vw,5rem)}
.legal-doc .prose{counter-reset:legal}
.legal-doc .prose h2{counter-increment:legal}
.legal-doc .prose h2::before{content:counter(legal,decimal-leading-zero);display:block;margin-bottom:.4rem;
  font-size:.875rem;font-weight:700;letter-spacing:.04em;color:var(--color-gray)}   /* 7:1 sur blanc */
.legal-doc .prose > h2:first-child{margin-top:0}
.legal-id{display:grid;margin-top:1.25em;border:1px solid var(--color-hair);border-radius:var(--radius-lg);
  background:var(--color-white);box-shadow:var(--shadow-card)}
.legal-id > div{padding:.75rem 1rem;border-top:1px solid var(--color-hair)}
.legal-id > div:first-child{border-top:0}
.legal-id dt{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.4;color:var(--color-ink-2)}
.legal-id dd{margin:.15rem 0 0;line-height:1.5;overflow-wrap:anywhere}
@media (min-width:768px){
  .legal-id > div{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.25rem;align-items:baseline}
  .legal-id dd{margin:0}
}
.legal-doc span.tbc{outline:0;padding:0 .3rem;border:1.5px dashed var(--color-gray);border-radius:var(--radius-sm);
  background:var(--color-bg);color:var(--color-ink-2);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.legal-doc span.tbc .tbc__tag{margin-left:.4rem}
.legal-doc .table-scroll td{overflow-wrap:break-word}
.legal-end{display:flex;flex-wrap:wrap;align-items:center;gap:0 .75rem;margin-top:2.5rem !important;padding-top:1.25rem;
  border-top:1px solid var(--color-hair)}


/* ==========================================================================
   Passe 9 · Pages villes (2026-10-04) : gabarit template-seo-local.php
   Section ajoutée d'un seul bloc, préfixe .ville-. Elle ne redéfinit aucun composant : elle complète
   .hero, .prose, .table-scroll, .zone / .map, .offers, .be, .guides et .contact-band.
   Pages : garde-meuble-beauraing/, garage-mecanique-ardennes/ (au portage : les huit pages villes).
   a. ul.ville-trust : les trois garanties de la section 1b, en pastilles sous la note du héros
   b. .ville-article : main_content (div.prose.ville-prose), la photo (content_image) et la fiche
      « Information » (geo_paragraph). Une colonne sous 1 024 px : texte, photo, fiche. Dès 1 024 px :
      texte (42rem) à gauche ; photo puis fiche collante à droite. ul.ville-km = liste de distances.
   c. .ville-route : l'itinéraire dans la carte de la home ; .ville-town surligne la ville de la page
   d. .ville-offers : les deux cartes .offer (box, garages) ; span.ville-des = « dès » sur le prix
   e. .ville-voir (cartes .be à titres longs), .ville-guides (deux guides), .ville-adresse (bandeau final)
   Un seul aplat jaune par page : le bandeau final. Le bloc des espaces est sur .sec--pale.
   ========================================================================== */

/* a. Garanties du héros : pictogramme noir sur disque jaune (10,7:1), libellé 16 px */
.ville-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.ville-trust li{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.3rem .85rem .3rem .35rem;border-radius:999px;
  background:var(--color-white);border:1px solid var(--color-hair);box-shadow:0 1px 2px rgba(26,26,26,.05);
  font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.25;color:var(--color-dark)}
.ville-trust span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-primary);
  box-shadow:inset 0 -2px 0 rgba(26,26,26,.1)}
.ville-trust .ico{width:16px;height:16px}
/* Sous 768 px : sans pastille, deux par ligne si la place le permet (le héros reste court) */
@media (max-width:767.98px){
  .ville-trust{gap:.35rem 1.1rem}
  .ville-trust li{min-height:32px;padding:0;border:0;background:none;box-shadow:none}
}

/* b. Texte principal, photo, fiche « Information » */
.ville-article__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.ville-prose{padding-top:0;max-width:42rem}
.ville-prose > h2:first-child{margin-top:0}
.ville-prose h2::after{content:'';display:block;width:2.75rem;height:4px;margin-top:.6rem;border-radius:2px;background:var(--color-primary)}
.ville-prose p{color:var(--color-ink-2)}
.ville-prose strong{color:var(--color-dark)}
.ville-prose h3{display:flex;align-items:baseline;gap:.6rem}
.ville-prose h3::before{content:'';flex:none;width:.7rem;height:.7rem;border-radius:2px;background:var(--color-primary);
  box-shadow:inset 0 0 0 1.5px var(--color-dark)}
/* Listes du texte : coche noire sur disque jaune (au lieu de la puce) */
.ville-prose ul{list-style:none;padding-left:0}
.ville-prose ul > li{position:relative;padding-left:2.1rem}
.ville-prose ul > li::before{content:'';position:absolute;left:0;top:.18em;width:1.375rem;height:1.375rem;border-radius:50%;
  background:var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat}
/* Liste des distances (ul.ville-km) : lignes à filet, épingle à la place de la coche, deux colonnes dès 600 px */
.ville-prose .ville-km{border-top:1px solid var(--color-dark)}
.ville-prose .ville-km > li{margin:0;padding:.65rem 0 .65rem 2.1rem;border-bottom:1px solid var(--color-hair)}
.ville-prose .ville-km > li::before{top:.8rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size:.85rem}
@media (min-width:600px){.ville-prose .ville-km{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}}
.ville-article__pic{margin:0}
.ville-article__pic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);background:var(--color-hair);box-shadow:var(--shadow-card)}
.ville-fiche{padding:var(--card-pad);border-radius:var(--radius-xl);background:var(--color-primary-light);box-shadow:inset 0 0 0 1px rgba(217,173,0,.28)}
.ville-fiche p:not(.kicker){margin-top:.75rem;font-size:var(--fs-body);line-height:1.6;color:var(--color-ink-2)}
@media (min-width:768px){.ville-article__pic,.ville-fiche{max-width:42rem}}
@media (min-width:1024px){
  .ville-article__grid{grid-template-columns:minmax(0,42rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(3rem,.5rem + 5vw,6rem);
    row-gap:1.5rem;align-items:start}
  .ville-prose{grid-column:1;grid-row:1 / span 2}
  .ville-article__pic{grid-column:2;grid-row:1}
  .ville-fiche{grid-column:2;grid-row:2;position:sticky;top:calc(var(--hd-top,0px) + 1.5rem);transition:top .35s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){.ville-fiche{transition:none}}

/* c. Itinéraire : le texte dans la carte blanche de .zone ; la ville de la page en jaune sur la carte */
.ville-route__txt{font-size:var(--fs-body);line-height:1.65;color:var(--color-ink-2)}
.map__town.ville-town{background:var(--color-primary);box-shadow:0 0 0 1.5px var(--color-dark),0 2px 6px rgba(26,26,26,.3)}

/* d. Les deux cartes d'offre : « dès » au-dessus du chiffre, dans la pastille */
.ville-des{display:block;margin-bottom:.25rem;font-family:var(--font-body);font-weight:500;font-size:var(--fs-meta);letter-spacing:0;line-height:1.2;
  color:var(--color-ink-2)}
.ville-lead{max-width:52ch}

/* e. Voir aussi : titres longs (H1 des pages voisines), toujours en pleine largeur ; deux guides ; adresse */
@media (min-width:1024px){
  .be.ville-voir{grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "cities" "more"}
  .ville-voir .cities{--n:3}
}
@media (min-width:768px){.ville-guides .guides:not(:has(> li:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr));max-width:52rem}}
.ville-adresse{display:flex;align-items:flex-start;gap:.5rem;margin-top:1rem;font-weight:500;line-height:1.45;color:var(--color-dark)}
.ville-adresse .ico{margin-top:.1em}


/* ================================================================== PLANS ANIMÉS
   {{plan-anime:KEY}} (build.py) : le plan se remplit quand il entre à l'écran (anim.js, en fin
   de site.js). Source des dessins : tests/refonte/plans-animes/ (scenes/, engine.mjs, build.mjs).
   Même largeur que le plan statique (--k x --w) ; seul le box de /garde-meuble/ prend la carte,
   chargé il serait illisible à cette taille. Sans JS ou avec prefers-reduced-motion : plan complet. */
.pa{display:block;width:calc(var(--k) * var(--w) * 1px);max-width:100%}
.sizer__plan .plan:has(.pa){align-self:stretch}
.sizer__plan .pa{width:100%;max-width:440px;margin-inline:auto}
.pa-svg{display:block;width:100%;height:auto;overflow:visible}
.pa-floor{fill:var(--color-gray-light)}
.pa-mesh{fill:none;stroke:var(--color-gray);stroke-opacity:.4;stroke-width:.8px;vector-effect:non-scaling-stroke}
.pa-wa{fill:#EFEBE3}.pa-wb{fill:#DFDAD1}.pa-brick{fill:#F4F2EE}
.pa-rib{fill:none;stroke:#C4BFB4;stroke-width:1px;vector-effect:non-scaling-stroke}
.pa-course{fill:none;stroke:#D6D1C7;stroke-width:.8px;vector-effect:non-scaling-stroke}
.pa-e{fill:none;stroke:var(--color-dark);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pa-e--in{stroke:var(--color-gray);stroke-width:1.2px}
.pa-e--near{stroke-width:1.4px;stroke-opacity:.85}
.pa-o{fill:none;stroke:var(--color-dark);stroke-width:1.2px;stroke-opacity:.85;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pa-d{fill:none;stroke:var(--color-dark);stroke-width:.9px;stroke-opacity:.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pa-s{stroke:var(--color-dark);stroke-width:.9px;stroke-opacity:.75;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pa-tape{fill:none;stroke:#8F7350;stroke-width:1.6px;stroke-opacity:.55;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pa-c{fill:none;stroke:var(--color-dark);stroke-width:1px;vector-effect:non-scaling-stroke}
.pa-ct{fill:var(--color-dark);font-family:var(--font-display);font-weight:600}
.pa-flash{fill:var(--color-primary);opacity:0}
.pa-panel-face{fill:#E7E3DC;stroke:var(--color-dark);stroke-width:1.2px;vector-effect:non-scaling-stroke}
.pa-slat{fill:none;stroke:#B9B3A8;stroke-width:1px;vector-effect:non-scaling-stroke}
.pa-doorframe{fill:none;stroke:var(--color-dark);stroke-width:2.6px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pa-cable{fill:none;stroke:var(--color-dark);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}