/* ============================================================================
   Perpens — refonte.css
   Refonte premium, piste B « Intelligence de marché » (DESIGN.md, section
   Refonte premium). Démonstration de chaque pièce :
   site/maquettes/design-system.html.

   Feuille unique du site depuis le 2026-09-27 : chaque page charge
   fonts/polices.css + refonte.css + refonte.js (la bibliothèque ajoute
   bibliotheque.css). L'ancienne feuille styles.css et nav.js ont été
   retirés une fois toutes les pages migrées.

   SOMMAIRE
   01 · Jetons            07 · Cartes et panneaux
   02 · Base              08 · Accueil : hero
   03 · Typographie       09 · Accueil : preuves, publics, offres
   04 · Coque et feuilles 10 · Accueil : bibliothèque, cabinet, appel final
   05 · En-tête et menu   11 · Pied de page
   06 · Boutons et puces  12 · Apparition au défilement, mouvement réduit
                          13 · Pages intérieures : en-tête nuit compact
                          14 · Page Offres     15 · Page Méthode
                          16 · Page Qui sommes-nous 17 · Page Contact
                          18 · Mentions légales et 404
                          19 · Questionnaires  20 · Écrans tactiles
                          21 · Sans JavaScript, mouvement réduit

   RÈGLES D'HONNÊTETÉ (DESIGN.md) : aucun faux signal de logiciel, et aucun
   texte ne dépend d'une animation pour être visible.
   ========================================================================== */


/* == 01 · JETONS ========================================================== */
:root {
  /* Coque nuit */
  --night: #021F17;  --night-2: #04372A;  --panel: #0B3328;
  --glass: rgba(16, 72, 56, .38);  --glass-edge: rgba(167, 243, 208, .16);
  --grid-line: rgba(167, 243, 208, .05);
  --tx: #EAF7F1;    /* 15,8:1 sur nuit */
  --tx-2: #A9CFC0;  /* 10,2:1 sur nuit, 8,2:1 sur panneau */
  --tx-3: #8FBBA9;  /* libellés mono, 8,1:1 */
  --signal: #34D399;      /* donnée réelle, 9,0:1 sur nuit — jamais sur feuille */
  --coral: #FB7A5C;       /* focus, accent humain */
  --coral-fil: #F0643F;   /* fil rouge Perpens sur fond clair (charte § 4) */
  --coral-soft: #FF9E85;  /* texte corail sur nuit, 8,7:1 */
  /* Feuilles */
  --paper: #FFFFFF;  --canvas: #F3F6F4;  --line: #E2E8E5;  --line-strong: #7F8B85;
  --ink: #1B1F1D;  --ink-2: #55605B;  --ink-3: #66716C;
  --em-800: #065F46;  --em-700: #047857;  --em-200: #BFE3D3;  --em-50: #ECFDF5;
  --plum-500: #7C5295;  --plum-700: #5F3D74;  --plum-50: #EDE3F2;
  --coral-ink: #A63A22;  --coral-50: #FDECE7;
  /* Nuances complémentaires (polish, 2026-09-27) : mêmes valeurs qu'avant,
     désormais nommées ici au lieu d'être écrites en dur plus bas */
  --night-3: #062A20;       /* fond du menu déroulant sur téléphone */
  --em-900: #064E3B;        /* survol des boutons pleins sur feuille */
  --em-500: #10B981;        /* filet « Achat » sur nuit */
  --em-300: #9FD6BF;        /* bordure au survol d'une ligne d'offre */
  --plum-200: #D9C6E4;  --plum-300: #CDB6DA;  --plum-400: #B08BC6;
  --coral-200: #F6C3B5;
  --amber-50: #FFF4E8;  --amber-200: #F2D3B3;  --amber-ink: #8A4F1C;  /* « à confirmer », 6,0:1 */
  /* Typographie */
  --f-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titre: 'Sora', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; /* charte Perpens § 6 */
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 2.64vw + 1.88rem, 4rem);
  --fs-h2: clamp(1.75rem, 1.55vw + 1.39rem, 2.625rem);
  --fs-h3: 1.25rem;  --fs-small: .875rem;  --fs-label: .75rem;
  /* Espacements (pas de 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* Géométrie */
  --wrap: 1180px;  --gut: 16px;  --edge: 8px;
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;
  /* Profondeur */
  --sh-dark: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -28px rgba(0,0,0,.8);
  --sh-lift: 0 1px 0 rgba(255,255,255,.10) inset, 0 34px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(52,211,153,.18);
  --sh-paper: 0 1px 0 rgba(6,78,59,.05), 0 18px 40px -28px rgba(3,40,30,.45);
  --sh-paper-lift: 0 1px 0 rgba(6,78,59,.05), 0 30px 56px -28px rgba(3,40,30,.55);
  /* Mouvement */
  --ease: cubic-bezier(.2,.7,.2,1);  --t-press: 120ms;  --t-hover: 200ms;  --t-in: 400ms;
}
@media (min-width: 768px) { :root { --gut: 32px; --edge: 16px; } }


/* == 02 · BASE ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } /* le focus et les ancres ne passent pas sous l'en-tête collant */
body {
  margin: 0; background: var(--night); color: var(--tx);
  font: 400 1rem/1.6 var(--f-sans); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
/* Sur feuille claire, le corail n'atteint que 2,6:1 : anneau corail foncé
   (6,5:1 sur blanc). Retour au corail vif dans les consoles sombres. */
.sheet :focus-visible { outline-color: var(--coral-ink); }
.sheet .readout :focus-visible { outline-color: var(--coral); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill);
}
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1, "tnum" 1; }


/* == 03 · TYPOGRAPHIE ===================================================== */
h1, h2, h3 { margin: 0; font-family: var(--f-titre); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
h1 { font-size: var(--fs-display); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.25; }
.label {
  font: 500 var(--fs-label)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx-3); display: inline-flex; align-items: center; gap: 8px;
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--signal); flex: none; }
.sheet .label { color: var(--em-700); }
.sheet .label::before { background: var(--em-700); }
.lede { font-size: clamp(1.05rem, .4vw + .98rem, 1.2rem); color: var(--tx-2); max-width: 58ch; }
.sheet .lede { color: var(--ink-2); }
.accent { color: var(--signal); }
.sheet .accent { color: var(--em-700); }


/* == 04 · COQUE ET FEUILLES =============================================== */
.nightfield { position: relative; isolation: isolate; }
.nightfield::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(700px 480px at 5% 60%, rgba(4,120,87,.22), transparent 65%);
}
.nightfield::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 80%);
}
/* Feuille : section claire arrondie posée sur la nuit */
.sheet {
  background: var(--canvas); color: var(--ink); border-radius: var(--r-xl);
  margin: 0 var(--edge); padding: var(--s8) 0;
}
.sheet.white { background: var(--paper); }
/* Ancre vers une feuille : le titre ne passe pas sous la barre fixe */
.sheet[id] { scroll-margin-top: 84px; }
.sheet + .sheet { margin-top: var(--s2); }
@media (min-width: 768px) { .sheet { padding: var(--s9) 0; } }


/* == 05 · EN-TÊTE ET MENU (verre dépoli n°1) ============================= */
.top { position: sticky; top: 0; z-index: 50; padding: 12px 0; background: linear-gradient(var(--night) 40%, transparent); }
.top .wrap { position: relative; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: rgba(2,31,23,.9); border: 1px solid var(--glass-edge);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top-bar { background: rgba(2,31,23,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; min-height: 44px; }
.brand svg { width: 26px; height: 26px; }
/* Marque Perpens (docs/CHARTE-PERPENS.md, option A du 2026-10-07) : logo
   horizontal en version sombre (lettres blanches, fil corail clair), 40 px de
   haut, issu de site/marque/ et jamais retapé. */
.brand .brand-logo { display: block; height: 40px; width: auto; }
/* Sous 360 px, le logo réduit laisse la place au bouton « Menu » (320 px = zoom 400 %). */
@media (max-width: 359px) {
  .top-bar { gap: 10px; padding-left: 14px; }
  .brand .brand-logo { height: 32px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav a { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
}
/* Fil rouge Perpens (charte § 4) : une seule verticale corail lestée par page,
   dans la marge gauche du premier bloc, du haut du bloc jusqu'au niveau de
   l'appel à l'action (fin du contenu, avant la marge basse du bloc).
   Fil 3 px, poids 12 px (4 × le fil). Purement décoratif (aria-hidden). */
section:has(> .fil-rouge) { position: relative; --fil-bas: var(--s7); }
@media (min-width: 1024px) { .hero:has(> .fil-rouge), .split:has(> .fil-rouge) { --fil-bas: var(--s8); } }
.notfound:has(> .fil-rouge) { --fil-bas: var(--s9); }
.fil-rouge { position: absolute; top: 0; bottom: calc(var(--fil-bas) + 12px); left: max(7px, calc((100% - var(--wrap)) / 2 - 20px)); width: 3px; margin-left: -1.5px; background: var(--coral); pointer-events: none; z-index: 0; }
.fil-rouge::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--coral); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  text-decoration: none; font-size: .94rem; color: var(--tx-2);
  padding: 10px 13px; border-radius: var(--r-pill); transition: color var(--t-hover), background var(--t-hover);
}
.nav a:hover { color: var(--tx); background: rgba(255,255,255,.05); }
.nav a[aria-current] { color: var(--tx); background: rgba(52,211,153,.10); }
/* Couleur du texte prise de la variante du bouton (--fg) : la valeur fixe --em-800
   mettait du vert foncé sur le bouton prune des acheteurs (1,3:1 ; corrigé le 2026-10-08). */
.nav .btn { margin-left: 6px; min-height: 44px; padding: 10px 18px; color: var(--fg); }
.menu-btn { display: none; }
@media (max-width: 1023px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    border-radius: var(--r-pill); border: 1px solid var(--glass-edge); background: rgba(255,255,255,.04);
    color: var(--tx); font: 500 .94rem var(--f-sans); cursor: pointer;
  }
  .menu-btn i { width: 16px; height: 10px; position: relative; }
  .menu-btn i::before, .menu-btn i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t-hover);
  }
  .menu-btn i::before { top: 1px; }
  .menu-btn i::after { bottom: 1px; }
  .menu-btn[aria-expanded="true"] i::before { transform: translateY(3.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] i::after { transform: translateY(-4px) rotate(-45deg); }
  .nav {
    position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + 4px);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px;
    border-radius: var(--r-lg); background: var(--night-3); border: 1px solid var(--glass-edge); box-shadow: var(--sh-dark);
    opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
    transition: opacity var(--t-hover), transform var(--t-hover), visibility 0s var(--t-hover);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--t-hover), transform var(--t-hover); }
  .nav a { padding: 14px 16px; font-size: 1rem; }
  .nav .btn { margin: 6px 0 0; min-height: 48px; }
  /* Sans JavaScript, le menu reste déplié sous la barre */
  html:not(.js) .nav { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; margin-top: 8px; }
  html:not(.js) .top-bar { flex-wrap: wrap; border-radius: var(--r-lg); }
  html:not(.js) .nav { width: 100%; }
}


/* == 06 · BOUTONS ET PUCES ================================================ */
.btn {
  --bg: transparent; --fg: var(--tx); --bd: var(--glass-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font: 600 1rem/1.1 var(--f-sans); letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--t-hover) var(--ease), background var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover), color var(--t-hover);
}
.btn .arr { transition: transform var(--t-hover) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translateY(0); transition-duration: var(--t-press); }
/* Sur nuit */
.head-actions { margin: var(--s5) 0 0; }
.btn-note { font: 500 var(--fs-label)/1 var(--f-mono); letter-spacing: .06em; opacity: .8; }
.btn-primary { --bg: #fff; --fg: var(--em-800); --bd: #fff; box-shadow: 0 10px 30px -12px rgba(52,211,153,.55); }
.btn-primary:hover { --bg: var(--em-50); }
.btn-ghost:hover { --bd: var(--signal); --bg: rgba(52,211,153,.08); }
/* Sur feuille */
.sheet .btn-primary { --bg: var(--em-800); --fg: #fff; --bd: var(--em-800); box-shadow: none; }
.sheet .btn-primary:hover { --bg: var(--em-900); box-shadow: var(--sh-paper); }
.sheet .btn-ghost { --fg: var(--em-800); --bd: var(--em-700); }
.sheet .btn-ghost:hover { --bg: var(--em-800); --fg: #fff; --bd: var(--em-800); }
.btn-buyer { --bg: var(--plum-500); --fg: #fff; --bd: var(--plum-500); }
.btn-buyer:hover { --bg: var(--plum-700); --bd: var(--plum-700); }
.sheet .btn-buyer { --bg: var(--plum-500); --fg: #fff; --bd: var(--plum-500); }
.sheet .btn-buyer:hover { --bg: var(--plum-700); --bd: var(--plum-700); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  font: 500 .78rem/1.2 var(--f-mono); letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--glass-edge); color: var(--tx-2); background: rgba(255,255,255,.03);
}
.chip.on { color: var(--signal); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.chip.warm { color: var(--coral-soft); border-color: rgba(251,122,92,.4); background: rgba(251,122,92,.08); }
.sheet .chip { color: var(--em-800); border-color: var(--em-200); background: var(--em-50); }
.sheet .chip.warm { color: var(--coral-ink); border-color: var(--coral-200); background: var(--coral-50); }
.sheet .chip.plum { color: var(--plum-700); border-color: var(--plum-200); background: var(--plum-50); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }


/* == 07 · CARTES ET PANNEAUX ============================================== */
.panel {
  position: relative; isolation: isolate; background: var(--panel);
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--sh-dark);
}
/* Verre dépoli : un seul panneau par écran, avec repli opaque */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
}
.spot { transition: transform var(--t-in) var(--ease), box-shadow var(--t-in) var(--ease); }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(52,211,153,.14), transparent 60%);
  transition: opacity .35s;
}
.spot:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.spot:hover::after { opacity: 1; }


/* == 08 · ACCUEIL : HERO ================================================== */
.hero { padding: var(--s5) 0 var(--s7); }
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 1024px) {
  .hero { padding: var(--s7) 0 var(--s8); }
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 56px; }
}
.hero h1 { margin: var(--s4) 0 var(--s5); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lede { margin-bottom: var(--s5); }
.cta-note { margin-top: var(--s3); font: 400 .8rem/1.5 var(--f-mono); color: var(--tx-3); }
/* Deux boutons, chacun avec sa précision dessous (haut des parcours, 2026-10-07) */
.cta-pair { align-items: flex-start; gap: var(--s4) var(--s3); }
.cta-item { display: flex; flex-direction: column; align-items: flex-start; }
.cta-item .cta-note { margin-top: var(--s2); max-width: 34ch; }
.cta-note a { color: var(--tx-2); text-underline-offset: 3px; }

/* Portrait réduit à côté du libellé, sous 1024 px seulement */
.hero-id { display: flex; align-items: center; gap: 12px; }
.hero-face {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none;
  background: var(--night-2); border: 1px solid var(--glass-edge);
}
@media (min-width: 1024px) { .hero-face { display: none; } }

/* Les quatre chiffres, dans le premier écran, attribués au fondateur */
.stats-lbl { margin-top: var(--s6); }
.stats {
  list-style: none; margin-top: var(--s3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--glass-edge);
}
.stats li { padding: var(--s4) var(--s3) var(--s2) 0; min-width: 0; }
.stats li:nth-child(even) { padding-left: var(--s4); border-left: 1px solid var(--glass-edge); }
.stats li:nth-child(n+3) { border-top: 1px solid var(--glass-edge); }
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats li { padding-left: var(--s4); border-left: 1px solid var(--glass-edge); }
  .stats li:first-child { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 0; }
}
.stats .fig {
  display: block; font: 500 clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem)/1 var(--f-mono);
  letter-spacing: -.04em; color: var(--tx); white-space: nowrap; font-feature-settings: "zero" 1, "tnum" 1;
}
.stats .fig small { font-size: .5em; color: var(--signal); margin-left: 3px; letter-spacing: 0; }
.stats .cap { display: block; margin-top: var(--s2); font-size: .82rem; line-height: 1.4; color: var(--tx-2); }

/* Panneau du fondateur : le visage dans le premier écran */
.dossier { padding: 20px; }
@media (min-width: 768px) { .dossier { padding: 26px; } }
.dossier-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--glass-edge); }
.avatar { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex: none; background: var(--night-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.dossier-head b { display: block; font-weight: 600; font-size: 1.05rem; }
.dossier-head .mono { font-size: .75rem; color: var(--tx-3); }
.timeline { margin: 22px 0 6px; }
.tl-scale { display: flex; justify-content: space-between; gap: 8px; font: .72rem var(--f-mono); color: var(--tx-3); margin-bottom: 8px; }
.tl-bar { display: flex; gap: 4px; height: 40px; }
.tl-seg {
  border-radius: 8px; display: flex; align-items: center; padding: 0 12px;
  font: 500 .8rem var(--f-mono); white-space: nowrap; overflow: hidden;
  transform-origin: left; transition: transform 1.1s var(--ease);
}
.tl-seg.bid { flex: 4; background: rgba(251,122,92,.16); color: var(--coral-soft); border: 1px solid rgba(251,122,92,.4); }
.tl-seg.buy { flex: 11; background: rgba(52,211,153,.14); color: var(--signal); border: 1px solid rgba(52,211,153,.42); transition-delay: .25s; }
.timeline.pre .tl-seg { transform: scaleX(0); }
.tl-legend { display: grid; grid-template-columns: 4fr 11fr; gap: 12px; margin-top: 12px; font-size: .84rem; color: var(--tx-2); line-height: 1.4; }
@media (max-width: 420px) { .tl-legend { grid-template-columns: 1fr; } }
.tl-legend b { display: block; font: 500 .72rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.tl-legend .c1 b { color: var(--coral-soft); }
.tl-legend .c2 b { color: var(--signal); }
.dossier-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-edge); display: grid; gap: 10px; }
.dossier-foot .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dossier-foot .k { font: 500 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); min-width: 112px; }


/* == 09 · ACCUEIL : PREUVES, PUBLICS, OFFRES ============================= */
.proof-grid { display: grid; gap: var(--s3); }
@media (min-width: 1024px) { .proof-grid { grid-template-columns: 5fr 7fr; gap: var(--s4); } }
.recours { padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; }
.recours .ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(52,211,153,.12); color: var(--signal); font: 600 1.1rem var(--f-mono);
}
.recours p { font-size: .95rem; color: var(--tx-2); }
.recours strong { color: var(--tx); font-weight: 600; }
.cats { padding: 20px 22px; }
.cats .chips { margin-top: 12px; }
.cats .chip { color: var(--tx); font-size: .8rem; }

/* Deux publics */
.sides { display: grid; gap: var(--s4); }
@media (min-width: 880px) { .sides { grid-template-columns: 1fr 1fr; gap: 20px; } }
.side {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-paper);
  padding: 28px 22px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
  transition: transform var(--t-in) var(--ease), box-shadow var(--t-in) var(--ease);
}
@media (min-width: 768px) { .side { padding: 34px 32px 30px; } }
.side:hover { transform: translateY(-4px); box-shadow: var(--sh-paper-lift); }
.side::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--em-700); }
.side.buy::before { background: var(--plum-500); }
.side-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.side .code { font: 500 .72rem var(--f-mono); color: var(--ink-3); letter-spacing: .06em; }
.side h3 { font-size: 1.35rem; }
.side > p { color: var(--ink-2); }
.side.buy .chip { color: var(--plum-700); border-color: var(--plum-200); background: var(--plum-50); }
.side .btn { align-self: flex-start; margin-top: auto; }

/* Offres + compte-rendu exemple */
.offers-grid { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .offers-grid { grid-template-columns: 6fr 5fr; gap: 20px; align-items: start; } }

/* Compte-rendu exemple : console sombre posée sur la feuille (statique) */
.readout {
  background: var(--night-2); color: var(--tx); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sh-paper-lift); position: relative; overflow: hidden; isolation: isolate;
}
@media (min-width: 768px) { .readout { padding: 28px; } }
.readout::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(500px 240px at 100% 0%, rgba(16,185,129,.18), transparent 70%);
}
.readout .chip { color: var(--coral-soft); border-color: rgba(251,122,92,.4); background: rgba(251,122,92,.08); }
.readout .chip.on { color: var(--signal); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.readout h3 { font-size: 1.15rem; margin-top: 12px; }
.ro-ctx { margin: 10px 0 16px; font-size: .9rem; color: var(--tx-2); }
.ro-ctx em { color: var(--tx-3); }
.ro-rows { list-style: none; display: grid; gap: 10px; }
.ro-rows li {
  padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-edge); font-size: .92rem; color: var(--tx-2); line-height: 1.5;
}
.ro-rows li b { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--tx); font-weight: 600; margin-bottom: 4px; }
.ro-read { margin-top: 14px; padding: 14px; border-radius: var(--r-md); border: 1px dashed rgba(52,211,153,.45); font-size: .92rem; color: var(--tx); }
.ro-read b { color: var(--signal); font: 500 .74rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ro-foot { margin-top: 16px; }
.ro-foot a { color: var(--signal); font-weight: 600; text-underline-offset: 3px; font-size: .94rem; display: inline-block; padding: 10px 0; }

/* Objection « accompagnement gratuit » */
.free { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .free { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.free blockquote {
  margin: 0; font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.1rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15;
  padding-left: var(--s5); border-left: 3px solid var(--coral);
}
.free .body { display: grid; gap: var(--s4); color: var(--ink-2); font-size: 1.02rem; }
.free .body strong { color: var(--ink); }


/* == 10 · ACCUEIL : BIBLIOTHÈQUE, CABINET, APPEL FINAL =================== */
.types { padding: 18px; display: grid; gap: 10px; }
@media (min-width: 600px) { .types { grid-template-columns: 1fr 1fr; } }
.type {
  border-radius: var(--r-md); padding: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--glass-edge);
  display: grid; gap: 6px; text-decoration: none;
  transition: transform var(--t-hover) var(--ease), border-color var(--t-hover), background var(--t-hover);
}
.type:hover { transform: translateY(-3px); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }
.type .k { font: 500 .7rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.type b { font-weight: 600; font-size: 1.05rem; color: var(--tx); }
.type span.d { font-size: .88rem; color: var(--tx-2); line-height: 1.45; }
.type.t-pme { box-shadow: inset 3px 0 0 var(--signal); }
.type.t-achat { box-shadow: inset 3px 0 0 var(--em-500); }
.type.t-nego { box-shadow: inset 3px 0 0 var(--plum-400); }
.type.t-loi { box-shadow: inset 3px 0 0 var(--coral); }

.founder { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .founder { grid-template-columns: 5fr 7fr; gap: 64px; } }
.portrait-wrap { position: relative; max-width: 380px; width: 100%; margin: 0 auto; }
.portrait { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: var(--night-2); box-shadow: var(--sh-paper-lift); margin: 0; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 30%;
  background: var(--coral); clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.badge-float {
  position: absolute; right: -6px; bottom: 22px; background: var(--paper); color: var(--ink);
  border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--sh-paper-lift); border: 1px solid var(--line);
  font: 500 .78rem/1.35 var(--f-mono);
}
@media (min-width: 900px) { .badge-float { right: -22px; } }
.badge-float b { display: block; font: 600 .95rem var(--f-sans); letter-spacing: -.01em; }
.founder h2 { margin: var(--s4) 0 var(--s5); }
.founder .lead { font-size: 1.05rem; line-height: 1.65; }
.founder .note { color: var(--ink-2); font-size: .94rem; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s5); }

.final { padding: var(--s9) 0 var(--s8); text-align: center; }
.final-card { padding: 44px 22px; max-width: 880px; margin: 0 auto; overflow: hidden; }
@media (min-width: 768px) { .final-card { padding: 64px 48px; } }
.final-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(600px 260px at 50% 0%, rgba(52,211,153,.22), transparent 70%);
}
.final h2 { margin: var(--s4) auto; max-width: 18ch; }
.final .lede { margin: 0 auto var(--s6); }
.final .cta-row { justify-content: center; }


/* == 11 · PIED DE PAGE ===================================================== */
.foot { border-top: 1px solid var(--glass-edge); padding: 28px 0 40px; font-size: .88rem; color: var(--tx-2); }
.foot-in { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; padding: 10px 12px; border-radius: var(--r-pill); color: var(--tx-2); }
.foot nav a:hover { color: var(--tx); background: rgba(255,255,255,.05); }


/* == 13 · PAGES INTÉRIEURES : en-tête nuit compact ======================
   Toute page autre que l'accueil : la nuit ne porte que la navigation, le
   titre et une phrase ; le contenu vit sur des feuilles claires. */
.page-head { padding: var(--s5) 0 var(--s7); }
@media (min-width: 1024px) { .page-head { padding: var(--s7) 0 var(--s8); } }
.page-head h1 { font-size: clamp(2.25rem, 2.2vw + 1.7rem, 3.5rem); margin: var(--s4) 0 var(--s4); max-width: 20ch; }
.page-head .lede { margin-bottom: var(--s5); }
.page-head .cta-row .btn { min-height: 44px; }

/* == 14 · PAGE OFFRES : cartes d'offre =================================== */
.group-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 760px; }
.group-head p { color: var(--ink-2); }
.offer-cards { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .offer-cards { grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } }
.ocard {
  position: relative; overflow: hidden; scroll-margin-top: 96px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-paper);
  padding: 28px 22px 22px; display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--t-in) var(--ease), box-shadow var(--t-in) var(--ease);
}
@media (min-width: 768px) { .ocard { padding: 34px 30px 26px; } }
.ocard:hover { transform: translateY(-4px); box-shadow: var(--sh-paper-lift); }
/* Filet par public : il s'étire au survol */
.ocard::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 64px;
  background: var(--em-700); transition: width var(--t-in) var(--ease);
}
.ocard:hover::before, .ocard:target::before { width: 100%; }
.ocard.buy::before { background: var(--plum-500); }
.ocard:target { box-shadow: 0 0 0 2px var(--em-700), var(--sh-paper-lift); }
.ocard.buy:target { box-shadow: 0 0 0 2px var(--plum-500), var(--sh-paper-lift); }
.ocard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ocard .code {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  font: 500 .8rem var(--f-mono); background: var(--em-50); color: var(--em-800);
}
.ocard.buy .code { background: var(--plum-50); color: var(--plum-700); }
.ocard.buy .chip { color: var(--plum-700); border-color: var(--plum-200); background: var(--plum-50); }
.ocard h3 { font-size: 1.35rem; }
.ocard p { color: var(--ink-2); }
.ocard p strong { color: var(--ink); }
.ocard ul { list-style: none; display: grid; gap: 6px; }
.ocard ul li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: .96rem; }
.ocard ul li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--em-700);
}
.ocard .disclaimer {
  padding: 14px 16px; border-radius: var(--r-md); background: var(--coral-50); color: var(--coral-ink); font-size: .94rem;
}
.ocard .disclaimer strong { color: var(--coral-ink); }
.ocard .price {
  margin-top: auto; padding: 16px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .94rem; line-height: 1.5;
}
.ocard .price .amount {
  display: block; font: 500 1.3rem/1.2 var(--f-mono); letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px;
  font-feature-settings: "zero" 1, "tnum" 1;
}
/* Ponctuation d'origine conservée dans le texte, masquée à l'écran */
.ocard .price .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: pre; }
.ocard .price { position: relative; }
.ocard .btn { align-self: flex-start; }
/* Page Acheteurs : preuve du fondateur dans la fiche qu'elle soutient */
.ocard-proof { border-left: 3px solid var(--plum-400); padding: 2px 0 2px 14px; font-size: .94rem; }
.hero-proof { margin: 0 0 var(--s5); max-width: 56ch; color: var(--tx-2); } /* preuve du recours en haut de la page Acheteurs (audit CRO 2026-10-07) */
.ocard-more summary { cursor: pointer; padding-block: 11px; font-weight: 600; color: var(--ink); } /* liste repliée de la carte Consortium (audit CRO P3) */
.ocard-more[open] summary { margin-bottom: 8px; }
.principes-titre { margin: var(--s6) 0 var(--s3); } /* deux listes de principes sur methode.html */
.ocard .try {
  display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: .9rem; color: var(--ink-2);
}
.ocard .try svg { width: 20px; height: 20px; flex: none; color: var(--em-700); margin-top: 1px; }
.ocard .try a { color: var(--em-800); font-weight: 600; text-underline-offset: 3px; }
.pricing-note {
  margin-top: var(--s6); padding: 18px 20px; border-radius: var(--r-md); border: 1px dashed var(--line-strong);
  color: var(--ink-2); font-size: .94rem; max-width: 80ch;
}
.final .cta-note a { color: var(--tx); }

/* == 15 · PAGE MÉTHODE : principes, étapes, catégories =================
   Les numéros (01, 02…) sont posés par la feuille de style : le texte de
   la page reste celui validé, mot pour mot. */
.principles { list-style: none; counter-reset: pr; display: grid; gap: 10px; }
@media (min-width: 900px) { .principles { grid-template-columns: 1fr 1fr; gap: 14px; } }
.principles li {
  counter-increment: pr; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-paper);
  padding: 20px 20px 20px 18px; color: var(--ink-2); font-size: 1.02rem;
}
.principles li::before {
  content: counter(pr, decimal-leading-zero); font: 500 .8rem/1 var(--f-mono); color: var(--em-800);
  background: var(--em-50); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center;
}

.cat-row { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 1024px) { .cat-row { grid-template-columns: 5fr 7fr; gap: 56px; } .cat-row .group-head { margin-bottom: 0; } }
.chips.big { gap: 10px; }
.chips.big .chip { font-size: .85rem; padding: 10px 16px; min-height: 44px; white-space: normal; }

.label.plum { color: var(--plum-700); }
.label.plum::before { background: var(--plum-500); }

.steps { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 768px) { .steps { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: st; position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-paper);
  padding: 22px 20px 20px;
}
.sheet.white .steps li { background: var(--canvas); box-shadow: none; }
.steps li::before {
  content: counter(st, decimal-leading-zero); font: 500 .75rem/1 var(--f-mono); letter-spacing: .06em; color: var(--em-700);
  padding-bottom: 12px; border-bottom: 2px solid var(--em-700); width: 100%;
}
.steps.buy li::before { color: var(--plum-700); border-bottom-color: var(--plum-500); }
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--ink-2); font-size: .96rem; }
.steps .refs { margin-top: auto; padding-top: 8px; font-size: .9rem; }
.steps .refs a { color: var(--em-800); font-weight: 600; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.steps.buy .refs a { color: var(--plum-700); }
.steps-foot {
  margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6);
  justify-content: space-between; color: var(--ink-2);
}
.steps-foot p { max-width: 62ch; }
.free-title { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.1rem); margin-top: var(--s4); }

/* == 12 · APPARITION AU DÉFILEMENT, MOUVEMENT RÉDUIT ====================
   Le contenu est visible par défaut. refonte.js pose .pre UNIQUEMENT sur
   les éléments situés sous la ligne de flottaison au chargement, puis la
   retire à l'entrée à l'écran ; un filet de sécurité retire toutes les
   .pre après 1,5 s. Sans JavaScript : rien n'est jamais masqué. */
.reveal { transition: opacity var(--t-in) var(--ease), transform var(--t-in) var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal.pre { opacity: 1; transform: none; }
}

/* == 16 · PAGE QUI SOMMES-NOUS ==========================================
   Le visage dans le premier écran, y compris sur téléphone (portrait
   réduit sous le titre). */
.head-founder { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .head-founder { grid-template-columns: 7fr 5fr; gap: 64px; } }
.head-portrait { margin: 0; max-width: 220px; justify-self: start; }
@media (min-width: 900px) { .head-portrait { max-width: 340px; justify-self: end; } }
.head-portrait .portrait { box-shadow: var(--sh-dark); border: 1px solid var(--glass-edge); }
.head-portrait .badge-float { font: 500 .78rem/1.35 var(--f-mono); max-width: 200px; }

.story { display: grid; }
.story-row { display: grid; gap: var(--s3); padding: var(--s6) 0; border-top: 1px solid var(--line); }
.story-row:first-child { border-top: 0; padding-top: 0; }
.story-row:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .story-row { grid-template-columns: 5fr 7fr; gap: 56px; } }
.story-row h2 { font-size: clamp(1.5rem, 1vw + 1.25rem, 2rem); }
.story-body { display: grid; gap: var(--s4); color: var(--ink-2); font-size: 1.05rem; line-height: 1.65; max-width: 64ch; }

.facts { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .facts { grid-template-columns: 1fr 1fr; gap: 20px; } }
.fact {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 22px; display: grid; gap: var(--s3); align-content: start; color: var(--ink-2);
}
@media (min-width: 768px) { .fact { padding: 32px 30px; } }
.fact h2 { font-size: 1.35rem; color: var(--ink); margin-bottom: var(--s1); }

/* == 17 · PAGE CONTACT ==================================================== */
.ticks { list-style: none; display: grid; gap: 8px; margin: 2px 0 8px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .96rem; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--em-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.side h2 { font-size: 1.5rem; }
.contact-offre {
  margin-bottom: var(--s5); padding: 14px 18px; border-radius: var(--r-md);
  background: var(--em-50); border: 1px solid var(--em-200); color: var(--em-800); font-weight: 500;
}
.contact-offre[hidden] { display: none; }

/* == 18 · MENTIONS LÉGALES ET 404 ======================================= */
/* Listes des blocs .story-body : mentions, et règles de qui-sommes-nous. */
.story-body ul { list-style: none; display: grid; gap: 10px; }
.story-body li { position: relative; padding-left: 20px; }
.story-body li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--em-700); }
.legal .story-body strong { color: var(--ink); }
.legal .story-body a { color: var(--em-800); font-weight: 600; text-underline-offset: 3px; }
.legal .story-row h2 { font-size: clamp(1.25rem, .6vw + 1.1rem, 1.6rem); }
.updated { margin-top: var(--s7); font: 500 var(--fs-label) var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.notfound { padding-bottom: var(--s9); min-height: 60vh; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s5); }
.nf-links .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* == 19 · QUESTIONNAIRES =================================================
   Les écrans sont construits par questionnaire.js (inchangé) : ses classes
   q-* et ses boutons « btn-solid » / « btn-outline » sont stylés ici, sur
   feuille claire. Aucun calcul, aucun texte n'est touché par la refonte. */
.q-sheet .wrap { max-width: 784px; }
.questionnaire { max-width: 720px; margin: 0 auto; scroll-margin-top: 88px; }
.questionnaire h2[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Boutons du script : principal = émeraude plein, secondaire = contour */
.sheet .btn-solid { --bg: var(--em-800); --fg: #fff; --bd: var(--em-800); }
.sheet .btn-solid:hover { --bg: var(--em-900); box-shadow: var(--sh-paper); }
.sheet .btn-outline { --fg: var(--em-800); --bd: var(--em-700); }
.sheet .btn-outline:hover { --bg: var(--em-800); --fg: #fff; --bd: var(--em-800); }
.btn[disabled], .btn[disabled]:hover { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.q-card, .q-message {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-paper);
  padding: 30px 22px; margin-bottom: 12px; color: var(--ink-2);
}
@media (min-width: 600px) { .q-card, .q-message { padding: 36px 34px; } }
.q-card p, .q-message p { margin: 0 0 14px; }
.q-card p:last-child, .q-message p:last-of-type { margin-bottom: 0; }
.q-card strong, .q-message strong { color: var(--ink); }
.q-card h2 { font-size: clamp(1.25rem, .8vw + 1.05rem, 1.55rem); line-height: 1.3; color: var(--ink); margin: 0 0 18px; }
.q-card h3, .q-message h3 { font-size: 1.1rem; line-height: 1.35; color: var(--ink); margin: 0 0 12px; }
.q-card .q-titre { font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.1rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 14px; }
.q-sous-titre { font-size: 1.05rem; }
.eyebrow {
  font: 500 var(--fs-label)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--em-700); display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; flex: none; }

/* Accueil du questionnaire */
.q-encadre {
  margin: 22px 0 26px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--em-50); border: 1px solid var(--em-200); color: var(--em-800); font-size: .94rem; line-height: 1.6;
}

/* Progression : texte mono + piste fine (état réel, pas décoratif) */
.q-progres { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.q-progres-texte { flex: none; font: 500 var(--fs-label)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-feature-settings: "tnum" 1; }
.q-progres-piste { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.q-progres-barre { display: block; height: 100%; border-radius: var(--r-pill); background: var(--em-700); transition: width var(--t-in) var(--ease); }
.q-card .q-libelle { font-size: clamp(1.2rem, .9vw + 1rem, 1.45rem); margin-bottom: 22px; }

/* Options de réponse : lignes à rayon 14, cible d'au moins 48 px */
.q-options { display: flex; flex-direction: column; gap: 8px; }
.q-option {
  width: 100%; min-height: 52px; padding: 14px 18px 14px 50px; position: relative;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink);
  font: 400 1rem/1.45 var(--f-sans); text-align: left; cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover), transform var(--t-press) var(--ease);
}
.q-option::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper);
  transition: border-color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
}
.q-option:hover { border-color: var(--em-700); background: var(--em-50); }
.q-option:hover::before { border-color: var(--em-700); }
.q-option:active { transform: scale(.995); }
.q-option.est-choisi { border-color: var(--em-700); background: var(--em-50); box-shadow: inset 0 0 0 1px var(--em-700); }
.q-option.est-choisi::before { border-color: var(--em-700); background: var(--em-700); box-shadow: inset 0 0 0 3px var(--paper); }
/* Choix multiple (le script n'y ajoute que le bouton « Continuer ») : cases carrées */
.q-card:has(.q-continuer) .q-option::before { border-radius: 5px; }
.q-card:has(.q-continuer) .q-option.est-choisi::before {
  box-shadow: none;
  background: var(--em-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.3l2.5 2.5L12 5.2'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.q-continuer { margin-top: 18px; }
.q-retour {
  margin-top: 18px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 .9rem var(--f-sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.q-retour:hover { color: var(--em-800); }

/* Résultat : niveau, console sombre posée sur la feuille (comme l'exemple de l'accueil) */
.q-niveau { background: var(--night-2); border-color: transparent; color: var(--tx-2); box-shadow: var(--sh-dark); }
.sheet .q-niveau :focus-visible { outline-color: var(--coral); }
.q-niveau h2 { color: var(--tx); }
.q-niveau .eyebrow { color: var(--tx-3); }
.q-niveau .eyebrow::before { background: var(--signal); }
.q-pourcentage {
  margin: 6px 0 12px !important; font: 500 clamp(3rem, 6vw, 4.25rem)/1 var(--f-mono); letter-spacing: -.04em; color: var(--tx);
  font-feature-settings: "zero" 1, "tnum" 1;
}
.q-pourcentage span { font-size: .45em; color: var(--tx-2); }
.q-points { margin: -4px 0 16px !important; font: 500 .85rem var(--f-mono); color: var(--signal); }
.q-jauge { display: block; height: 6px; margin-bottom: 22px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.q-jauge-barre { display: block; height: 100%; border-radius: var(--r-pill); background: var(--signal); }
.q-niveau .q-dim { border-bottom-color: rgba(255,255,255,.1); }
.q-niveau p { color: var(--tx-2); }
.q-niveau strong { color: var(--tx); }

/* Résultat : dimensions et signaux */
.q-dims, .q-signaux { margin: 0; padding: 0; list-style: none; }
.q-dim { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.q-dim:last-child { border-bottom: 0; }
.q-dim-nom { font-size: .95rem; color: var(--ink); }
.q-dim-etat { flex: none; padding: 4px 11px; border-radius: var(--r-pill); font: 500 .75rem/1.2 var(--f-mono); letter-spacing: .02em; border: 1px solid transparent; }
.q-dim-solide .q-dim-etat      { background: var(--em-50); color: var(--em-800); border-color: var(--em-200); }
.q-dim-a-confirmer .q-dim-etat { background: var(--amber-50); color: var(--amber-ink); border-color: var(--amber-200); }
.q-dim-attention .q-dim-etat   { background: var(--coral-50); color: var(--coral-ink); border-color: var(--coral-200); }
.q-dim-hors .q-dim-etat        { background: var(--canvas); color: var(--ink-2); border-color: var(--line); }
.q-dim-hors .q-dim-nom         { color: var(--ink-2); }
.q-signal { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.55; }
.q-signal:last-child { border-bottom: 0; padding-bottom: 0; }
.q-signal .q-signal-nom { margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.q-ligne-score p { font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--ink); }

/* Résultat : messages */
.q-message { position: relative; overflow: hidden; }
.q-message-conditionnel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--em-700); }
.q-message-fixe { background: var(--canvas); box-shadow: none; }
.q-lien-offre {
  display: inline-block; margin-top: 16px; padding: 8px 0; font-weight: 600; font-size: .94rem;
  color: var(--em-800); text-decoration: underline; text-decoration-color: var(--em-200); text-underline-offset: 4px;
}
.q-lien-offre:hover { text-decoration-color: currentColor; }
.q-message .q-renvoi, .q-sortie .q-renvoi { margin: 16px 0 0; font-weight: 600; font-size: .94rem; color: var(--ink-2); }
.q-renvoi + .q-lien-offre, .q-lien-offre + .q-lien-offre { display: block; margin-top: 4px; }

/* Résultat : limite de responsabilité, bloc d'arrêt */
.q-limite { background: var(--canvas); box-shadow: none; font-size: .9rem; line-height: 1.6; }
.q-limite h3 { font-size: 1rem; }
.q-arret { box-shadow: 0 0 0 2px var(--em-700), var(--sh-paper-lift); }
.q-arret-ouverture { font-size: 1.05rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.q-arret-points { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.q-arret-points li { padding: 12px 14px 12px 16px; border-radius: var(--r-md); background: var(--canvas); border-left: 3px solid var(--em-700); font-size: .95rem; line-height: 1.55; }
.q-arret-detail { margin: 14px 0 0; font-size: .92rem; }
.q-arret-detail a { color: var(--em-800); font-weight: 600; text-underline-offset: 4px; display: inline-block; padding: 8px 0; }

/* Résultat : email (formulaire sur feuille, DESIGN.md, Formulaires) */
.q-email-form[hidden] { display: none; }
.q-email-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.q-label { flex: 1 0 100%; font-weight: 600; font-size: .9rem; color: var(--ink); }
.q-input {
  flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: 400 1rem var(--f-sans);
}
.q-input:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: 2px; border-color: var(--em-700); }
.q-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.q-note-rgpd { padding: 16px 18px; background: var(--canvas); border-radius: var(--r-md); font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.q-note-rgpd p { margin: 0 0 8px; }
.q-note-rgpd p:last-child { margin-bottom: 0; }
.q-envoi-inactif, .q-envoi-ok { margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-md); font-size: .94rem; }
.q-envoi-ok { background: var(--em-50); color: var(--em-800); border: 1px solid var(--em-200); }
.q-envoi-inactif { background: var(--coral-50); color: var(--coral-ink); border: 1px solid var(--coral-200); }
.q-recommencer { text-align: center; margin: 22px 0 0; }

/* Sortie (acheteur, orientation) */
.q-sortie .btn { margin-top: 8px; }
.q-sortie-liens { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
.q-sortie-liens .btn { margin-top: 0; }

@media (max-width: 560px) {
  .q-dim { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* == 20 · ÉCRANS TACTILES ================================================
   Sur téléphone et tablette, le « survol » reste collé après un toucher :
   la carte touchée resterait soulevée. Les levées ne jouent donc que sur
   les appareils à souris ; les changements de couleur restent partout. */
@media (hover: none) {
  .btn:hover, .btn:hover .arr, .spot:hover, .side:hover, .offer:hover, .offer:hover .go,
  .type:hover, .ocard:hover { transform: none; }
  .spot:hover { box-shadow: var(--sh-dark); }
  .spot:hover::after { opacity: 0; }
  .side:hover, .ocard:hover { box-shadow: var(--sh-paper); }
  .ocard:hover::before { width: 64px; }
  .ocard:target::before { width: 100%; }
  .sheet .btn-primary:hover, .sheet .btn-solid:hover { box-shadow: none; }
}

/* == 21 · SANS JAVASCRIPT, MOUVEMENT RÉDUIT (tests du 2026-09-27) =======
   Sans JavaScript, le menu est déplié et utilisable : le bouton « Menu »,
   qui ne ferait rien, est masqué. Avec mouvement réduit, aucune carte ni
   aucun bouton ne se soulève au survol (placé en fin de feuille pour
   l'emporter sur les règles :hover précédentes). */
html:not(.js) .menu-btn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:hover .arr, .spot:hover, .side:hover, .offer:hover, .offer:hover .go,
  .type:hover, .ocard:hover, .q-option:active { transform: none; }
}

/* == 21 · LETTRE D'INFORMATION (newsletter.html) ============================ */
.nl-wrap { max-width: 640px; }
.nl-form { display: flex; flex-direction: column; gap: var(--s4); margin: var(--s4) 0; }
.nl-form .btn { align-self: flex-start; }
.nl-champ { display: flex; flex-direction: column; gap: 8px; }
/* .q-input porte flex: 1 1 240px, pensé pour la ligne de .q-email-form ;
   en colonne, ce 240px deviendrait une hauteur : on le neutralise ici. */
.nl-champ .q-input { flex: none; }
.nl-accord { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.nl-accord input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--em-700); }
.nl-accord input:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: 2px; }
.nl-erreur { margin: 0; font-size: .9rem; font-weight: 500; color: var(--coral-ink); }
.nl-etat:empty { display: none; }
.nl-etat { margin: 0 0 var(--s5); }
.nl-h2-suite { margin-top: var(--s7); }
#nl-annonce { margin-bottom: var(--s5); }


/* == 22 · PARCOURS (entonnoir, option D, 2026-10-01) ========================
   Pages de parcours fermées (acheteurs-publics.html, puis la page entreprises) :
   chaque page porte la couleur de son public. Repris de
   la maquette D (archivée hors dépôt le 2026-10-01). */
/* ---------- Parcours : chaque page porte la couleur de son public ---------- */
.parcours .page-head { position: relative; isolation: isolate; overflow: hidden; }
.parcours .page-head::before {
  content: ""; position: absolute; z-index: -1; top: -30%; right: -15%; width: 70vw; max-width: 900px; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
}
.parcours-pme .page-head::before { background: radial-gradient(circle, rgba(16,185,129,.30), transparent 62%); }
.parcours-ach .page-head::before { background: radial-gradient(circle, rgba(124,82,149,.48), transparent 62%); }
.parcours .page-head h1 { font-size: clamp(2.4rem, 3vw + 1.5rem, 4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; }
.parcours-pme .page-head h1 em { font-style: normal; color: var(--signal); }
.parcours-ach .page-head h1 em { font-style: normal; color: var(--plum-200); }
.parcours-ach .page-head .label { color: var(--plum-200); }
.parcours-ach .page-head .label::before { background: var(--plum-300); }
.parcours-ach .sheet .label { color: var(--plum-700); }
.parcours-ach .sheet .label::before { background: var(--plum-500); }

/* Retour à l'accueil, seul lien hors du parcours */
.crumb {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 var(--fs-label)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx-3); text-decoration: none;
}
.crumb:hover { color: var(--tx); }

/* Appel final aux couleurs du parcours */
.parcours-pme .final-card { border-color: rgba(52,211,153,.45); box-shadow: var(--sh-dark), 0 0 90px -30px rgba(52,211,153,.6); }
.parcours-ach .final-card { border-color: rgba(176,139,198,.5); box-shadow: var(--sh-dark), 0 0 90px -30px rgba(176,139,198,.7); }
.parcours-ach .final .label { color: var(--plum-200); }
.parcours-ach .final .label::before { background: var(--plum-300); }
/* Lien « essayer » glissé dans une phrase : zone de toucher portée à 44 px sans déplacer le texte (garde-fous §4). */
.parcours .try a { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* Puces longues (« Consultance et prestations intellectuelles ») : retour à la ligne permis, sinon le bloc déborde à 320 px (mesuré le 2026-10-01 : 418 px). */
.parcours .chip { white-space: normal; }

/* Situations du parcours entreprises (« Où en êtes-vous ? ») ; liens portés à 44 px de haut (garde-fous §4). */
.situations { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 768px) { .situations { grid-template-columns: 1fr 1fr; } }
.situations li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.situations b { display: block; font-size: 1.05rem; color: var(--ink); }
.situations span { display: block; margin-top: 6px; color: var(--ink-2); font-size: .95rem; }
.situations a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--em-800); font-weight: 600; text-underline-offset: 3px; }


/* == 23 · ACCUEIL EN ÉCRAN PARTAGÉ (entonnoir, option D, 2026-10-01) =========
   Deux moitiés : émeraude (entreprises), prune (acheteurs) ; le fondateur
   sur la ligne de partage. Aucun texte ne dépend d'une animation. Repris de
   la maquette D (archivée hors dépôt le 2026-10-01). Les règles de l'ancien hero
   (§ 08-09) ne servent plus à l'accueil : à retirer lors d'un nettoyage. */
/* ---------- Accueil ---------- */
.split { padding: var(--s5) 0 var(--s7); }
@media (min-width: 1024px) { .split { padding: var(--s6) 0 var(--s8); } }

.split-head { text-align: center; display: grid; justify-items: center; }
.split-id { justify-content: center; }
.split h1 {
  margin: var(--s4) auto; max-width: 19ch;
  font-size: clamp(2.2rem, 3.2vw + 1.2rem, 3.75rem); line-height: 1.04; letter-spacing: -.035em;
}
/* Seconde partie du titre en couleurs pleines, partout (décision du porteur,
   2026-10-08) : le dégradé qui remplissait les lettres se découpait ligne par
   ligne sur téléphone et devenait illisible, et ce procédé est fragile sur iPhone
   et Safari. Couleurs des deux bouts de l'ancien dégradé : vert 9,0:1 sur --night,
   lilas 10,9:1. */
.split h1 .two-a { color: var(--signal); }
.split h1 .two-b { color: var(--plum-200); }
.split .lede { max-width: 54ch; margin: 0 auto; }
.split-sign { margin: var(--s3) auto 0; max-width: 100%; font: 500 var(--fs-label)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }

/* La scène : deux moitiés, le portrait sur la couture */
.split-stage { position: relative; margin-top: var(--s7); }
.halves {
  position: relative; display: grid; grid-template-columns: 1fr;
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--glass-edge); box-shadow: var(--sh-dark);
}
@media (min-width: 768px) {
  .halves { grid-template-columns: 1fr 1fr; transition: grid-template-columns .5s var(--ease); }
  .halves:has(.pme:hover), .halves:has(.pme:focus-visible) { grid-template-columns: 1.18fr .82fr; }
  .halves:has(.buy:hover), .halves:has(.buy:focus-visible) { grid-template-columns: .82fr 1.18fr; }
}
.half {
  position: relative; isolation: isolate; display: grid; align-content: start; gap: 10px;
  min-height: 44px; padding: 32px 24px 30px; text-decoration: none; color: var(--tx); overflow: hidden;
}
/* Accroche du 2026-10-07 (une ligne de plus) : marge pour que le portrait ne
   couvre pas la signature, portes raccourcies pour rester dans le premier écran. */
@media (min-width: 768px) { .half { padding: 72px 56px 48px; min-height: 340px; } .split-stage { margin-top: calc(var(--s7) + 24px); } }
@media (min-width: 1024px) { .split h1 { max-width: 24ch; } }
.half.pme { background: linear-gradient(155deg, rgba(16,185,129,.30), rgba(4,55,42,.55) 60%, var(--night-2)); }
.half.buy { background: linear-gradient(205deg, rgba(124,82,149,.42), rgba(95,61,116,.22) 55%, var(--night-2)); }
@media (min-width: 768px) { .half.buy { text-align: right; justify-items: end; } }
/* Lueur de la moitié survolée */
.half::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at 50% 120%, rgba(52,211,153,.28), transparent 65%);
}
.half.buy::after { background: radial-gradient(520px circle at 50% 120%, rgba(176,139,198,.34), transparent 65%); }
.half:hover::after, .half:focus-visible::after { opacity: 1; }

.half .k { font: 500 var(--fs-label)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.half.buy .k { color: var(--plum-200); }
.half .t { font-size: clamp(1.5rem, 1.4vw + 1.05rem, 2.15rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; max-width: 19ch; }
.half .d { color: var(--tx-2); font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.half .go {
  margin-top: var(--s3); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.25rem; background: var(--tx); color: var(--em-800);
  transition: transform var(--t-hover) var(--ease);
}
.half.buy .go { color: var(--plum-700); }
/* Téléphone (portes empilées), décision du porteur du 2026-10-08, variante
   « minimal » : la porte Acheteur ne se fond plus dans le vert de la page (prune en
   transparence sur --night ; texte 6,1 à 9,4:1) et chaque flèche prend la couleur
   de son public (--night sur --signal 9,0:1, --plum-700 sur --plum-200 5,5:1).
   Ordinateur inchangé. */
@media (max-width: 767px) {
  .half.buy { background: linear-gradient(205deg, rgba(124,82,149,.55), rgba(95,61,116,.42) 55%, rgba(95,61,116,.32)), var(--night); }
  .half .go { background: var(--signal); color: var(--night); }
  .half.buy .go { background: var(--plum-200); color: var(--plum-700); }
}
.half.pme:hover .go, .half.pme:focus-visible .go { transform: translateX(6px); }
.half.buy:hover .go, .half.buy:focus-visible .go { transform: translateX(-6px); }

/* Couture : ligne de partage et portrait, qui suivent la moitié survolée */
.seam {
  position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0;
  border: 3px solid var(--night); background: var(--night-2);
  box-shadow: 0 0 0 1px var(--glass-edge), 0 18px 40px -12px rgba(0,0,0,.8);
  transition: left .5s var(--ease);
}
.seam img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .halves::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 1; pointer-events: none;
    background: linear-gradient(var(--glass-edge), rgba(255,255,255,.4), var(--glass-edge));
    transition: left .5s var(--ease);
  }
  .halves:has(.pme:hover)::before, .halves:has(.pme:focus-visible)::before { left: 59%; }
  .halves:has(.buy:hover)::before, .halves:has(.buy:focus-visible)::before { left: 41%; }
  .seam { width: 112px; height: 112px; }
  .split-stage:has(.pme:hover) .seam, .split-stage:has(.pme:focus-visible) .seam { left: 59%; }
  .split-stage:has(.buy:hover) .seam, .split-stage:has(.buy:focus-visible) .seam { left: 41%; }
}
/* Téléphone : moitiés empilées ; le portrait passe sur le bord supérieur */
@media (max-width: 767px) {
  .split { padding-top: var(--s4); }
  .split h1 { font-size: 2rem; margin: var(--s3) auto; }
  .split .lede { font-size: .95rem; }
  .split-stage { margin-top: calc(var(--s4) + 32px); }
  .seam { width: 60px; height: 60px; }
  .half { padding: 20px 76px 20px 20px; gap: 6px; }
  .half.pme { padding-top: 38px; }
  .half.buy { border-top: 1px solid rgba(255,255,255,.22); }
  .half .t { font-size: 1.35rem; }
  .half .d { font-size: .9rem; }
  .half .go { position: absolute; right: 20px; top: 50%; margin: 0; width: 44px; height: 44px; transform: translateY(-50%); }
  .half.pme .go { top: calc(50% + 9px); }
  .half.pme:hover .go, .half.pme:focus-visible .go,
  .half.buy:hover .go, .half.buy:focus-visible .go { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .halves, .halves::before, .seam, .half .go, .half::after { transition: none !important; }
  .halves:has(.half:hover), .halves:has(.half:focus-visible) { grid-template-columns: 1fr 1fr; }
  .halves:has(.half:hover)::before { left: 50%; }
  .split-stage:has(.half:hover) .seam { left: 50%; }
}
/* Contrastes calculés le 2026-10-01 au point le plus clair du dégradé émeraude (#085E44) :
   vert signal 4,05:1 (insuffisant pour un petit libellé) -> --em-200 5,6:1 ;
   focus corail 2,98:1 (insuffisant) -> --tx 7,1:1 (9,2:1 sur la moitié prune). */
.half.pme .k { color: var(--em-200); }
.half:focus-visible { outline: 3px solid var(--tx); outline-offset: -5px; }
/* Aiguillage vers un parcours sous un titre de groupe (offres.html, étape 6) : largeur du contenu. */
.group-head > .btn { justify-self: start; }

/* == Étape 7 (tests du 2026-10-01, testeur « cas limites ») ================ */
/* 1. Mouvement réduit : la couture et le portrait restent au centre aussi au clavier. */
@media (prefers-reduced-motion: reduce) {
  .halves:has(.half:focus-visible)::before { left: 50%; }
  .split-stage:has(.half:focus-visible) .seam { left: 50%; }
}
/* 2. La flèche ne glisse plus avec le mouvement réduit ni sur écran tactile
   (sur téléphone, sa position verticale reste assurée par translateY). */
@media (min-width: 768px) and (prefers-reduced-motion: reduce), (min-width: 768px) and (hover: none) {
  .half.pme:hover .go, .half.pme:focus-visible .go,
  .half.buy:hover .go, .half.buy:focus-visible .go { transform: none; }
}
/* 3. Petits téléphones : la seconde porte remonte dans le premier écran. */
@media (max-width: 767px) and (max-height: 700px) {
  .split { padding-top: var(--s3); }
  .split h1 { font-size: 1.7rem; margin: var(--s2) auto; }
  .split .lede { font-size: .9rem; line-height: 1.45; }
  .split-stage { margin-top: calc(var(--s3) + 30px); }
  .seam { width: 52px; height: 52px; }
  .half { padding: 14px 68px 14px 16px; gap: 4px; }
  .half.pme { padding-top: 30px; }
  .half .t { font-size: 1.2rem; }
  .half .d { font-size: .84rem; line-height: 1.4; }
  .half .go { width: 44px; height: 44px; right: 14px; }
}
/* 4. Liens « essayer » et liens de note glissés dans une phrase : zone de toucher à 44 px partout. */
.try a, .cta-note a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* == Menu « Le cabinet » déroulant (décision du porteur, 2026-10-01) ======== */
/* Élément natif <details> : fonctionne au clavier et sans JavaScript ; refonte.js
   le referme au clic à côté et à la touche Échap. */
.nav-groupe { position: relative; }
.nav-groupe > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 13px; border-radius: var(--r-pill); font-size: .94rem; color: var(--tx-2);
  transition: color var(--t-hover), background var(--t-hover);
}
.nav-groupe > summary::-webkit-details-marker { display: none; }
.nav-groupe > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--t-hover);
}
.nav-groupe[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-groupe > summary:hover, .nav-groupe[open] > summary { color: var(--tx); background: rgba(255,255,255,.05); }
.nav-groupe.actif > summary { color: var(--tx); background: rgba(52,211,153,.10); }
.nav-sous { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1024px) {
  .nav-sous {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 270px; padding: 8px;
    background: var(--night-3); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--sh-dark);
  }
  .nav-sous a { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .nav-groupe > summary { display: flex; justify-content: space-between; width: 100%; padding: 14px 16px; font-size: 1rem; }
  .nav-sous { margin: 0 0 6px 16px; padding-left: 8px; border-left: 1px solid var(--glass-edge); }
}
@media (prefers-reduced-motion: reduce) { .nav-groupe > summary::after { transition: none; } }

/* Haut de l'ancien accueil en tête des parcours (2026-10-01) : le titre du
   parcours passe sous l'accroche, en h2, avec le style du titre de page. */
.parcours .hero { padding-bottom: var(--s6); }
.parcours .page-head { padding-top: var(--s4); }
.page-head .titre-parcours { font-size: clamp(2.25rem, 2.2vw + 1.7rem, 3.5rem); margin: var(--s4) 0; max-width: 20ch; }
.parcours .page-head .titre-parcours { font-size: clamp(2.2rem, 2.6vw + 1.4rem, 3.5rem); line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; }
.parcours-pme .page-head .titre-parcours em { font-style: normal; color: var(--signal); }
.parcours-ach .page-head .titre-parcours em { font-style: normal; color: var(--plum-200); }

/* Grande photo du fondateur dans le panneau des parcours (décision du porteur, 2026-10-01) :
   remplace le petit portrait ; l'étiquette reste à l'intérieur du panneau. */
.dossier .dossier-photo { max-width: none; margin: 0 0 18px; }
.dossier .dossier-photo .badge-float { right: 12px; bottom: 14px; }

/* == 24 · PAIRE DE L'ACCUEIL (décision du porteur, 2026-10-02, EXPERIENCE.md § 11) ==
   Une règle, ses deux lectures, sous les portes ; bloc écrit par
   outils/generer-bibliotheque.js entre les marqueurs paire:debut / paire:fin. */
.paire { padding: 0 0 var(--s8); }
.paire .label { margin: 0 0 var(--s4); }
.paire-duo { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .paire-duo { grid-template-columns: 1fr 1fr; } }
.paire-cote {
  display: block; padding: var(--s5); border-radius: var(--r-lg); text-decoration: none;
  background: var(--glass); border: 1px solid var(--glass-edge); color: var(--tx);
  transition: border-color var(--t-hover) var(--ease);
}
.paire-cote:hover { border-color: var(--signal); }
.paire-cote.buy:hover { border-color: var(--plum-300); }
.paire-cote:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.paire-cote .k { display: block; margin-bottom: var(--s2); font: 500 var(--fs-label)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.paire-cote.buy .k { color: var(--plum-200); }
.paire-cote .t { display: block; margin-bottom: var(--s2); font: 700 1.125rem/1.3 var(--f-sans); }
.paire-cote .d { display: block; color: var(--tx-2); font-size: var(--fs-small); line-height: 1.5; }
/* Lien vers la bibliothèque du couloir, sous « Où en êtes-vous ? » et sous les quatre étapes. */
.situations-bib { margin: var(--s5) 0 0; font-weight: 600; }
.situations-bib a { display: inline-block; padding-block: 12px; color: var(--em-800); }
.parcours-ach .situations-bib a { color: var(--plum-700); }

/* == Sept principes par public (décision du porteur, 2026-10-02, methode.html) == */
.principes-cote { margin: var(--s6) 0 var(--s4); font-size: var(--fs-h3); color: var(--em-800); }
.principes-cote.buy { color: var(--plum-700); }
.principles li strong { color: var(--ink); }
.principles.buy li::before { color: var(--plum-700); background: var(--plum-50); }
/* Sept cartes sur deux colonnes : la dernière prend toute la largeur. */
@media (min-width: 900px) { .principles li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.principes-commun { margin: var(--s5) 0 0; color: var(--ink-2); }
.principes-commun strong { color: var(--ink); }

/* == 25 · AUDIT DE SIMPLIFICATION (2026-10-07, docs/AUDIT-SIMPLIFICATION-2026-10-07.md) ==
   Lot 1 : sur téléphone, panneau du fondateur compact (photo 72 px, nom, frise
   4 ans / 11 ans) ; grande photo, légende de la frise et langues gardées à
   partir de 768 px (elles sont aussi sur qui-sommes-nous.html et contact.html). */
@media (max-width: 767px) {
  .dossier .dossier-photo { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 14px; margin: 0; }
  .dossier .dossier-photo .portrait { border-radius: 16px; box-shadow: none; }
  .dossier .dossier-photo .portrait::after { display: none; }
  .dossier .dossier-photo .badge-float {
    position: static; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; color: var(--tx-2);
  }
  .dossier .dossier-photo .badge-float b { color: var(--tx); }
  .dossier .timeline { margin: 18px 0 0; }
  .dossier .tl-legend, .dossier .dossier-foot { display: none; }
}
/* Arrivée sur l'option visio de contact.html (#visio), sous l'en-tête fixe. */
#visio { scroll-margin-top: 96px; }
/* Lot 2 : page Entreprises, une carte par situation. La situation est le titre de
   la carte, le nom de l'offre suit ; le texte complet de l'offre est dans un volet
   (élément natif details, ouvrable au clavier, sans JavaScript). */
.ocard h3.ocard-sit { font-size: 1.2rem; line-height: 1.3; }
.ocard .ocard-nom { margin-top: -6px; font-weight: 600; color: var(--em-800); }
.ocard-more > p, .ocard-more > ul { margin-top: 10px; }
.ocard .ocard-more-titre { font-weight: 600; color: var(--ink); }
/* Lot 3 : page Acheteurs. Partie accentuée du titre des offres, puces des fiches
   en prune (comme le filet des fiches acheteur). */
.parcours-ach .group-head h2 em { font-style: normal; color: var(--plum-700); }
.ocard.buy ul li::before { background: var(--plum-500); }
/* Lot 4 : qui-sommes-nous.html, portrait réduit à côté de l'étiquette tant que le
   grand portrait est sous le titre (moins de 900 px). */
@media (min-width: 900px) { .head-founder .hero-face { display: none; } }