/* Schéma « Le scénario rejoué » — guide recette métier. À plat : traits et aplats. Classes préfixées gs-. */
.gs-plan, .gs-lib, .gs-corrige, .gs-essai { position: absolute; left: 0; top: 0; }
.gs-plan { width: 320px; height: 320px; }
.gs-trace { display: block; max-width: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Le fil du scénario et ses cinq étapes */
.gs-fil { stroke: var(--line-fort); stroke-width: 2; }
.gs-fait { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.gs-rond { fill: var(--surface); stroke: var(--line-fort); stroke-width: 2; }
.gs-ok, .gs-ko { stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); will-change: transform; }
.gs-ok { fill: var(--accent); }
.gs-ko { fill: var(--ambre); }
.gs-marque { stroke: var(--surface); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.gs-lib { left: 108px; font-size: 14px; font-weight: 700; line-height: 22px; color: var(--ink); white-space: nowrap; opacity: .5; }

/* L’échec est marqué « Corrigé » ; le scénario repart du début */
.gs-corrige { left: 174px; height: 24px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--ambre); color: var(--ambre-texte); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.gs-retour { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.gs-pointe { stroke: var(--ink); stroke-width: 1.6; opacity: 0; }
.gs-essai { left: auto; right: 24px; height: 24px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--r-pilule); border: 1px solid var(--line-fort); color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }