/* ==========================================================================
   E-NETT — Design system commun (main.css)
   Direction : « éditorial suisse » (maquette A) — papier chaud, encre marine,
   grotesque en grand corps, grille de 12 colonnes visible, filets fins,
   angles droits, aucune ombre, aucune pastille.

   Documentation et extraits HTML : docs/design-system.md
   Règle : ne jamais modifier ce fichier depuis une page. Le CSS propre à
   une page va dans src/assets/css/pages/<page>.css (front-matter « css: »).

   Sommaire
     1. Tokens (couleurs, typographie, espacements, grille)
     2. Thèmes (papier / marine)
     3. Base et reset
     4. Typographie
     5. Mise en page (container, grille, sections, en-têtes de section)
     6. En-tête, navigation, sous-menu, menu mobile
     7. Pied de page, barre mobile
     8. Composants (boutons, liens, tags, figures, listes, tables, FAQ,
        formulaires, estimation, CTA, carte, portrait, fil d'Ariane…)
     9. Utilitaires
    10. Mouvement, impression

   Points de rupture (à reprendre tels quels dans les CSS de page) :
     600 px  téléphones          (max-width: 600px)
     860 px  une colonne, barre mobile, en-tête 64 px   (max-width: 860px)
    1100 px  tablette paysage    (max-width: 1100px)
    1240 px  navigation complète (min-width: 1240px), menu plein écran en dessous
   ========================================================================== */

/* Police de repli ajustée (limite le décalage de mise en page au chargement) */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 400 500;
  size-adjust: 104.5%;
  ascent-override: 93.5%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 600 800;
  size-adjust: 100.4%;
  ascent-override: 97.2%;
  descent-override: 25.7%;
  line-gap-override: 0%;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Couleurs primitives */
  --paper: #F3EFE7;          /* fond principal (papier chaud) */
  --paper-2: #E8E2D5;        /* fond de cadres photo, portrait */
  --paper-3: #FAF8F3;        /* surfaces claires : champs, carte, estimateur */
  --ink: #082D4D;            /* encre marine : texte, fonds sombres */
  --ink-deep: #041D33;       /* survol des boutons marine */
  --ink-2: #34495C;          /* texte secondaire (8:1 sur papier) */
  --ink-3: #53657A;          /* texte tertiaire, numéros (5,2:1 sur papier) */
  --green: #1A9A4B;          /* accent décoratif (carrés, points) — jamais pour du texte courant */
  --green-ink: #137A3B;      /* vert lisible sur papier (4,7:1) */
  --green-light: #5BC98A;    /* vert lisible sur marine (6,8:1) */
  --blue: #0A6FB8;           /* focus sur fond clair (4,6:1), rivière de la carte */
  --rule: rgba(8, 45, 77, .15);        /* filet décoratif */
  --rule-2: rgba(8, 45, 77, .32);      /* filet appuyé */
  --rule-field: rgba(8, 45, 77, .6);   /* bordure de champ : 3,8:1 (WCAG 1.4.11) */
  --gridline: rgba(8, 45, 77, .06);    /* grille visible de 12 colonnes */
  --on-ink: #F3EFE7;
  --on-ink-2: rgba(243, 239, 231, .78);
  --on-ink-3: rgba(243, 239, 231, .62);
  --rule-ink: rgba(243, 239, 231, .2);
  --rule-ink-2: rgba(243, 239, 231, .36);
  --rule-ink-field: rgba(243, 239, 231, .55);  /* 4,7:1 sur marine */
  --error: #B42318;          /* erreurs sur papier (5,9:1) */
  --error-on-ink: #FFB4A8;

  /* Typographie */
  --font: "Schibsted Grotesk", "Schibsted Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.5rem, .9rem + 7.2vw, 8.75rem);   /* H1 de l'accueil, CTA final */
  --fs-h1: clamp(2.375rem, 1rem + 4.4vw, 5.25rem);       /* H1 des pages intérieures */
  --fs-h2-xl: clamp(2.25rem, 1rem + 4.1vw, 5.5rem);      /* H2 temps fort (1 à 2 par page) */
  --fs-h2: clamp(2rem, 1.15rem + 2.7vw, 3.75rem);        /* H2 courant */
  --fs-h2-sm: clamp(1.75rem, 1.1rem + 1.8vw, 2.875rem);  /* H2 discret */
  --fs-h3: clamp(1.375rem, 1rem + 1.05vw, 2.125rem);
  --fs-h4: clamp(1.1875rem, 1rem + .5vw, 1.5rem);
  --fs-lede: clamp(1.1875rem, 1rem + .55vw, 1.5rem);     /* chapô */
  --fs-body: 1.0625rem;      /* 17 px */
  --fs-sm: .9375rem;         /* 15 px */
  --fs-xs: .8125rem;         /* 13 px */
  --fs-2xs: .75rem;          /* 12 px — plus petit corps autorisé */
  --lh-tight: .92;
  --lh-title: 1.08;
  --lh-body: 1.55;
  --track-display: -.05em;
  --track-title: -.035em;
  --track-caps: .07em;

  /* Espacements */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: clamp(80px, 9vw, 160px);      /* espace entre sections */
  --section-y-sm: clamp(56px, 6vw, 96px);
  --head-gap: clamp(36px, 5.5vw, 88px);      /* sous un en-tête de section */

  /* Grille */
  --maxw: 1440px;
  --gutter: clamp(16px, 3.6vw, 56px);        /* marge latérale : 16 px sur mobile */
  --gap: clamp(14px, 1.8vw, 28px);           /* gouttière entre colonnes */
  --header-h: 76px;
  --mobile-bar-h: 72px;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .3s;
}

/* ==========================================================================
   2. Thèmes — les composants n'utilisent que ces variables sémantiques,
      ils s'adaptent donc seuls sur fond marine (.theme-ink / .section--ink).
   ========================================================================== */
:root,
.theme-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--rule);
  --line-2: var(--rule-2);
  --line-strong: var(--ink);
  --field-bg: var(--paper-3);
  --field-line: var(--rule-field);
  --surface: var(--paper-3);
  --accent: var(--green);
  --accent-text: var(--green-ink);
  --focus: var(--blue);
  --danger: var(--error);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bg-hover: var(--ink-deep);
  --btn-line: var(--ink);
}
.theme-ink,
.section--ink,
.site-footer {
  --bg: var(--ink);
  --fg: var(--on-ink);
  --fg-2: var(--on-ink-2);
  --fg-3: var(--on-ink-3);
  --line: var(--rule-ink);
  --line-2: var(--rule-ink-2);
  --line-strong: var(--on-ink);
  --field-bg: rgba(243, 239, 231, .06);
  --field-line: var(--rule-ink-field);
  --surface: rgba(243, 239, 231, .05);
  --accent: var(--green);
  --accent-text: var(--green-light);
  --focus: var(--paper);
  --danger: var(--error-on-ink);
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bg-hover: #fff;
  --btn-line: var(--rule-ink-field);
  background-color: var(--bg);
  color: var(--fg);
}
.theme-ink ::selection,
.section--ink ::selection,
.site-footer ::selection { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   3. Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.menu-open,
body.menu-open { overflow: hidden; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; }
:where(ul[class], ol[class], nav ul, nav ol) { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
address { font-style: normal; }
[hidden] { display: none !important; }
abbr[title] { text-decoration: none; }
b, strong { font-weight: 600; }

::selection { background: var(--ink); color: var(--paper); }

/* Focus : toujours visible, 2 px décalé, couleur du thème */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus-visible { outline-offset: 6px; }

/* Grille visible (12 colonnes) — décor du gabarit, masqué sous 861 px */
.gridlines { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gridlines .container,
.gridlines .grid { height: 100%; }
.gridlines .grid > span { grid-column: auto; border-left: 1px solid var(--gridline); }
.gridlines span:last-child { border-right: 1px solid var(--gridline); }
main, .site-footer, .cta-band { position: relative; z-index: 1; }
main:focus { outline: none; }

/* Lien d'évitement */
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Pictogrammes SVG au trait (sprite : src/partials/icons.html) */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* ==========================================================================
   4. Typographie
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--fg);
}
h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--track-title); }
h3 { font-size: var(--fs-h4); }
h4 { font-size: var(--fs-body); letter-spacing: -.01em; }

/* Classes de taille .t-display, .t-h1… : voir « Utilitaires » (elles priment sur les composants) */

/* Surtitre (eyebrow) : petites capitales espacées, carré vert */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--accent); }
.eyebrow--plain::before { display: none; }

/* Chapô */
.lede { font-size: var(--fs-lede); line-height: 1.42; letter-spacing: -.005em; max-width: 36ch; text-wrap: pretty; }
.lede--muted { color: var(--fg-2); }

/* Point final vert (ponctuation d'un temps fort) */
.accent-dot { color: var(--accent); }

.text-2 { color: var(--fg-2); }
.text-3 { color: var(--fg-3); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.caps { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.measure { max-width: 62ch; }

/* Texte long (pages légales, articles) */
.prose { max-width: 70ch; color: var(--fg); }
.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-h2-sm);
  line-height: 1.05;
}
.prose h3 { margin-top: 2em; font-size: var(--fs-h4); }
.prose h4 { margin-top: 1.6em; font-size: var(--fs-body); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; background: var(--fg); }
.prose ol > li { padding-left: 4px; }
.prose ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.prose li + li { margin-top: .45em; }
.prose a { font-weight: 500; text-decoration: underline; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose small, .prose .fine-print { font-size: var(--fs-xs); color: var(--fg-2); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose blockquote, .prose .note { padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--fg-2); }
.prose table { width: 100%; font-size: var(--fs-sm); }
.prose .table-wrap { margin-block: 1.6em; }
.prose dl > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.prose dt { font-weight: 600; }
.prose dd { color: var(--fg-2); }
.prose address { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); }

/* ==========================================================================
   5. Mise en page
   ========================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(920px + 2 * var(--gutter)); }

/* Grille de 12 colonnes (une seule colonne sous 861 px) */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 861px) {
  .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
  .start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
  /* Motif éditorial récurrent : colonne d'index (1–3) + contenu (4–12) */
  .g-aside { grid-column: 1 / 4; }
  .g-main { grid-column: 4 / 13; }
  .g-text { grid-column: 4 / 11; }
  .g-wide { grid-column: 1 / 13; }
}

/* Sections */
.section { padding-top: var(--section-y); }
.section--tight { padding-top: var(--section-y-sm); }
.section--ink,
.section--paper { margin-top: var(--section-y); padding-block: var(--section-y); }
.section--paper { background: var(--paper-3); }
.section--flush { margin-top: 0; }
/* Attention : une .grid enfant direct du .container qui suit un autre bloc perd sa marge haute (l'espacement
   vient de l'en-tête de section). Les utilitaires .mt-s/m/l/xl ne suffisent pas (spécificité inférieure) :
   pour espacer une grille placée après un paragraphe ou une autre grille, écrire dans le CSS de page une règle
   de spécificité égale, ex. .section > .container > .ma-grille { margin-top: var(--s-7); }. Voir design-system.md §5. */
.section > .container > * + .grid,
.section > .container > .sec-head + * { margin-top: 0; }
main > :last-child:not(.section--ink):not(.section--paper) { padding-bottom: var(--section-y); }

/* En-tête de section numéroté : filet, index « 01 Prestations », titre, intro */
.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-top: 18px; margin-bottom: var(--head-gap);
  border-top: 1px solid var(--line-strong);
}
.sec-head > * { grid-column: 1 / -1; }
.sec-index {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--fg);
}
.sec-index::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--accent); }
.sec-index .n { font-variant-numeric: tabular-nums; color: var(--fg-3); }
.sec-head__title { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--track-title); }
.sec-head__intro { margin-top: clamp(18px, 2.2vw, 30px); font-size: var(--fs-lede); line-height: 1.42; color: var(--fg-2); max-width: 44ch; text-wrap: pretty; }
.sec-head--xl .sec-head__title { font-size: var(--fs-h2-xl); line-height: .96; letter-spacing: -.04em; }
.sec-head--sm .sec-head__title { font-size: var(--fs-h2-sm); line-height: 1.04; letter-spacing: -.03em; }
.sec-head--sm { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head--flush { border-top: 0; padding-top: 0; }
@media (min-width: 861px) {
  .sec-head .sec-index { grid-column: 1 / 4; align-self: start; padding-top: .35em; }
  .sec-head .sec-head__title { grid-column: 4 / 13; }
  .sec-head .sec-head__intro { grid-column: 4 / 11; }
  .sec-head--xl .sec-index { padding-top: 1.1em; }
  .sec-head--stack .sec-index,
  .sec-head--stack .sec-head__title,
  .sec-head--stack .sec-head__intro { grid-column: 1 / -1; }
  .sec-head--stack .sec-head__title { margin-top: 20px; }
}
@media (max-width: 860px) {
  .sec-head .sec-index { margin-bottom: 18px; }
}

/* ==========================================================================
   6. En-tête et navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur);
}
.site-header.is-scrolled,
body.menu-open .site-header { border-bottom-color: var(--rule); }
.site-header__inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--header-h); }

/* Logo (partial logo.html) : pictogramme + mot + descripteur, couleur héritée */
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex: none; color: var(--fg); text-decoration: none; }
.brand__mark { width: 25px; height: 30px; flex: none; }
.brand__mark-1 { fill: var(--mark-1, #0A6FB8); }
.brand__mark-2 { fill: var(--mark-2, #1A9A4B); }
.brand__mark-3 { stroke: var(--mark-3, #fff); }
.brand__logo { display: block; width: auto; height: 34px; flex: none; }
.brand__text { display: block; }
.brand__name { display: block; font-size: 1.3125rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.brand__sub { display: block; margin-top: 5px; font-size: var(--fs-2xs); font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }

/* Navigation principale (≥ 1240 px) */
.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.site-nav__link:hover,
.site-nav__link[aria-current] { background-size: 100% 1px; }
.site-nav__link[aria-current="page"] { font-weight: 600; }
.site-nav__toggle {
  display: inline-grid; place-items: center; width: 44px; min-height: 44px; margin: 0 -10px 0 -6px; padding: 0;
  background: none; border: 0; color: inherit;
}
.site-nav__toggle .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Sous-menu Prestations */
.subnav {
  position: absolute; top: 100%; left: -24px; z-index: 60;
  width: min(560px, 80vw);
  padding: 14px 24px 22px;
  background: var(--paper-3);
  border: 1px solid var(--ink);
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.subnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; } /* pont de survol */
.subnav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .has-sub:hover > .subnav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
.subnav__list { border-top: 1px solid var(--rule); }
.subnav__list a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px;
  min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
}
.subnav__n { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.subnav__d { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.subnav__list a:hover .subnav__t,
.subnav__list a[aria-current] .subnav__t { text-decoration: underline; text-underline-offset: .25em; }
.subnav__all { margin-top: 12px; }

/* Actions de l'en-tête */
.site-header__actions { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); margin-left: auto; }
.header-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 1px solid var(--rule-2);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.header-tel:hover { border-color: var(--ink); }
.header-tel .icon { width: 18px; height: 18px; }
.header-tel__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  background: none; border: 1px solid var(--rule-2); color: var(--fg);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open,
.menu-toggle .i-close,
.menu-toggle[aria-expanded="true"] .i-menu { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close,
.menu-toggle[aria-expanded="true"] .i-close { display: inline; }
/* Sans JavaScript : le bouton devient un lien vers la navigation du pied de page */
.menu-toggle--nojs { display: none; }
html:not(.js) .menu-toggle[data-menu-toggle] { display: none; }
html:not(.js) .menu-toggle--nojs { display: inline-flex; }

@media (min-width: 1240px) {
  .site-nav { display: block; margin-left: clamp(8px, 4vw, 72px); }
  .menu-toggle, .menu-toggle--nojs, html:not(.js) .menu-toggle--nojs, .menu { display: none !important; }
}
@media (min-width: 1320px) {
  .header-tel { padding: 0; border: 0; }
  .header-tel__num { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Menu plein écran (< 1240 px) */
.menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  display: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-top: 1px solid var(--rule);
}
.menu.is-open { display: block; animation: menu-in .28s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.menu__inner { display: flex; flex-direction: column; min-height: 100%; padding-top: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.menu__list > li { border-bottom: 1px solid var(--rule); }
.menu__list > li > a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
  font-size: clamp(1.625rem, 6.4vw, 2.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em;
  text-decoration: none;
}
.menu__list > li > a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.menu__n { width: 28px; flex: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.menu__sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); column-gap: var(--gap); padding: 0 0 14px 44px; margin-top: -4px; }
.menu__sub a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 500; text-decoration: none; }
.menu__sub a:hover { text-decoration: underline; }
.menu__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 32px; }
.menu__foot p { margin-top: 6px; font-size: var(--fs-xs); color: var(--fg-2); }

/* ==========================================================================
   7. Pied de page et barre mobile
   ========================================================================== */
.site-footer { padding-top: clamp(56px, 6vw, 96px); padding-bottom: 32px; }
.site-footer__grid { row-gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.site-footer .brand { color: var(--fg); }
.site-footer__about { margin-top: 20px; font-size: var(--fs-sm); color: var(--fg-2); max-width: 34ch; }
.site-footer__contact { margin-top: 20px; font-size: var(--fs-sm); }
.site-footer__contact a { display: flex; width: fit-content; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__contact p { color: var(--fg-2); }
.footer-col__title { margin-bottom: 8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-2); }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); line-height: 1.3; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.footer-col a:hover { background-size: 100% 1px; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--fg-2);
}
.site-footer__legal p { max-width: 90ch; }
@media (min-width: 861px) {
  .site-footer__brand { grid-column: 1 / 5; }
  .footer-col { grid-column: span 3; }
  .footer-col--sm { grid-column: span 2; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .footer-col, .footer-col--sm { grid-column: span 4; }
}
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid > .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__grid > .footer-col { grid-column: auto; }
  .site-footer__grid > .footer-col--full { grid-column: 1 / -1; }
}
/* Colonnes de liens repliables (details[data-footer-fold]) : toujours ouvertes au-dessus de 640 px
   et sans JavaScript ; main.js les replie sur téléphone (la navigation complète est dans le menu). */
.footer-col__fold > summary { display: block; list-style: none; }
.footer-col__fold > summary::-webkit-details-marker { display: none; }
.footer-col__fold > summary .icon { display: none; }
@media (min-width: 641px) { .footer-col__fold > summary { pointer-events: none; } }
@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 28px; }
  .site-footer__grid > .footer-col { grid-column: 1 / -1; }
  .site-footer__brand { padding-bottom: 20px; }
  .footer-col__fold { border-bottom: 1px solid var(--line); }
  .site-footer__brand + .footer-col .footer-col__fold { border-top: 1px solid var(--line); }
  .footer-col__fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; }
  .footer-col__fold > summary .footer-col__title { margin: 0; }
  .footer-col__fold > summary .icon { display: block; width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
  .footer-col__fold[open] > summary .icon { transform: rotate(45deg); }
  .footer-col__fold > ul { padding-bottom: 12px; }
  /* Informations légales : toujours visibles, en ligne */
  .footer-col--legal { padding-top: 20px; }
  .footer-col--legal ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .site-footer__legal { margin-top: 20px; }
  /* Après le bandeau « Parlons de vos locaux », pas de second exemplaire du téléphone ni des horaires */
  body:has(main > .cta-band:last-child) .site-footer__about,
  body:has(main > .cta-band:last-child) .site-footer__tel,
  body:has(main > .cta-band:last-child) .site-footer__hours { display: none; }
  body:has(main > .cta-band:last-child) .site-footer__contact { margin-top: 8px; }
}

/* Barre d'action mobile (< 861 px) */
.mobile-bar { display: none; }
@media (max-width: 860px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule);
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  .mobile-bar .btn { min-height: 50px; justify-content: center; gap: 10px; padding: 0 12px; }
  .mobile-bar.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
  body.menu-open .mobile-bar { visibility: hidden; }
  html { scroll-padding-bottom: calc(var(--mobile-bar-h) + 12px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(32px + var(--mobile-bar-h) + env(safe-area-inset-bottom)); }
}
/* Très petits écrans (< 375 px) : « Demander un devis » tient sur une ligne */
@media (max-width: 374px) {
  .mobile-bar .btn { gap: 6px; padding: 0 10px; font-size: var(--fs-sm); white-space: nowrap; }
  .mobile-bar .btn .icon-arrow { display: none; }
}
/* Téléphone en paysage : ni barre fixe ni en-tête collant (trop de hauteur perdue) */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-bar { display: none !important; }
  .site-header { position: relative; }
  html { scroll-padding-top: 16px; scroll-padding-bottom: 16px; }
  .menu { position: fixed; inset: 0; z-index: 60; }
}

/* ==========================================================================
   8. Composants
   ========================================================================== */

/* ---- Boutons -------------------------------------------------------------- */
.btn {
  --btn-h: 52px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: var(--btn-h); padding: 0 20px;
  border: 1px solid transparent; border-radius: 0;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-align: left;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon-arrow,
.link-arrow:hover .icon-arrow { transform: translateX(4px); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn--primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--btn-line); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--sm { --btn-h: 44px; padding: 0 16px; gap: 12px; }
.btn--lg { --btn-h: 60px; padding: 0 24px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.btn--center { justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Lien fléché (texte + flèche SVG) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-top: 2px;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--fg);
  border-bottom: 1px solid currentColor;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-arrow--quiet { border-bottom-color: var(--line-2); }
.link-arrow--quiet:hover { border-bottom-color: currentColor; }

/* ---- Tags (fréquence, catégorie) ------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px;
  border: 1px solid var(--line-2);
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.tag--solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tag--accent { border-color: var(--accent); color: var(--accent-text); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Étiquette de contrainte / créneau (filet vert + texte) */
.slot-label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--fg); }
.slot-label::before { content: ""; width: 18px; height: 1px; flex: none; background: var(--accent); }

/* ---- Figures et légendes « Fig. » ---------------------------------------- */
.figure img { width: 100%; object-fit: cover; }
.figure--16x9 img { aspect-ratio: 16 / 9; }
.figure--3x2 img { aspect-ratio: 3 / 2; }
.figure--4x5 img { aspect-ratio: 4 / 5; }
.figure--2x3 img { aspect-ratio: 2 / 3; }
.caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: var(--fs-xs); line-height: 1.45; color: var(--fg-2); }
.caption b { font-weight: 600; color: var(--fg); white-space: nowrap; }
.frame { position: relative; overflow: hidden; background: var(--paper-2); }

/* ---- Photo pleine largeur (« moment » photographique) --------------------- */
.photo-band { position: relative; overflow: hidden; background: var(--ink); }
.photo-band img { width: 100%; height: clamp(300px, 52vw, 720px); object-fit: cover; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 45, 77, 0) 30%, rgba(8, 45, 77, .72) 68%, var(--ink) 100%);
}
.photo-band__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding-bottom: clamp(20px, 3vw, 40px);
  color: var(--on-ink);
}
.photo-band__quote { max-width: 22ch; font-size: var(--fs-h2-sm); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }

/* ---- Liste numérotée (prestations) + visuel synchronisé ------------------- */
.index-list { border-bottom: 1px solid var(--line); }
.index-list__item {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 16px;
  grid-template-areas: "n title tag" ". desc desc" ". meta meta";
  padding: 26px 0 28px; border-top: 1px solid var(--line);
}
.index-list__item::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
  background: var(--line-strong); transition: width .6s var(--ease);
}
.index-list__item.is-active::before,
.index-list__item:hover::before,
.index-list__item:focus-within::before { width: 100%; }
.index-list__n { grid-area: n; padding-top: .7em; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; transition: color var(--dur); }
.index-list__item.is-active .index-list__n { color: var(--accent-text); }
.index-list__title { grid-area: title; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -.03em; }
.index-list__title a { text-decoration: none; }
.index-list__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la ligne est cliquable */
.index-list__title a:focus-visible { outline: none; }
.index-list__item:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.index-list__tag { grid-area: tag; align-self: start; margin-top: .45em; }
.index-list__desc { grid-area: desc; margin-top: 12px; max-width: 56ch; color: var(--fg-2); }
.index-list__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: var(--fs-sm); font-weight: 600; }
.index-list__meta .icon { transition: transform var(--dur) var(--ease); }
.index-list__item:hover .index-list__meta .icon { transform: translateX(4px); }
.index-list__price { white-space: nowrap; }
.index-list__price small { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-2); }
.index-list__go { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.index-list__thumb { display: none; grid-area: thumb; }

/* Visuel fixe qui suit la ligne active ([data-spotlight], voir main.js) */
.spotlight__media { position: sticky; top: calc(var(--header-h) + 28px); }
.spotlight__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.spotlight__frame picture { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.spotlight__frame picture.is-active { opacity: 1; }
.spotlight__frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .spotlight__media { display: none; }
  .index-list__item {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas: "n thumb" "title thumb" "tag thumb" "desc desc" "meta meta";
    padding: 20px 0 22px;
  }
  .index-list__n { padding-top: 0; }
  .index-list__title { margin-top: 6px; font-size: 1.375rem; }
  .index-list__tag { justify-self: start; margin-top: 12px; }
  .index-list__thumb { display: block; align-self: start; width: 84px; height: 84px; overflow: hidden; background: var(--paper-2); }
  .index-list__thumb picture,
  .index-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .index-list__desc { font-size: var(--fs-sm); }
  [data-spotlight] .index-list__item.is-active::before { width: 0; }
  [data-spotlight] .index-list__item.is-active .index-list__n { color: var(--fg-3); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .index-list__item { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "n title" ". tag" ". desc" ". meta"; }
  .index-list__tag { justify-self: start; margin-top: 12px; }
}

/* ---- Table de spécifications 2 × 3 (engagements) -------------------------- */
.spec-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.spec-table > li { padding: 20px var(--gap) clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.spec-table > li:nth-child(even) { padding-left: var(--gap); padding-right: 0; border-left: 1px solid var(--line); }
.spec-table__n { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.spec-table__title { margin-top: clamp(14px, 2vw, 32px); font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -.02em; }
.spec-table p { margin-top: 8px; font-size: var(--fs-sm); color: var(--fg-2); max-width: 40ch; }
@media (max-width: 600px) {
  .spec-table { grid-template-columns: minmax(0, 1fr); }
  .spec-table > li,
  .spec-table > li:nth-child(even) { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0 20px; border-left: 0; }
  .spec-table__n { padding-top: .35em; }
  .spec-table__title { margin-top: 0; }
  .spec-table p { grid-column: 2; }
}

/* ---- Mosaïque photo asymétrique (cartes cliquables) ----------------------- */
.mosaic { row-gap: clamp(44px, 5vw, 80px); }
.tile { position: relative; display: flex; flex-direction: column; }
.tile__media { overflow: hidden; background: var(--paper-2); }
.tile__media img { width: 100%; height: var(--tile-h, clamp(300px, 33vw, 540px)); object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.025); }
.tile--md { --tile-h: clamp(280px, 27vw, 440px); }
.tile--sm { --tile-h: clamp(220px, 20vw, 320px); }
.tile__body {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line-strong);
}
.tile__body > :not(.tile__n) { grid-column: 2; }
.tile__n { grid-row: 1; padding-top: .35em; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); }
.tile__title { font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -.02em; }
.tile__title a { text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__title a:focus-visible { outline: none; }
.tile:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 6px; }
.tile:hover .tile__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tile__text { margin-top: 6px; font-size: var(--fs-sm); color: var(--fg-2); max-width: 46ch; }
.tile__label { margin-top: 14px; }
.carousel-hint { display: none; }
@media (max-width: 860px) {
  .mosaic[data-carousel] {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: 8px; scrollbar-width: none;
  }
  .mosaic[data-carousel]::-webkit-scrollbar { display: none; }
  .mosaic[data-carousel] > .tile { flex: 0 0 min(82%, 420px); scroll-snap-align: start; }
  .mosaic[data-carousel] .tile__media img { height: clamp(220px, 58vw, 360px); }
  .carousel-hint { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-2); }
  .carousel-hint__count { font-variant-numeric: tabular-nums; color: var(--fg); }
  .carousel-hint .icon { width: 18px; height: 18px; }
}

/* ---- Méthode en étapes ---------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
.step { display: flex; flex-direction: column; padding-top: 22px; border-top: 1px solid var(--line-2); }
.step__n { display: block; font-size: clamp(4.5rem, 2.5rem + 6vw, 10rem); font-weight: 500; line-height: .76; letter-spacing: -.07em; font-variant-numeric: tabular-nums; color: var(--fg); }
.step__title { margin-top: clamp(28px, 3.6vw, 56px); font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); line-height: 1.15; letter-spacing: -.02em; }
.step p { margin-top: 10px; font-size: var(--fs-sm); color: var(--fg-2); max-width: 34ch; }
.step .step__meta {
  display: flex; align-items: center; gap: 10px; max-width: none;
  margin-top: auto; padding-top: 24px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg);
}
.step__meta::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--accent); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding-top: 20px; }
  .step > :not(.step__n) { grid-column: 2; }
  .step__n { grid-row: 1 / span 3; font-size: 4.5rem; min-width: .62em; }
  .step__title { margin-top: 2px; }
  .step .step__meta { margin-top: 0; padding-top: 14px; }
}
/* Variante resserrée (.steps.steps--compact) : même contenu, chiffres plus petits et moins d'air.
   Pour les pages où la méthode est un rappel (fiches prestations, merci) ; l'accueil garde la version pleine. */
.steps--compact { row-gap: 32px; }
.steps--compact .step { padding-top: 18px; }
.steps--compact .step__n { font-size: clamp(3rem, 1.5rem + 3vw, 5.5rem); }
.steps--compact .step__title { margin-top: clamp(18px, 2vw, 28px); }
.steps--compact .step p { max-width: 30ch; }
.steps--compact .step .step__meta { padding-top: 16px; }
@media (max-width: 600px) {
  .steps--compact { row-gap: 24px; }
  .steps--compact .step { padding-top: 16px; }
  .steps--compact .step__n { font-size: 3rem; }
  .steps--compact .step__title { margin-top: 0; }
  .steps--compact .step .step__meta { padding-top: 10px; }
}

/* ---- Fiche (liste de définitions en 2 colonnes) --------------------------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.facts dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.facts dd { margin-top: 4px; font-size: var(--fs-sm); font-weight: 500; }

/* Liste à filets (puces carrées) */
.rule-list { border-top: 1px solid var(--line); }
.rule-list > li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.rule-list > li::before { content: ""; width: 5px; height: 5px; flex: none; margin-top: .6em; background: var(--fg); }
.rule-list--plain > li::before { display: none; }

/* ---- Portrait provisoire (initiales + hirondelles de photographe) --------- */
.portrait { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); color: var(--ink); }
.portrait__initials { font-size: clamp(5rem, 2.5rem + 6vw, 10rem); font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.portrait__crop { position: absolute; width: 22px; height: 22px; border: 0 solid var(--ink); }
.portrait__crop--tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.portrait__crop--tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.portrait__crop--bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.portrait__crop--br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }
.portrait__caption { position: absolute; left: 48px; right: 48px; bottom: 18px; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-2); }
.signature { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.signature::before { content: ""; width: 36px; height: 1px; flex: none; background: currentColor; }

/* ---- FAQ (rendue par {{@ faq … }}) ---------------------------------------- */
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 18px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.125rem, 1rem + .45vw, 1.4375rem); font-weight: 600; line-height: 1.25; letter-spacing: -.018em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .35s var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 56px 26px 0; color: var(--fg-2); max-width: 68ch; }
.faq-answer p + p { margin-top: .8em; }
.faq-answer a { color: var(--fg); font-weight: 500; }
@media (max-width: 860px) {
  .faq-item summary { min-height: 64px; }
  .faq-answer { padding-right: 0; }
}

/* ---- Tableaux (tarifs, zones, données) ------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table,
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.price-table caption,
.data-table caption { padding-bottom: 14px; text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg); }
.price-table thead th,
.data-table thead th {
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-strong);
  text-align: left; vertical-align: bottom;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
}
.price-table tbody th,
.price-table td,
.data-table tbody th,
.data-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.price-table tbody th,
.data-table tbody th { font-weight: 600; }
.price-table tbody th span,
.data-table tbody th span { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--fg-2); }
.price-table td.num { white-space: nowrap; font-size: var(--fs-body); font-weight: 600; }
.price-table td.num small { font-size: var(--fs-xs); font-weight: 400; color: var(--fg-2); }
.price-table td:last-child { color: var(--fg-2); }
.price-table th:last-child,
.price-table td:last-child,
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }
.price-note { margin-top: 12px; font-size: var(--fs-xs); color: var(--fg-2); }
@media (max-width: 640px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td,
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  /* la légende suit le tableau en bloc (sinon elle reste en table-caption et se réduit à la largeur d'un mot) */
  .price-table caption:not(.sr-only), .data-table caption:not(.sr-only) { display: block; width: 100%; }
  .price-table thead, .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table tr, .data-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .price-table tbody tr:first-child, .data-table tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .price-table tbody th, .price-table td, .data-table tbody th, .data-table td { padding: 0; border: 0; }
  /* colonne d'étiquettes en rem : identique pour td.num (17 px) et les autres cellules (15 px) */
  .price-table td, .data-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: 12px; margin-top: 8px; }
  .price-table td[data-label]::before, .data-table td[data-label]::before {
    content: attr(data-label); padding-top: .25em;
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3);
  }
  .price-table td.num { white-space: normal; }
  /* Tarifs : nom et prix sur la même ligne, conditions en petit dessous (sans étiquettes).
     .data-table garde le rendu en cartes étiquetées ci-dessus. */
  .price-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 12px 0; }
  .price-table tbody th { grid-column: 1; }
  .price-table td.num { grid-column: 2; grid-row: 1; display: block; width: auto; max-width: 11rem; margin-top: 0; text-align: right; }
  .price-table td[data-label]::before { content: none; }
  .price-table td:last-child { grid-column: 1 / -1; display: block; margin-top: 4px; font-size: var(--fs-xs); }
  .price-table td:last-child:empty { display: none; }
}

/* Liste des communes ({{@ communeList }}) */
.commune-list { columns: 2 16em; column-gap: var(--gap); border-top: 1px solid var(--line-strong); font-size: var(--fs-sm); }
.commune-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.commune-list li.is-base { font-weight: 600; }
.commune-list__meta { display: inline-flex; gap: 10px; white-space: nowrap; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.commune-list__zone { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-2); font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-2); }

/* Bloc repliable générique (details/summary) */
.disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none;
  border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 600;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { transition: transform var(--dur) var(--ease); }
.disclosure[open] > summary .icon { transform: rotate(45deg); }
.disclosure[open] > summary { border-bottom-color: transparent; }
.disclosure__body { padding-top: 12px; }

/* ---- Formulaires ---------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gap); }
.form-grid > .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label, .field > legend {
  padding: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--fg);
}
.field__opt { font-weight: 400; color: var(--fg-2); }
.field__hint { font-size: var(--fs-xs); color: var(--fg-2); }
.field__input,
.field input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.field select,
.field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--field-bg); color: var(--fg);
  border: 1px solid var(--field-line); border-radius: 0;
  font-size: var(--fs-body); line-height: 1.3;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082D4D' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.theme-ink .field select,
.section--ink .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EFE7' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field select option { color: var(--ink); background: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--line-strong);
}
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field__error { display: flex; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.field__error::before { content: ""; width: 10px; height: 2px; flex: none; margin-top: .6em; background: currentColor; }
.field--group.is-invalid .choice__box,
.field--group.is-invalid .seg label { border-color: var(--danger); }

/* Cartes radio / case à cocher */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.choice__box {
  position: relative; display: grid; gap: 4px; height: 100%; min-height: 56px;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--field-line); background: var(--field-bg);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.choice__box::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px;
  border: 1px solid var(--field-line); background: var(--bg);
}
.choice__box::after {
  content: ""; position: absolute; left: 21px; top: 22px; width: 8px; height: 8px;
  background: var(--fg); transform: scale(0); transition: transform .15s var(--ease);
}
.choice__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.choice__desc { font-size: var(--fs-xs); color: var(--fg-2); }
.choice:hover .choice__box { border-color: var(--line-strong); }
.choice__input:checked + .choice__box { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.choice__input:checked + .choice__box::before { border-color: var(--line-strong); }
.choice__input:checked + .choice__box::after { transform: scale(1); }
.choice__input[type="radio"] + .choice__box::before,
.choice__input[type="radio"] + .choice__box::after { border-radius: 50%; }
.choice__input:focus-visible + .choice__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice__input[type="checkbox"] + .choice__box::after { left: 20px; top: 21px; width: 10px; height: 10px; }
.choice--inline .choice__box { min-height: 48px; padding-block: 12px; }
.choice--inline .choice__box::before { top: 14px; }
.choice--inline .choice__box::after { top: 19px; }

/* Contrôle segmenté (choix courts : fréquences, types) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px;
  border: 1px solid var(--field-line); background: var(--field-bg); color: var(--fg);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; cursor: pointer; user-select: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.seg label b { font-weight: 600; font-variant-numeric: tabular-nums; }
.seg label:hover { border-color: var(--line-strong); }
.seg input:checked + label { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Curseur */
.range { --p: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--p), var(--field-line) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; background: var(--fg); border: 5px solid var(--field-bg); box-shadow: 0 0 0 1px var(--fg); border-radius: 0; }
.range::-moz-range-track { height: 2px; background: var(--field-line); }
.range::-moz-range-progress { height: 2px; background: var(--accent); }
.range::-moz-range-thumb { width: 16px; height: 16px; background: var(--fg); border: 5px solid var(--field-bg); box-shadow: 0 0 0 1px var(--fg); border-radius: 0; }
.range:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.range-scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: var(--fs-2xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Champ piège anti-robots (jamais visible) */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Message d'état d'un formulaire ([data-form-status]) */
.form-status { padding: 12px 14px; border-left: 3px solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; }
.form-status:empty { display: none; }
.form-status[data-kind="pending"] { border-left-color: var(--fg-3); }
.form-status[data-kind="success"] { border-left-color: var(--accent); }
.form-status[data-kind="error"] { border-left-color: var(--danger); color: var(--fg); }
.form-status[data-kind="error"]::first-line { font-weight: 600; }

/* Mention RGPD / légale sous un formulaire ou un prix */
.fine-print { font-size: var(--fs-2xs); line-height: 1.55; color: var(--fg-2); }
.fine-print a { color: var(--fg); }
.fine-print + .fine-print { margin-top: 6px; }

/* ---- Estimation : panneau résultat (accueil et simulateur) ---------------- */
.estimate-result { display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 40px); }
.estimate-result__kicker { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-2); }
.estimate-result__price {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .18em;
  margin-top: clamp(18px, 2.4vw, 32px);
  font-size: clamp(2.75rem, 1.8rem + 3vw, 4.75rem); font-weight: 600; line-height: .95; letter-spacing: -.05em;
  white-space: nowrap;
}
.estimate-result__price .sep { font-weight: 400; color: var(--fg-2); }
.estimate-result__price small { font-size: .46em; letter-spacing: -.02em; }
.estimate-result__unit { margin-top: 10px; font-size: var(--fs-sm); color: var(--fg-2); }
.estimate-result__lines { margin-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.estimate-result__lines div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.estimate-result__lines dt { color: var(--fg-2); }
.estimate-result__lines dd { text-align: right; font-weight: 600; }
.estimate-result .btn { margin-top: 24px; }
.estimate-result .fine-print { margin-top: 18px; }

/* ---- Bandeau d'appel final (partial cta.html) ----------------------------- */
.cta-band { margin-top: var(--section-y); padding-block: var(--section-y) clamp(56px, 6vw, 96px); }
main > .cta-band:last-child { margin-bottom: 0; }
.cta-band__title { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.cta-band .sec-head { margin-bottom: clamp(20px, 2.6vw, 40px); }
body:has(main > .cta-band:last-child) .site-footer { padding-top: 0; }
.cta-band__grid { row-gap: 40px; margin-top: clamp(32px, 4vw, 64px); align-items: end; }
.cta-band .lede { color: var(--fg-2); max-width: 32ch; }
.cta-band__actions { display: grid; gap: 10px; max-width: 420px; margin-top: 28px; }
.cta-band__tel {
  display: inline-block; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -.04em;
  text-decoration: none; font-variant-numeric: tabular-nums;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}
.cta-band__tel:hover { border-bottom-color: var(--fg); }
/* Une seule ligne sous le numéro : l'e-mail, la commune et le détail des horaires sont dans le pied de page */
.cta-band__hours { margin-top: 14px; font-size: var(--fs-sm); color: var(--fg-2); }
@media (min-width: 861px) {
  .cta-band__head { grid-column: 1 / 13; }
  .cta-band__left { grid-column: 1 / 7; }
  .cta-band__right { grid-column: 8 / 13; }
}
@media (max-width: 640px) {
  .cta-band { padding-block: var(--section-y-sm) 48px; }
  .cta-band__grid { row-gap: 28px; margin-top: 24px; }
  .cta-band__actions { margin-top: 22px; }
}

/* ---- Hero des pages intérieures ({{@ pageHero }}) ------------------------- */
.page-hero { padding-top: clamp(8px, 1.5vw, 20px); }
.page-hero .breadcrumb { margin-bottom: clamp(20px, 3vw, 44px); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; }
.page-hero__grid > * { grid-column: 1 / -1; min-width: 0; }
.page-hero__title { margin-top: clamp(16px, 2vw, 28px); font-size: var(--fs-h1); line-height: .96; letter-spacing: -.045em; }
.page-hero .lede { margin-top: clamp(20px, 2.4vw, 32px); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 2.6vw, 36px); }
.page-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 861px) {
  .page-hero__text { grid-column: 1 / 7; }
  .page-hero__media { grid-column: 7 / 13; }
  .page-hero--text .page-hero__text { grid-column: 1 / 11; }
}
@media (max-width: 860px) {
  .page-hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .page-hero__media img { aspect-ratio: 16 / 10; }
  .page-hero__media .caption { padding-inline: var(--gutter); }
  .page-hero__actions .btn { flex: 1 1 240px; }
}

/* ---- Fil d'Ariane --------------------------------------------------------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: var(--fs-xs); color: var(--fg-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: "/"; color: var(--fg-3); padding-right: 4px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; }
.breadcrumb [aria-current="page"] { font-weight: 600; color: var(--fg); }

/* ---- Carte de la zone ({{@ zoneMap }}) ------------------------------------ */
.zone-map__box { background: var(--paper-3); border: 1px solid var(--rule-2); }
.zone-map__svg { width: 100%; height: auto; color: var(--ink); font-family: var(--font); }
.zone-map__svg .zm-grid { fill: none; stroke: var(--ink); stroke-opacity: .06; }
.zone-map__svg .zm-axis { stroke: var(--ink); stroke-opacity: .12; }
.zone-map__svg .zm-ring { fill: var(--ink); fill-opacity: .028; stroke: var(--ink); stroke-opacity: .42; stroke-dasharray: 3 6; }
.zone-map__svg .zm-ring--3 { stroke-opacity: .7; stroke-dasharray: none; }
.zone-map__svg .zm-ring-label { font-size: 15px; font-weight: 600; fill: var(--ink-3); letter-spacing: .02em; }
.zone-map__svg .zm-river { fill: none; stroke: var(--blue); stroke-opacity: .55; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zone-map__svg .zm-river-label { font-size: 14px; font-weight: 500; font-style: italic; fill: var(--blue); letter-spacing: .02em; }
.zone-map__svg .zm-dot { fill: var(--ink); }
.zone-map__svg .zm-base { fill: var(--green); }
.zone-map__svg .zm-label { font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--paper-3); stroke-width: 5px; stroke-linejoin: round; }
.zone-map__svg .zm-label--major { font-weight: 700; }
.zone-map__svg .zm-north path { fill: var(--ink); }
.zone-map__svg .zm-north text { font-size: 15px; font-weight: 700; fill: var(--ink); }
.zone-map__svg .zm-labels--sm,
.zone-map__svg .zm-ring-label--sm { display: none; }
@media (max-width: 600px) {
  .zone-map__svg .zm-labels--lg { display: none; }
  .zone-map__svg .zm-labels--sm,
  .zone-map__svg .zm-ring-label--sm { display: inline; }
  .zone-map__svg .zm-ring-label--lg,
  .zone-map__svg .zm-river-label { display: none; }
  .zone-map__svg .zm-ring-label { font-size: 22px; }
  .zone-map__svg .zm-river { stroke-width: 3; }
  .zone-map__svg .zm-north text { font-size: 24px; }
}
.map-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.map-key li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.map-key svg { width: 18px; height: 18px; flex: none; }

/* Résumé des zones A, B, C ({{@ zoneSummary }}) */
.zone-summary { border-top: 1px solid var(--line-strong); }
.zone-summary li { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.zone-summary__label { font-size: var(--fs-sm); font-weight: 600; }
.zone-summary__fee { margin-top: 4px; font-size: var(--fs-xs); color: var(--fg); }
.zone-summary__examples { margin-top: 4px; font-size: var(--fs-xs); color: var(--fg-3); }

/* ---- Encadré / note ------------------------------------------------------- */
.note { padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--surface); font-size: var(--fs-sm); color: var(--fg-2); }
.note strong { color: var(--fg); }

/* ==========================================================================
   9. Utilitaires
   ========================================================================== */
/* Classes de taille, indépendantes du niveau de titre */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600; }
.t-display, .t-h1, .t-h2-xl, .t-h2, .t-h2-sm, .t-h3, .t-h4 { font-weight: 600; text-wrap: balance; }
.t-h1 { font-size: var(--fs-h1); line-height: .96; letter-spacing: -.045em; }
.t-h2-xl { font-size: var(--fs-h2-xl); line-height: .96; letter-spacing: -.04em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--track-title); }
.t-h2-sm { font-size: var(--fs-h2-sm); line-height: 1.04; letter-spacing: -.03em; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -.03em; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -.02em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--stack, 1em); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, 12px 24px); }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--s-3); }
.mt-m { margin-top: var(--s-5); }
.mt-l { margin-top: var(--s-7); }
.mt-xl { margin-top: var(--s-9); }
.rule-top { border-top: 1px solid var(--line-strong); padding-top: 18px; }
@media (max-width: 860px) { .hide-md { display: none !important; } }
@media (min-width: 861px) { .show-md { display: none !important; } }
@media (max-width: 600px) { .hide-sm { display: none !important; } }
@media (min-width: 601px) { .show-sm { display: none !important; } }

/* ==========================================================================
   Responsif transversal
   ========================================================================== */
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .gridlines { display: none; }
  .site-header__actions .header-cta,
  .site-header__actions .header-tel { display: none; }
  .brand__mark { width: 22px; height: 27px; }
  .brand__name { font-size: 1.1875rem; }
}
@media (max-width: 380px) {
  .brand__sub { letter-spacing: .05em; }
  .menu-toggle { padding: 0 12px; }
}

/* ==========================================================================
   10. Mouvement et impression
   ========================================================================== */
[data-reveal] { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}

@media print {
  .gridlines, .site-nav, .site-header__actions, .menu, .mobile-bar, .skip-link, .cta-band__actions { display: none !important; }
  .site-header { position: static; }
  body, .section--ink, .theme-ink, .site-footer { background: #fff !important; color: #000 !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ------------------------------------------------------------------ */
/* Logo définitif « Le trait » (voir brand/final/charte-graphique.html) */
/* Zone de protection = longueur du trait ; ne jamais recomposer le     */
/* logotype avec une police.                                            */
/* ------------------------------------------------------------------ */
.brand { gap: 14px; }
.brand__logo { height: 22px; width: auto; color: var(--fg); }
.brand__trait { fill: var(--trait, #1A9A4B); }
.brand__sub { margin: 0; padding-left: 14px; border-left: 1px solid var(--line-strong, currentColor); font-size: .625rem; font-weight: 600; line-height: 1.25; letter-spacing: .12em; color: var(--fg-2); }
.site-footer .brand__logo { height: 26px; }
@media (max-width: 400px) {
  .brand { gap: 10px; }
  .brand__logo { height: 19px; }
  .brand__sub { padding-left: 10px; font-size: .5625rem; letter-spacing: .08em; }
}
/* 320 px : sans le descripteur, logo et bouton Menu tiennent dans la largeur */
@media (max-width: 359px) {
  .site-header .brand__sub { display: none; }
}