/* ═══════════════════════════════════════════════════════════════════════════
   Quotum — accueil : la scène du héros. Le vrai panneau en fond, et par-dessus
   « l'orbite qui se range », jouée une fois à l'ouverture de la page.
   Jetons de quotum.css seulement. Hauteur bornée par svh : la scène tient dans le
   premier écran d'un 13 pouces comme d'un mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La scène : deux plans qui se recouvrent ─────────────────────────────────
   Aucune ombre portée (DESIGN.md, ombre) : la profondeur vient du recouvrement, de la
   légère rotation du panneau du fond et de l'ombre du popover, qui est dans sa capture. */

.scene {
  --scene-h:clamp(300px, 46svh, 420px);
  position:relative;
  height:var(--scene-h);
  border:1px solid var(--filet-discret);
  border-radius:12px;
  overflow:clip;
  container-type:size;
}
.scene-capture {
  position:absolute;
  z-index:1;
  top:20px;
  left:66cqw;
  width:320px;
  rotate:2deg;
}
.scene-capture picture { display:block; }
.scene-capture img { display:block; width:320px; max-width:none; height:auto; }

@media (min-width: 960px) {
  .scene { --scene-h:clamp(420px, calc(100svh - 280px), 600px); }
  .scene-capture { top:32px; left:auto; right:4cqw; }
}

/* ── L'orbite qui se range ───────────────────────────────────────────────────
   Les logos tournent autour de la tuile de Quotum, le panneau entre par la droite et chacun y
   prend sa ligne. Les logos ne font que se déplacer et changer de taille : ni rotation, ni
   recoloration (chartes de marque). Sans prise en charge, sous mouvement réduit, l'état final :
   le panneau rangé, posé sur la capture. */

.orbite-plan {
  --tuile:18px;
  --entete:32px;
  --rh:clamp(18px, (100cqh - var(--entete) - 48px) / 12, 30px);
  --ph:calc(var(--entete) + 12 * var(--rh) + 2px);
  --pw:min(300px, 76cqw);
  --px:4cqw;
  --py:calc(50cqh - var(--ph) / 2);
  --rayon:min(40cqw, 38cqh);
  position:absolute;
  inset:0;
  z-index:2;
  container-type:size;
}
.orbite-plan .astre { display:none; }
.orbite-plan .logos { position:absolute; inset:0; z-index:3; pointer-events:none; }
.orbite-plan .tuile-quotum { display:block; width:100%; height:100%; }

.orbite-plan .panneau {
  position:absolute;
  z-index:1;
  left:var(--px);
  top:var(--py);
  width:var(--pw);
  height:var(--ph);
  background:var(--fond-page);
  border:1px solid var(--filet-action);
  border-radius:12px;
  overflow:hidden;
}
.orbite-plan .panneau-titre {
  height:var(--entete);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  font-size:13px;
  font-weight:600;
  border-bottom:1px solid var(--filet-discret);
}
.orbite-plan .mini-tuile { width:16px; height:16px; display:block; }
.orbite-plan .rangee {
  height:var(--rh);
  display:grid;
  grid-template-columns:calc(var(--tuile) + 6px) minmax(0, 1fr) 36px auto;
  align-items:center;
  column-gap:6px;
  padding:0 12px;
  font-size:12px;
}
.orbite-plan .rangee + .rangee { border-top:1px solid var(--filet-discret); }
.orbite-plan .nom { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orbite-plan .sigle {
  font-size:11px;
  font-weight:600;
  color:var(--encre-moyenne);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* Dix cases en contour, et par-dessus les pleines, chacune à sa place. */
.orbite-plan .jauge {
  --case:5px;
  --pas:7px;
  position:relative;
  display:block;
  width:calc(var(--pas) * 9 + var(--case));
  height:12px;
  color:var(--mesure-confortable);
}
.orbite-plan .jauge[data-palier="tendue"] { color:var(--mesure-tendue); }
.orbite-plan .jauge[data-palier="critique"] { color:var(--mesure-critique); }
.orbite-plan .jauge-cases { position:absolute; inset:0; display:flex; gap:calc(var(--pas) - var(--case)); }
.orbite-plan .jauge-cases i { width:var(--case); height:100%; border:1px solid currentColor; border-radius:2px; }
.orbite-plan .jauge-pleines b {
  position:absolute;
  top:0;
  left:calc(var(--k) * var(--pas));
  width:var(--case);
  height:100%;
  border-radius:2px;
  background:currentColor;
}

/* La plaque donne au logo sa zone de protection ; --marge compense le vide que le fichier
   officiel laisse autour du glyphe, sans toucher au fichier. */
.orbite-plan .logo {
  position:absolute;
  left:calc(var(--px) + 12px);
  top:calc(var(--py) + var(--entete) + var(--i) * var(--rh) + (var(--rh) - var(--tuile)) / 2);
  width:var(--tuile);
  height:var(--tuile);
}
.orbite-plan :is(.etape-a, .etape-b, .etape-c) { display:block; width:100%; height:100%; }
.orbite-plan .plaque {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22%;
  background:var(--fond-page);
  border:1px solid var(--filet-discret);
}
.orbite-plan .plaque picture, .orbite-plan .plaque > img {
  display:block;
  width:calc(64% * var(--marge, 1));
  height:calc(64% * var(--marge, 1));
}
.orbite-plan .plaque img { width:100%; height:100%; object-fit:contain; }
.orbite-plan .plaque-texte { font-size:8px; font-weight:600; line-height:1; color:var(--encre-moyenne); }

@media (min-width: 960px) {
  .orbite-plan { --tuile:20px; --entete:38px; --pw:min(320px, 60cqw); }
  .orbite-plan .rangee { font-size:13px; grid-template-columns:calc(var(--tuile) + 6px) minmax(0, 1fr) 40px auto; }
  .orbite-plan .jauge { --case:7px; --pas:10px; height:13px; }
}

/* Joué une fois, au chargement : 6 s en tout, rien ne boucle. Une seconde vaut 1/6 du
   parcours ; les logos partent l'un après l'autre (--i), puis chaque case se remplit (--k). */
@supports (translate: calc(1px * cos(0deg)) calc(1px * sin(0deg))) {
  @media (prefers-reduced-motion: no-preference) {
    .orbite-plan .astre { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; }
    .orbite-plan .mini-tuile { visibility:hidden; }
    .orbite-plan .anneau {
      position:absolute;
      left:calc(50cqw - var(--rayon));
      top:calc(50cqh - var(--rayon));
      width:calc(var(--rayon) * 2);
      height:calc(var(--rayon) * 2);
      border:1px dashed var(--filet-action);
      border-radius:50%;
    }
    .orbite-plan .anneau-2 { scale:0.62; border-style:solid; border-color:var(--filet-discret); }
    .orbite-plan .astre-tuile {
      position:absolute;
      left:calc(var(--px) + 12px);
      top:calc(var(--py) + (var(--entete) - 16px) / 2);
      width:16px;
      height:16px;
    }

    .orbite-plan :is(.etape-a, .etape-b, .etape-c, .panneau, .rangee, .jauge-pleines b, .anneau, .astre-tuile) {
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.45, 0, .25, 1);
    }
    .orbite-plan .logo { --a:calc(var(--i) * 30deg - 90deg); --r:var(--rayon); }

    /* 1. Les logos paraissent un à un sur l'orbite, qui tourne. */
    .orbite-plan .etape-c {
      animation-name:orbite-parait;
      animation-delay:calc(var(--i) * 0.08s);
      animation-duration:0.36s;
    }
    .orbite-plan .etape-b {
      animation-name:orbite-tourne;
      animation-timing-function:linear;
      animation-delay:calc(var(--i) * 0.08s);
      animation-duration:calc(3.6s + var(--i) * 0.04s);
    }
    /* 2. Les anneaux sortent à gauche, le panneau entre par la droite, la tuile se pose dans son titre. */
    .orbite-plan .anneau-1 { animation-name:orbite-anneau-sort; animation-delay:2s; animation-duration:1s; }
    .orbite-plan .anneau-2 { animation-name:orbite-anneau-sort-2; animation-delay:1.9s; animation-duration:1s; }
    .orbite-plan .panneau { animation-name:orbite-panneau-entre; animation-delay:2s; animation-duration:0.85s; }
    .orbite-plan .astre-tuile { animation-name:orbite-astre-se-pose; animation-delay:2.4s; animation-duration:0.85s; }
    /* 3. Chaque logo quitte l'orbite pour sa ligne ; la ligne glisse, la jauge se remplit case à case. */
    .orbite-plan .etape-a {
      animation-name:orbite-se-range;
      animation-delay:calc(2.9s + var(--i) * 0.11s);
      animation-duration:0.7s;
    }
    .orbite-plan .rangee {
      animation-name:orbite-rangee-arrive;
      animation-delay:calc(3s + var(--i) * 0.12s);
      animation-duration:0.6s;
    }
    .orbite-plan .jauge-pleines b {
      animation-name:orbite-case;
      animation-timing-function:linear;
      animation-delay:calc(3.52s + var(--i) * 0.12s + var(--k) * 0.05s);
      animation-duration:0.12s;
    }

    @keyframes orbite-parait {
      from { opacity:0; scale:0; }
      to { opacity:1; scale:1; }
    }
    /* Le cercle en dix cordes de 12° ; la dernière image ramène le logo au centre de l'orbite. */
    @keyframes orbite-tourne {
      0% { translate:calc(var(--r) * cos(var(--a))) calc(var(--r) * sin(var(--a))); scale:1.6; }
      8% { translate:calc(var(--r) * cos(var(--a) + 12deg)) calc(var(--r) * sin(var(--a) + 12deg)); }
      16% { translate:calc(var(--r) * cos(var(--a) + 24deg)) calc(var(--r) * sin(var(--a) + 24deg)); }
      24% { translate:calc(var(--r) * cos(var(--a) + 36deg)) calc(var(--r) * sin(var(--a) + 36deg)); }
      32% { translate:calc(var(--r) * cos(var(--a) + 48deg)) calc(var(--r) * sin(var(--a) + 48deg)); }
      40% { translate:calc(var(--r) * cos(var(--a) + 60deg)) calc(var(--r) * sin(var(--a) + 60deg)); }
      48% { translate:calc(var(--r) * cos(var(--a) + 72deg)) calc(var(--r) * sin(var(--a) + 72deg)); }
      56% { translate:calc(var(--r) * cos(var(--a) + 84deg)) calc(var(--r) * sin(var(--a) + 84deg)); }
      64% { translate:calc(var(--r) * cos(var(--a) + 96deg)) calc(var(--r) * sin(var(--a) + 96deg)); }
      72% { translate:calc(var(--r) * cos(var(--a) + 108deg)) calc(var(--r) * sin(var(--a) + 108deg)); }
      80% { translate:calc(var(--r) * cos(var(--a) + 120deg)) calc(var(--r) * sin(var(--a) + 120deg)); scale:1.6; }
      100% { translate:0 0; scale:1; }
    }
    @keyframes orbite-se-range {
      from {
        translate:
          calc(50cqw - var(--px) - 12px - var(--tuile) / 2)
          calc(50cqh - var(--py) - var(--entete) - var(--i) * var(--rh) - var(--rh) / 2);
      }
      to { translate:0 0; }
    }
    @keyframes orbite-anneau-sort {
      from { translate:0 0; opacity:1; }
      to { translate:-70cqw 0; opacity:0; }
    }
    @keyframes orbite-anneau-sort-2 {
      from { translate:0 0; opacity:1; }
      to { translate:-90cqw 0; opacity:0; }
    }
    @keyframes orbite-panneau-entre {
      from { translate:100cqw 0; opacity:0; }
      to { translate:0 0; opacity:1; }
    }
    @keyframes orbite-astre-se-pose {
      from {
        translate:calc(50cqw - var(--px) - 20px) calc(50cqh - var(--py) - var(--entete) / 2);
        scale:4;
      }
      to { translate:0 0; scale:1; }
    }
    @keyframes orbite-rangee-arrive {
      from { opacity:0; translate:48px 0; }
      to { opacity:1; translate:0 0; }
    }
    @keyframes orbite-case {
      from { opacity:0; }
      to { opacity:1; }
    }
  }
}