/* =====================================================================
   Opera Populi : seuil de démarrage (jauge) et capture de l'œuvre
   ===================================================================== */

/* ---------- Jauge de démarrage : une tesselle par idée reçue, jusqu'à 50 ---------- */
.stat-strip__item:nth-child(n+4) { --dot: var(--tess-5); }
/* Carte de démarrage de la vue invité : même design que le tableau de bord, hors de sa grille. */
.hero__intro .stat--hero { grid-column: auto; grid-row: auto; margin-top: var(--sp-3); }
@media (min-width: 40rem) { .hero__intro .stat--hero .start-meter--card { grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; } }
/* Avant démarrage : 3 cases dans la bande de chiffres (le compte à rebours passe dans la carte bleue). */
body:is([data-phase="waiting"], [data-phase="ready"], [data-phase="prestart"]) .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-meter { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; }
.start-meter i {
  aspect-ratio: 1; border-radius: 2px;
  background: color-mix(in srgb, var(--st-selected-fg) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-selected-fg) 45%, transparent);
}
.start-meter i.is-on { box-shadow: none; rotate: -6deg; }
.start-meter i.is-on:nth-child(3n+1) { background: var(--tess-2); }
.start-meter i.is-on:nth-child(3n+2) { background: var(--tess-1); rotate: 5deg; }
.start-meter i.is-on:nth-child(3n) { background: var(--tess-4); }
.start-meter--card { margin-top: auto; padding-top: var(--sp-4); grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
body[data-phase="ready"] .stat--countdown .stat__sub { font-weight: var(--fw-semibold); color: var(--st-selected-fg); }

/* ---------- Capture de l'œuvre : fenêtre de navigateur (cohérente avec le bandeau de l'œuvre) ---------- */
.shot-host { margin-top: var(--sp-5); }
.shot-host--cycle { margin-top: 0; }
.shot { display: grid; gap: .7rem; margin: 0; }
.shot__window { display: block; rotate: -.6deg; box-shadow: var(--shadow-md); color: inherit; text-decoration: none; cursor: pointer; }
.shot__window:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.shot:hover .shot__window { rotate: 0deg; }
/* Même rapport (1440 x 900) pour l'image et l'attente : aucun décalage quand la capture arrive. Mobile : cadre
   moins haut que la capture 390 x 844 (haut de l'œuvre seulement), pour ne pas occuper tout l'écran. */
.shot__picture, .shot__img { display: block; width: 100%; }
.shot__img, .shot__empty { aspect-ratio: 16 / 10; }
.shot__img { height: auto; object-fit: contain; object-position: center; background: var(--surface-3); } /* capture entière, redimensionnée dans le cadre */
.shot__empty { position: relative; display: grid; place-items: center; background: var(--grout); }
@media (max-width: 39.99rem) { .shot__img, .shot__empty { aspect-ratio: 4 / 5; } }
.shot__mosaic { position: absolute; inset: 0; }
.shot__empty-text {
  position: relative; max-width: 80%; padding: .45rem .85rem; border-radius: var(--r-pill);
  background: var(--veil); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center;
}
.shot__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; font-size: var(--fs-sm); }
.shot__title { font-weight: var(--fw-bold); }
.shot__meta { color: var(--text-muted); }
.shot__meta:empty { display: none; }
.shot__link { margin-left: auto; }
.shot-host--cycle .shot__caption { font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .shot__window, .shot:hover .shot__window { rotate: 0deg; } }