/* =====================================================================
   Opera Populi : vue invité (accueil, chiffres, scène, fonctionnement, bandeau de l'œuvre)
   ===================================================================== */

/* ---------- Accueil invité ---------- */
.hero__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.032em; font-variation-settings: "SOFT" 100; }
.hero__title em { color: var(--accent-text); font-weight: var(--fw-medium); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 30rem) { .hero__actions .btn { flex: 1 1 auto; } }

.stat-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: var(--sp-2);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
/* align-content : valeurs alignées en bas quand un libellé de la rangée passe sur deux lignes */
.stat-strip__item { display: grid; gap: .25rem; align-content: space-between; padding: 1rem 1.15rem; background: var(--surface); min-width: 0; }
.stat-strip__label {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.stat-strip__label::before { content: ""; width: .55rem; height: .55rem; flex: none; border-radius: var(--r-2xs); background: var(--dot); rotate: -10deg; }
.stat-strip__item:nth-child(1) { --dot: var(--tess-2); }
.stat-strip__item:nth-child(2) { --dot: var(--tess-4); }
.stat-strip__item:nth-child(3) { --dot: var(--tess-1); }
.stat-strip__item:nth-child(4) { --dot: var(--tess-5); }
.stat-strip__value {
  font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-semibold);
  line-height: 1.1; letter-spacing: -.02em; font-variation-settings: var(--soft);
}
@media (min-width: 40rem) and (max-width: 59.99rem) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Scène : la carte d'authentification centrée sur la mosaïque */
.stage {
  position: relative; isolation: isolate; display: grid; align-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(.75rem, 3vw, 2.25rem);
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--grout); box-shadow: inset 0 0 0 1px var(--line);
}
.stage__mosaic { position: absolute; inset: 0; z-index: -1; }

/* ---------- Fonctionnement en 4 étapes ---------- */
.how { background: var(--bg-sunken); }
.steps { position: relative; isolation: isolate; display: grid; gap: var(--sp-6); }
.steps::before { content: ""; position: absolute; z-index: -1; top: 1rem; bottom: 1rem; left: 1.75rem; border-left: 2px dashed var(--line-strong); }
.step { position: relative; display: grid; gap: .5rem; align-content: start; padding-left: 5rem; }
.step__num {
  position: absolute; left: 0; top: -.25rem;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-md); background: var(--tone-bg); color: var(--tone-fg);
  box-shadow: inset 0 -4px 0 var(--tone), var(--shadow-md);
  font: var(--fw-semibold) var(--fs-2xl) / 1 var(--font-display); font-variation-settings: "SOFT" 100;
  rotate: -6deg; transition: rotate var(--dur-slow) var(--ease-spring);
}
.step:nth-child(even) .step__num { rotate: 5deg; }
.step:hover .step__num { rotate: 0deg; }
.step:nth-child(1) { --tone: var(--st-pending); --tone-bg: var(--st-pending-bg); --tone-fg: var(--st-pending-fg); }
.step:nth-child(2) { --tone: var(--st-selected); --tone-bg: var(--st-selected-bg); --tone-fg: var(--st-selected-fg); }
.step:nth-child(3) { --tone: var(--st-implemented); --tone-bg: var(--st-implemented-bg); --tone-fg: var(--st-implemented-fg); }
.step:nth-child(4) { --tone: var(--st-rejected); --tone-bg: var(--st-rejected-bg); --tone-fg: var(--st-rejected-fg); }
.step__text { color: var(--text-muted); }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
  .steps::before { top: 1.5rem; bottom: auto; left: 1.75rem; right: 1.75rem; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .step { padding-left: 0; padding-top: 5rem; }
}

/* ---------- Bandeau de l'œuvre ---------- */
.oeuvre-band {
  display: grid; gap: var(--sp-6); align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.oeuvre-band__text { display: grid; gap: var(--sp-4); justify-items: start; }
.window {
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--shadow-lg);
  rotate: 1.5deg; transition: rotate var(--dur-slow) var(--ease-spring);
}
.oeuvre-band:hover .window { rotate: 0deg; }
.window__bar { display: flex; align-items: center; gap: 6px; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.window__bar i { width: 10px; height: 10px; flex: none; border-radius: var(--r-2xs); background: var(--tess-2); }
.window__bar i:nth-child(2) { background: var(--tess-1); }
.window__bar i:nth-child(3) { background: var(--tess-4); }
.window__url {
  flex: 0 1 16rem; min-width: 0; margin-left: .5rem; padding: .15rem .6rem; border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-muted); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.window__mosaic { aspect-ratio: 20 / 9; }
@media (min-width: 52rem) { .oeuvre-band { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }