/* ═══════════════════════════════════════════════════════════════════════════════
   Kalq · page de l'outil Analyse
   Du relevé brut à l'import : aperçu, trajet, documents, contrôles, prix, origine.
   Les engagements de sécurité, les questions et la bêta sont dans commun.css : la page
   Impôt s'en sert aussi. Chargée après commun.css, dont elle reprend les jetons.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ Aperçu : du PDF brut aux écritures ══════════════════════════════════════
   Une feuille de registre posée en travers de la page, papier réglé et marge rouge, dans
   les deux thèmes. Une boucle y montre en onze secondes ce que le trajet détaille ensuite.
   Tout s'y joue en transformations et en découpes : aucun texte n'est jamais à demi
   transparent, et rien ne bouge dans la mise en page. Les styles ci-dessous sont l'état
   final, celui que montrent la page sans script et les animations réduites. */
.passage {
  --passage-duree: 11s;
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 84px);
  background: var(--papier); color: var(--papier-encre); border-block: 1px solid var(--papier-filet);
}
.passage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(47, 111, 222, 0.1) 31px 32px); }
.passage::after { content: ""; position: absolute; top: 0; bottom: 0; left: max(12px, calc((100% - var(--largeur)) / 2 - 28px)); z-index: -1; width: 2px; background: rgba(178, 58, 38, 0.4); pointer-events: none; }
.passage :focus-visible { outline-color: var(--papier-encre); }
.passage-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.passage-texte { display: grid; gap: 16px; justify-items: start; }
.passage-annonce { display: inline-flex; align-items: center; gap: 10px; font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-rature); }
.passage-point { width: 8px; height: 8px; border-radius: 50%; background: var(--papier-rature); }
.passage h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; color: var(--papier-encre); }
.passage-chapeau { color: var(--papier-doux); max-width: 34em; }
.passage-mentions { display: flex; flex-wrap: wrap; gap: 8px; }
.passage-mentions li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--papier-filet); background: rgba(255, 255, 255, 0.7); font-size: var(--t-xs); font-weight: 550; color: var(--papier-encre); }
.passage-lien { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-weight: 600; color: var(--papier-rature); text-decoration: none; }
.passage-lien svg { width: 16px; height: 16px; transition: transform 0.25s var(--courbe); }
.passage-lien:hover svg { transform: translateX(3px); }

.passage-cadre { position: relative; display: grid; gap: 14px; min-width: 0; }
.passage-scene {
  position: relative; display: grid; grid-template-columns: minmax(0, 180px) 56px minmax(0, 1fr); align-items: center; min-height: 300px;
  padding: 30px 24px 34px; border-radius: 20px; border: 1px solid var(--papier-filet); background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 60px -40px rgba(27, 42, 65, 0.45); overflow: hidden;
}
/* Le relevé brut : un scan grisé, de travers, avec son grain. */
.passage-pdf { position: relative; display: grid; justify-items: center; gap: 8px; }
.pdf-feuille {
  position: relative; display: grid; align-content: start; gap: 7px; width: 100%; max-width: 180px; aspect-ratio: 0.78; padding: 16px 13px;
  border-radius: 4px; background: #ECEAE3; box-shadow: 0 14px 30px -14px rgba(27, 42, 65, 0.45), 0 0 0 1px rgba(27, 42, 65, 0.08); overflow: hidden;
}
.pdf-feuille::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(27, 42, 65, 0.035) 0 1px, transparent 1px 3px); }
.pdf-onglet { position: absolute; top: 0; right: 0; padding: 3px 7px; border-bottom-left-radius: 6px; background: var(--papier-rature); color: #FFFFFF; font-family: var(--police-mono); font-size: 9px; font-weight: 600; }
.pdf-banque { width: 46%; height: 9px; border-radius: 2px; background: rgba(27, 42, 65, 0.55); }
.pdf-periode { width: 30%; height: 6px; margin-bottom: 6px; border-radius: 2px; background: rgba(27, 42, 65, 0.25); }
.pdf-ligne { display: grid; grid-template-columns: 18% minmax(0, 1fr) 22%; gap: 6px; align-items: center; padding: 4px 3px; border-radius: 3px; }
.pdf-ligne i, .pdf-ligne b, .pdf-total i, .pdf-total b { display: block; height: 5px; border-radius: 2px; background: rgba(27, 42, 65, 0.3); }
.pdf-ligne b, .pdf-total b { background: rgba(27, 42, 65, 0.5); }
.pdf-ligne:nth-of-type(4) i + i { width: 72%; }
.pdf-ligne:nth-of-type(5) i + i { width: 88%; }
.pdf-ligne:nth-of-type(6) i + i { width: 64%; }
.pdf-ligne:nth-of-type(7) i + i { width: 92%; }
.pdf-ligne:nth-of-type(8) i + i { width: 58%; }
/* Ce que l'analyse a repéré : les dates en bleu, les montants en rouge. */
.pdf-ligne i:first-child { color: rgba(47, 111, 222, 0.6); box-shadow: 0 0 0 2px currentColor; }
.pdf-ligne b { color: rgba(178, 58, 38, 0.65); box-shadow: 0 0 0 2px currentColor; }
.pdf-total { display: grid; grid-template-columns: minmax(0, 1fr) 22%; gap: 6px; margin-top: 6px; padding: 7px 3px 0; border-top: 1px solid rgba(27, 42, 65, 0.18); }
.pdf-lecture { position: absolute; left: -2px; right: -2px; top: 0; height: 100%; pointer-events: none; opacity: 0; }
.pdf-lecture::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgba(238, 122, 99, 0.18), 0 6px 16px rgba(238, 122, 99, 0.45); }
.pdf-nom { font-family: var(--police-mono); font-size: 11px; color: var(--papier-doux); }
.pdf-etiquette { position: absolute; padding: 2px 8px; border-radius: 999px; font-family: var(--police-mono); font-size: 10px; font-weight: 600; transform: scale(0); }
.pdf-etiquette-date { left: -6px; top: 30%; background: #DCE6F8; color: #1E4FA8; transform-origin: right center; }
.pdf-etiquette-montant { right: -10px; top: 44%; background: #F6DCD6; color: #8F2A19; transform-origin: left center; }
.pdf-etiquette-sens { right: -4px; top: 66%; background: #F6DCD6; color: #8F2A19; transform-origin: left center; }
/* Le passage du relevé aux écritures. */
.passage-flux { position: relative; height: 2px; margin-inline: 8px; background: repeating-linear-gradient(90deg, rgba(27, 42, 65, 0.28) 0 6px, transparent 6px 11px); }
.passage-flux span { position: absolute; left: 0; right: 0; top: -4px; height: 10px; }
.passage-flux span::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--papier-rature); transform: scale(0); }
/* Les écritures : la carte nuit de l'import, comme dans les démonstrations. */
.passage-ecritures {
  position: relative; display: grid; min-width: 0; padding: 14px 14px 22px; border-radius: 14px; background: var(--nuit); color: var(--nuit-texte);
  font-family: var(--police-mono); font-size: 10.5px; box-shadow: 0 24px 50px -24px rgba(13, 19, 28, 0.6);
}
.ecritures-tete { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; font-family: var(--police); font-size: 12px; font-weight: 600; }
.ecritures-tete span:last-child { font-family: var(--police-mono); font-size: 10.5px; font-weight: 400; color: var(--nuit-doux); }
.ecritures-colonnes, .ecritures-ligne { display: grid; grid-template-columns: 74px minmax(0, 1fr) 62px; gap: 8px; padding: 5px 2px; font-variant-numeric: tabular-nums; }
.ecritures-colonnes { border-bottom: 1px solid var(--nuit-filet); font-size: 9.5px; letter-spacing: 0.08em; color: var(--nuit-doux); }
.ecritures-ligne { border-bottom: 1px solid var(--nuit-filet); }
.ecritures-ligne span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ecritures-colonnes span:last-child, .ecritures-ligne span:last-child { text-align: right; }
.ecritures-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-top: 10px; color: var(--nuit-doux); }
.ecritures-verdict { display: inline-flex; align-items: center; gap: 6px; font-family: var(--police); font-size: 11px; font-weight: 600; color: var(--nuit-conforme); }
.ecritures-verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ecritures-pret {
  position: absolute; right: -8px; bottom: -16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: #DDF1E5; color: #145C38; font-family: var(--police); font-size: 12px; font-weight: 650; box-shadow: 0 12px 26px -12px rgba(20, 92, 56, 0.55);
  transform-origin: right center;
}
.ecritures-pret svg { width: 13px; height: 13px; flex: none; }
/* Les étapes, en toutes lettres, soulignées au fil de la boucle. */
.passage-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-family: var(--police-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--papier-doux); }
.passage-etapes li { position: relative; padding-bottom: 7px; border-bottom: 2px solid var(--papier-filet); }
.passage-etapes li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--papier-rature); transform-origin: left; }
.passage-pause {
  position: absolute; bottom: -4px; right: 0; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--papier-filet); background: #FFFFFF; color: var(--papier-encre); cursor: pointer; transition: border-color 0.2s;
}
.passage-pause:hover { border-color: var(--papier-doux); }
.passage-pause svg { width: 12px; height: 12px; }
.passage-pause .icone-lecture { display: none; }
.passage-pause[aria-pressed="true"] .icone-pause { display: none; }
.passage-pause[aria-pressed="true"] .icone-lecture { display: block; }
@media (prefers-reduced-motion: reduce) { .passage-pause { display: none; } }
@media (prefers-reduced-motion: no-preference) { .js .passage-etapes { margin-right: 44px; } }

@media (max-width: 1240px) { .passage-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .passage::after { display: none; }
  .passage-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 40px auto; justify-items: center; min-height: 0; padding: 26px 12px 34px; }
  .passage-pdf { width: min(100%, 150px); }
  .pdf-feuille { max-width: none; padding: 12px 10px; gap: 5px; }
  /* Le passage devient vertical : le même trajet, tourné d'un quart de tour. */
  .passage-flux { width: 40px; margin: 0; transform: rotate(90deg); }
  .passage-ecritures { width: 100%; padding-inline: 12px; font-size: 9.5px; }
  .ecritures-colonnes, .ecritures-ligne { grid-template-columns: 60px minmax(0, 1fr) 48px; gap: 6px; padding-inline: 0; }
  .ecritures-pret { right: -4px; }
  .passage-etapes { font-size: 9.5px; gap: 6px; }
}

/* La boucle : avec le script, quand les animations ne sont pas réduites. Toutes les pièces
   partagent la même durée ; les décalages suivent les lignes. Le script met la boucle en
   pause hors de l'écran, onglet caché, ou à la demande (--etat). */
@media (prefers-reduced-motion: no-preference) {
  .passage-point { animation: passage-pouls 2s ease-out infinite; }
  /* :where() garde une spécificité basse, pour que les courbes propres à chaque pièce
     l'emportent ; les pseudo-éléments n'y sont pas admis, d'où les deux derniers sélecteurs. */
  .js .passage-cadre :where(.passage-pdf, .pdf-feuille, .pdf-lecture, .pdf-ligne, .pdf-ligne i:first-child, .pdf-ligne b, .pdf-etiquette, .passage-flux span, .ecritures-ligne, .ecritures-pied, .ecritures-pret, .passage-ecritures),
  .js .passage-flux span::before, .js .passage-etapes li::after {
    animation-duration: var(--passage-duree); animation-iteration-count: infinite; animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-play-state: var(--etat, paused);
  }
  .js .passage-pdf { animation-name: passage-depot; }
  .js .pdf-feuille { animation-name: passage-redresse; }
  .js .pdf-lecture { animation-name: passage-scan; animation-timing-function: linear; }
  .js .pdf-ligne { animation-name: passage-lu; }
  .js .pdf-ligne i:first-child, .js .pdf-ligne b { animation-name: passage-repere; }
  .js .pdf-etiquette { animation-name: passage-etiquette; }
  .js .passage-flux span { animation-name: passage-course; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  .js .passage-flux span::before { animation-name: passage-point-flux; }
  .js .ecritures-ligne { animation-name: passage-ligne; }
  .js .ecritures-pied { animation-name: passage-pied; }
  .js .ecritures-pret { animation-name: passage-pret; }
  .js .passage-ecritures { animation-name: passage-carte; }
  .js .passage-etapes li:nth-child(1)::after { animation-name: passage-etape-1; }
  .js .passage-etapes li:nth-child(2)::after { animation-name: passage-etape-2; }
  .js .passage-etapes li:nth-child(3)::after { animation-name: passage-etape-3; }
  .js .passage-etapes li:nth-child(4)::after { animation-name: passage-etape-4; }
  /* Chaque ligne a son tour : lue sur le relevé, puis posée dans les écritures. */
  .js .pdf-ligne:nth-of-type(5), .js .pdf-ligne:nth-of-type(5) :is(i, b), .js .ecritures-ligne:nth-of-type(4) { animation-delay: 0.36s; }
  .js .pdf-ligne:nth-of-type(6), .js .pdf-ligne:nth-of-type(6) :is(i, b), .js .ecritures-ligne:nth-of-type(5) { animation-delay: 0.72s; }
  .js .pdf-ligne:nth-of-type(7), .js .pdf-ligne:nth-of-type(7) :is(i, b), .js .ecritures-ligne:nth-of-type(6) { animation-delay: 1.08s; }
  .js .pdf-ligne:nth-of-type(8), .js .pdf-ligne:nth-of-type(8) :is(i, b), .js .ecritures-ligne:nth-of-type(7) { animation-delay: 1.44s; }
  .js .pdf-etiquette-montant { animation-delay: 0.25s; }
  .js .pdf-etiquette-sens { animation-delay: 0.5s; }
  .js .passage-flux span:nth-child(2), .js .passage-flux span:nth-child(2)::before { animation-delay: 0.45s; }
  .js .passage-flux span:nth-child(3), .js .passage-flux span:nth-child(3)::before { animation-delay: 0.9s; }
}
@keyframes passage-pouls { 0% { box-shadow: 0 0 0 0 rgba(178, 58, 38, 0.45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(178, 58, 38, 0); } }
/* Dépôt (0-9 %), lecture (9-32 %), analyse (32-46 %), écritures (46-78 %), prêt (78-84 %),
   arrêt sur le résultat, puis la feuille s'en va et tout se range (93-100 %). */
@keyframes passage-depot { 0% { transform: translateY(-135%) rotate(-7deg); } 7% { transform: translateY(3%) rotate(0); } 9%, 93% { transform: none; } 99%, 100% { transform: translateY(140%) rotate(5deg); } }
@keyframes passage-redresse { 0%, 32% { transform: rotate(-3deg); } 38%, 100% { transform: none; } }
@keyframes passage-scan { 0%, 9% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 31% { transform: translateY(100%); opacity: 1; } 33%, 100% { transform: translateY(100%); opacity: 0; } }
@keyframes passage-lu { 0%, 13% { background-color: transparent; } 15%, 31% { background-color: var(--papier-lu); } 37%, 100% { background-color: transparent; } }
@keyframes passage-repere { 0%, 35% { box-shadow: 0 0 0 0 transparent; } 41%, 92% { box-shadow: 0 0 0 2px currentColor; } 96%, 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes passage-etiquette { 0%, 37% { transform: scale(0); } 40% { transform: scale(1.12); } 42%, 90% { transform: scale(1); } 93%, 100% { transform: scale(0); } }
@keyframes passage-course { 0%, 47% { transform: translateX(0); } 60%, 100% { transform: translateX(calc(100% - 10px)); } }
@keyframes passage-point-flux { 0%, 46% { transform: scale(0); } 48%, 59% { transform: scale(1); } 61%, 100% { transform: scale(0); } }
@keyframes passage-ligne {
  0%, 49% { clip-path: inset(0 100% 0 0); text-shadow: 0 4px 0 rgba(238, 122, 99, 0.75), 0 8px 0 rgba(111, 168, 232, 0.45); }
  53% { clip-path: inset(0 0 0 0); text-shadow: 0 4px 0 rgba(238, 122, 99, 0.75), 0 8px 0 rgba(111, 168, 232, 0.45); }
  58%, 93% { clip-path: inset(0 0 0 0); text-shadow: 0 0 0 rgba(238, 122, 99, 0), 0 0 0 rgba(111, 168, 232, 0); }
  96%, 100% { clip-path: inset(0 100% 0 0); text-shadow: none; }
}
@keyframes passage-pied { 0%, 71% { clip-path: inset(0 100% 0 0); } 75%, 93% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes passage-pret { 0%, 79% { transform: scale(0); } 82% { transform: scale(1.08); } 84%, 93% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes passage-carte { 0%, 79% { transform: none; } 82%, 93% { transform: translateY(-4px); } 96%, 100% { transform: none; } }
@keyframes passage-etape-1 { 0% { transform: scaleX(0); } 9%, 93% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes passage-etape-2 { 0%, 9% { transform: scaleX(0); } 32%, 93% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes passage-etape-3 { 0%, 32% { transform: scaleX(0); } 46%, 93% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes passage-etape-4 { 0%, 46% { transform: scaleX(0); } 84%, 93% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }

/* ═══ 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); }
/* Le bouton pause, dans le coin : la rangée des étapes lui laisse sa place. */
.scene .scene-etapes { padding-right: 38px; }
.scene-pause {
  position: absolute; top: 11px; right: 12px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; border: 1px solid var(--nuit-filet); background: var(--nuit-surface-haute); color: var(--nuit-texte); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.scene-pause:hover { border-color: rgba(236, 238, 232, 0.45); }
.scene-pause svg { width: 12px; height: 12px; }
.scene-pause .icone-lecture { display: none; }
.scene-pause[aria-pressed="true"] .icone-pause { display: none; }
.scene-pause[aria-pressed="true"] .icone-lecture { display: block; }
@media (prefers-reduced-motion: reduce) { .scene-pause { display: none; } }

.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); }
}

/* 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); }

/* 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; padding-right: 30px; }
  .scene .scene-etapes span { gap: 0; }
  .scene-pause { top: 3px; right: 3px; width: 24px; height: 24px; }
  .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; }
  .js .chapitre .constat-texte { font-size: 1.12rem; line-height: 1.3; }
}
@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 .scene-pause { 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%; } }

/* ═══ 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; }
  /* Cinq onglets tiennent sur une ligne : libellés courts, largeur selon le mot. */
  .demo-onglets { display: flex; flex-wrap: nowrap; gap: 2px; }
  .demo-onglet { flex: 1 1 auto; padding: 0 6px; white-space: nowrap; }
}

.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; align-content: 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: flex-end; gap: 16px; margin-top: 16px; font-size: var(--t-xs); color: var(--texte-doux); }
.demo-pied p { min-width: 0; }
/* La pause de la démo : un petit bouton rond, sans texte visible, comme celui du trajet.
   Discret, mais présent : la démo tourne seule, elle doit pouvoir s'arrêter. */
.demo-pause {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filet-fort); background: var(--fond); color: var(--texte-doux); cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.demo-pause:hover { border-color: var(--texte-doux); color: var(--texte); }
.demo-pause svg { width: 12px; height: 12px; }
.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; } }

/* ═══ Vers votre logiciel comptable ═════════════════════════════════════════════
   Ce qui existe porte la ligne de lecture et un bord plein ; ce qui se prépare, un bord
   pointillé. Un coup d'œil suffit à distinguer l'un de l'autre. */
.logiciels { display: grid; gap: 22px; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--filet); }
.logiciels-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.logiciels-tete h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.logiciels-tete p { color: var(--texte-doux); max-width: 34em; }
.logiciels-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logiciel {
  position: relative; display: grid; align-content: start; justify-items: start; gap: 10px; min-width: 0;
  padding: 22px 22px 24px; border-radius: var(--rayon); background: var(--fond); border: 1px dashed var(--filet-fort);
}
.logiciel h4 { font-size: var(--t-l); font-weight: 650; letter-spacing: -0.015em; }
.logiciel p { font-size: var(--t-s); color: var(--texte-doux); }
.logiciel-disponible { border-style: solid; border-color: var(--filet); }
.logiciel-disponible::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
@media (max-width: 860px) { .logiciels-liste { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Contrôles : simulateur et rapport ═══════════════════════════════════════ */
/* Le simulateur et la liste partagent la colonne de gauche, le rapport tient celle de droite :
   un clic se lit des deux côtés à la fois. Sur téléphone, le rapport suit directement les choix. */
.controles-grille {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 36px clamp(36px, 5vw, 72px); align-items: start;
  grid-template-areas: "sim rapport" "liste rapport";
}
.simulateur { grid-area: sim; 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 { grid-area: 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 { grid-area: liste; display: grid; gap: 14px; }
.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; padding: 10px 0 10px 16px; border-bottom: 1px solid var(--filet); }
.point-controle::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; 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; }
/* 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); grid-template-rows: none; grid-template-areas: "sim" "rapport" "liste"; } }
@media (max-width: 560px) {
  .rapport-tableau { min-width: 0; }
  .rapport-tableau th:first-child, .rapport-tableau td:first-child { width: 90px; padding-inline: 12px 8px; }
  .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; }
}

/* Mesures réelles : les chiffres clés en petit, avec leur portée écrite dessous. */
.mesures { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--filet); }
.mesures-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mesures-liste li { display: grid; align-content: start; gap: 8px; padding: 6px 24px; border-left: 1px solid var(--filet); }
.mesures-liste li:first-child { padding-left: 0; border-left: 0; }
.mesures-valeur {
  font-family: var(--police-mono); font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); 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);
}
.mesures-liste li:hover .mesures-valeur { text-shadow: 0 0.14em 0 rgba(238, 122, 99, 0.55), 0 0.28em 0 rgba(111, 168, 232, 0.35); }
.mesures-liste p { font-size: var(--t-s); line-height: 1.5; color: var(--texte-doux); max-width: 30em; }
.mesures-note { font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--texte-faible); }
@media (max-width: 860px) {
  .mesures-liste { grid-template-columns: minmax(0, 1fr); }
  .mesures-liste li { grid-template-columns: 5em minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--filet); }
  .mesures-liste li:first-child { padding-top: 4px; border-top: 0; }
}

/* ═══ Prix ════════════════════════════════════════════════════════════════════ */
/* Tarif bêta et tarif public sont lus côte à côte, à la même taille : le public est annoncé
   d'emblée, jamais barré. Seul le trait rouge distingue la bêta. */
/* Mensuel ou annuel : les deux versions de chaque tarif occupent la même case, la carte ne
   change pas de hauteur. Sans script, seule la version mensuelle reste, avec le prix annuel
   en dessous. */
.prix-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.places { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-s); color: var(--texte-doux); }
.places-point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.places strong { font-size: var(--t-m); font-weight: 600; color: var(--texte); }
.facturation { display: inline-flex; gap: 4px; margin: 0; padding: 4px; min-width: 0; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--surface); }
.facturation-choix { position: relative; }
.facturation-choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.facturation-choix > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: var(--t-s); font-weight: 550; color: var(--texte-doux); transition: color 0.2s, background-color 0.25s;
}
.facturation-choix:hover > span { color: var(--texte); }
.facturation-choix input:checked + span { background: var(--texte); color: var(--fond); }
.facturation-choix input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.facturation-offert, .tarif-economie { padding: 2px 8px; border-radius: 999px; background: var(--conforme-fond); color: var(--conforme); font-family: var(--police-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.facturation-choix input:checked + span .facturation-offert { background: var(--conforme); color: var(--fond); }
html:not(.js) .facturation, html:not(.js) .tarif-annuel { display: none; }

.paliers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.palier { display: grid; align-content: start; gap: 6px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre); }
.palier-rang { font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.palier h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.palier-volume { font-size: var(--t-s); color: var(--texte-doux); }
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--filet); }
.tarif { position: relative; display: grid; align-content: start; gap: 8px; padding-left: 14px; }
.tarif::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: var(--filet-fort); }
.tarif-beta::before { background: var(--accent); }
.tarif dt { font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.tarif-beta dt { color: var(--accent-texte); }
.tarif dd {
  grid-row: 2; grid-column: 1; display: grid; align-content: start; justify-items: start; gap: 4px; margin: 0;
  transition: opacity 0.3s, transform 0.35s var(--courbe), visibility 0.3s;
}
.tarif-annuel { visibility: hidden; opacity: 0; transform: translateY(6px); }
.paliers[data-facturation="annuelle"] .tarif-annuel { visibility: visible; opacity: 1; transform: none; }
.paliers[data-facturation="annuelle"] .tarif-mensuel { visibility: hidden; opacity: 0; transform: translateY(-6px); }
.tarif-economie { margin-top: 4px; }
.tarif-mois { font-size: var(--t-s); color: var(--texte-doux); }
.tarif-mois strong {
  display: block; font-family: var(--police-mono); font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--texte);
  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);
}
.palier:hover .tarif-mois strong { text-shadow: 0 0.14em 0 rgba(238, 122, 99, 0.55), 0 0.28em 0 rgba(111, 168, 232, 0.35); }
.tarif-an { font-size: var(--t-xs); color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.prix-regles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); }
.prix-regles li { padding: 14px 0; border-top: 1px solid var(--filet); font-size: var(--t-s); line-height: 1.55; color: var(--texte-doux); }
.prix-regles strong { color: var(--texte); font-weight: 600; }
.prix-note { margin-top: 18px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--texte-faible); }
@media (max-width: 860px) {
  .paliers, .prix-regles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .tarifs { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ Origine ═════════════════════════════════════════════════════════════════ */
.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); } }