/* ==========================================================================
   KEYS CONSULTING — Design system — VERSION 33.0
   Source : « Direction UI Digitale — Website MVP » (Claude Design, validé)
   + WEBSITE MVP — MASTER · KEYS CONSULTING (V1.5)

   Principes tenus par ce fichier :
   01 La page est une page — pas d'interface, pas de coin arrondi, pas d'ombre.
   02 Le vide a une fonction — 60 à 80 % de respiration.
   03 La tension Bodoni × Archivo — Bodoni aux seuls moments narratifs.
   04 La signalétique constante — filet + micro-label + folio à chaque section.
   05 Trois surfaces, une seule encre — crème par défaut, un lavis de navy à
      3,5 % pour le rythme, navy plein pour deux moments par page. Le principe
      d'origine disait « deux fonds, pas trois » ; le lavis en occupe 37 %, il
      est devenu une surface à part entière. Mise à jour du 26 août 2026 : on
      l'assume plutôt que de laisser la charte dire le contraire du site.
   06 Le prune décide — 5 % maximum, jamais un aplat.
   07 La numérotation est typographique — jamais un cercle, jamais une icône.
   08 Le mouvement porte — decision client du 26 aout 2026, qui leve le
      principe d'origine (« le mouvement est secondaire »). Ce qui tient
      toujours : rien de ce que dit le site ne depend d'une animation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — sous-ensemble latin + français, woff2 (264 Ko au lieu de 1,7 Mo)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/BodoniModa.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/BodoniModa-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Couleur — cinq encres, usage strict */
  --navy: #16213f;        /* ~22% — toute la typographie, deux aplats par page max */
  --offwhite: #fdfbf5;    /* ~70% — le papier */
  --champagne: #e9d7b4;   /* ~4%  — filets, numéros, légendes sur navy uniquement */
  --cashmere: #dfbca9;    /* ~3%  — surfaces teintées sur navy, jamais fond de page */
  --prune: #3b2144;       /* ≤5%  — un mot en italique, l'état actif, le focus */

  --navy-80: #3c4560;
  --navy-60: #5b6178;   /* assombri : 4,75:1 etait la marge la plus faible du site */
  --navy-40: #9da1b0;
  --navy-15: #dcdde2;
  --navy-08: #edeef0;

  --hairline: rgba(22, 33, 63, 0.18);
  --hairline-strong: rgba(22, 33, 63, 0.35);
  --hairline-inverse: rgba(253, 251, 245, 0.25);

  --surface-page: var(--offwhite);
  --surface-inverse: var(--navy);
  --surface-tint: #f7f2e6;

  --text-primary: var(--navy);
  --text-secondary: var(--navy-80);
  --text-muted: var(--navy-60);
  --text-inverse: var(--offwhite);
  --text-inverse-muted: rgba(253, 251, 245, 0.65);
  --text-accent: var(--prune);
  --text-accent-inverse: var(--champagne);

  /* Typographie */
  --font-serif: "Bodoni Moda", Didot, "Bodoni MT", serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --weight-display: 500;
  --weight-body: 400;
  --weight-medium: 500;

  --text-display: clamp(64px, 5.6vw + 24px, 116px);
  --text-h1-hero: clamp(44px, 5.4vw + 12px, 92px);
  --text-h2-statement: clamp(34px, 3.6vw + 10px, 64px);
  --text-h2-standard: clamp(26px, 1.6vw + 16px, 38px);
  --text-h3: 22px;
  --text-body-lg: 20px;
  --text-quote: 26px;     /* citation d'aplat, grand ecran uniquement */
  --text-body: 17px;
  --text-small: 14px;
  --text-eyebrow: 11px;
  --text-micro: 11px;
  --text-cta: 15px;

  --leading-display: 1.02;
  --leading-hero: 1.05;
  --leading-statement: 1.08;
  --leading-standard: 1.15;
  --leading-h3: 1.25;
  --leading-body-lg: 1.6;
  --leading-body: 1.65;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.22em;
  --tracking-micro: 0.28em;
  --tracking-cta: 0.01em;
  --tracking-label: 0.16em;

  --measure-body: 62ch;

  /* Grille & espacement — base 8 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;
  --space-8: 200px;

  --container-max: 1240px;
  --grid-gutter: 24px;
  --section-gap: var(--space-7);
  --page-margin: clamp(20px, 6vw, 96px);

  --radius-none: 0;
  --radius-full: 999px;

  /* Mouvement */
  --ease-editorial: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-header: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 0.18s;
  --duration-base: 0.32s;
  --duration-slow: 0.64s;
  --duration-wipe: 0.9s;

  /* Durée réservée aux retours d'état (survol, focus, accordéon).
     Volontairement distincte des durées décoratives : elle survit à
     prefers-reduced-motion, parce que supprimer un retour d'état
     n'est pas « réduire le mouvement », c'est retirer de l'information. */
  --duration-state: 0.15s;
}

@media (max-width: 1023px) {
  :root { --section-gap: var(--space-6); }
}
@media (max-width: 767px) {
  :root { --section-gap: var(--space-5); }
}

/* --------------------------------------------------------------------------
   Réduction de mouvement — nuancée, pas un interrupteur général.
   Le décoratif disparaît ; le retour d'état est préservé.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.001ms;
    --duration-base: 0.001ms;
    --duration-slow: 0.001ms;
    --duration-wipe: 0.001ms;
    /* --duration-state reste intact : survol, focus et accordéon
       continuent de répondre visiblement. */
  }

  html { scroll-behavior: auto; }

  /* Les révélations au scroll se posent d'emblée, sans mouvement. */
  [data-reveal],
  [data-headline] > span,
  [data-mark] > span,
  .nom__dev {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  [data-inverse] .section__bg { transform: none !important; transition: none !important; }
  .rule-draw { transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

:focus-visible {
  outline: 2px solid var(--prune);
  outline-offset: 3px;
}
.section--inverse :focus-visible { outline-color: var(--champagne); }

/* --------------------------------------------------------------------------
   Lien d'évitement — WCAG 2.4.1
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--page-margin);
  top: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--navy);
  color: var(--offwhite);
  padding: 14px 20px;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-cta);
  transition: transform var(--duration-state) var(--ease-header);
}
.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Primitives typographiques
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--inverse { color: var(--text-accent-inverse); }

.folio {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--text-muted);
  white-space: nowrap;
}

.num {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.section--inverse .num { color: var(--text-accent-inverse); }
.num--lg { font-size: clamp(28px, 2.4vw + 14px, 40px); }
.num--md { font-size: clamp(20px, 1vw + 14px, 24px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.section { padding-block: var(--section-gap); }

.section--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

/* Signalétique constante — le filet se dessine de gauche à droite */
.section__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
  position: relative;
}
.section__meta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-wipe) var(--ease-editorial);
}
.section__meta.is-visible::after { transform: scaleX(1); }
.section--inverse .section__meta::after { background: var(--hairline-inverse); }

.section__label {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--inverse .section__label { color: var(--text-inverse-muted); }

.hr { border: 0; border-top: 1px solid var(--hairline); }
.hr--strong { border-top: 1px solid var(--hairline-strong); }

/* --------------------------------------------------------------------------
   Mouvement — révélations
   -------------------------------------------------------------------------- */

/* Fondu + 12px, une seule fois, jamais mot par mot */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-slow) var(--ease-editorial),
    transform var(--duration-slow) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Titres — le filet qui glisse, décliné du geste signature « KEYS ».

   Le clip porte sur un enfant, jamais sur l'élément observé : clipper
   l'observé réduit son aire d'intersection à zéro, et IntersectionObserver
   ne le voit alors jamais entrer dans le viewport — il resterait masqué
   pour toujours. Le parent garde une boîte mesurable ; l'enfant se dévoile. */
[data-headline] > span {
  display: block;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:
    clip-path var(--duration-wipe) var(--ease-editorial),
    opacity 0.2s linear;
}
[data-headline].is-visible > span { clip-path: inset(0 0% 0 0); opacity: 1; }

/* Aplat navy — la couleur glisse, elle ne se pose pas */
[data-inverse] {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}
.section__bg {
  position: absolute;
  inset: 0;
  background: var(--surface-inverse);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-wipe) var(--ease-editorial);
}
[data-inverse].is-visible .section__bg { transform: scaleX(1); }
.section__inner { position: relative; }

/* Barre de progression de lecture */
/* L'ancienne barre de progression a ete remplacee par la regle graduee du bas
   de l'en-tete (passe 13). Les regles ci-dessous ne subsistent que pour la
   barre d'admin, qui decale encore un element portant cette classe. */

/* --------------------------------------------------------------------------
   CTA — « flèche solidaire », glissement d'encre au survol
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-cta);
  letter-spacing: var(--tracking-cta);
  padding-bottom: 3px;
}
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
}
.cta::before { background: currentColor; opacity: 0.35; }
.cta::after {
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-editorial);
}
.section--inverse .cta::after,
[data-inverse] .cta::after { background: var(--champagne); }
.cta:hover::after, .cta:focus-visible::after { transform: scaleX(1); }

.cta__arrow {
  display: inline-block;
  transition: transform var(--duration-state) var(--ease-editorial);
}
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid var(--hairline);
}

.header__bar {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 96px;
  contain: layout style;
  transition: height var(--duration-base) var(--ease-header);
}
.header.is-compressed .header__bar { height: 64px; }

.header__logo {
  display: block;
  width: 92px;
  height: auto;
  flex-shrink: 0;
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-header);
}
.header.is-compressed .header__logo { transform: scale(0.848); }

.header__nav { display: none; }

.navlink {
  position: relative;
  font-size: var(--text-small);
  padding-bottom: 6px;
  white-space: nowrap;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-state) var(--ease-editorial);
}
.navlink:hover::after { transform: scaleX(1); }
.navlink[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--text-primary);
}

.header__cta { display: none; }

.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 44 px de zone tactile au minimum : a 12 px de marge le bouton ne faisait
     que 31 px de haut, pour la commande la plus utilisee du site en mobile. */
  padding: 19px 12px;
  margin-right: -12px;
}
.burger span { width: 22px; height: 1px; background: var(--text-primary); display: block; }

.header__mobile-cta { border-top: 1px solid var(--hairline); }
.header__mobile-cta a {
  display: block;
  text-align: center;
  padding-block: var(--space-2);
  min-height: 44px;
  font-weight: var(--weight-medium);
  font-size: var(--text-cta);
  letter-spacing: var(--tracking-cta);
}

/* Menu plein écran */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--page-margin) var(--space-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-editorial), visibility var(--duration-base);

  /* En paysage sur téléphone, les quatre libellés et le CTA dépassent la
     hauteur disponible. Sans défilement, le CTA — l'objectif de conversion
     du site — devient inatteignable. overscroll-behavior empêche le scroll
     de se propager à la page derrière le panneau. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.menu__close { padding: 12px; margin-right: -12px; color: var(--text-inverse); }
.menu__nav {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.menu__link {
  /* Zone tactile : le texte seul ne faisait que 37 px de haut. */
  display: block;
  padding-block: 6px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1.1;
  color: var(--text-inverse);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-base) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial);
}
.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 120ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 180ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 240ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 300ms; }

.menu__cta {
  display: block; text-align: center;
  flex-shrink: 0;
  padding-block: var(--space-2);
  border: 1px solid var(--hairline-inverse);
  font-weight: var(--weight-medium);
  font-size: var(--text-cta);
  letter-spacing: var(--tracking-cta);
  color: var(--text-inverse);
  transition:
    background var(--duration-state) var(--ease-editorial),
    border-color var(--duration-state) var(--ease-editorial);
}
.menu__cta:hover {
  background: rgba(253, 251, 245, 0.08);
  border-color: var(--champagne);
}

body.menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .header__nav { display: flex; align-items: center; gap: var(--space-4); }
  .header__cta { display: inline-flex; }
  .burger, .header__mobile-cta { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--surface-inverse); color: var(--text-inverse); }

.footer__top {
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.footer__mark { width: 92px; height: auto; margin-bottom: var(--space-2); }
.footer__identity p { margin-top: var(--space-2); color: var(--text-inverse-muted); max-width: 32ch; }

.footer__col-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent-inverse);
  display: block;
  margin-bottom: var(--space-2);
}

.footer__nav { display: flex; flex-direction: column; gap: 10px; }
.footer__nav a,
.footer__contact a,
.footer__contact p,
.footer__social a {
  /* 24 px de hauteur minimum sur la cible, pas seulement sur le texte. */
  display: inline-block;
  padding-block: 5px;
  font-size: var(--text-small);
  color: var(--text-inverse-muted);
  transition: color var(--duration-state) var(--ease-editorial);
}
.footer__nav a:hover,
.footer__contact a:hover,
.footer__social a:hover { color: var(--text-inverse); }
.footer__contact a, .footer__contact p { display: block; margin-bottom: 6px; }

.footer__bottom {
  border-top: 1px solid var(--hairline-inverse);
  padding-block: var(--space-3);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--text-inverse-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer__legal a { display: inline-block; padding-block: 5px; color: inherit; transition: color var(--duration-state) var(--ease-editorial); }
.footer__legal a:hover { color: var(--text-inverse); }

@media (min-width: 700px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Blocs éditoriaux
   -------------------------------------------------------------------------- */

.h1-hero {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h1-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}
.h1-short {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h2-statement);
  line-height: var(--leading-statement);
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}
.h2-statement {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h2-statement);
  line-height: var(--leading-statement);
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
}
.h2-standard {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h2-standard);
  line-height: var(--leading-standard);
  letter-spacing: var(--tracking-display);
}
.h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.lede {
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--text-secondary);
  max-width: var(--measure-body);
}
.section--inverse .lede, [data-inverse] .lede { color: var(--text-inverse-muted); }

.body-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: var(--measure-body);
}
.small-text { font-size: var(--text-small); color: var(--text-muted); }
.accent { font-style: italic; color: var(--text-accent); }

/* Statement détaché, ouvert par un filet fort */
.statement {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  max-width: 48ch;
}
.section--inverse .statement, [data-inverse] .statement { border-top-color: var(--hairline-inverse); }

/* Liste filetée générique */
.ruled { border-top: 1px solid var(--hairline); }
.ruled > li, .ruled > .ruled__item {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-2);
  font-size: var(--text-body);
  display: flex;
  gap: var(--space-2);
}
.ruled--dash > li::before {
  content: "—";
  color: var(--text-muted);
  flex-shrink: 0;
}

/* align-items: center — sans quoi le CTA texte s'etire a la hauteur du
   bouton plein et son libelle reste colle en haut de sa boite. */
.cta-row {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Grille de piliers */
.piliers {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
}
.pilier { padding-block: var(--space-4); border-top: 1px solid var(--hairline); }
.piliers > .pilier:last-child { border-bottom: 1px solid var(--hairline); }
.pilier__num { display: block; margin-bottom: var(--space-2); }
.pilier__text { margin-top: var(--space-2); font-size: var(--text-body); color: var(--text-secondary); max-width: 42ch; }
.pilier__obj { margin-top: var(--space-2); font-size: var(--text-small); font-style: italic; color: var(--text-muted); max-width: 42ch; }

@media (min-width: 900px) {
  .piliers { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
  .pilier { border-top: 1px solid var(--hairline-strong); padding-block: var(--space-3) 0; }
  .piliers > .pilier:last-child { border-bottom: none; }
}

/* Bloc en deux moitiés */
.split { margin-top: var(--space-6); display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.split__half { padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); }
.split__title { display: block; margin-bottom: var(--space-3); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* Différences numérotées */
.diff { padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.split__half > .diff:first-of-type { border-top: none; }
.diff__num { display: block; margin-bottom: var(--space-1); }
.diff__title { font-weight: var(--weight-medium); font-size: var(--text-body); }
.diff__text { margin-top: 6px; font-size: var(--text-small); color: var(--text-secondary); max-width: 42ch; }

/* Engagements */
.engagements { margin-top: var(--space-5); }
.engagement {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.engagements > .engagement:last-child { border-bottom: 1px solid var(--hairline); }
.engagement__num { flex-shrink: 0; width: 2.4ch; }
.engagement__text { font-size: var(--text-body); color: var(--text-secondary); max-width: var(--measure-body); }

/* Grand ecran : deux colonnes.

   Les six engagements tenaient sur une seule colonne, filets pleine largeur
   et texte occupant le tiers gauche. Les autres listes du site (etapes,
   points de fonctionnement) passent deja en plusieurs colonnes au-dela de
   900 px ; celle-ci restait seule a ne pas le faire. */
@media (min-width: 1200px) {
  .engagements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
  }
  /* En grille, le dernier element n'est plus seul sur sa ligne : la derniere
     ligne compte deux cellules, ce sont elles qui portent le filet bas. */
  .engagements > .engagement:last-child { border-bottom: none; }
  .engagements > .engagement:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

.limit-block {
  margin-top: var(--space-6);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  padding: var(--space-5) var(--space-4);
}
.limit-block p {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  max-width: 52ch;
}

/* Grand ecran : le panneau se referme sur son texte.

   A pleine largeur de conteneur, la citation n'occupait que 45 % du bleu — le
   reste du panneau restait vide. Aucune mesure de lecture ne peut remplir
   1 500 px avec 180 signes : allonger la ligne rendrait le texte illisible
   avant de remplir la boite. C'est donc le panneau qui se cale sur le texte,
   pas l'inverse. Il devient une carte, ce qui rompt aussi la succession de
   bandes pleine largeur. */
@media (min-width: 1200px) {
  .limit-block {
    width: fit-content;
    max-width: 100%;
    padding: var(--space-5);
  }
  .limit-block p {
    font-size: var(--text-quote);
    line-height: 1.3;
    max-width: 46ch;
  }
}

/* Frise des six étapes (aperçu accueil) */
.frieze { margin-top: var(--space-6); display: flex; flex-direction: column; }
.frieze__step {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--hairline);
}
.frieze > .frieze__step:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) {
  .frieze { flex-direction: row; gap: var(--grid-gutter); }
  .frieze__step {
    flex: 1; flex-direction: column; align-items: flex-start;
    gap: var(--space-2);
    border-top: 1px solid var(--hairline-strong);
    border-bottom: none;
    padding-block: var(--space-3) 0;
  }
}

/* Catégories */
.categories { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; }
.category {
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body-lg);
}
.categories > .category:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 700px) { .categories { grid-template-columns: repeat(2, 1fr); column-gap: var(--grid-gutter); } }
@media (min-width: 1024px) { .categories { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Expertises
   -------------------------------------------------------------------------- */

.situations { margin-top: var(--space-5); }
.situation-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: var(--leading-h3);
}
.situation-answer {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.situations--desktop { display: none; }
.situations--mobile { border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) {
  .situations--desktop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
    border-bottom: 1px solid var(--hairline);
  }
  .situations--mobile { display: none; }
  .situation-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-top: 1px solid var(--hairline);
  }
}

/* Accordéon */
.accordion__item { border-top: 1px solid var(--hairline); }
.accordion__trigger {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  text-align: left;
}
.accordion__chevron {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--text-muted);
  transition: transform 260ms var(--ease-editorial);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--ease-editorial);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }

/* Piliers d'expertise */
.pilier-head { display: flex; align-items: baseline; gap: var(--space-3); }
.pilier-head__num {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  line-height: 1;
  color: var(--text-muted);
}
.block { margin-top: var(--space-5); max-width: var(--measure-body); }
.block__label { display: block; margin-bottom: var(--space-2); }

.items { margin-top: var(--space-5); }
.item { padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.items > .item:last-child { border-bottom: 1px solid var(--hairline); }
.item__title { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
.item__text { margin-top: 4px; font-size: var(--text-small); color: var(--text-secondary); max-width: var(--measure-body); }

/* Offre signature — la tension unique du système */
.item--signature {
  border-left: 2px solid var(--prune);
  background: var(--surface-tint);
  padding: var(--space-3);
}

.precision {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-style: italic;
  color: var(--text-muted);
  max-width: var(--measure-body);
}

/* Colonnes de clôture */
.cols { margin-top: var(--space-6); display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.col { padding-top: var(--space-3); border-top: 1px solid var(--hairline-inverse); }
.col__label { display: block; margin-bottom: var(--space-2); }
.col__text { font-size: var(--text-body); color: var(--text-inverse-muted); }
.col__text + .col__text { margin-top: var(--space-2); }
.price { font-family: var(--font-serif); color: var(--text-inverse); }
@media (min-width: 900px) { .cols { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); } }

/* --------------------------------------------------------------------------
   Méthode
   -------------------------------------------------------------------------- */

/* Le moment de conviction.

   `ch` se mesure sur la police de l'element ou la regle est ecrite. Poser la
   mesure sur le conteneur revenait donc a mesurer un titre de 64 px avec le
   corps de texte : le statement se retrouvait dans une colonne de 500 px,
   deux mots par ligne, onze lignes de haut. Chaque element porte desormais
   sa propre mesure, dans sa propre unite. */
.conviction { text-align: center; margin-inline: auto; padding-block: var(--space-4); }
/* `balance` egalise les lignes : sans lui, la derniere ligne d'un statement
   centre tombe souvent sur un mot seul. Non supporte = rendu actuel. */
.conviction .h2-statement { max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.conviction p { margin-top: var(--space-4); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-inverse-muted); max-width: 56ch; margin-inline: auto; }

.steps { margin-top: var(--space-5); }
.step {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-4);
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
.steps > .step:last-child { border-bottom: 1px solid var(--hairline); }
.step__identity { display: flex; align-items: baseline; gap: var(--space-2); }
.step__name { font-family: var(--font-serif); font-weight: var(--weight-display); font-size: var(--text-h3); }
.step__pilier { margin-top: 4px; font-size: var(--text-small); font-style: italic; color: var(--text-muted); }
.step__label { display: block; margin-bottom: 6px; }
.step__text { font-size: var(--text-body); color: var(--text-secondary); max-width: 46ch; }
@media (min-width: 900px) { .step { grid-template-columns: 1fr 1.3fr 1.3fr; gap: var(--grid-gutter); align-items: start; } }

/* Bloc d'arrêt — la seule surface encadrée du site */
.framed {
  border: 1px solid var(--hairline-strong);
  padding: var(--space-5) var(--page-margin);
}

/* Grand ecran : le cadre se remplit.

   Le titre a gauche, les trois paragraphes a droite. Sans cela le cadre
   s'etirait sur toute la largeur pendant que son contenu, borne par sa mesure
   de lecture, n'en occupait que la moitie. */
@media (min-width: 1200px) {
  .framed__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-6);
    align-items: start;
  }
  .framed__col > .lede { margin-top: 0; }
}

/* Points de fonctionnement */
.points { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; }
.point { padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.points > .point:last-child { border-bottom: 1px solid var(--hairline); }
.point__title { display: block; margin-bottom: var(--space-2); }
.point__text { font-size: var(--text-body); color: var(--text-secondary); max-width: 46ch; }
@media (min-width: 900px) {
  .points { grid-template-columns: repeat(2, 1fr); gap: var(--grid-gutter); }
  .point { border-top: 1px solid var(--hairline-strong); }
  .points > .point:last-child, .points > .point:nth-last-child(2) { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   À propos
   -------------------------------------------------------------------------- */

.two-col { margin-top: var(--space-6); display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.two-col__item { padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); }
@media (min-width: 900px) { .two-col { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

/* Le nom — moment signature */
.nom { padding-block: var(--space-6); text-align: center; }
.nom__mark {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: clamp(72px, 14vw, 168px);
  line-height: 1;
}
/* Même règle que les titres : le clip vit sur l'enfant, pas sur l'observé. */
.nom__mark > span {
  display: block;
  letter-spacing: 0.24em;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:
    clip-path 1.1s var(--ease-editorial),
    letter-spacing 1.1s var(--ease-editorial),
    opacity 0.3s linear;
}
.nom__mark.is-visible > span {
  clip-path: inset(0 0% 0 0);
  opacity: 1;
  letter-spacing: var(--tracking-display);
}
.nom__dev {
  margin-top: var(--space-5);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  color: var(--text-inverse-muted);
  max-width: 46ch;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-slow) var(--ease-editorial) 0.5s,
    transform var(--duration-slow) var(--ease-editorial) 0.5s;
}
.nom__mark.is-visible ~ .nom__dev { opacity: 1; transform: translateY(0); }
.nom__dev + .nom__dev { margin-top: var(--space-3); }

/* Attributs de marque */
.attributes { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; }
.attribute { padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.attributes > .attribute:last-child { border-bottom: 1px solid var(--hairline); }
.attribute__title { display: block; margin-bottom: 6px; }
.attribute__text { font-family: var(--font-serif); font-size: var(--text-h3); line-height: var(--leading-h3); }
@media (min-width: 700px) {
  .attributes { grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); }
  .attributes > .attribute:nth-child(3n + 1) { border-top: 1px solid var(--hairline-strong); }
}

/* Clauses de responsabilité */
.clauses { margin-top: var(--space-5); }
.clause {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-3);
  display: grid; gap: var(--space-2);
  grid-template-columns: 1fr;
}
.clauses > .clause:last-child { border-bottom: 1px solid var(--hairline); }
.clause__text { font-size: var(--text-body); color: var(--text-secondary); }
@media (min-width: 700px) { .clause { grid-template-columns: 1fr 2fr; align-items: baseline; gap: var(--grid-gutter); } }

/* Niveaux géographiques */
.levels { margin-top: var(--space-5); border-top: 1px solid var(--hairline); }
.level {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-3);
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
}
.level__label { font-family: var(--font-serif); font-weight: var(--weight-display); font-size: var(--text-h3); min-width: 9ch; }
.level__text { font-size: var(--text-body); color: var(--text-secondary); max-width: 46ch; }

/* --------------------------------------------------------------------------
   Contact — formulaire
   -------------------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr; }
.form-sidebar { margin-top: var(--space-6); }
@media (min-width: 1024px) {
  .form-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-7); align-items: start; }
  .form-sidebar { margin-top: 0; position: sticky; top: 120px; }
}

.form { margin-top: var(--space-5); }
.field { margin-top: var(--space-4); }
.field:first-child { margin-top: 0; }

.field__label {
  display: block;
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  margin-bottom: var(--space-2);
}
.field__optional { font-weight: var(--weight-body); color: var(--text-muted); }
.field__help { margin-top: 6px; font-size: var(--text-small); color: var(--text-muted); }

.control {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-none);
  background: var(--surface-page);
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-primary);
  transition: border-color var(--duration-state) var(--ease-editorial);
}
.control:hover { border-color: var(--navy-60); }
textarea.control { min-height: 9em; resize: vertical; }
.control[aria-invalid="true"] { border-color: var(--prune); border-width: 2px; }

.field__error { margin-top: 6px; font-size: var(--text-small); color: var(--prune); }

.radio-group { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.option {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 48px;
  cursor: pointer;
}
.option input { width: 20px; height: 20px; accent-color: var(--prune); margin-top: 3px; flex-shrink: 0; }
.option span { font-size: var(--text-body); padding-top: 2px; }
.option:hover span { color: var(--text-primary); }

.consent-text a { text-decoration: underline; text-underline-offset: 2px; }

.alert {
  margin-top: var(--space-4);
  border-left: 2px solid var(--prune);
  padding: var(--space-3);
  background: var(--surface-tint);
  font-size: var(--text-small);
}
.alert a { text-decoration: underline; }

.submit-row { margin-top: var(--space-5); }
.btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px var(--space-4);
  background: var(--navy);
  color: var(--offwhite);
  border: 1px solid var(--navy);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-cta);
  letter-spacing: var(--tracking-cta);
  transition:
    background var(--duration-base) var(--ease-editorial),
    border-color var(--duration-base) var(--ease-editorial);
}
.btn:hover:not(:disabled) { background: var(--prune); border-color: var(--prune); }
.btn:disabled { opacity: 0.7; cursor: not-allowed; }
.btn__arrow { transition: transform var(--duration-state) var(--ease-editorial); }
.btn:hover:not(:disabled) .btn__arrow { transform: translateX(4px); }

.form-microcopy { margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-muted); text-align: center; }

.next-steps { padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); }
.next-steps h2 { font-family: var(--font-serif); font-weight: var(--weight-display); font-size: var(--text-h3); line-height: var(--leading-h3); margin-bottom: var(--space-3); }
.next-step { padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.next-steps .next-step:last-child { border-bottom: 1px solid var(--hairline); }
.next-step__label { font-weight: var(--weight-medium); font-size: var(--text-body); }
.next-step__text { margin-top: 6px; font-size: var(--text-small); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Confirmation / 404
   -------------------------------------------------------------------------- */

/* Meme regle que le bloc de conviction : la mesure vit sur chaque element,
   dans son propre corps. Portee par le conteneur, elle mesurait un titre de
   64 px a l'aune du texte courant et le tassait dans 500 px. */
.centered-page {
  padding-block: var(--space-8) var(--space-7);
  margin-inline: auto;
  text-align: center;
}
.centered-page .h1-short { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.centered-page .lede,
.centered-page .rappel,
.centered-page .secours { max-width: 52ch; margin-inline: auto; }
.centered-page .rappel {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-strong);
  font-size: var(--text-body);
  color: var(--text-secondary);
}
.centered-page .secours { margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-muted); }
.centered-page a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Contenu éditorial WordPress — pages légales.
   L'éditeur produit du HTML libre ; ces règles l'habillent dans le
   système typographique sans que le rédacteur ait à connaître les classes.
   -------------------------------------------------------------------------- */

.page-content {
  margin-top: var(--space-5);
  max-width: var(--measure-body);
}

.page-content > * + * { margin-top: var(--space-3); }

.page-content h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h2-standard);
  line-height: var(--leading-standard);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-strong);
}

.page-content h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-top: var(--space-4);
}

.page-content p,
.page-content li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.page-content ul,
.page-content ol {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-3);
}

.page-content li {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.page-content ul > li::before {
  content: "—";
  color: var(--text-muted);
  flex-shrink: 0;
}

.page-content ol {
  counter-reset: keys-ol;
}

.page-content ol > li {
  counter-increment: keys-ol;
}

.page-content ol > li::before {
  content: counter(keys-ol, decimal-leading-zero);
  font-family: var(--font-serif);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 2.4ch;
}

.page-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline-strong);
  transition: text-decoration-color var(--duration-state) var(--ease-editorial);
}

.page-content a:hover { text-decoration-color: var(--prune); }

.page-content strong { font-weight: var(--weight-medium); color: var(--text-primary); }

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  display: block;
  overflow-x: auto;
}

.page-content th,
.page-content td {
  text-align: left;
  padding: var(--space-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
}

.page-content th {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}


/* ==========================================================================
   ETATS DE SURVOL & MOUVEMENT — passe 2

   Le principe 08 tient toujours : le mouvement reste secondaire, et rien de
   ce que dit le site n'en depend. Ce qui change ici, c'est la densite du
   retour : chaque ligne filetee, chaque numero, chaque lien repond au
   pointeur. Une page qui ne repond pas au survol se lit comme une image.
   ========================================================================== */

.pilier, .item, .engagement, .clause, .level, .step, .attribute,
.category, .point, .next-step, .situation-row, .frieze__step, .ruled > li {
  position: relative;
  transition:
    background var(--duration-base) var(--ease-editorial),
    padding-left var(--duration-base) var(--ease-editorial);
}

/* Le marqueur : un filet prune qui se deploie sur la ligne survolee — la
   meme grammaire que l'etat actif de la navigation, appliquee aux listes. */
.pilier::before, .item::before, .engagement::before, .clause::before,
.level::before, .step::before, .attribute::before, .category::before,
.point::before, .next-step::before, .situation-row::before,
.frieze__step::before, .ruled > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-editorial);
  pointer-events: none;
}

/* La liste a tirets porte deja un ::before (le tiret) : son filet passe en ::after */
.ruled > li::after { top: auto; bottom: -1px; }

@media (hover: hover) {
  .pilier:hover, .item:hover, .engagement:hover, .clause:hover,
  .level:hover, .step:hover, .attribute:hover, .point:hover,
  .next-step:hover, .situation-row:hover, .ruled > li:hover,
  .category:hover, .frieze__step:hover {
    background: rgba(22, 33, 63, 0.022);
    padding-left: var(--space-2);
  }

  .pilier:hover::before, .item:hover::before, .engagement:hover::before,
  .clause:hover::before, .level:hover::before, .step:hover::before,
  .attribute:hover::before, .category:hover::before, .point:hover::before,
  .next-step:hover::before, .situation-row:hover::before,
  .frieze__step:hover::before, .ruled > li:hover::after {
    transform: scaleX(1);
  }

  /* Le numero prend l'encre d'accent quand sa ligne est survolee */
  .pilier:hover .num, .engagement:hover .num,
  .step:hover .num, .frieze__step:hover .num { color: var(--prune); }

  /* L'offre signature garde sa tension propre : son filet s'epaissit */
  .item--signature:hover {
    padding-left: var(--space-3);
    background: var(--surface-tint);
    border-left-width: 3px;
  }
}

.item--signature { transition: border-left-width var(--duration-base) var(--ease-editorial); }

/* --------------------------------------------------------------------------
   Liens de texte — le filet se dessine sous le mot
   -------------------------------------------------------------------------- */

.page-content a, .centered-page a, .consent-text a, .alert a {
  text-decoration: none;
  background-image: linear-gradient(var(--prune), var(--prune));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-editorial);
  padding-bottom: 2px;
  box-shadow: inset 0 -1px 0 var(--hairline-strong);
}

@media (hover: hover) {
  .page-content a:hover, .centered-page a:hover,
  .consent-text a:hover, .alert a:hover { background-size: 100% 1px; }
}

/* --------------------------------------------------------------------------
   Logo, accordeon, champs
   -------------------------------------------------------------------------- */

.header__logo, .footer__mark {
  transition:
    opacity var(--duration-state) var(--ease-editorial),
    transform var(--duration-base) var(--ease-header);
}

.accordion__item { transition: background var(--duration-base) var(--ease-editorial); }
.accordion__trigger { transition: padding-left var(--duration-base) var(--ease-editorial); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { color: var(--prune); }

.option { padding-block: 4px; transition: color var(--duration-state) var(--ease-editorial); }
.control:focus { border-color: var(--prune); outline-offset: 1px; }

@media (hover: hover) {
  .header a:hover .header__logo { opacity: 0.72; }
  .footer__identity:hover .footer__mark { opacity: 0.85; }
  .accordion__item:hover { background: rgba(22, 33, 63, 0.022); }
  .accordion__trigger:hover { padding-left: var(--space-2); }
  .accordion__trigger:hover .accordion__chevron { color: var(--prune); }
  .option:hover span { color: var(--prune); }
}

/* --------------------------------------------------------------------------
   CTA magnetique — le libelle suit tres legerement le pointeur.
   Amplitude volontairement basse : on veut une reactivite percue, pas un
   effet de demonstration.
   -------------------------------------------------------------------------- */

.cta[data-magnetic], .btn[data-magnetic] {
  will-change: transform;
  transition: transform var(--duration-base) var(--ease-editorial);
}

/* --------------------------------------------------------------------------
   Folio de section — derive legere au scroll : la page respire sans que
   rien ne bouge vraiment.
   -------------------------------------------------------------------------- */

.section__label--folio {
  display: inline-block;
  transform: translateY(var(--folio-drift, 0px));
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Transition de page — fondu court a la sortie. Le navigateur laisse la page
   precedente a l'ecran pendant qu'il charge ; ce fondu rend l'attente lisible
   au lieu de la laisser figee.
   -------------------------------------------------------------------------- */

.is-leaving { opacity: 0; transition: opacity 0.22s var(--ease-editorial); }

@media (prefers-reduced-motion: reduce) {
  .is-leaving { opacity: 1; transition: none; }
  .section__label--folio { transform: none !important; }
  .cta[data-magnetic], .btn[data-magnetic] { transform: none !important; }

  /* Le survol demeure — c'est de l'information — mais sans deplacement */
  .pilier, .item, .engagement, .clause, .level, .step, .attribute,
  .category, .point, .next-step, .situation-row, .frieze__step,
  .ruled > li, .accordion__trigger {
    transition: background var(--duration-state) linear !important;
  }
  .pilier:hover, .item:hover, .engagement:hover, .clause:hover,
  .level:hover, .step:hover, .attribute:hover, .point:hover,
  .next-step:hover, .situation-row:hover, .ruled > li:hover,
  .category:hover, .frieze__step:hover, .accordion__trigger:hover {
    padding-left: 0 !important;
  }
}


/* ==========================================================================
   PASSE 3 — presence

   Trois partis pris, assumes :

   1. Le grain. Le systeme appelle le fond « le papier » ; il n'en avait que
      la couleur. Une trame tres basse densite lui donne la matiere. C'est du
      SVG inline : aucune requete, aucun fichier.
   2. Le micro-label colle. Pendant qu'une section defile, son label reste
      accroche en haut : le lecteur sait toujours ou il est. C'est le
      principe 04 (signaletique constante) pousse a sa conclusion.
   3. Les moments navy respirent. L'aplat se deploie, puis son contenu
      remonte legerement — l'evenement a une duree, pas seulement une entree.

   Ce que je n'ai pas fait, et pourquoi : pas de curseur personnalise (cout
   d'accessibilite reel, gain nul pour un cabinet), pas de revelation mot par
   mot (le systeme l'interdit explicitement, et c'est une bonne regle : ca
   date vite), pas de degrade ni de neon (hors palette).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le grain du papier
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
}

/* Sur les aplats navy, la trame eclaircit au lieu d'assombrir */
.section--inverse,
[data-inverse],
.footer,
.limit-block { position: relative; }

.section--inverse::after,
[data-inverse]::after,
.footer::after,
.limit-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: screen;
}

/* Le contenu passe devant la trame.
   Attention : ne jamais toucher `position` ici — le menu et la barre de
   progression sont `fixed`, les repasser en `relative` les fait retomber
   dans le flux (le panneau plein ecran ajoute alors sa hauteur a la page). */
.container { position: relative; z-index: 3; }
.header { z-index: 50; }
.menu { z-index: 60; }

/* --------------------------------------------------------------------------
   2. Le micro-label colle pendant que sa section defile
   -------------------------------------------------------------------------- */

/* Le micro-label restait accroche en haut pendant que sa section defilait.
   Idee abandonnee : sur les titres display, la bande tranche les lettres en
   plein milieu. La signaletique se lit tres bien a sa place, en tete de
   section — le sommaire d'ancres remplit le role de reperage sur les pages
   longues, sans ce cout visuel. */

/* --------------------------------------------------------------------------
   3. Les moments navy respirent — le contenu remonte apres le deploiement
   -------------------------------------------------------------------------- */

[data-inverse] .section__inner {
  transform: translateY(14px);
  transition: transform 1s var(--ease-editorial) 0.25s;
}

[data-inverse].is-visible .section__inner { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Courbes — une seule famille, plus tenue que le cubic-bezier par defaut
   -------------------------------------------------------------------------- */

:root {
  /* Sortie longue, entree franche : le mouvement s'installe puis se pose,
     sans rebond (le rebond date une interface). */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-header: cubic-bezier(0.32, 0.72, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .section--inverse::after,
  [data-inverse]::after,
  .footer::after,
  .limit-block::after { display: none; }

  [data-inverse] .section__inner { transform: none !important; transition: none !important; }
}


/* ==========================================================================
   PASSE 4 — ancres, parallaxe, efficacite
   ========================================================================== */

/* --------------------------------------------------------------------------
   Decalage d'ancre — sans cela, le header colle recouvre le titre vise.
   -------------------------------------------------------------------------- */

:target { scroll-margin-top: 160px; }
[id] { scroll-margin-top: 160px; }

/* --------------------------------------------------------------------------
   Sommaire d'ancres — colle sous le header, signale la section courante
   -------------------------------------------------------------------------- */

.anchornav {
  position: sticky;
  top: 96px;
  z-index: 40;
  background: var(--surface-page);
  border-bottom: 1px solid var(--hairline);
  transition: top var(--duration-base) var(--ease-header);
}

.is-header-compressed .anchornav { top: 64px; }

.anchornav__list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.anchornav__list::-webkit-scrollbar { display: none; }

.anchornav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  font-size: var(--text-small);
  color: var(--text-muted);
  padding-bottom: 6px;
  transition: color var(--duration-state) var(--ease-editorial);
}

.anchornav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .anchornav__link:hover { color: var(--text-primary); }
  .anchornav__link:hover::after { transform: scaleX(1); }
}

.anchornav__link.is-current {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.anchornav__link.is-current::after {
  transform: scaleX(1);
  background: var(--text-primary);
}

@media (max-width: 767px) {
  .anchornav__list { gap: var(--space-3); }
  .anchornav { top: 0; }
}

/* --------------------------------------------------------------------------
   Parallaxe — profondeur, pas spectacle.
   Le fond navy se deplace plus lentement que son contenu : l'aplat gagne en
   epaisseur sans que rien ne saute. Amplitude plafonnee a 40 px.
   -------------------------------------------------------------------------- */

[data-parallax] { will-change: transform; }

.section__bg {
  transform-origin: left center;
}

[data-inverse] .section__bg {
  /* La derive verticale se cumule au deploiement horizontal : on l'applique
     sur un conteneur separe pour ne pas ecraser scaleX. */
  top: -8%;
  bottom: -8%;
  inset-inline: 0;
}

.parallax-layer {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Le hero derive tres legerement en sortant du champ */
.hero-drift { transform: translate3d(0, var(--parallax-y, 0px), 0); }

/* --------------------------------------------------------------------------
   Retour en haut — apparait passe le premier ecran
   -------------------------------------------------------------------------- */

.totop {
  position: fixed;
  right: var(--page-margin);
  bottom: var(--space-4);
  z-index: 45;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-page);
  border: 1px solid var(--hairline-strong);
  color: var(--text-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--duration-base) var(--ease-editorial),
    visibility var(--duration-base),
    transform var(--duration-base) var(--ease-editorial),
    border-color var(--duration-state) var(--ease-editorial),
    background var(--duration-state) var(--ease-editorial);
}

.totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }

@media (hover: hover) {
  .totop:hover { border-color: var(--prune); background: var(--surface-tint); }
}

@media (max-width: 767px) { .totop { bottom: var(--space-3); } }

@media (prefers-reduced-motion: reduce) {
  .parallax-layer, .hero-drift { transform: none !important; }
  .totop { transition: opacity var(--duration-state) linear, visibility var(--duration-state); transform: none !important; }
  .anchornav { position: static; }
}


/* ==========================================================================
   PASSE 5 — couleur et details graphiques

   Le constat de depart : la palette validee prevoit champagne a ~4 % et
   cashmere a ~3 %. Ils etaient a zero. Les employer rapproche le site de sa
   spec au lieu de l'en eloigner — et c'est la que se trouve la couleur qui
   manquait, sans inventer une teinte hors charte.

   Le navy gagne du terrain par la nuance plutot que par le nombre d'aplats :
   un lavis tres clair donne le rythme, les aplats pleins restent des
   evenements (regle L13.7 intacte).
   ========================================================================== */

:root {
  /* Lavis de navy — un fond de rythme, pas un troisieme fond.
     C'est la meme encre, a 3,5 %. */
  --surface-wash: rgba(22, 33, 63, 0.035);
  /* Le meme lavis, mais opaque : le micro-label collant doit masquer le
     contenu qui defile dessous, donc il ne peut pas etre translucide. */
  --surface-wash-solid: #f5f3ef;
  --champagne-soft: rgba(233, 215, 180, 0.22);
  --cashmere-soft: rgba(223, 188, 169, 0.16);

  /* Champagne et cashmere sur creme : uniquement en SURFACE, jamais en encre.
     La charte les reserve au navy, et le contraste explique pourquoi —
     champagne sur creme vaut 1,35:1. En lavis tres dilue ils ne portent plus
     d'information, ils rechauffent le papier : c'est un usage legal. */
  --champagne-wash: rgba(233, 215, 180, 0.16);
  --champagne-veil: rgba(233, 215, 180, 0.32);

  /* Le prune reprend tous les roles d'encre que cashmere tenait a tort sur
     creme. 13,65:1 sur le papier, et c'est son role dans la charte :
     « le prune decide ». Jamais un aplat, seulement filets et marques. */
  --prune-line: rgba(59, 33, 68, 0.42);
  --prune-veil: rgba(59, 33, 68, 0.30);
  --prune-wash: rgba(59, 33, 68, 0.05);
}

/* --------------------------------------------------------------------------
   Rythme des sections — une bande sur deux prend le lavis
   -------------------------------------------------------------------------- */

.section--wash {
  background: var(--surface-wash);
  position: relative;
}

/* La bande porte un filet colore en tete : la couleur entre par le detail.
   Il etait champagne — soit 1,35:1 sur creme, donc invisible. Le prune tient
   le meme role et se voit. */
.section--wash::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--prune) 0%,
    var(--prune) 18%,
    var(--hairline) 18%,
    var(--hairline) 100%
  );
}

/* --------------------------------------------------------------------------
   Reperes de coupe — reference d'imprimerie, discrete.
   Deux traits en angle a l'ouverture de chaque section : la page se lit
   comme une planche.
   -------------------------------------------------------------------------- */

.section__meta { position: relative; }

.section__meta::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-left: 1px solid var(--prune-line);
  border-bottom: 1px solid var(--prune-line);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-editorial) 0.3s;
}

.section__meta.is-visible::before { opacity: 1; }

.section--inverse .section__meta::before,
[data-inverse] .section__meta::before {
  border-color: var(--champagne);
}

@media (max-width: 767px) { .section__meta::before { display: none; } }

/* --------------------------------------------------------------------------
   L'eyebrow gagne un tiret champagne
   -------------------------------------------------------------------------- */

.block__label::before,
.split__title::before,
.col__label::before,
.point__title::before,
.attribute__title::before,
.footer__col-title::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--prune-line);
}

.section--inverse .block__label::before,
[data-inverse] .col__label::before,
.footer__col-title::before { background: var(--champagne); }

/* --------------------------------------------------------------------------
   Les numeros prennent de la matiere sur navy
   -------------------------------------------------------------------------- */

.section--inverse .num,
[data-inverse] .num { color: var(--champagne); }

/* Le pilier de tete de page Expertises : chiffre en champagne translucide,
   il devient un element graphique et non plus seulement une legende. */
.pilier-head__num {
  color: var(--prune);
  /* 0,55 place le chiffre a 3,44:1 : le seuil du grand texte. En dessous il
     redevenait purement decoratif, alors qu'il porte le rang du pilier. */
  opacity: 0.55;
  transition: opacity var(--duration-slow) var(--ease-editorial);
}

.pilier-head:hover .pilier-head__num { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Surfaces teintees sur navy — le cashmere, comme le prevoit la charte
   -------------------------------------------------------------------------- */

[data-inverse] .col,
.section--inverse .col {
  border-top-color: var(--champagne-soft);
}

[data-inverse] .statement,
.section--inverse .statement {
  border-top-color: var(--champagne);
  padding-left: var(--space-3);
  border-left: 2px solid var(--cashmere);
}

/* Le bloc limite de l'accueil : une bande cashmere le signe */
.limit-block {
  border-left: 3px solid var(--cashmere);
}

/* --------------------------------------------------------------------------
   Le bloc encadre de la Methode — coins champagne
   -------------------------------------------------------------------------- */

.framed {
  position: relative;
  background: var(--surface-tint);
}

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--prune);
  border-style: solid;
}
.framed::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.framed::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}

/* --------------------------------------------------------------------------
   L'offre signature — le champagne rejoint le prune
   -------------------------------------------------------------------------- */

.item--signature {
  background: linear-gradient(
    to right,
    var(--surface-tint) 0%,
    var(--champagne-veil) 100%
  );
}

/* --------------------------------------------------------------------------
   Sommaire d'ancres — la section courante s'appuie sur le cashmere
   -------------------------------------------------------------------------- */

.anchornav { background: var(--surface-page); }
.anchornav__link.is-current::after { background: var(--prune); }

/* --------------------------------------------------------------------------
   Footer — un filet champagne ouvre la barre basse
   -------------------------------------------------------------------------- */

.footer__bottom { border-top-color: var(--champagne-soft); }

@media (prefers-reduced-motion: reduce) {
  .section__meta::before { opacity: 1; transition: none; }
}


/* Le label collant epouse le fond de sa section */
.section--wash .anchornav { background: var(--surface-wash-solid); }


/* ==========================================================================
   PASSE 6 — couleur active, barre de defilement, peps de l'accueil
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barre de defilement — navy sur creme, prune au survol
   -------------------------------------------------------------------------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--navy) var(--surface-tint);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-tint); }
::-webkit-scrollbar-thumb {
  background: var(--navy);
  border: 3px solid var(--surface-tint);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--prune); }
::-webkit-scrollbar-corner { background: var(--surface-tint); }

/* Sur les panneaux sombres, la barre s'inverse */
.menu { scrollbar-color: var(--champagne) rgba(253,251,245,.12); }
.menu::-webkit-scrollbar-track { background: rgba(253,251,245,.12); }
.menu::-webkit-scrollbar-thumb {
  background: var(--champagne);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Selection de texte — champagne, comme un surligneur
   -------------------------------------------------------------------------- */

::selection { background: var(--champagne); color: var(--navy); }
.section--inverse ::selection,
[data-inverse] ::selection,
.footer ::selection { background: var(--champagne); color: var(--navy); }

/* --------------------------------------------------------------------------
   Liens actifs — le prune prend la main
   -------------------------------------------------------------------------- */

/* Page courante dans la navigation : filet prune, plus seulement navy */
.navlink[aria-current="page"] {
  color: var(--prune);
  font-weight: var(--weight-medium);
}
.navlink[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--prune);
  height: 2px;
}

/* Le survol ne change plus la couleur ici : c'est la copie prune du libelle
   qui monte a sa place (passe 12). Deux effets pour un seul geste devenaient
   redondants. */

/* Menu mobile : l'entree courante se signale aussi */
.menu__link[aria-current="page"] { color: var(--champagne); }

@media (hover: hover) {
  .menu__link:hover { color: var(--champagne); }
}
.menu__link { transition: color var(--duration-state) var(--ease-editorial); }

/* Footer : le lien de la page courante */
.footer__nav a[aria-current="page"] { color: var(--champagne); }

/* La regle graduee de l'en-tete a remplace la barre de progression (passe 13). */

/* --------------------------------------------------------------------------
   Accueil — le peps
   -------------------------------------------------------------------------- */

/* Le mot qui decide : prune, italique. Exactement ce que prevoit la charte
   pour cette encre — « un mot en italique, l'etat actif, le focus ». */
.accent-word {
  color: var(--prune);
  font-style: italic;
}

/* L'eyebrow de section prend une pastille de couleur */
.section__label:first-child {
  position: relative;
  padding-left: 16px;
}
.section__label:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--prune);
  transform: scale(0);
  transition: transform var(--duration-base) var(--ease-editorial) 0.35s;
}
.section__meta.is-visible .section__label:first-child::before { transform: scale(1); }

.section--inverse .section__label:first-child::before,
[data-inverse] .section__label:first-child::before { background: var(--champagne); }

/* Le folio passe en prune : le repere de page devient un point de couleur */
.section__meta .section__label:last-child { color: var(--prune); }
.section--inverse .section__meta .section__label:last-child,
[data-inverse] .section__meta .section__label:last-child { color: var(--champagne); }

/* Numerotation coloree — mais lisible.
   Le cashmere avait ete essaye ici : 1,70:1 sur creme, tres en dessous du
   minimum, et la charte l'ecarte explicitement du registre typographique
   (« surfaces uniquement »). Le prune tient le role : 13,65:1, et c'est
   l'encre prevue pour l'accent. */
.pilier .num,
.engagement .num,
.frieze__step .num {
  color: var(--prune);
  opacity: 0.75;
  transition: opacity var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .pilier:hover .num,
  .engagement:hover .num,
  .frieze__step:hover .num { opacity: 1; }
}

/* Le statement de bascule s'appuie sur une barre prune */
.statement {
  border-left: 2px solid var(--prune);
  padding-left: var(--space-3);
  border-top: none;
  padding-top: 0;
}
.section--inverse .statement,
[data-inverse] .statement { border-left-color: var(--cashmere); border-top: none; }

/* Les categories : la ligne survolee prend un lavis champagne.
   En surface et tres dilue, le champagne est legal sur creme — c'est en
   encre qu'il ne l'est pas. */
@media (hover: hover) {
  .category:hover { background: var(--champagne-wash); }
}

/* Le CTA du hero : un fond plein pour le primaire, il doit se detacher */
.cta--solid {
  background: var(--navy);
  color: var(--offwhite);
  padding: 14px 22px;
  align-items: center;
}
.cta--solid::before, .cta--solid::after { display: none; }
.cta--solid:hover { background: var(--prune); }
.cta--solid { transition: background var(--duration-base) var(--ease-editorial); }

@media (prefers-reduced-motion: reduce) {
  .section__label:first-child::before { transform: scale(1); transition: none; }
}


/* ==========================================================================
   PASSE 7 — preuve : references et avis
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le ruban — defilement continu, sans saut.

   La piste contient deux copies de la liste et se translate de -50 % : au
   moment ou la premiere copie sort, la seconde occupe exactement sa place, et
   l'animation redemarre sans que rien ne bouge a l'ecran.
   -------------------------------------------------------------------------- */

.refs, .avis {
  overflow: hidden;
  position: relative;
  /* Les bords s'estompent : le ruban vient de nulle part et y retourne */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.refs__track, .avis__track {
  display: flex;
  width: max-content;
  animation: keys-marquee var(--marquee-duration, 46s) linear infinite;
}

@keyframes keys-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Le survol suspend : on doit pouvoir lire un nom qui passe */
@media (hover: hover) {
  .refs:hover .refs__track,
  .avis:hover .avis__track { animation-play-state: paused; }
}

/* Le clavier aussi : un lien focalise dans le ruban ne doit pas fuir */
.refs:focus-within .refs__track,
.avis:focus-within .avis__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   Les logos
   -------------------------------------------------------------------------- */

.refs__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-5);
  min-height: 96px;
}

.refs__logo {
  max-height: 46px;
  width: auto;
  /* Les logos clients arrivent avec des couleurs disparates : on les ramene
     a l'encre du site pour que le bandeau reste une ligne, pas un patchwork. */
  filter: grayscale(1) brightness(0) saturate(100%) opacity(0.42);
  transition: filter var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .refs__item:hover .refs__logo { filter: grayscale(1) brightness(0) saturate(100%) opacity(0.85); }
}

/* Pas de logo : le nom tient la place, en Bodoni */
.refs__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-editorial);
}
@media (hover: hover) { .refs__item:hover .refs__name { color: var(--prune); } }

/* Repli en grille quand les references sont peu nombreuses */
.refs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}
.refs__grid .refs__item { padding-inline: 0; min-height: 64px; }

/* --------------------------------------------------------------------------
   Les avis
   -------------------------------------------------------------------------- */

.section--avis { --marquee-duration: 64s; }

.avis__item {
  flex: 0 0 auto;
  width: min(440px, 82vw);
  margin: 0;
  margin-inline-end: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-tint);
  border-left: 2px solid var(--prune-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-left-color var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .avis__item:hover { border-left-color: var(--prune); }
}

.avis__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  color: var(--text-primary);
}
.avis__quote p { margin: 0; }
.avis__quote p + p { margin-top: var(--space-2); }

/* Les guillemets ouvrants, en gros, comme une lettrine */
.avis__quote::before {
  content: "«";
  display: block;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--prune-veil);
  margin-bottom: var(--space-1);
}

.avis__author {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

.avis__name {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
}

.avis__role {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--text-muted);
}

.avis__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.avis__grid .avis__item { width: auto; margin-inline-end: 0; }

/* --------------------------------------------------------------------------
   Mouvement reduit — le ruban devient une liste, il ne disparait pas
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .refs, .avis {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }
  .refs__track, .avis__track {
    animation: none;
    width: auto;
  }
  /* La copie de relais n'a plus lieu d'etre : elle ferait doublon a la lecture */
  .refs__item[aria-hidden="true"],
  .avis__item[aria-hidden="true"] { display: none; }
}

/* Liste trop courte pour boucler : le ruban se pose au lieu de tourner dans le vide */
.refs.is-static, .avis.is-static {
  -webkit-mask-image: none;
  mask-image: none;
}
.refs.is-static .refs__track,
.avis.is-static .avis__track {
  animation: none;
  justify-content: center;
  width: 100%;
}
.refs.is-static .refs__item[aria-hidden="true"],
.avis.is-static .avis__item[aria-hidden="true"] { display: none; }


/* ==========================================================================
   PASSE 8 — le mouvement gagne en tenue
   ========================================================================== */

/* --------------------------------------------------------------------------
   La revelation prend une echelle.

   Un fondu seul se lit comme une apparition ; un fondu accompagne d'un
   deplacement et d'un tres leger agrandissement se lit comme un objet qui
   se pose. 0,985 suffit — au-dela, ca devient un effet.
   -------------------------------------------------------------------------- */

[data-reveal] {
  transform: translateY(14px) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 0.72s var(--ease-editorial),
    transform 0.72s var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible { transform: translateY(0) scale(1); }

/* --------------------------------------------------------------------------
   Le chiffre du pilier reste accroche pendant que son chapitre defile.

   Sur Expertises, chaque pilier est un chapitre long. Le grand 01 / 02 / 03
   se fige en haut le temps de la lecture : on sait toujours dans lequel on
   se trouve, et le chiffre devient un reperage plutot qu'une vignette.
   -------------------------------------------------------------------------- */

/* 900px : le meme point de rupture que le reste du site — au-dessous, la
   navigation passe en burger et le collage n'aurait plus de sens. */
@media (min-width: 900px) {
  .pilier-head {
    position: sticky;
    top: 140px;
    z-index: 2;
    align-items: flex-start;
  }

  .pilier-head__num {
    line-height: 0.82;
    transition:
      opacity var(--duration-slow) var(--ease-editorial),
      transform var(--duration-slow) var(--ease-editorial);
  }

  /* Le chapitre defile : le chiffre s'efface doucement sans disparaitre */
  .pilier-head.is-pinned .pilier-head__num {
    opacity: 0.32;
    transform: scale(0.86);
  }
  .pilier-head.is-pinned .h2-standard { opacity: 0.55; }
  .pilier-head .h2-standard { transition: opacity var(--duration-slow) var(--ease-editorial); }
}

/* --------------------------------------------------------------------------
   Les aplats navy suivent le pointeur.

   Une nappe de lumiere tres basse, centree sur le curseur. Sur une grande
   surface unie, c'est ce qui fait la difference entre une zone imprimee et
   une zone vivante — sans rien ajouter de visible au repos.
   -------------------------------------------------------------------------- */

.section--inverse, [data-inverse] { position: relative; }

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-editorial);
  background: radial-gradient(
    420px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(233, 215, 180, 0.10),
    transparent 62%
  );
  z-index: 1;
}

.section--inverse.is-lit .glow,
[data-inverse].is-lit .glow { opacity: 1; }

/* --------------------------------------------------------------------------
   La barre de progression reagit a la vitesse de defilement.
   Un scroll rapide l'epaissit legerement : le mouvement de la page se lit
   dans son propre indicateur.
   -------------------------------------------------------------------------- */

/* L'epaississement au defilement rapide vit desormais sur .header__scale. */

/* --------------------------------------------------------------------------
   Le CTA plein : la fleche part, le fond suit
   -------------------------------------------------------------------------- */

.cta--solid {
  position: relative;
  overflow: hidden;
}

.cta--solid > span { position: relative; z-index: 1; }

.cta--solid::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease-editorial);
  z-index: 0;
}

.cta--solid:hover::after,
.cta--solid:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Le logo se pose au premier chargement
   -------------------------------------------------------------------------- */

.header__logo {
  animation: keys-logo-in 0.9s var(--ease-editorial) both;
}

@keyframes keys-logo-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header.is-compressed .header__logo { animation: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none !important; }
  .pilier-head { position: static !important; }
  .pilier-head.is-pinned .pilier-head__num,
  .pilier-head.is-pinned .h2-standard { opacity: 1 !important; transform: none !important; }
  .glow { display: none; }
  .header__logo { animation: none; }
  .cta--solid::after { transition: none; }
}


/* ==========================================================================
   PASSE 9 — cohabitation avec WordPress
   ========================================================================== */

/* --------------------------------------------------------------------------
   La barre d'administration.

   Quand un utilisateur est connecte, WordPress ajoute une barre fixe de 32 px
   (46 px en mobile) et pousse le document d'autant. Un header colle a top:0
   se retrouve alors *derriere* cette barre : il colle, mais on ne le voit
   plus. C'est le symptome « le menu ne suit pas ».

   Les elements collants doivent donc partir sous la barre, pas sous le bord
   du viewport.
   -------------------------------------------------------------------------- */

body.admin-bar .header { top: 32px; }
body.admin-bar .anchornav { top: calc(96px + 32px); }
body.admin-bar.is-header-compressed .anchornav,
.is-header-compressed body.admin-bar .anchornav { top: calc(64px + 32px); }
body.admin-bar .menu { top: 32px; }
body.admin-bar .pilier-head { top: calc(140px + 32px); }
body.admin-bar .form-sidebar { top: calc(120px + 32px); }
body.admin-bar .skip-link { top: 32px; }

/* En dessous de 783 px, WordPress passe la barre a 46 px — et elle cesse
   d'etre fixe : elle defile avec la page. Les elements collants reprennent
   donc leur position normale. */
@media screen and (max-width: 782px) {
  body.admin-bar .header,
  body.admin-bar .menu,
  body.admin-bar .skip-link { top: 0; }
  body.admin-bar .anchornav { top: 0; }
}

/* --------------------------------------------------------------------------
   overflow-x — `clip` plutot que `hidden` la ou le navigateur le sait.

   `overflow-x: hidden` fait du body un conteneur de defilement, ce qui casse
   `position: sticky` sur plusieurs versions de Safari. `overflow: clip` coupe
   le debordement sans creer ce conteneur : meme resultat visuel, sticky intact.
   -------------------------------------------------------------------------- */

@supports (overflow: clip) {
  body { overflow-x: clip; }
}


/* --------------------------------------------------------------------------
   Grands ecrans — le contenu cesse de flotter.

   La charte fixe le contenu a 1240 px, et cette valeur tombe juste a 1440 px
   d'ecran : les marges y valent 100 px, exactement les « 96 → 120 px »
   specifies. Au-dela, en revanche, la colonne se retrouve isolee au milieu
   d'un grand vide — 65 % de la largeur occupee en 1920, 48 % en 2560.

   Le contenu s'elargit donc progressivement, sans jamais depasser la mesure
   de lecture : les paragraphes restent bornes par --measure-body, seule la
   composition respire.
   -------------------------------------------------------------------------- */

/* Le retrait du texte oscillait de 135 a 209 px selon la largeur, parce que
   des paliers fixes croisaient une marge interieure deja fluide. Une largeur
   fixe ne peut pas tenir une marge constante sur un intervalle : c'est donc
   le conteneur qui devient fluide, borne par le plafond du palier suivant.
   Le retrait se stabilise alors autour de 175 px, la valeur que produit le
   1240 px de la charte a 1440 px d'ecran. */
@media (min-width: 1480px) {
  :root { --container-max: min(1560px, calc(100% - 170px)); }
}

@media (min-width: 1600px) {
  :root {
    /* La marge exterieure fait deja respirer : la marge interieure peut
       se resserrer, sinon les deux se cumulent et le texte recule encore. */
    --page-margin: 72px;
  }
}

@media (min-width: 1900px) {
  :root {
    --container-max: 1720px;
    --page-margin: 80px;
  }
}

@media (min-width: 2400px) {
  :root {
    --container-max: 1880px;
  }
}


/* --------------------------------------------------------------------------
   Clotures navy sur grand ecran — deux colonnes.

   Les blocs de texte sont bornes par leur mesure de lecture, ce qui est juste :
   un paragraphe de 1500 px de large ne se lit pas. Mais sur un ecran large,
   l'aplat navy occupe toute la largeur pendant que son contenu reste tasse a
   gauche — la moitie droite reste vide sans raison.

   Le statement passe donc a gauche, le paragraphe et le CTA a droite. Chacun
   garde sa mesure ; c'est la composition qui occupe la largeur.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .cta-final-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-7);
    align-items: start;
  }

  .cta-final-grid .h2-standard {
    max-width: 15ch;
    font-size: var(--text-h2-statement);
    line-height: var(--leading-statement);
  }

  .cta-final-grid__col > .lede { margin-top: 0; }
}

/* Sous 1200 px, la grille n'existe pas : la colonne redevient un simple flux */
.cta-final-grid__col > .lede { margin-top: var(--space-3); }

/* La section « avec qui nous travaillons » gagne aussi a s'etaler */
@media (min-width: 1600px) {
  .categories { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   PASSE 10 — LA TRAJECTOIRE

   Un graphique qui se parcourt au curseur. Il n'affiche aucune donnee
   chiffree : les trois lignes horizontales sont les trois piliers du
   cabinet, l'axe est nomme, et la legende le dit explicitement.

   Amelioration progressive : le module ne remplace la liste que si le JS
   l'a arme (.is-ready) ET qu'il y a la place. Sinon la liste reste le
   contenu, ce qui vaut aussi pour l'impression et les lecteurs d'ecran.
   ========================================================================== */

.traj { margin-top: var(--space-5); }

.traj__plot,
.traj__panel { display: none; }

@media (min-width: 900px) {
  .traj.is-ready .traj__plot,
  .traj.is-ready .traj__panel { display: block; }
  .traj.is-ready .traj__list { display: none; }
}

/* ---- Le trace ---------------------------------------------------------- */

.traj__plot {
  position: relative;
  /* Le lavis champagne rechauffe le papier sous le trace. En surface et a
     16 % il ne porte aucune information : usage legal sur creme. */
  background:
    linear-gradient(180deg, var(--champagne-wash) 0%, rgba(233, 215, 180, 0) 62%);
  padding-block: var(--space-3);
  cursor: crosshair;
  touch-action: pan-y;
}

.traj__stage { position: relative; }

/* width:100% + height:auto garde la boîte rendue au ratio exact du viewBox
   (1200 × 340). Les couches HTML peuvent donc se positionner en pourcentage
   des mêmes coordonnées, sans jamais dériver. preserveAspectRatio="none" rend
   la correspondance strictement linéaire. */
.traj__svg { display: block; width: 100%; height: auto; }

/* Les étiquettes vivaient dans le SVG et se redimensionnaient avec lui —
   elles rendaient à 13 px ou 16 px selon la largeur, deux tailles absentes de
   l'échelle typographique. En HTML par-dessus, elles reprennent les jetons. */
.traj__labels { position: absolute; inset: 0; pointer-events: none; }

.traj__pt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  opacity: 0;
}
.traj.is-drawn .traj__pt {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-editorial) var(--node-delay, 0ms);
}

.traj__lane {
  stroke: var(--hairline);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.traj__lane-label {
  position: absolute;
  left: 0;
  top: var(--y);
  transform: translateY(-50%);
  width: calc(176 / 1200 * 100%);
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Deux couches : le parcours complet en retrait, le trace par-dessus. */
.traj__track {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 2;
}

.traj__line {
  fill: none;
  stroke: var(--prune);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* --traj-len est pose par le JS depuis getTotalLength(). */
  stroke-dasharray: var(--traj-len, 0);
  stroke-dashoffset: var(--traj-len, 0);
}

.traj.is-drawn .traj__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s var(--ease-editorial);
}

/* ---- Les noeuds -------------------------------------------------------- */

.traj__node { opacity: 0; }
.traj.is-drawn .traj__node {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-editorial) var(--node-delay, 0ms);
}

.traj__halo {
  fill: var(--prune);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition:
    opacity var(--duration-state) var(--ease-editorial),
    transform var(--duration-state) var(--ease-editorial);
}

.traj__dot {
  fill: var(--surface-page);
  stroke: var(--navy-60);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill var(--duration-state) var(--ease-editorial),
    stroke var(--duration-state) var(--ease-editorial),
    transform var(--duration-state) var(--ease-editorial);
}

.traj__num,
.traj__name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: color var(--duration-state) var(--ease-editorial);
}

.traj__num {
  bottom: 16px;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: 1;
  color: var(--text-secondary);
}

.traj__name {
  top: 18px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1;
  color: var(--text-secondary);
}

/* L'etape active — jamais signalee par la couleur seule : le point grossit,
   le halo apparait, et le panneau nomme l'etape en toutes lettres. */
.traj__node.is-active .traj__halo { opacity: 0.1; transform: scale(1); }
.traj__node.is-active .traj__dot {
  fill: var(--prune);
  stroke: var(--surface-page);
  transform: scale(1.25);
}
.traj__pt.is-active .traj__num { color: var(--prune); }
.traj__pt.is-active .traj__name { color: var(--prune); font-weight: var(--weight-medium); }

/* ---- Le repere qui suit le curseur ------------------------------------- */

.traj__cursor { opacity: 0; transition: opacity var(--duration-base) var(--ease-editorial); }
.traj__plot.is-scrubbing .traj__cursor { opacity: 1; }

.traj__guide {
  stroke: var(--prune-line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.traj__rider {
  fill: var(--prune);
  stroke: var(--surface-page);
  stroke-width: 2;
}

/* ---- Les commandes ----------------------------------------------------- */

.traj__controls { position: absolute; inset: 0; }

.traj__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hit-x);
  width: 104px;
  margin-left: -52px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  appearance: none;
}

.traj__hit:focus-visible {
  outline: 2px solid var(--prune);
  outline-offset: -4px;
}

/* ---- Le panneau de detail ---------------------------------------------- */

.traj__panel {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-strong);
  max-width: 62ch;
}

.traj__panel-pilier {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--prune);
}

.traj__panel-nom {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.traj__panel-produit {
  margin-top: 6px;
  font-size: var(--text-body);
  color: var(--text-secondary);
}

/* Le contenu du panneau se renouvelle : un fondu court signale le changement
   sans faire clignoter la zone live. */
.traj__panel.is-swapping .traj__panel-pilier,
.traj__panel.is-swapping .traj__panel-nom,
.traj__panel.is-swapping .traj__panel-produit {
  opacity: 0;
  transform: translateY(4px);
}
.traj__panel-pilier,
.traj__panel-nom,
.traj__panel-produit {
  transition:
    opacity var(--duration-fast) linear,
    transform var(--duration-fast) var(--ease-editorial);
}

/* ---- La liste — contenu par defaut ------------------------------------- */

.traj__list {
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.traj__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.traj__list > .traj__item:last-child { border-bottom: 1px solid var(--hairline); }

.traj__item-nom {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
}

.traj__item-pilier {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  font-style: italic;
  color: var(--text-muted);
}

.traj__item-produit {
  margin-top: 6px;
  font-size: var(--text-body);
  color: var(--text-secondary);
  max-width: 52ch;
}

.traj__caption {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  font-style: italic;
  color: var(--text-muted);
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  /* Le trace ne se dessine plus, il est la. Le reperage au curseur reste :
     c'est une reponse directe a un geste, pas une animation decorative. */
  .traj__line { stroke-dashoffset: 0; }
  .traj__node,
  .traj__pt { opacity: 1; }
}


/* ==========================================================================
   PASSE 11 — LE MOUVEMENT PASSE AU PREMIER PLAN

   Decision client du 26 aout 2026 : le principe 08 du fichier — « le
   mouvement est secondaire, trois gestes seulement » — est leve. Le site
   anime desormais ses titres, ses rubans et son trace.

   Ce qui ne bouge pas, en revanche : rien de ce que dit le site ne depend
   d'une animation. Chaque etat anime a un etat final lisible, atteint
   immediatement en mouvement reduit ou sans JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titres — les mots montent en decale
   -------------------------------------------------------------------------- */

/* Le mot porte le masque, l'enfant porte le mouvement : masquer l'element
   observe reduirait son aire d'intersection et l'observateur ne le verrait
   jamais entrer. Meme regle que les titres a volet. */
.h2-standard.is-split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Bodoni descend sous la ligne de base : sans marge, le masque coupe les
     jambages des p et des g. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.h2-standard.is-split .word > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 0.72s var(--ease-editorial) var(--word-delay, 0ms),
    opacity 0.4s linear var(--word-delay, 0ms);
}

.h2-standard.is-split-in .word > span {
  transform: translateY(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Rubans — la vitesse suit le defilement
   -------------------------------------------------------------------------- */

.refs__track, .avis__track {
  /* La duree de base est calculee par le JS pour une vitesse constante en
     px/s ; le boost la divise, il ne la remplace pas. */
  animation-duration: calc(var(--marquee-duration, 46s) / var(--marquee-boost, 1));
  /* Pas d'inversion de sens ici : `animation-direction` fait sauter une
     animation CSS en cours au point miroir. Un ruban qui repart en arriere
     proprement demande un defilement pilote en JS image par image — a faire
     le jour ou il y aura des logos a y mettre. */
}

/* --------------------------------------------------------------------------
   Titre de tete — deux plans au pointeur
   -------------------------------------------------------------------------- */

[data-headline], .h1-long, .h1-short {
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0);
  transition: transform 0.5s var(--ease-editorial);
}

/* --------------------------------------------------------------------------
   Les listes filetees s'ouvrent au survol — le filet prend la couleur et
   se deploie depuis la gauche.
   -------------------------------------------------------------------------- */

.engagement, .traj__item, .point, .category {
  position: relative;
  transition: background var(--duration-state) var(--ease-editorial);
}

.engagement::after,
.traj__item::after,
.point::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-editorial);
}

@media (hover: hover) {
  .engagement:hover::after,
  .traj__item:hover::after,
  .point:hover::after { transform: scaleX(1); }

  .engagement:hover .num,
  .traj__item:hover .num { color: var(--prune); }
}

/* --------------------------------------------------------------------------
   Champagne — la chaleur du papier

   Toujours en surface, jamais en encre : sur creme le champagne vaut
   1,35:1, il ne peut porter aucune information. Dilue, il rechauffe.
   -------------------------------------------------------------------------- */

/* La premiere section de chaque page recoit un lavis qui s'eteint : la page
   s'ouvre sur une lumiere chaude et redevient papier. */
main > .section:first-of-type {
  background-image:
    linear-gradient(180deg, var(--champagne-wash) 0%, rgba(233, 215, 180, 0) 55%);
}

/* Le cadre de la Methode et les cartes d'avis prennent la meme chaleur. */
.framed { background-image: linear-gradient(150deg, var(--champagne-wash), rgba(233, 215, 180, 0) 60%); }
.avis__item { background-image: linear-gradient(160deg, var(--champagne-wash), rgba(233, 215, 180, 0) 70%); }

/* Sur navy, le champagne redevient une encre — c'est son terrain. */
[data-inverse] .traj__lane-label,
.section--inverse .traj__lane-label { fill: var(--champagne); }

/* --------------------------------------------------------------------------
   Prune — l'accent qui decide

   Il gagne les marques de reperage de la page. Jamais un aplat : des
   filets, des points, des chiffres.
   -------------------------------------------------------------------------- */

/* Le folio de section prend un point prune devant lui. */
.section__meta .section__label:last-child::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  vertical-align: middle;
  background: var(--prune);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity var(--duration-slow) var(--ease-editorial) 0.25s,
    transform var(--duration-slow) var(--ease-editorial) 0.25s;
}
.section__meta.is-visible .section__label:last-child::before {
  opacity: 1;
  transform: scale(1);
}

/* Sur navy, le prune disparait (1,4:1) : le champagne reprend le role, ce qui
   est exactement sa definition dans la charte. */
[data-inverse] .section__meta .section__label:last-child::before,
.section--inverse .section__meta .section__label:last-child::before {
  background: var(--champagne);
}

/* Le lien du fil d'ancres en cours de lecture. */
.anchornav__link.is-current { color: var(--prune); }

/* La fleche du CTA vire au prune quand elle part. */
@media (hover: hover) {
  .cta:hover .cta__arrow { color: var(--prune); }
}

/* Le trait sous un lien de contenu se dessine en prune. */
.page-content a,
.traj__caption a {
  text-decoration-color: var(--prune-line);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* Les mots sont a leur place d'emblee — le titre reste un titre. */
  .h2-standard.is-split .word > span { transform: none; opacity: 1; }
  [data-headline], .h1-long, .h1-short { transform: none; }
  .section__meta .section__label:last-child::before { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   PASSE 12 — L'EN-TETE

   Deux gestes, le meme que celui des titres : du texte masque qui monte.
   L'en-tete parle donc la meme langue que le corps de page, au lieu d'avoir
   une animation a lui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le repere de section

   Il reprend la signaletique des sections — folio + micro-label — et ne
   parait qu'une fois l'en-tete compresse : en haut de page, la barre reste
   nette. Il ne s'affiche que s'il y a la place pour lui sans serrer le menu.
   -------------------------------------------------------------------------- */

.header__marker { display: none; }

@media (min-width: 1180px) {
  .header__marker {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--hairline);
    /* Le repere ne pousse jamais le menu : il cede la place avant lui.
       Le plafond est indispensable — un libelle long comme « Ou une mission
       peut s'arreter » portait le bloc a 332 px et faisait passer le CTA sur
       deux lignes. C'est le repere qui se tronque, jamais la navigation. */
    min-width: 0;
    flex: 0 1 auto;
    max-width: clamp(140px, 17vw, 250px);
    overflow: hidden;

    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity var(--duration-base) var(--ease-editorial),
      transform var(--duration-base) var(--ease-editorial);
  }

  .header.is-compressed .header__marker {
    opacity: 1;
    transform: translateY(0);
  }
}

.header__marker-folio {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--prune);
  flex-shrink: 0;
}

.header__marker-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le changement de section : l'ancien libelle sort par le haut, le nouveau
   entre par le bas. Le JS pose .is-out, ecrit, puis retire la classe. */
.header__marker-folio,
.header__marker-label {
  display: block;
  transition:
    transform var(--duration-fast) var(--ease-editorial),
    opacity var(--duration-fast) linear;
}

.header__marker.is-out .header__marker-folio,
.header__marker.is-out .header__marker-label {
  transform: translateY(-8px);
  opacity: 0;
}

.header__marker.is-in .header__marker-folio,
.header__marker.is-in .header__marker-label {
  transform: translateY(8px);
  opacity: 0;
  transition: none;
}

/* --------------------------------------------------------------------------
   Les liens du menu roulent

   Au survol, le libelle monte et sa copie prune prend sa place. Un seul
   geste porte le changement de couleur ET le mouvement, au lieu de deux
   effets superposes sur le meme survol.
   -------------------------------------------------------------------------- */

.roll {
  display: block;
  overflow: hidden;
  /* La hauteur borne le masque. 1.5em laisse passer les jambages du p
     d'« Expertises » et d'« À propos » sans les couper. */
  height: 1.5em;
}

.roll__inner {
  display: block;
  transition: transform 0.52s var(--ease-editorial);
}

.roll__inner > span {
  display: block;
  height: 1.5em;
  line-height: 1.5em;
}

/* La copie porte deja la couleur : le survol n'a plus a la changer. */
.roll__inner > span + span { color: var(--prune); }

@media (hover: hover) {
  .navlink:hover .roll__inner,
  .navlink:focus-visible .roll__inner { transform: translateY(-1.5em); }
}

/* Le lien de la page courante est deja prune et souligne : il ne roule pas,
   sinon le survol donnerait l'illusion d'un changement de page. */
.navlink[aria-current="page"] .roll__inner { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .roll__inner { transition: none; }
  .header__marker,
  .header.is-compressed .header__marker { transform: none; }
  .header__marker-folio,
  .header__marker-label { transform: none; }
}


/* ==========================================================================
   PASSE 13 — L'EN-TETE COMME INSTRUMENT

   Demande client : « plus haute technologie ». Le registre habituel — ecran,
   neon, monospace, lueurs — contredirait frontalement la charte, qui pose
   « la page est une page, pas une interface ».

   Lecture retenue : l'instrument de precision plutot que l'ecran. Une regle
   graduee, un releve chiffre, un reticule. Trois signes qui existent deja
   dans le systeme — les traits de coupe des sections, les chiffres tabulaires
   des folios — au lieu d'un vocabulaire importe.

   Aucune police ajoutee : Archivo porte des chiffres tabulaires, c'est ce
   qui donne le rendu mecanique sans un troisieme fichier a telecharger.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La regle graduee

   Elle remplace le filet plein du bas de l'en-tete et l'ancienne barre de
   progression. Les graduations sont un degrade repete : aucun element de plus
   dans le DOM pour une centaine de traits.
   -------------------------------------------------------------------------- */

.header { border-bottom: none; }

.header__scale {
  position: relative;
  height: 7px;
  /* Trait fin tous les 9 px ; le fond du bloc reprend le filet d'origine, qui
     reste la ligne de base de l'en-tete. */
  background:
    repeating-linear-gradient(
      to right,
      var(--hairline) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(to top, var(--hairline) 0 1px, transparent 1px);
  background-size: 100% 4px, 100% 100%;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, no-repeat;
}

/* Les graduations franchies. Le decoupage se fait au clip-path et non par une
   mise a l'echelle : mettre a l'echelle etirerait les traits au lieu de les
   reveler, et la graduation ne voudrait plus rien dire. */
.header__scale-ink {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to right,
      var(--prune) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(to top, var(--prune) 0 1.5px, transparent 1.5px);
  background-size: 100% 7px, 100% 100%;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, no-repeat;
  clip-path: inset(0 calc(100% - var(--scroll-read, 0) * 100%) 0 0);
}

/* Defilement rapide : la graduation s'epaissit, comme une aiguille qui bat. */
.header__scale.is-fast .header__scale-ink { background-size: 100% 100%, 100% 100%; }
.header__scale-ink { transition: background-size var(--duration-base) var(--ease-editorial); }

/* --------------------------------------------------------------------------
   Le releve chiffre

   Le repere de section disait ou l'on est dans le document ; il dit maintenant
   aussi de combien. Chiffres tabulaires : la valeur ne doit pas gigoter en
   changeant de dizaine.
   -------------------------------------------------------------------------- */

.header__marker-read {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--prune);
  flex-shrink: 0;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--hairline);
}
.header__marker-read::after {
  content: "%";
  /* 0,5 donnait 3,00:1 sur creme, sous le seuil pour du 11 px. */
  opacity: 0.72;
  margin-left: 1px;
}

/* --------------------------------------------------------------------------
   Le reticule du CTA

   Quatre angles qui se referment sur le bouton au survol — le meme trait de
   coupe que les sections portent deja a leur ouverture. Un seul element du
   site le recoit : c'est le point de conversion, pas un effet de liste.
   -------------------------------------------------------------------------- */

.header__cta { position: relative; white-space: nowrap; }

.header__cta::before,
.header__cta::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 0 solid var(--prune);
  opacity: 0;
  transition:
    opacity var(--duration-state) var(--ease-editorial),
    transform var(--duration-base) var(--ease-editorial);
  pointer-events: none;
}

/* Angle haut-gauche et angle bas-droit : deux pseudo-elements suffisent a
   poser un cadre lisible, quatre alourdiraient le balisage pour rien. */
.header__cta::before {
  top: -7px; left: -9px;
  border-top-width: 1px;
  border-left-width: 1px;
  transform: translate(4px, 4px);
}
.header__cta::after {
  bottom: -7px; right: -9px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  transform: translate(-4px, -4px);
}

@media (hover: hover) {
  .header__cta:hover::before,
  .header__cta:hover::after,
  .header__cta:focus-visible::before,
  .header__cta:focus-visible::after {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* La graduation reste lisible : c'est une information, pas une animation.
     Seul le mouvement des angles est supprime. */
  .header__cta::before { transform: none; }
  .header__cta::after { transform: none; }
  .header__scale-ink { transition: none; }
}


/* ==========================================================================
   PASSE 14 — L'INSTRUMENT SE MET EN MOUVEMENT

   La passe 13 avait posé les signes ; celle-ci les fait bouger. Trois
   mouvements, tous dans le même registre : un appareil qui mesure.

   1. Le réticule verrouille — il glisse d'un lien à l'autre.
   2. Le relevé roule — les chiffres défilent comme un compteur mécanique.
   3. La règle est balayée — une trace parcourt la graduation.

   Tout est construit par le JS : sans lui, l'en-tête reste celui de la
   passe 13, entièrement lisible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le réticule qui verrouille

   Au repos il se pose sur la page courante — il dit donc où l'on est, il ne
   décore pas. Au survol il glisse jusqu'au lien visé.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .header__nav { position: relative; }
}

.header__lock {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lock-w, 0px);
  height: var(--lock-h, 0px);
  transform: translate3d(var(--lock-x, 0px), var(--lock-y, 0px), 0);
  opacity: 0;
  pointer-events: none;
  /* Le déplacement est plus lent que l'apparition : on doit voir la course,
     pas un clignotement. */
  transition:
    transform 0.42s var(--ease-editorial),
    width 0.42s var(--ease-editorial),
    height 0.42s var(--ease-editorial),
    opacity var(--duration-state) linear;
}

.header__lock.is-on { opacity: 1; }

/* Quatre angles, dessinés en fond : un seul élément, aucun enfant. */
.header__lock::before,
.header__lock::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--prune);
}
.header__lock::before {
  border-top-width: 1px;
  border-left-width: 1px;
  clip-path: polygon(0 0, 6px 0, 6px 1px, 1px 1px, 1px 6px, 0 6px,
                     0 100%, 1px 100%, 1px calc(100% - 6px), 6px calc(100% - 6px),
                     6px calc(100% - 1px), 0 calc(100% - 1px));
}
.header__lock::after {
  border-right-width: 1px;
  border-bottom-width: 1px;
  clip-path: polygon(100% 0, calc(100% - 6px) 0, calc(100% - 6px) 1px,
                     calc(100% - 1px) 1px, calc(100% - 1px) 6px, 100% 6px,
                     100% 100%, calc(100% - 1px) 100%, calc(100% - 1px) calc(100% - 6px),
                     calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 1px),
                     100% calc(100% - 1px));
}

/* Le verrou change de cible : une pulsation brève marque l'arrivée. */
.header__lock.vient-d-arriver::before,
.header__lock.vient-d-arriver::after {
  animation: keys-lock 0.36s var(--ease-editorial);
}
@keyframes keys-lock {
  0%   { border-color: var(--prune); opacity: 0.35; }
  40%  { opacity: 1; }
  100% { border-color: var(--prune); opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. Le relevé qui roule

   Chaque chiffre est une colonne de 0 à 9 qui se déplace. C'est le geste
   d'un compteur, pas d'un texte remplacé.
   -------------------------------------------------------------------------- */

.header__marker-read { display: inline-flex; align-items: baseline; gap: 0; }

.chiffre {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  /* 1ch = l'avance exacte du glyphe « 0 ». En chiffres tabulaires ils ont
     tous la même, donc la colonne fait pile la largeur d'un chiffre. */
  width: 1ch;
  vertical-align: baseline;
}

.chiffre__bande {
  display: block;
  transform: translateY(calc(var(--v, 0) * -1em));
  transition: transform 0.5s var(--ease-editorial);
}

.chiffre__bande > span {
  display: block;
  height: 1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Le balayage de la règle

   Une trace parcourt la graduation à l'ouverture de la page, puis à chaque
   changement de section. C'est le seul mouvement de l'en-tête qui ne répond
   pas à un geste : il signale que la mesure a changé de repère.
   -------------------------------------------------------------------------- */

.header__scale { overflow: hidden; }

.header__scale-sweep {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 22%;
  opacity: 0;
  background: linear-gradient(
    to right,
    rgba(59, 33, 68, 0) 0%,
    rgba(59, 33, 68, 0.55) 45%,
    rgba(59, 33, 68, 0.9) 60%,
    rgba(59, 33, 68, 0) 100%
  );
  /* Le balayage éclaire les graduations sans les redessiner : il ne fait que
     traverser la bande, masqué par elle. */
  mix-blend-mode: multiply;
  pointer-events: none;
}

.header__scale-sweep.balaie {
  animation: keys-sweep 1.15s var(--ease-editorial);
}

@keyframes keys-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(455%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Le verrou reste — il porte une information (la page courante) — mais il
     ne court plus d'un lien à l'autre. Le balayage, lui, est purement
     décoratif : il disparaît. */
  .header__lock { transition: opacity var(--duration-state) linear; }
  .header__lock.vient-d-arriver::before,
  .header__lock.vient-d-arriver::after { animation: none; }
  .chiffre__bande { transition: none; }
  .header__scale-sweep, .header__scale-sweep.balaie { display: none; animation: none; }
}


/* ==========================================================================
   PASSE 15 — LES PAGES D'ACCOMPAGNEMENT

   Une URL par offre. Trois composants nouveaux seulement : le fil d'Ariane,
   la grille des accompagnements voisins, et l'avertissement de redaction
   reserve a l'administrateur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fil d'Ariane — le meme registre que la signaletique de section
   -------------------------------------------------------------------------- */

.fil { margin-bottom: var(--space-4); }

.fil__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fil__etape + .fil__etape::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--prune-line);
}

.fil__etape a { color: inherit; }
.fil__etape [aria-current="page"] { color: var(--prune); }

@media (hover: hover) {
  .fil__etape a:hover { color: var(--prune); }
}

/* --------------------------------------------------------------------------
   Les accompagnements voisins
   -------------------------------------------------------------------------- */

.voisins {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
}

.voisin {
  display: block;
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
  position: relative;
  transition: background var(--duration-state) var(--ease-editorial);
}
.voisins > .voisin:last-child { border-bottom: 1px solid var(--hairline); }

/* Le meme filet qui se deploie que sur les autres listes du site. */
.voisin::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 1px; width: 100%;
  background: var(--prune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-editorial);
}

.voisin__titre {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.voisin__texte {
  display: block;
  margin-top: 4px;
  font-size: var(--text-body);
  color: var(--text-secondary);
  max-width: 62ch;
}

@media (hover: hover) {
  .voisin:hover::after { transform: scaleX(1); }
  .voisin:hover .voisin__titre { color: var(--prune); }
}

@media (min-width: 900px) {
  .voisins { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); }
  .voisins > .voisin:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .voisins > .voisin:last-child:nth-child(odd) { border-bottom: 1px solid var(--hairline); }
}

/* --------------------------------------------------------------------------
   L'avertissement de redaction — administrateurs connectes uniquement
   -------------------------------------------------------------------------- */

.avis-redaction {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-left: 3px solid var(--prune);
  background: var(--prune-wash);
  font-size: var(--text-small);
  color: var(--text-secondary);
  max-width: 72ch;
}
.avis-redaction code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--prune);
}

/* Le titre d'un accompagnement, dans la liste des expertises, devient un lien. */
.item__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--prune-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-state) var(--ease-editorial);
}
@media (hover: hover) {
  .item__title a:hover { color: var(--prune); text-decoration-color: var(--prune); }
}


/* ==========================================================================
   PASSE 16 — LE RELIEF

   Demande client : « un peu de 3D au scroll ». Le registre attendu — objets
   qui tournent, decor en profondeur, WebGL — contredirait frontalement le
   principe 01 : « la page est une page ». Et il couterait 150 Ko de
   bibliotheque sur un site qui n'en charge aucune.

   Lecture retenue : le relief du papier. Les blocs arrivent legerement
   inclines, comme une feuille qu'on pose, et se remettent a plat. C'est de
   la vraie 3D — perspective, rotation sur l'axe X — mais au service d'un
   geste d'imprimeur, pas d'un effet.

   TROIS REGLES QUI TIENNENT TOUT :

   1. La perspective est portee par l'element lui-meme, jamais par un parent.
      `perspective` sur un conteneur cree un bloc englobant et casserait les
      elements colles — en-tete, sommaire d'ancres, chiffre de pilier.

   2. Au repos, `transform: none` — surtout pas `rotateX(0)`. Une transformee
      identite laisse une couche de composition active, et le texte y perd sa
      nettete sur la plupart des navigateurs. `none` la supprime.

   3. En mouvement reduit, rien de tout cela n'existe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La variante de revelation
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* Les listes et cartes qui gagnent a se poser. Chacune porte deja
     data-reveal : on ne fait que remplacer sa transformee d'entree. */
  .items[data-reveal],
  .engagement[data-reveal],
  .traj__item[data-reveal],
  .level[data-reveal],
  .category[data-reveal],
  .step[data-reveal],
  .point[data-reveal] {
    transform: perspective(1100px) rotateX(6deg) translateY(22px);
    transform-origin: 50% 100%;
  }

  /* Le repos supprime la couche de composition : le texte redevient net. */
  .items[data-reveal].is-visible,
  .engagement[data-reveal].is-visible,
  .traj__item[data-reveal].is-visible,
  .level[data-reveal].is-visible,
  .category[data-reveal].is-visible,
  .step[data-reveal].is-visible,
  .point[data-reveal].is-visible {
    transform: none;
  }

  /* --------------------------------------------------------------------------
     Le graphique de methode se pose

     C'est le seul objet du site — un instrument. Il merite l'inclinaison la
     plus marquee, et il la perd des qu'il est en place.
     -------------------------------------------------------------------------- */

  .traj__stage {
    transform: perspective(1600px) rotateX(11deg) translateY(18px);
    transform-origin: 50% 100%;
    transition: transform 1.3s var(--ease-editorial);
  }

  .traj.is-drawn .traj__stage { transform: none; }

  /* Pendant que le plan se redresse, les commandes ne repondent pas : leurs
     coordonnees ne correspondent pas encore a ce qui est affiche. */
  .traj:not(.is-drawn) .traj__controls { pointer-events: none; }

  /* --------------------------------------------------------------------------
     Les aplats navy prennent de la profondeur

     Le voile de lumiere existant recule legerement pendant que la section
     entre : la surface parait plus loin que le texte pose dessus.
     -------------------------------------------------------------------------- */

  [data-inverse] .parallax-layer,
  .section--inverse .parallax-layer {
    transform: perspective(1200px) translateZ(-60px) scale(1.05);
    transition: transform 1.6s var(--ease-editorial);
  }

  [data-inverse].is-visible .parallax-layer,
  .section--inverse.is-visible .parallax-layer {
    transform: perspective(1200px) translateZ(-18px) scale(1.015);
  }

  /* --------------------------------------------------------------------------
     Les cartes d'avis et les accompagnements voisins
     -------------------------------------------------------------------------- */

  .voisin {
    transform: perspective(900px) rotateX(0deg);
    transition:
      transform var(--duration-base) var(--ease-editorial),
      background var(--duration-state) var(--ease-editorial);
  }

  @media (hover: hover) {
    /* Au survol, la ligne se souleve vers le lecteur — deux degres, pas plus :
       au-dela, une liste de liens se met a tanguer. */
    .voisin:hover { transform: perspective(900px) rotateX(-2deg) translateY(-2px); }
  }
}

/* --------------------------------------------------------------------------
   Mouvement reduit — aucune profondeur, aucune inclinaison
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .traj__stage,
  .voisin,
  [data-inverse] .parallax-layer,
  .section--inverse .parallax-layer { transform: none !important; }
}