/* Scène « stats » : Lucie lit sa semaine sur son téléphone, dans l'onglet
   Statistiques de son back-office. Un seul écran. Ancienne scène (tableau
   de bord puis comparaison chiffrée sur une hypothèse) rangée dans
   _avant-refonte-ux/statistiques-sans-cookie/. Le rideau de fin vient du kit.

   LISIBLE SANS ZOOMER : 12 px pour tout ce qui se lit, 11 px minimum.
   Le back-office est celui que BassinWebFlow livre : Inter, encre, accent
   bleu #3F7BFF, séparateurs en pointillés.

   FICHIER ÉCRIT PAR scene-css.py : les @keyframes (barres, doigt, détails,
   défilement) sont calculés là-bas depuis un seul minutage et des mesures
   prises au banc (mesures.json). Modifier scene-fixe.css ou le script,
   jamais scene.css.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      3 %  les barres montent, une toutes les 1,2 %, avec leur chiffre
     20 %  le doigt touche lundi : son détail ; la page remonte d'un cran
           pour le montrer en entier (21 à 24 %)
     44 %  il touche samedi : le détail passe au samedi ; plus rien ne bouge
           après 46 %
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 556, fond blanc. Un iPhone de 246 x 508 en (137, 44),
   écran de 234 x 496 en (143, 50). Dans l'écran : la barre d'état (36), la
   page (404), la barre de Safari (56). */
.fn-scene--stats {
  --sc-haut: 556px;
  --bleu: #3F7BFF; --encre: #0A0A0A; --gris: #525252; --gris2: #737373; --ligne: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--stats svg { display: block; }
.fn-scene--stats p { margin: 0; }
.fn-scene--stats i { font-style: normal; }
.fn-scene--stats img { max-width: none; }

/* ═══ LE TITRE ════════════════════════════════════════════════════════ */
.sc-stats-qui {
  position: absolute; top: 0; left: 0; width: 520px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-stats-qui b { font-size: 0.8125rem; font-weight: 800; line-height: 17px; letter-spacing: -.01em; color: var(--encre); }
.sc-stats-qui span { font-size: 0.75rem; line-height: 17px; color: var(--gris); }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-stats-tel {
  position: absolute; top: 44px; left: 137px; z-index: 1;
  width: 246px; height: 508px; padding: 6px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .18);
}
.sc-stats-ecran { position: relative; height: 496px; overflow: hidden; border-radius: 34px; background: #FFFFFF; color: var(--encre); }
.sc-stats-ilot { position: absolute; top: 9px; left: 85px; z-index: 20; width: 64px; height: 19px; border-radius: 10px; background: #000000; }
.sc-stats-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 3px 20px 0 30px; background: #FFFFFF; font-size: 0.6875rem;
}
.sc-stats-statut b { font-weight: 700; }
.sc-stats-statut-ico { display: flex; align-items: center; gap: 4px; }
.sc-stats-statut-ico svg { width: 12px; height: 9px; fill: #0A0A0A; }
.sc-stats-pile { display: block; width: 19px; height: 9px; padding: 1px; border: 1px solid rgba(10, 10, 10, .45); border-radius: 3px; }
.sc-stats-pile i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* La page, entre la barre d'état et Safari : 234 x 404. Elle remonte d'un
   cran au premier détail (la hauteur de l'en-tête et des onglets). */
.sc-stats-vue { position: absolute; top: 36px; left: 0; right: 0; z-index: 0; height: 404px; overflow: hidden; background: #FFFFFF; }

/* ── Le back-office ───────────────────────────────────────────────────── */
.sc-stats-bo-tete { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; }
.sc-stats-bo-tete small { font-size: 0.6875rem; color: var(--gris2); }
.sc-stats-marque { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-stats-marque i {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; background: var(--encre); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
}
/* L'onglet actif : un fond de 2 px sous le mot, pas un bord d'un seul côté. */
.sc-stats-onglets {
  display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 14px;
  border-bottom: 1px dashed var(--ligne); font-size: 0.75rem; color: var(--gris2);
}
.sc-stats-onglets b { align-self: stretch; display: flex; align-items: center; font-weight: 700; color: var(--encre); background: linear-gradient(var(--bleu), var(--bleu)) left bottom / 100% 2px no-repeat; }

.sc-stats-resume { padding: 12px 14px 0; }
.sc-stats-total { font-size: 0.8125rem; line-height: 28px; color: var(--gris); }
.sc-stats-total b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.sc-stats-periode { font-size: 0.6875rem; line-height: 15px; color: var(--gris2); }
.sc-stats-sans { display: flex; align-items: center; gap: 5px; margin-top: 6px !important; font-size: 0.6875rem; line-height: 15px; color: var(--gris); }
.sc-stats-sans svg { width: 12px; height: 12px; flex: none; color: var(--bleu); }

/* Le graphique : sept colonnes, la même échelle pour toutes. */
.sc-stats-graphe { display: flex; align-items: flex-end; justify-content: space-between; height: 124px; margin-top: 10px; padding: 0 14px; }
.sc-stats-col { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 26px; }
.sc-stats-val { font-size: 0.6875rem; font-weight: 700; line-height: 14px; opacity: 0; }
.sc-stats-barre {
  position: relative; display: block; width: 20px; overflow: hidden;
  border-radius: 5px 5px 2px 2px; background: var(--bleu);
  transform-origin: 50% 100%; transform: scaleY(0);
}
.sc-stats-choix { position: absolute; inset: 0; background: var(--encre); opacity: 0; }
.sc-stats-jour { font-size: 0.6875rem; line-height: 14px; color: var(--gris2); }

/* Le détail du jour touché. */
.sc-stats-details {
  position: relative; height: 160px; margin: 12px 14px 0; padding-top: 10px;
  border-top: 1px dashed var(--ligne);
}
.sc-stats-indice { font-size: 0.75rem; line-height: 17px; color: var(--gris2); text-align: center; }
.sc-stats-detail { position: absolute; top: 10px; left: 0; right: 0; opacity: 0; }
.sc-stats-d-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; line-height: 17px; }
.sc-stats-d-tete b { font-weight: 800; }
.sc-stats-d-tete span { font-weight: 800; color: var(--bleu); }
.sc-stats-d-titre { margin-top: 8px !important; font-size: 0.6875rem; line-height: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris2); }
.sc-stats-d-ligne { display: flex; justify-content: space-between; font-size: 0.75rem; line-height: 18px; color: var(--gris); }
.sc-stats-d-ligne b { font-weight: 700; color: var(--encre); }
.sc-stats-d-page { display: flex; align-items: center; gap: 8px; margin-top: 3px !important; font-size: 0.75rem; }
.sc-stats-d-page img { display: block; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.sc-stats-d-page span { flex: 1; font-weight: 600; }
.sc-stats-d-page b { font-weight: 700; }

/* ── Safari ───────────────────────────────────────────────────────────── */
.sc-stats-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 56px; padding: 7px 10px 0;
  background: #F7F7F7 linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)) left top / 100% 1px no-repeat;
}
.sc-stats-safari-champ {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 11px; border-radius: 11px; background: #E4E4E9;
  font-size: 0.75rem; color: #0A0A0A;
}
.sc-stats-safari-champ b { font-size: 0.875rem; font-weight: 600; }
.sc-stats-safari-champ small { font-size: 0.6875rem; }
.sc-stats-safari-champ svg { width: 12px; height: 12px; }
.sc-stats-safari-url { display: flex; align-items: center; gap: 4px; }
.sc-stats-safari-url svg { width: 11px; height: 11px; }
.sc-stats-maison { position: absolute; bottom: 6px; left: 75px; z-index: 10; width: 84px; height: 4px; border-radius: 2px; background: #0A0A0A; }

/* ── Le doigt ─────────────────────────────────────────────────────────── */
.sc-stats-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .26);
  opacity: 0; pointer-events: none;
}

/* ── Les animations ───────────────────────────────────────────────────── */
.sc-stats-barre--0 { animation-name: sc-stats-barre-0; }
.sc-stats-val--0 { animation-name: sc-stats-val-0; }
.sc-stats-barre--1 { animation-name: sc-stats-barre-1; }
.sc-stats-val--1 { animation-name: sc-stats-val-1; }
.sc-stats-barre--2 { animation-name: sc-stats-barre-2; }
.sc-stats-val--2 { animation-name: sc-stats-val-2; }
.sc-stats-barre--3 { animation-name: sc-stats-barre-3; }
.sc-stats-val--3 { animation-name: sc-stats-val-3; }
.sc-stats-barre--4 { animation-name: sc-stats-barre-4; }
.sc-stats-val--4 { animation-name: sc-stats-val-4; }
.sc-stats-barre--5 { animation-name: sc-stats-barre-5; }
.sc-stats-val--5 { animation-name: sc-stats-val-5; }
.sc-stats-barre--6 { animation-name: sc-stats-barre-6; }
.sc-stats-val--6 { animation-name: sc-stats-val-6; }
.sc-stats-choix--0 { animation-name: sc-stats-choix-0; }
.sc-stats-choix--5 { animation-name: sc-stats-choix-5; }
.sc-stats-indice { animation-name: sc-stats-indice; }
.sc-stats-detail--lundi { animation-name: sc-stats-detail-lundi; }
.sc-stats-detail--samedi { animation-name: sc-stats-detail-samedi; }
.sc-stats-page { animation-name: sc-stats-defile; }
.sc-stats-doigt { animation-name: sc-stats-doigt; }

@keyframes sc-stats-barre-0 {
  0%            { transform: scaleY(0); }
  3%            { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  5.6%, 98.4%   { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-0 {
  0%            { opacity: 0; }
  4.3%          { opacity: 0; }
  5.6%, 98.4%   { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-1 {
  0%            { transform: scaleY(0); }
  4.2%          { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  6.8%, 98.4%   { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-1 {
  0%            { opacity: 0; }
  5.5%          { opacity: 0; }
  6.8%, 98.4%   { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-2 {
  0%            { transform: scaleY(0); }
  5.4%          { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8%, 98.4%     { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-2 {
  0%            { opacity: 0; }
  6.7%          { opacity: 0; }
  8%, 98.4%     { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-3 {
  0%            { transform: scaleY(0); }
  6.6%          { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  9.2%, 98.4%   { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-3 {
  0%            { opacity: 0; }
  7.9%          { opacity: 0; }
  9.2%, 98.4%   { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-4 {
  0%            { transform: scaleY(0); }
  7.8%          { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  10.4%, 98.4%  { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-4 {
  0%            { opacity: 0; }
  9.1%          { opacity: 0; }
  10.4%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-5 {
  0%            { transform: scaleY(0); }
  9%            { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  11.6%, 98.4%  { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-5 {
  0%            { opacity: 0; }
  10.3%         { opacity: 0; }
  11.6%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-barre-6 {
  0%            { transform: scaleY(0); }
  10.2%         { transform: scaleY(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  12.8%, 98.4%  { transform: scaleY(1); }
  99.9%, 100%   { transform: scaleY(0); }
}
@keyframes sc-stats-val-6 {
  0%            { opacity: 0; }
  11.5%         { opacity: 0; }
  12.8%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-choix-0 {
  0%            { opacity: 0; }
  20%           { opacity: 0; }
  20.3%         { opacity: 1; }
  44%           { opacity: 1; }
  44.3%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-choix-5 {
  0%            { opacity: 0; }
  44%           { opacity: 0; }
  44.3%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-stats-indice {
  0%            { opacity: 1; }
  20%           { opacity: 1; }
  20.4%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-stats-detail-lundi {
  0%            { opacity: 0; transform: translateY(6px); }
  20.3%         { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  21.3%         { opacity: 1; transform: translateY(0); }
  44.1%         { opacity: 1; transform: translateY(0); }
  44.5%, 98.4%  { opacity: 0; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-stats-detail-samedi {
  0%            { opacity: 0; transform: translateY(6px); }
  44.3%         { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  45.3%, 98.4%  { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-stats-defile {
  0%            { transform: translateY(0); }
  21%           { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  24%, 98.4%    { transform: translateY(-74px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-stats-doigt {
  0%            { opacity: 0; transform: translate(157px, 329px) scale(1.3); }
  19.65%        { opacity: 0; transform: translate(157px, 329px) scale(1.3); }
  19.9%         { opacity: 1; transform: translate(157px, 329px) scale(1); animation-timing-function: ease-out; }
  20.2%         { opacity: 1; transform: translate(157px, 329px) scale(0.84); }
  20.6%         { opacity: 0; transform: translate(157px, 329px) scale(1); }
  43.65%        { opacity: 0; transform: translate(307px, 228px) scale(1.3); }
  43.9%         { opacity: 1; transform: translate(307px, 228px) scale(1); animation-timing-function: ease-out; }
  44.2%         { opacity: 1; transform: translate(307px, 228px) scale(0.84); }
  44.6%, 98.4%  { opacity: 0; transform: translate(307px, 228px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(157px, 329px) scale(1.3); }
}

/* Moins de mouvement : l'état d'arrivée, immobile. Les barres sont
   dessinées, le samedi est choisi et son détail est ouvert. */
@media (prefers-reduced-motion: reduce) {
  .sc-stats-barre { transform: none; }
  .sc-stats-val, .sc-stats-choix--5, .sc-stats-detail--samedi { opacity: 1; }
  .sc-stats-indice { opacity: 0; }
  .sc-stats-page { transform: translateY(-74px); }
}