/* O32 et O33 : les arrêts du récit (repris de stop-samples-v2, sections A et B). Tout sous .stop, valeurs de tokens.css. */
.stop {
  --stop-fond: radial-gradient(120% 90% at 50% 100%, rgba(168,135,79,.20) 0%, rgba(168,135,79,0) 42%), linear-gradient(180deg, #0F2A1F 0%, #163B2D 58%, #1F4D3A 100%);
  --stop-ctrl: var(--control-h, 40px);
  display: block; min-width: 0; color: var(--fg-1); scroll-margin-top: 88px;
}
@media (pointer: coarse) { .stop { --stop-ctrl: 44px; } }

.stop .stop-tete { margin-bottom: 20px; }
.stop .stop-tete-ligne { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: end; justify-content: space-between; }
.stop .stop-surtitre { margin: 0 0 10px; font: 400 var(--t-meta)/1.4 var(--font-mono); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-2); }
.stop .stop-titre { margin: 0; font: 400 clamp(28px, 3.4vw, 40px)/var(--lh-h2, 1.15) var(--font-display); text-transform: uppercase; letter-spacing: var(--track-heading); color: var(--heading); padding-top: .12em; }
.stop .stop-texte { margin: 10px 0 0; max-width: 64ch; color: var(--fg-2); font-size: 15px; }
.stop .stop-boutons { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- O32 : la scène qui tourne ---- */
.stop .stop-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--stop-fond); border-radius: var(--r); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; outline: none; }
.stop .stop-scene:focus-visible { box-shadow: 0 0 0 2px var(--ek-laiton); }
.stop .stop-scene.stop-glisse { cursor: grabbing; }
.stop .stop-scene video, .stop .stop-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
.stop .stop-scene video { transition: opacity 450ms var(--ease); }
.stop .stop-scene video.stop-cache { opacity: 0; }
.stop .stop-surcouche { pointer-events: none; }
.stop .stop-gen { position: absolute; left: 12px; bottom: 10px; z-index: 2; padding: 5px 7px; border-radius: var(--r-block); background: rgba(15,42,31,.55); color: rgba(243,244,238,.8); font: 400 11px/1 var(--font-mono); letter-spacing: .08em; pointer-events: none; }
.stop .stop-tag { position: absolute; left: 0; top: 0; z-index: 3; padding: 7px 10px 8px; border-radius: var(--r-block); background: var(--ek-laiton); color: var(--ek-ink); box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); opacity: 0; transform: translate3d(0,0,0); transition: opacity 160ms var(--ease); white-space: nowrap; pointer-events: none; }
.stop .stop-tag.on { opacity: 1; }
.stop .stop-tag b { display: block; font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.stop .stop-tag span { display: block; margin-top: 2px; font: 500 14px/1.3 var(--font-body); }
.stop .stop-tag span.tbc { font-style: italic; font-weight: 400; opacity: .85; }
.stop .stop-tag i { display: block; margin-top: 4px; font: 400 11px/1.3 var(--font-mono); font-style: normal; opacity: .8; }
.stop .stop-tag i:empty { display: none; }
.stop .stop-retour { position: absolute; right: 14px; top: 14px; z-index: 4; display: none; height: var(--stop-ctrl); padding: 0 18px; border: 0; border-radius: var(--r); background: var(--ek-laiton); color: var(--ek-ink); font: 500 14px/1 var(--font-body); cursor: pointer; }
.stop .stop-retour:hover { background: var(--ek-laiton-h); }
.stop .stop-retour:focus-visible, .stop .stop-bouton:focus-visible, .stop .stop-inter input:focus-visible + span { outline: 2px solid var(--ek-laiton); outline-offset: 2px; }
.stop .stop-consigne { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 12px 16px; border-radius: var(--r); background: rgba(15,42,31,.72); font: 500 13px/1 var(--font-body); white-space: nowrap; pointer-events: none; transition: opacity 600ms var(--ease); }
.stop .stop-consigne.stop-parti { opacity: 0; }
.stop .stop-pastille { position: absolute; right: 14px; bottom: 10px; z-index: 2; display: none; padding: 6px 8px; border-radius: var(--r-block); background: rgba(15,42,31,.72); color: var(--ek-lichen); font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }

.stop .stop-barre { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.stop .stop-inter { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--stop-ctrl); cursor: pointer; transition: opacity 160ms var(--ease); }
.stop .stop-inter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stop .stop-inter span { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(243,244,238,.18); transition: background 160ms var(--ease); }
.stop .stop-inter span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ek-chalk); transition: transform 160ms var(--ease); }
.stop .stop-inter input:checked + span { background: var(--ek-laiton); }
.stop .stop-inter input:checked + span::after { transform: translateX(16px); }
.stop .stop-inter.stop-off { opacity: .4; cursor: not-allowed; }
.stop .stop-mono { font: 400 12px/1.4 var(--font-mono); letter-spacing: .06em; color: rgba(243,244,238,.7); }
.stop .stop-curseur { position: relative; flex: 1 1 180px; max-width: 320px; height: 2px; border-radius: 2px; background: var(--rule-strong); }
.stop .stop-curseur i { position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ek-laiton); }

/* ---- O33 : la maquette en direct ---- */
.stop .stop-modele { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--stop-fond); touch-action: pan-y; }
.stop .stop-modele.stop-actif { touch-action: none; }
.stop .stop-activer { position: absolute; left: 50%; bottom: 14px; z-index: 2; display: none; transform: translateX(-50%); padding: 10px 14px; border-radius: var(--r-pill); background: rgba(15,42,31,.78); color: var(--fg-1); font: 500 13px/1 var(--font-body); white-space: nowrap; pointer-events: none; }
.stop .stop-terminer { position: absolute; right: 12px; top: 12px; z-index: 4; display: none; height: var(--stop-ctrl); padding: 0 18px; border: 0; border-radius: var(--r); background: var(--ek-laiton); color: var(--ek-ink); font: 500 14px/1 var(--font-body); cursor: pointer; }
.stop .stop-modele.stop-actif .stop-terminer { display: inline-flex; align-items: center; }
@media (pointer: coarse) { .stop .stop-modele:not(.stop-actif) .stop-activer { display: block; } }
@media (max-width: 640px) { .stop .stop-modele { aspect-ratio: 4 / 5; } }
.stop .stop-modele canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; outline: none; }
.stop .stop-chargement { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ek-lichen); }
.stop .stop-bouton { height: var(--stop-ctrl); padding: 0 18px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: transparent; color: var(--fg-1); font: 500 14px/1 var(--font-body); cursor: pointer; }
.stop .stop-bouton[aria-pressed="true"] { background: var(--ek-laiton); border-color: var(--ek-laiton); color: var(--ek-ink); }
.stop .stop-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; opacity: 0; transition: opacity 160ms var(--ease); }
.stop .stop-legende.stop-on { opacity: 1; }
.stop .stop-legende span { display: inline-flex; align-items: center; gap: 8px; }
.stop .stop-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(243,244,238,.25); }
.stop .stop-stat { max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
  .stop .stop-scene video, .stop .stop-consigne, .stop .stop-tag, .stop .stop-legende, .stop .stop-inter span, .stop .stop-inter span::after { transition: none; }
}