/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, socle des scènes (#2).
 *
 * La vignette (.afl-cover), sa scène (.afl-stage) et ce que les scènes partagent : couleurs,
 * fenêtres, pastilles, compteur à rouleau. Chaque scène a sa propre feuille, chargée seulement
 * si elle est dans la page.
 *
 * Règles de toute scène (voir le CLAUDE.md du module) :
 *   - tout sélecteur commence par la classe racine de la scène, toute animation porte son préfixe ;
 *   - les tailles s'écrivent en cqw : la vignette est un conteneur de requête ;
 *   - toutes les animations durent var(--afl-dur) et encodent leur séquence dans les
 *     pourcentages de keyframes : pause, reprise et remise à zéro restent synchrones ;
 *   - aucune animation-delay : elle est réservée à l'image fixe du mouvement réduit ;
 *   - aucun nombre en dur dans scene.tpl : $afl le formate à la façon de la langue. Seul un nombre
 *     qui ne dépend pas de la langue (date saisie dans un champ, référence) s'écrit tel quel, dans
 *     un élément marqué afl-literal.
 *
 * Les couleurs sont des variables. Une autre boutique les reprend à sa charte en posant leurs
 * variables d'entrée sur :root (--afl-shop-primary…), depuis n'importe quelle couche de son
 * thème : surcharger .afl-cover ne marcherait pas, ce socle étant chargé après le thème et hors
 * couche (#8).
 */

.afl-cover {
  --afl-primary: var(--afl-shop-primary, #0272ea);
  --afl-primary-light: var(--afl-shop-primary-light, #0d80f7);
  --afl-secondary: var(--afl-shop-secondary, #070731);
  --afl-accent: var(--afl-shop-accent, #17c3b2);
  --afl-success: var(--afl-shop-success, #16a34a);
  --afl-warning: var(--afl-shop-warning, #d97706);
  --afl-danger: var(--afl-shop-danger, #dc2626);
  --afl-star: var(--afl-shop-star, #fbbc05);

  --afl-ink: var(--afl-shop-ink, #070731);
  --afl-ink-60: rgba(7, 7, 49, .62);
  --afl-ink-40: rgba(7, 7, 49, .42);
  --afl-ink-14: rgba(7, 7, 49, .14);
  --afl-ink-08: rgba(7, 7, 49, .08);
  --afl-ink-05: rgba(7, 7, 49, .05);

  --afl-font: var(--afl-shop-font, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  container-type: size;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* La scène ne doit rien au thème : police, interlignage et casse remis à plat. */
.afl-cover .afl-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--afl-font);
  font-size: 3.1cqw;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--afl-ink);
  -webkit-font-smoothing: antialiased;
}
.afl-cover .afl-stage *,
.afl-cover .afl-stage *::before,
.afl-cover .afl-stage *::after {
  box-sizing: border-box;
}
.afl-cover .afl-stage svg {
  display: block;
  max-width: none;
}

/* Fondu de fin de cycle, partagé par les scènes. */
@keyframes afl-cycle {
  0%, 90% { opacity: 1; }
  95.5% { opacity: 0; }
  99.9% { opacity: 0; }
  100% { opacity: 1; }
}

/* ------------------------------------------------------- éléments partagés */
.afl-cover .afl-ui-top {
  position: absolute; left: 0; right: 0; top: 0; height: 9.4cqw; z-index: 5;
  display: flex; align-items: center; gap: 2cqw; padding: 0 3.6cqw;
  background: #fff; border-bottom: 1px solid var(--afl-ink-08);
}
.afl-cover .afl-ui-top .afl-ui-brand {
  font-size: 2.8cqw; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 1.2cqw; white-space: nowrap;
}
.afl-cover .afl-ui-top .afl-ui-brand em {
  width: 3.2cqw; height: 3.2cqw; border-radius: 1cqw; font-style: normal; flex: none;
  background: linear-gradient(135deg, var(--afl-primary-light), var(--afl-primary));
}
.afl-cover .afl-ui-line { height: 1.4cqw; border-radius: 99px; background: var(--afl-ink-08); flex: none; }
.afl-cover .afl-ui-pill {
  display: inline-flex; align-items: center; gap: 1.1cqw; white-space: nowrap;
  font-size: 2.1cqw; font-weight: 700; border-radius: 99px; padding: .9cqw 1.9cqw;
}
.afl-cover .afl-ui-pill--ok { color: var(--afl-success); background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .26); }
.afl-cover .afl-ui-pill--info { color: var(--afl-primary); background: rgba(2, 114, 234, .09); border: 1px solid rgba(2, 114, 234, .24); }
.afl-cover .afl-ui-pill--dark { color: #fff; background: rgba(7, 7, 49, .76); border: 1px solid rgba(255, 255, 255, .18); }
.afl-cover .afl-ui-toast {
  position: absolute; z-index: 12; display: inline-flex; align-items: center; gap: 1.3cqw; white-space: nowrap;
  font-size: 2.2cqw; font-weight: 700; border-radius: 99px; padding: 1.1cqw 2.2cqw;
  background: #fff; box-shadow: 0 1.8cqw 3.6cqw -1.6cqw rgba(7, 7, 49, .45); opacity: 0;
}
.afl-cover .afl-ui-cursor {
  position: absolute; z-index: 14; left: 0; top: 0; width: 5cqw; height: 5cqw;
  filter: drop-shadow(0 .8cqw 1.4cqw rgba(7, 7, 49, .45));
}
.afl-cover .afl-ui-cursor svg { width: 100%; height: 100%; }

/* --------------------------------------------- compteur à rouleau de chiffres
   Le rouleau se déplace en pourcentage de SA PROPRE hauteur : avec N chiffres empilés,
   -100/N % vaut exactement un cran, quelles que soient les métriques de la police. */
.afl-cover .afl-reel {
  font: inherit; letter-spacing: inherit; text-transform: none; color: inherit;
  display: inline-block; line-height: 1; height: 1em; overflow: hidden; vertical-align: top;
}
.afl-cover .afl-reel .afl-reel__t {
  font: inherit; letter-spacing: inherit; color: inherit;
  display: block; line-height: 1; margin: 0; padding: 0;
}
.afl-cover .afl-reel .afl-reel__t b {
  font: inherit; font-style: normal; letter-spacing: inherit; color: inherit; text-align: inherit;
  display: block; line-height: 1; height: 1em; margin: 0; padding: 0;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- lecture et arrêt
   En fin de feuille et en !important : le raccourci `animation:` de chaque règle de scène
   remet sinon `animation-play-state` à `running`. Au repos, la scène est arrêtée sur son
   **image fixe** (QL3, #9) : chaque animation figée à l'instant que la fiche désigne
   (--afl-still-at, fraction du cycle), par un délai négatif, sans JavaScript aussi. Elle joue
   quand le lecteur pose .is-playing, délai remis à 0 : relancée par .is-reset, elle repart de
   l'image 0. .is-reset coupe les animations le temps d'un reflow. */
.afl-cover .afl-stage,
.afl-cover .afl-stage *,
.afl-cover .afl-stage::before,
.afl-cover .afl-stage::after,
.afl-cover .afl-stage *::before,
.afl-cover .afl-stage *::after {
  animation-play-state: paused !important;
  animation-delay: calc(var(--afl-dur, 0s) * var(--afl-still-at, 0) * -1) !important;
}
.afl-cover.is-playing .afl-stage,
.afl-cover.is-playing .afl-stage *,
.afl-cover.is-playing .afl-stage::before,
.afl-cover.is-playing .afl-stage::after,
.afl-cover.is-playing .afl-stage *::before,
.afl-cover.is-playing .afl-stage *::after {
  animation-play-state: running !important;
  animation-delay: 0s !important;
}
.afl-cover.is-reset .afl-stage,
.afl-cover.is-reset .afl-stage *,
.afl-cover.is-reset .afl-stage::before,
.afl-cover.is-reset .afl-stage::after,
.afl-cover.is-reset .afl-stage *::before,
.afl-cover.is-reset .afl-stage *::after {
  animation: none !important;
}

/* ------------------------------------------------------- mouvement réduit
   Aucune animation : l'image fixe du repos, même quand le lecteur pose .is-playing. */
@media (prefers-reduced-motion: reduce) {
  .afl-cover .afl-stage,
  .afl-cover .afl-stage *,
  .afl-cover .afl-stage::before,
  .afl-cover .afl-stage::after,
  .afl-cover .afl-stage *::before,
  .afl-cover .afl-stage *::after,
  .afl-cover.is-playing .afl-stage,
  .afl-cover.is-playing .afl-stage *,
  .afl-cover.is-playing .afl-stage::before,
  .afl-cover.is-playing .afl-stage::after,
  .afl-cover.is-playing .afl-stage *::before,
  .afl-cover.is-playing .afl-stage *::after {
    animation-play-state: paused !important;
    animation-delay: calc(var(--afl-dur, 0s) * var(--afl-still-at, 0) * -1) !important;
  }
}