/* ============================================================================
   IMPRA — couche V2.1 : les compositions du Graphic System v2 sur la homepage
   ----------------------------------------------------------------------------
   Contrat : la v1 fournit la COMPOSITION (scènes, chips, socles, séquences),
   le Graphic System v2 fournit la MATIÈRE (masters alpha, palette mesurée).
   Ce fichier ne redéfinit aucun jeton du Design System.

   ⚠ Aucun nom de classe ne contient ad, banner, promo, sponsor ni ghost :
     les bloqueurs de contenu filtrent ces mots. Leçon v1, vérifiée.
   ========================================================================== */

:root {
  /* Palette d'illustration, mesurée au pixel sur les Golden References.
     Le bleu d'interface (#1F74E7) n'est pas touché. */
  --v21-blue:   #2467E3;
  --v21-navy:   #1B2038;
  --v21-steel:  #9BA0A8;
  --v21-green:  #4E7848;
  --v21-amber:  #B8862F;
  --v21-red:    #A8434A;

  /* Une clé unique en haut à gauche : l'ombre part en bas à droite.
     Portée par le CSS, donc identique sur tous les objets par construction. */
  --v21-shadow:     drop-shadow(3px 10px 16px rgba(15, 23, 46, .20));
  --v21-shadow-ink: drop-shadow(3px 12px 20px rgba(0, 0, 0, .50));
  --v21-ease: cubic-bezier(.22, .8, .28, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   S3 · UNE AFFAIRE, DU REPÉRAGE AU CHÈQUE — « le même véhicule, six moments »
   --------------------------------------------------------------------------
   La mécanique v1 est conservée : une scène, six temps (data-beat), pilotée
   par scene.impra.js. Ce qui change : plus de pseudo-dashboard — pas de
   grille UI, pas de socle 3D dessiné. Une scène ouverte, un sol, une ombre,
   le master A1 constant, et les éléments métier qui tournent autour de lui.
   ════════════════════════════════════════════════════════════════════════ */

/* La figure garde la classe .scene pour hériter du pilote JS des beats —
   mais pas de son habillage : la grille UI du pseudo-dashboard est retirée. */
.af-scene::before { content: none; }

.af-scene {
  position: relative;
  margin: 0;
  border-radius: var(--radius-images);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 16%, #FFFFFF 0%, #EFF4FC 52%, #E4EBF7 100%);
  aspect-ratio: 5 / 6;
}

.af-stage { position: absolute; inset: 0; }

/* ── Le sol ── */
.af-stage::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  top: 70%;
  height: 2px;
  background: var(--v21-blue);
  opacity: .85;
}
.af-ground {
  position: absolute;
  left: 16%; right: 22%;
  top: 68.3%;
  height: 5.5%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 46, .16) 0%, transparent 70%);
}

/* ── Le sujet constant ── */
.af-veh {
  position: absolute;
  left: 11%;
  bottom: 30.2%;              /* la base de l'encre touche la ligne de sol */
  width: 72%;
  height: auto;
  filter: var(--v21-shadow);
  z-index: 2;
}
@keyframes afBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.af-veh { animation: afBreathe 7s ease-in-out infinite; }

/* ── Les éléments de temps ──
   data-b liste les temps où l'élément est visible : [data-b~="3"].
   Fondu croisé court, translation de 10 px, jamais de rebond. */
.af-stage [data-b] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--v21-ease), transform .4s var(--v21-ease);
  pointer-events: none;
}
.af-scene[data-beat="1"] [data-b~="1"],
.af-scene[data-beat="2"] [data-b~="2"],
.af-scene[data-beat="3"] [data-b~="3"],
.af-scene[data-beat="4"] [data-b~="4"],
.af-scene[data-beat="5"] [data-b~="5"],
.af-scene[data-beat="6"] [data-b~="6"] { opacity: 1; transform: none; }

/* ── Les objets compagnons — matière v2, posés sur le même sol ── */
.af-obj { position: absolute; height: auto; filter: var(--v21-shadow); }
.af-file    { right: 5%;  bottom: 29.9%; width: 26%; z-index: 3; }   /* B2 · dossier   */
.af-invoice { right: 4%;  bottom: 30%;   width: 30%; z-index: 3; }   /* B1 · facture   */
.af-pair-a  { right: 21%; bottom: 29.9%; width: 16.5%; z-index: 3; }   /* C5 · fantôme   */
.af-pair-b  { right: 3.5%; bottom: 29.9%; width: 16.5%; z-index: 3; }   /* C5 · solide    */

/* Au temps 6, le solide suit le fantôme de 900 ms : Forecast → Actual. */
.af-scene[data-beat="6"] .af-pair-b { transition-delay: .9s; }

/* ── Le nœud de repérage (temps 1) — le ping v1, conservé ── */
.af-spot { position: absolute; left: 47%; top: 30%; width: 18px; height: 18px; z-index: 4; }
.af-spot i {
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--v21-blue);
}
.af-spot::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--v21-blue);
  opacity: 0;
}
@keyframes afPing { 0% { transform: scale(.5); opacity: .8; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.af-scene[data-beat="1"] .af-spot::after { animation: afPing 2.4s ease-out infinite; }
.af-spot::before {
  content: "";
  position: absolute; left: 8px; top: 16px;
  width: 2px; height: 66px;
  background: linear-gradient(to bottom, var(--v21-blue), transparent);
  opacity: .5;
}

/* ── Le glyphe de marge (temps 2) — famille E ── */
.af-glyph { position: absolute; right: 8%; top: 8%; width: 21%; z-index: 4; }
.af-glyph svg { display: block; width: 100%; height: auto; }

/* ── Les chips — le langage de contexte hérité de la v1 ── */
.af-chip {
  position: absolute;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--impra-border, #DCE3F0);
  border-radius: 11px;
  padding: 9px 14px 10px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 46, .07);
  max-width: 62%;
}
.af-chip::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: var(--chip, var(--v21-blue));
}
.af-chip--ok   { --chip: var(--v21-green); }
.af-chip--due  { --chip: var(--v21-amber); }
.af-chip__k {
  display: block;
  font-size: 11px; font-weight: var(--weight-semibold, 600);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-stone, #667085);
}
.af-chip__v {
  display: block;
  font-size: 16px; font-weight: var(--weight-semibold, 600);
  color: var(--impra-ink, #0F172E);
  margin-top: 2px;
}
/* La chip fantôme du chiffrage : pas encore advenu — creux, en pointillé. */
.af-chip--soft {
  background: transparent;
  border: 1.5px dashed var(--v21-steel);
  box-shadow: none;
}
.af-chip--soft::before { background: var(--v21-steel); opacity: .7; }
.af-chip--soft .af-chip__v { opacity: .6; }

/* Positions des chips, temps par temps */
.af-c1  { left: 6%;  top: 7%; }
.af-c2a { left: 6%;  top: 7%; }
.af-c2b { left: 6%;  top: 26%; }
.af-c3  { left: 6%;  top: 7%; }
.af-c4a { left: 6%;  top: 7%; }
.af-c4b { left: 6%;  top: 26%; }
.af-c5  { left: 6%;  top: 7%; }
.af-c6  { left: 6%;  top: 7%; }

/* ── La progression (temps 4) — un meter du Design System, pas un dessin ── */
.af-meter { position: absolute; left: 6%; bottom: 14%; width: 46%; z-index: 5; }
.af-meter__k {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-stone, #667085);
  margin-bottom: 7px;
}
.af-meter__bar {
  height: 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--v21-steel) 30%, transparent);
  overflow: hidden;
}
.af-meter__bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: var(--v21-amber);
  transition: width .9s var(--v21-ease) .25s;
}
.af-scene[data-beat="4"] .af-meter__bar i { width: 66%; }

/* ── Le rail des six temps — famille E, en bas de la scène ── */
.af-rail {
  position: absolute;
  left: 6%; right: 6%; bottom: 6.5%;
  display: flex;
  gap: 5px;
  z-index: 5;
}
.af-rail i {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--v21-steel) 32%, transparent);
  transition: background-color .4s var(--v21-ease);
}
.af-scene[data-beat="1"] i:nth-child(-n+1),
.af-scene[data-beat="2"] i:nth-child(-n+2),
.af-scene[data-beat="3"] i:nth-child(-n+3),
.af-scene[data-beat="4"] i:nth-child(-n+4),
.af-scene[data-beat="5"] i:nth-child(-n+5),
.af-scene[data-beat="6"] i:nth-child(-n+6) { background: var(--v21-blue); }
.af-scene[data-beat="6"] .af-rail i:last-child { background: var(--v21-green); }

/* ── Reduced motion : les temps changent sans transition, rien ne boucle ── */
@media (prefers-reduced-motion: reduce) {
  .af-veh { animation: none; }
  .af-stage [data-b] { transition: none; }
  .af-scene[data-beat="6"] .af-pair-b { transition-delay: 0s; }
  .af-scene[data-beat="1"] .af-spot::after { animation: none; opacity: .4; transform: none; }
  .af-meter__bar i { transition: none; }
  .af-rail i { transition: none; }
}

/* ── Mobile : la scène garde tout — elle est verticale par nature.
     Les chips serrent, le véhicule garde sa taille relative. ── */
@media (max-width: 640px) {
  .af-scene { aspect-ratio: 4 / 5; }
  .af-chip { max-width: 74%; padding: 7px 11px 8px 13px; }
  .af-chip__v { font-size: 14px; }
  .af-glyph { width: 26%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S6 · PILOTAGE — COCKPIT DE DIRECTION
   --------------------------------------------------------------------------
   La donnée est le sujet. Une seule hiérarchie, répétée trois fois :
   intitulé → grand chiffre → évolution → légende → explication. Les objets
   du système graphique restent en signature de 72 px, en haut à droite ; ils
   ne dominent plus rien et disparaissent sur mobile.
   ════════════════════════════════════════════════════════════════════════ */

.pilot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40);
}

/* Trois modules premium, pas trois cellules de tableau : une surface qui se
   détache à peine du navy, une bordure au plus discret, et de l'air —
   ⚠︎ uniquement des tokens existants : --space-28 n'existait pas et mettait
   le padding réel de ces cartes à 0 (le texte partait de la bordure). */
.kpi {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-32);
  border-radius: var(--radius-cards);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* L'intitulé : petit, traqué, jamais confondu avec un titre de section. */
.kpi__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-lavender-mist);
  /* L'intitulé s'arrête avant la signature : ils ne se disputent jamais la
     même ligne. */
  padding-right: 84px;
}

/* Le chiffre : l'objet le plus grand de la carte — il attire l'œil d'abord. */
.kpi__v {
  margin: var(--space-16) 0 0;
  font-family: var(--font-geometric);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.028em;
  line-height: 1;
  font-size: clamp(36px, 3.5vw, 46px);
  color: var(--color-paper-white);
}

.kpi__delta {
  display: inline-flex; align-items: center; gap: 5px;
  margin: var(--space-12) 0 0;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: #6EE7A8;
}

/* Les sept jalons de « Priorités du jour » : six critiques, un ordinaire. */
.kpi__bars { display: flex; gap: 4px; margin: var(--space-12) 0 0; }
.kpi__bars i {
  display: block; flex: 1 1 auto; height: 5px; max-width: 22px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
}
.kpi__bars i.is-crit { background: #F0A50A; }

/* Le contexte : corps normal, rattaché au chiffre qu'il éclaire. */
.kpi__k {
  margin: var(--space-12) 0 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* La description ferme la carte. Plus de filet bord à bord — l'effet tableau
   venait de là : l'espace et un ton plus doux suffisent à la distinguer. */
.kpi__d {
  margin-top: auto;
  padding-top: var(--space-20);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .66);
}

/* La signature : petite, en haut à droite, jamais au centre de l'attention. */
.kpi__obj {
  position: absolute; top: var(--space-24); right: var(--space-24);
  display: flex; align-items: flex-end; gap: 3px;
  height: 56px;
  pointer-events: none;
}
.kpi__obj img {
  display: block; width: auto; height: 100%;
  filter: var(--v21-shadow-ink);
}
.kpi__obj--pair img { height: 48px; }
/* Le couple prévu → réel : le second se pose après le premier. */
.js .pilot-row .kpi__obj img { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--v21-ease), transform .6s var(--v21-ease); }
.pilot-row.is-in .kpi__obj img { opacity: 1; transform: none; }
.pilot-row.is-in .pilot-ac { transition-delay: .5s; }

@media (max-width: 900px) {
  .pilot-row { grid-template-columns: 1fr; gap: var(--space-16); }
  /* Modules compacts, pas trois énormes rectangles : la signature reste,
     réduite ; le chiffre garde la vedette. */
  .kpi { padding: var(--space-24) var(--space-20); }
  .kpi__obj { top: var(--space-20); right: var(--space-20); height: 38px; }
  .kpi__obj--pair img { height: 32px; }
  .kpi__label { padding-right: 64px; }
  .kpi__v { margin-top: var(--space-12); font-size: 32px; }
  .kpi__k { font-size: 13.5px; }
  .kpi__d { padding-top: var(--space-12); font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pilot-row .kpi__obj img { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S5 · AU BUREAU COMME SUR LE PARC — TERRAIN → DATA TRACE → BUREAU
   --------------------------------------------------------------------------
   Une seule composition : le terminal capture le véhicule sur le parc, le
   tracé matérialise la synchronisation, le poste reçoit au bureau. La chip
   « + 180 € » parcourt la courbe — c'est la donnée qui voyage, pas un décor.
   ════════════════════════════════════════════════════════════════════════ */

.duo-scene { margin: 0; }

.duo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 430;
  border-radius: var(--radius-images);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 12%, #FFFFFF 0%, #EFF4FC 54%, #E6EDF7 100%);
}

/* ── Les deux pôles, posés chacun sur son îlot ── */
.duo-stage img { position: absolute; height: auto; filter: var(--v21-shadow); }
.duo-car   { left: 3%;    bottom: 17%; width: 29%; z-index: 1; }
.duo-phone { left: 27.5%; bottom: 16%; width: 8%;  z-index: 3; }
.duo-desk  { right: 7%;   bottom: 16%; width: 23%; z-index: 2; }

.duo-ground {
  position: absolute;
  bottom: 12.5%;
  height: 7%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 46, .15) 0%, transparent 70%);
  z-index: 0;
}
.duo-ground--l { left: 3%;  width: 34%; }
.duo-ground--r { right: 5%; width: 28%; }

.duo-label {
  position: absolute;
  bottom: 5%;
  font-size: 12px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-stone, #667085);
}
.duo-label--l { left: 18%; }
.duo-label--r { right: 17%; }

/* ── Le Data Trace ── */
.duo-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* La courbe se dessine à l'entrée de la scène, une fois. */
.duo-trace__line {
  stroke-dashoffset: 0;
}
.js .duo-scene .duo-trace__line,
.js .duo-scene .duo-trace__end { opacity: 0; transition: opacity .6s var(--v21-ease) .35s; }
.duo-scene.is-in .duo-trace__line,
.duo-scene.is-in .duo-trace__end { opacity: 1; }

/* La donnée qui voyage. Le chemin est celui de la courbe ; offset-rotate 0
   garde la chip droite. Cycle de 9 s dont ~2,6 s de trajet : une transmission
   périodique, pas un défilement. */
@keyframes duoTravel {
  0%       { offset-distance: 0%;   opacity: 0; }
  4%       { offset-distance: 0%;   opacity: 1; }
  26%      { offset-distance: 100%; opacity: 1; }
  30%, 100%{ offset-distance: 100%; opacity: 0; }
}
.duo-travel {
  offset-path: path("M 398 168 C 540 96, 760 86, 928 148");
  offset-rotate: 0deg;
}
.js .duo-travel { opacity: 0; }
/* Sans JavaScript, la donnée se pose au milieu du tracé, immobile. */
html:not(.js) .duo-travel { offset-distance: 55%; }
.duo-scene.is-in .duo-travel {
  animation: duoTravel 9s cubic-bezier(.45, 0, .25, 1) 1.2s infinite;
}
/* Sans offset-path, la chip reste posée au sommet de la courbe. */
@supports not (offset-path: path("M 0 0 L 1 1")) {
  .duo-travel { transform: translate(660px, 96px); }
  .duo-scene.is-in .duo-travel { animation: none; opacity: 1; }
}

/* Le bureau accuse réception : la chip s'allume quand la donnée arrive
   (mêmes 9 s, pic à l'instant où la chip voyageuse touche le nœud). */
@keyframes duoReceive {
  0%, 24%  { box-shadow: 0 6px 18px rgba(15, 23, 46, .07); }
  28%, 34% { box-shadow: 0 6px 18px rgba(15, 23, 46, .07), 0 0 0 5px color-mix(in srgb, #2467E3 20%, transparent); }
  40%, 100%{ box-shadow: 0 6px 18px rgba(15, 23, 46, .07); }
}
.duo-scene.is-in .duo-chip--r { animation: duoReceive 9s linear 1.2s infinite; }

/* ── Les chips des pôles ── */
.duo-chip--l { position: absolute; left: 5%;  top: 9%; max-width: 30%; }
.duo-chip--r { position: absolute; right: 5%; top: 9%; max-width: 26%; }

/* ── Entrée en cascade ── */
.js .duo-stage img,
.js .duo-stage .af-chip {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--v21-ease), transform .7s var(--v21-ease);
}
.duo-scene.is-in .duo-stage img,
.duo-scene.is-in .duo-stage .af-chip { opacity: 1; transform: none; }
.duo-scene.is-in .duo-phone { transition-delay: .09s; }
.duo-scene.is-in .duo-desk  { transition-delay: .22s; }
.duo-scene.is-in .duo-chip--r { transition-delay: .3s; }

/* ── Bascule d'axe : sous 768 px la composition verticale prend le relais ── */
.duo-vert { display: none; }
@media (max-width: 767px) {
  .duo-stage { display: none; }
  .duo-vert { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .duo-stage img, .duo-stage .af-chip { opacity: 1; transform: none; transition: none; }
  .duo-scene .duo-trace__line, .duo-scene .duo-trace__end { opacity: 1; transition: none; }
  .duo-scene.is-in .duo-travel { animation: none; opacity: 1; offset-distance: 55%; }
  .duo-scene.is-in .duo-chip--r { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S7 · L'ADMINISTRATIF SUIT — PIÈCES → DOSSIER → COMPLÉTUDE → VALIDATION
   --------------------------------------------------------------------------
   Trois pièces documentaires convergent vers le dossier véhicule B2. Les
   couleurs sémantiques sont des jalons de 12 px — jamais des masses. La jauge
   se remplit, le sceau se pose : « l'administratif suit automatiquement ».
   ════════════════════════════════════════════════════════════════════════ */

.doss-scene { margin: 0; }

.doss-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 400;
  border-radius: var(--radius-images);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 12%, #FFFFFF 0%, #F0F4FB 54%, #E7EDF7 100%);
}

/* ── Les pièces — documents abstraits, papier v2 en CSS ── */
.doss-piece {
  position: absolute;
  left: 7%;
  top: calc(9% + var(--i) * 26%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.doss-piece__doc {
  display: grid;
  align-content: start;
  gap: 5px;
  width: 74px;
  height: 58px;
  padding: 9px 10px;
  background: linear-gradient(160deg, #EDEAE6 0%, #DCD6CF 100%);   /* papier v2 */
  border-radius: 7px;
  box-shadow: 2px 5px 10px rgba(15, 23, 46, .14);
}
.doss-piece__doc i {
  height: 5px;
  border-radius: 3px;
  background: #9C9089;                                             /* barres muettes */
  opacity: .55;
}
.doss-piece__doc i:nth-child(1) { width: 72%; opacity: .8; }
.doss-piece__doc i:nth-child(2) { width: 100%; }
.doss-piece__doc i:nth-child(3) { width: 84%; }
.doss-piece__doc i:nth-child(4) { width: 56%; }

/* Le jalon d'état : il naît dans sa couleur d'origine et passe au vert
   quand la pièce rejoint le dossier. Le signal, jamais la masse. */
.doss-piece__node {
  position: absolute;
  left: 62px; top: -6px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--v21-steel);
  transition: background-color .45s var(--v21-ease);
  transition-delay: calc(.55s + var(--i) * .35s);
}
.doss-piece:nth-child(1) .doss-piece__node { background: var(--v21-red); }
.doss-piece:nth-child(2) .doss-piece__node { background: var(--v21-amber); }
.doss-piece:nth-child(3) .doss-piece__node { background: var(--v21-steel); }
.doss-scene.is-in .doss-piece__node { background: var(--v21-green) !important; }

.doss-piece__k {
  font-size: 12.5px;
  font-weight: var(--weight-semibold, 600);
  color: var(--impra-ink, #0F172E);
  white-space: nowrap;
}

/* ── Les flux convergents ── */
.doss-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.doss-trace__l {
  fill: none;
  stroke: #2467E3;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
}
.js .doss-trace__l { opacity: 0; transition: opacity .6s var(--v21-ease) .35s; }
.doss-scene.is-in .doss-trace__l { opacity: .8; }

/* ── Le dossier, le sceau, la jauge ── */
.doss-file {
  position: absolute;
  right: 24%;
  bottom: 13%;
  width: 15.5%;
  height: auto;
  filter: var(--v21-shadow);
  z-index: 2;
}
.doss-seal {
  position: absolute;
  right: 24%;
  bottom: 12.5%;
  width: 5.4%;
  height: auto;
  z-index: 3;
  filter: drop-shadow(2px 4px 7px rgba(15, 23, 46, .22));
  transform-origin: center;
}
.js .doss-seal {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .45s var(--v21-ease) 1.9s, transform .45s var(--v21-ease) 1.9s;
}
.doss-scene.is-in .doss-seal { opacity: 1; transform: none; }
.doss-ground {
  position: absolute;
  right: 21%; width: 21%;
  bottom: 10%; height: 6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 46, .14) 0%, transparent 70%);
  z-index: 0;
}

.doss-meter {
  position: absolute;
  right: 3.5%;
  top: 30%;
  width: 15%;
  z-index: 2;
}
.doss-meter__bar {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--v21-steel) 30%, transparent);
  overflow: hidden;
}
.doss-meter__bar i {
  display: block;
  height: 100%;
  width: 58%;
  border-radius: inherit;
  background: var(--v21-green);
  transition: width .8s var(--v21-ease) 1.5s;
}
.doss-scene.is-in .doss-meter__bar i { width: 100%; }
.doss-meter__n {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  font-weight: var(--weight-semibold, 600);
  color: var(--impra-ink, #0F172E);
}

.doss-chip { position: absolute; right: 3.5%; top: 54%; max-width: 22%; }

/* ── Entrée ── */
.js .doss-stage .doss-piece,
.js .doss-stage .doss-file,
.js .doss-stage .doss-meter,
.js .doss-stage .doss-chip {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--v21-ease) calc(var(--i, 2) * .09s),
              transform .6s var(--v21-ease) calc(var(--i, 2) * .09s);
}
.doss-scene.is-in .doss-piece,
.doss-scene.is-in .doss-file,
.doss-scene.is-in .doss-meter,
.doss-scene.is-in .doss-chip { opacity: 1; transform: none; }
.doss-scene.is-in .doss-chip { transition-delay: .5s; }

/* Entre 768 et 1023 px, le dossier gagne ce que la scène perd : jamais
   sous le seuil des 120 px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .doss-file { width: 19%; right: 22%; }
  .doss-seal { width: 6.6%; right: 22.4%; }
}

/* ── Mobile : le dossier et la jauge portent seuls le récit ── */
@media (max-width: 767px) {
  .doss-stage { aspect-ratio: auto; height: auto; padding: 22px 18px; }
  .doss-trace { display: none; }
  .doss-piece { position: static; margin-bottom: 14px; --i: 0; }
  .doss-piece__node { left: 58px; }
  .doss-file { position: static; width: 44%; max-width: 190px; margin: 10px 0 4px; }
  .doss-seal { display: none; }
  .doss-ground { display: none; }
  .doss-meter { position: static; width: 70%; max-width: 300px; margin-top: 6px; }
  .doss-chip { position: static; max-width: none; display: inline-block; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .doss-stage .doss-piece, .doss-stage .doss-file,
  .doss-stage .doss-meter, .doss-stage .doss-chip {
    opacity: 1; transform: none; transition: none;
  }
  .doss-trace__l { transition: none; }
  .doss-scene .doss-piece__node { transition: none; }
  .doss-seal { opacity: 1; transform: none; transition: none; }
  .doss-meter__bar i { width: 100%; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S4 · TOUT VOTRE MÉTIER — le bento apaisé
   --------------------------------------------------------------------------
   Un seul objet 2.5D dans tout le bloc : A1 sur la carte signature Ink. Le
   reste redescend à deux langages — la donnée HTML/CSS, et la famille E.
   ════════════════════════════════════════════════════════════════════════ */

.dcard__media img { display: block; width: 100%; height: auto; }
.dcard__media--v21ink { width: 288px; right: var(--space-8); }
.dcard__media--v21ink img { filter: var(--v21-shadow-ink); }
@media (max-width: 980px) { .dcard__media--v21ink { width: 236px; } }

/* Le mini-rail d'états : nœuds et segments, le même vocabulaire que partout. */
.v21-minirail { display: flex; align-items: center; width: 100%; }
.v21-minirail i {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--v21-steel) 70%, transparent);
}
.v21-minirail b {
  flex: 1 1 auto;
  height: 2px;
  background: color-mix(in srgb, var(--v21-steel) 40%, transparent);
}
.v21-minirail i.done { background: var(--v21-blue); box-shadow: none; }
.v21-minirail b.done { background: var(--v21-blue); }
.v21-minirail i.now  {
  background: var(--v21-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v21-blue) 16%, transparent);
}
.dcard__media--rail { display: flex; align-items: center; }