/* ═══════════════════════════════════════════════════════════════════════════════
   Kalq · feuille de style du site
   Le site entier se lit comme un document que Kalq parcourt : la ligne de lecture
   de la marque traverse le titre, fait avancer le trajet d'un relevé au défilement,
   puis réapparaît dans chaque démonstration. Colonne de 1 200 px, papier réglé en
   filigrane. Toutes les animations montrent leur état final quand le système demande
   de réduire les mouvements, et la page reste complète sans JavaScript.
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Geist"; src: url("polices/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("polices/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Polices de repli calées sur les métriques de Geist : sans elles, tout le texte
   saute d'une ligne au moment où la vraie police arrive. */
@font-face { font-family: "Geist repli"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103.68%; ascent-override: 96.93%; descent-override: 28.45%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono repli"; src: local("Menlo"), local("Consolas"), local("Liberation Mono"), local("Courier New"); size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }

/* Positions animées : déclarées pour que le navigateur sache les interpoler. */
@property --lecture { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --y { syntax: "<percentage>"; inherits: true; initial-value: 114%; }

/* ═══ Jetons ═══════════════════════════════════════════════════════════════════
   Le site est pensé nuit d'abord ; le thème clair reprend les mêmes jetons. */
:root {
  color-scheme: dark;
  --fond: #0D131C; --fond-2: #111925; --surface: #172131; --surface-haute: #1D2839;
  --filet: rgba(236, 238, 232, 0.10); --filet-fort: rgba(236, 238, 232, 0.2);
  --texte: #ECEEE8; --texte-doux: #A7AFBC; --texte-faible: #8A93A2;
  --accent: #EE7A63; --accent-texte: #F29A87; --accent-fond: rgba(238, 122, 99, 0.12); --sur-accent: #1A0F0C;
  --bleu: #6FA8E8; --bleu-fond: rgba(111, 168, 232, 0.14); --conforme: #5CC48E; --conforme-fond: rgba(92, 196, 142, 0.13);
  --vigilance: #E8B65C; --vigilance-fond: rgba(232, 182, 92, 0.13);
  --reglure: rgba(111, 168, 232, 0.06); --ombre: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  --focus: #6FA8E8;

  /* Le document fictif reste du papier dans les deux thèmes. */
  --papier: #F6F6F1; --papier-encre: #1B2A41; --papier-doux: #566070; --papier-filet: rgba(27, 42, 65, 0.12);
  --papier-lu: rgba(238, 122, 99, 0.14); --papier-rature: #B23A26; --papier-deplace: rgba(47, 111, 222, 0.14);

  /* L'ouverture, les démonstrations et la carte de la bêta restent nuit dans les deux thèmes. */
  --nuit: #0D131C; --nuit-surface: #151E2B; --nuit-surface-haute: #1B2636; --nuit-filet: rgba(236, 238, 232, 0.11);
  --nuit-texte: #ECEEE8; --nuit-doux: #A7AFBC; --nuit-accent: #EE7A63; --nuit-bleu: #6FA8E8; --nuit-conforme: #5CC48E; --nuit-reglure: rgba(111, 168, 232, 0.07);

  /* Couleurs du logo, pilotées par le thème. */
  --logo-plein: var(--texte); --logo-calque1: var(--accent); --logo-calque2: var(--bleu); --logo-ligne: var(--accent);
  --logo-op1: 0.9; --logo-op2: 0.55;

  --police: "Geist", "Geist repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "Geist Mono", "Geist Mono repli", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.75rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.375rem;
  --t-2xl: clamp(1.9rem, 1.25rem + 2.3vw, 3rem); --t-titre: clamp(2.6rem, 1rem + 6.4vw, 6.4rem);
  --gouttiere: clamp(16px, 4vw, 40px); --largeur: 1200px;
  --rayon: 16px; --rayon-petit: 9px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1); --courbe-lecture: cubic-bezier(0.45, 0, 0.25, 1);
  --entete: 68px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fond: #F3F4EE; --fond-2: #ECEEE6; --surface: #FFFFFF; --surface-haute: #FFFFFF;
    --filet: rgba(27, 42, 65, 0.12); --filet-fort: rgba(27, 42, 65, 0.22);
    --texte: #1B2A41; --texte-doux: #4D5767; --texte-faible: #5F6979;
    --accent: #C2412D; --accent-texte: #A8341F; --accent-fond: rgba(194, 65, 45, 0.08); --sur-accent: #FFFFFF;
    --bleu: #2F6FDE; --bleu-fond: rgba(47, 111, 222, 0.10); --conforme: #18724A; --conforme-fond: rgba(24, 114, 74, 0.10);
    --vigilance: #8A5508; --vigilance-fond: rgba(154, 95, 12, 0.10);
    --reglure: rgba(31, 95, 168, 0.07); --ombre: 0 30px 70px -34px rgba(27, 42, 65, 0.35);
    --focus: #2F6FDE;
    --logo-op1: 0.8; --logo-op2: 0.42; --logo-calque2: var(--accent);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --fond: #F3F4EE; --fond-2: #ECEEE6; --surface: #FFFFFF; --surface-haute: #FFFFFF;
  --filet: rgba(27, 42, 65, 0.12); --filet-fort: rgba(27, 42, 65, 0.22);
  --texte: #1B2A41; --texte-doux: #4D5767; --texte-faible: #5F6979;
  --accent: #C2412D; --accent-texte: #A8341F; --accent-fond: rgba(194, 65, 45, 0.08); --sur-accent: #FFFFFF;
  --bleu: #2F6FDE; --bleu-fond: rgba(47, 111, 222, 0.10); --conforme: #18724A; --conforme-fond: rgba(24, 114, 74, 0.10);
  --vigilance: #8A5508; --vigilance-fond: rgba(154, 95, 12, 0.10);
  --reglure: rgba(31, 95, 168, 0.07); --ombre: 0 30px 70px -34px rgba(27, 42, 65, 0.35);
  --focus: #2F6FDE;
  --logo-op1: 0.8; --logo-op2: 0.42; --logo-calque2: var(--accent);
}

/* ═══ Base ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: var(--t-m); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, fieldset { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--sur-accent); }

[hidden] { display: none !important; }
.contenu { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.chiffres { font-family: var(--police-mono); font-variant-numeric: tabular-nums; }

.lien-evitement {
  position: fixed; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 60;
  padding: 10px 16px; border-radius: var(--rayon-petit); background: var(--surface-haute); color: var(--texte);
  transform: translateY(-160%); transition: transform 0.2s var(--courbe);
}
.lien-evitement:focus { transform: none; }

/* ═══ Logo ════════════════════════════════════════════════════════════════════ */
.logo { display: block; height: auto; overflow: visible; }
.logo-plein { fill: var(--logo-plein); }
.logo-contour, .logo-calque1, .logo-calque2 { fill: none; stroke-width: var(--logo-trait, 1.1px); stroke-miterlimit: 4; }
.logo-contour { stroke: var(--logo-plein); }
.logo-calque1 { stroke: var(--logo-calque1); stroke-opacity: var(--logo-op1); transform: translateY(90px); }
.logo-calque2 { stroke: var(--logo-calque2); stroke-opacity: var(--logo-op2); transform: translateY(180px); }
.logo-ligne { fill: var(--logo-ligne); }
.logo-calque1, .logo-calque2 { transition: transform 0.45s var(--courbe); }
a:hover > .logo .logo-calque1, a:focus-visible > .logo .logo-calque1 { transform: translateY(130px); }
a:hover > .logo .logo-calque2, a:focus-visible > .logo .logo-calque2 { transform: translateY(260px); }
/* En petit (en-tête, pied de page), deux calques à 3 px d'écart se brouillent sur un
   écran ordinaire : on n'en garde qu'un, plus écarté et plus appuyé. */
.entete-logo .logo, .pied-marque .logo { --logo-trait: 1.4px; }
.entete-logo .logo-calque2, .pied-marque .logo-calque2 { display: none; }
.entete-logo .logo-calque1, .pied-marque .logo-calque1 { transform: translateY(120px); }
.entete-logo:hover .logo-calque1, .entete-logo:focus-visible .logo-calque1, .pied-marque a:hover .logo-calque1, .pied-marque a:focus-visible .logo-calque1 { transform: translateY(170px); }
.nuit .logo { --logo-plein: var(--nuit-texte); --logo-calque1: var(--nuit-accent); --logo-calque2: var(--nuit-bleu); --logo-ligne: var(--nuit-accent); --logo-op1: 0.9; --logo-op2: 0.55; }
/* À l'arrivée, le calque se détache du mot, comme sur la planche animée de la marque. */
@media (prefers-reduced-motion: no-preference) {
  .js .entete-logo .logo-calque1 { animation: calque-sortie 1s var(--courbe) 0.25s backwards; }
}
@keyframes calque-sortie { from { transform: translateY(0); } }

/* ═══ Boutons et étiquettes ═══════════════════════════════════════════════════ */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.3rem; border-radius: 11px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--courbe);
}
.bouton svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--courbe); }
.bouton:hover svg { transform: translateX(3px); }
.bouton:active { transform: translateY(1px) scale(0.99); }
.bouton-principal { background: var(--texte); color: var(--fond); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .bouton-principal:hover { background: color-mix(in srgb, var(--texte) 88%, var(--accent)); }
}
.bouton-discret { border-color: var(--filet-fort); color: var(--texte); background: transparent; }
.bouton-discret:hover { border-color: var(--texte-doux); background: var(--accent-fond); }
.nuit .bouton-principal { background: var(--nuit-texte); color: var(--nuit); }
.nuit .bouton-principal:hover { background: #FFFFFF; }
.nuit .bouton-discret { border-color: rgba(236, 238, 232, 0.24); color: var(--nuit-texte); }
.nuit .bouton-discret:hover { border-color: var(--nuit-doux); background: rgba(236, 238, 232, 0.06); }
/* Au survol, la ligne de lecture balaie le bouton principal une fois. */
.bouton-principal::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1;
  background: var(--accent); box-shadow: 0 0 12px rgba(238, 122, 99, 0.6); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .bouton-principal:hover::after { animation: balaye-bouton 0.7s var(--courbe-lecture); }
}
@keyframes balaye-bouton { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }

.surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-doux);
}
.surtitre::before { content: ""; width: 22px; height: 2px; background: var(--accent); transform-origin: left; flex: none; }
.nuit .surtitre { color: var(--nuit-doux); }
.nuit .surtitre::before { background: var(--nuit-accent); }

.puce {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  transition: color 0.35s, background-color 0.35s;
}
.puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.puce-conforme { color: var(--conforme); background: var(--conforme-fond); }
.puce-attente { color: var(--texte-doux); background: rgba(138, 147, 162, 0.14); }
.puce-ecart { color: var(--accent-texte); background: var(--accent-fond); }
.puce-vigilance { color: var(--vigilance); background: var(--vigilance-fond); }
.etiquette-exemple { font-family: var(--police-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 8px; }

/* ═══ En-tête ═════════════════════════════════════════════════════════════════ */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--fond);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background-color 0.3s;
}
.entete.defile { border-bottom-color: var(--filet); }
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--entete); }
.entete-logo { display: block; flex: none; border-radius: 6px; }
.entete-logo .logo { height: 36px; width: auto; }
.navigation { display: flex; align-items: center; gap: 24px; font-size: var(--t-s); }
.navigation-liens { display: flex; gap: 24px; }
.navigation-liens a { position: relative; color: var(--texte-doux); text-decoration: none; padding-block: 6px; transition: color 0.2s; }
.navigation-liens a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--courbe);
}
.navigation-liens a:hover, .navigation-liens a[aria-current="true"] { color: var(--texte); }
.navigation-liens a:hover::after, .navigation-liens a[aria-current="true"]::after { transform: scaleX(1); }
.entete .bouton { min-height: 40px; padding-inline: 1rem; font-size: 0.9rem; }

/* La ligne de lecture de la marque sert de barre de progression. */
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progression { animation: progression linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Menu du téléphone : un <details>, qui s'ouvre même sans script. */
.menu { display: none; position: static; }
.menu-bouton {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--filet-fort);
  cursor: pointer; list-style: none; color: var(--texte);
}
.menu-bouton::-webkit-details-marker { display: none; }
.menu-bouton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.menu-trait { transform-box: fill-box; transform-origin: center; transition: transform 0.35s var(--courbe); }
.menu[open] .menu-trait-haut { transform: translateY(3px) rotate(45deg); }
.menu[open] .menu-trait-bas { transform: translateY(-3px) rotate(-45deg); }
.menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gouttiere) 20px;
  /* Téléphone à l'horizontale : le menu défile plutôt que de sortir de l'écran. */
  max-height: calc(100vh - var(--entete)); max-height: calc(100svh - var(--entete)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--fond); border-bottom: 1px solid var(--filet); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.5);
}
.menu-panneau a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--filet);
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: var(--texte);
}
.menu-panneau a .chiffres { font-size: var(--t-xs); color: var(--accent-texte); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panneau { animation: menu-ouverture 0.4s var(--courbe); }
  .menu[open] .menu-panneau li { animation: montee 0.5s var(--courbe) backwards; }
  .menu[open] .menu-panneau li:nth-child(2) { animation-delay: 0.04s; }
  .menu[open] .menu-panneau li:nth-child(3) { animation-delay: 0.08s; }
  .menu[open] .menu-panneau li:nth-child(4) { animation-delay: 0.12s; }
  .menu[open] .menu-panneau li:nth-child(5) { animation-delay: 0.16s; }
}
@keyframes menu-ouverture { from { transform: translateY(-8px); opacity: 0.4; } }

@media (max-width: 960px) {
  .navigation-liens { display: none; }
  .menu { display: block; }
  .navigation { gap: 10px; }
}
@media (max-width: 380px) { .bouton-entete { padding-inline: 0.8rem; } }

/* Au-dessus de l'ouverture, l'en-tête prend les couleurs nuit, même en thème clair. */
.entete.sur-nuit { background: var(--nuit); color: var(--nuit-texte); }
.entete.sur-nuit .navigation-liens a { color: var(--nuit-doux); }
.entete.sur-nuit .navigation-liens a:hover { color: var(--nuit-texte); }
.entete.sur-nuit .logo { --logo-plein: var(--nuit-texte); --logo-calque1: var(--nuit-accent); --logo-calque2: var(--nuit-bleu); --logo-ligne: var(--nuit-accent); --logo-op1: 0.9; --logo-op2: 0.55; }
.entete.sur-nuit .bouton-principal { background: var(--nuit-texte); color: var(--nuit); }
.entete.sur-nuit .progression { background: var(--nuit-accent); }
.entete.sur-nuit.defile { border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-bouton { color: var(--nuit-texte); border-color: rgba(236, 238, 232, 0.24); }
.entete.sur-nuit .menu-panneau { background: var(--nuit); border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-panneau a { color: var(--nuit-texte); border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-panneau a .chiffres { color: #F29A87; }
/* Le voile translucide suppose color-mix(). Une déclaration qui contient var() n'est jamais
   rejetée à la lecture : sans ce test, un navigateur trop ancien rendrait l'en-tête
   transparent au lieu de garder le fond uni. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .entete { background: color-mix(in srgb, var(--fond) 80%, transparent); }
  .entete.sur-nuit { background: color-mix(in srgb, var(--nuit) 84%, transparent); }
}

/* ═══ Ouverture : le titre scanné ═════════════════════════════════════════════ */
.nuit { background: var(--nuit); color: var(--nuit-texte); }
/* L'ouverture remonte sous l'en-tête translucide : sans cela, en thème clair, l'en-tête
   nuit se poserait sur le fond clair de la page et virerait au gris. */
.ouverture {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * var(--entete) - 1px); padding-block: calc(var(--entete) + clamp(28px, 7vw, 104px)) clamp(56px, 7vw, 104px);
}
.ouverture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
/* Sous le curseur, les lignes du papier réglé s'éclairent : le scanner suit la main. */
.ouverture::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%), rgba(111, 168, 232, 0.55), transparent 70%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px); mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px);
}
.ouverture.eclaire::after { opacity: 1; }
.ouverture-contenu { display: grid; gap: clamp(24px, 3.4vw, 44px); }

.titre-scan {
  position: relative; font-size: var(--t-titre); font-weight: 750; letter-spacing: -0.045em; line-height: 0.98;
  /* --y déclaré ici aussi : sans @property, le titre au repos reste plein et net. */
  --ecart: 1; --y: 114%; margin-bottom: 0.2em;
}
.titre-scan .moins { color: var(--nuit-doux); }
/* Sous la ligne, le titre passe en contour et laisse voir ses deux calques, exactement
   comme le logo. Les copies sont créées par le script : sans lui, le titre reste plein. */
.titre-bas { position: absolute; inset: 0; pointer-events: none; clip-path: inset(var(--y) -30% -40% -30%); }
.titre-calque { position: absolute; inset: 0; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px currentColor; color: var(--nuit-texte); }
.titre-calque .moins { color: var(--nuit-doux); }
.titre-calque1 { color: var(--nuit-accent); opacity: 0.9; transform: translateY(calc(0.09em * var(--ecart))); }
.titre-calque2 { color: var(--nuit-bleu); opacity: 0.55; transform: translateY(calc(0.18em * var(--ecart))); }
.titre-calque1 .moins, .titre-calque2 .moins { color: inherit; }
.titre-calque1, .titre-calque2 { transition: transform 0.5s var(--courbe); }
/* La ligne est un calque de la hauteur du titre, déplacé par transformation : un
   pourcentage de translation vaut alors un pourcentage du titre, et la déplacer ne
   compte pas comme un saut de mise en page. Le trait est dessiné sur son bord haut. */
.titre-ligne { position: absolute; left: -10px; right: -10px; top: 0; height: 100%; transform: translateY(calc(var(--y) - 1px)); pointer-events: none; }
.titre-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent); box-shadow: 0 0 0 1px rgba(238, 122, 99, 0.12), 0 8px 24px rgba(238, 122, 99, 0.35); }
.titre-ligne::after {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 16px;
  background: linear-gradient(var(--nuit-accent), var(--nuit-accent)) left / 2px 100% no-repeat, linear-gradient(var(--nuit-accent), var(--nuit-accent)) right / 2px 100% no-repeat;
}
.js .titre-scan .titre-plein { display: block; clip-path: inset(-20% -30% calc(100% - var(--y)) -30%); }
.titre-scan.suit { transition: --y 0.45s var(--courbe); }
.titre-scan.survol { --ecart: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .js .titre-scan { animation: titre-lecture 1.7s var(--courbe-lecture) 0.35s backwards; }
}
@keyframes titre-lecture { from { --y: -6%; } }

.ouverture-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
.ouverture .chapeau { font-size: var(--t-l); line-height: 1.6; color: var(--nuit-doux); max-width: 36em; }
.ouverture .chapeau strong { color: var(--nuit-texte); font-weight: 600; }
.ouverture-actions { display: grid; gap: 18px; justify-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.assurances { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--nuit-doux); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances svg { width: 14px; height: 14px; color: var(--nuit-conforme); flex: none; }
@media (max-width: 1100px) { .ouverture-bas { grid-template-columns: minmax(0, 1fr); align-items: start; } }

@media (prefers-reduced-motion: no-preference) {
  .ouverture-contenu > .surtitre, .ouverture-bas > * { animation: montee 0.8s var(--courbe) backwards; }
  .ouverture-bas > :nth-child(1) { animation-delay: 0.5s; }
  .ouverture-bas > :nth-child(2) { animation-delay: 0.62s; }
}
/* Seul le déplacement est animé : le texte reste visible dès la première image. */
@keyframes montee { from { transform: translateY(14px); } to { transform: none; } }

/* ═══ Sections ════════════════════════════════════════════════════════════════ */
.section { padding-block: clamp(72px, 9vw, 120px); }
.section-alternee { background: var(--fond-2); border-block: 1px solid var(--filet); }
.section-tete { display: flex; flex-direction: column; gap: 18px; max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-tete h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.section-tete > p { font-size: var(--t-l); color: var(--texte-doux); max-width: 38em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-tete, .engagement, .reponse, .point-controle { animation: montee linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .section-tete .surtitre::before { animation: trait linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@keyframes trait { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }

/* ═══ Trajet d'un relevé ══════════════════════════════════════════════════════
   Colonne de gauche : les chapitres, que le lecteur fait défiler. Colonne de droite :
   une scène unique, accrochée, qui change d'état avec le chapitre lu. */
.trajet { --scene-document: 272px; --scene-sortie: 206px; --scene-hauteur: 600px; padding-top: clamp(40px, 6vw, 88px); }
.trajet-grille { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.chapitres { display: grid; gap: 40px; }
.chapitre { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 24px; border-left: 2px solid var(--filet); }
.chapitre::before {
  content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--accent);
  transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 0.2s linear;
}
.chapitre-numero { font-family: var(--police-mono); font-size: var(--t-s); color: var(--accent-texte); letter-spacing: 0.04em; }
.chapitre h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; transition: color 0.3s; }
.chapitre p { color: var(--texte-doux); }
.chapitre .constat-texte { color: var(--texte); }

.scene {
  position: relative; display: grid; grid-template-rows: auto var(--scene-document) var(--scene-sortie) auto; gap: 14px;
  padding: 16px; border-radius: 20px; border: 1px solid var(--nuit-filet); overflow: hidden; isolation: isolate;
  background-color: var(--nuit-surface); color: var(--nuit-texte); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
/* Le papier réglé est un calque à part : un fond uni reste lisible pour les outils qui
   mesurent les contrastes, qui ne savent pas lire un dégradé. */
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px); }
.scene-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-family: var(--police-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--nuit-doux); }
.scene-etapes span { display: grid; gap: 6px; cursor: pointer; transition: color 0.3s; }
.scene-etapes i { display: block; height: 2px; border-radius: 2px; background: rgba(236, 238, 232, 0.14); overflow: hidden; position: relative; }
.scene-etapes i::after { content: ""; position: absolute; inset: 0; background: var(--nuit-accent); transform-origin: left; transform: scaleX(var(--f, 0)); }
.scene-etapes .actif { color: var(--nuit-texte); }

.scene-document { position: relative; display: grid; min-height: 0; }
.scene-document > * { grid-area: 1 / 1; min-height: 0; }
.scene-depot {
  display: grid; place-items: center; align-content: center; gap: 14px; border: 1.5px dashed rgba(236, 238, 232, 0.24); border-radius: 12px;
  color: var(--nuit-doux); font-size: var(--t-s); transition: border-color 0.4s, background-color 0.4s, opacity 0.4s, visibility 0s 0.4s;
}
.scene-fichier {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 9px; background: var(--nuit-surface-haute);
  border: 1px solid var(--nuit-filet); font-family: var(--police-mono); font-size: 12px; color: var(--nuit-texte);
  transform: translateY(calc((var(--chute, 1) - 1) * 70px)); opacity: calc(0.2 + var(--chute, 1) * 0.8);
}
.scene-fichier b { font-weight: 600; color: #F29A87; font-size: 10px; letter-spacing: 0.06em; }
.scene-detecte { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.4s var(--courbe); }
.scene-detecte .puce-conforme { color: var(--nuit-conforme); background: rgba(92, 196, 142, 0.14); }
.scene.detecte .scene-depot { border-color: rgba(92, 196, 142, 0.5); background: rgba(92, 196, 142, 0.05); }
.scene.detecte .scene-detecte { opacity: 1; transform: none; }

.scene-papier {
  position: relative; display: grid; align-content: start; padding: 12px 14px; border-radius: 10px; overflow: hidden;
  background: var(--papier); color: var(--papier-encre); font-size: 11px; line-height: 1.3;
  transition: opacity 0.45s, transform 0.5s var(--courbe), visibility 0s;
}
.papier-entete { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--papier-filet); color: var(--papier-doux); font-size: 10.5px; }
.papier-banque { font-weight: 700; font-size: 12px; color: var(--papier-encre); }
.papier-solde { display: flex; justify-content: space-between; padding: 6px 0; color: var(--papier-doux); font-size: 10.5px; }
.papier-solde .chiffres { color: var(--papier-encre); font-weight: 600; border-radius: 3px; transition: box-shadow 0.4s, background-color 0.4s; }
.papier-ligne {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 58px 58px; gap: 6px; padding: 5px 0; border-top: 1px solid var(--papier-filet);
  transition: background-color 0.3s, opacity 0.5s, filter 0.5s, visibility 0s;
}
.papier-ligne > :nth-child(3), .papier-ligne > :nth-child(4) { text-align: right; }
/* Un libellé trop long s'estompe au lieu de finir en « … » : les points de suspension
   laissaient dépasser un bout du trait rouge de la référence masquée. */
.papier-libelle {
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
}
.papier-lignes .papier-ligne:last-child { border-bottom: 1px solid var(--papier-filet); }
.papier-libelle del, .papier-libelle ins { text-decoration: none; border-radius: 2px; transition: color 0.3s, background-size 0.35s var(--courbe), background-color 0.3s; }
/* Les références retirées sont barrées d'un trait rouge, celles qui changent de place surlignées. */
.papier-libelle del { background: linear-gradient(var(--papier-rature), var(--papier-rature)) no-repeat 0 58% / 0% 1.5px; }
.lu .papier-libelle del, .papier-libelle.lu del { background-size: 100% 1.5px; color: var(--papier-rature); }
.lu .papier-libelle ins { background-color: var(--papier-deplace); }
.papier-ligne.lu { background: var(--papier-lu); }
.scene-ligne {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(238, 122, 99, 0.15), 0 6px 18px rgba(238, 122, 99, 0.35); transform: translateY(var(--ly, 0px));
}
.scene-ligne::before, .scene-ligne::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--nuit-accent); }
.scene-ligne::before { left: 6px; }
.scene-ligne::after { right: 6px; }
.scene-efface {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--papier-doux); opacity: 0; transition: opacity 0.5s;
}
.efface { opacity: 0; filter: blur(3px); visibility: hidden; transition: opacity 0.5s, filter 0.5s, visibility 0s 0.5s !important; }

.scene-sortie { position: relative; display: grid; min-height: 0; }
.sortie {
  grid-area: 1 / 1; display: grid; align-content: center; gap: 10px; min-width: 0; min-height: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.35s, transform 0.5s var(--courbe), visibility 0s 0.5s;
}
.sortie-titre { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--nuit-texte); }
.sortie-titre .chiffres { font-weight: 400; font-size: 10.5px; color: var(--nuit-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sortie-note { font-size: 12px; color: var(--nuit-doux); }
.scene[data-chapitre="0"] .sortie-ressaisie, .scene[data-chapitre="1"] .sortie-formats, .scene[data-chapitre="2"] .sortie-import,
.scene[data-chapitre="3"] .sortie-controles, .scene[data-chapitre="4"] .sortie-export, .scene[data-chapitre="5"] .sortie-serveur {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Document : le dépôt au chapitre 1, le papier ailleurs. */
.scene:not([data-chapitre="1"]) .scene-depot { opacity: 0; visibility: hidden; }
.scene[data-chapitre="1"] .scene-papier { opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.98); transition: opacity 0.35s, transform 0.4s, visibility 0s 0.4s; }
.scene[data-chapitre="2"] .scene-ligne, .scene[data-chapitre="5"] .scene-ligne { opacity: 1; }
/* Sans script, la scène montre le relevé lu et contrôlé : toutes les références barrées. */
.scene[data-chapitre="3"] .papier-libelle del, .scene[data-chapitre="4"] .papier-libelle del, .scene[data-chapitre="5"] .papier-libelle del { background-size: 100% 1.5px; color: var(--papier-rature); }
.scene[data-chapitre="3"] .papier-libelle ins, .scene[data-chapitre="4"] .papier-libelle ins { background-color: var(--papier-deplace); }
.scene[data-chapitre="3"] .papier-solde .chiffres { box-shadow: 0 0 0 2px rgba(238, 122, 99, 0.55); background: var(--papier-lu); }
.scene[data-chapitre="4"] .scene-papier { opacity: 0.55; transform: scale(0.985); }

/* Chapitre 0 : la ressaisie à la main, caractère par caractère. */
.frappe { position: relative; padding: 10px 12px; border-radius: 9px; background: var(--nuit); border: 1px solid var(--nuit-filet); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.frappe-texte { display: inline-block; clip-path: inset(0 calc(100% - var(--n, 60) * 1ch) 0 0); }
.frappe-curseur { position: absolute; left: 12px; top: 9px; width: 1.5px; height: 1.3em; background: var(--nuit-accent); transform: translateX(calc(var(--n, 60) * 1ch)); }
@media (prefers-reduced-motion: no-preference) { .frappe-curseur { animation: clignote-curseur 1s steps(1) infinite; } }
@keyframes clignote-curseur { 50% { opacity: 0; } }

/* Chapitre 1 : les formats, le PDF s'allume quand le fichier arrive. */
.formats { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--police-mono); font-size: 11px; }
.formats span { padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(236, 238, 232, 0.2); color: var(--nuit-doux); transition: color 0.3s, border-color 0.3s, background-color 0.3s; }
.scene.detecte .format-pdf { color: var(--nuit-texte); border-color: var(--nuit-accent); background: rgba(238, 122, 99, 0.14); }

/* Chapitres 2 et 4 : les lignes d'import. */
.table-import { display: grid; border: 1px solid var(--nuit-filet); border-radius: 9px; overflow: hidden; font-family: var(--police-mono); font-size: 10.5px; }
.table-entete, .table-ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr) 62px; gap: 8px; padding: 5px 10px; font-variant-numeric: tabular-nums; }
.table-entete { color: var(--nuit-doux); font-size: 9.5px; letter-spacing: 0.08em; border-bottom: 1px solid var(--nuit-filet); }
.table-ligne { border-top: 1px solid var(--nuit-filet); transition: opacity 0.3s, transform 0.4s var(--courbe); }
.table-entete + .table-ligne { border-top: 0; }
.table-ligne > :nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-ligne > :last-child { text-align: right; }
.scene.lecture .sortie-import .table-ligne:not(.visible) { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .scene.lecture .sortie-import .table-ligne.visible { animation: calque-ligne 0.6s var(--courbe); }
}
/* Le geste du logo : deux calques décalés viennent se poser sur la ligne. */
@keyframes calque-ligne {
  from { text-shadow: 0 8px 0 rgba(238, 122, 99, 0.75), 0 16px 0 rgba(111, 168, 232, 0.45); }
  to { text-shadow: 0 0 0 rgba(238, 122, 99, 0), 0 0 0 rgba(111, 168, 232, 0); }
}

/* Chapitre 3 : le calcul et les coches. */
.calcul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 9px; background: var(--nuit); border: 1px solid var(--nuit-filet); font-size: 13px; }
.calcul-op { color: var(--nuit-doux); }
.calcul-resultat { font-weight: 600; color: var(--nuit-texte); }
.calcul-mouvements, .calcul-resultat { display: inline-block; min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums; }
.coches { display: grid; gap: 6px; font-size: 12.5px; }
.coches li { display: flex; align-items: center; gap: 9px; }
.coches .chiffres { margin-left: auto; font-size: 11px; color: var(--nuit-doux); }
.coches svg { width: 15px; height: 15px; flex: none; color: var(--nuit-conforme); transition: color 0.3s, transform 0.35s var(--courbe); }
.scene.calcul-en-cours .coches li:not(.ok) { color: var(--nuit-doux); }
.scene.calcul-en-cours .coches li:not(.ok) svg { color: rgba(236, 238, 232, 0.3); transform: scale(0.75); }
.verdict-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.verdict-ligne .puce-conforme { color: var(--nuit-conforme); background: rgba(92, 196, 142, 0.14); }
.verdict-ligne .chiffres { min-width: 11ch; text-align: right; }
.verdict-ligne .puce-attente { color: var(--nuit-doux); background: rgba(167, 175, 188, 0.14); }

/* Chapitre 4 : le clic sur « Copier », le presse-papiers de Pennylane. */
.export-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.export-boutons > span { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(236, 238, 232, 0.22); transition: background-color 0.2s, color 0.2s, transform 0.15s; }
.export-boutons > span:first-child { background: var(--nuit-texte); color: var(--nuit); border-color: transparent; }
.scene.appuye .export-copier { background: rgba(238, 122, 99, 0.16); border-color: var(--nuit-accent); transform: scale(0.97); }
.curseur { position: absolute; right: 10px; bottom: -12px; width: 18px; height: 18px; fill: var(--nuit-texte); stroke: var(--nuit); stroke-width: 1; opacity: 0; transform: translate(34px, 30px); transition: opacity 0.3s, transform 0.6s var(--courbe); pointer-events: none; }
.scene.vise .curseur { opacity: 1; transform: none; }
.presse-papiers { display: grid; gap: 6px; }
.presse-papiers .table-import { min-height: 64px; border-style: dashed; transition: border-color 0.3s; }
.presse-papiers .table-ligne { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.3s, transform 0.4s var(--courbe), visibility 0s 0.4s; }
.scene.copie .presse-papiers .table-import { border-style: solid; }
.scene.copie .presse-papiers .table-ligne { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scene.copie .presse-papiers .table-ligne:nth-child(2) { transition-delay: 0.08s; }
.scene.copie .presse-papiers .table-ligne:nth-child(3) { transition-delay: 0.16s; }
/* Les deux libellés occupent la même case : le bouton garde sa largeur quand il confirme la copie. */
.export-boutons > .export-copier { display: inline-grid; align-items: center; }
.export-copier > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.25s, transform 0.3s var(--courbe), visibility 0s; }
.export-copier > .copier-apres { color: var(--nuit-conforme); opacity: 0; visibility: hidden; transform: translateY(5px); transition-delay: 0s, 0s, 0.3s; }
.copier-apres svg { width: 13px; height: 13px; flex: none; }
.scene.copie .export-copier { background: rgba(92, 196, 142, 0.12); border-color: rgba(92, 196, 142, 0.55); }
.scene.copie .export-copier > .copier-avant { opacity: 0; visibility: hidden; transform: translateY(-5px); transition-delay: 0s, 0s, 0.3s; }
.scene.copie .export-copier > .copier-apres { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Chapitre 5 : le serveur n'a rien gardé. */
.sortie-serveur { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; gap: 10px; }
.serveur-bloc { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--nuit-filet); background: var(--nuit); }
.serveur-compte { font-size: 13px; color: var(--nuit-doux); }
.serveur-compte .chiffres { display: inline-block; font-size: 30px; font-weight: 600; color: var(--nuit-texte); margin-right: 6px; line-height: 1; transition: color 0.3s; }
.scene.oublie .serveur-compte .chiffres { color: var(--nuit-conforme); }
.serveur-fichier { font-size: 11px; color: var(--nuit-texte); padding: 7px 9px; border-radius: 7px; background: rgba(111, 168, 232, 0.12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene.oublie .scene-efface { opacity: 1; }

.scene-pied { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 11.5px; color: var(--nuit-doux); }
.scene-pied .etiquette-exemple { color: var(--nuit-texte); }

/* Grand écran : la scène reste accrochée pendant que les chapitres défilent. */
@media (min-width: 1024px) {
  .js .chapitre { min-height: 62vh; justify-content: center; }
  .js .chapitre:last-child { min-height: 72vh; }
  /* svh : la hauteur visible barres affichées (iPad). Un navigateur qui l'ignore garde vh. */
  .js .scene-cadre {
    position: sticky; top: calc(var(--entete) + max(12px, (100vh - var(--entete) - var(--scene-hauteur)) / 2));
    top: calc(var(--entete) + max(12px, (100svh - var(--entete) - var(--scene-hauteur)) / 2));
  }
  /* Sous le dernier chapitre, juste assez de marge pour que la scène reste accrochée
     jusqu'à ce que la fin du chapitre atteigne le repère de lecture, au milieu de l'écran.
     La scène ferme alors la section à elle seule, d'où la marge basse réduite. */
  .js .chapitres {
    padding-bottom: calc(var(--entete) + max(12px, (100vh - var(--entete) - var(--scene-hauteur)) / 2) + var(--scene-hauteur) - 50vh);
    padding-bottom: calc(var(--entete) + max(12px, (100svh - var(--entete) - var(--scene-hauteur)) / 2) + var(--scene-hauteur) - 50svh);
  }
  .js .trajet { padding-bottom: clamp(32px, 4vw, 56px); }
}
/* Portable ou fenêtre peu haute : un écran de 768 px n'en laisse que 650 à la page. La
   scène se resserre pour tenir entière sous l'en-tête. */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 700px) {
  .trajet { --scene-document: 222px; --scene-sortie: 188px; --scene-hauteur: 516px; }
  .scene { gap: 10px; padding: 14px; }
  .scene-papier { padding: 9px 12px; font-size: 10.5px; }
  .papier-entete { padding-bottom: 5px; }
  .papier-ligne { padding: 3.5px 0; }
  .papier-solde { padding: 4px 0; }
  .table-entete, .table-ligne { padding: 4px 10px; }
  .sortie { gap: 8px; }
  .export-boutons > span { min-height: 30px; }
  .serveur-compte .chiffres { font-size: 26px; }
}
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 620px) {
  .trajet { --scene-hauteur: 488px; }
  .scene { grid-template-rows: auto var(--scene-document) var(--scene-sortie); }
  .scene-pied { display: none; }
}
/* Téléphone et tablette : la scène se tient en haut de l'écran, les chapitres passent dessous. */
@media (max-width: 1023px) {
  .trajet { --scene-document: 214px; --scene-sortie: 170px; }
  /* En colonne flexible, et non en grille : une grille bornerait la scène accrochée à sa
     propre rangée, et elle se décrocherait dès le premier chapitre. */
  .trajet-grille { display: flex; flex-direction: column; gap: 24px; }
  .js .scene-cadre {
    order: -1; position: sticky; top: calc(var(--entete) + env(safe-area-inset-top, 0px)); z-index: 2;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 8px var(--gouttiere) 0; background: var(--fond);
  }
  .js .scene { max-width: 560px; margin-inline: auto; padding: 12px; gap: 10px; }
  .js .scene-pied { display: none; }
  .js .chapitre { min-height: 52vh; justify-content: center; }
  .js .chapitres { gap: 0; }
  .js .scene-cadre::after { content: ""; display: block; height: 18px; background: linear-gradient(var(--fond), transparent); }
  .scene-papier { padding: 9px 10px; font-size: 10px; }
  .papier-ligne { grid-template-columns: 32px minmax(0, 1fr) 50px 50px; padding: 3.5px 0; }
  .papier-entete, .papier-solde { font-size: 9.5px; }
  .papier-solde { padding: 4px 0; }
  .table-entete, .table-ligne { grid-template-columns: 66px minmax(0, 1fr) 54px; padding: 3.5px 8px; font-size: 9.5px; }
  .sortie { gap: 7px; }
  .calcul { font-size: 12px; padding: 8px 10px; }
  .coches { font-size: 11.5px; gap: 4px; }
  .frappe { font-size: 10px; }
}
/* Téléphone peu haut : Safari et Chrome prennent 110 à 180 px pour leurs barres. La scène
   se resserre pour laisser au texte du chapitre environ 200 px sous elle. */
@media (max-width: 1023px) and (min-height: 640px) and (max-height: 759px) {
  .trajet { --scene-document: 176px; --scene-sortie: 142px; }
  .js .scene { padding: 10px; gap: 8px; }
  .js .scene-cadre { padding-top: 6px; }
  .js .scene-cadre::after { height: 6px; }
  /* Les étapes ne gardent que leur barre : le numéro du chapitre, dessous, les nomme déjà. */
  .scene .scene-etapes { font-size: 0; }
  .scene .scene-etapes span { gap: 0; }
  .scene-papier { padding: 7px 9px; font-size: 9.5px; }
  .papier-entete { padding-bottom: 4px; font-size: 9px; }
  .papier-banque { font-size: 10.5px; }
  .papier-ligne { padding: 2px 0; }
  .papier-solde { padding: 3px 0; font-size: 9px; }
  .table-entete, .table-ligne { padding: 2.5px 8px; font-size: 9px; }
  .table-entete { font-size: 8.5px; }
  .sortie { gap: 4px; }
  .sortie-titre { font-size: 11px; }
  .calcul { padding: 5px 9px; font-size: 11px; }
  .coches { gap: 2px; font-size: 11px; line-height: 1.3; }
  .coches svg { width: 13px; height: 13px; }
  .verdict-ligne { font-size: 11px; }
  .export-boutons > span { min-height: 28px; font-size: 11.5px; padding: 0 10px; }
  .presse-papiers .table-import { min-height: 52px; }
  .serveur-bloc { padding: 9px; gap: 6px; }
  .serveur-compte .chiffres { font-size: 24px; }
  .frappe { padding: 8px 10px; }
  /* Le texte du chapitre passe dans une bande d'environ 200 px : il doit y tenir entier. */
  .js .chapitre { gap: 8px; }
  .js .chapitre h3 { font-size: 1.1rem; }
  .js .chapitre p:not(.constat-texte) { font-size: 0.94rem; line-height: 1.45; }
}
@media (max-width: 520px) {
  .scene-etapes { font-size: 9px; }
  .papier-ligne { grid-template-columns: 30px minmax(0, 1fr) 46px 46px; }
  .table-entete, .table-ligne { grid-template-columns: 62px minmax(0, 1fr) 50px; }
  .sortie-note { display: none; }
}

/* Très peu haut (téléphone à l'horizontale, iPhone SE sous Safari, petite fenêtre) : une
   scène accrochée ne laisserait plus de place au texte. Elle reprend sa place après les
   chapitres, dans l'état qu'elle montre sans script, et les chapitres se lisent comme un
   texte ordinaire. Le script lit « position » pour savoir s'il pilote la scène. */
@media (max-height: 559px), (max-width: 1023px) and (max-height: 639px) {
  .trajet { --scene-document: auto; --scene-sortie: auto; }
  .js .scene-cadre { position: static; order: 0; margin-inline: 0; padding: 0; background: none; }
  .js .scene-cadre::after { display: none; }
  .js .chapitre, .js .chapitre:last-child { min-height: 0; }
  .js .chapitres { gap: 40px; padding-bottom: 0; }
  .js .trajet { padding-bottom: clamp(72px, 9vw, 120px); }
  .js .scene-pied { display: flex; }
}

/* ═══ Constat, lu au défilement ═══════════════════════════════════════════════ */
.constat-texte { position: relative; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.constat-texte .lu, .constat-texte .ligne { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .constat-texte { animation: lecture linear both; animation-timeline: view(); animation-range: cover 22% cover 58%; }
    .js .constat-texte .base { color: var(--texte-faible); }
    .js .constat-texte .lu { display: block; position: absolute; inset: 0; color: var(--texte); clip-path: inset(0 0 calc(100% - var(--lecture)) 0); }
    /* La ligne couvre le paragraphe et n'en laisse voir qu'une bande, taquets compris :
       la déplacer par « top » compterait comme un saut de mise en page. */
    .js .constat-texte .ligne {
      display: block; position: absolute; inset: 0 -12px; pointer-events: none;
      background:
        linear-gradient(var(--accent), var(--accent)) 0 var(--lecture) / 100% 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 var(--lecture) / 2px 14px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% var(--lecture) / 2px 14px no-repeat;
      clip-path: inset(calc(var(--lecture) - 9px) 0 calc(100% - var(--lecture) - 9px) 0);
    }
  }
}
@keyframes lecture { from { --lecture: 0%; } to { --lecture: 100%; } }

/* ═══ En chiffres ═════════════════════════════════════════════════════════════ */
.preuves { border-block: 1px solid var(--filet); background: var(--fond); }
.preuves-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.preuves-liste li { display: flex; flex-direction: column; gap: 6px; padding: 30px 24px; border-left: 1px solid var(--filet); }
.preuves-liste li:first-child { border-left: 0; padding-left: 0; }
.preuves-valeur {
  font-family: var(--police-mono); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: text-shadow 0.45s var(--courbe);
  text-shadow: 0 0 0 rgba(238, 122, 99, 0), 0 0 0 rgba(111, 168, 232, 0);
}
/* Au survol, le chiffre se dédouble en calques, comme le logo. */
.preuves-liste li:hover .preuves-valeur { text-shadow: 0 0.14em 0 rgba(238, 122, 99, 0.55), 0 0.28em 0 rgba(111, 168, 232, 0.35); }
.preuves-libelle { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.45; max-width: 22em; }
@media (max-width: 860px) {
  .preuves-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuves-liste li { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); }
  .preuves-liste li:nth-child(-n + 2) { border-top: 0; }
  .preuves-liste li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--filet); }
}

/* ═══ Documents : onglets, règles, démonstration ══════════════════════════════ */
.demo { position: relative; min-width: 0; }
.demo-onglets { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-bottom: 20px; border-radius: 999px; border: 1px solid var(--filet); background: var(--fond); }
.demo-onglet {
  position: relative; z-index: 1; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 0;
  background: transparent; color: var(--texte-doux); font-size: var(--t-s); font-weight: 550; cursor: pointer; transition: color 0.3s;
}
.demo-onglet:hover { color: var(--texte); }
.demo-onglet[aria-selected="true"] { color: var(--fond); background: var(--texte); }
/* Avec le script, l'onglet choisi est marqué par une pastille qui glisse d'un document à l'autre. */
.demo-indicateur {
  position: absolute; z-index: 0; left: 0; top: 0; width: var(--l, 0px); height: var(--h, 0px); border-radius: 999px; background: var(--texte);
  transform: translate(var(--x, 0px), var(--yy, 0px)); transition: transform 0.5s var(--courbe), width 0.5s var(--courbe);
}
.glisse .demo-onglet[aria-selected="true"] { background: transparent; }
@media (max-width: 560px) { .onglet-long { display: none; } .demo-onglets { display: flex; } .demo-onglet { flex: 1; padding: 0 10px; } }

.demo-panneaux { display: grid; }
.demo-panneau { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 64px); align-items: start; visibility: hidden; }
.demo-panneau.actif, .demo-panneau.sortant { visibility: visible; }
.demo-regles { display: grid; gap: 18px; padding-top: 8px; }
.demo-regles h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.demo-regles ul { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.demo-regles li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--filet); color: var(--texte-doux); font-size: var(--t-s); }
.demo-regles li::before { content: ""; width: 12px; height: 2px; margin-top: 0.7em; background: var(--accent); }
@media (max-width: 900px) { .demo-panneau { grid-template-columns: minmax(0, 1fr); } }

.demo-cadre {
  display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--filet-fort); border-radius: 20px; overflow: hidden;
  background: var(--nuit-surface); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.releve { position: relative; padding: 16px 18px 14px; background: var(--papier); color: var(--papier-encre); font-size: 12px; line-height: 1.35; }
.releve-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--papier-filet); }
.releve-banque { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.releve-periode { color: var(--papier-doux); font-size: 11px; text-align: right; }
.releve-solde { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; color: var(--papier-doux); font-size: 11px; transition: background-color 0.35s; }
.releve-solde .chiffres { color: var(--papier-encre); font-weight: 600; }
.releve table, .import table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.releve th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--papier-doux); padding: 6px 0; border-bottom: 1px solid var(--papier-filet); }
.releve td { padding: 6px 0; border-bottom: 1px solid var(--papier-filet); vertical-align: top; transition: background-color 0.35s, box-shadow 0.25s; }
.releve td:first-child, .releve th:first-child { width: 46px; }
.releve td:nth-child(3), .releve td:nth-child(4), .releve th:nth-child(3), .releve th:nth-child(4) { width: 76px; text-align: right; }
.releve td:nth-child(2) { padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.releve tr.lu td, .releve .lu, .releve-solde.lu { background: var(--papier-lu); }
.releve .trois-colonnes td:nth-child(2), .releve .trois-colonnes th:nth-child(2) { width: 30%; text-align: left; }
.releve .trois-colonnes td:first-child, .releve .trois-colonnes th:first-child { width: auto; }
.releve .trois-colonnes td:nth-child(3), .releve .trois-colonnes th:nth-child(3) { width: 80px; text-align: right; }
.releve .trois-colonnes td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.releve .trois-colonnes td.chiffres:first-child { width: 46px; }
.releve-solde[data-l="total"] { border-top: 1px solid var(--papier-filet); margin-top: 2px; }
.ligne-lecture {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent);
  box-shadow: 0 0 0 1px rgba(238, 122, 99, 0.15), 0 6px 18px rgba(238, 122, 99, 0.35); opacity: 0; pointer-events: none;
}
.ligne-lecture::before, .ligne-lecture::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--nuit-accent); }
.ligne-lecture::before { left: 6px; }
.ligne-lecture::after { right: 6px; }

.import { display: flex; flex-direction: column; padding: 16px 18px; color: var(--nuit-texte); font-family: var(--police-mono); font-size: 11.5px; }
.import-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--nuit-filet); font-family: var(--police); }
.import-titre { font-weight: 600; font-size: 13px; }
.import-fichier { color: var(--nuit-doux); font-family: var(--police-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.import th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--nuit-doux); padding: 8px 0 6px; border-bottom: 1px solid var(--nuit-filet); }
.import td { padding: 6px 0; border-bottom: 1px solid var(--nuit-filet); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 0.25s, box-shadow 0.25s; }
.import td:first-child, .import th:first-child { width: 84px; }
.import td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.import td:last-child, .import th:last-child { width: 70px; text-align: right; }
.import tr.contrepartie td { background: rgba(232, 182, 92, 0.12); color: #F0CF8E; }
/* Survol : la ligne du document et sa copie dans l'import s'allument ensemble. */
.releve .lie td, .releve-solde.lie { background: rgba(47, 111, 222, 0.14); }
.releve .lie td:first-child { box-shadow: inset 2px 0 0 #2F6FDE; }
.import .lie td { background: rgba(111, 168, 232, 0.16); }
.import .lie td:first-child { box-shadow: inset 2px 0 0 var(--nuit-bleu); }
.import-controle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 16px; padding-top: 14px; }
.import-controle .puce { font-family: var(--police); justify-self: start; }
.import-controle .puce-conforme { color: var(--nuit-conforme); background: rgba(92, 196, 142, 0.14); }
.import-controle .puce-attente { color: var(--nuit-doux); background: rgba(167, 175, 188, 0.14); }
.controle-calcul, .controle-direct { grid-area: 1 / 2; justify-self: end; text-align: right; }
.controle-calcul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; color: var(--nuit-doux); font-size: 11px; }
.controle-ecart { color: var(--nuit-texte); font-weight: 600; }
.controle-direct { font-size: 12px; color: var(--nuit-doux); padding-top: 3px; }
.controle-direct .chiffres { display: inline-block; min-width: 9ch; text-align: right; color: var(--nuit-texte); font-weight: 600; }
@media (max-width: 560px) {
  .import-controle { grid-template-columns: minmax(0, 1fr); }
  .controle-calcul, .controle-direct { grid-area: 2 / 1; justify-self: start; text-align: left; justify-content: flex-start; }
  .releve td:first-child, .releve th:first-child { width: 38px; }
  .releve td:nth-child(3), .releve td:nth-child(4), .releve th:nth-child(3), .releve th:nth-child(4) { width: 58px; }
  .import td:first-child, .import th:first-child { width: 76px; }
}

.demo-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: var(--t-xs); color: var(--texte-doux); }
.demo-pied p { min-width: 0; }
.demo-pied .etiquette-exemple { color: var(--texte); }
.demo-pause {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--filet-fort); background: transparent; color: var(--texte); font-size: var(--t-xs); cursor: pointer;
}
.demo-pause:hover { border-color: var(--texte-doux); }
.demo-pause svg { width: 14px; height: 14px; }
.demo-pause .icone-lecture { display: none; }
.demo-pause[aria-pressed="true"] .icone-pause { display: none; }
.demo-pause[aria-pressed="true"] .icone-lecture { display: block; }
@media (prefers-reduced-motion: reduce) { .demo-pause { display: none; } }
@media (max-width: 640px) { .demo-pied { flex-wrap: wrap; } }

/* ═══ Contrôles : simulateur et rapport ═══════════════════════════════════════ */
.controles-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.rapport-colonne { display: grid; gap: 16px; }
.simulateur { display: grid; gap: 12px; padding: 0; border: 0; min-width: 0; }
.simulateur legend { padding: 0; margin-bottom: 12px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.simulateur-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: relative; }
.choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choix span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--filet-fort);
  font-size: var(--t-s); font-weight: 550; color: var(--texte-doux); transition: color 0.2s, background-color 0.25s, border-color 0.25s, transform 0.2s var(--courbe);
}
.choix:hover span { color: var(--texte); border-color: var(--texte-doux); }
.choix input:checked + span { background: var(--texte); color: var(--fond); border-color: transparent; }
.choix input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.choix input:active + span { transform: scale(0.97); }
.simulateur-effet { min-height: 1.6em; font-size: var(--t-s); color: var(--texte-doux); }
.simulateur-effet strong { color: var(--texte); font-weight: 600; }
html:not(.js) .simulateur { display: none; }

.rapport { border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre); overflow: hidden; transition: border-color 0.4s; }
.rapport[data-etat="ecart"] { border-color: var(--accent); }
.rapport[data-etat="attention"] { border-color: var(--vigilance); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rapport[data-etat="ecart"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--filet)); }
  .rapport[data-etat="attention"] { border-color: color-mix(in srgb, var(--vigilance) 45%, var(--filet)); }
}
.rapport-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.rapport-tete strong { font-size: var(--t-s); font-weight: 600; }
.rapport-resume { padding: 0 18px 14px; font-size: var(--t-s); color: var(--texte-doux); border-bottom: 1px solid var(--filet); }
.rapport-defile { overflow-x: auto; }
.rapport-tableau { width: 100%; min-width: 420px; border-collapse: collapse; table-layout: fixed; font-family: var(--police-mono); font-size: 11.5px; }
.rapport-tableau th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--texte-faible); padding: 10px 18px 6px; border-bottom: 1px solid var(--filet); }
.rapport-tableau td { padding: 7px 18px; border-bottom: 1px solid var(--filet); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 0.3s, color 0.3s; }
.rapport-tableau td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; padding-inline: 0 8px; }
.rapport-tableau th:nth-child(2) { padding-inline: 0; }
.rapport-tableau th:first-child, .rapport-tableau td:first-child { width: 104px; }
.rapport-tableau th:last-child, .rapport-tableau td:last-child { width: 96px; text-align: right; }
.rapport-tableau tr.modifiee td { background: var(--accent-fond); }
.rapport-tableau tr.modifiee td.fautif { color: var(--accent-texte); font-weight: 700; }
.rapport-tableau tr.doublon td { background: var(--vigilance-fond); }
.rapport-tableau tr.absente td { color: var(--texte-faible); font-style: italic; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--filet) 6px 7px); }
@media (prefers-reduced-motion: no-preference) {
  .rapport-tableau tr.eclat td { animation: eclat 0.9s var(--courbe); }
}
@keyframes eclat { 0% { box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--accent) 22%, transparent); } }
.rapport-blocs { display: grid; }
.rapport-bloc { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 18px; border-bottom: 1px solid var(--filet); font-size: var(--t-s); }
.bloc-valeur { font-size: 11.5px; color: var(--texte-doux); }
.bloc-detail { grid-column: 2 / -1; font-size: var(--t-xs); color: var(--texte-faible); line-height: 1.5; }
.statut {
  width: 18px; height: 18px; background: currentColor; transition: color 0.3s, transform 0.4s var(--courbe);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
[data-statut="ok"] .statut { color: var(--conforme); --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E"); }
[data-statut="ecart"] .statut { color: var(--accent-texte); --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E"); }
[data-statut="attention"] .statut { color: var(--vigilance); --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.8v3.8M8 11.2v.1'/%3E%3C/svg%3E"); }
.rapport-bloc[data-statut="ecart"] .bloc-valeur { color: var(--accent-texte); }
.rapport-bloc[data-statut="attention"] .bloc-valeur { color: var(--vigilance); }
@media (prefers-reduced-motion: no-preference) {
  .rapport-bloc.change .statut { animation: pop 0.45s var(--courbe); }
}
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } }
.rapport-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 14px 18px; background: var(--surface-haute); font-family: var(--police-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.rapport-pied strong { color: var(--conforme); font-weight: 600; transition: color 0.3s; }
.rapport[data-etat="ecart"] .rapport-pied strong { color: var(--accent-texte); }

.points-colonne { display: grid; gap: 16px; }
.points-titre { font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.points-controle { display: grid; border-top: 1px solid var(--filet); }
.point-controle { position: relative; display: grid; gap: 4px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--filet); }
.point-controle::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--filet-fort);
  transition: background-color 0.3s, transform 0.4s var(--courbe);
}
.point-controle h4 { font-size: var(--t-m); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; transition: color 0.3s; }
.point-controle p { font-size: var(--t-s); color: var(--texte-doux); }
.portee { justify-self: start; font-family: var(--police-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--texte-faible); }
/* Le contrôle qui a repéré l'erreur s'allume dans la liste. */
.point-controle.declenche::before { background: var(--accent); }
.point-controle.declenche h4 { color: var(--accent-texte); }
.point-controle.declenche h4::after { content: " · a repéré l'erreur"; font-family: var(--police-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.point-controle.signale::before { background: var(--vigilance); }
.point-controle.signale h4 { color: var(--vigilance); }
.point-controle.signale h4::after { content: " · à vérifier"; font-family: var(--police-mono); font-size: 11px; font-weight: 500; }
@media (max-width: 960px) { .controles-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .rapport-tableau { min-width: 0; }
  .rapport-tableau th:first-child, .rapport-tableau td:first-child { width: 82px; padding-inline: 12px 6px; }
  .rapport-tableau th:last-child, .rapport-tableau td:last-child { width: 76px; padding-inline: 6px 12px; }
  .rapport-tete, .rapport-resume, .rapport-bloc, .rapport-pied { padding-inline: 14px; }
}

/* ═══ Sécurité ════════════════════════════════════════════════════════════════ */
.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.engagement { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 26px 30px; background: var(--fond-2); overflow: hidden; }
.engagement > * { position: relative; }
.engagement svg { width: 26px; height: 26px; color: var(--accent); transition: transform 0.4s var(--courbe); }
.engagement h3 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; }
.engagement p { font-size: var(--t-s); color: var(--texte-doux); }
/* Sous le curseur, la carte s'éclaire à l'endroit visé. */
.projecteur::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--accent-fond), transparent 70%);
}
@media (hover: hover) {
  .projecteur:hover::before { opacity: 1; }
  .engagement:hover svg { transform: translateY(-3px); }
}
@media (max-width: 900px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .engagements { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Origine ═════════════════════════════════════════════════════════════════ */
#origine { padding-bottom: clamp(24px, 3vw, 40px); }
.origine { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.origine .section-tete { margin-bottom: 0; }
.origine-texte { display: grid; gap: 18px; font-size: var(--t-l); color: var(--texte-doux); max-width: 38em; }
.origine-texte p:first-child { color: var(--texte); }
.citation { margin: 6px 0 0; padding-left: 20px; border-left: 2px solid var(--accent); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--texte); line-height: 1.35; }
/* La fiche de règle : du papier réglé, et son calque décalé derrière elle. */
.fiche {
  position: relative; margin-top: 10px; padding: 18px 20px 20px; border-radius: 12px; background: var(--papier); color: var(--papier-encre);
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(47, 111, 222, 0.08) 29px 30px); background-position: 0 8px;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55); font-size: var(--t-s);
}
.fiche::before, .fiche::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; transition: transform 0.5s var(--courbe); }
.fiche::before { border: 1.5px solid var(--accent); opacity: 0.55; transform: translate(0, 9px); z-index: -1; }
.fiche::after { border: 1.5px solid var(--bleu); opacity: 0.35; transform: translate(0, 18px); z-index: -2; }
.fiche:hover::before { transform: translate(0, 13px); }
.fiche:hover::after { transform: translate(0, 26px); }
.fiche-titre { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.01em; }
.fiche-titre span { font-family: var(--police-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-rature); }
.fiche-lignes { display: grid; counter-reset: regle; }
.fiche-lignes li { counter-increment: regle; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 5px 0; line-height: 1.45; }
.fiche-lignes li::before { content: counter(regle, decimal-leading-zero); font-family: var(--police-mono); font-size: 11px; color: var(--papier-doux); padding-top: 1px; }
@media (max-width: 860px) { .origine { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Questions ═══════════════════════════════════════════════════════════════ */
.questions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); }
.questions .section-tete { margin-bottom: 0; }
.reponses { border-top: 1px solid var(--filet); }
.reponse { border-bottom: 1px solid var(--filet); interpolate-size: allow-keywords; }
.reponse summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s; }
.reponse summary::-webkit-details-marker { display: none; }
.reponse summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--texte-doux); border-bottom: 2px solid var(--texte-doux);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.35s var(--courbe);
}
.reponse[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.reponse summary:hover { color: var(--accent-texte); }
.reponse-corps { padding: 0 0 24px; color: var(--texte-doux); max-width: 40em; display: grid; gap: 10px; }
.reponse::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--courbe), content-visibility 0.4s allow-discrete; }
.reponse[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) { .reponse[open] .reponse-corps { animation: montee 0.5s var(--courbe); } }
.adresse { font-family: var(--police-mono); font-size: 0.8em; color: var(--texte); user-select: all; }
.copier {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-left: 4px; padding: 0 10px; border-radius: 8px; vertical-align: middle;
  border: 1px solid var(--filet-fort); background: transparent; color: var(--texte-doux); font-size: var(--t-xs); cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.copier:hover { color: var(--texte); border-color: var(--texte-doux); }
.copier.fait { color: var(--conforme); border-color: var(--conforme); }
@media (max-width: 860px) { .questions { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Bêta ════════════════════════════════════════════════════════════════════ */
/* La carte a un cadre visible : sur fond nuit, sans lui, son retrait passerait pour un décalage. */
.beta-carte {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px);
  padding: clamp(20px, 5vw, 64px); border-radius: 24px; border: 1px solid var(--nuit-filet); overflow: hidden; background-color: var(--nuit);
  grid-template-areas: "intro formulaire" "details formulaire"; grid-template-rows: auto 1fr; row-gap: 28px;
}
/* Sur téléphone, le formulaire vient juste après le titre : on s'inscrit sans chercher. */
.beta-intro { grid-area: intro; }
.formulaire { grid-area: formulaire; }
.beta-details { grid-area: details; display: grid; gap: 20px; align-content: start; }
.beta-carte::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(90% 70% at 0% 0%, rgba(238, 122, 99, 0.09), transparent 70%), repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
}
.beta-carte > * { position: relative; z-index: 1; }
.beta-carte h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.beta-intro { display: flex; flex-direction: column; gap: 20px; }
.beta-intro > p { color: var(--nuit-doux); font-size: var(--t-l); max-width: 30em; }
.beta-avantages { display: grid; gap: 10px; }
.beta-avantages li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--nuit-texte); }
.beta-avantages li::before { content: ""; width: 12px; height: 2px; margin-top: 0.8em; background: var(--nuit-accent); }
.beta-etapes { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--nuit-filet); }
.beta-etapes li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--nuit-filet); color: var(--nuit-doux); font-size: var(--t-s); }
.beta-etapes .chiffres { color: #F29A87; font-size: var(--t-xs); padding-top: 2px; }
.formulaire { position: relative; display: grid; gap: 18px; align-self: start; padding: clamp(18px, 3vw, 32px); border-radius: var(--rayon); background: var(--nuit-surface); border: 1px solid var(--nuit-filet); overflow: hidden; }
.formulaire-champs { display: grid; gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ label { font-size: var(--t-s); font-weight: 600; color: var(--nuit-texte); }
.champ .aide { font-size: var(--t-xs); color: var(--nuit-doux); font-weight: 400; }
.champ-saisie { position: relative; }
.champ input[type="email"], .champ input[type="text"], .champ select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(236, 238, 232, 0.18);
  background: var(--nuit); color: var(--nuit-texte); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.25s;
}
.champ-saisie input { padding-right: 44px; }
.champ-valide { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; color: var(--nuit-conforme); transform: translateY(-50%) scale(0.6); opacity: 0; transition: opacity 0.25s, transform 0.35s var(--courbe); pointer-events: none; }
.champ-saisie.valide .champ-valide { opacity: 1; transform: translateY(-50%); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A7AFBC' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.champ input::placeholder { color: #7D8696; }
.champ input:hover, .champ select:hover { border-color: rgba(236, 238, 232, 0.32); }
.champ input:focus-visible, .champ select:focus-visible { outline: none; border-color: var(--nuit-bleu); box-shadow: 0 0 0 3px rgba(111, 168, 232, 0.28); }
.champ [aria-invalid="true"] { border-color: #F29A87; }
.erreur { font-size: var(--t-xs); color: #F4A897; }
.erreur:empty { display: none; }
.deux-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.formulaire .bouton { width: 100%; }
.mention-envoi { font-size: var(--t-xs); line-height: 1.55; color: var(--nuit-doux); }
.mention-envoi a { color: var(--nuit-texte); }
.mention-maquette { font-size: var(--t-xs); color: var(--nuit-doux); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire:has(.merci:not([hidden])) .formulaire-champs { display: none; }
.merci { display: grid; gap: 14px; justify-items: start; align-content: center; }
.merci:focus { outline: none; }
.merci h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.merci p { color: var(--nuit-doux); }
.merci-coche { width: 48px; height: 48px; color: var(--nuit-conforme); }
.merci-coche circle, .merci-coche path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.merci-coche circle { stroke-opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .merci:not([hidden]) .merci-coche circle { stroke-dasharray: 132; animation: trace 0.7s var(--courbe) backwards; }
  .merci:not([hidden]) .merci-coche path { stroke-dasharray: 32; animation: trace 0.45s var(--courbe) 0.45s backwards; }
  .merci:not([hidden]) .merci-ligne { animation: calque-ligne 0.7s var(--courbe) 0.6s backwards; }
}
@keyframes trace { from { stroke-dashoffset: var(--longueur, 132); } }
.merci-coche path { --longueur: 32; }
.merci-ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--nuit); border: 1px solid var(--nuit-filet); font-family: var(--police-mono); font-size: 11.5px; color: var(--nuit-texte);
}
.merci-ligne > :nth-child(-n + 3) { font-size: 10px; letter-spacing: 0.08em; color: var(--nuit-doux); }
.merci-ligne > :nth-child(5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merci-statut { color: var(--nuit-conforme); }
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent); box-shadow: 0 6px 18px rgba(238, 122, 99, 0.4); pointer-events: none; opacity: 0; }
@media (max-width: 900px) { .beta-carte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "formulaire" "details"; grid-template-rows: auto; } }
@media (max-width: 480px) { .deux-champs { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Pied de page ════════════════════════════════════════════════════════════ */
.pied { border-top: 1px solid var(--filet); padding-block: 56px 40px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr)); gap: 40px; }
.pied-marque { display: grid; gap: 14px; justify-items: start; }
.pied-marque .logo { height: 44px; width: auto; }
.pied-marque p { color: var(--texte-doux); font-size: var(--t-s); max-width: 26em; }
.pied h2 { font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 14px; }
.pied ul { display: grid; gap: 10px; font-size: var(--t-s); }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.pied .adresse { font-size: 12.5px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filet); font-size: var(--t-xs); color: var(--texte-faible); }
.choix-theme { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--filet-fort); background: transparent; color: var(--texte-doux); font-size: var(--t-xs); cursor: pointer; }
.choix-theme:hover { color: var(--texte); border-color: var(--texte-doux); }
.choix-theme svg { width: 14px; height: 14px; transition: transform 0.6s var(--courbe); }
@media (max-width: 760px) { .pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Pages de texte (mentions, confidentialité, 404) ═════════════════════════ */
.page-texte { padding-block: clamp(56px, 8vw, 110px); }
.page-texte .article { display: grid; gap: 20px; max-width: 44rem; }
.page-texte h1 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.page-texte h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; }
.page-texte p, .page-texte li { color: var(--texte-doux); }
.page-texte ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.a-completer { font-family: var(--police-mono); font-size: 0.92em; color: var(--accent-texte); }
.page-texte code { font-family: var(--police-mono); font-size: 0.9em; padding: 0.08em 0.4em; border-radius: 5px; background: var(--fond-2); border: 1px solid var(--filet); color: var(--texte); }
.introuvable { display: grid; justify-items: start; gap: 24px; }
.introuvable .logo { width: min(460px, 100%); height: auto; --logo-trait: 2px; }

/* ═══ Mouvement réduit ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}