/* ═══════════════════════════════════════════════════════════════════
   SONIC — le thème « Green Hill »
   Chargé en dernier : il redéfinit l'habillage de tout le site (panneaux,
   titres, boutons, bandeaux, pied de page) sans toucher à la structure ni
   aux scripts. La palette est dans tokens.css ; le décor animé, dans
   scripts/gl-ink.js.

   Quatre règles tiennent l'ensemble :
     1. Les panneaux ont un trait blanc, un contour noir et une ombre DURE
        décalée (jamais floue) : c'est l'interface des menus du jeu.
     2. Le texte posé directement sur le ciel est blanc avec une ombre noire
        décalée ; sur un panneau, il n'en a pas besoin.
     3. Rien n'est lissé : le pixel-art (anneau, canvas) s'affiche en
        `image-rendering: pixelated`.
     4. Les mouvements ont un petit rebond de ressort (--ease-pop).
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════ BASE */

html {
  background: #2E73F2;
  scrollbar-color: var(--shu) var(--ink-900);
}
body {
  /* Visible seulement si le décor WebGL ne tourne pas. */
  background:
    linear-gradient(to bottom, #2E73F2 0%, #8FD3FF 55%, #8FD3FF 70%, #3CC24A 70%, #3CC24A 82%, #C8702A 82%) fixed;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0;
}
::selection { background: var(--shu); color: #000; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: var(--shu);
  border: 2px solid #000;
  border-radius: 0;
}

.layer--ink { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.layer--grain { display: none; }
.layer--vignette {
  background: linear-gradient(to bottom, rgba(0, 0, 20, 0.22) 0%, transparent 12%);
}

.progress { height: 6px; background: #000; }
.progress i {
  background: repeating-linear-gradient(90deg, var(--shu) 0 10px, var(--shu-2) 10px 20px);
  box-shadow: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: 0;
}
em { color: var(--shu); }

/* Le texte « libre », directement sur le ciel */
.hero__blurb, .live__note, .net__note, .live__hint,
.portrait__cap, .rubric {
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.rubric::before { height: 4px; background: var(--shu); box-shadow: 2px 2px 0 #000; }

/* Les masques de découpe doivent laisser déborder les contours épais. */
.m {
  padding: 0.14em 0.14em 0.2em;
  margin: -0.14em -0.14em -0.2em;
}

/* ══════════════════════════════════ PANNEAUX */

.hero__ticker-item,
.stats__item,
.tile__face,
.live__chrome,
.portrait__frame,
.social,
.player__toggle,
.mode {
  background: linear-gradient(180deg, var(--ink-600) 0%, var(--ink-800) 100%);
  border: 3px solid #fff;
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 3px #000,
    6px 8px 0 3px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px var(--ink-400);
}

/* ══════════════════════════════════ NAVIGATION */

.nav { mix-blend-mode: normal; }
@media (min-width: 901px) {
  .nav::before {
    background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
    border: 3px solid #fff;
    border-radius: 14px;
    backdrop-filter: none;
    box-shadow: 0 0 0 3px #000, 5px 7px 0 3px rgba(0, 0, 0, 0.5), inset 0 0 0 2px var(--ink-400);
  }
}
@media (max-width: 900px) {
  .nav {
    background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
    border-bottom: 3px solid #fff;
    box-shadow: 0 4px 0 #000;
  }
  .nav__panel { background: var(--ink-900); backdrop-filter: none; }
}
.nav__mark-glyph {
  font-size: 0;
  width: 2rem; height: 2rem;
  border: 0;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
}
.nav__mark:hover .nav__mark-glyph { transform: scaleX(0.3); }
.nav__link, .nav__mark-text { font-weight: 700; color: #fff; }
.nav__link::after { height: 3px; background: var(--shu); }
.nav__live {
  background: var(--shoe);
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #000, 3px 4px 0 2px rgba(0, 0, 0, 0.5);
  font-weight: 700;
}
.nav__live:hover { background: #FF4B54; border-color: #fff; }
.nav__live-dot { background: var(--shu); box-shadow: none; }
.nav__live-dot::after { border-color: var(--shu); }
.burger__bar { height: 3px; background: #fff; }

/* ══════════════════════════════════ HUD (SCORE · TIME · RINGS) */

.hud {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: var(--z-nav);
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding: 0.7rem 1.1rem;
  transform: translateX(-50%);
  background: rgba(4, 10, 36, 0.78);
  border: 3px solid #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px #000, 5px 6px 0 3px rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
.hud__item { display: flex; align-items: center; gap: 0.7em; }
.hud__label { color: var(--shu); text-shadow: 2px 2px 0 #000; }
.hud__value {
  min-width: 3.4em;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  font-variant-numeric: tabular-nums;
}
.hud__ring {
  width: 1.3rem; height: 1.3rem;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
}
/* Le compteur d'anneaux clignote quand on en ramasse un. */
.hud__item.is-hit .hud__value { animation: hudhit 0.5s steps(2) 1; }
@keyframes hudhit { 50% { color: var(--shu); } }

@media (max-width: 1100px) { .hud { display: none; } }

/* ══════════════════════════════════ HERO */

.hero::before, .hero::after { display: none; }

/* Le grand 呪術 en filigrane disparaît : l'anneau du décor suffit. */
.hero__ideogram { display: none; }
.hero__ideogram--old {
  font-size: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  writing-mode: horizontal-tb;
  opacity: 0.4;
  right: clamp(0rem, 6vw, 9rem);
}
.hero__ideogram::before {
  content: "";
  display: block;
  width: min(60vh, 34vw);
  min-width: 14rem;
  aspect-ratio: 1;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
  animation: ringspin 3.2s steps(16) infinite;
}
@keyframes ringspin {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.1); }
}

.portrait__frame {
  background: var(--ink-800);
  border-radius: 6px;
}
.portrait__frame::before { display: none; }
.portrait__frame::after { border: 3px solid var(--shu); border-radius: 6px; }
.portrait__clip { border-radius: 3px; }
.portrait__clip::after { display: none; }
.portrait__img { filter: none; image-rendering: auto; }
.portrait:hover .portrait__img { filter: saturate(1.15); }
.portrait__seal {
  font-size: 0;
  width: 3rem; height: 3rem;
  right: -1.1rem; bottom: -1.1rem;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
  box-shadow: none;
  border-radius: 0;
}
.portrait__cap::before { background: var(--shu); box-shadow: 0 0 0 2px #000; }

.hero__eyebrow {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 3px #000, 4px 5px 0 3px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 700;
}
.hero__eyebrow .jp { color: var(--shu); }

/* Le titre : lettres bleues, contour blanc, pied noir — le logo du jeu. */
.hero__title {
  color: var(--sonic-hi);
  -webkit-text-stroke: 0.16em #fff;
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 #000, 0.05em 0.09em 0 #000, -0.05em 0.09em 0 #000;
  line-height: 1.12;
  letter-spacing: 0;
}
.hero__title-line:not(.hero__title-line--alt) .w {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--sonic-hi);
}
.hero__title-line--alt {
  padding-left: 0.04em;
  font-weight: 400;
  color: var(--shu);
  -webkit-text-stroke: 0.16em #fff;
  filter: none;
}
.hero__title:hover .hero__title-line--alt { -webkit-text-stroke-color: #fff; filter: none; }
.js .hero__title .hero__title-line--alt .w { color: var(--shu); transition: transform 1.05s var(--ease-out), color 0.4s; }
.hero__title:hover .hero__title-line--alt .w { color: var(--shoe); }

.hero__foot { border-top: 4px dashed rgba(255, 255, 255, 0.55); }
.hero__blurb { font-weight: 600; }
.hero__ticker-item dt { color: var(--shu); font-weight: 700; }
.hero__ticker-item dd { color: #fff; font-weight: 700; }
.hero__ticker-item dd.is-online::before { background: #4ADE80; box-shadow: 0 0 0 2px #000; }
.hero__cue { display: none; }

/* ══════════════════════════════════ BOUTONS */

.btn {
  border: 3px solid #000;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 4px 5px 0 0 #000;
  transition: box-shadow 0.25s var(--ease-pop), background 0.3s;
}
.btn:hover { box-shadow: 6px 8px 0 0 #000; }
.btn:active { box-shadow: 1px 2px 0 0 #000; }
.btn--primary {
  background: linear-gradient(180deg, #FFE866 0%, var(--shu) 55%, var(--shu-2) 100%);
  color: #000;
}
.btn--primary:hover { box-shadow: 6px 8px 0 0 #000; }
.btn--primary::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%); }
.btn--ghost {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border-color: #fff;
  box-shadow: 0 0 0 3px #000, 5px 7px 0 3px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.btn--ghost:hover { border-color: var(--shu); }

/* ══════════════════════════════════ BANDEAU */

.band__rot {
  background: conic-gradient(#FFD21A 25%, #FFB300 0 50%, #FFD21A 0 75%, #FFB300 0) 0 0 / 40px 40px;
  border-block: 5px solid #000;
  box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.35);
}
.band__track span {
  font-size: clamp(0.8rem, 1.6vw, 1.5rem);
  font-weight: 400;
  color: #000;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.55);
}
.band__track span.alt {
  color: var(--shoe);
  -webkit-text-stroke: 0;
  text-shadow: 2px 2px 0 #000;
}
.band__track i,
.marquee__sep {
  display: block;
  flex: none;
  width: clamp(1.6rem, 2.6vw, 2.6rem);
  height: clamp(1.6rem, 2.6vw, 2.6rem);
  font-size: 0;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
  opacity: 1;
}

/* ══════════════════════════════════ DESCRIPTION (terre crème) */

.description {
  clip-path: none;
  padding-top: calc(var(--sp-sect) + 22px);
  padding-bottom: calc(var(--sp-sect) + 28px);
  background:
    radial-gradient(circle at 2px 2px, rgba(11, 21, 70, 0.10) 2px, transparent 2.5px) 0 0 / 24px 24px,
    #FFF1C1;
}
/* Lisière herbeuse en haut… */
.description::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  background:
    linear-gradient(to bottom, #8BE063 0 6px, #3CC24A 6px 14px, #1F8A33 14px 22px);
  border-bottom: 4px solid #000;
}
/* …et damier de terre en bas (l'ancien kanji en filigrane s'efface). */
.description::after {
  content: "";
  inset: auto 0 0 0;
  right: 0; bottom: 0;
  height: 28px;
  font-size: 0;
  opacity: 1;
  background: conic-gradient(#C8702A 25%, #F2A94E 0 50%, #C8702A 0 75%, #F2A94E 0) 0 0 / 28px 28px;
  border-top: 4px solid #000;
}
.description__vertical { color: var(--sonic); opacity: 1; }
.description__statement {
  font-size: clamp(1.1rem, 2.7vw, 2.7rem);
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 22ch;
}
.description__statement::before { color: var(--shoe); opacity: 1; font-family: var(--font-display); }
.description__statement em,
.description__statement em .w {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--sonic);
}
.description__aside-note { color: var(--shoe); opacity: 1; }
.description__cols > p { border-top: 3px solid #0B1546; font-weight: 500; }
.description__sign-seal {
  font-size: 0;
  width: 3rem; height: 3rem;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
  box-shadow: none;
  border-radius: 0;
}

/* ══════════════════════════════════ CHIFFRES */

.stats__item::before { height: 5px; background: var(--shu); }
.stats__item:hover { border-color: var(--shu); }
.stats__num {
  font-size: clamp(1.5rem, 3.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--shu);
  text-shadow: 3px 3px 0 #000;
}
.stats__label { color: #fff; font-weight: 700; }
.stats__label .jp { color: var(--shu-2); opacity: 1; }

/* ══════════════════════════════════ LIVE */

.live__stage::before { display: none; }
.live__chrome { border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0.7rem 1rem; }
.live__dots i { width: 11px; height: 11px; border: 2px solid #000; background: var(--shoe); }
.live__dots i:nth-child(2) { background: var(--shu); }
.live__dots i:nth-child(3) { background: var(--sonic-hi); }
.live__dots i:first-child { box-shadow: none; }
.live__chan { color: #fff; font-weight: 700; }
.live__badge { color: #000; background: var(--shu); border: 2px solid #000; font-weight: 700; }
.live__badge::before { background: var(--shoe); }
.live__frame {
  background: #000;
  border: 3px solid #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 0 3px #000, 6px 10px 0 3px rgba(0, 0, 0, 0.55);
}
.live__frame:hover { border-color: var(--shu); box-shadow: 0 0 0 3px #000, 6px 10px 0 3px rgba(0, 0, 0, 0.55); }
.live__fallback { background: var(--ink-800); }
.live__fallback-kanji { color: var(--shu); opacity: 1; }

.live__title, .net__title, .contact__title {
  font-size: var(--t-h2);
  letter-spacing: 0;
  line-height: 1.15;
  color: #fff;
  -webkit-text-stroke: 0.14em #000;
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 #000, 0.06em 0.1em 0 var(--sonic);
}
.contact__title { font-size: clamp(1.6rem, 6.4vw, 6.4rem); }
.contact__title-em, .contact__title-em .w {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--shu);
  font-style: normal;
}

/* ══════════════════════════════════ RÉSEAUX */

.net__ideogram {
  font-size: 0;
  -webkit-text-stroke: 0;
  writing-mode: horizontal-tb;
  opacity: 0.35;
  left: clamp(-3rem, -3vw, 0rem);
  bottom: 2%;
}
.net__ideogram::before {
  content: "";
  display: block;
  width: clamp(10rem, 24vw, 22rem);
  aspect-ratio: 1;
  background: var(--ring-url) center / contain no-repeat;
  image-rendering: pixelated;
  animation: ringspin 3.2s steps(16) infinite;
}

.tile__face {
  backdrop-filter: none;
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ink-600), var(--ink-800));
}
.tile__face:hover {
  border-color: #fff;
  box-shadow: 0 0 0 3px #000, 6px 8px 0 3px rgba(0, 0, 0, 0.55), inset 0 0 0 3px var(--brand);
}
.tile__idx { color: var(--shu); font-weight: 700; }
.tile__go { border: 2px solid #fff; background: #000; color: #fff; }
.tile__name { font-size: clamp(0.8rem, 1.2vw, 1.15rem); line-height: 1.4; }
.tile--hero .tile__name { font-size: clamp(1.3rem, 3.2vw, 3rem); letter-spacing: 0; }
.tile__handle { color: var(--paper-mute); }
.tile__badge { border: 2px solid #fff; color: #fff; border-radius: 4px; }
.tile--alt .tile__face { opacity: 0.8; }

/* ══════════════════════════════════ PARTENAIRES */

.marquee {
  background: rgba(4, 10, 36, 0.8);
  border-block: 5px solid #000;
  box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff;
  -webkit-mask-image: none;
  mask-image: none;
}
.marquee__item {
  font-size: clamp(1rem, 2.4vw, 2.2rem);
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 #000;
}
.marquee__item:hover { color: var(--shu); -webkit-text-stroke: 0; }

/* ══════════════════════════════════ CONTACT */

.contact::before { display: none; }
.contact__mail-text {
  font-size: clamp(0.9rem, 2.1vw, 1.9rem);
  letter-spacing: 0;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
}
.contact__mail-rule { height: 5px; background: var(--shu); box-shadow: 2px 2px 0 #000; }

.social { font-weight: 700; backdrop-filter: none; border-radius: 8px; color: #fff; }
.social:hover {
  color: #000;
  background: linear-gradient(180deg, #FFE866, var(--shu));
  border-color: #fff;
  box-shadow: 0 0 0 3px #000, 5px 7px 0 3px rgba(0, 0, 0, 0.5);
}

/* ══════════════════════════════════ LECTEUR & BASCULE */

.player__toggle, .mode { backdrop-filter: none; }
.player__toggle { border-radius: 14px; }
.player__toggle:hover, .mode:hover { border-color: var(--shu); }
.player__track { font-family: var(--font-sans); font-weight: 700; }
.player__artist { color: var(--shu); }
.mode { border-radius: 14px; }
.mode__swatch { width: 12px; height: 12px; border: 2px solid #000; box-shadow: none; }
.mode__kanji {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0;
  color: #fff;
}

/* ══════════════════════════════════ PIED DE PAGE : le sol à damier */

.foot {
  margin-top: var(--sp-lg);
  padding-top: calc(var(--sp-lg) + 24px);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background:
    conic-gradient(#C8702A 25%, #F2A94E 0 50%, #C8702A 0 75%, #F2A94E 0) 0 0 / 56px 56px;
  color: #fff;
}
.foot::before {
  inset: 0 0 auto 0;
  height: 24px;
  background: linear-gradient(to bottom, #8BE063 0 7px, #3CC24A 7px 16px, #1F8A33 16px 24px);
  border-bottom: 4px solid #000;
  opacity: 1;
}
.foot__bar { text-shadow: 2px 2px 0 #000; }
.foot__center { color: var(--shu); opacity: 1; }
.foot__word {
  margin-top: var(--sp-md);
  padding-bottom: 0;
  font-size: clamp(1.8rem, 9.4vw, 13rem);
  letter-spacing: 0;
  line-height: 1.1;
  font-weight: 400;
  color: var(--shu);
  -webkit-text-stroke: 0.14em #000;
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 #000;
  -webkit-mask-image: none;
  mask-image: none;
}
.foot:hover .foot__word { -webkit-text-stroke-color: #000; color: #FFE866; }
.sign__pre { color: #fff; }
.sign__goat { color: var(--shu); text-shadow: 2px 2px 0 #000; }
.sign__name { text-shadow: none; }

/* ══════════════════════════════════ CHARGEMENT : la carte-titre */

.loader {
  background:
    repeating-linear-gradient(135deg, #1F5BE6 0 44px, #2A6BFF 44px 88px);
}
/* Sonic danse : 38 images, 45×42 pixels d'origine, agrandies sans lissage.
   --dpx = taille d'un pixel du sprite à l'écran. */
.loader__dance {
  --dpx: 6px;
  display: block;
  width: calc(45 * var(--dpx));
  height: calc(42 * var(--dpx));
  background: var(--dance-url) 0 0 / calc(45 * 38 * var(--dpx)) calc(42 * var(--dpx)) no-repeat;
  image-rendering: pixelated;
  animation: dance 3.8s steps(38) infinite;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.45));
}
@keyframes dance { to { background-position: calc(-45 * 38 * var(--dpx)) 0; } }
@media (max-width: 600px) { .loader__dance { --dpx: 4px; } }
.loader__meta { color: #fff; font-family: var(--font-display); font-size: 0.6rem; line-height: 1.6; text-shadow: 2px 2px 0 #000; }
.loader__count { color: var(--shu); }
.loader__rule {
  height: 18px;
  background: #000;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #000;
}
.loader__rule i {
  background: repeating-linear-gradient(90deg, var(--shu) 0 10px, var(--shu-2) 10px 12px);
  box-shadow: none;
}

/* ══════════════════════════════════ MOUVEMENT RÉDUIT */

@media (prefers-reduced-motion: reduce) {
  .hero__ideogram::before, .net__ideogram::before, .loader__dance { animation: none; }
}

/* ══════════════════════════════════ PETITS ÉCRANS
   Press Start 2P est gigantesque : sur mobile, le titre est agrandi à la
   limite du débordement (7 lettres dans 390 px), et les contours épais sont
   amincis — sinon ils mangent les lettres. */
@media (max-width: 600px) {
  :root { --t-h2: 6.6vw; }
  .hero__title {
    font-size: 12.4vw;
    -webkit-text-stroke-width: 0.11em;
  }
  .hero__title-line--alt { -webkit-text-stroke-width: 0.11em; }
  .live__title, .net__title, .contact__title { -webkit-text-stroke-width: 0.09em; }
  .contact__title { font-size: 8.4vw; }
  .foot__word { -webkit-text-stroke-width: 0.1em; }
}


/* ═══════════════════════════════════════════════════════════════════
   SONIC EN COURSE — scripts/runner.js
   Posé sur la lisière d'herbe du décor (la lisière est à 17,5 % de la hauteur
   dans le shader), derrière le contenu mais devant le fond. Le script règle
   la taille, l'image et la position ; ici : l'ancrage et le rendu net.
   ═══════════════════════════════════════════════════════════════════ */
.runner {
  position: fixed;
  left: 0;
  bottom: calc(17.5vh - 1.4vh);
  z-index: 5;                         /* au-dessus du canvas (0), sous le contenu (10) */
  pointer-events: none;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  will-change: transform;
  opacity: 0;
  transition: opacity .6s .5s;
}
.is-loaded .runner { opacity: 1; }
@media (max-width: 600px) {
  .runner { bottom: calc(17.5vh - 1.2vh); }
}


/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT — cadre carré, bordure dorée, rivets
   L'illustration est ronde à l'origine (un liseré sombre fait le tour) : on la
   recadre en carré, zoomée sur le visage, pour que le liseré sorte du cadre.
   ═══════════════════════════════════════════════════════════════════ */
.portrait { width: clamp(170px, 25vw, 360px); gap: 0; animation: portrait-bob 3.2s steps(8) infinite; }
@keyframes portrait-bob { 50% { transform: translateY(-8px); } }
.hero > .portrait { transform: none; }

.portrait__frame {
  padding: 0;
  border-radius: 6px;
  background: #000;
  border: 8px solid var(--shu);
  box-shadow:
    0 0 0 4px #000,
    inset 0 0 0 4px #000,
    9px 11px 0 4px rgba(0, 0, 0, 0.55);
}
.portrait__frame::after { display: none; }
.portrait__clip { border-radius: 0; aspect-ratio: 1; overflow: hidden; }
.portrait__img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 40%;
  transform: scale(1);
  transition: transform 0.5s var(--ease-pop);
}
.portrait:hover .portrait__img { transform: scale(1.08); filter: saturate(1.15); }
/* reflet pixelisé + rivets aux quatre coins */
.portrait__clip::before {
  content: "";
  position: absolute; z-index: 2; inset: 0;
  background:
    radial-gradient(circle at 9px 9px, #fff 0 2px, #000 2px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #fff 0 2px, #000 2px 4px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #fff 0 2px, #000 2px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #fff 0 2px, #000 2px 4px, transparent 4px);
  pointer-events: none;
}
@media (max-width: 860px) {
  .portrait { width: clamp(100px, 30vw, 150px); }
  .portrait__frame { border-width: 5px; }
}
@media (prefers-reduced-motion: reduce) { .portrait { animation: none; } }

/* Le lecteur (bas gauche) et la bascule JOUR/NUIT (bas droite) sont fixes : le
   pied du hero se pose franchement au-dessus d'eux. */
.hero { padding-bottom: clamp(9rem, 20vh, 11rem); }
/* Le titre se plafonne aussi à la hauteur de l'écran : sur un écran large mais
   peu haut, il ne pousse plus les boutons sous le lecteur. */
.hero__title { font-size: min(var(--t-display), 14.5vh); }
.hero { padding-top: clamp(5.5rem, 12vh, 8rem); }
.hero__grid { gap: clamp(1rem, 3vh, 2rem); }

.loader__word { font-size: clamp(1.1rem, 3.4vw, 1.8rem); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.loader__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; width: 100%; }

/* Bouton SON (scripts/sound.js) : bas droite, là où était la bascule jour/nuit. */
.sound {
  position: fixed;
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: var(--z-nav);
  padding: 0.75rem 1rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #000, 4px 5px 0 3px rgba(0, 0, 0, 0.5);
  cursor: none;
}
.sound:hover { border-color: var(--shu); }
.sound[aria-pressed="false"] { color: rgba(255, 255, 255, 0.55); }

/* plus de japonais : le grand « 静 » du fond de la description non plus */
.description::after { content: none; }



/* ══════════════════════════════════ CHARGEMENT : Green Hill en défilement
   Ciel, nuages, deux plans de collines et un sol à damier qui file sous les
   pieds de Sonic. Les calques sont des SVG en data-URI (aucune requête) ; chaque
   couche avance à sa vitesse, en multiples exacts de sa tuile pour que la boucle
   soit invisible. */
.loader {
  --ld-ground: 24vh;
  background:
    linear-gradient(180deg, #1646c8 0 12%, #1f5be6 12% 24%, #2f74f2 24% 36%, #4a90f8 36% 48%,
                            #6aaefb 48% 60%, #8cc8fd 60% 72%, #b4e0ff 72% 100%);
  overflow: hidden;
}
.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='240' shape-rendering='crispEdges'%3E%3Crect x='64' y='30' width='72' height='12' fill='%23fff'/%3E%3Crect x='52' y='42' width='120' height='12' fill='%23fff'/%3E%3Crect x='40' y='54' width='156' height='24' fill='%23fff'/%3E%3Crect x='52' y='78' width='132' height='12' fill='%23bcd8ff'/%3E%3Crect x='76' y='90' width='84' height='12' fill='%239cc2f5'/%3E%3Crect x='452' y='100' width='96' height='16' fill='%23fff'/%3E%3Crect x='436' y='116' width='160' height='16' fill='%23fff'/%3E%3Crect x='420' y='132' width='208' height='32' fill='%23fff'/%3E%3Crect x='436' y='164' width='176' height='16' fill='%23bcd8ff'/%3E%3Crect x='468' y='180' width='112' height='16' fill='%239cc2f5'/%3E%3Crect x='656' y='20' width='48' height='8' fill='%23fff'/%3E%3Crect x='648' y='28' width='80' height='8' fill='%23fff'/%3E%3Crect x='640' y='36' width='104' height='16' fill='%23fff'/%3E%3Crect x='648' y='52' width='88' height='8' fill='%23bcd8ff'/%3E%3Crect x='664' y='60' width='56' height='8' fill='%239cc2f5'/%3E%3Crect x='266' y='150' width='48' height='8' fill='%23fff'/%3E%3Crect x='258' y='158' width='80' height='8' fill='%23fff'/%3E%3Crect x='250' y='166' width='104' height='16' fill='%23fff'/%3E%3Crect x='258' y='182' width='88' height='8' fill='%23bcd8ff'/%3E%3Crect x='274' y='190' width='56' height='8' fill='%239cc2f5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='240' shape-rendering='crispEdges'%3E%3Crect x='0' y='102' width='8' height='138' fill='%233aa0c8'/%3E%3Crect x='0' y='102' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='8' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='8' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='16' y='90' width='8' height='150' fill='%233aa0c8'/%3E%3Crect x='16' y='90' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='24' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='24' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='32' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='32' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='40' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='40' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='48' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='48' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='56' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='56' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='64' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='64' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='72' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='72' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='80' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='80' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='88' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='88' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='96' y='90' width='8' height='150' fill='%233aa0c8'/%3E%3Crect x='96' y='90' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='104' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='104' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='112' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='112' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='120' y='102' width='8' height='138' fill='%233aa0c8'/%3E%3Crect x='120' y='102' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='128' y='108' width='8' height='132' fill='%233aa0c8'/%3E%3Crect x='128' y='108' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='136' y='108' width='8' height='132' fill='%233aa0c8'/%3E%3Crect x='136' y='108' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='144' y='114' width='8' height='126' fill='%233aa0c8'/%3E%3Crect x='144' y='114' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='152' y='114' width='8' height='126' fill='%233aa0c8'/%3E%3Crect x='152' y='114' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='160' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='160' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='168' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='168' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='176' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='176' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='184' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='184' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='192' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='192' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='200' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='200' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='208' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='208' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='216' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='216' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='224' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='224' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='232' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='232' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='240' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='240' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='248' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='248' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='256' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='256' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='264' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='264' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='272' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='272' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='280' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='280' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='288' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='288' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='296' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='296' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='304' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='304' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='312' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='312' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='320' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='320' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='328' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='328' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='336' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='336' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='344' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='344' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='352' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='352' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='360' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='360' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='368' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='368' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='376' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='376' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='384' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='384' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='392' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='392' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='400' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='400' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='408' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='408' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='416' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='416' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='424' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='424' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='432' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='432' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='440' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='440' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='448' y='114' width='8' height='126' fill='%233aa0c8'/%3E%3Crect x='448' y='114' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='456' y='108' width='8' height='132' fill='%233aa0c8'/%3E%3Crect x='456' y='108' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='464' y='102' width='8' height='138' fill='%233aa0c8'/%3E%3Crect x='464' y='102' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='472' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='472' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='480' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='480' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='488' y='90' width='8' height='150' fill='%233aa0c8'/%3E%3Crect x='488' y='90' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='496' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='496' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='504' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='504' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='512' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='512' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='520' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='520' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='528' y='72' width='8' height='168' fill='%233aa0c8'/%3E%3Crect x='528' y='72' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='536' y='72' width='8' height='168' fill='%233aa0c8'/%3E%3Crect x='536' y='72' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='544' y='72' width='8' height='168' fill='%233aa0c8'/%3E%3Crect x='544' y='72' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='552' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='552' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='560' y='78' width='8' height='162' fill='%233aa0c8'/%3E%3Crect x='560' y='78' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='568' y='84' width='8' height='156' fill='%233aa0c8'/%3E%3Crect x='568' y='84' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='576' y='90' width='8' height='150' fill='%233aa0c8'/%3E%3Crect x='576' y='90' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='584' y='96' width='8' height='144' fill='%233aa0c8'/%3E%3Crect x='584' y='96' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='592' y='102' width='8' height='138' fill='%233aa0c8'/%3E%3Crect x='592' y='102' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='600' y='108' width='8' height='132' fill='%233aa0c8'/%3E%3Crect x='600' y='108' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='608' y='114' width='8' height='126' fill='%233aa0c8'/%3E%3Crect x='608' y='114' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='616' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='616' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='624' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='624' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='632' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='632' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='640' y='144' width='8' height='96' fill='%233aa0c8'/%3E%3Crect x='640' y='144' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='648' y='150' width='8' height='90' fill='%233aa0c8'/%3E%3Crect x='648' y='150' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='656' y='156' width='8' height='84' fill='%233aa0c8'/%3E%3Crect x='656' y='156' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='664' y='156' width='8' height='84' fill='%233aa0c8'/%3E%3Crect x='664' y='156' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='672' y='162' width='8' height='78' fill='%233aa0c8'/%3E%3Crect x='672' y='162' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='680' y='162' width='8' height='78' fill='%233aa0c8'/%3E%3Crect x='680' y='162' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='688' y='168' width='8' height='72' fill='%233aa0c8'/%3E%3Crect x='688' y='168' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='696' y='168' width='8' height='72' fill='%233aa0c8'/%3E%3Crect x='696' y='168' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='704' y='168' width='8' height='72' fill='%233aa0c8'/%3E%3Crect x='704' y='168' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='712' y='162' width='8' height='78' fill='%233aa0c8'/%3E%3Crect x='712' y='162' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='720' y='162' width='8' height='78' fill='%233aa0c8'/%3E%3Crect x='720' y='162' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='728' y='156' width='8' height='84' fill='%233aa0c8'/%3E%3Crect x='728' y='156' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='736' y='150' width='8' height='90' fill='%233aa0c8'/%3E%3Crect x='736' y='150' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='744' y='144' width='8' height='96' fill='%233aa0c8'/%3E%3Crect x='744' y='144' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='752' y='138' width='8' height='102' fill='%233aa0c8'/%3E%3Crect x='752' y='138' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='760' y='132' width='8' height='108' fill='%233aa0c8'/%3E%3Crect x='760' y='132' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='768' y='126' width='8' height='114' fill='%233aa0c8'/%3E%3Crect x='768' y='126' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='776' y='120' width='8' height='120' fill='%233aa0c8'/%3E%3Crect x='776' y='120' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='784' y='114' width='8' height='126' fill='%233aa0c8'/%3E%3Crect x='784' y='114' width='8' height='6' fill='%237fd0ee'/%3E%3Crect x='792' y='108' width='8' height='132' fill='%233aa0c8'/%3E%3Crect x='792' y='108' width='8' height='6' fill='%237fd0ee'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='240' shape-rendering='crispEdges'%3E%3Crect x='0' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='0' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='8' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='8' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='16' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='16' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='24' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='24' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='32' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='32' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='40' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='40' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='48' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='48' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='56' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='56' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='64' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='64' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='72' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='72' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='80' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='80' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='88' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='88' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='96' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='96' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='104' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='104' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='112' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='112' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='120' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='120' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='128' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='128' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='136' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='136' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='144' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='144' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='152' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='152' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='160' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='160' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='168' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='168' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='176' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='176' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='184' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='184' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='192' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='192' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='200' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='200' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='208' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='208' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='216' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='216' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='224' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='224' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='232' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='232' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='240' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='240' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='248' y='144' width='8' height='96' fill='%231f9a3c'/%3E%3Crect x='248' y='144' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='256' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='256' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='264' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='264' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='272' y='132' width='8' height='108' fill='%231f9a3c'/%3E%3Crect x='272' y='132' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='280' y='126' width='8' height='114' fill='%231f9a3c'/%3E%3Crect x='280' y='126' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='288' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='288' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='296' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='296' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='304' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='304' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='312' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='312' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='320' y='108' width='8' height='132' fill='%231f9a3c'/%3E%3Crect x='320' y='108' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='328' y='108' width='8' height='132' fill='%231f9a3c'/%3E%3Crect x='328' y='108' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='336' y='108' width='8' height='132' fill='%231f9a3c'/%3E%3Crect x='336' y='108' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='344' y='108' width='8' height='132' fill='%231f9a3c'/%3E%3Crect x='344' y='108' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='352' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='352' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='360' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='360' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='368' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='368' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='376' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='376' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='384' y='126' width='8' height='114' fill='%231f9a3c'/%3E%3Crect x='384' y='126' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='392' y='132' width='8' height='108' fill='%231f9a3c'/%3E%3Crect x='392' y='132' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='400' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='400' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='408' y='144' width='8' height='96' fill='%231f9a3c'/%3E%3Crect x='408' y='144' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='416' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='416' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='424' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='424' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='432' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='432' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='440' y='168' width='8' height='72' fill='%231f9a3c'/%3E%3Crect x='440' y='168' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='448' y='174' width='8' height='66' fill='%231f9a3c'/%3E%3Crect x='448' y='174' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='456' y='180' width='8' height='60' fill='%231f9a3c'/%3E%3Crect x='456' y='180' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='464' y='186' width='8' height='54' fill='%231f9a3c'/%3E%3Crect x='464' y='186' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='472' y='186' width='8' height='54' fill='%231f9a3c'/%3E%3Crect x='472' y='186' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='480' y='192' width='8' height='48' fill='%231f9a3c'/%3E%3Crect x='480' y='192' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='488' y='192' width='8' height='48' fill='%231f9a3c'/%3E%3Crect x='488' y='192' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='496' y='192' width='8' height='48' fill='%231f9a3c'/%3E%3Crect x='496' y='192' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='504' y='192' width='8' height='48' fill='%231f9a3c'/%3E%3Crect x='504' y='192' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='512' y='186' width='8' height='54' fill='%231f9a3c'/%3E%3Crect x='512' y='186' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='520' y='186' width='8' height='54' fill='%231f9a3c'/%3E%3Crect x='520' y='186' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='528' y='180' width='8' height='60' fill='%231f9a3c'/%3E%3Crect x='528' y='180' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='536' y='180' width='8' height='60' fill='%231f9a3c'/%3E%3Crect x='536' y='180' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='544' y='174' width='8' height='66' fill='%231f9a3c'/%3E%3Crect x='544' y='174' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='552' y='168' width='8' height='72' fill='%231f9a3c'/%3E%3Crect x='552' y='168' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='560' y='162' width='8' height='78' fill='%231f9a3c'/%3E%3Crect x='560' y='162' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='568' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='568' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='576' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='576' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='584' y='144' width='8' height='96' fill='%231f9a3c'/%3E%3Crect x='584' y='144' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='592' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='592' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='600' y='132' width='8' height='108' fill='%231f9a3c'/%3E%3Crect x='600' y='132' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='608' y='126' width='8' height='114' fill='%231f9a3c'/%3E%3Crect x='608' y='126' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='616' y='126' width='8' height='114' fill='%231f9a3c'/%3E%3Crect x='616' y='126' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='624' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='624' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='632' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='632' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='640' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='640' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='648' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='648' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='656' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='656' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='664' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='664' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='672' y='114' width='8' height='126' fill='%231f9a3c'/%3E%3Crect x='672' y='114' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='680' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='680' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='688' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='688' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='696' y='120' width='8' height='120' fill='%231f9a3c'/%3E%3Crect x='696' y='120' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='704' y='126' width='8' height='114' fill='%231f9a3c'/%3E%3Crect x='704' y='126' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='712' y='132' width='8' height='108' fill='%231f9a3c'/%3E%3Crect x='712' y='132' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='720' y='132' width='8' height='108' fill='%231f9a3c'/%3E%3Crect x='720' y='132' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='728' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='728' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='736' y='138' width='8' height='102' fill='%231f9a3c'/%3E%3Crect x='736' y='138' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='744' y='144' width='8' height='96' fill='%231f9a3c'/%3E%3Crect x='744' y='144' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='752' y='144' width='8' height='96' fill='%231f9a3c'/%3E%3Crect x='752' y='144' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='760' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='760' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='768' y='150' width='8' height='90' fill='%231f9a3c'/%3E%3Crect x='768' y='150' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='776' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='776' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='784' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='784' y='156' width='8' height='6' fill='%2358d85c'/%3E%3Crect x='792' y='156' width='8' height='84' fill='%231f9a3c'/%3E%3Crect x='792' y='156' width='8' height='6' fill='%2358d85c'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 800px 240px, 1000px 300px, 1000px 300px;
  background-position:
    0 8vh,
    0 calc(100vh - var(--ld-ground) - 400px),
    0 calc(100vh - var(--ld-ground) - 300px);
  image-rendering: pixelated;
  animation: ld-scroll 24s linear infinite;
}
@keyframes ld-scroll {
  to {
    background-position:
      -800px 8vh,
      -1000px calc(100vh - var(--ld-ground) - 400px),
      -2000px calc(100vh - var(--ld-ground) - 300px);
  }
}
.loader::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--ld-ground);
  background:
    linear-gradient(180deg, #7bea6a 0 6px, #2fc24a 6px 14px, #17803a 14px 22px, #0b4a22 22px 26px, transparent 26px),
    conic-gradient(#c8702a 0 25%, #f2a64a 0 50%, #c8702a 0 75%, #f2a64a 0) 0 0 / 80px 80px;
  border-top: 4px solid #000;
  animation: ld-ground 0.9s linear infinite;
}
@keyframes ld-ground { to { background-position: 0 0, -160px 0; } }

/* le contenu passe au-dessus du décor */
.loader__inner { position: relative; z-index: 1; margin-top: -8vh; }
.loader__meta {
  padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #000, 4px 5px 0 3px rgba(0, 0, 0, 0.5);
}
.loader__rule { box-shadow: 0 0 0 3px #000, 4px 5px 0 3px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .loader::before, .loader::after { animation: none; }
}

/* Cartes : plus aucune teinte de marque (le violet de Twitch, le bleu de
   Discord…). Les tuiles restent bleu marine, bordées de blanc ; seul le jaune
   du thème marque le survol. */
.tile__face {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
}
.tile__face::before { display: none; }
.tile__face:hover {
  border-color: var(--shu);
  box-shadow: 0 0 0 3px #000, 6px 8px 0 3px rgba(0, 0, 0, 0.55);
}
.tile__face:hover .tile__go {
  background: var(--shu);
  border-color: #000;
  color: #000;
}
.tile__face:hover .tile__icon { filter: none; }

/* plus de ligne en pointillés au-dessus du pied du hero */
.hero__foot { border-top: 0; }


/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — le menu d'un jeu : médaillon, plateau de boutons, bouton LIVE
   · le logo est un anneau qui tourne, avec une étiquette « ZONE 1 » ;
   · les liens sont posés dans un plateau creusé ; le lien actif devient une
     plaque jaune précédée d'un anneau qui rebondit (le curseur de menu) ;
   · au défilement la barre se tasse ; le bouton LIVE clignote.
   ═══════════════════════════════════════════════════════════════════ */
.nav { transition: transform 0.6s var(--ease-out), padding 0.35s var(--ease-out); }

/* logo : un mot-clé en deux couleurs, sans pièce */
.nav__mark-text {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.05vw, 0.95rem);
  letter-spacing: 0.05em;
  color: var(--shu);
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transition: transform 0.15s steps(3);
}
.nav__mark-text b { font-weight: 400; color: #fff; }
.nav__mark:hover .nav__mark-text { transform: translateY(-2px); }

@media (min-width: 901px) {
  /* plateau creusé */
  .nav__links {
    gap: 0.35rem;
    padding: 0.32rem;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
  }
  .nav__link {
    gap: 0.55em;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1.1rem;
    border-radius: 8px;
    border: 2px solid transparent;
    font-family: var(--font-display);
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.15s steps(3), background 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .nav__link i { color: var(--shu); opacity: 1; font-size: 0.42rem; }
  .nav__link::after { display: none; }
  .nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  }
  .nav__link.is-active { color: #000; position: relative; z-index: 1; }
  .nav__link.is-active:hover { background: none; border-color: transparent; box-shadow: none; }
  .nav__link.is-active i { color: var(--shoe); }
  .nav__links { position: relative; }
  /* la plaque : un seul élément qui glisse sous le lien actif */
  .nav__links::before {
    content: "";
    position: absolute;
    top: 0.32rem; bottom: 0.32rem;
    left: 0;
    width: var(--pw, 0);
    transform: translateX(var(--px, 0));
    background: linear-gradient(180deg, #FFE45C, var(--shu));
    border: 2px solid #000;
    border-radius: 8px;
    box-shadow: 0 3px 0 #000, inset 0 2px 0 rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.3, 1.4, 0.5, 1), width 0.38s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s;
  }
  .nav__links.has-plate::before { opacity: 1; }
  .nav__link { z-index: 1; }
}

/* bouton LIVE : une enseigne qui clignote */
.nav__live {
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #FF4B54, var(--shoe));
  box-shadow: 0 0 0 2px #000, 3px 4px 0 2px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s steps(3), box-shadow 0.15s;
}
.nav__live:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #000, 3px 6px 0 2px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.45); }
.nav__live:active { transform: translateY(2px); }
.nav__live-dot {
  width: 9px; height: 9px;
  border: 2px solid #000;
  background: #fff;
  animation: live-blink 1.1s steps(2) infinite;
}
.nav__live-dot::after { display: none; }
@keyframes live-blink { 50% { background: var(--shu); } }

@media (max-width: 900px) {
  .nav__link { font-family: var(--font-display); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__live-dot { animation: none; }
  .nav__links::before { transition: none; }
}

/* La barre ne bouge plus au défilement : même taille, jamais masquée. Seule
   l'ombre s'épaissit une fois qu'on a quitté le haut de la page. */
.nav.is-hidden { transform: none; }
@media (min-width: 901px) {
  .nav::before { transition: box-shadow 0.3s var(--ease-out); }
  .nav.is-stuck::before {
    box-shadow: 0 0 0 3px #000, 5px 9px 0 3px rgba(0, 0, 0, 0.55), 0 18px 28px -10px rgba(0, 0, 0, 0.55), inset 0 0 0 2px var(--ink-400);
  }
}
@media (max-width: 900px) {
  .nav.is-stuck { box-shadow: 0 4px 0 #000, 0 12px 24px -8px rgba(0, 0, 0, 0.5); }
}

/* un grain de lumière : liseré clair en haut de la barre et fines rayures */
@media (min-width: 901px) {
  .nav::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, transparent 10px 20px),
      linear-gradient(180deg, var(--ink-600), var(--ink-800));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PLANNING (remplace le compteur d'abonnés) — une rangée de sept jours
   ═══════════════════════════════════════════════════════════════════ */
.stats__item.schedule {
  grid-column: 1 / -1;
  gap: 1.1rem;
}
.schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}
.schedule__title {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  color: var(--shu);
  text-shadow: 2px 2px 0 #000;
}
.schedule__next {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.7;
}
.schedule__next.is-live { color: var(--shu); animation: live-blink 1.1s steps(2) infinite; }
.schedule__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.schedule__day {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  padding: 0.85rem 0.3rem;
  font-family: var(--font-display);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
}
.schedule__day b { font-weight: 400; font-size: 0.6rem; letter-spacing: 0.08em; }
.schedule__time { font-size: clamp(0.55rem, 1.1vw, 0.85rem); }
.schedule__day[data-time] { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
.schedule__day[data-time] .schedule__time { color: var(--shu); }
.schedule__day.is-today { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 4px 0 2px #000; transform: translateY(-3px); }
.schedule__day.is-next { background: linear-gradient(180deg, #FFE45C, var(--shu)); border-color: #000; color: #000; box-shadow: 0 4px 0 #000; }
.schedule__day.is-next .schedule__time { color: #000; }
.schedule__day.is-live { background: linear-gradient(180deg, #FF4B54, var(--shoe)); border-color: #fff; color: #fff; box-shadow: 0 0 0 2px #000, 0 4px 0 2px #000; animation: live-blink-bg 1.1s steps(2) infinite; }
.schedule__day.is-live .schedule__time { color: #fff; }
@keyframes live-blink-bg { 50% { filter: brightness(1.25); } }
@media (max-width: 700px) {
  .schedule__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════ CARTE-TITRE DE ZONE (scripts/zone.js) */
.zonecard {
  position: fixed;
  left: 0; top: 34%;
  z-index: var(--z-nav);
  display: grid;
  gap: 0.35rem;
  padding: 1rem 2.2rem 1rem 1.6rem;
  font-family: var(--font-display);
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  background:
    linear-gradient(90deg, var(--shoe) 0 14px, transparent 14px),
    linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border: 3px solid #fff;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 0 0 3px #000, 6px 8px 0 3px rgba(0, 0, 0, 0.5);
  transform: translateX(-110%);
  pointer-events: none;
}
.zonecard.is-in { animation: zonecard 3.2s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.zonecard__name { font-size: clamp(0.9rem, 2vw, 1.5rem); padding-left: 0.6rem; color: var(--shu); }
.zonecard__zone { font-size: clamp(0.7rem, 1.4vw, 1rem); padding-left: 0.6rem; }
@keyframes zonecard {
  0%   { transform: translateX(-110%); }
  14%  { transform: translateX(0); }
  80%  { transform: translateX(0); }
  100% { transform: translateX(-110%); }
}

/* planning + trois chiffres : les trois tuiles se partagent toute la largeur */
@media (min-width: 701px) {
  .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ══════════════════════════════════ BIPLAN À BANDEROLE (scripts/flyer.js)
   Dans le décor : au-dessus du fond animé, DERRIÈRE le contenu (comme Sonic).
   Il est fixe à l'écran et vole tout seul : son mouvement ne dépend ni du
   défilement ni de la souris, c'est un `transform` posé image par image. */
.flyer {
  position: fixed;
  left: 0; top: 0;
  z-index: 5;                         /* fond du décor : derrière les panneaux (10) */
  display: flex;
  align-items: center;
  visibility: hidden;
  will-change: transform;
  text-decoration: none;
}
.flyer__banner {
  position: relative;
  display: block;
  padding: 0.7rem 1.3rem 0.7rem 1.1rem;
  background:
    repeating-linear-gradient(90deg, #fff 0 22px, #ffe8e8 22px 44px);
  border: 3px solid #000;
  border-right-width: 3px;
  /* queue en V à gauche, comme une vraie banderole */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  transform-origin: 100% 50%;
  animation: flutter 1.3s ease-in-out infinite alternate;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.4));
}
.flyer__text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.1vw, 0.85rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--shoe);
  text-shadow: 1px 1px 0 #000;
  padding-left: 0.6rem;
}
.flyer__rope {
  width: 34px; height: 3px;
  background: #000;
  flex: none;
}
.flyer__plane {
  flex: none;
  width: 96px; height: 45px;
  background-size: 192px 45px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: prop 0.14s steps(1) infinite;
  filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.35));
}
@keyframes flutter {
  from { transform: rotate(-1.4deg) skewY(-1.2deg); }
  to   { transform: rotate(1.4deg) skewY(1.2deg); }
}
@keyframes prop {
  0%   { background-position: 0 0; }
  50%  { background-position: -96px 0; }
}
@media (max-width: 700px) {
  .flyer__plane { width: 64px; height: 30px; background-size: 128px 30px; }
  @keyframes prop { 0% { background-position: 0 0; } 50% { background-position: -64px 0; } }
}

/* Banderole aux couleurs du thème néon : violet et rose */
.flyer__banner {
  background: repeating-linear-gradient(90deg, #fff 0 22px, #f1e4ff 22px 44px);
}
.flyer__text { color: #9B3DFF; text-shadow: 1px 1px 0 #000, 0 0 0 #000; }

/* Accessibilité : un contour net au clavier, dans le jaune du thème */
:focus-visible {
  outline: 3px solid var(--shu);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible { box-shadow: 0 0 0 3px #000; }

/* ══════════════════════════════════ MOBILE : le parcours de Sonic n'existe pas
   Sonic qui court, banderole, bouton de son et HUD sont retirés (le JS ne les
   crée même pas ; ceci couvre une rotation d'écran en cours de visite). Il ne
   reste de Sonic que l'écran de chargement. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .runner, .flyer, .sound, .hud, .zonecard { display: none !important; }
}

/* Le grand anneau en filigrane de la section Réseaux (un énorme anneau
   translucide qui tournait) est retiré : vu de profil, il faisait un demi-anneau
   flou qui flottait à gauche. */
.net__ideogram, .net__ideogram::before { display: none !important; }

/* « mes réseaux » : une autre police pixel (Silkscreen) dans un cadre de menu */
.net__note {
  justify-self: end;
  align-self: end;
  display: inline-block;
  padding: 0.9rem 1.5rem;
  font-family: "Silkscreen", var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--shu);
  text-shadow: 2px 2px 0 #000;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--ink-600), var(--ink-800));
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #000, 5px 7px 0 3px rgba(0, 0, 0, 0.55), inset 0 0 0 2px var(--ink-400);
}
@media (max-width: 900px) {
  .net__note { justify-self: start; }
}

/* Plus de texte flottant près du curseur au survol (« Ouvrir », « Regarder »…) :
   l'anneau grossit toujours sur les liens, mais sans étiquette. */
.cursor__label { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   MENU MOBILE — plein écran, en boutons de jeu (≤ 900 px)
   Avant, les mots géants débordaient de l'écran (« Description » coupé).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav__panel {
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.4rem;
    padding: calc(5.2rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 22px, transparent 22px 44px),
      linear-gradient(180deg, #0B1F66, #071033);
    backdrop-filter: none;
    overflow-y: auto;
  }
  .nav__links { gap: 0.8rem; align-items: stretch; }
  .nav__link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.05rem 1.1rem;
    font-size: clamp(0.8rem, 3.8vw, 1.05rem);
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #000, 4px 5px 0 3px rgba(0, 0, 0, 0.5);
  }
  .nav__link i { font-family: var(--font-display); font-size: 0.6rem; color: var(--shu); margin: 0; }
  .nav__link.is-active {
    color: #000;
    text-shadow: none;
    background: linear-gradient(180deg, #FFE45C, var(--shu));
    border-color: #000;
  }
  .nav__link.is-active i { color: var(--shoe); }
  .nav__live { align-self: stretch; justify-content: center; padding: 1.05rem; font-size: 0.7rem; }
  .nav__mark-text { font-size: clamp(0.62rem, 3.4vw, 0.85rem); }
}

/* ── Ajustements mobile : rien ne déborde, rien ne se coupe ───────────── */
@media (max-width: 600px) {
  .contact__title { font-size: 6.4vw; }                 /* « Écrivez-moi » tient sur une ligne */
  .foot__word { font-size: 8.2vw; }                      /* le grand mot du pied de page tient dans l'écran */
  .portrait { top: 6.6rem; }                              /* le portrait passe sous la barre, plus dessous */
  .hero { padding-top: 7rem; }
}
@media (max-width: 900px) {
  .zonecard { top: 22%; }
}
@media (max-width: 480px) {
  .contact__mail-text { font-size: 3.4vw; letter-spacing: 0; white-space: nowrap; }
}