/* Scène « La frise à deux voies » — Méthode. À plat : traits, aplats, bordures fines. Classes préfixées f-.
   .f-bureau : frise verticale, deux voies de part et d’autre. .f-compact : frise horizontale et une zone de détail. */
.f-bureau > *, .f-compact > * { position: absolute; left: 0; top: 0; }
.f-trait { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* La frise : le rail, la progression qui se remplit derrière le jeton, la suite sans fin */
.f-rail, .f-plein { border-radius: 2px; background: var(--line-fort); will-change: transform; }
.f-plein { background: var(--accent); transform: scale(0); }
.f-bureau .f-rail, .f-bureau .f-plein { width: 4px; margin-left: -2px; transform-origin: 50% 0; }
.f-compact .f-rail, .f-compact .f-plein { height: 4px; margin-top: -2px; transform-origin: 0 50%; }
.f-suite { width: 0; height: 24px; margin: 5px 0 0 -2px; border-left: 4px dotted var(--line-fort); opacity: 0; }
.f-depart { width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--line-fort); opacity: 0; }
.f-tete { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.f-tete.e { text-align: right; color: var(--accent-texte); }

/* Un palier : son numéro sur la frise, coché une fois franchi */
.f-noeud { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: var(--recit-fond, var(--bg)); box-shadow: inset 0 0 0 2px var(--line-fort); font-size: 12px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.f-noeud b { font-weight: 700; }
.f-noeud i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; }
.f-noeud svg { width: 13px; height: 13px; }

/* Voie EX’SIE : le livrable, une vignette au trait qui se trace. Voie VOUS : un marqueur qui s’allume. */
.f-case { position: relative; flex: none; box-sizing: border-box; width: 56px; height: 56px; border-radius: 13px; border: 1px solid var(--line-fort); }
.f-marque { position: relative; flex: none; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-fort); }
.f-fond { position: absolute; inset: -1px; border-radius: inherit; opacity: 0; }
.f-case .f-fond { box-sizing: border-box; background: var(--surface); border: 2px solid var(--accent); }
.f-marque .f-fond { display: grid; place-items: center; background: var(--ink); color: var(--surface); }
.f-marque svg { width: 22px; height: 22px; }
.f-vig { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.f-vig .f-a { stroke: var(--accent); }
.f-vig .f-s { fill: var(--surface); }
.f-vig .f-m { fill: var(--accent); stroke: none; }
.f-lib { font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; opacity: 0; }

/* La porte de validation : deux battants, fermés tant que le livrable et le rôle ne sont pas là */
.f-porte { width: 0; height: 0; }
.f-porte::before, .f-porte::after, .f-bat { content: ""; position: absolute; border-radius: 2px; background: var(--ink); }
.f-porte.ok::before, .f-porte.ok::after, .f-porte.ok .f-bat { background: var(--accent); }
.f-bat { will-change: transform; }

/* Le jeton « projet » */
.f-jeton { display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; margin: -16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--recit-fond, var(--bg)); color: #fff; opacity: 0; z-index: 2; will-change: transform, opacity; }
.f-jeton svg { width: 14px; height: 14px; }
.f-etiq { padding: 5px 11px 6px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--line-fort); font-size: 12px; font-weight: 700; line-height: 1; color: var(--accent-texte); white-space: nowrap; opacity: 0; font-variant-numeric: tabular-nums; }
/* Temps fort : la sixième porte est franchie. L’étiquette du jeton dit le résultat, en aplat. */
.f-etiq.ok { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }

/* Relief : la frise est tracée au sol ; les paliers y sont posés, les portes et les panneaux de voie dressés,
   le jeton passe au-dessus. Un palier se soulève d’un bloc (livrable, rôle, numéro et liens restent alignés entre eux).
   Le jeton reste proche des paliers : plus haut, il ne tomberait plus en face du lien du palier où il s’arrête. */
.f-bureau > .f-palier { translate: 0 0 calc(16px * var(--relief)); }
.f-bureau > .f-porte, .f-bureau > .f-tete { translate: 0 0 calc(22px * var(--relief)); }
.f-bureau > .f-jeton, .f-bureau > .f-etiq { translate: 0 0 calc(26px * var(--relief)); }
/* Petit écran : deux hauteurs seulement. La zone de détail et l’étiquette restent au sol ; la ligne se soulève d’un bloc,
   jeton compris (elle est horizontale : le moindre écart de hauteur sortirait le jeton, un cran ou une barrière de son rail). */
.f-compact > .f-rail, .f-compact > .f-plein, .f-compact > .f-depart, .f-compact > .f-noeud,
.f-compact > .f-barre, .f-compact > .f-jeton { translate: 0 0 calc(12px * var(--relief)); }

/* ---------- Bureau : frise verticale ---------- */
.f-palier { width: 0; height: 0; opacity: 0; }
.f-bureau .f-lien { position: absolute; top: -1.5px; width: 34px; height: 3px; background: var(--line); }
.f-bureau .f-lien.g { left: -46px; }
.f-bureau .f-lien.d { left: 12px; }
.f-bureau .f-fil { position: absolute; inset: 0; transform: scaleX(0); }
.f-bureau .f-fil.g { background: var(--accent); transform-origin: 0 50%; }
.f-bureau .f-fil.d { background: var(--ink); transform-origin: 100% 50%; }
.f-liv, .f-role { position: absolute; top: -28px; height: 56px; display: flex; align-items: center; gap: 12px; will-change: transform, opacity; }
.f-liv { right: 46px; transform-origin: 100% 50%; }
.f-role { left: 46px; transform-origin: 0 50%; }
.f-bureau .f-porte { opacity: 0; }
.f-bureau .f-bat { top: -2px; width: 18px; height: 4px; }
.f-bureau .f-bat.g { left: -19px; transform-origin: 2px 50%; }
.f-bureau .f-bat.d { left: 1px; transform-origin: 16px 50%; }
.f-bureau .f-porte::before, .f-bureau .f-porte::after { top: -7px; width: 4px; height: 14px; }
.f-bureau .f-porte::before { left: -24px; }
.f-bureau .f-porte::after { left: 20px; }

/* ---------- Petit écran : frise horizontale, une zone pour le palier courant ---------- */
.f-compact .f-suite { display: none; }
.f-compact .f-depart { width: 8px; height: 8px; margin: -4px; }
.f-compact .f-noeud { width: 18px; height: 18px; margin: -9px; font-size: 11px; opacity: 0; }
.f-compact .f-noeud svg { width: 10px; height: 10px; }
.f-compact .f-jeton { width: 24px; height: 24px; margin: -12px; border-width: 2px; }
.f-compact .f-jeton svg { width: 12px; height: 12px; }
.f-compact .f-etiq { padding: 4px 9px 5px; font-size: 11px; }
.f-barre { width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 2px; background: var(--ink); opacity: 0; }

.f-zone { left: 6px; top: 72px; box-sizing: border-box; width: 328px; height: 232px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-fort); opacity: 0; }
.f-zone > *, .f-couche > * { position: absolute; }
.f-couche { inset: 0; opacity: 0; }
.f-compact .f-case { left: 16px; top: 36px; }
.f-compact .f-marque { left: 21px; top: 145px; width: 46px; height: 46px; }
.f-compact .f-marque svg { width: 24px; height: 24px; }
.f-couche .f-case, .f-couche .f-marque { border-color: transparent; }
.f-cap { left: 88px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--muted); }
.f-cap.e { top: 47px; color: var(--accent-texte); }
.f-cap.v { top: 151px; }
.f-compact .f-lib { left: 88px; font-size: 13.5px; }
.f-compact .f-lib.e { top: 63px; }
.f-compact .f-lib.v { top: 167px; }
/* les deux voies convergent vers la porte */
.f-compact .f-lien, .f-compact .f-fil { background: var(--line); border-radius: 1px; }
.f-compact .f-lien.g, .f-compact .f-fil.g { left: 256px; top: 63px; width: 13px; height: 2px; }
.f-compact .f-lien.d, .f-compact .f-fil.d { left: 256px; top: 167px; width: 13px; height: 2px; }
.f-compact .f-lien.h { left: 267px; top: 63px; width: 2px; height: 106px; }
.f-compact .f-fil.h { left: 267px; top: 63px; width: 2px; height: 53px; transform-origin: 50% 0; }
.f-compact .f-fil.b { left: 267px; top: 116px; width: 2px; height: 53px; transform-origin: 50% 100%; }
.f-compact .f-lien.s, .f-compact .f-fil.s { left: 268px; top: 115px; width: 25px; height: 2px; }
.f-compact .f-lien.x, .f-compact .f-fil.x { left: 293px; top: 115px; width: 19px; height: 2px; }
.f-compact .f-fil { background: var(--accent); transform: scale(0); }
.f-compact .f-fil.g, .f-compact .f-fil.d, .f-compact .f-fil.s, .f-compact .f-fil.x { transform-origin: 0 50%; }
.f-compact .f-fil.d, .f-compact .f-fil.b { background: var(--ink); }
.f-fleche { left: 304px; top: 108px; width: 16px; height: 16px; color: var(--accent); }
.f-fleche svg { display: block; width: 16px; height: 16px; }
.f-couche .f-porte { left: 293px; top: 116px; }
.f-compact .f-bat { left: -2px; width: 4px; height: 23px; }
.f-compact .f-bat.g { top: -24px; transform-origin: 50% 2px; }
.f-compact .f-bat.d { top: 1px; transform-origin: 50% 21px; }
.f-compact .f-porte::before, .f-compact .f-porte::after { left: -7px; width: 14px; height: 4px; }
.f-compact .f-porte::before { top: -29px; }
.f-compact .f-porte::after { top: 25px; }

/* Petit écran : le fond de la scène collante couvre aussi la gouttière, sinon le filet « On passe quand » du texte
   (placé à -14px) reste visible à gauche de la scène en passant derrière elle. */
@media (max-width: 900px) {
  [data-scene="frise"] .recit-scene::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 10%; left: calc(-1 * var(--gouttiere)); width: var(--gouttiere); background: var(--recit-fond, var(--bg)); }
}