/* ================================================================
   ARROW — THEME-PRO.CSS  ·  SOCLE
   Thème « Console » : transposition sur le site commercial du thème
   Pro du produit (nom interne « classic », direction « Institution »,
   cf. Dev/Arrow/frontend/src/styles/classic/).

   RÈGLE ABSOLUE : tout est scopé sous html[data-ui="pro"]. Sans cet
   attribut — c'est-à-dire par défaut — le thème « Cinéma continu »
   d'origine est intact, à la déclaration près. Ce fichier n'existe
   que pour être ignoré la plupart du temps.

   Doctrine reprise du produit (docs/refonte-institution/01-design-system.md) :
   « rapport annuel premium », un seul accent, contraste par la
   typographie et non par la couleur, ZÉRO décor (aucun dégradé,
   aucun halo, aucune scanline, aucune animation décorative), rayon
   plafonné à 8 px, une seule ombre, piles système.

   Se charge APRÈS la CSS propre à la page : c'est ce qui lui permet
   de gagner la cascade sans !important dans la majorité des cas.
   Les !important présents visent les décors à supprimer, où les CSS
   de page utilisent des sélecteurs à trois classes.

   Sommaire
     1) Jetons
     2) Accents commutables
     3) Purge du décor
     4) Coque Console — rail, décalages
     5) En-tête, navigation, commutateur de thème
     6) Boutons et primitives de base.css
     7) Motifs de chapter.css
     8) Pied de page, cookies, loader, menu mobile
     9) Partiels par page
   ================================================================ */

/* ================================================================
   1) JETONS — redéfinis à l'identique de classic-theme.css.
   Le site pose déjà toutes ses couleurs en custom properties : les
   redéfinir ici repeint l'essentiel sans toucher une seule règle.
   ================================================================ */
/* Le second sélecteur n'est pas une redite. Poser `data-theme` a
   réveillé `:root[data-theme="light"]` de tokens.css — le bloc CLAIR
   du thème Cinéma, écrit pour lui, jamais activé jusqu'ici faute de
   quelqu'un pour écrire l'attribut. Sa spécificité (0,2,0) bat celle
   de `html[data-ui="pro"]` (0,1,1) : en mode clair, le thème Pro se
   retrouvait avec l'accent #2563a8, des rayons de 10 et 16 px, la
   police Helvetica et le magenta #ec4899 — que la charte interdit.
   Et le clair est l'état par DÉFAUT. `html[data-ui="pro"][data-theme="light"]`
   (0,2,1) reprend la main. */
html[data-ui="pro"],
html[data-ui="pro"][data-theme="light"] {
  --bg: #fafafa;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;

  --ink: #18181b;
  --ink-dim: #52525b;
  --ink-faint: #71717a;
  --ink-muted: #52525b;

  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-soft: #eff4ff;
  --primary-line: rgba(37, 99, 235, 0.35);
  --primary-ink: #1d4ed8;
  --on-primary: #ffffff;
  --secondary: #2563eb;
  /* Le magenta n'a pas d'équivalent dans le thème Pro : un seul accent.
     On le neutralise vers l'encre secondaire au lieu de le laisser
     ressortir sur les quelques éléments qui l'appellent encore. */
  --brand-magenta: #52525b;

  --success: #15803d;
  --success-bg: #ecfdf3;
  --warning: #b45309;
  --warning-bg: #fff7ed;
  --error: #b91c1c;
  --error-bg: #fef2f2;

  --hairline: #e4e4e7;
  --border: #d4d4d8;

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 8px 24px rgba(24, 24, 27, 0.1);

  /* Piles système, comme l'app : zéro octet réseau, zéro FOUT.
     League Spartan ne subsiste que sur le mot-symbole (§5). */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 8px;
  --radius-lg: 8px;
  --radius-sm: 6px;

  /* Numéros de fond de chapter.css : rendus totalement transparents
     en plus d'être masqués, pour le cas où une page les réafficherait. */
  --num-fill: transparent;
  --num-stroke: transparent;

  /* Coque */
  --rail-w: 72px;
  /* Hauteur de la barre basse sous 900 px. Deux endroits en
     dépendent : la réserve du body et celle du menu mobile. */
  --rail-h: 58px;
  --rail-bg: #101012;
  --rail-icon: #8a8a90;
  --rail-active: #8fb3dc;

  color-scheme: light;
}

/* ================================================================
   2) ACCENTS — les cinq du produit (classic-accents.css).
   Bleu est le défaut et ne porte pas d'attribut.
   ================================================================ */
html[data-ui="pro"][data-accent="indigo"] {
  --primary: #4f46e5; --primary-2: #4338ca; --primary-soft: #eef0fe;
  --primary-line: rgba(79, 70, 229, 0.35); --primary-ink: #4338ca; --secondary: #4f46e5;
}
html[data-ui="pro"][data-accent="violet"] {
  --primary: #7c3aed; --primary-2: #6d28d9; --primary-soft: #f3effe;
  --primary-line: rgba(124, 58, 237, 0.35); --primary-ink: #6d28d9; --secondary: #7c3aed;
}
html[data-ui="pro"][data-accent="fuchsia"] {
  --primary: #c026d3; --primary-2: #a21caf; --primary-soft: #fdefff;
  --primary-line: rgba(192, 38, 211, 0.35); --primary-ink: #a21caf; --secondary: #c026d3;
}
html[data-ui="pro"][data-accent="rose"] {
  --primary: #db2777; --primary-2: #be185d; --primary-soft: #fdeff5;
  --primary-line: rgba(219, 39, 119, 0.35); --primary-ink: #be185d; --secondary: #db2777;
}

/* ================================================================
   3) PURGE DU DÉCOR — « zéro décor », doctrine §8.
   Les halos, numéros géants, scanlines et textes en dégradé sont
   l'identité du thème Cinéma : ils ne sont pas recolorés, ils
   disparaissent.
   ================================================================ */
html[data-ui="pro"] .hero-glow,
html[data-ui="pro"] .ch-hero__glow,
html[data-ui="pro"] .final__glow,
html[data-ui="pro"] .ch-hero__num,
html[data-ui="pro"] .mod__num,
html[data-ui="pro"] .shot__corner,
html[data-ui="pro"] .shot::after {
  display: none !important;
}

/* Textes en dégradé → aplat d'accent. */
html[data-ui="pro"] .ch-word em,
html[data-ui="pro"] .final__card em,
html[data-ui="pro"] h1 em,
html[data-ui="pro"] h2 em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary);
  font-style: normal;
}

/* Halos de texte et ombres colorées. */
html[data-ui="pro"] .mod__more:hover,
html[data-ui="pro"] [class*="glow"] {
  text-shadow: none !important;
}

/* Aucune animation décorative : le point « en direct » cesse de battre. */
html[data-ui="pro"] .shot__live .dot {
  animation: none !important;
  box-shadow: none !important;
}

/* Les surfaces « plus sombres que le fond » du thème Cinéma
   (#0c0e17, #0b0d14 en dur) deviennent le gris de bande du thème Pro. */
html[data-ui="pro"] .mod--alt,
html[data-ui="pro"] .interlude {
  background: var(--surface-2);
}

/* ================================================================
   4) COQUE CONSOLE — la signature du produit : un rail sombre de
   72 px qui ne bouge jamais, aucune barre horizontale pleine largeur.
   Le rail est injecté par theme-pro.js ; le décalage vit ici pour
   que la page soit correcte même si le script tarde.
   ================================================================ */
html[data-ui="pro"] body {
  padding-left: var(--rail-w);
}
html[data-ui="pro"] .site-header {
  left: var(--rail-w);
}

.pro-rail {
  position: fixed;
  z-index: 320;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w, 72px);
  background: var(--rail-bg, #101012);
  color: var(--rail-icon, #8a8a90);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
}
html[data-ui="pro"] .pro-rail { display: flex; }

.pro-rail__logo {
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.pro-rail__link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius, 8px);
  display: grid;
  place-items: center;
  color: var(--rail-icon, #8a8a90);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.pro-rail__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.pro-rail__link[aria-current] {
  background: rgba(143, 179, 220, 0.14);
  color: var(--rail-active, #8fb3dc);
}
.pro-rail__link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pro-rail__spacer { flex: 1; }
.pro-rail__link:focus-visible {
  outline: 2px solid var(--rail-active, #8fb3dc);
  outline-offset: -2px;
}

/* Sous 900 px un rail vertical mange trop de largeur : il passe en
   barre basse, comme une navigation d'application mobile. */
@media (max-width: 900px) {
  html[data-ui="pro"] body {
    padding-left: 0;
    padding-bottom: var(--rail-h);
  }
  /* Le menu mobile est une surcouche en `position: fixed` : la réserve
     posée sur le body ne le concerne pas, son pied descendait donc
     JUSQUE SOUS la barre basse. Les commutateurs y perdaient leurs
     18 derniers pixels — défaut préexistant sur le commutateur de
     thème, devenu franc quand le commutateur d'apparence est venu
     s'ajouter à côté. Il lui faut sa propre réserve. */
  html[data-ui="pro"] .mobile-menu__foot {
    padding-bottom: calc(var(--rail-h) + 12px);
  }
  html[data-ui="pro"] .site-header { left: 0; }
  html[data-ui="pro"] .pro-rail {
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: 58px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  html[data-ui="pro"] .pro-rail__logo,
  html[data-ui="pro"] .pro-rail__spacer { display: none; }
}

/* ================================================================
   5) EN-TÊTE, NAVIGATION, COMMUTATEUR DE THÈME
   ================================================================ */
html[data-ui="pro"] .site-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-ui="pro"] .site-header.is-scrolled {
  background-color: var(--surface-1);
  backdrop-filter: none;
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .site-header__inner {
  max-width: none;
  padding: 0 clamp(16px, 2.4vw, 28px);
  height: 56px;
  gap: 22px;
}

/* Le mot-symbole reste en League Spartan : c'est le logotype de la
   marque, pas de la typographie d'interface. Tout le reste bascule
   sur la pile système. */
html[data-ui="pro"] .brand span {
  font-family: "League Spartan", var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
html[data-ui="pro"] .brand img { width: 22px; height: 22px; }

/* Les onglets de l'app plutôt que des capitales espacées, centrés dans
   l'en-tête. Le centrage est absolu — et non un simple flex:1 — pour que
   la nav soit au milieu de la PAGE, sans être décalée par la largeur
   inégale du logo à gauche et des actions à droite. Sous 1180 px, où la
   place manque, elle repasse dans le flux avant de céder au menu. */
html[data-ui="pro"] .main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto;
}
/* Sous 1300 px, la nav centrée sur la page viendrait toucher les actions
   à droite : elle repasse dans le flux, centrée dans la place restante. */
@media (max-width: 1300px) {
  html[data-ui="pro"] .main-nav {
    position: static;
    transform: none;
    flex: 1;
  }
}
html[data-ui="pro"] .main-nav ul {
  gap: 2px;
  height: 56px;
  justify-content: center;
}
html[data-ui="pro"] .main-nav li { display: flex; }
html[data-ui="pro"] .main-nav a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
html[data-ui="pro"] .main-nav a:hover { color: var(--ink); }
html[data-ui="pro"] .main-nav a[aria-current="page"] {
  color: var(--primary-ink);
  border-bottom-color: var(--primary);
  font-weight: 500;
}

html[data-ui="pro"] .header-cta {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
  color: var(--on-primary);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 7px 14px;
}
html[data-ui="pro"] .header-cta:hover {
  color: var(--on-primary);
  background: var(--primary-2);
  border-color: var(--primary-2);
}

/* Sélecteur de langue : pilule glissante → segment sobre. */
html[data-ui="pro"] .lang-switch {
  background: var(--surface-1);
  border-color: var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
}
html[data-ui="pro"] .lang-switch .pill { display: none; }
html[data-ui="pro"] .lang-switch button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 0;
  color: var(--ink-faint);
}
html[data-ui="pro"] .lang-switch button[aria-pressed="true"] {
  color: var(--primary-ink);
  background: var(--primary-soft);
  font-weight: 600;
}

html[data-ui="pro"] .burger {
  background: var(--surface-1);
  border-color: var(--border);
}
html[data-ui="pro"] .burger span { background: var(--ink); }

/* ---------- Commutateur de thème (injecté par theme-pro.js) ----------
   Présent dans les DEUX thèmes : c'est le seul moyen d'entrer dans le
   thème Pro et d'en sortir. Il hérite donc des jetons courants.
   Il vit en pied de page et dans le menu mobile, jamais dans l'en-tête :
   celui du thème Cinéma est déjà plein et le bouton de démo passait
   hors écran dès 1440 px. */
.pro-uiswitch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pro-uiswitch__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
@media (max-width: 540px) {
  .pro-uiswitch__label { display: none; }
}
.pro-uitoggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}
.pro-uitoggle button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 7px 12px;
  transition: color 0.2s ease, background 0.2s ease;
}
.pro-uitoggle button:hover { color: var(--ink); }
.pro-uitoggle button[aria-pressed="true"] {
  color: #0d0d15;
  background: var(--primary);
  font-weight: 700;
}
html[data-ui="pro"] .pro-uitoggle {
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
html[data-ui="pro"] .pro-uitoggle button {
  letter-spacing: 0.04em;
  padding: 6px 11px;
}
html[data-ui="pro"] .pro-uitoggle button[aria-pressed="true"] {
  color: var(--on-primary);
  background: var(--primary);
  font-weight: 600;
}

/* Le site n'expose pas de sélecteur de couleur : une seule teinte
   d'accent, celle des jetons ci-dessus. Les cinq palettes du produit
   restent définies au §2 et s'activent par ?accent=violet si besoin. */

/* ================================================================
   6) BOUTONS ET PRIMITIVES DE BASE.CSS
   Quatre variantes, aplat ou contour, jamais d'ombre portée colorée,
   jamais de déplacement au survol.
   ================================================================ */
html[data-ui="pro"] .btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  min-height: 40px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html[data-ui="pro"] .btn--primary {
  color: var(--on-primary);
  background: var(--primary);
  background-image: none;
  border-color: var(--primary);
  box-shadow: none;
}
html[data-ui="pro"] .btn--primary:hover {
  transform: none;
  box-shadow: none;
  background: var(--primary-2);
  border-color: var(--primary-2);
}
html[data-ui="pro"] .btn--ghost {
  color: var(--ink-dim);
  background: var(--surface-1);
  border-color: var(--border);
}
html[data-ui="pro"] .btn--ghost:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
  background: var(--surface-2);
}
html[data-ui="pro"] .btn--outline {
  color: var(--primary-ink);
  background: var(--surface-1);
  border-color: var(--primary);
}
html[data-ui="pro"] .btn--outline:hover { background: var(--primary-soft); }

html[data-ui="pro"] ::selection {
  background: var(--primary-soft);
  color: var(--primary-ink);
}
html[data-ui="pro"] .skip-link { color: var(--on-primary); }

/* ================================================================
   7) MOTIFS DE CHAPTER.CSS — partagés par une vingtaine de pages.
   Le hero cesse d'être plein écran, les mots-scènes cessent d'être
   des affiches : ce sont des titres de page.
   ================================================================ */
/* Le hero cesse d'être un centreur flex plein écran : en bloc, la bande
   méta redevient une ligne sous le titre au lieu d'une colonne à côté. */
html[data-ui="pro"] .ch-hero,
html[data-ui="pro"] .ch-hero--compact {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: clamp(38px, 6vh, 64px) clamp(16px, 2.4vw, 28px) clamp(34px, 5vh, 56px);
  border-bottom: 1px solid var(--hairline);
}
html[data-ui="pro"] .ch-hero__inner { max-width: 1180px; }

html[data-ui="pro"] .ch-kicker,
html[data-ui="pro"] .sec-kicker,
html[data-ui="pro"] .mod__label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .ch-kicker::before,
html[data-ui="pro"] .sec-kicker::before,
html[data-ui="pro"] .mod__label::before {
  display: none;
}

html[data-ui="pro"] .ch-word,
html[data-ui="pro"] .ch-word--solo,
html[data-ui="pro"] .ch-word--compact {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  font-weight: 600;
  max-width: 20ch;
  margin-bottom: 14px;
  text-wrap: balance;
}
html[data-ui="pro"] .ch-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 24px;
  max-width: 62ch;
}
html[data-ui="pro"] .ch-sub strong { color: var(--ink); font-weight: 600; }
html[data-ui="pro"] .ch-cta-row { gap: 10px; }

/* La bande méta HUD (« FICHE · PRODUIT · MODULES · 08 … ») appartient au
   registre du générique de film : elle disparaît. Son contenu est du
   commentaire sur la page, pas de l'information pour le lecteur. */
html[data-ui="pro"] .ch-meta { display: none; }

html[data-ui="pro"] .link-quiet {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--primary-ink);
  border-bottom-color: var(--primary-line);
}
html[data-ui="pro"] .link-quiet:hover { color: var(--primary-2); }

/* Index / casting */
html[data-ui="pro"] .index-section { padding: clamp(40px, 6vh, 64px) clamp(16px, 2.4vw, 28px); }
html[data-ui="pro"] .index-head {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
html[data-ui="pro"] .index-head em { color: var(--primary); }
html[data-ui="pro"] .index-row:hover { background: var(--surface-2); padding-left: 6px; }
html[data-ui="pro"] .index-row .idx { color: var(--ink-faint); }
html[data-ui="pro"] .index-row .name {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  text-transform: none;
  font-weight: 600;
}

/* Scènes de module */
html[data-ui="pro"] .mod {
  padding: clamp(44px, 7vh, 76px) clamp(16px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
}
html[data-ui="pro"] .mod__title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  text-wrap: balance;
}
html[data-ui="pro"] .mod__desc {
  font-size: 15.5px;
  color: var(--ink-dim);
  margin-bottom: 18px;
  max-width: 58ch;
}
html[data-ui="pro"] .mod__desc strong { color: var(--ink); font-weight: 600; }
html[data-ui="pro"] .mod__proofs li { font-size: 14px; color: var(--ink-dim); }
html[data-ui="pro"] .mod__proofs .tick {
  background: var(--success-bg);
  border-color: rgba(21, 128, 61, 0.3);
  color: var(--success);
}
html[data-ui="pro"] .mod__more {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--primary-ink);
}

/* Cadre de capture : une fenêtre sobre, sans viseur ni reflet. */
html[data-ui="pro"] .shot {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 0;
  overflow: hidden;
}
html[data-ui="pro"] .shot:not(.shot--filled) {
  padding: 28px;
  background: var(--surface-2);
}
html[data-ui="pro"] .shot__label {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: normal;
}
html[data-ui="pro"] .shot__label b { color: var(--warning); }
html[data-ui="pro"] .shot__caption,
html[data-ui="pro"] .shot__live {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
html[data-ui="pro"] .shot__live { color: var(--primary-ink); }
html[data-ui="pro"] .shot__live .dot { background: var(--primary); }

/* Interlude chiffré : les chiffres restent gros, ils portent le sens. */
html[data-ui="pro"] .interlude {
  padding: clamp(44px, 7vh, 76px) clamp(16px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
html[data-ui="pro"] .num-cell .figure {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
html[data-ui="pro"] .num-cell:nth-child(2) .figure { color: var(--ink); }
html[data-ui="pro"] .num-cell .figure sup { color: var(--ink-faint); }
html[data-ui="pro"] .num-cell .label { font-size: 14px; color: var(--ink-dim); }
html[data-ui="pro"] .num-cell .label strong { color: var(--ink); font-weight: 600; }

/* Carton final */
html[data-ui="pro"] .final {
  padding: clamp(50px, 8vh, 84px) clamp(16px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
  background: var(--surface-1);
}
html[data-ui="pro"] .final__kicker {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  font-size: 11.5px;
  margin-bottom: 16px;
}
html[data-ui="pro"] .final__card {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html[data-ui="pro"] .final__sub { font-size: 16px; color: var(--ink-dim); margin-bottom: 28px; }

/* Rail scroll-spy : il reste utile sur les pages longues, mais sobre.
   Il vit à droite ; le rail de navigation, lui, est à gauche. */
html[data-ui="pro"] .rail a {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: normal;
  color: var(--ink-faint);
}
html[data-ui="pro"] .rail a::after { background: var(--border); }
html[data-ui="pro"] .rail a.on { color: var(--primary-ink); font-weight: 500; }
html[data-ui="pro"] .rail a.on::after {
  background: var(--primary);
  box-shadow: none;
  width: 26px;
}

/* Reveals : conservés (ils structurent la lecture) mais raccourcis,
   la doctrine bannit le décor, pas l'apparition du contenu. */
html[data-ui="pro"] .js-anim .reveal,
html[data-ui="pro"].js-anim .reveal {
  transform: translateY(14px);
  transition-duration: 0.45s;
}
html[data-ui="pro"] .js-anim .reveal-x,
html[data-ui="pro"].js-anim .reveal-x {
  transform: translateX(18px);
  transition-duration: 0.5s;
}

/* ================================================================
   8) PIED DE PAGE, COOKIES, LOADER, MENU MOBILE
   ================================================================ */
html[data-ui="pro"] .site-footer {
  background: var(--surface-1);
  border-top: 1px solid var(--hairline);
  padding: clamp(40px, 6vh, 60px) clamp(16px, 2.4vw, 28px) 0;
}
html[data-ui="pro"] .footer-col h3 {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .footer-col a { font-size: 13.5px; color: var(--ink-dim); }
html[data-ui="pro"] .footer-col a:hover { color: var(--primary-ink); }
html[data-ui="pro"] .footer-brand p { color: var(--ink-dim); }
html[data-ui="pro"] .site-footer__bottom { color: var(--ink-faint); letter-spacing: normal; }

html[data-ui="pro"] .cookie-banner {
  left: calc(var(--rail-w) + 16px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
}
html[data-ui="pro"] .cookie-banner p { color: var(--ink-dim); }
html[data-ui="pro"] .cookie-banner__link { color: var(--ink-faint); }
@media (max-width: 900px) {
  html[data-ui="pro"] .cookie-banner { left: 16px; bottom: 74px; }
}

html[data-ui="pro"] .page-loader { background: var(--bg); }

html[data-ui="pro"] .mobile-menu {
  background: var(--surface-1);
  backdrop-filter: none;
}
html[data-ui="pro"] .mobile-menu nav a {
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--hairline);
}

/* ---------- Primitives génériques de base.css ----------
   .page-hero, .section, .section-title, .section-kicker ne viennent pas
   de chapter.css : elles sont rendues sur des pages appartenant à
   plusieurs lots (404, légales, comparatif, home, tarifs, sécurité).
   Elles sont donc définies ICI, une fois, et nulle part ailleurs —
   trois partiels en avaient chacun leur version, avec des tailles
   divergentes d'une page à l'autre. */
html[data-ui="pro"] .page-main { padding-top: 56px; }
html[data-ui="pro"] .page-hero {
  padding: clamp(44px, 6vh, 68px) clamp(16px, 2.4vw, 28px) clamp(32px, 4.5vh, 52px);
  text-align: left;
}
html[data-ui="pro"] .page-hero__inner { max-width: 72ch; margin: 0; }
html[data-ui="pro"] .page-kicker {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .page-hero h1 {
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 12px;
  text-wrap: balance;
}
html[data-ui="pro"] .page-hero__sub {
  font-size: 16px;
  color: var(--ink-dim);
  margin: 0;
}
html[data-ui="pro"] .section { padding: clamp(44px, 7vh, 76px) clamp(16px, 2.4vw, 28px); }
html[data-ui="pro"] .section-title {
  font-weight: 600;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}
html[data-ui="pro"] .section-kicker {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .section-kicker::before { display: none; }

/* Page 404 : le code d'erreur est une information, pas une décoration —
   il reste grand mais cesse d'être le seul élément coloré de la page. */
html[data-ui="pro"] .notfound-hero {
  min-height: 0;
  padding-top: clamp(60px, 12vh, 120px);
  padding-bottom: clamp(60px, 12vh, 120px);
}
html[data-ui="pro"] .notfound-code {
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
html[data-ui="pro"] .notfound-actions { justify-content: flex-start; margin-top: 24px; }

/* Le focus visible doit rester lisible sur fond clair. */
html[data-ui="pro"] :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ================================================================
   9) PARTIELS PAR PAGE
   Chaque feuille de page a son propre partiel, écrit dans
   assets/theme-pro/. Concaténés ici pour ne pas multiplier les
   requêtes ; l'ordre suit celui du chargement des pages.
   ================================================================ */

/* ===== DÉBUT DES PARTIELS FUSIONNÉS ===== */

/* ---------- _home.css (374 lignes) ---------- */
/* ================================================================
   ARROW — THEME-PRO / _HOME.CSS
   Surcharges du thème « Console » pour index.html (assets/home.css).
   La home cinématographique (7 scènes plein écran + carton final)
   devient une page d'accueil institutionnelle : titre sobre, sections
   de hauteur naturelle, zéro décor, un seul accent.
   Chaque règle est scopée sous html[data-ui="pro"].
   ================================================================ */

/* ----------------------------------------------------------------
   0) Fond de page — main.js pose un backgroundColor inline sur
   <body> à chaque scène traversée (couleurs sombres codées en dur
   via data-bg). On ne peut pas modifier main.js : on gagne avec
   !important, le fond du thème Pro reste fixe.
   ---------------------------------------------------------------- */
html[data-ui="pro"] body.home-body {
  background-color: var(--bg) !important;
  transition: none;
}

/* ----------------------------------------------------------------
   1) Purge du décor spécifique à la home (au-delà de ce que le
   socle purge déjà : .hero-glow y est, .final-glow / .scene-num /
   .hero-scroll / .film-progress / .credits ne le sont pas — noms
   de classes propres à home.css).
   ---------------------------------------------------------------- */
html[data-ui="pro"] .final-glow,
html[data-ui="pro"] .scene-num,
html[data-ui="pro"] .hero-scroll,
html[data-ui="pro"] .film-progress {
  display: none !important;
}

/* Le générique de fin (« Fin », logo répété, mini-carton) fait
   doublon avec le vrai footer et porte un vocabulaire 100% cinéma :
   supprimé plutôt que retraduit. */
html[data-ui="pro"] .credits { display: none !important; }

/* ----------------------------------------------------------------
   2) NAV VERTICALE GAUCHE (.sidenav-left) — collision avec le rail
   Console de 72 px. Décalée à droite du rail, restylée sobrement
   (plus de casse capitale forcée ni de halo sur l'état actif).
   ---------------------------------------------------------------- */
html[data-ui="pro"] .sidenav-left {
  left: calc(var(--rail-w) + clamp(14px, 1.6vw, 24px));
}
html[data-ui="pro"] .sidenav-left a {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-faint);
}
html[data-ui="pro"] .sidenav-left a:hover { color: var(--ink-dim); }
html[data-ui="pro"] .sidenav-left a.on {
  color: var(--primary-ink);
  text-shadow: none;
  font-weight: 600;
}
html[data-ui="pro"] .sidenav-left .bar-track { background: var(--hairline); }
html[data-ui="pro"] .sidenav-left .bar-fill { background: var(--ink-faint); }
html[data-ui="pro"] .sidenav-left a.on .bar-fill {
  background: var(--primary);
  box-shadow: none;
}

/* ----------------------------------------------------------------
   3) STRUCTURE DE SCÈNE — le défilement « un écran par chapitre »
   est l'identité du thème Cinéma. En Pro, chaque scène redevient
   une section de hauteur naturelle, densité alignée sur le reste
   du site (44–76 px, doctrine §… densité).
   .hero et .final gardent leur propre traitement (ci-dessous) :
   exclus ici pour ne pas entrer en conflit avec eux ni avec le
   socle, qui restyle déjà .final (padding/fond/bordure) pour
   toutes les pages.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .scene:not(.hero):not(.final) {
  min-height: 0;
  display: block;
  overflow: visible;
  padding-top: clamp(44px, 7vh, 76px);
  padding-bottom: clamp(44px, 7vh, 76px);
  border-top: 1px solid var(--hairline);
}
/* Le carton final garde le padding/fond/bordure du socle (.final,
   partagé par toutes les pages) : on ne touche ici qu'à la mise en
   page plein écran, propre à la home. */
html[data-ui="pro"] .scene.final {
  min-height: 0;
  display: block;
}

/* ----------------------------------------------------------------
   4) GÉNÉRIQUE D'OUVERTURE (.hero) → titre de page sobre.
   Fini le plein écran centré, logo géant et capitales : un bandeau
   de titre aligné à gauche, cohérent avec les .ch-hero du reste du
   site (socle §7).
   ---------------------------------------------------------------- */
html[data-ui="pro"] .scene.hero {
  min-height: 0;
  display: block;
  text-align: left;
  overflow: visible;
  padding-top: clamp(38px, 6vh, 64px);
  padding-bottom: clamp(40px, 6vh, 64px);
}
html[data-ui="pro"] .hero-logo { display: none; }
html[data-ui="pro"] .hero-kicker {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .hero h1 {
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: 20ch;
  margin-bottom: 16px;
  text-wrap: balance;
}
html[data-ui="pro"] .hero-baseline {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
html[data-ui="pro"] .hero-sub {
  margin: 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ----------------------------------------------------------------
   5) TITRES D'ACTE (.act-title) → titres de section normaux.
   Fini l'affiche typographique en capitales géantes.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .chapter-label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] .chapter-label::before { display: none; }

html[data-ui="pro"] .act-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-bottom: 12px;
}

html[data-ui="pro"] .scene-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 24px;
  max-width: 58ch;
}
html[data-ui="pro"] .scene-desc strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------
   5bis) LES QUATRE ACTES — sélecteur de métier, chiffres sourcés,
   modules, avantages. Le thème Cinéma les pose sur fond sombre avec
   des surfaces translucides rgba(232,236,244, x), invisibles sur le
   fond clair du thème Pro : on repasse par les jetons de surface.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .scene.act { padding-top: clamp(44px, 7vh, 76px); }

/* Sélecteur de métier — pilules sobres, l'état actif est le bleu plein. */
html[data-ui="pro"] .role-btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: normal;
  color: var(--ink-dim);
  background: var(--surface-1);
  border-color: var(--border);
  border-radius: var(--radius);
  padding: 8px 15px;
}
html[data-ui="pro"] .role-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
html[data-ui="pro"] .role-btn[aria-pressed="true"] {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 500;
  box-shadow: none;
}

html[data-ui="pro"] .role-panel {
  background: var(--surface-1);
  border-color: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .role-panel__title {
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -0.01em;
}
html[data-ui="pro"] .role-col__label { letter-spacing: 0.08em; }
html[data-ui="pro"] .role-list li { font-size: 14px; }
html[data-ui="pro"] .role-panel__more a { color: var(--primary-ink); }

/* Citation d'ouverture — filet bleu, pas d'effet d'affiche. */
html[data-ui="pro"] .pain-quote p {
  font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.45;
}
html[data-ui="pro"] .pain-quote cite { letter-spacing: 0.06em; }

/* Chiffres — tableau de bord : bandes à filets, pas de cartes flottantes. */
html[data-ui="pro"] .stat-lead__val {
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  letter-spacing: -0.03em;
  color: var(--primary-ink);
}
html[data-ui="pro"] .stat-lead__desc { font-size: 15.5px; }
html[data-ui="pro"] .stat__src a:hover { color: var(--primary-ink); }

html[data-ui="pro"] .stat-grid {
  background: var(--hairline);
  border-color: var(--hairline);
  border-radius: var(--radius);
}
html[data-ui="pro"] .stat { background: var(--surface-1); }
html[data-ui="pro"] .stat__val {
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
}
html[data-ui="pro"] .stat:nth-child(2) .stat__val { color: var(--ink); }
html[data-ui="pro"] .stat__src { letter-spacing: 0.06em; }

/* Modules et capture produit. */
html[data-ui="pro"] .mod-grid {
  background: var(--hairline);
  border-color: var(--hairline);
  border-radius: var(--radius);
}
html[data-ui="pro"] .mod { background: var(--surface-1); }
html[data-ui="pro"] .mod:hover { background: var(--surface-2); }
html[data-ui="pro"] .mod__name { font-weight: 600; }
html[data-ui="pro"] .mod:hover .mod__name { color: var(--primary-ink); }

html[data-ui="pro"] .home-shot {
  background: var(--surface-1);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .home-shot__bar {
  background: var(--surface-2);
  border-bottom-color: var(--hairline);
}
html[data-ui="pro"] .home-shot__bar i { background: var(--border); }

/* Avantages différenciants. */
html[data-ui="pro"] .usp {
  background: var(--surface-1);
  border-color: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .usp__n { letter-spacing: 0.06em; }
html[data-ui="pro"] .usp__name { font-weight: 600; }

/* ----------------------------------------------------------------
   6) CARTON FINAL + CTA — le socle restyle déjà .final (padding,
   fond, bordure) mais pas les classes propres à home.css
   (final-kicker/-card, gradient de texte, boutons pilule néon).
   ---------------------------------------------------------------- */
html[data-ui="pro"] .final-kicker {
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
html[data-ui="pro"] .final-card {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: clamp(28px, 4vh, 40px);
}
html[data-ui="pro"] .final-card em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary);
  font-style: normal;
}

html[data-ui="pro"] .cta-primary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--on-primary);
  background: var(--primary);
  background-image: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  box-shadow: none;
  transition: background 0.15s ease;
}
html[data-ui="pro"] .cta-primary:hover {
  transform: none;
  box-shadow: none;
  background: var(--primary-2);
}
html[data-ui="pro"] .cta-secondary {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--primary-ink);
  border-bottom-color: var(--primary-line);
}
html[data-ui="pro"] .cta-secondary:hover { color: var(--primary-2); border-color: var(--primary-2); }

/* ----------------------------------------------------------------
   9) TEASER TARIFS — règle métier : les sommes ne se coupent
   jamais sur deux lignes (nowrap en renfort des insécables déjà
   dans le HTML). Le libellé de palier n'est plus en capitales.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .pricing-teaser-card h3 {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
html[data-ui="pro"] .pricing-teaser-from {
  white-space: nowrap;
}
html[data-ui="pro"] .pricing-teaser-amount {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   10) FORMULAIRE DE DÉMO / NEWSLETTER (#demo-form, #newsletter).
   Libellés en capitales mono → sobres ; statut de succès recalé
   sur les jetons --success au lieu du vert codé en dur.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .demo-form-aside h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
html[data-ui="pro"] .demo-form label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-dim);
}
html[data-ui="pro"] .demo-form-status {
  color: var(--success);
  background: var(--success-bg);
  border-color: rgba(21, 128, 61, 0.3);
}
html[data-ui="pro"] .demo-form-status.is-error {
  color: var(--error);
  background: var(--error-bg);
  border-color: var(--error);
}

/* ----------------------------------------------------------------
   11) COMPOSANTS PARTAGÉS DE BASE.CSS RENDUS SUR LA HOME
   .section / .section-kicker / .section-title et .faq-item ne
   viennent pas de home.css : ils sont définis dans base.css et
   utilisés par toutes les pages, donc hors du périmètre strict de
   ce lot. Mais six sections de la home (comparatif, preuve sociale,
   tarifs, FAQ, démo, newsletter) s'appuient dessus, et laissées
   telles quelles elles restent en capitales et poids 700 : une
   régression trop visible sur la page la plus vue du site pour
   l'ignorer. Traitées ici avec les mêmes valeurs que les motifs
   analogues du socle (index-head/mod__title) ; à terme ces règles
   ont plus leur place dans le socle que dans un partiel de page —
   signalé dans le rendu final.
   ---------------------------------------------------------------- */
html[data-ui="pro"] .faq-item summary {
  font-family: var(--font-body);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   12) RESPONSIVE — la nav verticale gauche disparaît déjà sous
   900 px (home.css) comme le rail passe en barre basse (socle) :
   pas de recouvrement à corriger en dessous de ce seuil.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   13) DIRECTION « LE REGISTRE » — hiérarchie de la home.

   Constat mesuré sur la home en Pro : les quatre niveaux de titre
   partageaient la même graisse (600) et la même encre (#18181b),
   et le rapport titre de page / titre de section valait 1,31 —
   sous le seuil où l'œil perçoit un changement de niveau. La
   doctrine « contraste par la typographie et non par la couleur »
   était appliquée côté couleur, pas côté typographie.

   Quatre leviers, aucun décor ajouté :
     a) amplitude — le titre de page passe en 300 et grandit, les
        titres de section restent en 600 : rapport porté de 1,31 à
        1,67 (petit écran, les deux clamps à leur minimum) et 1,85
        (au-delà de 1440 px), doublé d'une INVERSION DE GRAISSE
        (grand et léger contre petit et gras) que la couleur n'a
        plus à porter ;
     b) la couleur redevient exclusivement actionnable — plus un
        seul titre en bleu, le bleu ne signale que ce qui se clique ;
     c) une colonne d'étiquettes en débord à gauche : le lecteur
        sait toujours dans quel niveau il se trouve ;
     d) filet DOUBLE entre les actes, filet simple entre les
        sections — la séparation encode le rang.

   Tout est scopé `body.home-body` : ce lot ne concerne que la home,
   et la spécificité ainsi gagnée met ces règles hors d'atteinte des
   partiels de page déclarés plus bas dans ce fichier.
   ---------------------------------------------------------------- */

/* ---------- 13.a) Étiquettes — inversion de graisse ----------
   Petites, mono, franchement grasses : l'exact inverse du titre
   qu'elles annoncent. C'est ce contraste qui remplace la couleur. */
html[data-ui="pro"] body.home-body .hero-kicker,
html[data-ui="pro"] body.home-body .chapter-label,
html[data-ui="pro"] body.home-body .section-kicker,
html[data-ui="pro"] body.home-body .final-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
html[data-ui="pro"] body.home-body .section-kicker { display: block; }

/* ---------- 13.b) Échelle typographique ---------- */
html[data-ui="pro"] body.home-body .hero h1 {
  font-weight: 300;
  font-size: clamp(2.5rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 15ch;
  margin-bottom: 20px;
}
/* L'emphase du titre passe par la graisse, plus par le dégradé
   bleu→cyan de home.css (déjà hors charte) ni par le bleu plein. */
html[data-ui="pro"] body.home-body .hero h1 em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  font-weight: 600;
  font-style: normal;
}
html[data-ui="pro"] body.home-body .hero-sub {
  font-size: 19px;
  line-height: 1.55;
  max-width: 56ch;
}

html[data-ui="pro"] body.home-body .act-title,
html[data-ui="pro"] body.home-body .section-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.7vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: 12px;
}
html[data-ui="pro"] body.home-body .scene-desc,
html[data-ui="pro"] body.home-body .section-sub {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 58ch;
}

html[data-ui="pro"] body.home-body .final-card {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  max-width: 19ch;
}
html[data-ui="pro"] body.home-body .final-card em {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  font-weight: 600;
}
html[data-ui="pro"] body.home-body .final-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 60ch;
}

/* ---------- 13.c) La couleur redevient actionnable ----------
   Ces trois valeurs étaient bleues alors qu'on ne peut pas cliquer
   dessus : ce sont des données, elles reviennent à l'encre. */
html[data-ui="pro"] body.home-body .stat-lead__val,
html[data-ui="pro"] body.home-body .pricing-teaser-amount {
  color: var(--ink);
}

/* ---------- 13.d) Colonne d'étiquettes en débord ----------
   Au-dessus de 1100 px, l'étiquette sort du flux du texte et va
   occuper une colonne de 150 px à gauche, à hauteur du titre.
   En dessous, tout retombe dans une colonne unique : la règle est
   entièrement contenue dans la media query. */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.home-body .scene-inner,
  html[data-ui="pro"] body.home-body .section__inner {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  /* Dans les sections de conversion, l'étiquette est enfouie d'un
     cran (.section-head l'enveloppe avec le titre et le chapô).
     `display:contents` dissout ce conteneur : ses trois enfants
     deviennent des items de la grille du dessus, ce qui permet à
     l'étiquette d'aller dans la marge SANS que le corps de section
     (tableau, cartes, notes) reste, lui, en pleine largeur. Sans
     ça, la page aurait deux bords gauches concurrents. */
  html[data-ui="pro"] body.home-body .section-head { display: contents; }

  html[data-ui="pro"] body.home-body .scene-inner > *,
  html[data-ui="pro"] body.home-body .section__inner > *,
  html[data-ui="pro"] body.home-body .section-head > * {
    grid-column: 2;
  }
  /* Deux blocs sont centrés par `margin: 0 auto` (.faq-list et le
     formulaire de la newsletter) : dans une colonne de contenu déjà
     décalée, ça leur donne un troisième bord gauche. On annule les
     deux marges — et SURTOUT pas en laissant `auto` d'un côté : une
     marge auto sur un item de grille lui fait perdre son étirement
     et suffit à effondrer la grille tarifaire sur une colonne. */
  html[data-ui="pro"] body.home-body .faq-list,
  html[data-ui="pro"] body.home-body #newsletter .demo-form {
    margin-left: 0;
    margin-right: 0;
  }
  html[data-ui="pro"] body.home-body .scene-inner > .hero-kicker,
  html[data-ui="pro"] body.home-body .scene-inner > .chapter-label,
  html[data-ui="pro"] body.home-body .scene-inner > .final-kicker,
  html[data-ui="pro"] body.home-body .section-head > .section-kicker {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.home-body .scene-inner > h1,
  html[data-ui="pro"] body.home-body .scene-inner > .act-title,
  html[data-ui="pro"] body.home-body .scene-inner > .final-card,
  html[data-ui="pro"] body.home-body .section-head > .section-title {
    grid-row: 1;
  }
  /* La marge basse de .section-head disparaît avec sa boîte : on la
     reporte sur son dernier enfant. */
  html[data-ui="pro"] body.home-body .section-head > :last-child {
    margin-bottom: clamp(36px, 6vh, 56px);
  }
}

/* La nav verticale gauche (scroll-spy hérité du concept HUD Cockpit)
   occupait déjà la marge gauche. Avec la colonne d'étiquettes, la
   page se retrouvait avec DEUX colonnes de petites capitales grises
   côte à côte, et l'étiquette d'acte redit ce que le scroll-spy
   indiquait. Elle est retirée sur la home en Pro — la navigation
   reste assurée par le rail Console et l'en-tête. À rouvrir en une
   ligne si Raphael tient au repère de progression. */
html[data-ui="pro"] body.home-body .sidenav-left { display: none; }

/* Le hero, le carton final et les têtes de section étaient centrés
   ou plus étroits que le reste : on aligne toute la page sur une
   seule gouttière gauche, sinon la colonne d'étiquettes ne veut
   plus rien dire. */
html[data-ui="pro"] body.home-body .hero,
html[data-ui="pro"] body.home-body .final { text-align: left; }
html[data-ui="pro"] body.home-body .hero .scene-inner,
html[data-ui="pro"] body.home-body .final .scene-inner { max-width: 1180px; }
html[data-ui="pro"] body.home-body .section-head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
/* Les paragraphes de fin de section (note du comparatif, mention de
   prix, rangée de boutons) portent `text-align:center` EN STYLE
   INLINE — héritage du thème Cinéma, où toute la page est centrée.
   Un style inline ne se bat qu'avec !important : c'est le seul
   moyen de les réaligner sans toucher à un HTML que les deux thèmes
   partagent. `justify-content` vise la rangée de boutons du teaser
   tarifs, seul de ces paragraphes à être en display:flex inline ;
   sur les autres la déclaration ne fait rien. */
html[data-ui="pro"] body.home-body .section__inner > p {
  text-align: left !important;
  justify-content: flex-start !important;
}
html[data-ui="pro"] body.home-body .section__inner > p.section-sub,
html[data-ui="pro"] body.home-body .compare-note,
html[data-ui="pro"] body.home-body .pricing-teaser-note {
  max-width: 62ch;
}

/* Les cellules de la grille des huit modules portaient le padding
   des scènes-modules de chapter.css (44 à 76 px de haut, prévu pour
   une section entière) : chaque carte s'ouvrait sur un vide de la
   hauteur de son propre texte. Densité ramenée à celle d'une carte.
   Scopé à .mod-grid pour ne pas toucher les scènes de produit.html. */
html[data-ui="pro"] body.home-body .mod-grid .mod {
  padding: 22px 24px 24px;
  border-top: 0;
}

/* Le sous-titre et le groupe de boutons du carton final restaient
   centrés (home.css) sous un titre désormais aligné à gauche. */
html[data-ui="pro"] body.home-body .final-sub {
  margin-left: 0;
  margin-right: 0;
}
html[data-ui="pro"] body.home-body .final .cta-group { justify-content: flex-start; }

/* ---------- 13.e) Filets — la séparation encode le rang ----------
   Filet double entre les actes (frontière majeure), filet simple
   entre les sections de conversion (frontière mineure). */
html[data-ui="pro"] body.home-body .scene:not(.hero):not(.final) {
  border-top: 3px double var(--border);
}
html[data-ui="pro"] body.home-body .section {
  border-top: 1px solid var(--hairline);
}

/* ---------- 13.f) BLOCS INVERSÉS ----------
   Deux blocs seulement passent sur l'obsidienne du rail (#101012) :
   le chiffre de tête de l'acte 2 et le carton final. Ils ne portent
   aucun décor — c'est une surface, pas un effet — et ils reprennent
   la couleur de la coque, donc ils appartiennent déjà au vocabulaire
   du thème.

   PAS de troisième bloc sur le teaser tarifs : le commit eba0536
   (« Retrait des badges Le plus choisi ») a supprimé badge, étoile et
   SURBRILLANCE DES CARTES au motif qu'aucune base client ne permet
   d'affirmer un forfait « le plus choisi » — toutes les offres sont
   présentées à égalité. Inverser la carte Campus rétablirait cette
   surbrillance par un autre moyen. La classe `is-highlight` survit
   dans home.css mais ne doit être posée nulle part.

   La technique : on ne repeint pas les descendants un par un, on
   REDÉFINIT LES JETONS sur le bloc. Toutes les règles écrites plus
   haut avec var(--ink), var(--hairline)… suivent d'elles-mêmes. */
html[data-ui="pro"] body.home-body .stat-lead,
html[data-ui="pro"] body.home-body .scene.final {
  --bg: #101012;
  --surface-1: #17171a;
  --surface-2: #1c1c20;
  --ink: #f2f2f4;
  --ink-dim: #b4b4bd;
  --ink-faint: #8a8a90;
  --ink-muted: #b4b4bd;
  --hairline: #26262b;
  --border: #33333a;
  --primary-ink: #93c5fd;
  --primary-line: rgba(147, 197, 253, 0.4);
  color: var(--ink);
  color-scheme: dark;
}

html[data-ui="pro"] body.home-body .scene.final {
  background: #101012;
  border-top: 0;
}
html[data-ui="pro"] body.home-body .stat-lead {
  background: #101012;
  border-radius: var(--radius);
  border-left: 2px solid var(--primary-ink);
  padding: clamp(22px, 3vh, 30px) clamp(20px, 2.6vw, 30px);
}
/* Les liens de source restent lisibles sur fond sombre. */
html[data-ui="pro"] body.home-body .stat-lead .stat__src a:hover {
  color: var(--primary-ink);
}

/* ----------------------------------------------------------------
   14) DIRECTION « LE REGISTRE » — toutes les pages qui portent
   la classe `reg-body` (les neuf pages produit à l'origine, plus
   les pages de conversion depuis le lot 1 du 2026-08-27).

   Le scope s'appelait `produit-body` tant qu'il ne couvrait que les
   fiches produit. Il ne décrit plus une famille de pages mais un
   système typographique : toute page qui pose la classe l'hérite.

   Même direction qu'au §13, transposée sur le vocabulaire de
   chapter.css (ch-hero / mod / interlude / final) au lieu de celui
   de la home (scene / section). Les quatre leviers sont identiques
   et les VALEURS sont les mêmes des deux côtés — c'est ce qui fait
   qu'on passe de la home à une fiche produit sans changer de
   système : même échelle de titres, même colonne de 150 px, mêmes
   filets. Seuls les sélecteurs changent.

   Correspondance des rangs entre les deux familles de classes :
     titre de page       .hero h1        →  .ch-word
     titre de section    .act-title      →  .mod__title / .index-head
                                            / .section-title
     étiquette           .chapter-label  →  .ch-kicker / .mod__label
                                            / .sec-kicker / .section-kicker
     carton final        .final-card     →  .final__card

   TROIS ARBITRAGES, écrits ici parce qu'ils ne se lisent pas dans
   le code :

   a) .mod__num CONTRE la colonne d'étiquettes — la colonne gagne,
      .mod__num reste purgé. Deux raisons. D'abord il l'était déjà :
      le §3 le range avec les halos et les numéros géants du thème
      Cinéma (c'est un chiffre de 11 à 22 rem en fond de scène, pas
      un repère de lecture). Ensuite, sur les huit fiches il ne
      repère RIEN : planning.html affiche « M1 » sur ses deux
      scènes, conformite.html « M6 » sur les siennes — c'est le
      numéro de la PAGE, redit à chaque section. La colonne, elle,
      porte .mod__label, qui change à chaque scène (« Ce que ça
      change », « Ce que ça remplace »). On ne superpose pas les
      deux repères : on garde celui qui informe.

   b) L'ALTERNANCE gauche/droite des scènes (.mod--alt) est
      suspendue tant que la colonne d'étiquettes est là. Le zigzag
      donne au texte un bord gauche une fois sur deux au milieu de
      la page ; l'étiquette, qui doit rester au bord de la page,
      s'en trouverait séparée de son titre par la capture. Deux
      bords gauches concurrents, exactement ce que le §13 refuse
      quand il retire .sidenav-left de la home. La bande grise de
      .mod--alt reste, elle : le rythme est tenu par le fond, plus
      par la position. En dessous de 1100 px l'alternance reprend
      telle quelle, chapter.css n'est pas touché.

   c) Le rail scroll-spy (.rail) est CONSERVÉ, contrairement à la
      nav verticale de la home : il vit à droite, il n'entre pas en
      concurrence avec une colonne de gauche.

   Tout est scopé `body.reg-body` — classe posée sur les neuf
   pages produit et sur elles seules. Une vingtaine d'autres pages
   (solutions, tarifs, qualiopi, usp…) partagent ce vocabulaire
   chapter.css : sans ce scope, le lot fuirait sur tout le site.
   La spécificité ainsi gagnée met ces règles hors d'atteinte des
   partiels de page déclarés plus bas.
   ---------------------------------------------------------------- */

/* ---------- 14.a) Étiquettes — inversion de graisse ----------
   Mêmes valeurs qu'au §13.a. Les trois premières sont en
   inline-flex dans chapter.css (elles portaient un tiret en
   ::before, déjà retiré au §7) : elles repassent en bloc pour
   pouvoir occuper une cellule de grille. */
html[data-ui="pro"] body.reg-body .ch-kicker,
html[data-ui="pro"] body.reg-body .sec-kicker,
html[data-ui="pro"] body.reg-body .mod__label,
html[data-ui="pro"] body.reg-body .section-kicker,
html[data-ui="pro"] body.reg-body .final__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

/* ---------- 14.b) Échelle typographique ----------
   Le titre de page passait en 600 comme ses titres de section
   (rapport 1,42) : il passe en 300 et grandit — rapport porté à
   1,67 au plus étroit et 1,85 au-delà de 1440 px, avec la même
   inversion de graisse qu'au §13. Valeurs reprises à l'identique
   de la home pour que les deux pages tiennent le même système. */
html[data-ui="pro"] body.reg-body .ch-word,
html[data-ui="pro"] body.reg-body .ch-word--solo,
html[data-ui="pro"] body.reg-body .ch-word--compact {
  font-weight: 300;
  font-size: clamp(2.5rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 17ch;
  margin-bottom: 20px;
}
/* L'emphase du titre passe par la graisse. Le §3 recolore ces
   fragments en bleu avec !important (il neutralise le dégradé du
   thème Cinéma) : il faut le même poids pour lui répondre. */
html[data-ui="pro"] body.reg-body .ch-word em,
html[data-ui="pro"] body.reg-body .index-head em,
html[data-ui="pro"] body.reg-body .final__card em {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  font-weight: 600;
  font-style: normal;
}
html[data-ui="pro"] body.reg-body .ch-sub {
  font-size: 19px;
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: 26px;
}

html[data-ui="pro"] body.reg-body .mod__title,
html[data-ui="pro"] body.reg-body .index-head,
html[data-ui="pro"] body.reg-body .section-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.7vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: 12px;
}
html[data-ui="pro"] body.reg-body .mod__desc,
html[data-ui="pro"] body.reg-body .section-sub {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 58ch;
}

html[data-ui="pro"] body.reg-body .final__card {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  max-width: 19ch;
  margin-bottom: 20px;
}
html[data-ui="pro"] body.reg-body .final__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 60ch;
}

/* ---------- 14.c) La couleur redevient actionnable ----------
   Le §14.b a déjà rendu à l'encre les trois fragments <em> des
   titres — le défaut le plus visible sur produit.html. Restent
   trois bleus posés sur des choses qu'on ne peut pas cliquer :
   le badge « Aperçu » des quinze captures, le numéro d'étape des
   listes numérotées et la flèche « avant → après ». Le bleu ne
   signale plus que .mod__more, .link-quiet et les boutons. */
html[data-ui="pro"] body.reg-body .shot__live { color: var(--ink-faint); }
html[data-ui="pro"] body.reg-body .shot__live .dot { background: var(--ink-faint); }
html[data-ui="pro"] body.reg-body .steps-list__idx {
  color: var(--ink);
  border-color: var(--border);
}
html[data-ui="pro"] body.reg-body .replace-arrow { color: var(--ink-faint); }

/* ---------- 14.d) Colonne d'étiquettes en débord ----------
   Au-dessus de 1100 px, l'étiquette sort du flux et va occuper une
   colonne de 150 px à gauche, à hauteur du titre — même géométrie
   qu'au §13.d (150 px + 32 px de gouttière).

   Deux familles de conteneurs, deux techniques :
   - hero, sommaire, intermède, sections et carton final ont leur
     étiquette en enfant direct : une grille à deux colonnes suffit
     (avec `display:contents` sur .section-head, qui enterre la
     sienne d'un cran — même cas qu'au §13.d) ;
   - les scènes .mod ont DÉJÀ une grille à deux colonnes (texte +
     capture). On n'en fait pas une grille à trois : c'est .mod__copy
     qui devient la grille étiquette + texte, et .mod__inner reste à
     deux colonnes. La colonne d'étiquettes se trouve alors au bord
     gauche du conteneur, donc alignée sur celle des autres blocs,
     sans que .mod__inner ait à connaître son existence — et le
     centrage vertical de la capture est préservé.
   ---------------------------------------------------------------- */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.reg-body .ch-hero__inner,
  html[data-ui="pro"] body.reg-body .index-inner,
  html[data-ui="pro"] body.reg-body .interlude__inner,
  html[data-ui="pro"] body.reg-body .section__inner,
  html[data-ui="pro"] body.reg-body .final__inner {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  html[data-ui="pro"] body.reg-body .section-head { display: contents; }

  html[data-ui="pro"] body.reg-body .ch-hero__inner > *,
  html[data-ui="pro"] body.reg-body .index-inner > *,
  html[data-ui="pro"] body.reg-body .interlude__inner > *,
  html[data-ui="pro"] body.reg-body .section__inner > *,
  html[data-ui="pro"] body.reg-body .final__inner > *,
  html[data-ui="pro"] body.reg-body .section-head > * {
    grid-column: 2;
  }
  html[data-ui="pro"] body.reg-body .ch-hero__inner > .ch-kicker,
  html[data-ui="pro"] body.reg-body .index-inner > .sec-kicker,
  html[data-ui="pro"] body.reg-body .interlude__inner > .sec-kicker,
  html[data-ui="pro"] body.reg-body .final__inner > .final__kicker,
  html[data-ui="pro"] body.reg-body .section-head > .section-kicker {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.reg-body .ch-hero__inner > .ch-word,
  html[data-ui="pro"] body.reg-body .index-inner > .index-head,
  html[data-ui="pro"] body.reg-body .interlude__inner > .num-grid,
  html[data-ui="pro"] body.reg-body .final__inner > .final__card,
  html[data-ui="pro"] body.reg-body .section-head > .section-title {
    grid-row: 1;
  }
  /* La marge basse de .section-head disparaît avec sa boîte : on la
     reporte sur son dernier enfant (même report qu'au §13.d). */
  html[data-ui="pro"] body.reg-body .section-head > :last-child {
    margin-bottom: clamp(28px, 4vh, 40px);
  }

  /* --- Scènes de module --- */
  /* Le texte reprend la part que la colonne d'étiquettes lui prend :
     7fr/5fr au lieu de 5fr/6fr. C'est le réglage qui tient les deux
     bouts de la plage annoncée comme risquée : à 1100 px le texte
     garde 377 px utiles (~50 signes) et la capture 400 px, à 1440 px
     on est à 472 / 468 — aucun palier où l'un des deux s'effondre.
     En 6fr/5fr, le texte tombait à 341 px à 1100 pour une capture de
     436 : la colonne de lecture passait sous la capture, ce qui est
     l'inverse du rang des deux blocs. */
  html[data-ui="pro"] body.reg-body .mod__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 4vw, 72px);
  }
  html[data-ui="pro"] body.reg-body .mod__copy {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  html[data-ui="pro"] body.reg-body .mod__copy > * { grid-column: 2; }
  html[data-ui="pro"] body.reg-body .mod__copy > .mod__label {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.reg-body .mod__copy > .mod__title { grid-row: 1; }
  /* Le dernier bloc de texte n'a pas à pousser le bas de la scène. */
  html[data-ui="pro"] body.reg-body .mod__copy > :last-child { margin-bottom: 0; }

  /* Arbitrage (b) : l'alternance est suspendue tant que la colonne
     est là, sinon l'étiquette se retrouve séparée de son titre par
     la capture. Les deux `order` de chapter.css sont annulés. */
  html[data-ui="pro"] body.reg-body .mod--alt .mod__inner > .mod__copy,
  html[data-ui="pro"] body.reg-body .mod--alt .mod__inner > .mod__visual {
    order: 0;
  }
}

/* Le sommaire et le carton final étaient plus étroits (1000 px et
   900 px) et centrés, sous un hero et des scènes à 1180 px : trois
   bords gauches pour une page. On les aligne tous sur la même
   gouttière, sinon la colonne d'étiquettes ne veut plus rien dire. */
html[data-ui="pro"] body.reg-body .index-inner,
html[data-ui="pro"] body.reg-body .final__inner { max-width: 1180px; }
html[data-ui="pro"] body.reg-body .final { text-align: left; }
html[data-ui="pro"] body.reg-body .final__sub {
  margin-left: 0;
  margin-right: 0;
}
html[data-ui="pro"] body.reg-body .final .ch-cta-row--center {
  justify-content: flex-start;
}
html[data-ui="pro"] body.reg-body .section-head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
/* La précision réglementaire sous le callout Qualiopi (conformite.html)
   est centrée dans produit.css : dans une colonne de contenu déjà
   décalée, ça lui donne un troisième bord gauche. */
html[data-ui="pro"] body.reg-body .fiche-disclaimer {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: 62ch;
}

/* ---------- 14.e) Filets — la séparation encode le rang ----------
   Filet DOUBLE avant chaque scène de module, l'intermède et le
   carton final : ce sont les actes de la fiche. Filet simple avant
   le sommaire et les sections satellites (callout, liens croisés),
   qui sont des annexes. L'intermède perd son filet bas : la scène
   suivante en pose déjà un, et deux traits collés ne séparent rien
   de plus qu'un seul. */
html[data-ui="pro"] body.reg-body .mod,
html[data-ui="pro"] body.reg-body .interlude,
html[data-ui="pro"] body.reg-body .final {
  border-top: 3px double var(--border);
}
html[data-ui="pro"] body.reg-body .interlude { border-bottom: 0; }
html[data-ui="pro"] body.reg-body .index-section,
html[data-ui="pro"] body.reg-body .section {
  border-top: 1px solid var(--hairline);
}

/* ---------- _produit-solutions.css (112 lignes) ---------- */
/* Partiel : pages Produit + Solutions (thème Pro).
   Surcharge uniquement ce qui est propre à assets/produit.css et
   assets/solutions.css. Tout ce qui vient de chapter.css (hero,
   mod, shot, interlude, final, rail…) est déjà traité par le socle
   theme-pro.css §7 — on n'y retouche pas ici.

   Les classes historiques de ces deux feuilles (module-card,
   benefit-card, persona-card, persona-grid, module-grid,
   product-shot, cta-final, page-hero__cta, produit-hero__cta,
   problem-text…) ne sont utilisées par AUCUNE page du site — elles
   sont gardées « pour compatibilité » côté Cinéma continu mais ne
   s'affichent jamais. Ce partiel ne les couvre donc pas : rien à
   surcharger pour un rendu qui ne se produit pas. */

/* ================================================================
   FICHES PRODUIT (produit/*.html) — « Liens croisés »
   .card (base.css) + .cross-link-card (produit.css) : le fond de
   .card n'est pas touché (blanc sur fond blanc/bande = motif de
   carte standard, pas une collision bande/carte). Seuls le titre
   (casse) et l'état survol (halo coloré → un seul ombre neutre)
   sont propres au thème Pro.
   ================================================================ */
html[data-ui="pro"] .cross-link-card {
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Pas de soulèvement au survol : la doctrine bannit le mouvement
   décoratif. L'état survolé se signale par le filet et le fond. */
html[data-ui="pro"] .cross-link-card:hover,
html[data-ui="pro"] .cross-link-card:focus-visible {
  transform: none;
  border-color: var(--primary-line);
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .cross-link-card h3 {
  font-size: 1rem;
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
}
html[data-ui="pro"] .cross-link-card p {
  color: var(--ink-dim);
}

/* ---------- Callout Qualiopi (standalone + variante scène) ---------- */
html[data-ui="pro"] .qualiopi-callout--mod h3 {
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
}

/* ---------- Bloc « ce que ça remplace »
   Sur les 6 fiches qui l'utilisent, ce bloc vit systématiquement
   dans une scène .mod--alt : le socle bascule .mod--alt sur
   var(--surface-2), la même teinte que le fond d'origine de ce
   bloc — la carte devenait donc invisible sur sa bande. On la
   repasse sur --surface-1 (même traitement que .shot), seule
   surcharge réellement nécessaire ici. ---------- */
html[data-ui="pro"] .replace-row {
  background: var(--surface-1);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .replace-col--after p {
  color: var(--ink);
}
html[data-ui="pro"] .replace-arrow {
  color: var(--primary);
}

/* ---------- Étapes numérotées (steps-list) ---------- */
html[data-ui="pro"] .steps-list__idx {
  border-color: var(--primary-line);
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
}
html[data-ui="pro"] .steps-list p {
  color: var(--ink-dim);
}

/* ================================================================
   SOLUTIONS (solutions/*.html) — bénéfices en preuves cochées
   ================================================================ */
html[data-ui="pro"] .proof-grid .tick {
  background: var(--success-bg);
  border-color: rgba(21, 128, 61, 0.3);
  color: var(--success);
}
html[data-ui="pro"] .proof-grid .proof-body strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
html[data-ui="pro"] .proof-grid .proof-body > span {
  color: var(--ink-dim);
}

/* ---------- Points de friction (pain-list en colonne visuelle) ---------- */
html[data-ui="pro"] .pain-item {
  background: var(--surface-1);
  border-color: var(--hairline);
  border-left-color: var(--error);
  color: var(--ink-dim);
}
html[data-ui="pro"] .pain-item .mark {
  color: var(--error);
}

/* ---------- _tarifs.css (138 lignes) ---------- */
/* Partiel thème Pro — tarifs. Écrit par le lot dédié.
   Surcharge assets/tarifs.css et assets/calculateur.css pour
   tarifs.html et calculateur.html. Le socle (theme-pro.css) traite
   déjà les motifs partagés de chapter.css (hero, scènes, interludes,
   carton final) : on ne les reprend pas ici.

   Deux classes de base.css (.section, .section-title) sont aussi
   normalisées ci-dessous : elles ne viennent pas de chapter.css donc
   le socle ne les couvre pas, mais elles sont rendues telles quelles
   sur ces deux pages (FAQ, add-ons, CTA, sections du calculateur) et
   contreviennent sinon à la doctrine (titres en capitales, paddings
   de section jusqu'à 100px). Traitement minimal, sans toucher au
   fichier base.css lui-même. */


/* ================================================================
   HERO TARIFS — bandeau de bénéfices (hero-claims)
   ================================================================ */
html[data-ui="pro"] .hero-claims__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   AXE DE CAPACITÉ
   Le hero n'a plus de hauteur figée en Pro (socle §7) : sur trois
   lignes, le libellé du 1er bénéfice peut redescendre jusqu'au ras
   de l'axe qui suit immédiatement. On lui redonne une respiration
   fixe plutôt que de dépendre de la hauteur variable du hero.
   Le dégradé + halo de la ligne de progression est un décor : aplati
   sur l'unique accent, sans ombre portée colorée.
   ================================================================ */
html[data-ui="pro"] .axis-wrap {
  padding-top: clamp(40px, 6vh, 64px);
}
html[data-ui="pro"] .axis__fill {
  background: var(--primary);
  box-shadow: none;
}
html[data-ui="pro"] .axis__cap { font-weight: 600; }

/* ================================================================
   GRILLE DES 5 OFFRES (« pass »)
   Carte déjà themée par les jetons (fond, bordure, rayon) : il reste
   à retirer le survol « lift + ombre noire » hérité du fond sombre
   d'origine, à aplatir la jauge de capacité (dégradé + piste quasi
   invisible sur fond clair) et à sortir les titres des capitales.
   ================================================================ */
html[data-ui="pro"] .pass {
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-ui="pro"] .pass:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .pass__name {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-ui="pro"] .pass__price {
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
/* La pile système est plus large que la police d'affichage d'origine :
   « 1 199 € HT / mois » déborde et se fait couper par l'overflow:hidden
   de .pass sur les offres à 4 chiffres. Le montant reste d'un seul
   tenant (nowrap conservé sur son propre span) ; seule l'unité passe
   sur sa ligne, en bloc, jamais tronquée. */
html[data-ui="pro"] .pass__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
}
html[data-ui="pro"] .pass__price > span { white-space: nowrap; }
html[data-ui="pro"] .pass__price small { display: block; }
html[data-ui="pro"] .pass__cap-track { background: var(--surface-2); }
html[data-ui="pro"] .pass__cap-fill { background: var(--primary); }

/* Le badge et la mise en avant « Campus ★ » n'existent plus dans le
   balisage de cette page (aucune classe .pass--star / .pass__star-badge
   n'est posée) : aucune règle n'est nécessaire ici, et aucune n'est
   ajoutée pour ne pas réintroduire de mise en avant d'une offre. */

/* ================================================================
   BANDEAU RÈGLES DU JEU
   ================================================================ */
html[data-ui="pro"] .rules__cell h3 {
  text-transform: none;
  font-weight: 600;
}

/* Densité : les deux blocs ci-dessus portent des paddings de bas de
   section hérités du gabarit plein écran (jusqu'à 130px / 140px). */
html[data-ui="pro"] .pricing { padding-bottom: clamp(44px, 7vh, 76px); }
html[data-ui="pro"] .rules { padding-bottom: clamp(44px, 7vh, 76px); }

/* ================================================================
   CARTES TARIFAIRES — offres groupe & add-ons (.pricing-card)
   Structure « JUSQU'À » / montant sur deux lignes intacte : on ne
   touche qu'à la casse et au poids du nom de carte, et au poids du
   montant, jamais à .pricing-card__price--capped ni .price-prefix.
   ================================================================ */
html[data-ui="pro"] .pricing-card__name {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-ui="pro"] .pricing-card__price {
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

html[data-ui="pro"] .pricing-commitment {
  border-radius: var(--radius-sm);
}

/* ================================================================
   CALCULATEUR — formulaire et panneaux de résultat
   ================================================================ */
html[data-ui="pro"] .calc-result-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Pastille du pack recommandé : dégradé bleu→cyan et halo, décor à
   retirer (couleur cyan hors palette à un seul accent). */
html[data-ui="pro"] .calc-pack-badge {
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

/* ---------- _usp-confiance.css (377 lignes) ---------- */
/* Partiel thème Pro — usp-confiance. Écrit par le lot dédié.
   Surcharge assets/usp.css (usp.html, comparatif.html) et
   assets/confiance.css (qualiopi.html, securite.html,
   pourquoi-changer.html). Charge après ces deux feuilles et après le
   socle theme-pro.css (voir §9 de theme-pro.css) : gagne la cascade
   sans avoir besoin de !important, sauf pour neutraliser les rares
   règles de confiance.css qui portent elles-mêmes un !important
   (bloc prefers-reduced-motion du dossier Qualiopi).

   Doctrine : « rapport annuel premium », un seul accent, zéro décor
   (dégradé, halo, biseau, chiffre géant en fond, stroke text),
   titres en casse normale, rayon ≤ 8px, une seule ombre. La plupart
   des règles de usp.css/confiance.css utilisent déjà les variables
   du socle (var(--primary), var(--success)…) et n'ont donc besoin
   d'aucune surcharge ici : ce fichier ne traite que les couleurs
   écrites en dur, les text-transform:uppercase sur de vrais titres,
   les dégradés/halos, et la mise en page générique de base.css
   utilisée par ces pages (.page-hero, .section, .card) que le socle
   ne couvre pas (il ne traite que les motifs de chapter.css).

   Sommaire
     1) Mise en page générique (.page-hero, .section, .card)
     2) usp.css — cartes indexées, liste « et aussi »
     3) usp.css — tableau comparatif générique + variante matrice
     4) usp.css — matrice NOMMÉE (comparatif.html)
     5) confiance.css — grilles de cartes, disclaimer, listes à puces
     6) confiance.css V2 — jauge RNQ et dossier de preuves (qualiopi)
   ================================================================ */

/* ================================================================
   1) MISE EN PAGE GÉNÉRIQUE — .page-hero / .section / .card
   Utilisée par comparatif.html, securite.html, pourquoi-changer.html.
   Non couverte par le socle (qui ne traite que chapter.css) : sans
   ces règles, titres et kickers restent en capitales et poids 700.
   ================================================================ */
html[data-ui="pro"] .section-sub { color: var(--ink-dim); }

html[data-ui="pro"] .card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .placeholder-tag {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: rgba(180, 83, 9, 0.4);
  border-radius: var(--radius-sm);
}

/* ================================================================
   2) USP.CSS — cartes indexées, liste « et aussi »
   ================================================================ */
html[data-ui="pro"] .market-card__idx,
html[data-ui="pro"] .usp-card__idx {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  opacity: 1;
}
/* L'habillage « Cinéma continu » d'usp.html grossit ces mêmes index
   en gros numéros décoratifs semi-transparents : neutralisé ici. */
html[data-ui="pro"].usp-chapter .market-card__idx,
html[data-ui="pro"] .usp-chapter .market-card__idx,
html[data-ui="pro"] .usp-chapter .usp-card__idx {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  opacity: 1;
  margin-bottom: 10px;
}
html[data-ui="pro"] .market-card h3,
html[data-ui="pro"] .usp-card h3 { font-weight: 600; }

html[data-ui="pro"] .usp-more li::before { color: var(--primary); }

/* ================================================================
   3) USP.CSS — tableau comparatif générique + variante matrice
   Partagé par le tableau « pile remplacée » (comparatif.html) et la
   variante --matrix. La variante --named (matrice nommée) est
   traitée séparément en §4, plus dense.
   ================================================================ */
html[data-ui="pro"] .compare-table-wrap {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .compare-table thead th {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-dim);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
html[data-ui="pro"] .compare-table th,
html[data-ui="pro"] .compare-table td {
  font-variant-numeric: tabular-nums;
}
html[data-ui="pro"] .compare-table td:first-child { color: var(--ink); font-weight: 500; }

html[data-ui="pro"] .compare-table--matrix .cell-yes { color: var(--success); font-weight: 600; }
html[data-ui="pro"] .compare-table--matrix .cell-part { color: var(--warning); }
html[data-ui="pro"] .compare-table--matrix .col-arrow { background: var(--primary-soft); }

/* ================================================================
   4) USP.CSS — MATRICE NOMMÉE (comparatif.html)
   8 critères × 7 solutions, colonne critère sticky. La page la plus
   dense du site : filets fins, en-tête distinct, colonne sticky
   opaque et lisible au défilement, cellules aérées, alignement
   stable. Les badges d'état (cell-flag) restent la seule couleur
   fonctionnelle, routée par les jetons success/warning du thème Pro
   plutôt que les teintes vertes/ambrées écrites en dur de la version
   Cinéma (qui ne correspondent pas à --success/--warning en Pro).
   ================================================================ */
html[data-ui="pro"] .compare-table--named th,
html[data-ui="pro"] .compare-table--named td {
  padding: 16px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--hairline);
}
html[data-ui="pro"] .compare-table--named thead th {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

/* Colonne critère : sticky, fond opaque à toutes les lignes (y
   compris l'en-tête) pour rester lisible pendant le défilement
   horizontal — c'est le point de vigilance explicite de la mission. */
html[data-ui="pro"] .compare-table--named td:first-child,
html[data-ui="pro"] .compare-table--named thead th:first-child {
  background: var(--surface-1);
  box-shadow: inset -1px 0 0 var(--border);
}

html[data-ui="pro"] .compare-table--named .mx-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
html[data-ui="pro"] .compare-table--named .mx-vendor {
  color: var(--ink-faint);
}
html[data-ui="pro"] .compare-table--named .mx-crit {
  color: var(--ink);
  font-weight: 600;
}
html[data-ui="pro"] .compare-table--named .mx-crit-sub { color: var(--ink-faint); }

/* Colonne Arrow : seule mise en avant, par un filet d'accent — pas
   un aplat de couleur (« une carte ne doit jamais avoir la couleur
   de la bande qui la porte »). */
html[data-ui="pro"] .compare-table--named .col-arrow {
  border-left: 1px solid var(--primary-line);
  border-right: 1px solid var(--primary-line);
  background: var(--primary-soft);
}
html[data-ui="pro"] .compare-table--named thead th.col-arrow { background: var(--primary-soft); }
html[data-ui="pro"] .compare-table--named td.col-arrow .cell-txt { color: var(--ink); }

/* Badges d'état : jetons du thème Pro, pas les teintes vert/ambre
   écrites en dur de la version Cinéma. */
html[data-ui="pro"] .compare-table--named .cell-flag {
  font-family: var(--font-mono);
  border-color: var(--hairline);
  color: var(--ink-faint);
}
html[data-ui="pro"] .compare-table--named .cell-yes .cell-flag {
  color: var(--success);
  border-color: rgba(21, 128, 61, 0.3);
  background: var(--success-bg);
}
html[data-ui="pro"] .compare-table--named .cell-part .cell-flag {
  color: var(--warning);
  border-color: rgba(180, 83, 9, 0.3);
  background: var(--warning-bg);
}
html[data-ui="pro"] .compare-table--named .cell-txt { color: var(--ink-dim); }

/* Lisibilité au survol pendant le défilement — n'affecte pas la
   colonne sticky ni la colonne Arrow, qui gardent leur propre fond. */
html[data-ui="pro"] .compare-table--named tbody tr:hover td:not(:first-child):not(.col-arrow) {
  background: var(--surface-2);
}

/* ---------- Bande méta HUD et légende ---------- */
html[data-ui="pro"] .matrix-hud,
html[data-ui="pro"] .matrix-legend { color: var(--ink-faint); }
html[data-ui="pro"] .matrix-hud .is-accent { color: var(--primary); }
html[data-ui="pro"] .matrix-hud span::before { background: var(--primary-line); }
html[data-ui="pro"] .matrix-legend .lg-yes::before { background: var(--success); }
html[data-ui="pro"] .matrix-legend .lg-part::before { background: var(--warning); }
html[data-ui="pro"] .matrix-legend .lg-no::before { background: var(--ink-faint); }

/* ---------- Bloc note méthodologique ---------- */
html[data-ui="pro"] .method-note {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .method-note__kicker { color: var(--primary); }
html[data-ui="pro"] .method-note__date,
html[data-ui="pro"] .method-note p,
html[data-ui="pro"] .method-note .method-note__marks { color: var(--ink-muted); }

/* ================================================================
   5) CONFIANCE.CSS — grilles de cartes, disclaimer, listes à puces
   Partagé par qualiopi.html, securite.html, pourquoi-changer.html.
   ================================================================ */

/* Vrais titres de carte (h3) : casse normale, jamais de capitales. */
html[data-ui="pro"] .criteria-card h3,
html[data-ui="pro"] .trust-card h3,
html[data-ui="pro"] .security-card h3 {
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
}

html[data-ui="pro"] .criteria-card__idx {
  border-color: var(--primary-line);
  color: var(--primary);
}
html[data-ui="pro"] .criteria-card__how {
  border-top-color: var(--hairline);
  color: var(--ink);
}
html[data-ui="pro"] .criteria-card__how strong { color: var(--primary); font-weight: 500; }

html[data-ui="pro"] .trust-card__idx { color: var(--ink-faint); }

html[data-ui="pro"] .trust-callout {
  border-radius: var(--radius);
}

/* Disclaimer / bloc de prudence : jeton warning du thème Pro plutôt
   que les rgba ambrés écrits en dur de la version Cinéma. */
html[data-ui="pro"] .disclaimer-box {
  background: var(--warning-bg);
  border-color: rgba(180, 83, 9, 0.3);
  border-radius: var(--radius);
}
html[data-ui="pro"] .disclaimer-box__icon {
  border-color: rgba(180, 83, 9, 0.4);
  color: var(--warning);
  background: var(--surface-1);
}

html[data-ui="pro"] .point-list li::before { color: var(--primary); }

/* ================================================================
   6) CONFIANCE.CSS V2 — jauge RNQ et dossier de preuves (qualiopi.html)
   Le bloc le plus « Cinéma » du lot : fond quasi noir en dur avec
   du texte prévu pour ce fond sombre, chiffres au contour en
   dégradé, nœuds de rail avec halo, jauge en dégradé. Sous le thème
   Pro, les jetons --ink/--ink-dim redeviennent des couleurs de texte
   claires : sans cette surcharge, le texte du dossier serait presque
   invisible (encre sombre sur fond #0c0e17 resté en dur). Reconstruit
   en liste de rapport sobre : rail fin, puce pleine sans halo,
   numérotation compacte au lieu du chiffre évidé géant.
   ================================================================ */

/* ---------- Jauge et compteurs du hero (fond clair, cohérent) ---------- */
html[data-ui="pro"] .rnq-counter .figure { font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ui="pro"] .rnq-gauge__head { color: var(--ink-dim); }
html[data-ui="pro"] .rnq-gauge__head .state { color: var(--success); }
html[data-ui="pro"] .rnq-gauge__track { background: var(--surface-2); }
html[data-ui="pro"] .rnq-gauge__fill { background: var(--primary); }

/* ---------- Le dossier de preuves ---------- */
html[data-ui="pro"] .dossier {
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
  padding: clamp(44px, 7vh, 76px) clamp(16px, 2.4vw, 28px);
}
html[data-ui="pro"] .dossier__head {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}
html[data-ui="pro"] .dossier__sub {
  color: var(--ink-dim);
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* Rail vertical : filet fin, plus de dégradé qui s'estompe dans le
   vide (c'était un artifice pour un fond sombre sans bord net). */
html[data-ui="pro"] .crit-list::before { background: var(--border); }

html[data-ui="pro"] .crit {
  grid-template-columns: 56px minmax(0, 5fr) minmax(0, 4fr);
  border-bottom-color: var(--hairline);
}

/* Le grand chiffre évidé (contour dégradé, ~5.4rem) devient une
   numérotation compacte, alignée avec le rail — l'info est déjà
   portée par crit__ref (« Critère 0X · RNQ »), ce chiffre géant
   était pur décor au sens de la doctrine. */
html[data-ui="pro"] .crit__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  -webkit-text-stroke: 0;
  text-align: right;
  padding-top: 3px;
}

/* Puce de rail : pleine, sans halo (box-shadow-glow supprimé, y
   compris dans la variante réduite de mouvement qui le réintroduit
   avec !important — d'où le !important en miroir ici). */
html[data-ui="pro"] .crit__node {
  background: var(--surface-1);
  border: 1.5px solid var(--primary-line);
  box-shadow: none !important;
}
html[data-ui="pro"] .crit.in-view .crit__node,
html[data-ui="pro"].js-anim .crit.in-view .crit__node {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none !important;
}

html[data-ui="pro"] .crit__ref { color: var(--ink-faint); }
html[data-ui="pro"] .crit__body h3 {
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
}
html[data-ui="pro"] .crit__body p { color: var(--ink-dim); }

html[data-ui="pro"] .crit__proof {
  background: var(--surface-1);
  border-color: var(--hairline);
  border-left-color: var(--primary);
}
html[data-ui="pro"] .crit__proof-head { color: var(--primary); }
html[data-ui="pro"] .crit__proof-state { color: var(--success); }
html[data-ui="pro"] .crit__proof-state::before { background: var(--success); }
html[data-ui="pro"] .crit__proof p { color: var(--ink-dim); }
html[data-ui="pro"] .crit__proof p b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  html[data-ui="pro"] .crit { grid-template-columns: 40px minmax(0, 1fr); }
  html[data-ui="pro"] .crit__proof { grid-column: 2; }
}
@media (max-width: 560px) {
  html[data-ui="pro"] .crit-list::before { left: 12px; }
  html[data-ui="pro"] .crit__node { left: 12px; }
  html[data-ui="pro"] .crit { grid-template-columns: 1fr; padding-left: 30px; }
  html[data-ui="pro"] .crit__num { text-align: left; font-size: 13px; }
  html[data-ui="pro"] .crit__proof { grid-column: 1; }
}

/* Le contour dégradé du grand chiffre et le halo du nœud sont
   réintroduits avec !important sous prefers-reduced-motion dans
   confiance.css : neutralisés explicitement, même hors mouvement. */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="pro"] .crit__num { -webkit-text-stroke-color: transparent !important; }
  html[data-ui="pro"] .crit__node,
  html[data-ui="pro"] .crit.in-view .crit__node {
    box-shadow: none !important;
  }
}

/* ---------- _editorial.css (431 lignes) ---------- */
/* ================================================================
   ARROW — THEME-PRO / _EDITORIAL.CSS
   Lot « éditorial » : surcharges du thème Pro pour les CSS de page
   notre-histoire.css, legal.css, ressources.css et cas-clients.css.

   Concaténé dans theme-pro.css après le socle (voir §9 là-bas). Tous
   les sélecteurs d'origine ici sont préfixés par page (nh-, legal-,
   whitepaper-, resource-, newsletter-, cc-…), donc aucun recouvrement
   avec les autres partiels du thème Pro. Chaque règle commence par
   html[data-ui="pro"].

   Sommaire
     1) Notre histoire — hero, chapitres, cadres photo, citation, final
     2) Pages légales — hero, sommaire, prose, notes, navigation
     3) Ressources — livre blanc, grille « à venir », newsletter
     4) Cas clients — types d'établissements, grille gabarit
   ================================================================ */

/* ================================================================
   1) NOTRE HISTOIRE (notre-histoire.css)
   ================================================================ */

/* ---------- Hero de récit : un titre de page, pas une affiche plein
   écran. Le halo et le numéro géant en fond disparaissent ; le compte
   de chapitres reste lisible dans la bande méta, en texte. ---------- */
html[data-ui="pro"] .nh-hero {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: clamp(38px, 6vh, 64px) clamp(16px, 2.4vw, 28px) 0;
}
html[data-ui="pro"] .nh-hero__glow,
html[data-ui="pro"] .nh-hero__num {
  display: none;
}
html[data-ui="pro"] .nh-hero__inner { max-width: 1180px; }

html[data-ui="pro"] .nh-kicker {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  gap: 10px;
}
html[data-ui="pro"] .nh-kicker::before { background: var(--border); width: 24px; }

html[data-ui="pro"] .nh-hero__title {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  font-weight: 600;
  max-width: 18ch;
}
/* .nh-hero__title est un <h1> : le em en dégradé passe déjà par la
   règle générique « html[data-ui="pro"] h1 em » du socle (§3). */

html[data-ui="pro"] .nh-hero__sub {
  font-size: 16px;
  line-height: 1.65;
  max-width: 62ch;
}

html[data-ui="pro"] .nh-link-quiet {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--primary-ink);
  border-bottom-color: var(--primary-line);
}
html[data-ui="pro"] .nh-link-quiet:hover { color: var(--primary-2); }

/* Bande méta : redescend dans le flux au pied du hero, fil d'Ariane
   technique plutôt que HUD en surimpression sur un halo — plus de
   dégradé sombre codé en dur. */
html[data-ui="pro"] .nh-meta {
  position: static;
  background: none;
  border-top: 1px solid var(--hairline);
  margin-top: clamp(28px, 5vh, 44px);
  padding: 14px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-faint);
}
html[data-ui="pro"] .nh-meta b { font-weight: 500; color: var(--ink-dim); }

/* ---------- Plan d'ouverture ---------- */
html[data-ui="pro"] .nh-opening {
  padding: 0 clamp(16px, 2.4vw, 28px) clamp(44px, 7vh, 76px);
}

/* ---------- Sections-chapitres ---------- */
html[data-ui="pro"] .nh-chap {
  overflow: visible;
  padding: clamp(44px, 7vh, 76px) clamp(16px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
}
/* La teinte « sombre » du récit devient la bande grise du rapport. */
html[data-ui="pro"] .nh-chap--tint { background: var(--surface-2); }
/* Une carte ne porte jamais la couleur de la bande qui la contient
   (doctrine) : sur bande grise, le cadre photo repasse en blanc. */
html[data-ui="pro"] .nh-chap--tint .nh-shot { background: var(--surface-1); }

html[data-ui="pro"] .nh-chap__num { display: none; }

html[data-ui="pro"] .nh-chap__inner { gap: clamp(32px, 5vw, 64px); }

html[data-ui="pro"] .nh-chap__label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  gap: 10px;
  margin-bottom: 14px;
}
html[data-ui="pro"] .nh-chap__label::before { display: none; }

html[data-ui="pro"] .nh-chap__title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-transform: none;
  font-weight: 600;
  margin-bottom: 12px;
}
html[data-ui="pro"] .nh-chap__text {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 56ch;
}

/* ---------- Cadres photo (huit placeholders, encore vides) ----------
   Le viseur HUD — coins en L, reflet diagonal, grille en surimpression,
   ombre portée à 60 % de noir — était l'identité « cinéma continu ».
   Il disparaît : ce qui reste est un cadre sobre, présentable même
   sans photo, cohérent avec .shot du socle (§7). */
html[data-ui="pro"] .nh-shot {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}
html[data-ui="pro"] .nh-shot::after,
html[data-ui="pro"] .nh-shot__corner {
  display: none;
}
html[data-ui="pro"] .nh-shot__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--ink-faint);
}
html[data-ui="pro"] .nh-shot__label b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--warning);
  letter-spacing: 0.1em;
  font-size: 10.5px;
}
html[data-ui="pro"] .nh-shot__caption {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  padding: 3px 8px;
}

/* Direction photo : la progression N&B → couleur reste l'intention
   éditoriale (chapitres 01-04 en retrait, la couleur revient au 05) ;
   voir l'arbitrage détaillé en fin de mission. Le noir & blanc dur de
   la version cinéma (saturate .4) est adouci — sur fond clair, une
   désaturation franche lit comme une erreur de rendu plutôt que
   comme un parti pris. Sur les placeholders actuels le filtre n'a de
   toute façon aucun effet visible : il ne joue qu'une fois les photos
   posées, ce qui est précisément le but. */
html[data-ui="pro"] .nh-shot--nb { filter: saturate(0.55); }

/* Bascule couleur (chapitre 05) : plus de halo bleu ni de fond en
   dégradé, un simple liseré d'accent qui marque le tournant du récit
   — la couleur porte le sens, pas le décor. */
html[data-ui="pro"] .nh-shot--color {
  filter: none;
  background: var(--surface-2);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .nh-shot--color .nh-shot__caption { color: var(--primary-ink); }

/* Chapitre 06 : la couleur est acquise, plus besoin d'un dégradé
   chaud pour le signaler. */
html[data-ui="pro"] .nh-shot--warm {
  filter: none;
  background: var(--surface-2);
}

/* ---------- Carton citation du fondateur ----------
   Le magenta (accent interdit en Pro) est déjà neutralisé vers un
   gris par la redéfinition de --brand-magenta dans le socle (§1) ;
   ici on aligne kicker et texte sur les conventions du reste du
   thème (un seul accent, aucun dégradé). */
html[data-ui="pro"] .nh-quote {
  padding: clamp(56px, 9vh, 96px) clamp(16px, 2.4vw, 28px);
}
html[data-ui="pro"] .nh-quote__glow { display: none; }
html[data-ui="pro"] .nh-quote__kicker {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
html[data-ui="pro"] .nh-quote__text {
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 24px;
}
html[data-ui="pro"] .nh-quote__text em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
  font-style: normal;
}
html[data-ui="pro"] .nh-quote__author {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-bottom: 36px;
}

/* ---------- Carton final + CTA démo ---------- */
html[data-ui="pro"] .nh-final {
  padding: clamp(56px, 9vh, 96px) clamp(16px, 2.4vw, 28px);
}
html[data-ui="pro"] .nh-final__glow { display: none; }
html[data-ui="pro"] .nh-final__kicker {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 20px;
}
html[data-ui="pro"] .nh-final__card {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin-bottom: 32px;
}
html[data-ui="pro"] .nh-final__card em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
  font-style: normal;
}

/* ---------- Mention Venio ---------- */
html[data-ui="pro"] .nh-venio p {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* ---------- Reveals : conservés, raccourcis (doctrine du socle §7) ---------- */
html[data-ui="pro"] .nh-anim .nh-reveal {
  transform: translateY(16px);
  transition-duration: 0.5s;
}
html[data-ui="pro"] .nh-anim .nh-reveal-x {
  transform: translateX(20px);
  transition-duration: 0.5s;
}
html[data-ui="pro"] .nh-anim .nh-chap--flip .nh-reveal-x { transform: translateX(-20px); }

/* ================================================================
   2) PAGES LÉGALES (legal.css)
   Prose longue : la mesure de lecture (70ch, déjà correcte dans la
   CSS d'origine) est conservée, seule la hiérarchie typographique et
   la casse des titres sont mises aux normes du thème Pro. Scopé sur
   .legal-hero / .legal-content, qui sont propres à ces trois pages —
   aucun débordement vers .page-hero générique des autres pages.
   ================================================================ */
html[data-ui="pro"] .page-hero.legal-hero {
  padding: clamp(40px, 6vh, 64px) clamp(20px, 5vw, 48px) clamp(28px, 4vh, 40px);
}
html[data-ui="pro"] .page-hero.legal-hero .page-kicker {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
html[data-ui="pro"] .page-hero.legal-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: none;
  font-weight: 600;
}
html[data-ui="pro"] .page-hero.legal-hero .page-hero__sub {
  font-size: 15.5px;
  line-height: 1.6;
}

html[data-ui="pro"] .legal-updated {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ---------- Sommaire ---------- */
html[data-ui="pro"] .legal-toc { top: 76px; }
html[data-ui="pro"] .legal-toc__label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
html[data-ui="pro"] .legal-toc a { font-size: 13.5px; }

/* ---------- Corps de texte : hiérarchie, interlignage ---------- */
html[data-ui="pro"] .legal-content {
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
}
html[data-ui="pro"] .legal-content section {
  padding-top: clamp(32px, 4.5vh, 48px);
  margin-top: clamp(32px, 4.5vh, 48px);
}
html[data-ui="pro"] .legal-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
}
html[data-ui="pro"] .legal-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
}
html[data-ui="pro"] .legal-content a { color: var(--primary-ink); }
html[data-ui="pro"] .legal-content a:hover { color: var(--primary-2); }

/* Encart « note » : un liseré d'accent le distingue du reste de la
   prose sans lui donner de couleur de fond dédiée. */
html[data-ui="pro"] .legal-note {
  border-left: 3px solid var(--primary-line);
}

html[data-ui="pro"] .legal-siblings a { font-size: 12px; }

/* ================================================================
   3) RESSOURCES (ressources.css)
   ================================================================ */
html[data-ui="pro"] .whitepaper-card {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-soft);
}
html[data-ui="pro"] .whitepaper-card__title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
}
html[data-ui="pro"] .whitepaper-card__text { font-size: 15px; }

/* La grille « à venir » repose sur une bande blanche (style en dur
   dans la page) : les cartes y redeviennent grises pour ne pas porter
   la couleur de la bande qui les contient (doctrine). */
html[data-ui="pro"] .resource-card { background: var(--surface-2); }
html[data-ui="pro"] .resource-card__category {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--primary-ink);
}
html[data-ui="pro"] .resource-card__title {
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 600;
  color: var(--ink-faint);
}
html[data-ui="pro"] .resource-card__text { font-size: 13.5px; }

html[data-ui="pro"] .newsletter-cta__title {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
}
html[data-ui="pro"] .newsletter-cta__text { font-size: 14.5px; }

/* ================================================================
   4) CAS CLIENTS (cas-clients.css)
   Page entièrement gabarit : les signaux « ce n'est pas réel »
   (encoché pointillée, texte en italique atténué, badge d'état
   ambre) viennent du HTML et de base.css, non touchés — on aligne
   seulement la typographie sur la doctrine Pro sans les affaiblir.
   ================================================================ */
html[data-ui="pro"] .cc-type-icon {
  font-size: 22px;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.82;
}
html[data-ui="pro"] .cc-type-card h3 {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 600;
}
html[data-ui="pro"] .cc-type-card p { font-size: 13px; }

html[data-ui="pro"] .cc-case-card__name {
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 600;
}
html[data-ui="pro"] .cc-case-card__type {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--primary-ink);
}
html[data-ui="pro"] .cc-case-card__quote { font-size: 14px; }
html[data-ui="pro"] .cc-case-card__results { font-size: 12.5px; }

/* ================================================================
   §15 — DIRECTION « LA FICHE » SUR LA HOME (2026-08-27)
   Prolonge le §13 (« Le Registre ») sur les trois composants
   ajoutés par la refonte : hero en deux colonnes, bandeau de faits,
   diptyque avant/après. Mêmes valeurs qu'au §13 pour qu'on ne
   change pas de système d'une section à l'autre :
     - titres de bloc en 600, chiffres en 650 ;
     - étiquettes en mono 700 ;
     - la couleur ne signale que ce qui se clique — d'où le panneau
       « Dans Arrow » en obsidienne plutôt qu'en filet bleu, et le
       « → » des faits qui reste le seul bleu du bandeau.
   Tout est scopé `body.home-body` : rien ne fuit vers les autres
   pages, qui vivent sous le §14.
   ================================================================ */

/* 15.a) Le hero. §13.d met `.scene-inner` en grille (étiquette en
   colonne 1, contenu en colonne 2) et vise `> h1` pour la première
   rangée. Le titre est désormais enfoui dans `.hero-grid` : c'est
   ce conteneur qui doit prendre la place du titre dans la grille,
   sans quoi l'étiquette « Arrow présente » retombe au-dessus. */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.home-body .hero .scene-inner > .hero-grid {
    grid-column: 2;
    grid-row: 1;
  }
}
html[data-ui="pro"] body.home-body .hero-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-faint);
}
html[data-ui="pro"] body.home-body .hero-shot {
  border-color: var(--hairline);
  box-shadow: var(--shadow-strong);
}

/* 15.a bis) Un seul bord gauche pour toute la page.
   `home.css` réserve 112 px à gauche des scènes pour la nav verticale
   (@media min-width:900px). Le §13 masque cette nav sur la home en
   Pro : la réserve ne protégeait plus rien et décalait les actes de
   104 px par rapport aux sections de conversion. Avant la refonte le
   défaut passait inaperçu (les sections étaient toutes groupées en
   fin de page) ; depuis que les deux familles alternent, le bord de
   la page sautait à chaque bloc. Sans la réserve, `.scene-inner`
   retombe exactement sur `.section__inner`. */
@media (min-width: 900px) {
  /* `.final` est exclu : le socle Pro lui donne déjà un padding
     symétrique de 28 px (§6) qui le posait pile sur 166 px. Lui
     réécrire le seul côté gauche le décalait de 29 px. */
  html[data-ui="pro"] body.home-body .scene:not(.final) {
    padding-left: clamp(24px, 6vw, 96px);
  }
}

/* 15.b) Le bandeau de faits. Le filet haut est le seul trait plein
   de la page avec celui des têtes de section : c'est lui qui dit
   « ceci est la fiche d'identité », pas une couleur de fond. */
html[data-ui="pro"] body.home-body .facts {
  background: var(--surface-1);
  border-top-color: var(--ink);
  border-bottom-color: var(--hairline);
}
html[data-ui="pro"] body.home-body .fact__val {
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html[data-ui="pro"] body.home-body .fact__more {
  font-weight: 700;
}
html[data-ui="pro"] body.home-body .fact:hover {
  background: var(--primary-soft);
}

/* 15.c) Le diptyque. À gauche l'état actuel, en retrait ; à droite
   le panneau obsidienne — le même noir que le carton final et que
   la tête de l'acte des chiffres, pour que les trois moments forts
   de la page se reconnaissent entre eux. */
html[data-ui="pro"] body.home-body .vs__col--before {
  background: var(--surface-2);
  border: 1px dashed var(--border);
}
html[data-ui="pro"] body.home-body .vs__col--after {
  background: #101012;
  border: 1px solid #101012;
  color: #f2f2f4;
}
html[data-ui="pro"] body.home-body .vs__col--after .vs__label { color: #71717a; }
html[data-ui="pro"] body.home-body .vs__col--after .vs__title { color: #f2f2f4; font-weight: 600; }
html[data-ui="pro"] body.home-body .vs__col--after .vs__desc { color: #a1a1aa; }
html[data-ui="pro"] body.home-body .vs__col--after .vs__spec {
  color: #71717a;
  border-top-color: #27272a;
}

/* 15.d) Le neuvième module n'est pas un lien : il ne doit pas
   prendre le survol des huit autres. */
html[data-ui="pro"] body.home-body .mod-grid .mod--flat:hover {
  background: var(--surface-1);
}


/* ================================================================
   §16 — LOT 1 : LES PAGES DE CONVERSION ENTRENT DANS LE REGISTRE
   (2026-08-27)

   Le §14 a été écrit pour le vocabulaire des fiches produit. En
   posant `reg-body` sur tarifs, qualiopi, usp et comparatif, trois
   conteneurs se sont retrouvés hors du système — pas parce qu'ils
   sont différents, mais parce qu'ils n'existaient pas sur les pages
   produit. Ce paragraphe les y fait entrer, avec la géométrie du
   §13.d / §14.d à l'identique (150 px + 32 px de gouttière).

   Aucune valeur nouvelle n'est introduite ici : si un réglage
   diffère de celui du §14, c'est un bug, pas une intention.
   ================================================================ */

/* 16.a) Le dossier des sept critères (qualiopi) et le hero des pages
   de contenu simple (comparatif) rejoignent la grille. Sans ça, le
   dossier — qui est le cœur de la page Qualiopi — commençait 50 px
   à droite de tout le reste, et le hero du comparatif gardait son
   étiquette au-dessus du titre au lieu de la marge. */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.reg-body .dossier__inner,
  html[data-ui="pro"] body.reg-body .page-hero__inner {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    max-width: 1180px;
  }
  html[data-ui="pro"] body.reg-body .dossier__inner > *,
  html[data-ui="pro"] body.reg-body .page-hero__inner > * {
    grid-column: 2;
  }
  html[data-ui="pro"] body.reg-body .dossier__inner > .sec-kicker,
  html[data-ui="pro"] body.reg-body .page-hero__inner > .page-kicker {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.reg-body .dossier__inner > .dossier__head,
  html[data-ui="pro"] body.reg-body .page-hero__inner > h1 {
    grid-row: 1;
  }

  /* Même piège qu'au §13.d : un bloc centré par `margin: 0 auto`
     dans une colonne déjà décalée donne un TROISIÈME bord gauche.
     La FAQ des tarifs en était l'exemple exact — titre à 348 px,
     liste à 558 px. On annule les deux marges, jamais une seule :
     une marge auto sur un item de grille lui fait perdre son
     étirement. */
  html[data-ui="pro"] body.reg-body .faq-list {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 16.b) Le hero des pages de contenu simple s'aligne à gauche comme
   le reste du Registre, et reprend l'échelle de titres du §13.a :
   graisse 300 contre 600 pour les titres de section, jamais l'inverse.
   Les capitales forcées du socle sautent : le Registre distingue par
   la graisse, pas par la casse. */
html[data-ui="pro"] body.reg-body .page-hero {
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
/* Le socle Pro pose `max-width: 72ch; margin: 0` sur cet inner (§ mise
   en page générique) : sans centrage, le hero démarrait 66 px à gauche
   des sections de la même page. On lui rend la largeur et les marges
   automatiques du reste du Registre — il n'est pas un item de grille,
   les marges auto y sont donc sans danger. */
html[data-ui="pro"] body.reg-body .page-hero__inner {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
/* `.legal-hero` est exclu : les pages légales ont reçu un traitement
   volontairement plus sobre (titre en 600, plafonné à 2.6rem), et
   l'échelle du Registre le remplacerait par un titre de 3.2rem en
   300 — plus grand et plus clair que celui d'une page produit. Ces
   pages gagnent la colonne d'étiquettes, qui est une question
   d'alignement, pas de volume. */
html[data-ui="pro"] body.reg-body .page-hero:not(.legal-hero) h1 {
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.03em;
  text-transform: none;
}
html[data-ui="pro"] body.reg-body .page-hero__sub {
  max-width: 62ch;
  margin-left: 0;
  margin-right: 0;
}
html[data-ui="pro"] body.reg-body .page-kicker {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* 16.c) « La couleur ne signale que ce qui se clique » (§13.f). Le
   bandeau de revendications des tarifs mettait un seul de ses trois
   chiffres en bleu — le lecteur y cherchait un lien qui n'existe
   pas, et la mise en avant d'un chiffre sur trois n'était pas un
   choix éditorial mais un reste de l'ancien thème. Même cas sur
   Qualiopi : le « 32 » des indicateurs était bleu et le « 7 » des
   critères non, par un `:nth-child(2)` de confiance.css — deux
   chiffres de même rang qui ne se lisaient pas au même niveau. */
html[data-ui="pro"] body.reg-body .hero-claims__value.is-accent,
html[data-ui="pro"] body.reg-body .rnq-counter:nth-child(2) .figure {
  color: var(--ink);
}

/* ================================================================
   §17 — LOT 2 : LES SIX PAGES SOLUTIONS (2026-08-27)

   Poser `reg-body` a suffi pour cinq conteneurs sur six : les pages
   persona parlent déjà le vocabulaire des fiches produit (ch-hero,
   mod__copy, index-inner, final). Un seul leur est propre.
   ================================================================ */

/* 17.a) `.mod__stack` est la variante « pleine largeur » d'une scène :
   pas de capture à droite, donc pas de `.mod__inner` à deux colonnes
   — l'étiquette, le titre et la liste de preuves se suivent dans un
   bloc unique. Sans règle, ce bloc gardait son étiquette au-dessus du
   titre et démarrait son texte à 166 px, quand les scènes voisines le
   posent à 348 px. Deux bords gauches sur la même page, exactement ce
   que le §13.d refuse. Il rejoint donc la grille comme `.index-inner`
   — mêmes 150 px, même gouttière. */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.reg-body .mod__stack {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  html[data-ui="pro"] body.reg-body .mod__stack > * { grid-column: 2; }
  html[data-ui="pro"] body.reg-body .mod__stack > .mod__label {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.reg-body .mod__stack > .mod__title { grid-row: 1; }
}

/* Même correctif qu'au §14 pour le sommaire et le carton final :
   la citation et le générique de fin de « Notre histoire » sont à
   900 px et centrés, sous un hero et des chapitres à 1180 — leur
   colonne d'étiquettes démarrait 140 px à droite des autres. On les
   aligne sur la même gouttière, et le texte cesse d'être centré :
   une étiquette en marge sous un bloc centré ne veut rien dire. */
html[data-ui="pro"] body.reg-body .nh-quote__inner,
html[data-ui="pro"] body.reg-body .nh-final__inner { max-width: 1180px; }
html[data-ui="pro"] body.reg-body .nh-quote,
html[data-ui="pro"] body.reg-body .nh-final { text-align: left; }
html[data-ui="pro"] body.reg-body .nh-final .nh-cta-row { justify-content: flex-start !important; }

/* ================================================================
   §18 — LOT 3 : LES PAGES DE CONTENU (2026-08-27)

   Quatre des cinq pages du lot (ressources, calculateur, securite,
   pourquoi-changer) n'ont rien demandé : elles parlent ch-hero /
   section / final, que le §14 couvre. Seule « Notre histoire » a
   son propre vocabulaire — préfixé `nh-`, hérité de sa mise en
   page narrative.

   Le socle Pro restyle déjà ces classes (§ récit incarné) : il ne
   manquait que la colonne d'étiquettes. La correspondance est
   terme à terme avec le §14 :
     .nh-hero__inner  ↔ .ch-hero__inner   (.nh-kicker ↔ .ch-kicker)
     .nh-chap__copy   ↔ .mod__copy        (.nh-chap__label ↔ .mod__label)
     .nh-quote__inner ↔ .interlude__inner
     .nh-final__inner ↔ .final__inner
   `.nh-opening__inner` reste hors grille : il ne contient qu'un
   visuel pleine largeur, sans étiquette à sortir.
   ================================================================ */
@media (min-width: 1100px) {
  html[data-ui="pro"] body.reg-body .nh-hero__inner,
  html[data-ui="pro"] body.reg-body .nh-chap__copy,
  html[data-ui="pro"] body.reg-body .nh-quote__inner,
  html[data-ui="pro"] body.reg-body .nh-final__inner {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  html[data-ui="pro"] body.reg-body .nh-hero__inner > *,
  html[data-ui="pro"] body.reg-body .nh-chap__copy > *,
  html[data-ui="pro"] body.reg-body .nh-quote__inner > *,
  html[data-ui="pro"] body.reg-body .nh-final__inner > * {
    grid-column: 2;
  }
  html[data-ui="pro"] body.reg-body .nh-hero__inner > .nh-kicker,
  html[data-ui="pro"] body.reg-body .nh-chap__copy > .nh-chap__label,
  html[data-ui="pro"] body.reg-body .nh-quote__inner > .nh-quote__kicker,
  html[data-ui="pro"] body.reg-body .nh-final__inner > .nh-final__kicker {
    grid-column: 1;
    grid-row: 1;
    padding-top: 11px;
    margin-bottom: 0;
  }
  html[data-ui="pro"] body.reg-body .nh-hero__inner > .nh-hero__title,
  html[data-ui="pro"] body.reg-body .nh-chap__copy > .nh-chap__title,
  html[data-ui="pro"] body.reg-body .nh-quote__inner > .nh-quote__text,
  html[data-ui="pro"] body.reg-body .nh-final__inner > .nh-final__card {
    grid-row: 1;
  }

  /* Même arbitrage qu'au §14.b sur `.mod--alt` : `.nh-chap--flip`
     renvoie le texte à droite de la photo, et sa colonne d'étiquettes
     partirait alors du milieu de la page — trois bords gauches sur
     six chapitres, mesurés à 166, 306 et 839 px. L'alternance est
     suspendue au-dessus de 1100 px ; le rythme du récit reste tenu
     par le fond des chapitres, plus par la position. En dessous,
     notre-histoire.css reprend la main sans être touché. */
  html[data-ui="pro"] body.reg-body .nh-chap--flip .nh-chap__inner > .nh-chap__copy,
  html[data-ui="pro"] body.reg-body .nh-chap--flip .nh-chap__inner > .nh-chap__visual {
    order: 0;
  }
}

/* ================================================================
   §19 — MODE SOMBRE DU THÈME PRO (2026-08-27)

   Le thème Pro n'existait qu'en clair. La palette sombre est portée
   depuis l'« Obsidienne » du produit (frontend/src/styles/classic/
   classic-dark.css) : mêmes repères, pour qu'un visiteur qui passe
   du site à l'application ne change pas d'univers.

   L'axe est `data-theme`, cumulable avec `data-ui` comme dans le
   produit. Trois états côté visiteur — auto (défaut, suit le
   système), clair, sombre — mais un seul sélecteur ici : `auto` est
   résolu en clair ou sombre par theme-init.js AVANT le premier
   rendu, si bien que le CSS n'a jamais à connaître l'état « auto ».
   C'est ce qui évite d'écrire la palette deux fois (une fois pour
   l'attribut, une fois pour prefers-color-scheme).

   PÉRIMÈTRE : le thème Pro seulement. Le thème Cinéma est sombre par
   nature ; tokens.css lui décrit bien une variante claire, mais
   personne ne l'a jamais câblée et ce lot n'y touche pas.
   ================================================================ */
html[data-ui="pro"][data-theme="dark"] {
  --bg: #050506;
  --surface-1: #101012;
  --surface-2: #17171a;

  --ink: #f2f2f4;
  --ink-dim: #a1a1aa;
  /* #71717a, la valeur claire, ne donne que 4,22:1 sur le fond sombre :
     sous le seuil AA, et ce token porte TOUTES les étiquettes du
     Registre — l'élément sur lequel repose la hiérarchie. #8a8a90
     (déjà la couleur des icônes du rail) donne 5,94 sur le fond,
     5,54 sur les surfaces et 5,21 sur les cartes. */
  --ink-faint: #8a8a90;
  --ink-muted: #a1a1aa;

  /* L'accent s'éclaircit : #2563eb sur #050506 tombe sous le seuil
     de contraste du texte. #93c5fd est l'accent sombre du produit. */
  --primary: #93c5fd;
  --primary-2: #bfdbfe;
  --primary-soft: #15203a;
  --primary-line: rgba(147, 197, 253, 0.4);
  --primary-ink: #93c5fd;
  /* Le bouton plein devient clair : son texte doit donc foncer. */
  --on-primary: #0b1020;
  --secondary: #93c5fd;
  --brand-magenta: #a1a1aa;

  --success: #4ade80;
  --success-bg: #0d2318;
  --warning: #fbbf24;
  --warning-bg: #2a1c07;
  --error: #f87171;
  --error-bg: #2a1113;

  --hairline: #1c1c20;
  --border: #33333a;

  /* Une ombre portée ne se voit pas sur du noir : on l'assombrit
     franchement plutôt que de la faire disparaître. */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.55);

  /* Le rail doit rester distinct du fond de page, qui est désormais
     plus sombre que lui ne l'était : on le descend d'un cran. */
  --rail-bg: #0b0b0d;
  --rail-icon: #8a8a90;
  --rail-active: #93c5fd;

  color-scheme: dark;
}

/* ---------- 19.a) Les îlots obsidienne cessent d'être des îlots ----------
   Trois blocs de la home sont volontairement noirs sur page claire :
   le carton final, le chiffre de tête des ordres de grandeur, et le
   panneau « Dans Arrow » du diptyque. Leur force vient de l'INVERSION,
   pas de la couleur — or sur une page déjà noire, l'inversion n'existe
   plus : #101012 sur #050506 est un écart de trois points de gris, le
   bloc disparaît.

   Sur fond sombre, le geste équivalent est de MONTER, pas de descendre :
   ils deviennent des surfaces d'un cran plus claires, cernées d'un
   filet. Le message « ce bloc est à part » est tenu, à l'envers.
   Leurs couleurs de texte, écrites en dur pour le mode clair,
   repassent par les tokens — qui sont déjà clairs ici. */
html[data-ui="pro"][data-theme="dark"] body.home-body .scene.final,
html[data-ui="pro"][data-theme="dark"] body.home-body .stat-lead,
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
html[data-ui="pro"][data-theme="dark"] body.home-body .scene.final {
  border-left: 0;
  border-right: 0;
}
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after .vs__label,
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after .vs__spec {
  color: var(--ink-faint);
}
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after .vs__title {
  color: var(--ink);
}
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after .vs__desc {
  color: var(--ink-dim);
}
html[data-ui="pro"][data-theme="dark"] body.home-body .vs__col--after .vs__spec {
  border-top-color: var(--hairline);
}

/* ---------- 19.b) Les captures produit restent claires ----------
   Les captures sont des images d'une interface claire : elles ne
   s'assombrissent pas avec la page, et c'est normal — les truquer
   reviendrait à montrer un produit qui n'existe pas. On adoucit
   seulement leur arrivée : un cadre net, et une légère retenue de
   luminosité pour qu'un rectangle blanc ne brûle pas la page. */
html[data-ui="pro"][data-theme="dark"] .home-shot img,
html[data-ui="pro"][data-theme="dark"] .hero-shot img,
html[data-ui="pro"][data-theme="dark"] .shot__img {
  filter: brightness(0.92);
}
html[data-ui="pro"][data-theme="dark"] .home-shot,
html[data-ui="pro"][data-theme="dark"] .hero-shot {
  border-color: var(--border);
}

/* ---------- 19.c) Les pastilles posées SUR les captures ----------
   Elles sont blanches à 92 % parce qu'elles flottent au-dessus d'une
   image claire : ça ne change pas avec le thème de la page. On les
   laisse, en notant qu'elles sont lisibles précisément parce que le
   fond sous elles n'a pas bougé. */

/* ---------- 19.d) Le commutateur Cinéma/Pro ----------
   Sa pastille active écrit son texte en #0d0d15 sur fond d'encre :
   sur palette sombre, l'encre est claire, le texte doit donc foncer
   du côté opposé. On repasse par le token prévu pour ça. */
html[data-ui="pro"][data-theme="dark"] .pro-uitoggle button[aria-pressed="true"] {
  color: var(--bg);
}