/* ============================================================
   ETHIKA — Design system "Le Sceau" (Direction V2)
   Encre · Papier · Ardoise · Laiton (signal certification) · Patine (accent
   engageant/CTA). La Patine est l'oxydation naturelle du Laiton du médaillon
   de certification : continuité chromatique de l'objet, jamais un vert
   "eco" générique. Max 1 accent dominant par écran (Laiton OU Patine).
   ============================================================ */

:root {
  --ink: #0B111F;
  --ink-2: #10182B;
  --ink-3: #1F2B45;
  --paper: #EDEEE8;
  --paper-2: #E3E4DC;
  --paper-3: #D9DACF;
  /* Vert Forêt Profond (registre British Racing Green modernisé) : accent
     principal ETHIKA. Remplace le Laiton après Session 3 — sortie de l'or
     comme signal exclusif, entrée d'un vert premium ESG non-cliché. */
  --forest: #1F4A3A;
  --forest-light: #3D7A5F;
  --forest-mist: #7CA893;
  /* Patine conservée en accent secondaire (continuité chromatique) mais
     recalibrée pour cohabiter avec le Vert Forêt sans dilution visuelle. */
  --patine: #4F8577;
  --patine-dark: #2C4A42;
  --patine-light: #7FB0A0;
  /* Alias Laiton → Vert Forêt : garantit qu'aucun composant tiers ne casse
     avant migration complète. À supprimer une fois la migration terminée. */
  --brass: var(--forest);
  --brass-light: var(--forest-light);
  --slate: #57616F;
  --slate-light: #8B93A0;
  /* Sémantique uniquement (états d'erreur de formulaire) : jamais utilisé
     comme accent de marque, distinct de la Patine et du Laiton. */
  --error: #B3261E;
  --line: rgba(16, 24, 43, 0.13);
  --line-strong: rgba(16, 24, 43, 0.28);
  --line-dark: rgba(237, 238, 232, 0.14);

  /* Typo titrage : GT Sectra (licence à acquérir) — d'ici là, Newsreader
     (Google Fonts) prend le relais dans la même famille éditoriale.
     Fraunces a été abandonné (instabilité à l'usage). */
  --font-display: var(--font-display-serif, 'Newsreader'), 'GT Sectra', 'Iowan Old Style',
    ui-serif, serif;
  --font-body: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: var(--font-geist-mono, 'Geist Mono'), 'IBM Plex Mono', ui-monospace, monospace;

  --container: 1360px;
  --gutter: 24px;
  --unit: 8px;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-signature: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Échelle z sémantique */
  --z-nav: 40;
  --z-menu: 50;
  --z-skip: 60;

  /* Hauteur fixe de la nav. Toutes les zones de contenu doivent réserver
     cet espace via padding-top pour ne jamais se retrouver "sous" la nav. */
  --header-height: 76px;
}

@media (max-width: 640px) {
  :root {
    --header-height: 64px;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Fraunces : titrage H1/H2 uniquement, jamais sous 28px (E.2). */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

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

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: var(--z-skip);
  background: var(--patine);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 3px;
  transition: top 150ms var(--ease-out);
}

.skip-link:focus-visible {
  top: 12px;
}

/* ---------- Grain (matière papier, fonctionnel, jamais animé) ---------- */
.grain {
  position: relative;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
}

.sec {
  position: relative;
  padding-block: clamp(88px, 11vw, 148px);
}

.sec--tight {
  padding-block: clamp(64px, 8vw, 104px);
}

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

.sec--ink2 {
  background: var(--ink-2);
  color: var(--paper);
}

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

.sec--paper2 {
  background: var(--paper-2);
  color: var(--ink);
}

.sec--bordered {
  border-top: 1px solid var(--line);
}

.sec--ink.sec--bordered,
.sec--ink2.sec--bordered {
  border-top-color: var(--line-dark);
}

/* Ligne de référence dossier : le système de kicker propriétaire ETHIKA.
   Fragment Mono, registre de l'acte : à n'utiliser que pour des références réelles. */
.refline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patine);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* Marqueur V3 : petit carré plein 5x5, jamais de tiret cadratin. */
.refline::before {
  content: '';
  width: 5px;
  height: 5px;
  background: currentColor;
}

.sec--ink .refline,
.sec--ink2 .refline {
  color: var(--brass-light);
}

.sec-head {
  max-width: 780px;
}

.sec-head h1,
.sec-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
}

.sec-head .lede {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 640px;
}

.sec--ink .sec-head .lede,
.sec--ink2 .sec-head .lede {
  color: rgba(237, 238, 232, 0.72);
}

.prose {
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.75;
}

.prose p + p {
  margin-top: 18px;
}

/* ---------- Boutons (E.6, specs 5.4/5.5) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Le geste du tampon qu'on presse, pas du ressort. */
.btn:active {
  transform: translateY(1px) scale(0.97);
}

.btn--primary {
  background: var(--patine);
  color: var(--paper);
  box-shadow: 0 2px 8px rgba(79, 133, 119, 0.25);
}

.btn--primary:hover {
  background: var(--patine-dark);
  box-shadow: 0 4px 12px rgba(79, 133, 119, 0.35);
}

.btn--primary:active {
  box-shadow: 0 1px 4px rgba(79, 133, 119, 0.2);
}

.btn--outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline-dark:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(237, 238, 232, 0.4);
  color: var(--paper);
}

.btn--outline-light:hover {
  border-color: var(--paper);
  background: rgba(237, 238, 232, 0.06);
}

.btn--ghost {
  background: transparent;
  border: none;
  padding: 6px 2px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(87, 97, 111, 0.4);
  border-radius: 2px;
}

.btn--ghost .arrow {
  display: inline-block;
  transition: transform 150ms var(--ease-out);
}

.btn--ghost:hover .arrow {
  transform: translateX(3px);
}

.sec--ink .btn--ghost:hover,
.sec--ink2 .btn--ghost:hover,
.on-ink.btn--ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

.sec--paper .btn--ghost:hover,
.sec--paper2 .btn--ghost:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.btn--small {
  padding: 8px 16px;
  font-size: 14px;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* Réducteur de risque sous CTA */
.risk-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate);
}

.sec--ink .risk-note,
.sec--ink2 .risk-note {
  color: rgba(237, 238, 232, 0.6);
}

.micro-proof {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--slate);
}

.sec--ink .micro-proof,
.sec--ink2 .micro-proof {
  color: rgba(237, 238, 232, 0.55);
}

/* ---------- Bandeau de réassurance (5.6) ---------- */
.assurance {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(237, 238, 232, 0.66);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.assurance .dot {
  color: rgba(237, 238, 232, 0.3);
}

.assurance a {
  color: inherit;
  text-decoration: none;
}

.assurance a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* ---------- Chip de niveau (E.6) ---------- */
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 7px 13px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  color: inherit;
  white-space: nowrap;
}

.level-chip .bars {
  display: flex;
  gap: 2.5px;
  align-items: flex-end;
}

.level-chip .bars i {
  display: block;
  width: 3px;
  background: var(--slate-light);
  border-radius: 1px;
}

.level-chip .bars i.on {
  background: var(--brass);
}

/* ---------- Badge / label mono ---------- */
.tag-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--slate);
  white-space: nowrap;
}

.sec--ink .tag-pill,
.sec--ink2 .tag-pill {
  border-color: var(--line-dark);
  color: rgba(237, 238, 232, 0.65);
}

/* ---------- Dossier-card (E.6 : onglet Encre + corps Papier) ---------- */
.dossier-card {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.dossier-card > .tab {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 7px 14px;
  display: inline-block;
}

.dossier-card > .body {
  padding: 22px 24px 26px;
}

.dossier-card h3 {
  font-size: 22px;
}

/* ---------- Formulaires (E.6) ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.field .optional {
  font-weight: 400;
  color: var(--slate);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--slate-light);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 150ms var(--ease-out);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--slate);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--patine);
  outline-offset: 1px;
  border-color: var(--patine);
}

.field .help {
  font-size: 12.5px;
  color: var(--slate);
}

.field .error {
  font-size: 13px;
  font-weight: 600;
  color: var(--error);
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea {
  border-color: var(--error);
}

/* ============================================================
   L'EMPREINTE — symbole de marque officiel ETHIKA (Signature de Marque).
   Toujours codée en SVG précis, jamais générée par IA image. La distance
   au centre et l'épaisseur du trait de chaque arc portent une donnée
   (score de l'axe) : c'est un système d'information, pas une décoration.
   Laiton (signal exclusif de certification) sur Encre ; bascule sur
   variante `light` sur Papier.
   ============================================================ */
.empreinte {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.empreinte-arc path {
  transition: stroke 200ms var(--ease-out);
}

.empreinte-label {
  fill: var(--paper);
  opacity: 0.72;
}

.empreinte--light .empreinte-label {
  fill: var(--ink);
  opacity: 0.62;
}

@media (max-width: 640px) {
  .empreinte-label {
    font-size: 8.5px;
  }
}

/* Segment Zone 5 : profil d'élévation. Statique (V3). */
.relief-seg {
  width: 100%;
  height: auto;
  display: block;
}

.relief-seg .relief-seg-line {
  fill: none;
  stroke: var(--patine);
  stroke-width: 1.4;
  stroke-opacity: 0.8;
}

/* ============================================================
   RÉVÉLATIONS AU SCROLL (IntersectionObserver, une fois)
   Gate html.js : sans JS, tout le contenu est visible.
   V3 : ÉTAPE STATIQUE — le bloc de neutralisation en fin de section
   désactive toutes les révélations jusqu'à validation intégrale du
   visuel statique. Retirer ce bloc pour réactiver la motion.
   ============================================================ */
html.js .rv {
  opacity: 0;
}

html.js .rv--up {
  transform: translateY(16px);
}

html.js .rv--up-sm {
  transform: translateY(8px);
}

html.js .rv--clip {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}

html.js .rv.in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

html.js .rv--clip.in {
  transition: clip-path 400ms var(--ease-out);
}

html.js .rv.in[data-rv-delay='1'] { transition-delay: 80ms; }
html.js .rv.in[data-rv-delay='2'] { transition-delay: 160ms; }
html.js .rv.in[data-rv-delay='3'] { transition-delay: 240ms; }
html.js .rv.in[data-rv-delay='4'] { transition-delay: 320ms; }

/* ============================================================
   SÉQUENCE DE CHARGEMENT DU HERO (A.7) : < 1.4s, ease-out.
   Animations CSS pilotées par html.js, une seule fois au load.
   ============================================================ */
html.js .hseq {
  opacity: 0;
}

html.js .is-ready .hseq {
  animation: hseq-fade-up 300ms var(--ease-out) both;
}

html.js .is-ready .hseq--photo {
  animation: hseq-photo 400ms var(--ease-out) both;
  animation-delay: 200ms;
}

html.js .is-ready .hseq--headline {
  animation-delay: 300ms;
}

html.js .is-ready .hseq--sub {
  animation: hseq-fade 250ms var(--ease-out) both;
  animation-delay: 450ms;
}

/* Bandeau : révélation par clip-path qui se rétracte de gauche à droite,
   PAS un typewriter caractère par caractère. */
html.js .is-ready .hseq--assurance {
  animation: hseq-clip 400ms var(--ease-out) both;
  animation-delay: 600ms;
}

html.js .is-ready .hseq--cta {
  animation: hseq-scale 200ms var(--ease-out) both;
  animation-delay: 800ms;
}

html.js .is-ready .hseq--cta2 {
  animation: hseq-fade 200ms var(--ease-out) both;
  animation-delay: 900ms;
}

@keyframes hseq-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hseq-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes hseq-photo {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes hseq-clip {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes hseq-scale {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   prefers-reduced-motion : bascule instantanée, sans stagger (A.5, E.4)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  html.js .rv,
  html.js .hseq {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* V3 : neutralisation globale des révélations/séquences (étape statique). */
html.js .rv,
html.js .hseq {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .wrap {
    padding-inline: 20px;
  }

  .sec {
    padding-block: clamp(64px, 14vw, 96px);
  }

  .cta-row {
    gap: 18px;
  }

  .btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ============================================================
   ETHIKA — styles applicatifs ethika.com
   S'appuie sur les tokens/composants de @ethika/design-system.
   ============================================================ */

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

#top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* ============================================================
   HEADER (concept 5.7)
   ============================================================ */
.hdr {
  position: fixed;
  inset-inline: 0;
  top: 0;
  /* Priorité au-dessus de TOUT ce qui est empilé dans le hero (images,
     scrims, overlays d'Empreinte, curseur personnalisé du carrousel) —
     avant le bug, ces overlays passaient devant le fond transparent de
     la nav quand elle n'était pas encore solide. */
  z-index: calc(var(--z-nav) + 10);
  color: var(--paper);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  /* Isolate un stacking context propre. */
  isolation: isolate;
}

.hdr--solid {
  background: rgba(16, 24, 43, 0.95);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(87, 97, 111, 0.25);
}

.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

.hdr-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--paper);
  line-height: 1;
}

.hdr-brand-mark {
  color: var(--forest-light);
  flex-shrink: 0;
  transition: color 200ms var(--ease-out);
  display: block;
  transform: translateY(0.5px); /* micro-alignement optique avec la capitale */
}

.hdr-brand:hover .hdr-brand-mark {
  color: var(--paper);
}

.hdr-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.hdr-brand-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--forest-light);
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid rgba(237, 238, 232, 0.18);
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 780px) {
  .hdr-brand-slogan {
    display: none;
  }
}

.hdr-nav ul {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hdr-nav li {
  position: relative;
}

.hdr-nav a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(237, 238, 232, 0.78);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: 2px;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.hdr-nav a:hover {
  color: var(--paper);
  background: rgba(237, 238, 232, 0.06);
}

.hdr-nav a.is-active {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.hdr-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 248px;
  background: var(--ink-2);
  border: 1px solid rgba(87, 97, 111, 0.35);
  border-radius: 3px;
  padding: 8px;
  display: block !important;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out),
    visibility 0s linear 150ms;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

.hdr-nav .has-menu:hover .hdr-menu,
.hdr-nav .has-menu:focus-within .hdr-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.hdr-menu li + li {
  margin-top: 1px;
}

.hdr-menu a {
  padding: 10px 14px;
  font-size: 14px;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdr-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.hdr-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hdr-burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(237, 238, 232, 0.3);
  border-radius: 2px;
  padding: 10px;
  cursor: pointer;
}

.hdr-burger-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}

.hdr-burger-box i {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: transform 200ms var(--ease-out), opacity 150ms var(--ease-out);
}

.hdr-burger[aria-expanded='true'] .hdr-burger-box i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.hdr-burger[aria-expanded='true'] .hdr-burger-box i:nth-child(2) {
  opacity: 0;
}

.hdr-burger[aria-expanded='true'] .hdr-burger-box i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.hdr-mobile {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--ink);
  overflow-y: auto;
  padding-block: 28px 48px;
  border-top: 1px solid var(--line-dark);
}

.hdr-mobile-group {
  padding-block: 16px;
}

.hdr-mobile-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 6px;
}

.hdr-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hdr-mobile ul a {
  display: block;
  font-size: 17px;
  color: var(--paper);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}

.hdr-mobile-cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 1080px) {
  .hdr-nav {
    display: none;
  }

  .hdr-burger {
    display: block;
  }
}

/* ============================================================
   FOOTER (Zone 7)
   ============================================================ */
.ftr {
  background: var(--ink);
  color: rgba(237, 238, 232, 0.7);
  border-top: 1px solid var(--line-dark);
  padding-block: 76px 40px;
}

.ftr-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) 2.2fr;
  gap: 72px;
}

.ftr-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  line-height: 1;
}

.ftr-brand-mark {
  color: var(--forest-light);
  flex-shrink: 0;
  display: block;
  transform: translateY(1px);
  transition: color 200ms var(--ease-out);
}

.ftr-brand-link:hover .ftr-brand-mark {
  color: var(--paper);
}

.ftr-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
  margin: 0;
}

.ftr-tagline {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 36ch;
  color: rgba(237, 238, 232, 0.62);
}

.ftr-formation {
  margin-top: 24px;
}

.ftr-formation a {
  font-size: 13.5px;
  color: rgba(237, 238, 232, 0.62);
  text-underline-offset: 4px;
  transition: color 150ms var(--ease-out);
}

.ftr-formation a:hover {
  color: var(--paper);
}

.ftr-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px 32px;
}

.ftr-col-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 16px;
}

.ftr-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ftr-col li + li {
  margin-top: 10px;
}

.ftr-col a {
  font-size: 14px;
  color: rgba(237, 238, 232, 0.68);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

.ftr-col a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ftr-bottom {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.ftr-legal-line {
  font-size: 12px;
  color: rgba(237, 238, 232, 0.5);
}

/* Flag visible tant que la donnée n'est pas fournie (section I). */
.ftr-todo {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brass-light);
  border: 1px dashed rgba(199, 164, 107, 0.45);
  border-radius: 2px;
  padding: 5px 10px;
}

.ftr-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.ftr-legal-links a {
  font-size: 12.5px;
  color: rgba(237, 238, 232, 0.55);
  text-decoration: none;
}

.ftr-legal-links a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .ftr-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.crumbs {
  margin-bottom: 30px;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(237, 238, 232, 0.55);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: rgba(237, 238, 232, 0.28);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs [aria-current='page'] {
  color: var(--brass-light);
}

/* Ghost sur fond Encre : lisibilité (contraste) sans changer la hiérarchie. */
.closer .btn--ghost,
.phero .btn--ghost {
  color: rgba(237, 238, 232, 0.75);
  text-decoration-color: rgba(237, 238, 232, 0.35);
}

.closer .btn--ghost:hover,
.phero .btn--ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

/* Emphase italique dans les titres : le mot pivot ressort en Laiton clair
   pour les zones Encre (hero carrousel, page-hero, clôture) et Patine
   dans le corps éditorial. */
.phero h1 em,
.manifeste-body em,
.closer-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--brass-light);
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--patine);
}

/* ============================================================
   BANDE DE PREUVE (compteurs 100 / 4 / 4 / 30·25·25·20)
   ============================================================ */
/* V3 : facts bar sur Encre-2, grille de points fins en fond (1px,
   opacité 0.04, pas 24px, Ardoise). Ces stats vivent UNE SEULE FOIS
   sur la page, ici : jamais dupliquées ailleurs. */
.databand {
  position: relative;
  background: var(--ink-2);
  color: var(--paper);
  border-block: 1px solid var(--line-dark);
}

.databand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--slate) 1px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.04;
  pointer-events: none;
}

.databand-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.databand-item {
  padding: 30px 28px 26px;
  border-left: 1px solid var(--line-dark);
}

.databand-item:first-child {
  border-left: none;
}

.databand-n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--paper);
}

.databand-l {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* Petit glyphe Empreinte à côté d'une stat clé (V3 corrigée). */
.databand-glyph {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.databand-glyph .empreinte {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .databand-item {
    border-left: none;
    border-top: 1px solid var(--line-dark);
    padding: 22px 0 20px;
  }

  .databand-item:first-child {
    border-top: none;
  }
}

/* ============================================================
   ZONE 2 — TROIS PILIERS (registre du dossier, pas 3 cards + icône)
   ============================================================ */
.piliers {
  background: var(--paper);
  color: var(--ink);
}

.pilier-list {
  margin-top: 60px;
  border-top: 1px solid var(--line-strong);
}

.pilier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) auto;
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 20px;
  align-items: center;
  padding: clamp(56px, 6vw, 72px) clamp(8px, 2vw, 28px);
  border-bottom: 1px solid var(--line-strong);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 200ms var(--ease-out);
}

/* Trait vertical Grenat au hover (interaction 4.1 #3). */
.pilier::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background-color 200ms var(--ease-out);
}

.pilier:hover {
  background: rgba(16, 24, 43, 0.03);
}

.pilier:hover::before {
  background: var(--patine);
}

.pilier:focus-visible {
  outline: 2px solid var(--patine);
  outline-offset: 2px;
}

.pilier-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--forest);
}

.pilier-frag {
  width: 100%;
  max-width: 230px;
}

.pilier-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.pilier-text {
  display: block;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(16, 24, 43, 0.75);
  max-width: 62ch;
}

.pilier-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--patine);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pilier-link .arrow {
  transition: transform 150ms var(--ease-out);
}

.pilier:hover .pilier-link .arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .pilier {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 36px;
  }

  .pilier-frag {
    max-width: 180px;
  }

  .pilier-link {
    justify-self: start;
  }
}

/* ============================================================
   NAVIGATION D'ÉTAPES DU PARCOURS
   ============================================================ */
.steps-nav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.steps-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding-block: 16px;
}

.steps-nav a,
.steps-nav span[aria-current] {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  padding-block: 4px;
}

.steps-nav .steps-n {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.steps-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.steps-nav span[aria-current] {
  color: var(--patine);
  font-weight: 700;
}

/* Livrables (dossier-card du hero diagnostic) */
.livrables {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: livrable;
}

.livrables li {
  counter-increment: livrable;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}

.livrables li:first-child {
  border-top: none;
}

.livrables li::before {
  content: '0' counter(livrable);
  color: var(--patine);
  font-size: 11px;
}

/* ============================================================
   ZONE ROUTING — cartes typographiques éditoriales premium
   (registre McKinsey Perspectives / Bain Snap Charts). Aucun
   portrait : le contenu est la matière, pas les visages. Numérotation
   en Geist Mono, grande citation en Newsreader italic, chip persona
   qui bascule Forêt au hover.
   ============================================================ */
.routing {
  background: var(--paper-2);
  color: var(--ink);
}

.routing-head {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 62ch;
}

.routing-head .refline {
  margin-bottom: 14px;
}

.routing-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.routing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}

.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--ink);
  min-height: 340px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms ease,
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Filet vert forêt qui s'étire depuis le haut au hover. */
.route-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--forest) 0%, var(--forest-light) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.route-card:hover,
.route-card:focus-visible {
  transform: translateY(-4px);
  border-left-color: var(--forest);
  box-shadow: 0 30px 60px -35px color-mix(in srgb, var(--forest) 50%, black);
  outline: none;
}

.route-card:hover::before,
.route-card:focus-visible::before {
  transform: scaleX(1);
}

.route-num {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  transition: color 300ms ease;
}

.route-card:hover .route-num,
.route-card:focus-visible .route-num {
  color: var(--forest);
}

.route-persona {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--forest) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 6%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 24px;
  transition: background-color 300ms ease, color 300ms ease;
}

.route-persona::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--forest);
}

.route-card:hover .route-persona,
.route-card:focus-visible .route-persona {
  background: var(--forest);
  color: var(--paper);
}

.route-card:hover .route-persona::before,
.route-card:focus-visible .route-persona::before {
  background: var(--paper);
}

.route-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
  text-wrap: balance;
}

.route-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  margin-bottom: 24px;
}

.route-arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--forest);
  transition: gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.route-arrow span[aria-hidden='true'] {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.route-card:hover .route-arrow,
.route-card:focus-visible .route-arrow {
  gap: 14px;
}

.route-card:hover .route-arrow span[aria-hidden='true'],
.route-card:focus-visible .route-arrow span[aria-hidden='true'] {
  transform: translateX(4px);
}

.routing-grid .rv {
  display: flex;
}

.routing-grid .rv > .route-card {
  flex: 1;
}

@media (max-width: 900px) {
  .routing-grid {
    grid-template-columns: 1fr;
  }
  .route-card {
    min-height: 0;
  }
}

/* ============================================================
   ZONE 4 — LA CERTIFICATION EN PRATIQUE (zone de preuve, sans motif)
   ============================================================ */
.pratique {
  background: var(--ink-2);
  color: var(--paper);
}

.pratique-inner {
  max-width: 860px;
}

.pratique .dossier-card {
  margin-top: 44px;
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.5);
}

.pratique .dossier-card .body {
  padding: 30px 34px 36px;
}

.pratique .dossier-card p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(16, 24, 43, 0.85);
}

/* ============================================================
   ZONE 5 — POURQUOI MAINTENANT (contenu de nature différente)
   ============================================================ */
.regnote {
  background: var(--paper);
  color: var(--ink);
}

.regnote-seg {
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* Trend Chart — dataviz éditoriale « Pourquoi maintenant ». Registre
   cabinet d'analyse : deux courbes lissées, aire dégradée, jalons ancrés
   dans des cartouches typographiés au-dessus de la ligne. */
.trend-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.trend-grid {
  stroke: color-mix(in srgb, var(--forest) 12%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.trend-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line--primary {
  stroke: var(--forest);
  stroke-width: 2.4;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--forest) 25%, transparent));
}

.trend-line--secondary {
  stroke: var(--forest-mist);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  opacity: 0.85;
}

.trend-axis {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--ink) 45%, transparent);
}

.trend-endpoint {
  fill: var(--forest);
  stroke: var(--paper);
  stroke-width: 2;
}

.trend-milestone-dot {
  fill: var(--forest);
  stroke: var(--paper);
  stroke-width: 2;
}

.trend-milestone-tick {
  stroke: color-mix(in srgb, var(--forest) 45%, transparent);
  stroke-width: 1;
  stroke-dasharray: 1.5 3;
}

.trend-milestone-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--ink) 55%, transparent);
}

.trend-milestone-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: var(--forest);
}

.trend-legend-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--ink) 55%, transparent);
  dominant-baseline: middle;
}

.trend-legend line {
  stroke-width: 1.8;
}

/* Compat : alias pour l'ancien nom si un composant y référait encore. */
.sparkline { display: none; }

.regnote-box {
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: clamp(28px, 5vw, 64px);
}

.regnote-box h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
}

.regnote-body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(16, 24, 43, 0.82);
}

.regnote-body .btn--ghost {
  margin-top: 22px;
}

@media (max-width: 860px) {
  .regnote-box {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ZONE 6 — CTA DE CLÔTURE (moment signature)
   V3 : fond = macro RÉELLE de matière laiton→patine, Le Relief gravé
   par-dessus en mode fusion. Aucun objet rond/médaillon : la matière
   remplace définitivement ce concept.
   ============================================================ */
.closer {
  position: relative;
  background: var(--ink-2);
  color: var(--paper);
  overflow: hidden;
}

.closer-material {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.closer-material img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gravure : L'Empreinte fusionnée dans la matière (overlay). Symbole SVG
   précis, niveau Leader, en grand format, décentré à droite pour laisser
   respirer le texte à gauche. */
.closer-material .empreinte {
  position: absolute;
  top: 50%;
  right: -6%;
  width: 62%;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .closer-material .empreinte {
    width: 100%;
    right: -20%;
    opacity: 0.55;
  }
}

/* Scrim de lisibilité : le texte à gauche, la matière respire à droite. */
.closer-material::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 17, 31, 0.9) 0%,
    rgba(11, 17, 31, 0.62) 44%,
    rgba(11, 17, 31, 0.18) 100%
  );
}

.closer .wrap {
  position: relative;
  z-index: 1;
}

.closer-inner {
  max-width: 560px;
}

.closer-title {
  margin-top: 14px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin-bottom: 30px;
}

.closer-inner .btn--primary {
  padding: 18px 36px;
  font-size: 17px;
}

.closer-risk {
  margin-top: 18px;
}

.closer-proof {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(237, 238, 232, 0.22);
  max-width: 420px;
}

/* ============================================================
   HERO DE PAGE INTÉRIEURE (split, jamais centré)
   ============================================================ */
.phero {
  background: var(--ink);
  color: var(--paper);
  padding-top: 152px;
  padding-bottom: clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  overflow: hidden;
}

.phero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.phero-grid--solo {
  grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
}

.phero h1 {
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.018em;
  color: var(--paper);
  max-width: 22ch;
}

.phero-sub {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.62;
  color: rgba(237, 238, 232, 0.72);
  max-width: 56ch;
}

.phero-visual {
  max-width: 380px;
  justify-self: end;
  width: 100%;
}

.phero-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 92%,
    transparent 100%
  );
}

.phero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(0.15) contrast(1.05);
}

@media (max-width: 900px) {
  .phero {
    padding-top: 124px;
  }

  .phero-grid,
  .phero-grid--solo {
    grid-template-columns: 1fr;
  }

  .phero-visual {
    justify-self: start;
    max-width: 280px;
  }
}

/* ============================================================
   CORPS DE PAGE (registre document)
   ============================================================ */
.article {
  background: var(--paper);
  color: var(--ink);
}

.article-block {
  padding-block: clamp(52px, 7vw, 84px);
  border-top: 1px solid var(--line);
}

.article-block:first-child {
  border-top: none;
}

.article-block h2 {
  font-size: clamp(28px, 2.9vw, 36px);
  line-height: 1.15;
  max-width: 24ch;
}

.article-block .prose {
  margin-top: 22px;
  color: rgba(16, 24, 43, 0.82);
}

.article-cols {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.article-cols > h2 {
  position: sticky;
  top: 108px;
}

@media (max-width: 860px) {
  .article-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article-cols > h2 {
    position: static;
  }
}

/* ============================================================
   MÉTHODOLOGIE — registre des 4 axes
   ============================================================ */
.axes {
  margin-top: 56px;
  border-top: 1px solid var(--line-strong);
}

.axe {
  display: grid;
  grid-template-columns: 130px 1fr minmax(150px, 200px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: 40px;
  border-bottom: 1px solid var(--line-strong);
}

.axe-weight {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
}

.axe-weight .u {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin-top: 8px;
  text-transform: uppercase;
}

.axe h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.axe-cats {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(16, 24, 43, 0.72);
  max-width: 68ch;
}

.axe-frag {
  width: 100%;
}

@media (max-width: 860px) {
  .axe {
    grid-template-columns: 90px 1fr;
  }

  .axe-frag {
    display: none;
  }

  .axe-weight {
    font-size: 32px;
  }
}

/* ============================================================
   NIVEAUX — gradation
   ============================================================ */
.niveaux {
  margin-top: 56px;
  border-top: 1px solid var(--line-strong);
}

.niveau {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr minmax(150px, 190px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: 36px;
  border-bottom: 1px solid var(--line-strong);
}

.niveau h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.niveau-desc {
  margin-top: 8px;
  font-size: 15.5px;
  color: rgba(16, 24, 43, 0.75);
}

.niveau-plage {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ink);
  justify-self: end;
  text-align: right;
}

@media (max-width: 760px) {
  .niveau {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .niveau-plage {
    justify-self: start;
    text-align: left;
  }
}

/* ============================================================
   SCHÉMA DE SÉPARATION (comité, gouvernance, crédibilité)
   Trois fonctions distinctes : une séquence réelle, pas un décor.
   ============================================================ */
.sep-schema {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.sep-cell {
  background: var(--paper);
  padding: 30px 28px 34px;
}

.sep-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--patine);
  text-transform: uppercase;
}

.sep-cell h3 {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
}

.sep-cell p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(16, 24, 43, 0.72);
}

@media (max-width: 800px) {
  .sep-schema {
    grid-template-columns: 1fr;
  }
}

/* Profils du comité */
.profils {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.profil {
  background: var(--paper);
  padding: 26px 24px;
}

.profil .mono {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.profil h3 {
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 700;
}

/* Ancrages légaux (fiche registre) */
.legal-ledger {
  margin-top: 40px;
  border-top: 1px solid var(--line-strong);
}

.legal-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding-block: 26px;
  border-bottom: 1px solid var(--line-strong);
}

.legal-row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--patine);
  padding-top: 4px;
}

.legal-row dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(16, 24, 43, 0.82);
}

.legal-row dd .mono {
  font-size: 14px;
}

@media (max-width: 700px) {
  .legal-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   MANIFESTE
   ============================================================ */
.manifeste {
  background: var(--paper);
  color: var(--ink);
}

.manifeste-body {
  max-width: 62ch;
  margin-inline: auto;
}

.manifeste-body p {
  font-size: 18px;
  line-height: 1.85;
  color: rgba(16, 24, 43, 0.86);
}

.manifeste-body p + p {
  margin-top: 28px;
}

.manifeste-body p strong {
  font-weight: 700;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-cat {
  padding-block: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--line);
}

.faq-cat:first-of-type {
  border-top: none;
}

.faq-cat h2 {
  font-size: clamp(28px, 2.6vw, 33px);
}

.faq-list {
  margin-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.faq-item {
  border-bottom: 1px solid var(--line-strong);
}

.faq-item summary {
  display: grid;
  grid-template-columns: 58px 1fr 28px;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--patine);
  outline-offset: 2px;
}

.faq-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--patine);
}

.faq-q {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.faq-toggle {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
  align-self: center;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--slate);
  transition: transform 200ms var(--ease-out);
}

.faq-toggle::before {
  width: 14px;
  height: 1.5px;
}

.faq-toggle::after {
  width: 1.5px;
  height: 14px;
}

.faq-item[open] .faq-toggle::after {
  transform: rotate(90deg);
}

.faq-a {
  padding: 0 42px 26px 72px;
}

.faq-a p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(16, 24, 43, 0.78);
}

.faq-a .btn--ghost {
  margin-top: 12px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .faq-item summary {
    grid-template-columns: 44px 1fr 24px;
  }

  .faq-a {
    padding: 0 0 24px 0;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--paper);
  color: var(--ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.contact-form .field--full {
  grid-column: 1 / -1;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
}

.form-status {
  grid-column: 1 / -1;
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 2px;
}

.form-status--error {
  color: var(--error);
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.3);
}

.contact-aside {
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  padding: 30px 28px;
  position: sticky;
  top: 108px;
}

.reducers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reducers li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(16, 24, 43, 0.82);
}

.reducers li:first-child {
  border-top: none;
  padding-top: 0;
}

.reducers .idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--patine);
}

.contact-aside .micro-proof {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.contact-todo {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8a6a3a;
  border: 1px dashed rgba(169, 130, 74, 0.5);
  border-radius: 2px;
  padding: 6px 10px;
  display: inline-block;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MERCI
   ============================================================ */
.merci {
  background: var(--paper);
  color: var(--ink);
  min-height: 60dvh;
  display: flex;
  align-items: center;
}

.merci-inner {
  max-width: 640px;
}

.merci h1 {
  font-size: clamp(30px, 4vw, 44px);
}

.merci p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(16, 24, 43, 0.82);
}

/* ============================================================
   LANDING PAGES (L99 : un message, un CTA, zéro distraction)
   ============================================================ */
.lp-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: 22px;
}

.lp-header .hdr-brand {
  color: var(--paper);
}

.lp-footer {
  background: var(--ink);
  color: rgba(237, 238, 232, 0.5);
  border-top: 1px solid var(--line-dark);
  padding-block: 28px;
}

.lp-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.lp-section-title {
  font-size: clamp(28px, 2.8vw, 34px);
}

.lp-3col {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.lp-3col > div {
  background: var(--paper);
  padding: 28px 26px;
}

.lp-3col h3 {
  font-size: 16.5px;
  font-weight: 700;
}

.lp-3col p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(16, 24, 43, 0.75);
}

/* ============================================================
   PAGES JURIDIQUES (stubs flagués)
   ============================================================ */
.legal-stub {
  background: var(--paper);
  color: var(--ink);
  min-height: 55dvh;
}

.legal-stub .todo-banner {
  margin-top: 32px;
}

.todo-banner {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: #7a5c2e;
  background: rgba(169, 130, 74, 0.09);
  border: 1px dashed rgba(169, 130, 74, 0.5);
  border-radius: 2px;
  padding: 16px 20px;
  max-width: 720px;
}

.sec--ink .todo-banner,
.sec--ink2 .todo-banner {
  color: var(--brass-light);
  background: rgba(169, 130, 74, 0.08);
}

/* ============================================================
   V3 — PREUVE HUMAINE SUR PAPIER
   Les photos réelles vivent sur fond Papier, sans pattern ni voile,
   sans aucune légende de stats superposée.
   ============================================================ */
.about-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.about-portrait {
  margin: 0;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-portrait figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 760px) {
  .about-media {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    max-width: 340px;
  }
}

.auditors-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.auditor-cell {
  background: var(--paper);
}

.auditor-cell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.auditor-meta {
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 700px) {
  .auditors-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Cas clients : portraits fictifs + secteurs couverts ---------- */
.clients-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.client-cell {
  background: var(--paper);
}

.client-cell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.clients-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 860px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sectors-row {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.sector-item {
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink);
}

.sector-item .sector-icon {
  color: var(--patine);
  flex-shrink: 0;
}

/* ============================================================
   INSIGHTS — grille éditoriale asymétrique premium
   (registre grands cabinets : McKinsey Insights, BCG Perspectives)
   1 hero (2 col) + 2 medium côte à côte + 3 small alignés en dessous
   ============================================================ */
.insights-section {
  background: var(--paper);
  color: var(--ink);
}

.insights-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.insights-head h2 {
  margin-top: 4px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
}

.insights-lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 60ch;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

.insights-hero {
  display: grid;
  grid-template-columns: 1fr;
}

.insights-mediums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.insights-smalls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

/* ============================================================
   INSIGHT CARDS — effet hover éditorial premium
   Repos : image plein cadre + petit kicker/titre en bas.
   Hover : image floutée & légèrement zoomée, un voile vert forêt
   monte depuis le bas comme un « swipe », le corps (kicker, titre,
   lede, CTA) apparaît en cascade avec micro-délai. Full CSS.
   ============================================================ */
.insight-card {
  --card-veil: color-mix(in srgb, var(--forest) 92%, black 8%);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--forest) 20%, var(--line-strong));
  isolation: isolate;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease;
  will-change: transform;
}

.insight-card:hover,
.insight-card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px -30px color-mix(in srgb, var(--forest) 55%, black),
    0 0 0 1px color-mix(in srgb, var(--forest-light) 40%, transparent);
  border-color: color-mix(in srgb, var(--forest-light) 55%, transparent);
}

.insight-card--hero { aspect-ratio: 21 / 9; }
.insight-card--medium { aspect-ratio: 4 / 3; }
.insight-card--small { aspect-ratio: 3 / 4; }

.insight-card-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.insight-card-media img {
  object-fit: cover;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 500ms ease;
  transform: scale(1.001);
  filter: saturate(0.94) contrast(1.02);
}

.insight-card:hover .insight-card-media img,
.insight-card:focus-visible .insight-card-media img {
  transform: scale(1.08) translateY(-1.5%);
  filter: blur(14px) saturate(0.55) contrast(1.05);
  opacity: 0.7;
}

/* Fallback quand pas d'image : fragment Empreinte sur dégradé Forêt. */
.insight-card-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 65% 35%,
      color-mix(in srgb, var(--forest-light) 25%, transparent),
      var(--ink) 70%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}

.insight-card-fallback .empreinte {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  transition: opacity 500ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-card:hover .insight-card-fallback .empreinte {
  opacity: 0.35;
  transform: scale(1.06);
}

/* Scrim par défaut : léger dégradé bas pour lisibilité du kicker+titre. */
.insight-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(11, 17, 31, 0) 45%,
    rgba(11, 17, 31, 0.55) 78%,
    rgba(11, 17, 31, 0.92) 100%
  );
  transition: opacity 500ms ease;
}

.insight-card:hover .insight-card-scrim {
  opacity: 0.35;
}

/* Le voile qui « swipe » depuis le bas au hover. Dégradé forêt profond,
   translateY(100%) → 0 sur cubic-bezier premium. */
.insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--forest) 88%, black) 0%,
    color-mix(in srgb, var(--forest) 78%, black 22%) 55%,
    color-mix(in srgb, var(--forest) 65%, black 35%) 100%
  );
  transform: translateY(102%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.insight-card:hover::before,
.insight-card:focus-visible::before {
  transform: translateY(0);
}

/* Marque de coin (angle typographié) qui apparaît au hover — signe éditorial. */
.insight-card::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--paper);
  border-right: 1px solid var(--paper);
  opacity: 0;
  transform: translate(6px, -6px);
  transition: opacity 380ms ease 180ms, transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.insight-card:hover::after,
.insight-card:focus-visible::after {
  opacity: 0.55;
  transform: translate(0, 0);
}

.insight-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.5vw, 34px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cascade d'apparition au hover : chaque élément a son délai propre. */
.insight-card-meta,
.insight-card-title,
.insight-card-lede,
.insight-card-cta {
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms ease;
}

.insight-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(6px);
  opacity: 0.85;
  transition-delay: 0ms;
}

.insight-card:hover .insight-card-meta {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 260ms;
}

.insight-card-kicker {
  color: var(--forest-mist);
  font-weight: 600;
}

.insight-card:hover .insight-card-kicker {
  color: var(--paper);
}

.insight-card-read {
  color: rgba(237, 238, 232, 0.55);
}

.insight-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--paper);
  text-wrap: balance;
  transform: translateY(0);
  transition-delay: 0ms;
}

.insight-card:hover .insight-card-title {
  transform: translateY(-2px);
  transition-delay: 320ms;
}

.insight-card--hero .insight-card-title {
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: 22ch;
}

.insight-card--medium .insight-card-title {
  font-size: clamp(19px, 1.7vw, 23px);
  max-width: 20ch;
}

.insight-card--small .insight-card-title {
  font-size: clamp(16px, 1.3vw, 18px);
  max-width: 18ch;
}

/* La lede est masquée par défaut, révélée au hover — ça libère la carte
   au repos et fait apparaître le contenu comme un « reveal éditorial ». */
.insight-card-lede {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(237, 238, 232, 0.85);
  max-width: 52ch;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition:
    opacity 380ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

.insight-card:hover .insight-card-lede,
.insight-card:focus-visible .insight-card-lede {
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
  transition-delay: 380ms;
}

.insight-card--medium .insight-card-lede {
  font-size: 13px;
}

.insight-card--small .insight-card-lede {
  display: none; /* les smalls ne portent pas de lede — juste titre + cta. */
}

.insight-card-cta {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest-mist);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0ms;
}

.insight-card:hover .insight-card-cta,
.insight-card:focus-visible .insight-card-cta {
  color: var(--paper);
  opacity: 1;
  transform: translateY(0);
  transition-delay: 460ms;
}

.insight-card-cta span[aria-hidden='true'] {
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-card:hover .insight-card-cta span[aria-hidden='true'] {
  transform: translateX(4px);
}

/* prefers-reduced-motion : garde le contenu apparent mais sans le grand
   swipe animé — les transitions durent < 100ms et la lede est visible. */
@media (prefers-reduced-motion: reduce) {
  .insight-card,
  .insight-card *,
  .insight-card::before,
  .insight-card::after {
    transition-duration: 80ms !important;
    transition-delay: 0ms !important;
  }
  .insight-card-lede {
    opacity: 1;
    max-height: none;
    transform: none;
  }
  .insight-card-cta {
    opacity: 1;
    transform: none;
  }
}

.insights-foot {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .insights-mediums,
  .insights-smalls {
    grid-template-columns: 1fr;
  }
  .insight-card--hero,
  .insight-card--medium,
  .insight-card--small {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   V3 — CARTE D'ARTICLE AUTO-GÉNÉRÉE (Ressources)
   Accent par axe ESG, fragment Relief seedé par ID : aucune image
   par article, scalable à l'infini.
   ============================================================ */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--card-accent, var(--patine));
  text-decoration: none;
  color: var(--ink);
  transition: background-color 150ms var(--ease-out);
}

a.article-card:hover {
  background: #e4e5df;
}

.article-card-frag {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.article-card-frag .relief {
  width: 100%;
  height: 100%;
}

.article-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 24px;
}

.article-card-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-accent, var(--patine));
  font-weight: 500;
}

.article-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ============================================================
   SESSION 4 — Volet académique Dauphine × ICFAP
   Utility bar dans le header, section "Un référentiel enseigné",
   colonne footer dédiée. Le volet académique reste visuellement
   distinct et discret — fonction double : accès permanent pour
   les étudiants ET preuve d'autorité pour le B2B principal.
   ============================================================ */

/* ---------- Utility bar (header top) ---------- */
.hdr-utility {
  background: color-mix(in srgb, var(--forest) 92%, black 8%);
  color: color-mix(in srgb, var(--paper) 85%, var(--forest-mist) 15%);
  border-bottom: 1px solid color-mix(in srgb, var(--forest-light) 25%, transparent);
  font-size: 12px;
  line-height: 1;
}

.hdr-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 34px;
}

.hdr-utility-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr-utility-kicker {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-mist);
  font-weight: 600;
}

.hdr-utility-sep {
  color: color-mix(in srgb, var(--forest-mist) 40%, transparent);
}

.hdr-utility-names {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--paper) 92%, transparent);
}

.hdr-utility-portal {
  position: relative;
}

.hdr-utility-btn {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--forest-mist) 45%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.hdr-utility-btn:hover,
.hdr-utility-btn[aria-expanded='true'] {
  background: var(--forest-light);
  border-color: var(--forest-light);
}

.hdr-utility-btn-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.hdr-utility-btn:hover .hdr-utility-btn-arrow {
  transform: translateX(2px);
}

.hdr-utility-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--forest-light) 30%, transparent);
  border-radius: 4px;
  padding: 6px;
  list-style: none;
  margin: 0;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.5);
  z-index: 10;
  animation: hdr-utility-menu-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hdr-utility-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hdr-utility-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 150ms ease, color 150ms ease;
}

.hdr-utility-menu-link:hover,
.hdr-utility-menu-link:focus-visible {
  background: color-mix(in srgb, var(--forest) 40%, transparent);
  color: var(--forest-mist);
  outline: none;
}

@media (max-width: 640px) {
  .hdr-utility-inner {
    height: 32px;
    gap: 12px;
  }
  .hdr-utility-kicker,
  .hdr-utility-sep {
    display: none;
  }
  .hdr-utility-names {
    font-size: 11.5px;
  }
  .hdr-utility-btn {
    padding: 5px 10px;
    font-size: 11.5px;
  }
}

/* Compensation : les pages internes (.phero) avaient un padding-top calé
   sur --header-height. La utility bar ajoute ~34 px : on augmente d'autant. */
.phero {
  padding-top: 186px;
}

@media (max-width: 900px) {
  .phero {
    padding-top: 156px;
  }
}

/* ---------- Section Partenaires « Un référentiel enseigné » ---------- */
.partners {
  background: var(--paper-2);
  color: var(--ink);
  padding-block: clamp(80px, 9vw, 128px);
  position: relative;
}

.partners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 20vw, 200px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--forest) 50%, transparent 100%);
}

.partners-head {
  max-width: 68ch;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.partners-head .refline {
  margin-bottom: 14px;
}

.partners-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 20px;
}

.partners-head h2 em {
  font-style: italic;
  color: var(--forest);
}

.partners-lede {
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  max-width: 64ch;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.partner-card {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 2px solid transparent;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  min-height: 260px;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms ease,
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}

.partner-card:hover,
.partner-card:focus-visible {
  transform: translateY(-4px);
  border-top-color: var(--forest);
  box-shadow: 0 30px 60px -35px color-mix(in srgb, var(--forest) 50%, black);
  outline: none;
}

.partner-mark {
  position: relative;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--forest) 96%, black) 0%,
    color-mix(in srgb, var(--forest) 82%, black 18%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}

.partner-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      color-mix(in srgb, var(--forest-light) 45%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0.7;
}

.partner-mark::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid color-mix(in srgb, var(--forest-mist) 30%, transparent);
  pointer-events: none;
}

.partner-mark-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  z-index: 1;
}

.partner-mark-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper);
  padding: 0 12px;
}

.partner-mark-sub {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-mist);
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--forest-mist) 35%, transparent);
}

.partner-body {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  gap: 14px;
}

.partner-kicker {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 600;
}

.partner-full {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.partner-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  flex: 1;
}

.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--forest);
  transition: gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-cta span[aria-hidden='true'] {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-card:hover .partner-cta,
.partner-card:focus-visible .partner-cta {
  gap: 14px;
}

.partner-card:hover .partner-cta span[aria-hidden='true'],
.partner-card:focus-visible .partner-cta span[aria-hidden='true'] {
  transform: translateX(4px);
}

.partners-foot {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

@media (max-width: 900px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }
  .partner-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .partner-mark {
    aspect-ratio: 16 / 9;
    padding: 24px;
  }
}

/* ---------- Footer : colonne accent Portail étudiant ---------- */
.ftr-col--accent .ftr-col-title {
  color: var(--forest-mist);
}

.ftr-col--accent ul li a,
.ftr-col--accent ul li a:visited {
  color: color-mix(in srgb, var(--paper) 88%, var(--forest-mist) 12%);
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.ftr-col--accent ul li a:hover {
  color: var(--forest-mist);
  border-bottom-color: var(--forest-mist);
}

.ftr-formation-highlight {
  color: var(--forest-mist);
  font-weight: 500;
}

/* ============================================================
   SITE STATIQUE (site html/css pur, sans framework, zéro JS
   sauf le strict nécessaire natif du navigateur : <details>
   pour le menu déroulant, checkbox hack pour le menu mobile).
   ============================================================ */

/* ---------- Menu mobile : checkbox hack via :has() ---------- */
.hdr-burger-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hdr-mobile {
  display: none;
}

.hdr-inner:has(.hdr-burger-checkbox:checked) ~ #menu-mobile,
.hdr:has(.hdr-burger-checkbox:checked) #menu-mobile {
  display: block;
}

.hdr:has(.hdr-burger-checkbox:checked) .hdr-burger-box i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.hdr:has(.hdr-burger-checkbox:checked) .hdr-burger-box i:nth-child(2) {
  opacity: 0;
}
.hdr:has(.hdr-burger-checkbox:checked) .hdr-burger-box i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.hdr-burger {
  cursor: pointer;
}

/* ---------- Dropdown "Espace étudiant" : <details> natif ---------- */
.hdr-utility-portal summary {
  list-style: none;
  cursor: pointer;
}

.hdr-utility-portal summary::-webkit-details-marker {
  display: none;
}

.hdr-utility-portal[open] .hdr-utility-btn {
  background: var(--forest-light);
  border-color: var(--forest-light);
}

.hdr-utility-portal[open] .hdr-utility-btn-arrow {
  transform: rotate(-90deg);
  display: inline-block;
}

/* ---------- Hero carrousel (CSS pur, zéro JS) ----------
   3 slides en fondu enchaîné automatique, cycle de 18 s (6 s/slide),
   via @keyframes + animation-delay décalé. Chaque slide porte sa
   propre image, son propre texte (kicker/titre/sous-titre/CTA) qui
   crossfade avec elle : pas de synchronisation séparée nécessaire.
   La barre d'index en bas est un indicateur visuel synchronisé sur
   le même cycle, non interactif (aucun JS pour piloter un clic). */
.hcaro {
  position: relative;
  height: clamp(480px, 62vh, 660px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}

.hcaro-stage {
  position: absolute;
  inset: 0;
}

.hcaro-slide {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: var(--paper);
  opacity: 0;
  animation: hcaro-cycle 18s infinite;
}

/* Filet de sécurité : le slide 1 reste visible par défaut (opacity:1)
   indépendamment de l'animation. Si l'animation tourne normalement, ses
   valeurs de keyframe prennent le dessus sur cette valeur statique pendant
   toute son exécution (comportement standard CSS) ; si elle ne s'exécute
   pas pour une raison quelconque (accessibilité système, navigateur,
   throttling), le hero affiche toujours au moins le slide 1, jamais un
   bandeau vide. */
.hcaro-slide--1 {
  opacity: 1;
  animation-delay: 0s;
}
.hcaro-slide--2 { animation-delay: 6s; }
.hcaro-slide--3 { animation-delay: 12s; }

@keyframes hcaro-cycle {
  0%      { opacity: 0; }
  2.8%    { opacity: 1; }
  30.5%   { opacity: 1; }
  33.3%   { opacity: 0; }
  100%    { opacity: 0; }
}

.hcaro-slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
}

.hcaro-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.82) saturate(0.92);
  transform: scale(1);
  animation: hcaro-zoom 18s infinite;
}

/* animation-delay ne se propage pas automatiquement au petit-enfant via
   "inherit" (le parent direct .hcaro-slide-media n'a pas de délai propre,
   "inherit" y résolvait donc toujours 0s) : on répète explicitement le
   délai de chaque slide sur son image. */
.hcaro-slide--1 .hcaro-slide-media img { animation-delay: 0s; }
.hcaro-slide--2 .hcaro-slide-media img { animation-delay: 6s; }
.hcaro-slide--3 .hcaro-slide-media img { animation-delay: 12s; }

@keyframes hcaro-zoom {
  0%      { transform: scale(1); }
  33.3%   { transform: scale(1.06); }
  100%    { transform: scale(1.06); }
}

.hcaro-slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(11, 17, 31, 0.92) 0%,
    rgba(11, 17, 31, 0.45) 45%,
    rgba(11, 17, 31, 0.08) 75%
  );
}

.hcaro-slide-caption {
  position: absolute;
  inset: auto 0 64px 0;
  display: block;
}

.hcaro-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-mist);
  margin-bottom: 14px;
}

.hcaro-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 18px;
  color: var(--paper);
}

.hcaro-title em {
  font-style: italic;
  color: var(--forest-mist);
}

.hcaro-sub {
  display: block;
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.6;
  max-width: 52ch;
  color: rgba(237, 238, 232, 0.82);
  margin-bottom: 28px;
}

.hcaro-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper);
  padding: 12px 22px;
  border: 1px solid rgba(237, 238, 232, 0.35);
  border-radius: 2px;
}

.hcaro-slide:hover .hcaro-cta {
  border-color: var(--forest-mist);
  color: var(--forest-mist);
}

/* ---------- Index visuel synchronisé (non interactif) ---------- */
.hcaro-index {
  position: absolute;
  inset: auto 0 24px 0;
  z-index: 2;
  display: flex;
  gap: clamp(16px, 2vw, 32px);
}

.hcaro-index-item {
  flex: 1;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.55;
  transition: opacity 300ms ease;
}

.hcaro-index-num {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(237, 238, 232, 0.65);
}

.hcaro-index-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 238, 232, 0.85);
}

.hcaro-index-bar {
  display: block;
  height: 2px;
  background: rgba(237, 238, 232, 0.2);
  overflow: hidden;
}

.hcaro-index-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--forest-mist);
  animation: hcaro-index-fill 18s infinite;
}

.hcaro-index-fill--1 { animation-delay: 0s; }
.hcaro-index-fill--2 { animation-delay: 6s; }
.hcaro-index-fill--3 { animation-delay: 12s; }

@keyframes hcaro-index-fill {
  0%    { width: 0%; }
  33.3% { width: 100%; }
  100%  { width: 100%; }
}

@media (max-width: 900px) {
  .hcaro-index {
    display: none;
  }
  .hcaro-slide-caption {
    inset: auto 0 40px 0;
  }
}

/* Ralentir la durée sans toucher les délais désynchronisait les 3 slides
   (delay resté calé sur un cycle de 18 s pendant que la durée passait à
   60 s) : plusieurs images apparaissaient simultanément ou aucune ne
   s'affichait selon le moment. Fix : on coupe complètement l'animation et
   on fige sur le slide 1, seul état garanti stable. */
@media (prefers-reduced-motion: reduce) {
  .hcaro-slide,
  .hcaro-slide-media img,
  .hcaro-index-fill {
    animation: none;
  }
  .hcaro-slide {
    opacity: 0;
  }
  .hcaro-slide--1 {
    opacity: 1;
  }
  .hcaro-index-fill--1 {
    width: 100%;
  }
}

/* ---------- 404 ---------- */
.error-static {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  background: var(--paper);
  color: var(--ink);
}

.error-static-code {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--forest);
  margin-bottom: 18px;
}

.error-static-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 16px;
  max-width: 24ch;
}

.error-static-sub {
  font-size: 16px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  max-width: 48ch;
  margin-bottom: 28px;
}

/* ---------- Formulaire de contact : rendu propre sans backend ---------- */
.contact-form-notice {
  background: color-mix(in srgb, var(--forest) 8%, var(--paper));
  border: 1px dashed color-mix(in srgb, var(--forest) 40%, transparent);
  border-radius: 3px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--forest);
  margin-bottom: 24px;
}