/* ==========================================================================
   COIFFEUR.BIZ - Systeme de design "Dossier editorial"
   Base ivoire chaude / encre bleu-noir profonde / un seul accent vermillon.
   Superposition tonale des surfaces, grain de papier, profondeur mesuree.
   Aucune dependance externe hors fontes. Tout reste utilisable sans JavaScript.
   Voir DESIGN.md pour la these et les regles.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Papier : ivoire legerement refroidi (h 92 plutot que 80). Un papier trop
     chaud fait virer le rouge vers l'orange par contraste simultane ; on veut
     un rouge de correction, pas un rouge d'enseigne. */
  --paper:        oklch(97.6% 0.006 92);
  --paper-2:      oklch(95.4% 0.008 92);
  --paper-3:      oklch(92.2% 0.010 90);
  --surface:      oklch(99.2% 0.003 95);
  --surface-2:    oklch(96.6% 0.007 92);

  --ink:          oklch(17% 0.022 266);
  --ink-2:        oklch(33% 0.018 266);
  --ink-3:        oklch(47% 0.015 266);

  /* Accent : chroma abaisse de 0.205 a 0.168 et assombri. L'ancien etait au
     plafond de saturation, ce qui lisait "bouton SaaS". Ici l'accent n'est
     plus jamais un aplat d'action (le noir s'en charge) : il ne sert qu'a
     annoter -- filets, numeros, marques de preuve, survol. */
  --accent:       oklch(51% 0.168 32);
  --accent-deep:  oklch(43% 0.145 32);
  --accent-wash:  oklch(96.8% 0.016 44);
  --accent-line:  oklch(66% 0.155 34);

  --line:         oklch(88.5% 0.008 92);
  --line-strong:  oklch(77% 0.013 90);
  --on-accent:    oklch(99% 0.003 95);
  --focus:        oklch(50% 0.19 258);

  /* Encre constante (bandes sombres, pied) - independante du theme visiteur */
  --ink-fixed:    oklch(15.5% 0.022 266);
  --ink-fixed-2:  oklch(21% 0.024 266);
  --paper-fixed:  oklch(97.5% 0.004 95);

  /* Ombres : reservees aux couches reellement flottantes (panneau de nav,
     popover, tiroir, consentement). Un bloc dans le flux se detache par un
     filet et un cran de surface, jamais par une ombre -- c'est ce qui separe
     une page composee d'une page de cartes empilees. */
  --shadow-1: 0 1px 2px oklch(25% 0.02 266 / 0.045);
  --shadow-2: 0 1px 2px oklch(25% 0.02 266 / 0.05), 0 8px 20px oklch(25% 0.02 266 / 0.06);
  --shadow-3: 0 8px 20px oklch(22% 0.02 266 / 0.10), 0 28px 60px oklch(22% 0.02 266 / 0.14);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Echelle : rapport >= 1.23 a chaque cran. Le maximum du titre de heros
     descend de 5.75rem a 4.75rem -- au-dela, Bricolage serre trop et les
     lettres se touchent, ce qui se lit comme un defaut, pas comme une force. */
  --t--2: 0.75rem;
  --t--1: 0.8125rem;
  --t-0:  1.0625rem;
  --t-1:  1.3125rem;
  --t-2:  1.6875rem;
  --t-3:  2.125rem;
  --t-4:  clamp(1.9rem, 1.3rem + 2.6vw, 2.95rem);
  --t-5:  clamp(2.2rem, 1.3rem + 3.9vw, 3.8rem);
  --t-6:  clamp(2.7rem, 1.1rem + 6.6vw, 5.6rem);

  --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;

  /* Rayons effondres : l'ancien systeme arrondissait tout a 16-22px, y compris
     les photos, ce qui mettait la recherche, une image et un encadre au meme
     poids visuel. Ici le rayon ne survit que sur les petites commandes que le
     doigt touche. Les medias sont a angle vif : ils s'encastrent dans la
     grille au lieu de flotter dessus. */
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-media: 0px; --r-pill: 999px;

  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 320ms;

  --z-sticky: 100; --z-dropdown: 200; --z-dialog: 300; --z-toast: 400;

  --wrap: 1280px;
  --wrap-text: 68ch;
  /* Colonne de marge qui porte la numerotation d'index des grandes sections. */
  --gutter: 92px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       oklch(15.5% 0.016 266);
    --paper-2:     oklch(19% 0.018 266);
    --paper-3:     oklch(23.5% 0.019 266);
    --surface:     oklch(20.5% 0.019 266);
    --surface-2:   oklch(24% 0.020 266);

    --ink:         oklch(95% 0.006 95);
    --ink-2:       oklch(83% 0.010 95);
    --ink-3:       oklch(69% 0.012 95);

    --accent:      oklch(70% 0.145 38);
    --accent-deep: oklch(76% 0.130 40);
    --accent-wash: oklch(26% 0.045 34);
    --accent-line: oklch(69% 0.150 36);

    --line:        oklch(29% 0.016 266);
    --line-strong: oklch(42% 0.018 266);
    --on-accent:   oklch(15% 0.018 266);
    --focus:       oklch(74% 0.14 250);

    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.26);
    --shadow-2: 0 1px 2px oklch(0% 0 0 / 0.30), 0 8px 20px oklch(0% 0 0 / 0.34);
    --shadow-3: 0 8px 20px oklch(0% 0 0 / 0.42), 0 28px 60px oklch(0% 0 0 / 0.52);
  }
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  /* Grain de papier tres subtil - texture premium, quasi invisible */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.032 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  body { background-blend-mode: overlay; }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.03em; margin: 0; text-wrap: balance;
}
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); letter-spacing: -0.02em; }
h4 { font-size: var(--t-1); letter-spacing: -0.015em; }
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }
:is(h1, h2, h3, h4) + p { margin-top: var(--s-3); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
a {
  color: var(--ink); text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--accent); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

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

/* --- 3. Primitives de mise en page --------------------------------------- */
.wrap { width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 2 * var(--s-4)); } }

.prose { max-width: var(--wrap-text); }
.prose h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose > p.lede { font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); }

.section { padding-block: clamp(var(--s-7), 5.2vw, var(--s-9)); }
.section--tight { padding-block: var(--s-7); }
.section + .section { padding-top: 0; }
/* Superposition tonale douce: une section sur deux respire sur un fond legerement teinte */
.section--alt { background: linear-gradient(var(--surface-2), var(--surface-2)); }

.stack > * + * { margin-top: var(--s-4); }
.lede { font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t--1); line-height: 1.5; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 999;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: var(--r-2); text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--s-3); }

/* Kicker / eyebrow: signature de provenance en monospace, avec tiret d'accent */
.kicker {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t--1); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s-4);
}
.kicker::before {
  content: ""; width: 34px; height: 1px; background: var(--accent); flex: none;
}
.band .kicker { color: oklch(from var(--paper-fixed) l c h / 0.66); }

main { counter-reset: dossier parcours; }
.head { margin-bottom: var(--s-7); position: relative; counter-increment: dossier;
  padding-top: clamp(var(--s-7), 5vw, var(--s-9)); isolation: isolate; }
.head::before {
  content: counter(dossier, decimal-leading-zero);
  position: absolute; left: -0.05em; top: 0; z-index: -1; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; line-height: 0.78;
  font-size: clamp(3.6rem, 6.4vw, 6.4rem); letter-spacing: -0.05em;
  color: var(--accent);
}
.head > * { position: relative; }
.band .head::before { color: var(--accent-line); }
/* Revelation au defilement : le numero monte et se revele avec sa section.
   Sans JavaScript, et neutralise si le visiteur a reduit les animations. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .head::before {
      animation: num-in linear both;
      animation-timeline: view(); animation-range: entry 4% entry 46%;
    }
    @keyframes num-in { from { opacity: 0; transform: translateY(24px); } }
  }
}
.head--plain { padding-top: 0; counter-increment: none; }
.head--plain::before { content: none; }
.head__rule { height: 1px; background: var(--line-strong); transform-origin: left;
  margin-bottom: var(--s-5); }

.head h2 { max-width: 22ch; }
.head p { margin-top: var(--s-4); max-width: 56ch; color: var(--ink-2); }
.head--split { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end; column-gap: var(--s-8); }
  .head--split .head__rule { grid-column: 1 / -1; }
  .head--split p { margin-top: 0; }
}

/* --- 4. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  font: 500 var(--t-0) / 1 var(--font-body); letter-spacing: -0.005em;
  border-radius: var(--r-2); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
/* Le rouge ne s'allume qu'a l'intention : c'est le seul aplat d'accent du site,
   et il n'existe qu'au survol. Un degrade sur un bouton principal etait l'autre
   marqueur de gabarit a supprimer. */
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--quiet { background: var(--paper-2); color: var(--ink); }
.btn--quiet:hover { background: var(--paper-3); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t--1); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--paper-3); color: var(--ink-3); cursor: not-allowed; transform: none;
  box-shadow: none;
}
.btn__arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.arrow-link {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.arrow-link:hover { border-color: var(--accent); color: var(--accent-deep); }
.arrow-link span { transition: transform var(--dur-2) var(--ease-out); }
.arrow-link:hover span { transform: translateX(4px); }

/* --- 5. Marqueurs de preuve (C02) ---------------------------------------- */
/* Marques de preuve : tamponnees, pas encapsulees. Des capsules arrondies sous
   un titre et une photo a angle vif cassaient la coherence du systeme. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-1);
  font-size: var(--t--1); font-weight: 500; line-height: 1.45;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface);
}
.tag--verified { border-color: var(--ink); color: var(--ink); }
.tag--verified::before {
  content: ""; width: 6px; height: 6px; background: var(--ink); flex: none;
}
.tag--declared { border-style: dashed; color: var(--ink-3); }
.tag--incomplete { border-style: dotted; color: var(--ink-3); }
.tag--ad {
  border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.tag--spec { background: var(--paper-2); border-color: transparent; }

.proof { position: relative; display: inline-block; }
.proof__btn {
  font: 500 var(--t--1)/1.4 var(--font-body);
  background: none; border: 0; border-bottom: 1px dashed var(--line-strong);
  color: var(--ink-3); cursor: pointer; padding: 0 0 1px;
}
.proof__btn:hover { color: var(--accent-deep); border-color: var(--accent); }
.proof__panel {
  margin: 0; width: min(340px, 88vw); padding: var(--s-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  font-size: var(--t--1); line-height: 1.55;
  position-anchor: --proof; position-area: bottom span-right;
}
.proof__panel dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); margin: 0; }
.proof__panel dt { color: var(--ink-3); }
.proof__panel dd { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .proof__panel:popover-open { animation: pop-in var(--dur-2) var(--ease-out); }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
}

/* --- 6. En-tete du site -------------------------------------------------- */
/* Navigation a deux rendus depuis une arborescence unique (voir build.py) :
   - bureau (>= 1000px) : barre de rubriques + panneau deroulant pleine largeur,
     bati sur <details>/<summary> natifs. Le clavier et l'absence de JavaScript
     suffisent a ouvrir un panneau ; app.js n'ajoute que le survol, Echap,
     l'exclusivite mutuelle et la fermeture au clic exterieur.
   - mobile : meme arborescence en accordeon dans le tiroir #menu-panel. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  view-transition-name: site-header;
}
/* Un panneau ouvert rend la barre opaque : la page ne doit pas transparaitre. */
.site-header:has(.nav__dd[open]) {
  background: var(--paper);
  border-bottom-color: transparent;
}
.site-header__bar { display: flex; align-items: center; gap: clamp(var(--s-4), 1.6vw, var(--s-5)); min-height: 68px; }
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -0.03em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px; flex: none;
}
/* Sceau de marque: anneau + monogramme "cb", element signature */
.brand__mark {
  width: 30px; height: 30px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface) 0 41%, transparent 42%),
    conic-gradient(from -35deg, var(--accent), var(--accent-deep), var(--accent));
  flex: none; position: relative;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  color: var(--accent-deep); letter-spacing: -0.02em; line-height: 1;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
}
.brand em { font-style: normal; color: var(--ink-3); font-weight: 500; }

/* 6.1 Barre de rubriques (bureau) */
.nav { display: none; margin-left: auto; align-self: stretch; }
.nav__list {
  display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0;
  gap: clamp(0px, 0.5vw, 8px);
}
.nav__item { margin: 0; display: flex; }
/* Le <details> reste statique : le panneau se positionne sur l'en-tete,
   donc pleine largeur, sans calcul de debordement a droite. */
.nav__dd { position: static; display: flex; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding-inline: clamp(8px, 0.95vw, 15px);
  font: 500 clamp(0.89rem, 0.8rem + 0.32vw, 0.97rem) / 1 var(--font-body);
  letter-spacing: -0.005em; color: var(--ink-2); white-space: nowrap;
  cursor: pointer; position: relative; list-style: none;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__trigger::-webkit-details-marker { display: none; }
.nav__trigger::marker { content: ""; }
.nav__trigger:focus-visible { outline-offset: -4px; }
/* Filet de rubrique. Deux lectures distinctes, jamais la meme couleur :
   accent plein = rubrique de la page courante ; gris = survol ou panneau ouvert. */
.nav__trigger::after {
  content: ""; position: absolute; left: clamp(8px, 0.95vw, 15px); right: clamp(8px, 0.95vw, 15px);
  bottom: 0; height: 2px; background: var(--ink-3); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__trigger[data-current]::after { background: var(--accent); }
.nav__trigger:hover { color: var(--ink); }
.nav__trigger:hover::after,
.nav__trigger[data-current]::after,
.nav__dd[open] > .nav__trigger::after { transform: scaleX(1); }
.nav__trigger[data-current],
.nav__dd[open] > .nav__trigger { color: var(--ink); }
.nav__chev {
  flex: none; color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav__dd[open] > .nav__trigger .nav__chev { transform: rotate(180deg); color: var(--accent); }

/* 6.2 Panneau deroulant pleine largeur */
.nav__panel {
  position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-dropdown);
  background: var(--surface);
  border-block: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.nav__panel-inner {
  display: grid; grid-template-columns: minmax(190px, 260px) 1fr;
  gap: clamp(var(--s-5), 3.5vw, var(--s-8));
  padding-block: var(--s-6) var(--s-7);
}
/* Colonne de gauche : index monospace, intention de la rubrique, lien parent. */
.nav__intro { border-left: 2px solid var(--accent); padding-left: var(--s-4); align-self: start; }
.nav__kicker {
  display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--t--1); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-2);
}
.nav__num { color: var(--accent); }
.nav__lede { margin: 0 0 var(--s-5); color: var(--ink-3); font-size: var(--t--1); line-height: 1.55; }
.nav__all {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); font-weight: 600; color: var(--ink); text-decoration: none;
  padding-block: 5px; border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.nav__all:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.nav__all svg { transition: transform var(--dur-2) var(--ease-out); }
.nav__all:hover svg { transform: translateX(3px); }

/* Trois colonnes de largeur egale : le rythme du panneau reste identique que
   la rubrique compte deux ou trois groupes (auto-fit etirerait les colonnes). */
.nav__groups {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) clamp(var(--s-5), 2.6vw, var(--s-7));
}
/* On garde trois colonnes des 1000px : passer a deux ferait retomber le
   troisieme groupe sur une seconde rangee, et doublerait la hauteur du panneau. */
@media (max-width: 1160px) {
  .nav__panel-inner { grid-template-columns: minmax(170px, 210px) 1fr; }
  .nav__groups { column-gap: var(--s-5); }
}
.nav__group-title {
  margin: 0 0 var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.nav__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav__links li { margin: 0; }
.nav__links a {
  display: block; position: relative; text-decoration: none; color: var(--ink);
  padding: var(--s-2) var(--s-3); margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--r-2);
  transition: background var(--dur-1) var(--ease-out);
}
.nav__links a:hover { background: var(--paper-2); }
.nav__links a:focus-visible { outline-offset: -2px; }
.nav__t {
  display: block; font-weight: 500; font-size: 0.97rem; line-height: 1.3;
  letter-spacing: -0.012em;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__d { display: block; margin-top: 3px; font-size: var(--t--1); line-height: 1.45; color: var(--ink-3); }
.nav__links a:hover .nav__t { color: var(--accent-deep); }
/* Page courante : reperee par un filet, jamais par la seule couleur. */
.nav__links a[aria-current="page"] .nav__t { color: var(--accent-deep); }
.nav__links a[aria-current="page"]::before {
  content: ""; position: absolute; left: 2px; top: var(--s-2); bottom: var(--s-2);
  width: 2px; background: var(--accent); border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .nav__dd[open] > .nav__panel { animation: nav-panel-in var(--dur-2) var(--ease-out); }
  @keyframes nav-panel-in { from { opacity: 0; transform: translateY(-9px); } }
  .nav__dd[open] .nav__intro,
  .nav__dd[open] .nav__group { animation: nav-col-in var(--dur-3) var(--ease-soft) backwards; }
  .nav__dd[open] .nav__group:nth-child(2) { animation-delay: 45ms; }
  .nav__dd[open] .nav__group:nth-child(3) { animation-delay: 90ms; }
  @keyframes nav-col-in { from { opacity: 0; transform: translateY(6px); } }
}

/* 6.3 Actions d'en-tete */
.header-cta { display: none; align-items: center; gap: var(--s-3); flex: none; }
.header-search {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.header-search:hover { color: var(--accent-deep); border-color: var(--ink-3); background: var(--paper-2); }
@media (max-width: 1159px) { .header-search { display: none; } }
.burger { margin-left: auto; }
/* Bascule desktop unifiee : la navigation complete et la disposition a deux
   colonnes du hero arrivent ensemble (voir .hero__grid, .with-toc a 1000px). */
@media (min-width: 1000px) {
  .nav, .header-cta { display: flex; }
  .site-header .burger { display: none; }
  .header-cta { margin-left: clamp(var(--s-3), 1.2vw, var(--s-5)); }
}

/* 6.4 Tiroir mobile : meme arborescence, accordeon natif */
.menu-panel {
  border: 0; padding: 0; width: min(440px, 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto;
  background: var(--paper); color: var(--ink);
}
.menu-panel::backdrop { background: oklch(15% 0.02 265 / 0.55); backdrop-filter: blur(3px); }
.menu-panel__inner {
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  height: 100%; overflow-y: auto;
}
.menu-panel__top {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.menu-nav { display: block; }
.menu-sec { border-bottom: 1px solid var(--line); }
.menu-sec__head {
  display: flex; align-items: center; gap: var(--s-3); cursor: pointer;
  padding: 13px 0; min-height: 48px; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-1);
  letter-spacing: -0.025em; color: var(--ink);
  transition: color var(--dur-1) var(--ease-out);
}
.menu-sec__head::-webkit-details-marker { display: none; }
.menu-sec__head::marker { content: ""; }
.menu-sec__head:focus-visible { outline-offset: -2px; }
.menu-sec__num {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.08em; color: var(--accent); flex: none;
}
.menu-sec__label { flex: 1 1 auto; }
.menu-sec__chev {
  flex: none; color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.menu-sec[open] > .menu-sec__head { color: var(--accent-deep); }
.menu-sec[open] > .menu-sec__head .menu-sec__chev { transform: rotate(180deg); color: var(--accent); }
.menu-sec__list {
  list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-5);
  border-left: 1px solid var(--line); display: grid; gap: 2px;
}
.menu-sec__list li { margin: 0; }
.menu-sec__list a {
  display: flex; align-items: center; min-height: 44px;
  padding: 8px var(--s-3); margin-left: calc(var(--s-3) * -1);
  border-radius: var(--r-1); text-decoration: none;
  color: var(--ink-2); font-size: 0.97rem; line-height: 1.35;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.menu-sec__list a:hover { color: var(--accent-deep); background: var(--paper-2); }
.menu-sec__list a[aria-current="page"] {
  color: var(--accent-deep); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .menu-sec[open] > .menu-sec__list { animation: nav-col-in var(--dur-2) var(--ease-out); }
}
.menu-panel__foot { margin-top: auto; padding-top: var(--s-4); display: grid; gap: var(--s-3); }
.menu-extra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.menu-extra li { margin: 0; }
.menu-extra a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--t--1); color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.menu-extra a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  .menu-panel[open] { animation: panel-in var(--dur-3) var(--ease-out); }
  @keyframes panel-in { from { transform: translateX(16px); opacity: 0; } }
}

.icon-btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  cursor: pointer; color: var(--ink); flex: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--ink-3); }

.demo-strip {
  background: var(--ink-fixed); color: var(--paper-fixed);
  font-size: var(--t--1); line-height: 1.45;
  border-bottom: 1px solid oklch(from var(--paper-fixed) l c h / 0.12);
}
.demo-strip .wrap { display: flex; gap: var(--s-3); align-items: baseline; padding-block: 10px; flex-wrap: wrap; }
.demo-strip b { font-weight: 600; color: var(--accent-line); }
.demo-strip span { color: oklch(from var(--paper-fixed) l c h / 0.82); }
.demo-strip a { color: var(--paper-fixed); text-underline-offset: 0.2em; }
.demo-strip a:hover { text-decoration-color: var(--accent-line); }

/* --- 7. Hero ------------------------------------------------------------- */
/* Composition de couverture : la colonne de texte reste sur la grille du site,
   la colonne image fuit jusqu'au bord droit de la fenetre. C'est le seul
   element du site autorise a sortir du conteneur, et c'est ce qui fait la
   difference entre une page d'accroche et une couverture. */
.hero { position: relative; padding-bottom: var(--s-7); overflow: clip; }
.hero__masthead { padding-top: clamp(var(--s-5), 3vw, var(--s-7)); }
.hero__grid { display: grid; gap: var(--s-7); align-items: end; padding-top: var(--s-6); }
.hero__fig { margin: 0; display: flex; flex-direction: column; min-width: 0; }

@media (min-width: 1000px) {
  .hero__grid {
    width: 100%; max-width: none; margin-inline: 0;
    /* La marge se calcule sur 100% (largeur du bloc) et jamais sur 100vw, qui
       inclut la barre de defilement et provoquerait un debordement horizontal. */
    padding-left: max(var(--s-5), calc((100% - var(--wrap)) / 2));
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: clamp(var(--s-7), 4.5vw, var(--s-9));
    align-items: stretch;
    min-height: min(78vh, 820px);
  }
  .hero__col { display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--s-6); }
  .hero .finder {
    width: calc(100% + clamp(48px, 8vw, 168px));
    position: relative; z-index: 2;
  }
  .hero__fig { justify-content: stretch; }
  .hero__fig .hero__media { flex: 1; border: 0; }
  .hero__fig .hero__media img { height: 100%; aspect-ratio: auto; }
  .hero__fig .figure-note { padding-right: var(--s-5); border-top-color: var(--line-strong); }
}
.hero__col { container-type: inline-size; }
.hero h1 {
  font-size: clamp(2.7rem, 10.5cqi, 5.6rem);
  letter-spacing: -0.032em; line-height: 0.98; max-width: 13ch;
}
.hero h1 .accent { color: var(--accent); }
.hero__lede { margin-top: var(--s-5); font-size: var(--t-1); color: var(--ink-2); max-width: 46ch; }

.hero__dateline {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline;
  margin: 0; padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: var(--t--2); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__dateline b { font-weight: 400; color: var(--accent); }
.hero__dateline span:last-child { margin-left: auto; }

.reveal-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.reveal-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-line > span {
    animation: line-up 820ms var(--ease-soft) both;
    animation-delay: calc(var(--i, 0) * 80ms + 60ms);
  }
  @keyframes line-up { from { transform: translateY(108%); } }
  .fade-up {
    animation: fade-up 720ms var(--ease-soft) both;
    animation-delay: calc(var(--i, 0) * 70ms + 260ms);
  }
  @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
}

.hero__media { position: relative; overflow: hidden; border-radius: var(--r-media);
  border: 1px solid var(--line); background: var(--paper-3); }
.hero__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--paper-3);
}
.figure-note {
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line);
  font-size: var(--t--1); line-height: 1.5; color: var(--ink-3); max-width: 62ch;
}

/* Bandeau de rubrique : le visuel qui ouvre une page specialite, prestation,
   conseil ou outil. Pas de aspect-ratio impose : les attributs width/height de
   l'image portent deja son rapport exact, donc aucun recadrage parasite et
   aucun decalage de mise en page au chargement. */
.bandeau { margin: 0; }  /* l'espacement vient de la .section qui le porte */
.bandeau__media {
  overflow: hidden; border-radius: var(--r-media);
  background: var(--paper-3);
  /* Filets haut et bas seulement : l'image touche les bords de la fenetre,
     un filet lateral y serait absurde. */
  border-block: 1px solid var(--line);
}
.bandeau__media img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  /* Pleine largeur, mais ecretee : un 2.8:1 ferait 686 px de haut a 1920 px et
     repousserait tout le contenu sous la ligne de flottaison. max-height coupe,
     object-fit recadre au lieu de deformer. */
  /* width: 100% est indispensable, pas decoratif : avec width auto, une
     max-height qui ecrete fait recalculer la LARGEUR depuis la hauteur via le
     ratio (425 x 2.8 = 1190 px), et l'image cessait d'atteindre le bord droit. */
  .bandeau__media { width: 100%; aspect-ratio: 2.8 / 1; max-height: min(56vh, 560px); }
  .bandeau__media img { height: 100%; object-fit: cover; }
}
/* La legende reste sur la grille de lecture, alignee sur le texte de la page :
   une ligne de credit etalee sur 1920 px ne se lit pas. */
.bandeau > .wrap { margin-top: 0; }

.hero__facts {
  margin-top: var(--s-8); border-top: 1px solid var(--ink);
  display: grid; gap: 0; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hero__facts > div { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .hero__facts > div { padding: var(--s-6) var(--s-5) var(--s-5) 0; border-bottom: 0; position: relative; }
  .hero__facts > div + div { border-left: 1px solid var(--line); padding-left: var(--s-5); }
  /* petit tiret d'accent en tete de chaque fait */
  .hero__facts > div::before {
    content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px;
    background: var(--accent); border-radius: 2px;
  }
  .hero__facts > div + div::before { left: var(--s-5); }
}
.hero__facts dt { font-family: var(--font-mono); font-size: var(--t--1); color: var(--accent-deep); margin-bottom: 8px; letter-spacing: -0.01em; }
.hero__facts dd { margin: 0; font-size: 0.99rem; color: var(--ink-2); max-width: 40ch; }

/* --- 7b. Visuels de demonstration (placeholders dessines) ---------------- */
/* Pas de photo de banque aleatoire: un visuel duotone deterministe, honnete,
   qui ne peut pas se lire comme la realisation d'un salon (B06). En production,
   un <img> reel prend sa place sans changer la structure. */
.ph { position: relative; overflow: hidden; background: var(--paper-3); isolation: isolate; }
.ph img, .ph svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 12% 8%, oklch(100% 0 0 / 0.14), transparent 55%);
}
@media (prefers-color-scheme: dark) {
  .ph::after { background: radial-gradient(120% 90% at 12% 8%, oklch(100% 0 0 / 0.06), transparent 55%); }
}

/* --- 8. Module de recherche --------------------------------------------- */
.finder {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--ink); border-radius: var(--r-media);
  padding: var(--s-6); margin-top: var(--s-7);
}
.finder__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .finder__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; }
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: var(--t--1); font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: 400 var(--t-0)/1.4 var(--font-body);
  min-height: 48px; padding: 11px var(--s-4);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.field input::placeholder { color: var(--ink-3); }
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px oklch(52% 0.2 258 / 0.18);
}
/* Focus clavier: garder un contour net (visible en mode contrastes forces). */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.field__hint { font-size: var(--t--1); color: var(--ink-3); }
.field__error { font-size: var(--t--1); color: var(--accent-deep); font-weight: 500; }
.field--invalid input, .field--invalid select { border-color: var(--accent-deep); }
.finder__hint { margin: var(--s-4) 0 0; font-size: var(--t--1); color: var(--ink-3); }
.finder__quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5);
  padding-top: var(--s-5); border-top: 1px solid var(--line); }
.finder__quick a {
  font-size: var(--t--1); text-decoration: none; padding: 6px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-2);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.finder__quick a:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }

/* --- 9. Listes d'etablissements ----------------------------------------- */
.results { display: grid; gap: 0; }
.salon {
  display: grid; gap: var(--s-4); grid-template-columns: 104px minmax(0, 1fr);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4);
  position: relative; border-bottom: 1px solid var(--line);
  transition: background var(--dur-2) var(--ease-out);
}
.results::before {
  /* filet de tete, plus appuye : il ouvre le releve */
  content: ""; display: block; height: 1px; background: var(--ink);
}
.salon::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-2) var(--ease-out);
}
.salon:hover { background: var(--surface-2); }
.salon:hover::before, .salon:focus-within::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .salon::before { transition: none; } }
@media (min-width: 600px) { .salon { grid-template-columns: 156px minmax(0, 1fr); gap: var(--s-5); } }
.salon__media { position: relative; overflow: hidden; border-radius: var(--r-media);
  border: 1px solid var(--line); align-self: start; }
.salon__media img, .salon__media svg {
  aspect-ratio: 1; width: 100%; object-fit: cover;
  background: var(--paper-3); transition: transform var(--dur-3) var(--ease-out);
}
.salon:hover .salon__media img, .salon:hover .salon__media svg { transform: scale(1.04); }
.salon__title {
  font-family: var(--font-display); font-size: var(--t-1); letter-spacing: -0.02em; margin: 0 0 4px;
}
.salon__title a { text-decoration: none; }
.salon__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-4); }
.salon__title a:hover { color: var(--accent-deep); }
.salon__meta { font-size: var(--t--1); color: var(--ink-3); margin-bottom: var(--s-3); }
.salon__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.salon__why { font-size: 0.97rem; color: var(--ink-2); margin: 0 0 var(--s-3); max-width: 62ch; }
.salon__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  font-size: var(--t--1); position: relative; z-index: 1;
}
.salon__price { font-family: var(--font-mono); color: var(--ink); }
.salon--ad { background: var(--accent-wash); }
.salon--ad::before { transform: scaleY(1); }
.salon--ad:hover { background: oklch(from var(--accent-wash) calc(l - 0.02) c h); }
.salon[hidden] { display: none; }
.results__count { font-size: var(--t--1); color: var(--ink-3); margin-bottom: var(--s-4); }

.sort-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--surface-2); border-radius: var(--r-media);
  border: 1px solid var(--line);
  font-size: var(--t--1); color: var(--ink-2); margin-bottom: var(--s-5);
}
.sort-bar strong { color: var(--ink); }

/* --- 10. Tableaux de donnees -------------------------------------------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-media);
  background: var(--surface);
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 640px; }
table.data caption {
  text-align: left; padding: var(--s-4) var(--s-5); color: var(--ink-3);
  font-size: var(--t--1); border-bottom: 1px solid var(--line);
}
table.data th, table.data td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; }
table.data thead th {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--t--1);
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2);
}
table.data tbody tr + tr { border-top: 1px solid var(--line); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { font-family: var(--font-mono); white-space: nowrap; }
table.data .yes { color: var(--ink); font-weight: 500; }
table.data .no { color: var(--ink-3); }
table.data th[scope="row"] { font-weight: 600; }

/* --- 11. Blocs editoriaux ----------------------------------------------- */
.note { border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5);
  background: var(--surface); }
.note :is(h2, h3) { font-size: var(--t-1); letter-spacing: -0.015em; margin-bottom: var(--s-3); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note--alert { background: var(--accent-wash); border-color: oklch(from var(--accent) l c h / 0.4);
  border-left: 3px solid var(--accent); }
.note--alert :is(h2, h3) { color: var(--accent-deep); }

.answer { border-top: 2px solid var(--ink); padding-top: var(--s-4); margin-bottom: var(--s-6); }
.answer__label { font-family: var(--font-mono); font-size: var(--t--1); color: var(--accent-deep); margin-bottom: var(--s-2);
  letter-spacing: 0.04em; text-transform: uppercase; }
.answer p { font-size: var(--t-1); line-height: 1.45; color: var(--ink); margin-bottom: var(--s-3); }
.answer ul { font-size: 0.99rem; color: var(--ink-2); }

/* Bande sombre: toujours foncee, quel que soit le theme du visiteur. */
.band {
  background: var(--ink-fixed);
  color: var(--paper-fixed);
  padding-block: clamp(var(--s-7), 5.2vw, var(--s-9));
  position: relative;
  border-top: 2px solid var(--accent);
}
.band h2, .band h3 { color: var(--paper-fixed); }
.band .head p { color: oklch(from var(--paper-fixed) l c h / 0.76); }
.band .head__rule { background: oklch(from var(--paper-fixed) l c h / 0.28); }
.band .arrow-link { color: oklch(from var(--paper-fixed) l c h / 0.92); border-color: oklch(from var(--paper-fixed) l c h / 0.3); }
.band .arrow-link:hover { color: var(--paper-fixed); border-color: var(--accent-line); }
.band .figure-note { color: oklch(from var(--paper-fixed) l c h / 0.6); }

/* Grille de compétences : 1 col (téléphone) -> 2 col (tablette, lisible) ->
   6 col avec cartes larges/étroites (desktop, à partir de 1000px comme la nav).
   Passer directement à 6 col dès 760px rendait les cartes de texte trop denses. */
.spec-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: oklch(from var(--paper-fixed) l c h / 0.16);
  border-block: 1px solid oklch(from var(--paper-fixed) l c h / 0.16);
}
@media (min-width: 620px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .spec-grid { grid-template-columns: repeat(6, 1fr); } }
.spec {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  min-height: 200px; text-decoration: none;
  background: var(--ink-fixed); color: var(--paper-fixed);
  transition: background var(--dur-3) var(--ease-out);
}
@media (min-width: 1000px) {
  .spec { grid-column: span 2; min-height: 232px; }
  .spec--wide { grid-column: span 3; }
}
.spec:hover, .spec:focus-visible { background: var(--accent-deep); }
.spec__proof {
  font-family: var(--font-mono); font-size: var(--t--1); line-height: 1.4;
  color: var(--accent-line); transition: color var(--dur-3) var(--ease-out);
}
.spec:hover .spec__proof { color: oklch(from var(--paper-fixed) l c h / 0.88); }
.spec h3 { color: inherit; font-size: var(--t-2); margin-top: auto; }
.spec p { color: oklch(from var(--paper-fixed) l c h / 0.78); font-size: 0.95rem; margin: 0; max-width: 38ch;
  transition: color var(--dur-3) var(--ease-out); }
.spec:hover p { color: oklch(from var(--paper-fixed) l c h / 0.94); }
.spec__go { font-size: var(--t--1); display: inline-flex; gap: 8px; align-items: center;
  color: oklch(from var(--paper-fixed) l c h / 0.6); }
.spec__go span { transition: transform var(--dur-2) var(--ease-out); }
.spec:hover .spec__go { color: var(--paper-fixed); }
.spec:hover .spec__go span { transform: translateX(5px); }

.path { display: grid; gap: var(--s-5); align-items: start; padding-block: var(--s-6);
  border-top: 1px solid var(--line); counter-increment: parcours; }
@media (min-width: 900px) {
  .path { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); }
  .path:nth-of-type(even) .path__body { order: -1; }
}
/* Le numero porte l'accent, le verbe porte l'encre : le parcours se lit comme
   une clause numerotee, et le rouge reste une annotation. */
.path__verb {
  font-family: var(--font-display); font-size: var(--t-2); letter-spacing: -0.025em;
  color: var(--ink); display: flex; align-items: baseline; gap: var(--s-3);
}
.path__verb::before {
  content: counter(parcours, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t--2); letter-spacing: 0.14em;
  color: var(--accent); flex: none;
}
.path__steps {
  list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex;
  flex-wrap: wrap; gap: var(--s-2); font-size: var(--t--1); color: var(--ink-3); font-family: var(--font-mono);
}
.path__steps li { margin: 0; }
.path__steps li:not(:last-child)::after { content: " ›"; color: var(--accent-line); }

.link-cols { columns: 2; column-gap: var(--s-6); list-style: none; padding: 0; }
@media (min-width: 760px) { .link-cols { columns: 3; } }
@media (min-width: 1100px) { .link-cols { columns: 4; } }
.link-cols li { break-inside: avoid; margin-bottom: var(--s-2); }
.link-cols a { text-decoration: none; display: inline-block; padding-block: 4px; }
.link-cols a:hover { color: var(--accent-deep); }
.link-cols .mono { color: var(--ink-3); }

/* Le fil d'Ariane fait office de manchette sur les pages interieures : meme
   role que .hero__dateline sur l'accueil -- situer le document et le dater. */
.crumbs { padding-block: var(--s-3); font-size: var(--t--1); color: var(--ink-3);
  border-bottom: 1px solid var(--ink); }
.crumbs__row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between; }
.crumbs__date {
  margin: 0; font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/ "; color: var(--line-strong); }
/* Cible tactile: on porte le lien à ≥24px de haut (WCAG 2.2 SC 2.5.8) sans
   décaler la ligne, via une marge négative qui compense le padding. */
.crumbs a { text-decoration: none; color: var(--ink-3); display: inline-block; padding-block: 4px; margin-block: -4px; }
.crumbs a:hover { color: var(--ink); }

/* Le sommaire ne colle qu a partir du palier ou la colonne laterale existe
   (.with-toc a 1000px). En dessous il est empile dans le flux : sticky le
   laisserait plaque en haut de l ecran pendant tout le defilement. */
.toc { align-self: start; font-size: var(--t--1); }
@media (min-width: 1000px) { .toc { position: sticky; top: calc(68px + var(--s-4)); } }
.toc p { font-weight: 600; margin-bottom: 0; }
.toc ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; border-left: 1px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: 7px var(--s-4); text-decoration: none; color: var(--ink-3);
  border-left: 1px solid transparent; margin-left: -1px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.toc a:hover { color: var(--ink); border-color: var(--accent); }

/* Un enfant de grille a une taille minimale automatique egale a son contenu :
   une table a largeur minimale elargirait sinon toute la colonne (debordement mobile). */
.with-toc > *, .two-col > *, .hero__grid > *, .fiche__hero > *,
.form-grid > *, .offer > *, .head--split > *, .results > * { min-width: 0; }

.with-toc { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .with-toc { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-9); } }

.two-col { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-8); align-items: start; } }

/* --- 12. Fiche etablissement -------------------------------------------- */
.fiche__hero { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .fiche__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--s-8); align-items: start; }
}
/* Traitement unique des visuels de demonstration reels (photos) : monochrome +
   teinte d'accent, pour qu'une photo de banque ne se lise jamais comme la
   realisation d'un salon (B06). Les placeholders dessines utilisent .ph. */
.duo { position: relative; overflow: hidden; border-radius: var(--r-media); isolation: isolate; }
.duo img { filter: grayscale(1) contrast(0.96) brightness(1.18); background: var(--paper-3); }
.duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(205deg, oklch(62% 0.17 34 / 0.30), oklch(30% 0.04 265 / 0.26));
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .duo::after { mix-blend-mode: screen; opacity: 0.3; }
  .duo img { filter: grayscale(1) contrast(0.95) brightness(0.82); }
}

.fiche__media { overflow: hidden; border-radius: var(--r-media); border: 1px solid var(--line); }
.fiche__media img, .fiche__media svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--paper-3); }
.fiche__facts { display: grid; gap: 0; margin: var(--s-5) 0 0; }
.fiche__facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-4) 0; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .fiche__facts > div { grid-template-columns: 1fr; gap: 4px; } }
.fiche__facts dt { color: var(--ink-3); font-size: var(--t--1); }
.fiche__facts dd { margin: 0; }
.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img, .gallery svg { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-media);
  border: 1px solid var(--line); background: var(--paper-3); }
.gallery figcaption { font-size: var(--t--1); color: var(--ink-3); margin-top: 6px; }

/* Meme regle que .toc : le bloc de reservation ne colle qu en colonne laterale
   (.fiche__hero a 900px), jamais en pile mobile. */
.booking { border: 1px solid var(--line); border-top: 2px solid var(--ink);
  border-radius: var(--r-media); padding: var(--s-5); background: var(--surface); }
@media (min-width: 900px) { .booking { position: sticky; top: calc(68px + var(--s-4)); } }
.booking h2 { font-size: var(--t-2); margin-bottom: var(--s-3); }
.booking .btn { margin-bottom: var(--s-3); }

/* --- 13. Formulaires longs ---------------------------------------------- */
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-7); }
.fieldset legend { font-family: var(--font-display); font-size: var(--t-2); letter-spacing: -0.02em; padding: 0; margin-bottom: var(--s-2); }
.fieldset > p { color: var(--ink-2); margin-bottom: var(--s-5); }
.check { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent-deep); flex: none; }
.check label { font-size: 0.97rem; }
.check .small { display: block; color: var(--ink-3); margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
  display: inline-block; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t--1); cursor: pointer; user-select: none; background: var(--surface);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.chips label:hover { border-color: var(--ink-3); }
.chips input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

.result-card { border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5);
  background: var(--surface); }
.result-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.result-card dt { color: var(--ink-3); font-size: var(--t--1); }
.result-card dd { margin: 0; }
.result-card[hidden] { display: none; }

/* --- 14. Offres PRO ------------------------------------------------------ */
.offers { display: grid; gap: 0; border-top: 1px solid var(--line); }
.offer { display: grid; gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (min-width: 900px) { .offer { grid-template-columns: 210px minmax(0, 1fr) 230px; gap: var(--s-6); } }
.offer__name { font-family: var(--font-display); font-size: var(--t-2); letter-spacing: -0.025em; }
.offer__price { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink); }
.offer__price span { display: block; font-size: var(--t--1); color: var(--ink-3); font-family: var(--font-body); margin-top: 4px; }
.offer ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: 0.97rem; }

/* --- 15. Pied de page ---------------------------------------------------- */
.site-footer {
  background: var(--ink-fixed);
  color: oklch(from var(--paper-fixed) l c h / 0.78);
  border-top: 2px solid var(--accent);
  margin-top: var(--s-8); padding-block: var(--s-8) var(--s-6);
}
.site-footer a { color: oklch(from var(--paper-fixed) l c h / 0.78); text-decoration: none; }
.site-footer a:hover { color: var(--paper-fixed); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer h3 { color: var(--paper-fixed); font-size: var(--t--1); font-family: var(--font-mono); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
/* Le logotype est trop large pour une demi-colonne : sous 900px il prend toute
   la largeur. Sans cela, sa largeur minimale (un mot insecable a 38px) poussait
   la colonne voisine hors de l'ecran -- debordement horizontal a 320 et 360px. */
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-8); }
  .footer-grid > :first-child { grid-column: auto; }
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.footer-grid li { margin-bottom: 2px; }
/* Cible tactile confortable pour les liens du pied (≥24px), sur mobile surtout. */
.footer-grid li a { display: inline-block; padding-block: 5px; }
.footer-brand {
  font-family: var(--font-display); font-weight: 700; color: var(--paper-fixed);
  font-size: clamp(2rem, 7vw, 5.5rem); line-height: 0.88;
  letter-spacing: -0.045em; margin-bottom: var(--s-4);
}
.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid oklch(from var(--paper-fixed) l c h / 0.16);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; font-size: var(--t--1);
}

/* --- 16. Consentement ---------------------------------------------------- */
.consent {
  position: fixed; inset: auto var(--s-4) var(--s-4) var(--s-4); z-index: var(--z-toast);
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--r-3);
  padding: var(--s-5); max-width: 560px; margin-inline: auto;
  box-shadow: var(--shadow-3);
}
.consent[hidden] { display: none !important; }
.consent h2 { font-size: var(--t-1); margin-bottom: var(--s-3); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
@media (max-width: 600px) {
  .consent { padding: var(--s-4); }
  .consent__actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 300ms var(--ease-out) both; }
  @keyframes consent-in { from { opacity: 0; transform: translateY(10px); } }
}

/* --- 17. Animation pilotee par le scroll, sans JavaScript ----------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .head__rule {
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 70%;
      transform: scaleX(0);
    }
    @keyframes rule-draw { to { transform: scaleX(1); } }

    .on-scroll {
      animation: enter-up linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 44%;
    }
    @keyframes enter-up { from { opacity: 0; transform: translateY(26px); } }

    .hero__media img {
      animation: media-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes media-drift {
      from { transform: scale(1.1) translateY(-1.5%); }
      to   { transform: scale(1.02) translateY(1.5%); }
    }
  }
}

/* --- 18. Transitions entre pages ---------------------------------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 170ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 320ms var(--ease-soft) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }
  ::view-transition-group(salon-media) { animation-duration: 420ms; animation-timing-function: var(--ease-soft); }
}
.vt-salon-media { view-transition-name: salon-media; }

/* --- 19. Impression ------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .consent, .finder, .demo-strip, .booking { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}