/* ============================================================================
   FourFiveOne — base.css
   Jetons, socle et éléments communs aux quatre variantes.
   Palette prélevée sur les images : abysse teal, braise orange.
   Aucune police externe : piles système uniquement.
   ========================================================================= */

:root {
  --abyss:    #06171c;
  --deep:     #0b2930;
  --deeper:   #041014;

  --teal:     #2fa39c;
  --teal-dim: rgba(47, 163, 156, 0.16);
  --ember:    #e46a2c;
  --glow:     #f5a35c;

  --bone:     #f2ece1;
  --bone-dim: #a9a49b;

  --font-edge: "Bahnschrift Condensed", "Bahnschrift SemiCondensed", Bahnschrift,
               "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: Charter, "Bitstream Charter", "Iowan Old Style", Constantia,
               Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, .68, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--font-body);
  overscroll-behavior: none;
}
body { overflow: hidden; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: -6px; }

img { border-style: none; }

/* ---- Image ---------------------------------------------------------------
   JPEG uniquement. La classe .shot est désormais portée par le <img>
   lui-même : il n'y a plus de <picture> ni de sources alternatives. */

.shot {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--deeper);
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.shot.is-loaded { opacity: 1; }
.shot.is-contain { object-fit: contain; }

/* Une image introuvable laisse une trace lisible plutôt qu'un rectangle noir. */
.shot.is-failed {
  opacity: 1;
  background:
    repeating-linear-gradient(45deg,
      rgba(228,106,44,.10) 0 12px, rgba(228,106,44,.02) 12px 24px),
    var(--deeper);
}

/* ---- Visionneuse partagée -------------------------------------------------- */

.lb { position: fixed; inset: 0; z-index: 50; display: none; }
.lb.is-on { display: block; }

.lb-scrim {
  position: absolute; inset: 0; background: var(--abyss);
  opacity: 0; transition: opacity 380ms var(--ease);
}
.lb.is-open .lb-scrim { opacity: 1; }

.lb-stage {
  position: absolute; inset: 0;
  transform-origin: center center;
  transition: transform 460ms var(--ease);
  will-change: transform;
}
.lb-stage .shot { object-fit: contain; opacity: 1; }

.lb-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.3rem,4vw,3rem) clamp(1.3rem,5vw,4rem) clamp(2.6rem,5vw,3.4rem);
  background: linear-gradient(to top,
    rgba(4,16,20,.96) 0%, rgba(4,16,20,.84) 55%, rgba(4,16,20,0) 100%);
  opacity: 0; transform: translateY(16px);
  transition: opacity 380ms ease 220ms, transform 380ms var(--ease) 220ms;
}
.lb.is-open .lb-panel { opacity: 1; transform: none; }
.lb-panel .note { max-width: 60ch; }
.lb-panel .mark { position: absolute; right: clamp(1.3rem,5vw,4rem); bottom: clamp(1rem,3vw,1.8rem); }

.lb-close {
  position: absolute; top: 0; right: 0; width: 56px; height: 56px;
  background: transparent; border: 0; cursor: pointer; z-index: 3; opacity: .5;
}
.lb-close::before, .lb-close::after {
  content: ""; position: absolute; left: 18px; top: 27px;
  width: 20px; height: 1px; background: var(--bone);
}
.lb-close::before { transform: rotate(45deg); }
.lb-close::after  { transform: rotate(-45deg); }
.lb-close:hover, .lb-close:focus-visible { opacity: 1; }

/* ---- Flux ------------------------------------------------------------------ */

.flow-end { flex: 0 0 1px; width: 1px; height: 1px; }

/* ---- Jauge de position -------------------------------------------------- */

.rail {
  position: fixed; top: 0; right: 0;
  width: 2px; height: 100%;
  background: var(--teal-dim);
  z-index: 20; pointer-events: none;
}
.rail-fill {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  background: var(--ember);
  box-shadow: 0 0 14px rgba(228,106,44,.7);
  transition: height 260ms ease-out, top 260ms ease-out;
}

/* Variante horizontale, utilisée par la Bande. */
.rail--x { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 2px; }
.rail--x .rail-fill { top: 0; bottom: 0; height: auto; left: 0; width: 0;
  transition: width 260ms ease-out, left 260ms ease-out; }

/* ---- Coupure du son ----------------------------------------------------- */

.mute {
  position: fixed;
  left: clamp(.9rem, 2.2vw, 1.6rem);
  bottom: clamp(.9rem, 2.2vw, 1.6rem);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  z-index: 30; opacity: .28;
  transition: opacity 300ms ease;
}
.mute:hover, .mute:focus-visible { opacity: .9; }

.mute-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px rgba(245,163,92,.85);
  transition: background 250ms ease, box-shadow 250ms ease;
}
.mute[aria-pressed="true"] .mute-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bone-dim);
}

/* ---- Invite au premier chargement --------------------------------------- */

.invite {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  z-index: 25; pointer-events: none; opacity: 0;
}
.invite.is-on { animation: invite-life 5.4s ease-out 1.1s forwards; }
.invite span {
  position: absolute; inset: 0;
  border: 1px solid var(--glow); border-radius: 50%;
  animation: invite-pulse 2.4s ease-out infinite;
}
@keyframes invite-life {
  0% { opacity: 0; } 14% { opacity: .85; } 74% { opacity: .85; } 100% { opacity: 0; }
}
@keyframes invite-pulse {
  0% { transform: scale(.72); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Tirer pour changer de série (mobile uniquement) ---------------------

   Un petit anneau qui suit le tirage du doigt, visible seulement pendant le
   geste, et qui se referme sur une flèche pleine une fois le seuil franchi
   — le signal que relâcher déclenchera bien le changement de série. */

.pull {
  position: fixed; left: 50%; top: 18px;
  transform: translate(-50%, -46px);
  width: 40px; height: 40px;
  z-index: 26; pointer-events: none;
  opacity: 0;
}
.pull.is-tracking { transition: none; }
.pull.is-releasing { transition: transform 320ms var(--ease), opacity 320ms ease; }

.pull-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  display: grid; place-items: center;
}
.pull-ring::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--bone-dim);
  transition: transform 200ms ease, border-top-color 200ms ease;
}
/* Seuil franchi : la flèche se remplit et pivote pour annoncer le relâcher. */
.pull.is-armed .pull-ring { border-color: var(--ember); }
.pull.is-armed .pull-ring::before {
  border-top-color: var(--ember);
  transform: rotate(180deg) scale(1.15);
}

/* Aucune trace de ce mécanisme si le geste tactile n'est pas disponible :
   sur desktop, PageUp/PageDown suffisent et couvrent déjà ce rôle. */
@media (hover: hover) and (pointer: fine) {
  .pull { display: none; }
}

/* ---- Notes -------------------------------------------------------------- */

.note { max-width: 46ch; }

.note::before {
  content: ""; display: block;
  width: 3.5rem; height: 1px;
  margin-bottom: 1.6rem;
  background: var(--ember);
}

.note h2 {
  margin: 0 0 1.4rem;
  font-family: var(--font-edge); font-weight: 400;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: clamp(1rem, .85rem + .9vw, 1.6rem);
  line-height: 1.25; color: var(--glow);
}

.note p {
  margin: 0 0 1rem;
  font-size: clamp(1rem, .94rem + .35vw, 1.2rem);
  line-height: 1.75; color: var(--bone);
}
.note p:last-child { margin-bottom: 0; }

.mark {
  font-family: var(--font-edge);
  font-size: .72rem; letter-spacing: .28em;
  color: var(--bone-dim); font-variant-numeric: tabular-nums;
}
.mark b { font-weight: 400; color: var(--ember); }

/* ---- Panneau d'amorçage et d'erreur ------------------------------------- */

.boot {
  position: fixed; inset: 0;
  display: none; place-items: center;
  padding: 2rem; text-align: center;
  white-space: pre-line;
  background: var(--abyss); color: var(--bone-dim);
  font-family: var(--font-edge); letter-spacing: .1em;
  font-size: .9rem; line-height: 1.8;
  z-index: 60;
}
.boot.is-on, .boot--static { display: grid; }
.boot--error { color: var(--glow); }

/* ---- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .shot { transition-duration: 1ms; }
  .lb-stage, .lb-scrim, .lb-panel { transition-duration: 1ms; }
  .invite.is-on { animation: none; opacity: .7; }
  .invite span { animation: none; }
}