/* =============================================================================
   PERCISTS · introduction à la table ronde France Assos Santé — feuille locale.
   Profil scénique : ludique, direction papier vivant. Une opération par slide.

   Sept figures locales, toutes de papier :
   · la carte et son calque (prélude, puis épinglée) ;
   · l'enveloppe-réponse ;
   · le comptoir et ses deux guichets ;
   · la boîte à fente et son registre ;
   · la même boîte, quand la complication fait entrer ce qui restait devant ;
   · le cadre explicatif — REPRISE de percists-2026-fas-paca, copiée telle
     quelle sous le contrat percists-bascule-cadre-validee ;
   · le pont de papier ;
   · la table ronde servie.

   LA 3D, essayée à la demande de Nicolas (2 octobre 2026), selon la règle
   d'ep-clip (GRAMMAIRE § XI) : une profondeur ne vaut que si elle dit une
   épaisseur, une distance ou un poids. Quatre gestes la prennent, et chacun
   pourrait se faire de la main : rabattre un calque sur une carte, ouvrir le
   rabat d'une enveloppe, retourner une pancarte, déplier une bande de papier.
   Transformations CSS sur des éléments HTML — pas de WebGL, pas d'ombre, pas
   de translateZ décoratif. L'état d'arrivée est toujours à plat, donc lisible
   au tirage et en mouvement réduit.
   ========================================================================== */

/* @famille carte-calque · verbe DÉNOMBRER · registre mixte */
/* @famille carte-epinglee · verbe JUXTAPOSER · registre mixte */
/* @famille enveloppe-reponse · verbe REQUALIFIER · registre nommé */
/* @famille salle-guichets · verbe RELIER · registre nommé */
/* @famille appui-titulaire · verbe OPPOSER · registre nommé */
/* @famille projet-etiquete · verbe REQUALIFIER · registre nommé */
/* @famille soignants-duo · hors-vocabulaire */
/* @famille tablee-enquete · verbe DÉNOMBRER · registre nommé */
/* @famille paquet-pistes · verbe RÉCAPITULER · registre nommé */
/* @famille fente-sanitaire · verbe CATÉGORISER · registre nommé */
/* @famille complication-tardive · verbe REQUALIFIER · registre nommé */
/* @famille ponts-papier · verbe RELIER · registre nommé */
/* @famille tablee-pistes · verbe CATÉGORISER · registre nommé */
/* @famille questions-table · verbe RÉCAPITULER · registre nommé */
/* @famille jalon-dossier · hors-vocabulaire */
/* @famille tr-insecable · hors-vocabulaire */


/* ───────────────────────────────────────────── · LA COUVERTURE ILLUSTRÉE
   Direction C · Le calque, choisie par Nicolas le 2 octobre 2026. L'image est
   épinglée à la scène ; le logo France Assos Santé se pose en surimpression
   sur une plaque de papier, dans le coin haut gauche que le dessin laisse
   libre. */
.couverture__scene > img[data-illustration] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.deck .couverture__scene > .tr-logo-surimpression {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 32px;
  box-sizing: border-box;
  width: 176px;
  height: 128px;
  padding: 8px 10px;
  border: 2px solid var(--tr-indigo);
  border-radius: 6px;
  background-color: #ffffff;
  object-fit: contain;
}


/* ───────────────────────────────────────────── 0 · COMMUNS
   Les couleurs FAS entrent dans les objets (retour de Nicolas du 2 octobre
   2026) : indigo pour le trait, turquoise pour les accents. Jamais pour une
   donnée, jamais le corail. */

.deck {
  --tr-indigo: var(--fas-indigo, #2e2883);
  --tr-turquoise: var(--fas-turquoise, #00abb5);
  --tr-turquoise-clair: var(--fas-turquoise-clair, #bfe9ec);
}

.tr-figure {
  position: relative;
  width: 1144px;
  margin: 0;
}
.tr-figure svg text { font-family: var(--font-interface); }
.tr-figure .papier {
  fill: var(--paper-bright);
  stroke: var(--tr-indigo);
  stroke-width: 2;
  stroke-linejoin: round;
}
.tr-onomatopee {
  position: absolute;
  margin: 0;
  color: var(--tr-indigo);
  font-family: var(--font-interface);
  font-size: var(--fs-700);
  font-weight: 900;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
}
.tr-bulle {
  position: absolute;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background-color: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--fs-400);
  line-height: 1.32;
}
.tr-bulle q { quotes: "«\00a0" "\00a0»"; }
.tr-bulle small {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-family: var(--font-interface);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .04em;
}
/* Un nom propre composé ne se coupe pas en fin de ligne. */
.tr-insecable { white-space: nowrap; }

.tr-statut {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* ───────────────────────────────────────────── 1 · LA CARTE ET SON CALQUE
   Slides « Six départements, vingt-deux voix » et « Des inégalités qui ont
   une adresse ». Même figure, même emprise, mêmes coordonnées : la seconde
   slide reprend la première arrivée et l'épingle. */

.carte-calque,
.carte-epinglee { height: 420px; perspective: 1900px; perspective-origin: 50% 100%; }
.carte-calque__plan { position: absolute; inset: 0; display: block; width: 1144px; height: 420px; overflow: visible; }

.carte-calque__classe { stroke: var(--line-strong); stroke-width: .45; fill: var(--paper-bright); }
.carte-calque__contour { fill: none; stroke: var(--brand-accent); stroke-width: 2; stroke-linejoin: round; }
.carte-calque__departement { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; opacity: .72; }

/* La carte déjà lue : la slide 4 la reprend teintée, sans trajet. */
.carte-calque--lue .carte-calque__classe { stroke: #ffffff; }
.carte-calque--lue .carte-calque__classe--0 { fill: #d6e5f2; }
.carte-calque--lue .carte-calque__classe--1 { fill: #89b2d6; }
.carte-calque--lue .carte-calque__classe--2 { fill: #3f76ac; }
.carte-calque--lue .carte-calque__classe--3 { fill: #0d3c69; }

.carte-calque__compte rect { fill: var(--paper-bright); stroke: var(--brand-accent); stroke-width: 2; }
.carte-calque__compte circle { fill: none; stroke: var(--brand-accent); stroke-width: 1.5; }
.carte-calque__compte text { fill: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-500); }

/* La légende : seuils nommés, écrits, comme la charte l'exige. */
.carte-calque__legende {
  position: absolute;
  top: 6px;
  left: 0;
  width: 270px;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-200);
}
.carte-calque__legende h3 { margin: 0 0 2px; font-size: var(--fs-300); font-weight: 800; line-height: 1.25; }
.carte-calque__legende > p { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-100); line-height: 1.4; }
.carte-calque__classes { display: grid; gap: 6px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.carte-calque__classes li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: var(--space-3); }
.carte-calque__classes i { display: block; height: 22px; border: 1px solid #ffffff; outline: 1px solid var(--line); }
.carte-calque__classes li:nth-child(1) i { background-color: #d6e5f2; }
.carte-calque__classes li:nth-child(2) i { background-color: #89b2d6; }
.carte-calque__classes li:nth-child(3) i { background-color: #3f76ac; }
.carte-calque__classes li:nth-child(4) i { background-color: #0d3c69; }
.carte-calque__bornes { display: flex; justify-content: space-between; margin: -2px 0 var(--space-4); color: var(--muted); font-size: var(--fs-100); }
.carte-calque__voix { display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: var(--space-3); margin: 0 0 var(--space-3); line-height: 1.35; }
.carte-calque__voix b {
  display: grid;
  height: 30px;
  border: 2px solid var(--brand-accent);
  border-radius: 3px;
  background-color: var(--paper-bright);
  place-content: center;
  font-family: var(--font-editorial);
  font-size: var(--fs-400);
  font-weight: 400;
}
.carte-calque__voix span small { display: block; color: var(--muted); font-size: var(--fs-100); }
.carte-calque__absents { margin: 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.4; }
.carte-calque__absents strong { color: var(--ink); }

/* Le calque : une feuille, son bord, son étiquette et son coin plié. Aucune
   transparence décorative : la feuille ne porte que son trait. */
.carte-calque__feuille {
  position: absolute;
  top: 0;
  left: 292px;
  width: 536px;
  height: 420px;
  border: 3px solid var(--tr-turquoise);
  border-radius: 4px;
  pointer-events: none;
  transform-origin: 50% 100%;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.carte-calque__feuille::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-bottom: 3px solid var(--tr-turquoise);
  border-left: 3px solid var(--tr-turquoise);
  background-color: var(--tr-turquoise-clair);
}
.carte-calque__feuille > span {
  position: absolute;
  bottom: 10px;
  left: 12px;
  padding: 2px var(--space-2);
  border: 2px solid var(--tr-turquoise);
  background-color: var(--paper-bright);
  color: var(--tr-indigo);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.carte-calque__lien circle { fill: none; stroke: var(--ink); stroke-width: 2; }
.carte-calque__lien line { stroke: var(--ink); stroke-width: 1.5; }
.carte-calque__loupe-fond { fill: var(--paper); }
.carte-calque__loupe-classe { stroke: #ffffff; stroke-width: 1; }
.carte-calque__loupe-classe--0 { fill: #d6e5f2; }
.carte-calque__loupe-classe--1 { fill: #89b2d6; }
.carte-calque__loupe-classe--2 { fill: #3f76ac; }
.carte-calque__loupe-classe--3 { fill: #0d3c69; }
.carte-calque__loupe-anneau { fill: none; stroke: var(--ink); stroke-width: 3; }
.carte-calque__loupe-manche { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.carte-calque__loupe-repere { fill: var(--ink); font-size: var(--fs-200); font-weight: 800; paint-order: stroke; stroke: var(--paper-bright); stroke-width: 4px; stroke-linejoin: round; }
.carte-calque__loupe-titre { fill: var(--ink); font-size: var(--fs-200); font-weight: 700; }

.carte-calque__reaction {
  position: absolute;
  top: 338px;
  left: 868px;
  width: 276px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--fs-300);
  line-height: 1.35;
  text-align: center;
}

/* Départ : la carte au trait, le calque replié, la loupe absente.
   Le calque se déplie depuis son bord bas, son haut s'éloignant de l'œil : il
   ne grossit jamais par la perspective, donc ne déborde pas vers le titre. */
.carte-calque--prelude .carte-calque__feuille { transform: rotateX(78deg); opacity: 0; }
.carte-calque--prelude :is(.carte-calque__loupe, .carte-calque__lien, .carte-calque__reaction) { opacity: 0; }

.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__feuille { animation: tr-rabattre-calque 900ms var(--ease-io) 240ms both; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__classe { animation: tr-teinte-trait 360ms var(--ease-out) both; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__classe--0 { animation-name: tr-teinte-0; animation-delay: 1180ms; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__classe--1 { animation-name: tr-teinte-1; animation-delay: 1400ms; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__classe--2 { animation-name: tr-teinte-2; animation-delay: 1620ms; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__classe--3 { animation-name: tr-teinte-3; animation-delay: 1840ms; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__lien { animation: tr-paraitre 300ms var(--ease-out) 2240ms both; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__loupe { animation: tr-poser-loupe 620ms var(--ease-out) 2360ms both; }
.slide[data-etat="calque"] .carte-calque--prelude .carte-calque__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 2900ms both; }

@keyframes tr-rabattre-calque {
  0%   { transform: rotateX(78deg); opacity: 0; }
  12%  { opacity: 1; }
  80%  { transform: rotateX(0deg); opacity: 1; }
  90%  { transform: rotateX(4deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes tr-teinte-0 { from { fill: var(--paper-bright); stroke: var(--line-strong); } to { fill: #d6e5f2; stroke: #ffffff; } }
@keyframes tr-teinte-1 { from { fill: var(--paper-bright); stroke: var(--line-strong); } to { fill: #89b2d6; stroke: #ffffff; } }
@keyframes tr-teinte-2 { from { fill: var(--paper-bright); stroke: var(--line-strong); } to { fill: #3f76ac; stroke: #ffffff; } }
@keyframes tr-teinte-3 { from { fill: var(--paper-bright); stroke: var(--line-strong); } to { fill: #0d3c69; stroke: #ffffff; } }
@keyframes tr-teinte-trait { from { stroke: var(--line-strong); } to { stroke: #ffffff; } }
@keyframes tr-poser-loupe {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tr-paraitre { from { opacity: 0; } to { opacity: 1; } }

/* Slide 4 : la même carte, épinglée. Les étiquettes sont des fragments ; une
   étiquette arrive à plat, sa punaise la fixe ensuite. */
.carte-epinglee .carte-calque__feuille { transform: none; opacity: 1; }
.carte-calque__repere-ancre circle { fill: var(--paper-bright); stroke: var(--ink); stroke-width: 2.5; }
.carte-calque__repere-ancre line { stroke: var(--ink); stroke-width: 1.5; }
.carte-calque__repere-ancre--decrit line { stroke-dasharray: 6 5; }

.etiquette-papier {
  position: absolute;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 2px solid var(--tr-indigo);
  border-radius: 3px;
  background-color: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-200);
  line-height: 1.32;
}
.etiquette-papier--decrit { border-style: dashed; }
.etiquette-papier::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tr-indigo);
  border-radius: 50%;
  background-color: var(--tr-turquoise);
  transform: translateX(-50%);
}
.etiquette-papier b {
  display: block;
  margin-bottom: 2px;
  color: var(--tr-indigo);
  font-size: var(--fs-100);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.etiquette-papier ul { margin: 0; padding-left: 1.1em; }
.etiquette-papier li + li { margin-top: 4px; }
.etiquette-papier .tr-statut { display: block; margin-top: 4px; font-size: var(--fs-100); }

.carte-calque__legende--compacte .carte-calque__classes { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }
.carte-calque__legende--compacte .carte-calque__classes li { grid-template-columns: 1fr; }
.carte-calque__traits { display: grid; gap: 6px; margin: var(--space-4) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-100); }
.carte-calque__traits li { display: flex; align-items: center; gap: var(--space-2); }
.carte-calque__traits i { display: inline-block; width: 30px; height: 14px; border: 2px solid var(--brand-accent); border-radius: 2px; background-color: var(--paper-bright); }
.carte-calque__traits li + li i { border-style: dashed; }

.carte-epinglee .etiquette-papier.est-revele { animation: tr-epingler 520ms var(--ease-out) both; }
.carte-epinglee .carte-calque__repere-ancre { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.slide[data-etat="montagne"] .carte-calque__repere-ancre--montagne,
.slide[data-etat="arriere-pays"] :is(.carte-calque__repere-ancre--montagne, .carte-calque__repere-ancre--arriere-pays),
.slide[data-etat="littoral"] :is(.carte-calque__repere-ancre--montagne, .carte-calque__repere-ancre--arriere-pays, .carte-calque__repere-ancre--littoral),
.slide[data-etat="villes"] .carte-calque__repere-ancre { opacity: 1; }
@keyframes tr-epingler {
  0%   { transform: translateY(-14px) rotate(-2.5deg); }
  70%  { transform: translateY(2px) rotate(.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}


/* ───────────────────────────────────────────── 2 · L'ENVELOPPE-RÉPONSE
   Le rabat s'ouvre en 3D sur sa charnière, l'enveloppe se renverse sur son
   CENTRE (règle de l'enveloppe SFNM : un coin la ferait sortir de sa colonne),
   trois cartes tombent ; la secousse de trop fait tomber le billet. */

.enveloppe-reponse { height: 440px; }
.enveloppe-reponse__question {
  position: absolute;
  top: 70px;
  left: 0;
  width: 290px;
  margin: 0;
  padding: var(--space-4);
  border: 2px solid var(--brand-accent);
  border-radius: 4px;
  background-color: var(--paper-bright);
}
.enveloppe-reponse__question b { display: block; margin-bottom: var(--space-2); }
.enveloppe-reponse__question p { margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-500); line-height: 1.25; }
.enveloppe-reponse__question p + p { margin-top: var(--space-3); color: var(--muted); font-family: var(--font-interface); font-size: var(--fs-200); }
.enveloppe-reponse__envoi { position: absolute; top: 160px; left: 296px; width: 60px; height: 20px; overflow: visible; }
.enveloppe-reponse__envoi path { fill: none; stroke: var(--brand-accent); stroke-width: 2; }

.enveloppe-reponse__scene { position: absolute; top: 100px; left: 360px; width: 240px; height: 160px; perspective: 1400px; perspective-origin: 50% 0; }
.enveloppe { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%; }
.enveloppe__corps { position: absolute; inset: 0; display: block; width: 240px; height: 160px; overflow: visible; }
.enveloppe__corps .enveloppe__pli { fill: none; stroke: var(--brand-accent); stroke-width: 1.5; opacity: .6; }
.enveloppe__tampon { fill: none; stroke: var(--tr-indigo); stroke-width: 2; }
.enveloppe__tampon-mot { fill: var(--tr-indigo); font-size: var(--fs-100); font-weight: 900; letter-spacing: .12em; }
.enveloppe__rabat {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 92px;
  transform-origin: 50% 0;
  transform: rotateX(0deg);
}
.enveloppe__rabat svg { display: block; width: 240px; height: 92px; overflow: visible; }

.enveloppe-reponse__entete { position: absolute; top: 146px; left: 640px; width: 494px; margin: 0; }
.enveloppe-reponse__carte {
  position: absolute;
  top: 190px;
  width: 156px;
  height: 112px;
  margin: 0;
  padding: var(--space-3);
  border: 2px solid var(--brand-accent);
  border-radius: 4px;
  background-color: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.enveloppe-reponse__carte .ico { display: block; width: 30px; height: 30px; margin: 0 auto var(--space-2); color: var(--tr-turquoise); }
.enveloppe-reponse__carte--1 { left: 640px; }
.enveloppe-reponse__carte--2 { left: 808px; }
.enveloppe-reponse__carte--3 { left: 976px; }
.enveloppe-reponse__billet {
  position: absolute;
  top: 322px;
  left: 690px;
  width: 400px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--brand-accent);
  border-left: 5px solid var(--data-warm);
  border-radius: 3px;
  background-color: var(--paper-bright);
  transform-origin: 50% 0;
}
.enveloppe-reponse__billet q { color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-400); font-style: italic; line-height: 1.3; quotes: "« " " »"; }
.enveloppe-reponse__billet small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-100); font-weight: 700; }
.enveloppe-reponse__reaction {
  position: absolute;
  top: 318px;
  left: 0;
  width: 600px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--fs-500);
  line-height: 1.3;
}
.enveloppe-reponse__reaction strong { color: var(--brand-primary); font-weight: 400; }

/* Départ : enveloppe fermée, droite ; les cartes et le billet sont dedans. */
.enveloppe-reponse :is(.enveloppe-reponse__carte, .enveloppe-reponse__billet, .enveloppe-reponse__reaction, .enveloppe-reponse__entete) { opacity: 0; }

.slide[data-etat="renverse"] .enveloppe__rabat { animation: tr-ouvrir-rabat 620ms var(--ease-io) 280ms both; }
.slide[data-etat="renverse"] .enveloppe { animation: tr-renverser 2380ms var(--ease-io) 900ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__entete { animation: tr-paraitre var(--dur-3) var(--ease-out) 1260ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__carte--1 { animation: tr-tomber-1 560ms var(--ease-out) 1340ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__carte--2 { animation: tr-tomber-2 560ms var(--ease-out) 1500ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__carte--3 { animation: tr-tomber-3 560ms var(--ease-out) 1660ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__billet { animation: tr-tomber-billet 620ms var(--ease-out) 2880ms both; }
.slide[data-etat="renverse"] .enveloppe-reponse__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 3400ms both; }

@keyframes tr-ouvrir-rabat {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(180deg); }
}
/* 0–21 % : l'enveloppe se renverse ; 21–58 % : elle reste renversée, les
   cartes tombent ; 58–80 % : deux secousses de trop ; puis le repos. */
@keyframes tr-renverser {
  0%   { transform: rotate(0deg); }
  21%  { transform: rotate(122deg); }
  58%  { transform: rotate(122deg); }
  64%  { transform: rotate(112deg); }
  70%  { transform: rotate(130deg); }
  76%  { transform: rotate(114deg); }
  82%  { transform: rotate(122deg); }
  100% { transform: rotate(122deg); }
}
@keyframes tr-tomber-1 {
  from { opacity: 0; transform: translate(-252px, -40px) rotate(-30deg) scale(.5); }
  20%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes tr-tomber-2 {
  from { opacity: 0; transform: translate(-420px, -40px) rotate(-24deg) scale(.5); }
  20%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes tr-tomber-3 {
  from { opacity: 0; transform: translate(-588px, -40px) rotate(-18deg) scale(.5); }
  20%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes tr-tomber-billet {
  from { opacity: 0; transform: translate(-300px, -160px) rotate(-14deg) scaleY(.3); }
  25%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(1deg) scaleY(.3); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scaleY(1); }
}


/* ───────────────────────────────────────────── 3 · LA SALLE DES GUICHETS
   Vue 3D : un sol en perspective, quatre guichets debout, personne derrière.
   La profondeur dit la distance que parcourt le dossier d'un guichet à
   l'autre — c'est le propos, pas un décor. Les guichets sont tenus face à
   l'œil (rotation inverse de celle du sol) : leurs plaques restent lisibles.
   Les pancartes se retournent en 3D, la sonnette est le « bouton » du rêve. */

.salle-guichets { height: 420px; }
.tr-bulle--reve { top: 4px; left: 0; width: 262px; border-style: dashed; border-color: var(--tr-indigo); border-radius: 26px; font-size: var(--fs-300); }
.tr-bulle--reve b { display: block; margin-bottom: 4px; color: var(--tr-indigo); font-family: var(--font-interface); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tr-bulle--reve::before,
.tr-bulle--reve::after { content: ""; position: absolute; border: 2px dashed var(--tr-indigo); border-radius: 50%; background-color: var(--paper-bright); }
.tr-bulle--reve::before { right: -26px; bottom: -6px; width: 18px; height: 18px; }
.tr-bulle--reve::after { right: -42px; bottom: -20px; width: 10px; height: 10px; }

.salle-guichets__scene { position: absolute; top: 0; left: 330px; width: 700px; height: 420px; perspective: 1500px; perspective-origin: 50% 20%; }
/* Charnière au bord AVANT : le fond s'éloigne et rapetisse, le bord avant
   garde sa taille — aucune partie de la salle ne grossit vers l'œil. */
.salle-guichets__sol { position: absolute; top: 72px; left: 0; width: 700px; height: 340px; transform-origin: 50% 100%; transform: rotateX(58deg); transform-style: preserve-3d; }
.salle-guichets__dalle { position: absolute; inset: 0; display: block; width: 700px; height: 340px; }
.salle-guichets__plancher { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 3; }
.salle-guichets__joint { stroke: var(--line-strong); stroke-width: 1.5; }
.salle-guichets__intervalle { fill: none; stroke: var(--muted); stroke-width: 3; stroke-dasharray: 10 8; }
.salle-guichets__intervalle-mot { fill: var(--muted); font-family: var(--font-editorial); font-size: var(--fs-600); font-style: italic; }

.guichet { position: absolute; width: 150px; height: 150px; transform-origin: 50% 100%; transform: rotateX(-58deg); transform-style: preserve-3d; }
.guichet__panneau { position: absolute; inset: 0; border: 3px solid var(--tr-indigo); border-radius: 4px; background-color: var(--paper-bright); transform-style: preserve-3d; }
.guichet__plaque { margin: 0; padding: 4px 6px 5px; background-color: var(--tr-indigo); color: #ffffff; text-align: center; line-height: 1.1; }
.guichet__plaque b { display: block; font-size: var(--fs-400); font-weight: 900; letter-spacing: .08em; }
.guichet__plaque span { display: block; font-size: var(--fs-100); font-weight: 600; }
.guichet__fenetre { position: absolute; top: 64px; right: 10px; bottom: 10px; left: 10px; border: 2px solid var(--tr-indigo); background-color: var(--surface-tint); transform-style: preserve-3d; }

.pancarte { position: absolute; top: 9px; right: 8px; left: 8px; height: 52px; transform-style: preserve-3d; }
.pancarte__carton { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); }
.pancarte__face {
  position: absolute;
  inset: 0;
  display: grid;
  border: 3px solid var(--tr-turquoise);
  border-radius: 4px;
  background-color: var(--paper-bright);
  place-content: center;
  backface-visibility: hidden;
  font-size: var(--fs-200);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
}
.pancarte__face--recto { color: var(--tr-indigo); }
.pancarte__face--verso { border-color: var(--tr-indigo); color: var(--ink); transform: rotateY(180deg); }

.salle-guichets__sonnette { position: absolute; top: 250px; left: 305px; width: 90px; height: 84px; transform-origin: 50% 100%; transform: rotateX(-58deg); text-align: center; }
.salle-guichets__sonnette svg { display: block; width: 90px; height: 60px; overflow: visible; }
.salle-guichets__sonnette span { display: block; white-space: nowrap; margin-left: -20px; margin-right: -20px; color: var(--tr-indigo); font-size: var(--fs-100); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.salle-guichets__cloche { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 3; }
.salle-guichets__bouton { fill: var(--tr-indigo); }

.dossier-papier { position: absolute; width: 112px; height: 76px; }
.dossier-papier svg { display: block; width: 112px; height: 76px; overflow: visible; }
.dossier-papier__chemise { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 2.5; stroke-linejoin: round; }
.dossier-papier__onglet { fill: var(--tr-turquoise-clair); stroke: var(--tr-indigo); stroke-width: 2.5; stroke-linejoin: round; }
.dossier-papier__etiquette { fill: var(--tr-indigo); font-size: var(--fs-200); font-weight: 800; }
.dossier-papier__cadre { fill: none; stroke: var(--data-warm); stroke-width: 4; opacity: 0; }
.dossier-papier--sol { top: 262px; left: 294px; }

.salle-guichets__ding { top: 250px; left: 720px; }
.salle-guichets__reaction { position: absolute; top: 250px; left: 0; width: 262px; margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-500); line-height: 1.25; opacity: 0; }
.salle-guichets__parole { position: absolute; top: 352px; left: 0; width: 280px; margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-300); }
.salle-guichets__parole small { display: block; color: var(--muted); font-family: var(--font-interface); font-size: var(--fs-100); font-weight: 700; }

.slide[data-etat="sonne"] .salle-guichets__bouton { animation: tr-presser 320ms var(--ease-io) both; }
.slide[data-etat="sonne"] .salle-guichets__ding { animation: tr-crier 760ms var(--ease-out) 120ms both; }
.slide[data-etat="sonne"] .dossier-papier--sol { animation: tr-renvoyer-sol 3600ms var(--ease-io) 460ms both; }
.slide[data-etat="sonne"] .guichet--ccas .pancarte__carton { animation: tr-retourner 460ms var(--ease-io) 1020ms both; }
.slide[data-etat="sonne"] .guichet--mds .pancarte__carton { animation: tr-retourner 460ms var(--ease-io) 1740ms both; }
.slide[data-etat="sonne"] .guichet--dac .pancarte__carton { animation: tr-retourner 460ms var(--ease-io) 2460ms both; }
.slide[data-etat="sonne"] .guichet--cpts .pancarte__carton { animation: tr-retourner 460ms var(--ease-io) 3180ms both; }
.slide[data-etat="sonne"] .dossier-papier--sol .dossier-papier__cadre { animation: tr-paraitre var(--dur-2) var(--ease-out) 4080ms both; }
.slide[data-etat="sonne"] .salle-guichets__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 4200ms both; }

@keyframes tr-presser { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } }
@keyframes tr-crier {
  0%   { opacity: 0; transform: translateY(8px) scale(.8); }
  25%  { opacity: 1; transform: translateY(0) scale(1.05); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}
@keyframes tr-retourner { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
/* Sur le sol : CCAS, MDS, DAC, CPTS — chacun renvoie —, puis l'intervalle. */
@keyframes tr-renvoyer-sol {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-275px, -10px); }
  20%  { transform: translate(-275px, -10px); }
  35%  { transform: translate(-125px, -150px); }
  40%  { transform: translate(-125px, -150px); }
  55%  { transform: translate(125px, -150px); }
  60%  { transform: translate(125px, -150px); }
  75%  { transform: translate(275px, -10px); }
  80%  { transform: translate(275px, -10px); }
  95%  { transform: translate(0, -104px); }
  100% { transform: translate(0, -110px); }
}


/* ───────────────────────────────────────────── 3 bis · LA RÈGLE D'APPUI
   « Jamais à la place de » : dans le soin, le dossier se pose sur un titulaire ;
   dans le social, il traverse des contours enchevêtrés et tombe. */

.appui-titulaire { height: 380px; }
.appui-titulaire__decor { position: absolute; inset: 0; display: block; width: 1144px; height: 380px; overflow: visible; }
.appui-titulaire__entete { fill: var(--tr-indigo); font-size: var(--fs-200); font-weight: 900; letter-spacing: .1em; }
.appui-titulaire__socle { fill: var(--tr-turquoise-clair); stroke: var(--tr-indigo); stroke-width: 3; }
.appui-titulaire__socle-nom { fill: var(--ink); font-size: var(--fs-300); font-weight: 800; }
.appui-titulaire__socle-sous { fill: var(--muted); font-size: var(--fs-200); }
.appui-titulaire__sol { stroke: var(--line-strong); stroke-width: 2; }
.appui-titulaire__contour { fill: none; stroke: var(--tr-indigo); stroke-width: 2.5; stroke-dasharray: 8 7; }
.appui-titulaire__contour-nom { fill: var(--muted); font-size: var(--fs-200); }
.appui-titulaire__coche { fill: none; stroke: var(--tr-indigo); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.appui-titulaire__dossier--soin { top: 160px; left: 234px; }
.appui-titulaire__dossier--social { top: 276px; left: 690px; transform: rotate(7deg); }
.appui-titulaire__reaction { position: absolute; top: 34px; left: 820px; width: 324px; margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-300); line-height: 1.3; opacity: 0; }

.appui-titulaire .appui-titulaire__dossier { opacity: 0; }
.slide[data-etat="appuye"] .appui-titulaire__dossier--soin { animation: tr-poser-soin 900ms var(--ease-out) 200ms both; }
.slide[data-etat="appuye"] .appui-titulaire__coche { animation: tr-paraitre var(--dur-2) var(--ease-out) 1120ms both; }
.slide[data-etat="appuye"] .appui-titulaire__dossier--social { animation: tr-traverser-appui 1500ms var(--ease-io) 200ms both; }
.slide[data-etat="appuye"] .appui-titulaire__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 1600ms both; }
@keyframes tr-poser-soin {
  0%   { opacity: 0; transform: translateY(-140px); }
  15%  { opacity: 1; }
  80%  { opacity: 1; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes tr-traverser-appui {
  0%   { opacity: 0; transform: translateY(-256px) rotate(0deg); }
  10%  { opacity: 1; }
  45%  { opacity: 1; transform: translateY(-116px) rotate(0deg); }
  58%  { opacity: 1; transform: translateY(-110px) rotate(-2deg); }
  80%  { opacity: 1; transform: translateY(0) rotate(9deg); }
  90%  { opacity: 1; transform: translateY(-8px) rotate(6deg); }
  100% { opacity: 1; transform: translateY(0) rotate(7deg); }
}


/* ───────────────────────────────────────────── 3 ter · L'ÉTIQUETTE DÉCOLLÉE
   Dernier tour de Nicolas (2 octobre 2026) : la page des deux paroles laissait
   un grand blanc. Le geste reprend le titre de section du rapport, « le mot
   est refusé, la chose est reconnue » : on décolle l'étiquette « inégalités de
   santé » d'un projet de santé de CPTS ; elle tombe, sa trace reste, et les
   trois lignes que nomme Aurore — accès aux soins, ruptures, prévention —
   restent sur la feuille. Une seule voix : la note de périmètre le dit. */

.soignants-duo { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: var(--space-4) var(--space-6); align-items: start; }
.soignants-duo .paroles { gap: var(--space-4); }
.soignants-duo .scope-note { grid-column: 1 / -1; }
.projet-etiquete { position: relative; height: 340px; margin: 0; }
.projet-etiquete__feuille {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 240px;
  border: 2.5px solid var(--tr-indigo);
  border-radius: 4px;
  background-color: var(--paper-bright);
}
.projet-etiquete__titre { margin: 0; padding: 9px var(--space-4); background-color: var(--tr-indigo); color: #ffffff; font-size: var(--fs-100); font-weight: 900; letter-spacing: .12em; }
.projet-etiquete__lignes { display: grid; gap: var(--space-2); margin: 0; padding: 70px var(--space-4) 0; list-style: none; }
.projet-etiquete__lignes li { position: relative; padding-left: var(--space-4); color: var(--ink); font-size: var(--fs-200); font-weight: 700; }
.projet-etiquete__lignes li::before { content: ""; position: absolute; top: .45em; left: 0; width: 8px; height: 8px; background-color: var(--tr-turquoise); }
.projet-etiquete__trace { position: absolute; top: 50px; left: 58px; width: 260px; height: 40px; border: 2px dashed var(--muted); border-radius: 4px; opacity: 0; }
.projet-etiquete__etiquette {
  position: absolute;
  top: 52px;
  left: 60px;
  display: grid;
  width: 260px;
  height: 40px;
  margin: 0;
  border: 2px solid var(--tr-indigo);
  border-radius: 4px;
  background-color: var(--tr-turquoise-clair);
  place-content: center;
  color: var(--tr-indigo);
  font-size: var(--fs-200);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transform-origin: 0 0;
}
.projet-etiquete__reaction { position: absolute; top: 256px; left: 0; width: 240px; margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-300); line-height: 1.3; opacity: 0; }

.slide[data-etat="decolle"] .projet-etiquete__etiquette { animation: tr-decoller 1000ms var(--ease-io) 500ms both; }
.slide[data-etat="decolle"] .projet-etiquete__trace { animation: tr-paraitre var(--dur-2) var(--ease-out) 940ms both; }
.slide[data-etat="decolle"] .projet-etiquete__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 1600ms both; }

/* Un coin se soulève (charnière en haut à gauche), puis l'étiquette tombe au
   pied de la feuille, ternie. */
@keyframes tr-decoller {
  0%   { transform: rotate(-2deg); }
  25%  { transform: translate(0, -6px) rotate(-11deg); }
  100% { transform: translate(160px, 212px) rotate(6deg); border-color: var(--muted); background-color: #efede8; color: var(--muted); }
}


/* ───────────────────────────────────────────── 4 · LA BOÎTE À FENTE
   Une porte qui ne laisse passer que ce qui est adossé à la santé. Le registre
   intérieur garde sa ligne sociale blanche, et c'est la conséquence. */

.fente-sanitaire { height: 420px; }
.fente-sanitaire__decor { position: absolute; inset: 0; display: block; width: 1144px; height: 420px; overflow: visible; }
.fente-sanitaire__boite { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 3; }
.fente-sanitaire__fronton { fill: var(--tr-indigo); }
.fente-sanitaire__fronton-mot { fill: #ffffff; font-size: var(--fs-100); font-weight: 900; letter-spacing: .12em; }
.fente-sanitaire__fente { fill: var(--ink); }
.fente-sanitaire__fente-mot { fill: var(--brand-primary); font-size: var(--fs-100); font-weight: 800; letter-spacing: .06em; }
.fente-sanitaire__registre { fill: var(--surface-tint); stroke: var(--brand-accent); stroke-width: 2; }
.fente-sanitaire__registre-titre { fill: var(--brand-primary); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; }
.fente-sanitaire__ligne { fill: var(--ink); font-size: var(--fs-200); }
.fente-sanitaire__trait { stroke: var(--brand-accent); stroke-width: 1.5; }
.fente-sanitaire__blanc { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 6; }
.fente-sanitaire__coche { fill: none; stroke: var(--brand-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fente-sanitaire__tas { fill: none; stroke: var(--data-warm); stroke-width: 3; stroke-dasharray: 8 6; opacity: 0; }
.fente-sanitaire__tas-mot { fill: var(--ink); font-size: var(--fs-200); font-weight: 700; opacity: 0; }

.fente-sanitaire__bulle { top: 0; left: 0; width: 480px; font-size: var(--fs-300); }
.fente-sanitaire__clac { top: 52px; left: 590px; }

.pli-papier,
.liasse__pli {
  position: absolute;
  top: 132px;
  left: 0;
  width: 132px;
  height: 66px;
  margin: 0;
  border: 2px solid var(--tr-turquoise);
  border-radius: 3px;
  background-color: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  display: grid;
  place-content: center;
  padding: 0 var(--space-2);
  opacity: 0;
}
.pli-papier__v { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pli-papier__v path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.pli-papier span, .liasse__pli span { position: relative; padding: 1px 4px; background-color: var(--paper-bright); }
.pli-papier--sante { border-color: var(--tr-indigo); width: 150px; }

.slide[data-etat="trie"] .pli-papier--1 { animation: tr-buter-1 900ms var(--ease-io) 100ms both; }
.slide[data-etat="trie"] .pli-papier--2 { animation: tr-buter-2 900ms var(--ease-io) 760ms both; }
.slide[data-etat="trie"] .pli-papier--3 { animation: tr-buter-3 900ms var(--ease-io) 1420ms both; }
.slide[data-etat="trie"] .pli-papier--sante { animation: tr-entrer 900ms var(--ease-io) 2140ms both; }
.slide[data-etat="trie"] .fente-sanitaire__clac { animation: tr-crier 700ms var(--ease-out) 520ms both; }
.slide[data-etat="trie"] .fente-sanitaire__coche { animation: tr-paraitre var(--dur-2) var(--ease-out) 3080ms both; }
.slide[data-etat="trie"] .fente-sanitaire__coche--2 { animation-delay: 3240ms; }
.slide[data-etat="trie"] :is(.fente-sanitaire__tas, .fente-sanitaire__tas-mot) { animation: tr-paraitre var(--dur-3) var(--ease-out) 3420ms both; }

/* Les plis butent contre la fente (x 600), retombent et s'empilent devant. */
@keyframes tr-buter-1 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  50%  { transform: translate(470px, 0); }
  60%  { transform: translate(436px, 0) rotate(-6deg); }
  100% { opacity: 1; transform: translate(404px, 214px) rotate(-4deg); }
}
@keyframes tr-buter-2 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  50%  { transform: translate(470px, 0); }
  60%  { transform: translate(436px, 0) rotate(5deg); }
  100% { opacity: 1; transform: translate(384px, 168px) rotate(5deg); }
}
@keyframes tr-buter-3 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  50%  { transform: translate(470px, 0); }
  60%  { transform: translate(436px, 0) rotate(-4deg); }
  100% { opacity: 1; transform: translate(420px, 122px) rotate(-2deg); }
}
@keyframes tr-entrer {
  0%   { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  10%  { opacity: 1; }
  50%  { transform: translate(452px, 0); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translate(600px, 0); clip-path: inset(0 100% 0 0); }
}


/* ───────────────────────────────────────────── 4 bis · LA COMPLICATION
   Troisième retour de Nicolas (2 octobre 2026) : une fois tout cela, vient la
   complication ; elle permet d'entrer, mais il faut faire sentir la perte de
   chance. La même boîte, le même tas : le temps s'arrache feuille à feuille,
   les plis se nouent en liasse, un tampon COMPLICATION leur donne le motif de
   santé, et la liasse passe la fente. Les feuilles arrachées restent dehors :
   c'est la conséquence, et le seul chaud de la slide. Pas de gag : le corpus
   parle ici de crise, parfois vitale. */

.complication-tardive { height: 420px; }
.complication-tardive__decor { position: absolute; inset: 0; display: block; width: 1144px; height: 420px; overflow: visible; }
.complication-tardive__boite { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 3; }
.complication-tardive__fronton { fill: var(--tr-indigo); }
.complication-tardive__fronton-mot { fill: #ffffff; font-size: var(--fs-100); font-weight: 900; letter-spacing: .12em; }
.complication-tardive__fente { fill: var(--ink); }
.complication-tardive__fente-mot { fill: var(--brand-primary); font-size: var(--fs-100); font-weight: 800; letter-spacing: .06em; }
.complication-tardive__registre { fill: var(--surface-tint); stroke: var(--brand-accent); stroke-width: 2; }
.complication-tardive__registre-titre { fill: var(--brand-primary); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; }
.complication-tardive__ligne { fill: var(--ink); font-size: var(--fs-200); }
.complication-tardive__ligne--ancienne { fill: var(--muted); }
.complication-tardive__trait { stroke: var(--brand-accent); stroke-width: 1.5; }
.complication-tardive__blanc { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 6; }
.complication-tardive__coche { fill: none; stroke: var(--brand-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.complication-tardive__coche--ancienne { stroke: var(--muted); opacity: 1; }
.complication-tardive__perte { fill: none; stroke: var(--data-warm); stroke-width: 3; stroke-dasharray: 8 6; opacity: 0; }
/* .tr-figure svg text impose l'interface : il faut la même portée pour rendre la voix éditoriale. */
.tr-figure .complication-tardive__perte-mot { fill: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-300); opacity: 0; }
.complication-tardive__perte-sous { fill: var(--muted); font-size: var(--fs-100); font-weight: 700; opacity: 0; }
.complication-tardive__bulle { top: 0; left: 0; width: 470px; font-size: var(--fs-300); }

/* Le calendrier mural : on en arrache les feuilles, comme au cinéma. Aucune
   date n'y est écrite — le corpus ne mesure aucun délai. */
.ephemeride {
  position: absolute;
  top: 146px;
  left: 112px;
  width: 128px;
  height: 132px;
  border: 2px solid var(--tr-indigo);
  border-radius: 4px;
  background-color: var(--paper-bright);
}
.ephemeride::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 22px; background-color: var(--tr-indigo); }
.ephemeride::after { content: ""; position: absolute; top: -9px; left: 30px; width: 60px; height: 16px; border-right: 4px solid var(--tr-turquoise); border-left: 4px solid var(--tr-turquoise); }
.ephemeride__feuille {
  position: absolute;
  top: 30px;
  left: 6px;
  width: 112px;
  height: 92px;
  border: 1.5px solid var(--line-strong);
  border-radius: 2px;
  background-color: var(--paper-bright);
  transform-origin: 50% 0;
}
.ephemeride__feuille svg { display: block; width: 100%; height: 100%; }
.ephemeride__feuille rect { fill: none; stroke: var(--brand-accent); stroke-width: 1; }
.ephemeride__entete { stroke: var(--tr-indigo); stroke-width: 3; }

/* La liasse : les trois plis restés devant (positions d'arrivée de la slide
   précédente), qui se rassemblent au droit de la fente. Le conteneur porte
   l'entrée ; son bord de découpe reste sur la fente (x 640) pendant tout le
   trajet, parce que la translation et la découpe avancent du même pas. */
.liasse { position: absolute; top: 126px; left: 420px; width: 200px; height: 84px; }
.liasse__pli { top: 9px; left: 34px; opacity: 1; }
.liasse__pli--1 { transform: translate(-50px, 211px) rotate(-4deg); }
.liasse__pli--2 { transform: translate(-70px, 165px) rotate(5deg); }
.liasse__pli--3 { transform: translate(-34px, 119px) rotate(-2deg); }
.liasse__ficelle { position: absolute; inset: 0; width: 200px; height: 84px; overflow: visible; }
.liasse__ficelle path { fill: none; stroke: var(--tr-turquoise); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.liasse__tampon {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 160px;
  margin: 0;
  padding: 3px 0;
  border: 3px solid var(--tr-indigo);
  border-radius: 4px;
  background-color: var(--paper-bright);
  color: var(--tr-indigo);
  font-size: var(--fs-200);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-8deg);
  opacity: 0;
}

.slide[data-etat="complique"] .ephemeride__feuille--4 { animation: tr-arracher-4 620ms var(--ease-io) 0ms both; }
.slide[data-etat="complique"] .ephemeride__feuille--3 { animation: tr-arracher-3 620ms var(--ease-io) 480ms both; }
.slide[data-etat="complique"] .ephemeride__feuille--2 { animation: tr-arracher-2 620ms var(--ease-io) 960ms both; }
.slide[data-etat="complique"] .ephemeride__feuille--1 { animation: tr-arracher-1 620ms var(--ease-io) 1440ms both; }
.slide[data-etat="complique"] .liasse__pli--3 { animation: tr-nouer-3 1000ms var(--ease-io) 300ms both; }
.slide[data-etat="complique"] .liasse__pli--2 { animation: tr-nouer-2 1000ms var(--ease-io) 600ms both; }
.slide[data-etat="complique"] .liasse__pli--1 { animation: tr-nouer-1 1000ms var(--ease-io) 900ms both; }
.slide[data-etat="complique"] .liasse__ficelle path { animation: tr-ficeler 600ms var(--ease-out) 1950ms both; }
.slide[data-etat="complique"] .liasse__tampon { animation: tr-tamponner 420ms var(--ease-out) 2650ms both; }
.slide[data-etat="complique"] .liasse { animation: tr-entrer-tard 1000ms var(--ease-io) 3250ms both; }
.slide[data-etat="complique"] .complication-tardive__coche:not(.complication-tardive__coche--ancienne) { animation: tr-paraitre var(--dur-2) var(--ease-out) 4350ms both; }
.slide[data-etat="complique"] :is(.complication-tardive__perte, .complication-tardive__perte-mot, .complication-tardive__perte-sous) { animation: tr-paraitre var(--dur-3) var(--ease-out) 4600ms both; }

/* Chaque feuille est arrachée (un coup sec vers le haut), puis tombe. Celle
   qui tombe passe au-dessus de tout ; posée, elle recouvre les précédentes. */
@keyframes tr-arracher-4 { 0% { z-index: 20; transform: none; } 18% { transform: translate(4px, -8px) rotate(-9deg); } 99% { z-index: 20; } 100% { z-index: 11; transform: translate(106px, 136px) rotate(10deg) scale(.85); } }
@keyframes tr-arracher-3 { 0% { z-index: 20; transform: none; } 18% { transform: translate(-4px, -8px) rotate(8deg); } 99% { z-index: 20; } 100% { z-index: 12; transform: translate(52px, 142px) rotate(-4deg) scale(.85); } }
@keyframes tr-arracher-2 { 0% { z-index: 20; transform: none; } 18% { transform: translate(4px, -8px) rotate(-8deg); } 99% { z-index: 20; } 100% { z-index: 13; transform: translate(-14px, 136px) rotate(8deg) scale(.85); } }
@keyframes tr-arracher-1 { 0% { z-index: 20; transform: none; } 18% { transform: translate(-4px, -8px) rotate(9deg); } 99% { z-index: 20; } 100% { z-index: 14; transform: translate(-80px, 140px) rotate(-12deg) scale(.85); } }
/* En attendant, les plis se fanent : le turquoise vire au gris du papier
   vieilli. C'est la dégradation, pas une donnée. */
@keyframes tr-nouer-1 { from { transform: translate(-50px, 211px) rotate(-4deg); } to { transform: translate(-8px, 7px) rotate(-4deg); border-color: var(--muted); background-color: #efede8; } }
@keyframes tr-nouer-2 { from { transform: translate(-70px, 165px) rotate(5deg); } to { transform: translate(8px, -5px) rotate(4deg); border-color: var(--muted); background-color: #efede8; } }
@keyframes tr-nouer-3 { from { transform: translate(-34px, 119px) rotate(-2deg); } to { transform: translate(0, 0) rotate(-1deg); border-color: var(--muted); background-color: #efede8; } }
@keyframes tr-ficeler { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-tamponner {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.8); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes tr-entrer-tard {
  from { transform: translateX(0); clip-path: inset(-240px -20px -240px -240px); }
  to   { transform: translateX(220px); clip-path: inset(-240px 200px -240px -240px); }
}


/* ───────────────────────────────────────────── 5 · LE CADRE EXPLICATIF
   REPRISE de percists-2026-fas-paca (`percists-bascule-patient`), copiée
   telle quelle. Contrat percists-bascule-cadre-validee : les trois faits et
   les trois qualifications restent fixes ; une seule opération déplace le
   cadre explicatif. Ne pas redessiner. */

.cadre-explicatif { position: relative; min-height: 345px; }
.cadre-explicatif__colonne {
  position: absolute;
  z-index: 2;
  top: 64px;
  display: grid;
  gap: var(--space-3);
  width: 330px;
}
.cadre-explicatif__colonne[data-adresse="systeme"] { left: 72px; }
.cadre-explicatif__colonne[data-adresse="patient"] { right: 72px; }
.cadre-explicatif__colonne > b {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
}
.cadre-explicatif__terme {
  display: grid;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--paper-bright);
  place-content: center;
  color: var(--ink);
  font-size: var(--fs-300);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.cadre-explicatif__colonne[data-adresse="systeme"] .cadre-explicatif__terme {
  border-color: var(--data-cool);
  color: var(--brand-primary);
}
.cadre-explicatif__butee {
  position: absolute;
  top: 104px;
  bottom: 54px;
  left: 50%;
  display: grid;
  width: 136px;
  border-right: 2px dotted var(--line-strong);
  border-left: 2px dotted var(--line-strong);
  transform: translateX(-50%);
  place-content: center;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}
.cadre-explicatif__cadre {
  position: absolute;
  z-index: 4;
  top: 38px;
  left: 42px;
  width: 390px;
  height: 278px;
  border: 4px solid var(--data-warm);
  border-radius: var(--radius-md);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 980ms var(--ease-io);
}
.cadre-explicatif__cadre > span {
  position: absolute;
  top: -13px;
  left: 50%;
  padding: 2px var(--space-2);
  background-color: var(--paper-bright);
  color: var(--data-warm);
  font-size: var(--fs-100);
  font-weight: 900;
  letter-spacing: .08em;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* Le décalage se règle sur la largeur RÉELLE de la figure — 1 062 px dans le
   cadre hôte, pas les 1 144 px du deck réservoir : avec 670 px en dur, le
   cadre s'arrêtait à 82 px de la colonne qu'il devait entourer (retour de
   Nicolas du 2 octobre 2026). Arrivée = largeur − 72 − 330 − 30 ; départ 42. */
.cadre-explicatif { container-type: inline-size; }
.slide[data-etat="requalifie"] .cadre-explicatif__cadre {
  transform: translateX(calc(100cqw - 474px));
}

/* Trois temps, à la demande de Nicolas (2 octobre 2026) : les faits sont
   posés ; l'action bute et une autre explication se présente ; le cadre
   change d'adresse, et l'on dit qui le déplace. Une fois posés, faits et
   qualifications ne bougent plus : le contrat percists-bascule-cadre-validee
   tient, et sa seule opération reste le déplacement du cadre. */
.cadre-explicatif__terme, .cadre-explicatif__butee, .cadre-explicatif__relecture { opacity: 0; }
.cadre-explicatif__colonne[data-adresse="systeme"] .cadre-explicatif__terme { grid-auto-flow: column; align-items: center; gap: var(--space-2); }
.cadre-explicatif__terme .ico { width: 22px; height: 22px; }
.cadre-explicatif__relecture {
  position: absolute;
  bottom: -17px;
  left: 50%;
  padding: 0 var(--space-2);
  background-color: var(--paper-bright);
  color: var(--tr-indigo);
  font-family: var(--font-editorial);
  font-size: var(--fs-300);
  font-style: italic;
  transform: translateX(-50%);
  white-space: nowrap;
}

.slide:is([data-etat="faits"], [data-etat="butee"], [data-etat="requalifie"]) [data-adresse="systeme"] .cadre-explicatif__terme { opacity: 1; animation: tr-poser 420ms var(--ease-out) both; }
.slide:is([data-etat="faits"], [data-etat="butee"], [data-etat="requalifie"]) [data-adresse="systeme"] .cadre-explicatif__terme:nth-of-type(2) { animation-delay: 200ms; }
.slide:is([data-etat="faits"], [data-etat="butee"], [data-etat="requalifie"]) [data-adresse="systeme"] .cadre-explicatif__terme:nth-of-type(3) { animation-delay: 400ms; }
.slide:is([data-etat="butee"], [data-etat="requalifie"]) .cadre-explicatif__butee { opacity: 1; animation: tr-baisser-butee 420ms var(--ease-out) both; }
.slide:is([data-etat="butee"], [data-etat="requalifie"]) [data-adresse="patient"] .cadre-explicatif__terme { opacity: 1; animation: tr-poser 420ms var(--ease-out) 520ms both; }
.slide:is([data-etat="butee"], [data-etat="requalifie"]) [data-adresse="patient"] .cadre-explicatif__terme:nth-of-type(2) { animation-delay: 720ms; }
.slide:is([data-etat="butee"], [data-etat="requalifie"]) [data-adresse="patient"] .cadre-explicatif__terme:nth-of-type(3) { animation-delay: 920ms; }
.slide[data-etat="requalifie"] .cadre-explicatif__relecture { opacity: 1; animation: tr-paraitre var(--dur-3) var(--ease-out) 1000ms both; }

/* Une carte qu'on pose sur la table ; une barrière qu'on abaisse. */
@keyframes tr-poser { from { opacity: 0; transform: translateY(-12px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes tr-baisser-butee { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }


/* ───────────────────────────────────────────── 6 · LES PONTS DE LA COORDINATION
   Trois bandes de papier se déplient en pont (rotateY, charnière gauche) : la
   profondeur dit la distance à franchir. Le même geste, tenté trois fois. */

.ponts-papier { height: 380px; }
.ponts-papier__decor { position: absolute; inset: 0; display: block; width: 1144px; height: 380px; overflow: visible; }
.ponts-papier__rive { fill: var(--surface-tint); stroke: var(--tr-indigo); stroke-width: 2.5; }
.ponts-papier__rive-nom { fill: var(--tr-indigo); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; }
.ponts-papier__rive-sous { fill: var(--ink); font-size: var(--fs-200); }
.ponts-papier__parole { fill: var(--muted); font-style: italic; }
.ponts-papier__file { fill: var(--paper-bright); stroke: var(--tr-turquoise); stroke-width: 2; }
.ponts-papier__vide { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 8 7; }
.ponts-papier__vide-mot { fill: var(--muted); font-family: var(--font-editorial); font-size: var(--fs-300); font-style: italic; }
.ponts-papier__verbe { fill: var(--ink); font-size: var(--fs-300); font-weight: 900; letter-spacing: .04em; }
.ponts-papier__verbe--portee { fill: var(--tr-indigo); }
.ponts-papier__portee { fill: var(--muted); font-size: var(--fs-200); }
.ponts-papier__cadre-portee { fill: none; stroke: var(--tr-indigo); stroke-width: 2.5; }

.ponts-papier__scene { position: absolute; left: 236px; width: 350px; height: 22px; perspective: 900px; perspective-origin: 0 50%; }
.ponts-papier__scene--1 { top: 67px; }
.ponts-papier__scene--2 { top: 185px; }
.ponts-papier__scene--3 { top: 303px; }
.ponts-papier__bande { position: absolute; inset: 0; border: 2px solid var(--tr-indigo); border-radius: 2px; background-color: var(--paper-bright); transform-origin: 0 50%; transform: rotateY(-82deg); }
.ponts-papier__ticket {
  position: absolute;
  left: 40px;
  width: 180px;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 2px solid var(--tr-turquoise);
  border-radius: 3px;
  background-color: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: 1.2;
}
.ponts-papier__ticket--1 { top: 58px; }
.ponts-papier__ticket--2 { top: 172px; }
.ponts-papier__ticket--3 { top: 294px; }
.ponts-papier__ticket--3::after { content: ""; position: absolute; inset: -2px; border: 4px solid var(--data-warm); border-radius: 3px; opacity: 0; }

.slide[data-etat="ponts"] .ponts-papier__scene--1 .ponts-papier__bande { animation: tr-deplier-pont 800ms var(--ease-io) 240ms both; }
.slide[data-etat="ponts"] .ponts-papier__ticket--1 { animation: tr-raccorder 600ms var(--ease-io) 1100ms both; }
.slide[data-etat="ponts"] .ponts-papier__scene--2 .ponts-papier__bande { animation: tr-deplier-pont 800ms var(--ease-io) 1200ms both; }
.slide[data-etat="ponts"] .ponts-papier__ticket--2 { animation: tr-attendre 600ms var(--ease-io) 2060ms both; }
.slide[data-etat="ponts"] .ponts-papier__scene--3 .ponts-papier__bande { animation: tr-deplier-pont 800ms var(--ease-io) 2160ms both; }
.slide[data-etat="ponts"] .ponts-papier__ticket--3 { animation: tr-buter-vide 600ms var(--ease-io) 3020ms both; }
.slide[data-etat="ponts"] .ponts-papier__ticket--3::after { animation: tr-paraitre var(--dur-2) var(--ease-out) 3660ms both; }

@keyframes tr-deplier-pont {
  0%   { transform: rotateY(-82deg); }
  80%  { transform: rotateY(4deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes tr-raccorder { from { transform: translate(0, 0); } to { transform: translate(600px, 0); } }
@keyframes tr-attendre { from { transform: translate(0, 0); } to { transform: translate(560px, 0); } }
@keyframes tr-buter-vide {
  0%   { transform: translate(0, 0); }
  70%  { transform: translate(370px, 0); }
  85%  { transform: translate(350px, 0); }
  100% { transform: translate(356px, 0); }
}


/* ───────────────────────────────────────────── 7 · LA TABLE SERVIE
   Vue de dessus, sans perspective : la table est le champ où les pistes se
   distribuent, et une carte n'a pas de place. */

/* On voit d'abord la table en perspective, comme assis devant elle ; une fois
   les pistes distribuées, la vue se redresse au-dessus pour la lecture. La
   charnière est au bord avant : rien ne grossit vers l'œil. */
.tablee-pistes { height: 440px; perspective: 1500px; perspective-origin: 50% 0; }
.tablee-pistes__plateau { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(46deg); }
.slide[data-etat="servie"] .tablee-pistes__plateau { animation: tr-redresser 480ms var(--ease-io) 2140ms both; }
@keyframes tr-redresser { from { transform: rotateX(46deg); } to { transform: rotateX(0deg); } }
.tablee-pistes__decor { position: absolute; inset: 0; display: block; width: 1144px; height: 440px; overflow: visible; }
.tablee-pistes__table { fill: var(--tr-turquoise-clair); stroke: var(--tr-indigo); stroke-width: 3; }
.tablee-pistes__bord { fill: none; stroke: var(--brand-accent); stroke-width: 1.5; opacity: .5; }
.tablee-pistes__chevalet { fill: var(--paper-bright); stroke: var(--tr-indigo); stroke-width: 2.5; }
.tablee-pistes__chevalet--blanc { stroke-dasharray: 7 5; stroke: var(--muted); }
.tablee-pistes__nom { fill: var(--tr-indigo); font-size: var(--fs-200); font-weight: 900; letter-spacing: .04em; }
.tablee-pistes__sous { fill: var(--muted); font-size: var(--fs-100); font-weight: 700; }

.carte-piste {
  position: absolute;
  width: 250px;
  min-height: 58px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--tr-indigo);
  border-radius: 4px;
  background-color: var(--paper-bright);
  color: var(--ink);
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: 1.25;
}
.carte-piste--propose { border-style: dashed; }
/* Ajout de Nicolas, hors rapport (2 octobre 2026) : la mention est écrite sur
   la carte, pas codée par un trait — la salle doit pouvoir la lire. */
.carte-piste--hors-rapport small { color: var(--tr-indigo); }
.carte-piste small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-100); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.carte-piste--1 { top: 104px; left: 24px; }
.carte-piste--2 { top: 182px; left: 24px; }
.carte-piste--7 { top: 260px; left: 24px; }
.carte-piste--3 { top: 140px; left: 854px; }
.carte-piste--4 { top: 218px; left: 854px; }
.carte-piste--5 { top: 360px; left: 270px; width: 280px; }
.carte-piste--6 { top: 360px; left: 594px; width: 280px; }
.carte-piste--question {
  top: 180px;
  left: 482px;
  width: 180px;
  min-height: 0;
  border-width: 3px;
  border-color: var(--tr-indigo);
  font-family: var(--font-editorial);
  font-size: var(--fs-300);
  font-weight: 400;
  text-align: center;
}
.carte-piste--question::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 4px solid var(--data-warm);
  border-radius: 4px;
  opacity: 0;
}
.tablee-pistes__dossier { position: absolute; top: 226px; left: 528px; width: 88px; height: 60px; }
.tablee-pistes__dossier svg { display: block; width: 88px; height: 60px; overflow: visible; }
.tablee-pistes__reaction { position: absolute; top: 62px; left: 652px; width: 240px; margin: 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-300); text-align: left; opacity: 0; }

.slide[data-etat="servie"] .carte-piste--1 { animation: tr-servir-1 520ms var(--ease-out) 300ms both; }
.slide[data-etat="servie"] .carte-piste--2 { animation: tr-servir-2 520ms var(--ease-out) 560ms both; }
.slide[data-etat="servie"] .carte-piste--3 { animation: tr-servir-3 520ms var(--ease-out) 820ms both; }
.slide[data-etat="servie"] .carte-piste--4 { animation: tr-servir-4 520ms var(--ease-out) 1080ms both; }
.slide[data-etat="servie"] .carte-piste--5 { animation: tr-servir-5 520ms var(--ease-out) 1340ms both; }
.slide[data-etat="servie"] .carte-piste--6 { animation: tr-servir-6 520ms var(--ease-out) 1600ms both; }
.slide[data-etat="servie"] .carte-piste--7 { animation: tr-servir-7 520ms var(--ease-out) 1860ms both; }
.slide[data-etat="servie"] .carte-piste--question { animation: tr-hesiter 2500ms var(--ease-io) 2680ms both; }
.slide[data-etat="servie"] .carte-piste--question::after { animation: tr-paraitre var(--dur-2) var(--ease-out) 5200ms both; }
.slide[data-etat="servie"] .tablee-pistes__reaction { animation: tr-paraitre var(--dur-3) var(--ease-out) 5300ms both; }

/* Au départ, toutes les cartes sont en paquet au centre de la table. */
.tablee-pistes .carte-piste:not(.carte-piste--question) { opacity: 0; }
@keyframes tr-servir-1 { from { opacity: 0; transform: translate(423px, 73px) rotate(-8deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-2 { from { opacity: 0; transform: translate(423px, -5px) rotate(6deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-7 { from { opacity: 0; transform: translate(423px, -83px) rotate(-4deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-3 { from { opacity: 0; transform: translate(-407px, 37px) rotate(8deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-4 { from { opacity: 0; transform: translate(-407px, -41px) rotate(-6deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-5 { from { opacity: 0; transform: translate(162px, -192px) rotate(-5deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-servir-6 { from { opacity: 0; transform: translate(-162px, -192px) rotate(5deg) scale(.6); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
/* L'hésitation dure plus qu'il ne faut : c'est l'attente qui fait la question.
   Vers la place des dispositifs, un arrêt ; vers le chevalet blanc, un arrêt ;
   puis le centre. */
@keyframes tr-hesiter {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-112px, 0) rotate(-4deg); }
  36%  { transform: translate(-112px, 0) rotate(-4deg); }
  56%  { transform: translate(0, -74px) rotate(3deg); }
  72%  { transform: translate(0, -74px) rotate(3deg); }
  92%  { transform: translate(0, 4px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}


/* ───────────────────────────────────────────── 8 · LES TROIS QUESTIONS */

.questions-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
/* Trois cartes retournées : on les découvre une à une, comme on retourne une
   carte sur la table — la profondeur dit qu'elles ont deux faces. */
.questions-table li { position: relative; min-height: 330px; perspective: 1200px; }
.carte-question__carton { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.carte-question__face { position: absolute; inset: 0; border: 2px solid var(--tr-indigo); border-radius: 4px; backface-visibility: hidden; }
.carte-question__face--dos { display: grid; background-color: var(--tr-indigo); place-content: center; transform: rotateY(180deg); }
.carte-question__face--dos span { color: var(--tr-turquoise); font-family: var(--font-editorial); font-size: var(--fs-1000); line-height: 1; }
.carte-question__face--recto {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) var(--space-4);
  background-color: var(--paper-bright);
}
.slide[data-etat="q1"] .carte-question--1 .carte-question__carton,
.slide[data-etat="q2"] :is(.carte-question--1, .carte-question--2) .carte-question__carton,
.slide[data-etat="q3"] .carte-question__carton { transform: rotateY(0deg); }
.slide[data-etat="q1"] .carte-question--1 .carte-question__carton,
.slide[data-etat="q2"] .carte-question--2 .carte-question__carton,
.slide[data-etat="q3"] .carte-question--3 .carte-question__carton { animation: tr-retourner-carte 680ms var(--ease-io) both; }
@keyframes tr-retourner-carte { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
.carte-question__face--recto::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-bottom: 2px solid var(--brand-accent);
  border-left: 2px solid var(--brand-accent);
  background-color: var(--surface-tint);
}
.questions-table b { color: var(--tr-indigo); font-family: var(--font-editorial); font-size: var(--fs-700); font-weight: 400; line-height: 1; }
.questions-table p { margin: var(--space-3) 0 0; color: var(--ink); font-family: var(--font-editorial); font-size: var(--fs-400); line-height: 1.3; }
.questions-table .questions-table__lecture { color: var(--muted); font-family: var(--font-interface); font-size: var(--fs-200); }
.questions-table .questions-table__politiques { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); color: var(--brand-primary); font-family: var(--font-interface); font-size: var(--fs-200); font-weight: 800; }


/* ───────────────────────────────────────────── 9 · LE DOSSIER EN MINIATURE
   Sur les deux repères : la même chemise avance d'un cran vers la table.
   Positions fixes, aucune animation — le mouvement est entre les slides. */

/* `.deck .slide >` : le cadre d'identité pose `position: relative` sur tous les
   enfants directs d'une slide ; la miniature doit rester ancrée au coin. */
.deck .slide > .jalon-dossier { position: absolute; right: 68px; bottom: 64px; width: 300px; height: 90px; margin: 0; }
.jalon-dossier svg { display: block; width: 300px; height: 90px; overflow: visible; }
.jalon-dossier__chemin { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-dasharray: 4 7; }
.jalon-dossier__table { fill: none; stroke: #ffffff; stroke-width: 2.5; }
.jalon-dossier__chemise { fill: var(--brand-primary); stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; }
.jalon-dossier__onglet { fill: var(--brand-primary); stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; }

.repere .repere__question { margin-top: var(--space-6); }
.repere .repere__piste { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); max-width: 720px; margin-top: var(--space-4); }
.repere .repere__piste b { padding: 2px var(--space-2); border: 1.5px solid currentColor; border-radius: 3px; font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; align-self: start; }


/* ───────────────────────────────────────────── 10 · LA FIN */

.fin-table { display: grid; gap: var(--space-6); width: 80%; }
.fin-table__ligne { display: grid; gap: 4px; }
.fin-table__ligne b { color: var(--brand-primary); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fin-table__ligne span { color: var(--ink); font-size: var(--fs-300); line-height: 1.35; }
.fin-table__ligne a { color: var(--brand-primary); font-weight: 800; }


/* ───────────────────────────────────────────── 12 · LA TABLE DE L'ENQUÊTE
   Vingt-deux chevalets, trois groupes nommés et séparés par la topologie ; les
   couleurs de données y identifient des groupes, jamais un rang. Les quatre
   places vides arrivent au clic. */

.tablee-enquete { height: 420px; }
.tablee-enquete__schema { position: absolute; top: 0; left: 0; display: block; width: 700px; height: 420px; overflow: visible; }
.tablee-enquete__table { fill: var(--tr-turquoise-clair); stroke: var(--tr-indigo); stroke-width: 3; }
.tablee-enquete__chevalet { stroke: #ffffff; stroke-width: 2; }
.tablee-enquete__chevalet--dac { fill: #0d3c69; }
.tablee-enquete__chevalet--cpts { fill: #3f76ac; }
.tablee-enquete__chevalet--ru { fill: #89b2d6; }
.tablee-enquete__groupe { fill: var(--ink); font-size: var(--fs-200); font-weight: 800; }
.tablee-enquete__sur-table { fill: var(--tr-indigo); font-family: var(--font-editorial); font-size: var(--fs-500); }
.tablee-enquete__titre-absents { fill: var(--muted); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; }
.tablee-enquete__vide { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 5; }
.tablee-enquete__vide-nom { fill: var(--muted); font-size: var(--fs-200); font-weight: 700; }
.tablee-enquete__pourquoi { position: absolute; top: 0; left: 736px; width: 408px; color: var(--ink); }
.tablee-enquete__pourquoi h3 { margin: 0 0 var(--space-2); color: var(--tr-indigo); font-family: var(--font-editorial); font-size: var(--fs-600); font-weight: 400; }
.tablee-enquete__pourquoi p { margin: 0 0 var(--space-3); font-size: var(--fs-300); line-height: 1.4; }
.tablee-enquete__pourquoi dl { display: grid; grid-template-columns: 56px 1fr; gap: 6px var(--space-3); margin: 0 0 var(--space-3); }
.tablee-enquete__pourquoi dt { color: var(--tr-indigo); font-size: var(--fs-200); font-weight: 900; }
.tablee-enquete__pourquoi dd { margin: 0; color: var(--muted); font-size: var(--fs-200); line-height: 1.3; }
.tablee-enquete__pourquoi .tablee-enquete__chiffres { padding-top: var(--space-2); border-top: 2px solid var(--tr-turquoise); color: var(--tr-indigo); font-size: var(--fs-200); font-weight: 800; }


/* ───────────────────────────────────────────── 13 · LE RESTE DU PAQUET
   La liste plus complète : elle se déploie en cascade, sans devenir le cœur. */

.paquet-pistes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.paquet-pistes__colonne h3 { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 2px solid var(--tr-turquoise); color: var(--tr-indigo); font-size: var(--fs-100); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.paquet-pistes__colonne ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; perspective: 900px; }
.paquet-pistes__colonne li { padding: 6px 10px; border: 1.5px solid var(--line-strong); border-left: 4px solid var(--tr-turquoise); border-radius: 3px; background-color: var(--paper-bright); color: var(--ink); font-size: var(--fs-200); line-height: 1.25; opacity: 0; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li { animation: tr-glisser-piste 420ms var(--ease-out) both; }
.slide[data-etat="deplie"] .paquet-pistes__colonne:nth-child(2) li { animation-delay: 120ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne:nth-child(3) li { animation-delay: 240ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne:nth-child(4) li { animation-delay: 360ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(2) { animation-duration: 520ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(3) { animation-duration: 620ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(4) { animation-duration: 720ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(5) { animation-duration: 820ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(6) { animation-duration: 920ms; }
.slide[data-etat="deplie"] .paquet-pistes__colonne li:nth-child(7) { animation-duration: 1020ms; }
/* Chaque piste se déplie sur son bord haut, comme une bande de papier. */
.paquet-pistes__colonne li { transform-origin: 50% 0; }
@keyframes tr-glisser-piste { 0% { opacity: 0; transform: rotateX(-88deg); } 55% { opacity: 0; transform: rotateX(-88deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotateX(0deg); } }


/* ───────────────────────────────────────────── 11 · TIRAGE ET MOUVEMENT RÉDUIT
   Chrome imprime la PREMIÈRE image d'une animation. Chaque effet qui part de
   zéro écrit donc ici son arrivée. Le mouvement réduit montre la même arrivée,
   sans trajet. La salle des guichets reste en 3D au repos : c'est sa forme. */

@media print {
  .cadre-explicatif__cadre { transform: translateX(calc(100cqw - 474px)) !important; transition: none !important; }
  .cadre-explicatif :is(.cadre-explicatif__terme, .cadre-explicatif__butee, .cadre-explicatif__relecture) { opacity: 1 !important; clip-path: none !important; animation: none !important; }
  .carte-calque--prelude .carte-calque__feuille { transform: none !important; opacity: 1 !important; animation: none !important; }
  .carte-calque--prelude .carte-calque__classe { stroke: #ffffff !important; animation: none !important; }
  .carte-calque--prelude .carte-calque__classe--0 { fill: #d6e5f2 !important; }
  .carte-calque--prelude .carte-calque__classe--1 { fill: #89b2d6 !important; }
  .carte-calque--prelude .carte-calque__classe--2 { fill: #3f76ac !important; }
  .carte-calque--prelude .carte-calque__classe--3 { fill: #0d3c69 !important; }
  .carte-calque--prelude :is(.carte-calque__loupe, .carte-calque__lien, .carte-calque__reaction) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .carte-epinglee .carte-calque__repere-ancre { opacity: 1 !important; transition: none !important; }
  .carte-epinglee .etiquette-papier { animation: none !important; transform: none !important; }

  .enveloppe__rabat { transform: rotateX(180deg) !important; animation: none !important; }
  .enveloppe { transform: rotate(122deg) !important; animation: none !important; }
  .enveloppe-reponse :is(.enveloppe-reponse__carte, .enveloppe-reponse__billet, .enveloppe-reponse__reaction, .enveloppe-reponse__entete) { opacity: 1 !important; transform: none !important; animation: none !important; }

  .salle-guichets__ding, .fente-sanitaire__clac { opacity: 0 !important; animation: none !important; }
  .salle-guichets__bouton { animation: none !important; }
  .dossier-papier--sol { transform: translate(0, -110px) !important; animation: none !important; }
  .salle-guichets .pancarte__carton { transform: rotateY(180deg) !important; animation: none !important; }
  .dossier-papier--sol .dossier-papier__cadre, .salle-guichets__reaction { opacity: 1 !important; animation: none !important; }

  .appui-titulaire__dossier--soin { opacity: 1 !important; transform: none !important; animation: none !important; }
  .appui-titulaire__dossier--social { opacity: 1 !important; transform: rotate(7deg) !important; animation: none !important; }
  .appui-titulaire__coche, .appui-titulaire__reaction { opacity: 1 !important; animation: none !important; }

  .projet-etiquete__etiquette { transform: translate(160px, 212px) rotate(6deg) !important; border-color: var(--muted) !important; background-color: #efede8 !important; color: var(--muted) !important; animation: none !important; }
  .projet-etiquete__trace, .projet-etiquete__reaction { opacity: 1 !important; animation: none !important; }
  .pli-papier--1 { opacity: 1 !important; transform: translate(404px, 214px) rotate(-4deg) !important; animation: none !important; }
  .pli-papier--2 { opacity: 1 !important; transform: translate(384px, 168px) rotate(5deg) !important; animation: none !important; }
  .pli-papier--3 { opacity: 1 !important; transform: translate(420px, 122px) rotate(-2deg) !important; animation: none !important; }
  .pli-papier--sante { opacity: 0 !important; animation: none !important; }
  .fente-sanitaire__coche, .fente-sanitaire__tas, .fente-sanitaire__tas-mot { opacity: 1 !important; animation: none !important; }

  .ephemeride__feuille--4 { z-index: 11 !important; transform: translate(106px, 136px) rotate(10deg) scale(.85) !important; animation: none !important; }
  .ephemeride__feuille--3 { z-index: 12 !important; transform: translate(52px, 142px) rotate(-4deg) scale(.85) !important; animation: none !important; }
  .ephemeride__feuille--2 { z-index: 13 !important; transform: translate(-14px, 136px) rotate(8deg) scale(.85) !important; animation: none !important; }
  .ephemeride__feuille--1 { z-index: 14 !important; transform: translate(-80px, 140px) rotate(-12deg) scale(.85) !important; animation: none !important; }
  /* Entrée : la liasse n'est plus visible. Sans animation, ses plis reviendraient
     à leur place de départ, DANS la zone découpée — le tirage l'a montré. */
  .liasse { opacity: 0 !important; animation: none !important; }
  .liasse__pli, .liasse__ficelle path, .liasse__tampon { animation: none !important; }
  .complication-tardive__coche, .complication-tardive__perte, .complication-tardive__perte-mot, .complication-tardive__perte-sous { opacity: 1 !important; animation: none !important; }

  .ponts-papier__bande { transform: none !important; animation: none !important; }
  .ponts-papier__ticket--1 { transform: translate(600px, 0) !important; animation: none !important; }
  .ponts-papier__ticket--2 { transform: translate(560px, 0) !important; animation: none !important; }
  .ponts-papier__ticket--3 { transform: translate(356px, 0) !important; animation: none !important; }
  .ponts-papier__ticket--3::after { opacity: 1 !important; animation: none !important; }

  .tablee-pistes .carte-piste { opacity: 1 !important; transform: none !important; animation: none !important; }
  .carte-piste--question::after, .tablee-pistes__reaction { opacity: 1 !important; animation: none !important; }
  .paquet-pistes__colonne li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tablee-pistes__plateau { transform: none !important; animation: none !important; }
  .carte-question__carton { transform: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cadre-explicatif__cadre { transition: none !important; }
  .cadre-explicatif :is(.cadre-explicatif__terme, .cadre-explicatif__butee, .cadre-explicatif__relecture) { animation: none !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__feuille { transform: none !important; opacity: 1 !important; animation: none !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__classe { stroke: #ffffff !important; animation: none !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__classe--0 { fill: #d6e5f2 !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__classe--1 { fill: #89b2d6 !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__classe--2 { fill: #3f76ac !important; }
  .slide[data-etat] .carte-calque--prelude .carte-calque__classe--3 { fill: #0d3c69 !important; }
  .slide[data-etat] .carte-calque--prelude :is(.carte-calque__loupe, .slide[data-etat] .carte-calque__lien, .slide[data-etat] .carte-calque__reaction) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .slide[data-etat] .carte-epinglee .carte-calque__repere-ancre { opacity: 1 !important; transition: none !important; }
  .slide[data-etat] .carte-epinglee .etiquette-papier { animation: none !important; transform: none !important; }

  .slide[data-etat] .enveloppe__rabat { transform: rotateX(180deg) !important; animation: none !important; }
  .slide[data-etat] .enveloppe { transform: rotate(122deg) !important; animation: none !important; }
  .slide[data-etat] .enveloppe-reponse :is(.enveloppe-reponse__carte, .slide[data-etat] .enveloppe-reponse__billet, .slide[data-etat] .enveloppe-reponse__reaction, .slide[data-etat] .enveloppe-reponse__entete) { opacity: 1 !important; transform: none !important; animation: none !important; }

  .slide[data-etat] .salle-guichets__ding, .slide[data-etat] .fente-sanitaire__clac { opacity: 0 !important; animation: none !important; }
  .slide[data-etat] .salle-guichets__bouton { animation: none !important; }
  .slide[data-etat] .dossier-papier--sol { transform: translate(0, -110px) !important; animation: none !important; }
  .slide[data-etat] .salle-guichets .pancarte__carton { transform: rotateY(180deg) !important; animation: none !important; }
  .slide[data-etat] .dossier-papier--sol .dossier-papier__cadre, .slide[data-etat] .salle-guichets__reaction { opacity: 1 !important; animation: none !important; }

  .slide[data-etat] .appui-titulaire__dossier--soin { opacity: 1 !important; transform: none !important; animation: none !important; }
  .slide[data-etat] .appui-titulaire__dossier--social { opacity: 1 !important; transform: rotate(7deg) !important; animation: none !important; }
  .slide[data-etat] .appui-titulaire__coche, .slide[data-etat] .appui-titulaire__reaction { opacity: 1 !important; animation: none !important; }

  .slide[data-etat] .projet-etiquete__etiquette { transform: translate(160px, 212px) rotate(6deg) !important; border-color: var(--muted) !important; background-color: #efede8 !important; color: var(--muted) !important; animation: none !important; }
  .slide[data-etat] .projet-etiquete__trace, .slide[data-etat] .projet-etiquete__reaction { opacity: 1 !important; animation: none !important; }
  .slide[data-etat] .pli-papier--1 { opacity: 1 !important; transform: translate(404px, 214px) rotate(-4deg) !important; animation: none !important; }
  .slide[data-etat] .pli-papier--2 { opacity: 1 !important; transform: translate(384px, 168px) rotate(5deg) !important; animation: none !important; }
  .slide[data-etat] .pli-papier--3 { opacity: 1 !important; transform: translate(420px, 122px) rotate(-2deg) !important; animation: none !important; }
  .slide[data-etat] .pli-papier--sante { opacity: 0 !important; animation: none !important; }
  .slide[data-etat] .fente-sanitaire__coche, .slide[data-etat] .fente-sanitaire__tas, .slide[data-etat] .fente-sanitaire__tas-mot { opacity: 1 !important; animation: none !important; }
  .slide[data-etat] .ephemeride__feuille--4 { z-index: 11 !important; transform: translate(106px, 136px) rotate(10deg) scale(.85) !important; animation: none !important; }
  .slide[data-etat] .ephemeride__feuille--3 { z-index: 12 !important; transform: translate(52px, 142px) rotate(-4deg) scale(.85) !important; animation: none !important; }
  .slide[data-etat] .ephemeride__feuille--2 { z-index: 13 !important; transform: translate(-14px, 136px) rotate(8deg) scale(.85) !important; animation: none !important; }
  .slide[data-etat] .ephemeride__feuille--1 { z-index: 14 !important; transform: translate(-80px, 140px) rotate(-12deg) scale(.85) !important; animation: none !important; }
  .slide[data-etat] .liasse { opacity: 0 !important; animation: none !important; }
  .slide[data-etat] .liasse__pli, .slide[data-etat] .liasse__ficelle path, .slide[data-etat] .liasse__tampon { animation: none !important; }
  .slide[data-etat] .complication-tardive__coche, .slide[data-etat] .complication-tardive__perte, .slide[data-etat] .complication-tardive__perte-mot, .slide[data-etat] .complication-tardive__perte-sous { opacity: 1 !important; animation: none !important; }

  .slide[data-etat] .ponts-papier__bande { transform: none !important; animation: none !important; }
  .slide[data-etat] .ponts-papier__ticket--1 { transform: translate(600px, 0) !important; animation: none !important; }
  .slide[data-etat] .ponts-papier__ticket--2 { transform: translate(560px, 0) !important; animation: none !important; }
  .slide[data-etat] .ponts-papier__ticket--3 { transform: translate(356px, 0) !important; animation: none !important; }
  .slide[data-etat] .ponts-papier__ticket--3::after { opacity: 1 !important; animation: none !important; }

  .slide[data-etat] .tablee-pistes .carte-piste { opacity: 1 !important; transform: none !important; animation: none !important; }
  .slide[data-etat] .carte-piste--question::after, .slide[data-etat] .tablee-pistes__reaction { opacity: 1 !important; animation: none !important; }
  .slide[data-etat] .paquet-pistes__colonne li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .slide[data-etat] .tablee-pistes__plateau { transform: none !important; animation: none !important; }
  .slide[data-etat] .carte-question__carton { animation: none !important; }
}