/* ==================================================================
   Mozu — l'accueil, un seul récit au défilement
   ------------------------------------------------------------------
   La charte, telle quelle : papier chaud, encre presque noire, filets
   d'un pixel, Spectral pour les titres et les chiffres, IBM Plex Mono
   pour le reste, l'or sous les 5 %, jamais de rouge.

   Deux lectures de la même page :
   - html.cinema : une section épinglée, la scène WebGL plein écran en
     fond, les tableaux HTML posés dessus et animés sur la même timeline ;
   - sinon (sans JavaScript, sans WebGL, mouvement réduit) : les tableaux
     se lisent l'un après l'autre, comme une page ordinaire.

   Les couleurs vivent dans des variables : le récit passe du papier à
   l'encre, et le script les fait glisser avec la progression.
   ================================================================== */

@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/spectral-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('polices/spectral-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('polices/spectral-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('polices/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --encre: #14120f;
  --encre-800: #35312a;
  --encre-600: #6b6555;
  --encre-500: #8b8473;
  --encre-300: #cdc7b6;
  --encre-100: #ebe6da;
  --papier: #f7f2ea;
  --papier-haut: #fdfaf3;
  --papier-creux: #efe9dd;
  --or: #9a7b3f;
  --or-600: #836635;

  /* Ce que le récit fait glisser du papier vers l'encre. */
  --fond: #f7f2ea;
  --texte: #14120f;
  --texte-doux: #6b6555;
  --texte-pale: #8b8473;
  --texte-corps: #35312a;
  --filet: #cdc7b6;
  --carte: #fdfaf3;
  --carte-filet: #cdc7b6;
  --carte-creux: #efe9dd;

  --serif: 'Spectral', ui-serif, 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --marge: clamp(20px, 5vw, 72px);
  --colonne: 1240px;
  --entete-h: 72px;
  --retrait-texte: clamp(20px, 11vw, 200px);
}

/* --- Socle ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--texte); color: var(--fond); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.acces { position: absolute; left: var(--marge); top: -60px; padding: 8px 12px; background: var(--encre); color: var(--papier); z-index: 100; }
.acces:focus { top: 8px; }

.display { font-family: var(--serif); font-weight: 400; line-height: 1.1; }
.label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-doux); }
.label-or { color: var(--or); }
.chapeau { font-size: 17px; line-height: 1.6; color: var(--texte-doux); }

.titre-geant { font-size: clamp(48px, 7.4vw, 120px); line-height: 0.95; letter-spacing: -0.025em; }
.titre-grand { font-size: clamp(40px, 5vw, 76px); line-height: 0.99; letter-spacing: -0.02em; }
.titre-moyen { font-size: clamp(32px, 3.5vw, 54px); line-height: 1.06; letter-spacing: -0.015em; }

.points li { position: relative; padding-left: 20px; margin-top: 8px; }
.points li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: currentColor; opacity: 0.6; }

.lien { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.lien:hover { border-bottom-color: currentColor; }
.lien-texte { text-decoration: underline; text-underline-offset: 3px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px;
  border: 1px solid var(--texte); border-radius: 2px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte); background: transparent; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bouton:hover { background: var(--texte); color: var(--fond); }
.bouton-or { background: var(--or); border-color: var(--or); color: var(--papier); }
.bouton-or:hover { background: var(--or-600); border-color: var(--or-600); color: var(--papier); }
.bouton-large { width: 100%; margin-top: 24px; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--texte); outline-offset: 3px; }

/* Le symbole : géométrie fixe, jamais étiré. */
.soroban { aspect-ratio: 1; }
.soroban .tige { fill: currentColor; opacity: 0.28; }
.soroban .barre, .soroban .perle { fill: currentColor; }
.soroban .perle-or { fill: var(--or); }

/* --- En-tête ------------------------------------------------------ */

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--entete-h);
  padding: 0 var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  color: var(--texte);
}
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup .soroban { width: 28px; }
.lockup-nom { font-family: var(--serif); font-size: 21px; letter-spacing: 0.14em; line-height: 1; padding-top: 2px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav > a:not(.bouton) {
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte-doux); white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav > a:not(.bouton):hover, .nav > a.est-courant { color: var(--texte); border-bottom-color: currentColor; }
.nav .bouton { height: 38px; padding: 0 16px; }

/* --- Pied --------------------------------------------------------- */

.pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 40px var(--marge);
  border-top: 1px solid var(--filet);
}
.pied .lockup .soroban { width: 22px; }
.pied .lockup-nom { font-size: 17px; }
.pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* --- Les cartes : des fragments de l'application -------------------- */

.carte {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--carte-filet);
  border-radius: 3px;
  box-shadow: 0 28px 60px -32px rgb(20 18 15 / 0.45), 0 2px 8px -4px rgb(20 18 15 / 0.12);
  color: var(--texte);
  font-size: 13px; line-height: 1.55;
}


.carte-recherche { width: 420px; padding: 14px; }
.recherche {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1px solid var(--texte); border-radius: 2px;
  background: var(--carte);
  font-size: 14px;
}
.recherche svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.recherche-saisie:empty { display: none; }
.curseur { width: 1px; height: 18px; background: var(--texte); animation: clignote 1s steps(2, start) infinite; }
.recherche-saisie:not(:empty) ~ .recherche-invite { display: none; }
.recherche-invite { color: var(--texte-pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.recherche-touche { margin-left: auto; font-size: 11px; color: var(--texte-pale); border: 1px solid var(--carte-filet); border-radius: 2px; padding: 1px 6px; }
.recherche-legende { margin-top: 12px; font-size: 12px; color: var(--texte-doux); }
.recherche-legende .display { font-size: 17px; color: var(--texte); display: block; margin-bottom: 2px; }
@keyframes clignote { to { visibility: hidden; } }

.carte-seance { width: 400px; padding: 20px 22px 18px; }
.seance-patient { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seance-patient .display { font-size: 24px; }
.onglets { display: flex; gap: 20px; margin: 12px -22px 0; padding: 0 22px; border-bottom: 1px solid var(--carte-filet); }
.onglets span { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-pale); padding: 10px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets .courant { color: var(--texte); border-bottom-color: var(--or); }
.seance-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 8px; border-bottom: 1px solid var(--carte-filet); }
.seance-tete .display { font-size: 17px; }
.rubrique { padding: 10px 0 0; }
.rubrique + .rubrique { margin-top: 2px; border-top: 1px solid var(--carte-creux); }
.rubrique p { margin-top: 2px; color: var(--texte-doux); }
.eva { height: 4px; background: var(--carte-creux); margin: 10px 0 8px; }
.eva span { display: block; width: 40%; height: 100%; background: var(--texte); transform-origin: left; }
.eva-note { font-size: 22px; }
.eva-note small { font-family: var(--mono); font-size: 11px; color: var(--texte-pale); margin-left: 8px; }

.carte-facture { width: 440px; padding: 30px 32px 28px; background: #fff; color: #111; border-color: var(--encre-300); }
.carte-facture .label { color: #6b6555; }
.facture-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--encre-300); }
.facture-tete .display { font-size: 19px; display: block; }
.facture-numero { font-size: 17px !important; white-space: nowrap; }
.facture-ligne { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; }
.facture-ligne .display { font-size: 15px; white-space: nowrap; }
.facture-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--encre-300); }
.facture-total .display { font-size: 30px; }
.tampon {
  position: absolute; right: 150px; bottom: 30px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid #14120f; border-radius: 2px;
  transform: rotate(-6deg);
}

.carte-releve { width: 300px; padding: 18px 20px; }
.releve-mois { display: block; font-size: 24px; margin-top: 4px; }
.releve-synchro { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texte-doux); margin-top: 6px; }
.releve-synchro i { width: 6px; height: 6px; border-radius: 50%; background: var(--texte); }
.releve-totaux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--carte-filet); }
.releve-totaux .display { display: block; font-size: 19px; margin-top: 2px; }

.carte-operation {
  width: 440px; padding: 12px 16px;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
}
.op-date { font-size: 16px; color: var(--texte-pale); }
.op-libelle { min-width: 0; }
.op-libelle b { display: block; font-weight: 400; }
.op-libelle small { display: block; font-size: 10px; color: var(--texte-pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-categorie { font-size: 10.5px; padding: 3px 8px; border: 1px solid var(--carte-filet); border-radius: 2px; color: var(--texte-doux); white-space: nowrap; transition: border-color 0.4s var(--ease), color 0.4s var(--ease); }
.op-categorie em { font-style: normal; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); margin-right: 6px; }
.op-montant { font-size: 17px; white-space: nowrap; }
.operation-suggeree .op-categorie { border-color: var(--or); color: var(--or-600); }
.operation-suggeree.est-rangee .op-categorie { border-color: var(--carte-filet); color: var(--texte-doux); }
.operation-suggeree.est-rangee em { display: none; }

/* Le tableau de bord, comme dans l'application : deux indicateurs, l'un à
   l'encre, l'autre sable, puis le chiffre d'affaires mois par mois. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; }
.kpi .label { font-size: 10px; letter-spacing: 0.2em; }
.kpi .display { font-size: clamp(24px, 2.2vw, 34px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi small { font-size: 11px; line-height: 1.4; }
.kpi-encre { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.kpi-encre .label, .kpi-encre small { color: var(--encre-300); }
.kpi-sable { background: #e7dcc8; border-color: #ddd0b8; color: var(--encre); }
.kpi-sable .label, .kpi-sable small { color: var(--or-600); }
.carte-resultats { width: 330px; padding: 18px 20px; display: grid; gap: 14px; }
.carte-resultats .display { display: block; font-size: 24px; margin: 2px 0 2px; }
.carte-resultats small { display: block; font-size: 11px; color: var(--texte-pale); line-height: 1.5; }
.carte-resultats > div + div { padding-top: 12px; border-top: 1px solid var(--carte-filet); }

.carte-graphe { width: 330px; padding: 18px 20px 36px; }
.graphe-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 30px; }
.graphe-tete .label { font-size: 10px; color: var(--texte); }
.segments { display: inline-flex; gap: 2px; padding: 3px; border-radius: 3px; background: var(--carte-creux); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); white-space: nowrap; }
.segments > * { padding: 5px 8px; border-radius: 2px; font-weight: 500; }
.segments b { background: var(--carte); color: var(--texte); box-shadow: 0 1px 2px rgb(20 18 15 / 0.1); }
.graphe { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 140px; align-items: end; }
.graphe span { position: relative; height: 100%; display: flex; align-items: flex-end; }
.graphe span::before {
  content: ''; display: block; width: 100%;
  height: var(--h, 0%); background: var(--texte);
  transform-origin: bottom; transform: scaleY(var(--p, 1));
}
.graphe span.courant::before { background: var(--encre-300); }
.graphe em { position: absolute; left: -6px; right: -6px; bottom: calc(var(--h) * var(--p, 1) + 6px); text-align: center; font-style: normal; font-size: 9px; color: var(--texte-doux); white-space: nowrap; opacity: var(--p, 1); }
.graphe span.vide::before { height: 100%; background: transparent; border: 1px dashed var(--filet); }
.graphe i { position: absolute; left: -4px; right: -4px; bottom: -24px; text-align: center; font-style: normal; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-pale); }



.carte-essai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding: 18px 20px; }
.carte-essai .display { font-size: 24px; line-height: 1.1; }
.carte-essai .mention { display: block; margin-top: 6px; }
.carte-nouveaute { padding: 20px 22px; }
.carte-nouveaute h3 { font-size: 24px; line-height: 1.12; margin: 12px 0 8px; }
.carte-nouveaute p { color: var(--texte-doux); }
.statut { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texte-doux); }
.statut i { width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: statut 1.8s ease-in-out infinite; }
@keyframes statut { 50% { opacity: 0.25; } }

.carte-chiffre { width: 224px; padding: 16px 18px; }
.carte-chiffre .display { font-size: 48px; line-height: 1; margin: 10px 0 10px; font-variant-numeric: tabular-nums; }
.chiffre-texte { font-size: 12px; color: var(--texte-doux); }

.carte-beta { width: 380px; padding: 26px 26px 24px; }
.carte-beta .points { color: var(--texte-doux); }
.carte-beta .points li:first-child { margin-top: 0; }

/* --- Lecture ordinaire (sans le récit) ------------------------------- */

/* La gestion : trois colonnes, documents, banque, pilotage. */
.tableau.tableau-colonnes { display: block; }
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; margin: 0 auto; }
.colonne { min-width: 0; }
.colonne-texte > * + * { margin-top: 14px; }
.titre-colonne { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.04; letter-spacing: -0.015em; }
.colonne-texte > p { color: var(--texte-corps); font-size: 14.5px; line-height: 1.6; }
.colonne-texte > p.titre-moyen { color: var(--texte); font-size: clamp(32px, 3.5vw, 54px); line-height: 1.08; }
.colonne-cartes { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.colonne .carte { width: 100%; }
.colonne .carte-facture { padding: 22px 22px 20px; }
.colonne .facture-tete { flex-wrap: wrap; }
.colonne .tampon { right: auto; left: 30%; bottom: 26px; }
.colonne .carte-operation { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; }
.colonne .op-categorie { grid-column: 2 / 4; justify-self: start; }
.colonne .op-montant { grid-column: 3; grid-row: 1; }

/* 02 : la page passe à l'encre ; le texte au-dessus, le soroban au
   centre. Sans le récit, une section noire d'un bord à l'autre. */
.colonnes-centre { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin: 0 auto; text-align: center; }
.colonnes-centre .colonne-cartes { margin-top: clamp(32px, 6vh, 64px); }
.colonnes-centre .titre-moyen { text-wrap: balance; }
html:not(.cinema) .tableau-noir {
  --texte: var(--papier); --texte-doux: #cdc7b6; --texte-corps: #e4ddd0; --filet: #3a362f;
  color: var(--texte); background: var(--encre);
  box-shadow: 0 0 0 100vmax var(--encre); clip-path: inset(0 -100vmax);
}
.boulier { width: 100%; max-width: min(740px, calc((100svh - 360px) * 2.2)); margin: 0 auto; }
.boulier svg { width: 100%; height: auto; overflow: visible; }
.boulier .tige { fill: var(--texte); opacity: 0.2; }
.boulier .barre, .boulier .perle { fill: var(--texte); }
.boulier .perle-or { fill: var(--or); }
.boulier-etapes { display: none; }
.cinema .boulier-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; }
.boulier-etapes li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.boulier-etapes b { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--texte-pale); }
.boulier-etapes li:last-child b { color: var(--or); }

@media (max-width: 960px) { .colonnes { grid-template-columns: minmax(0, 1fr); } }

.toile, .defiler { display: none; }
.recit { padding-top: var(--entete-h); }
.tableau {
  max-width: var(--colonne); margin: 0 auto;
  padding: 10vh var(--marge);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
}
.tableau .texte > * + * { margin-top: 18px; }
.tableau .cartes { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.tableau .deco { display: none; }
.tableau-ouverture { min-height: calc(100vh - var(--entete-h)); grid-template-columns: minmax(0, 1fr); }
.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.action-beta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mention { font-size: 11px; letter-spacing: 0.04em; color: var(--texte-doux); }
.chaine-liste { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--serif); font-size: 22px; }
.carte-operation, .carte-recherche, .carte-seance, .carte-facture { max-width: 100%; }

@media (max-width: 960px) {
  .tableau { grid-template-columns: minmax(0, 1fr); }
  .nav > a:not(.bouton) { display: none; }
}

/* --- Le récit : html.cinema ------------------------------------------ */

.cinema .recit { position: relative; padding-top: 0; height: calc(var(--longueur, 1400) * 1vh); }
.cinema .plateau { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transition: opacity 0.4s var(--ease); }
/* Un saut vers l'arrière : la scène s'efface le temps du saut. */
.cinema .plateau.en-saut { opacity: 0; transition-duration: 0.18s; }
.cinema .toile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.cinema .calque { position: absolute; inset: 0; }

.cinema .tableau {
  position: absolute; inset: 0;
  max-width: none; margin: 0;
  display: flex; align-items: center;
  /* La colonne de texte quitte le bord et se rapproche du centre. */
  padding: var(--entete-h) var(--marge) 0 var(--retrait-texte);
  pointer-events: none;
}
.cinema .texte { width: min(38vw, 540px); }
.cinema .tableau-ouverture .texte { width: min(52vw, 760px); }
/* « Pilotez », surligné à l'encre : fond noir, lettres de papier. Le trait
   se pose de gauche à droite à l'arrivée (--trait, de 0 à 1). */
.surligne { --trait: 1; position: relative; z-index: 0; padding: 0 0.12em; color: var(--papier); }
.surligne::before {
  content: ''; position: absolute; inset: 0.22em 0 0.26em; z-index: -1;
  background: var(--encre);
  transform-origin: left center; transform: scaleX(var(--trait));
}
/* Le nuage du 01 passe derrière le titre : un voile de papier, aux bords
   fondus, garde le texte lisible. */
.cinema .tableau-ouverture .texte { position: relative; isolation: isolate; }
.cinema .tableau-ouverture .texte::before {
  content: ''; position: absolute; inset: -28px -32px; z-index: -1;
  background: var(--fond); opacity: 0.86; filter: blur(26px);
  pointer-events: none;
}
.cinema .tableau .texte > * + * { margin-top: 22px; }
.cinema .tableau .texte .titre-geant,
.cinema .tableau .texte .titre-grand,
.cinema .tableau .texte .titre-moyen { margin-top: 18px; }
.cinema .texte > p:not(.label):not(.display),
.cinema .texte > .chapeau { color: var(--texte-corps); font-size: 16.5px; line-height: 1.65; max-width: 46ch; }
.cinema .texte .points { color: var(--texte-corps); font-size: 14px; }
.cinema .texte .points li { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--filet); }
.cinema .texte .points li::before { top: calc(8px + 0.8em); }

/* Chaque tableau porte son numéro, comme un chapitre. */
.cinema .calque { counter-reset: tableau; }
.cinema .tableau { counter-increment: tableau; }
.cinema .texte > .label { display: inline-flex; align-items: center; color: var(--texte); }
.cinema .texte > .label::before {
  content: counter(tableau, decimal-leading-zero);
  font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: 0;
  padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--filet);
}
.cinema .texte > .label-or { color: var(--or); }
.cinema .tableau.est-actif .texte,
.cinema .tableau.est-actif .ancre { pointer-events: auto; }
.cinema .tableau .cartes { display: block; }
.cinema .ancre { position: absolute; left: 0; top: 0; will-change: transform; }
.cinema .ancre > * { will-change: transform, opacity; }

.cinema .sr-cinema,
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* La gestion dans le récit : les trois colonnes occupent toute la largeur,
   chacune numérotée comme un chapitre. */
.cinema .tableau-colonnes { counter-increment: none; padding: var(--entete-h) clamp(20px, 6vw, 110px) 0; }
.cinema .colonnes { width: 100%; gap: clamp(24px, 3.2vw, 56px); align-items: start; }
.cinema .colonne { counter-increment: tableau; }
.cinema .colonne-texte > .label { display: inline-flex; align-items: center; color: var(--texte); }
.cinema .colonne-texte > .label::before {
  content: counter(tableau, decimal-leading-zero);
  font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: 0;
  padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--filet);
}
.cinema .colonne .points { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cinema .tableau-colonnes.est-actif .colonne { pointer-events: auto; }
/* La fiche, les documents, la banque : un nom pour titre, précédé de son
   numéro. */
.cinema .titre-nom::before {
  content: counter(tableau, decimal-leading-zero);
  display: inline-block; color: var(--texte-pale);
  padding-right: 0.3em; margin-right: 0.3em; border-right: 1px solid var(--filet);
}
.cinema .colonnes-centre .colonne-texte > * + * { margin-top: 22px; }
/* 08 : la sphère à droite du texte, les quatre garanties en rangée dessous,
   posées devant la scène et toujours lisibles. */
.cinema [data-tableau="securite"] { align-items: flex-start; padding-top: calc(var(--entete-h) + 4vh); }
.cinema .tableau .garanties {
  position: absolute; left: var(--retrait-texte); right: var(--retrait-texte); bottom: clamp(18px, 4vh, 40px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.cinema .garanties .carte-chiffre { width: auto; padding: 14px 16px; }
.cinema .garanties .carte-chiffre .display { font-size: 38px; margin: 8px 0 6px; }
.cinema .garanties .chiffre-texte { font-size: 12px; line-height: 1.5; }
.cinema [data-tableau="securite"] .titre-grand { font-size: clamp(40px, 4.4vw, 66px); }
@media (min-width: 761px) and (max-height: 800px) {
  .cinema .garanties .chiffre-texte { display: none; }
}
/* Dans une colonne, la fiche garde l'essentiel : la barre de recherche et la
   séance. Le contenu ne passe jamais sous l'en-tête, même sur un écran bas. */
.cinema .tableau-colonnes { align-items: safe center; }
.cinema .colonne .recherche-legende,
.cinema .colonne .onglets { display: none; }
@media (min-width: 761px) and (max-height: 760px) {
  .cinema .colonne .carte-recherche { display: none; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .cinema .tableau-ouverture .defiler { display: none; }
}

/* Les mots des titres se lèvent un à un. */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mot > span { display: inline-block; }

.cinema .defiler {
  position: absolute; left: var(--retrait-texte); bottom: 4.5vh;
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte-doux);
}
.defiler-trait { position: relative; width: 1px; height: 40px; background: var(--filet); overflow: hidden; }
.defiler-trait::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--texte); animation: defiler 2.2s var(--ease) infinite; }
@keyframes defiler { from { transform: translateY(-14px); } to { transform: translateY(40px); } }

.cinema .pied { position: relative; z-index: 2; }

/* --- Écrans étroits : le texte en haut, la scène dessous ----------------- */

@media (max-width: 760px) {
  :root { --retrait-texte: var(--marge); }
  .cinema .tableau { align-items: flex-start; padding-top: calc(var(--entete-h) + 12px); }
  .cinema .texte, .cinema .tableau-ouverture .texte { width: 100%; }
  .cinema .texte .points { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .cinema .tableau .texte > * + * { margin-top: 12px; }
  .cinema .texte > p:not(.label):not(.display), .cinema .texte > .chapeau { font-size: 14px; line-height: 1.55; }
  .cinema .colonne .carte-recherche { display: none; }
  /* Sur un téléphone, les trois colonnes se succèdent au même endroit. */
  .cinema .tableau-colonnes { align-items: flex-start; padding: calc(var(--entete-h) + 12px) var(--marge) 0; }
  .cinema .colonnes { grid-template-columns: minmax(0, 1fr); }
  .cinema .colonne { grid-area: 1 / 1; }
  .cinema .colonne-cartes { margin-top: 18px; }
  .cinema .tableau-noir { align-items: safe center; padding-top: var(--entete-h); }
  .cinema .colonnes-centre .colonne-texte > * + * { margin-top: 14px; }
  .colonne-texte > p.titre-moyen { font-size: clamp(25px, 7vw, 34px); }
  .cinema .boulier { max-width: none; }
  .cinema .boulier-etapes { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .cinema .boulier-etapes li { grid-area: 1 / 1; flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; font-size: 11px; }
  .cinema .kpi { padding: 12px 14px; gap: 8px; }
  .cinema .kpi .display { font-size: 21px; }
  .cinema .segments, .cinema .graphe em { display: none; }
  .cinema .graphe-tete { margin-bottom: 16px; }
  .cinema .graphe { height: 110px; gap: 5px; }
  .cinema .graphe i { font-size: 8px; letter-spacing: 0; }
  .cinema .carte-essai .display, .cinema .carte-nouveaute h3 { font-size: 20px; }
  .cinema .carte-nouveaute p { font-size: 12px; }
  .cinema .tableau .garanties { left: var(--marge); right: var(--marge); bottom: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cinema .garanties .carte-chiffre { padding: 10px 12px; }
  .cinema .garanties .carte-chiffre .label { font-size: 9px; letter-spacing: 0.12em; }
  .cinema .garanties .carte-chiffre .display { font-size: 26px; margin: 6px 0 0; }
  .cinema .garanties .chiffre-texte { display: none; }
  .cinema [data-tableau="securite"] .texte > p { font-size: 12.5px; line-height: 1.5; }
  .titre-geant { font-size: clamp(42px, 11.5vw, 66px); }
  .titre-grand { font-size: clamp(31px, 8.6vw, 44px); }
  .titre-moyen { font-size: clamp(25px, 7vw, 34px); }
  .chapeau { font-size: 15px; }
  .cinema .defiler { display: none; }
  .tableau-ouverture .actions { margin-top: 20px; }
  /* 01 : l'étiquette tient sur une ligne, les deux boutons prennent la
     largeur, l'un sous l'autre ; le nuage reste dessous. */
  .cinema .tableau-ouverture .texte > .label { font-size: 10px; letter-spacing: 0.1em; }
  .cinema .tableau-ouverture .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cinema .tableau-ouverture .action-beta { align-items: stretch; gap: 6px; }
  .cinema .tableau-ouverture .mention { text-align: center; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .cinema [data-tableau="securite"] .titre-grand { font-size: 32px; }
  .cinema [data-tableau="securite"] .texte > p { font-size: 11.5px; line-height: 1.42; }
  .cinema [data-tableau="securite"] .texte > * + * { margin-top: 9px; }
  .cinema .garanties .carte-chiffre { padding: 8px 10px; }
  .cinema .garanties .carte-chiffre .display { font-size: 22px; margin-top: 4px; }
}

/* --- Téléphone couché : peu de hauteur, le texte à gauche, la scène ou
   les maquettes à droite, une colonne à la fois ---------------------- */

@media (orientation: landscape) and (max-height: 500px) {
  :root { --entete-h: 54px; --marge: clamp(16px, 4vw, 40px); --retrait-texte: clamp(20px, 6vw, 64px); }
  .lockup .soroban { width: 22px; }
  .lockup-nom { font-size: 17px; }
  .nav .bouton { height: 32px; padding: 0 12px; }
  .bouton { height: 38px; padding: 0 16px; }

  .titre-geant { font-size: min(6vw, 10.5vh); }
  .titre-grand { font-size: min(5vw, 8.5vh); }
  .titre-colonne { font-size: min(3.4vw, 6.6vh); }
  .colonne-texte > p.titre-moyen { font-size: min(4.2vw, 8vh); }

  .cinema .tableau { align-items: center; padding-top: var(--entete-h); }
  .cinema .texte { width: min(46vw, 480px); }
  .cinema .tableau-ouverture .texte { width: min(60vw, 560px); }
  .cinema .tableau .texte > * + * { margin-top: 10px; }
  .cinema .texte > p:not(.label):not(.display), .cinema .texte > .chapeau { font-size: 12.5px; line-height: 1.5; }
  .cinema .tableau-ouverture .actions { margin-top: 14px; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
  .cinema .tableau-ouverture .action-beta { align-items: center; }
  .cinema .tableau-ouverture .bouton { padding: 0 12px; font-size: 9.5px; letter-spacing: 0.12em; }
  .mention { font-size: 10px; }
  .cinema .defiler { display: none; }

  /* Les chapitres à colonnes : une colonne à la fois, son texte à gauche,
     ses maquettes à droite, un peu réduites. */
  .cinema .tableau-colonnes { align-items: safe center; padding: var(--entete-h) var(--retrait-texte) 0; }
  .cinema .colonnes { grid-template-columns: minmax(0, 1fr); }
  .cinema .colonne { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 40px); align-items: center; }
  .cinema .colonne-texte > * + * { margin-top: 10px; }
  .cinema .colonne-texte > p:not(.display) { font-size: 12.5px; line-height: 1.5; }
  .cinema .colonne-cartes { margin-top: 0; zoom: 0.78; }
  .cinema .colonne .carte-recherche { display: none; }

  /* 02 : le texte à gauche, le soroban à droite, les noms se relaient. */
  .cinema .colonnes-centre { max-width: none; text-align: left; }
  .cinema .colonnes-centre .colonne-texte > * + * { margin-top: 12px; }
  .cinema .colonnes-centre .colonne-cartes { zoom: 1; }
  .cinema .boulier { max-width: none; }
  .cinema .boulier-etapes { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .cinema .boulier-etapes li { grid-area: 1 / 1; flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; font-size: 11px; }

  /* 08 : le texte à gauche, la sphère à droite, les garanties en rangée. */
  .cinema [data-tableau="securite"] { align-items: flex-start; padding-top: calc(var(--entete-h) + 6px); }
  .cinema [data-tableau="securite"] .texte { width: min(56vw, 520px); }
  .cinema [data-tableau="securite"] .titre-grand { font-size: min(4vw, 7.4vh); }
  .cinema [data-tableau="securite"] .texte > p { font-size: 12px; line-height: 1.45; }
  .cinema .tableau .garanties { left: var(--retrait-texte); right: var(--retrait-texte); bottom: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .cinema .garanties .carte-chiffre { padding: 8px 10px; }
  .cinema .garanties .carte-chiffre .label { font-size: 8.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .cinema .garanties .carte-chiffre .display { font-size: 24px; margin: 4px 0 0; }
  .cinema .garanties .chiffre-texte { display: none; }
}

/* --- Mouvement réduit : rien ne bouge, rien ne disparaît ----------------- */

@media (prefers-reduced-motion: reduce) {
  .curseur, .statut i, .defiler-trait::after { animation: none; }
}