/* Outil · Ralenti (Slow motion) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : rl-
   À gauche : la scène (la balle en vrai et à l'écran, puis 1 s de timeline en cases ; zone fixe), le verdict en grand
   (fluide, saccadé, accéléré), l'info, Copier et le lien Angle d'obturation. À droite : tournage, timeline, vitesse en %
   (curseur, Conformé, valeurs courantes), durée filmée, 4 lignes fixes. */
.rl .outil-fixe { align-items: stretch; }
.rl-scene { display: flex; flex-direction: column; gap: 12px; height: 228px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.rl-toile { width: 100%; height: 108px; display: block; }
.rl-bande { display: flex; flex-direction: column; gap: 8px; }
.rl-cases { display: flex; height: 26px; }
.rl-cases i { flex: 1; min-width: 0; background: rgba(255, 138, 76, .55); border-top: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid rgba(0, 0, 0, 0); }
.rl-cases i.rl-alt { background: rgba(255, 196, 160, .55); }
/* Une nouvelle image d'origine : un écart et un coin arrondi ; une répétition : collée à la précédente */
.rl-cases i.rl-nouvelle { margin-left: 3px; border-radius: 4px 0 0 4px; }
.rl-cases i.rl-nouvelle:first-child { margin-left: 0; }
.rl-cases i:has(+ .rl-nouvelle), .rl-cases i:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.rl-legende { margin: 0; font: 500 10.5px/1.35 var(--mono); letter-spacing: .02em; color: var(--texte2); height: 2.7em; overflow: hidden; }
.rl-resultat { display: flex; align-items: baseline; gap: 12px; height: 40px; min-width: 0; }
.rl-resultat b { flex: none; font: 700 30px/1 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-resultat b.rl-bon { color: var(--papier); }
.rl-resultat b.rl-mauvais { color: var(--peche); }
.rl-resultat b.rl-moyen { color: var(--texte2); }
.rl-resultat span { min-width: 0; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.rl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rl-actions .pastille { cursor: pointer; }
.rl-actions .pastille:hover { translate: none; }
.rl-actions .pastille:disabled { opacity: .3; cursor: default; }
.rl-ligne { display: flex; flex-direction: column; gap: 10px; }
.rl-autre { width: 130px; }
.rl-autre.actif { box-shadow: inset 0 0 0 1px var(--papier); }
.rl-vitesse { display: flex; flex-direction: column; gap: 12px; }
.rl-vitesse .curseur b { min-width: 4.5em; text-align: right; }
.rl-rangee { cursor: default; height: 46px; }
.rl-rangee .val { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .rl-scene { height: 214px; padding: 14px; }
  .rl-resultat { flex-direction: column; align-items: flex-start; gap: 6px; height: 54px; }
  .rl-resultat b { font-size: 26px; }
}