/* ============================================================
   Baston Galactique — vitrine. Charte « Baston Galactique » : nuit bleue,
   couleurs bonbon, contours sombres épais, formes rondes. Les teintes
   sont celles de scripts/gfx.gd (GOLD, RED, BLUE, NUIT, PANNEAU, CONTOUR
   et les cinq climats) : une teinte recopiée ailleurs est une teinte qui
   dérive, donc elles vivent ici, en variables, et nulle part ailleurs.
   ============================================================ */

:root {
  --nuit: #0c1230;
  --nuit-haute: #1b2460;
  --panneau: #151d4a;
  --panneau-clair: #26327a;
  --contour: #080b1f;
  --blanc: #f6f8ff;
  --encre: #c3cdf0;
  --or: #ffc94a;
  --rouge: #ff4f6e;
  --bleu: #5ed1ff;
  --gris: #aab6dc;
  --vide: #c77dff;
  --melee: #ff5d7a;
  --nerfs: #4cc9f0;
  --fuite: #ffa040;
  --course: #7bd88f;
  --butin: #ffc857;
  --titre: "Lilita One", "Arial Black", Impact, sans-serif;
  --corps: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --rayon: 26px;
  --bord: 4px;
  --ombre-dure: 0 7px 0 var(--contour);
  --ombre-douce: 0 22px 44px rgba(0, 0, 0, .45);
  --topbar: 66px;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 12px); }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, #1a2466 0%, var(--nuit) 55%, #070a1e 100%);
  color: var(--encre);
  font-family: var(--corps);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { color: var(--blanc); font-weight: 600; }
code, kbd, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

/* ---------- ciel ---------- */
#ciel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.mobiles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mobile { position: absolute; opacity: .9; will-change: transform; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.nebuleuse { width: min(52vw, 640px); left: -6%; top: 62vh; opacity: .55; animation: derive-nebuleuse 90s linear infinite; }
.navette { width: clamp(64px, 9vw, 130px); top: 18vh; left: -20vw; animation: passe-navette 34s linear infinite 3s; }
.asteroide { width: clamp(56px, 7vw, 110px); top: 72vh; right: 6vw; animation: tourne-asteroide 70s linear infinite, flotte 9s ease-in-out infinite; }

@keyframes derive-nebuleuse {
  from { transform: translateX(-10%) translateY(0); }
  50% { transform: translateX(120%) translateY(-6vh); }
  to { transform: translateX(-10%) translateY(0); }
}
@keyframes passe-navette {
  0% { transform: translateX(0) translateY(0) rotate(-4deg); }
  45% { transform: translateX(140vw) translateY(-14vh) rotate(3deg); }
  45.01% { transform: translateX(140vw) translateY(40vh) rotate(-4deg); }
  100% { transform: translateX(0) translateY(0) rotate(-4deg); }
}
@keyframes tourne-asteroide { to { rotate: 360deg; } }
@keyframes flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

main, .topbar, .pied, .bandeau { position: relative; z-index: 2; }

/* ---------- boutons-jouets ---------- */
.btn {
  --fond-haut: #ffe08a;
  --fond: var(--or);
  --fond-bas: #f0a72e;
  --encre-btn: var(--contour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .75em 1.6em;
  border: var(--bord) solid var(--contour);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fond-haut) 0%, var(--fond) 48%, var(--fond-bas) 100%);
  color: var(--encre-btn);
  font-family: var(--titre);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
  text-decoration: none !important;
  box-shadow: var(--ombre-dure), 0 14px 26px rgba(0, 0, 0, .4), inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .09s ease, box-shadow .09s ease, filter .2s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 9px 0 var(--contour), 0 18px 30px rgba(0, 0, 0, .45), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--contour), 0 6px 12px rgba(0, 0, 0, .4), inset 0 3px 0 rgba(255, 255, 255, .35); }
.btn small { display: block; font-family: var(--corps); font-size: .62em; letter-spacing: .06em; opacity: .8; margin-top: .15em; }
.btn-grand { font-size: clamp(1.05rem, 1.35cqw + .6rem, 1.5rem); padding: .8em 1.7em; }
.btn-petit { font-size: .85rem; padding: .55em 1.1em; }
.btn-bleu { --fond-haut: #a8e9ff; --fond: var(--bleu); --fond-bas: #2aa6dc; }
.btn-rose { --fond-haut: #ffa3b6; --fond: var(--rouge); --fond-bas: #d92a4c; }
.btn-vert { --fond-haut: #b6f0c2; --fond: var(--course); --fond-bas: #4bb663; }
.btn-fantome { --fond-haut: #3d4a9a; --fond: var(--panneau-clair); --fond-bas: #18235a; --encre-btn: var(--blanc); }
.btn[aria-disabled="true"] { filter: saturate(.3) brightness(.8); cursor: not-allowed; }
.btn svg { flex: none; }

.version-pill {
  font-family: var(--corps);
  font-size: .78em;
  background: var(--contour);
  color: var(--or);
  padding: .15em .6em;
  border-radius: 999px;
  letter-spacing: .03em;
}

/* ---------- barre du haut ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(.8rem, 3vw, 2.2rem);
  z-index: 20;
  background: linear-gradient(180deg, rgba(8, 11, 31, .85), rgba(8, 11, 31, .55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid transparent;
  transition: border-color .3s, background .3s;
}
.topbar.pose { border-bottom-color: rgba(94, 209, 255, .18); background: rgba(8, 11, 31, .88); }
.marque { display: inline-flex; align-items: center; gap: .6rem; color: var(--blanc); font-family: var(--titre); font-size: 1.3rem; letter-spacing: .04em; text-decoration: none !important; }
.marque img { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--contour); box-shadow: 0 3px 0 var(--contour); }
.marque b { color: var(--or); font-weight: 400; }
.nav { display: flex; gap: 1.2rem; margin-left: auto; }
.nav a { color: var(--encre); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; padding: .3em 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover, .nav a.actif { color: var(--blanc); border-bottom-color: var(--or); text-decoration: none; }
.topbar .btn { margin-left: auto; }
.nav + .btn { margin-left: 0; }

/* ---------- le cockpit ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-top: var(--topbar);
  overflow: hidden;
}
/* Deux dispositions du hublot, choisies sur le RAPPORT de l'ecran et pas
   sur sa largeur seule : le cockpit est une image 16:9, et sur une tablette
   en portrait il tenait en 1024x576 au milieu d'un ecran de 1366 de haut,
   trop petit pour son contenu — les tampons chevauchaient la console. Par
   defaut, le hublot seul sur le ciel ; le cockpit n'arrive qu'a partir de
   900 px de large ET d'un ecran plus large que haut (6/5). */
.stage {
  position: relative;
  width: 100%;
  min-height: calc(100svh - var(--topbar));
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem 4rem;
  container-type: inline-size;
}
.cockpit, .hublot-fond { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  /* Le cockpit prend toute la largeur tant que ses commandes tiennent sous
     le pli, avec dix pour cent de marge rognee en haut et en bas (le
     bandeau du haut passe sous la barre de toute facon). Au-dela — ecran
     tres large et peu haut — il se centre, et ses bords fondent dans le
     ciel plutot que de dessiner un rectangle. */
  .stage {
    width: min(100vw, calc((100svh - var(--topbar)) * 16 / 9 * 1.1));
    min-height: 0;
    aspect-ratio: 16 / 9;
    display: block;
    padding: 0;
  }
  .cockpit, .hublot-fond { display: block; }
  /* Plus specifique que la regle de base de .hublot, ecrite plus bas dans
     la feuille : a specificite egale, c'est elle qui gagnerait, et le
     hublot resterait dans le flux — titre sur une ligne, hors du cadre. */
  .stage > .hublot {
    position: absolute;
    left: 11%; right: 11%;
    top: 9%; bottom: 20%;
  }
}
.cockpit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  animation: entre-cockpit 1.2s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes entre-cockpit {
  from { transform: scale(1.06); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* le jeu derrière le hublot : les captures se fondent l'une dans l'autre,
   sous un voile de nuit pour que le titre reste lisible */
.hublot-fond {
  position: absolute;
  left: 4%; right: 4%; top: 3%; bottom: 14%;
  z-index: 0;
  overflow: hidden;
  border-radius: 46% 46% 40% 40% / 60% 60% 40% 40%;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 55%, transparent 100%);
  will-change: transform;
}
.hublot-fond img {
  position: absolute; inset: -4%;
  width: 108%; height: 108%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.6s ease;
}
.hublot-fond img.visible { opacity: .5; animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.2%, 1%); } }
.hublot-fond::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(12, 18, 48, .35) 0%, rgba(12, 18, 48, .78) 60%, rgba(12, 18, 48, .95) 100%);
}
.hublot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6cqw;
}
.titre {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .35em;
  font-family: var(--titre);
  font-size: clamp(2.6rem, 9.4cqw, 10rem);
  line-height: .95;
  letter-spacing: .01em;
}
.titre .mot { display: inline-flex; }
.titre .mot.or {
  color: var(--or);
  -webkit-text-stroke: .055em var(--contour);
  paint-order: stroke fill;
  text-shadow: .04em .06em 0 var(--contour), 0 .12em .25em rgba(0, 0, 0, .55);
  animation: bondit .9s cubic-bezier(.2, 1.3, .4, 1) both;
}
.titre i {
  font-style: normal;
  color: var(--c, var(--or));
  -webkit-text-stroke: .055em var(--contour);
  paint-order: stroke fill;
  text-shadow: .04em .06em 0 var(--contour), 0 .12em .25em rgba(0, 0, 0, .55);
  display: inline-block;
  animation: bondit .9s cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
  transform-origin: 50% 100%;
}
.titre .mot:nth-child(2) i { animation-delay: calc(var(--i, 0) * 55ms + 400ms); }
.titre:hover i { animation: tremble .5s ease-in-out; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes bondit {
  0% { transform: translateY(1.4em) scale(.6) rotate(-8deg); opacity: 0; }
  60% { transform: translateY(-.12em) scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes tremble {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-.14em) rotate(-4deg); }
  60% { transform: translateY(.04em) rotate(3deg); }
}
.pitch {
  margin: 0;
  max-width: 62cqw;
  font-size: clamp(.95rem, 1.55cqw, 1.45rem);
  line-height: 1.4;
  color: var(--encre);
  text-shadow: 0 2px 0 var(--contour), 0 0 24px rgba(12, 18, 48, .9);
}
.pitch b { font-size: 1.12em; color: var(--blanc); }
.mot-cle { color: var(--or); font-family: var(--titre); letter-spacing: .05em; font-size: 1.05em; -webkit-text-stroke: 1px var(--contour); paint-order: stroke fill; }
.cta { display: flex; flex-wrap: wrap; gap: 1.1cqw; justify-content: center; }
.tampons {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .7cqw; justify-content: center;
}
.tampon {
  font-family: var(--titre);
  font-size: clamp(.62rem, .95cqw, .9rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--contour);
  background: var(--t, var(--or));
  border: 3px solid var(--contour);
  border-radius: 999px;
  padding: .3em .95em;
  box-shadow: 0 3px 0 var(--contour);
  rotate: -1.5deg;
}
.tampon:nth-child(2) { rotate: 1.2deg; }
.tampon:nth-child(3) { rotate: -.8deg; }

.indice {
  position: absolute;
  left: 50%; bottom: 14px;
  width: 30px; height: 46px;
  transform: translateX(-50%);
  border: 3px solid var(--encre);
  border-radius: 999px;
  opacity: .7;
  z-index: 3;
}
.indice span {
  position: absolute; left: 50%; top: 8px;
  width: 6px; height: 10px; margin-left: -3px;
  border-radius: 999px; background: var(--or);
  animation: roule 1.6s ease-in-out infinite;
}
@keyframes roule { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- le bandeau qui défile ---------- */
.bandeau {
  overflow: hidden;
  background: var(--contour);
  border-top: 3px solid var(--panneau-clair);
  border-bottom: 3px solid var(--panneau-clair);
  padding: .55rem 0;
  transform: rotate(-1.2deg) scale(1.03);
  margin: -1rem 0 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.defile {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  animation: defile 70s linear infinite;
  font-family: var(--titre);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bandeau:hover .defile { animation-play-state: paused; }
.defile span { color: var(--c, var(--or)); -webkit-text-stroke: .5px var(--contour); }
.defile em { font-style: normal; color: var(--panneau-clair); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sec { max-width: 1180px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 3vw, 2rem); }
.sec-large { max-width: 1320px; }
.sec-tete { text-align: center; max-width: 820px; margin: 0 auto 2.6rem; }
.sec-tete h2 {
  margin: .25em 0 .35em;
  font-family: var(--titre);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  color: var(--or);
  -webkit-text-stroke: 3px var(--contour);
  paint-order: stroke fill;
  text-shadow: 3px 5px 0 var(--contour), 0 12px 30px rgba(0, 0, 0, .5);
  letter-spacing: .015em;
}
.sous { margin: 0; font-size: 1.08rem; color: var(--encre); }
.note { text-align: center; font-size: 1rem; color: var(--gris); margin: 2rem auto 0; max-width: 780px; }

/* la bulle : panneau arrondi à contour épais, ombre dure, reflet */
.bulle {
  position: relative;
  background: linear-gradient(180deg, var(--panneau-clair) 0%, var(--panneau) 22%, var(--panneau) 100%);
  border: var(--bord) solid var(--contour);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-dure), var(--ombre-douce);
}
.bulle::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 6px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}

/* ---------- les trois étapes ---------- */
.etapes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  counter-reset: etape;
}
.etape { padding: 2.6rem 1.6rem 1.6rem; text-align: center; }
.etape .numero {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--climat, var(--or));
  border: var(--bord) solid var(--contour);
  box-shadow: 0 5px 0 var(--contour);
  font-family: var(--titre);
  font-size: 1.8rem;
  color: var(--contour);
}
.etape p { margin: 0; font-size: 1.12rem; color: var(--blanc); }

/* ---------- la carte céleste ---------- */
.filtres { display: flex; justify-content: center; margin-bottom: 2rem; }
.cherche {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--contour);
  border: 3px solid var(--panneau-clair);
  border-radius: 999px;
  padding: .3em .9em;
  color: var(--gris);
}
.cherche input {
  background: none; border: 0; outline: 0;
  color: var(--blanc);
  font: inherit; font-size: 1rem;
  width: 11em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cherche input::placeholder { color: var(--gris); text-transform: none; letter-spacing: 0; }

.grille-jeux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1.1rem;
}
.carte {
  --climat: var(--or);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem;
  padding: 1.1rem .8rem 1rem;
  background: linear-gradient(180deg, rgba(38, 50, 122, .55), rgba(21, 29, 74, .85));
  border: 3px solid var(--contour);
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--contour);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s, border-color .18s;
  animation: apparait .5s ease both;
  animation-delay: calc(var(--n, 0) * 22ms);
}
.carte:hover, .carte:focus-visible {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--climat);
  box-shadow: 0 9px 0 var(--contour), 0 0 0 4px color-mix(in srgb, var(--climat) 30%, transparent), 0 18px 40px color-mix(in srgb, var(--climat) 35%, transparent);
}
.carte .astre {
  position: relative;
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.carte .astre::before {
  content: "";
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--climat) 45%, transparent) 0%, transparent 65%);
  opacity: .8;
  transition: opacity .2s, transform .3s;
}
.carte:hover .astre::before { opacity: 1; transform: scale(1.15); }
.carte .astre img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
  animation: flotte 6s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -.37s);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1);
}
.carte:hover .astre img { transform: rotate(-8deg) scale(1.08); }
.carte h3 {
  margin: .2rem 0 0;
  font-family: var(--titre);
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--blanc);
  line-height: 1.1;
  -webkit-text-stroke: .5px var(--contour);
  paint-order: stroke fill;
}
.carte .famille {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--climat);
}
.carte .badge3d {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--titre); font-size: .7rem; letter-spacing: .05em;
  background: var(--vide); color: var(--contour);
  border: 2px solid var(--contour); border-radius: 999px; padding: .1em .55em;
  box-shadow: 0 2px 0 var(--contour);
  rotate: 8deg;
}
.carte[hidden] { display: none; }
.aucun { text-align: center; color: var(--gris); margin-top: 2rem; }
@keyframes apparait { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* la fiche d'une carte */
.fiche {
  width: min(94vw, 860px);
  max-height: 92vh;
  padding: 0;
  border: var(--bord) solid var(--contour);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--panneau-clair) 0%, var(--panneau) 18%);
  color: var(--encre);
  box-shadow: var(--ombre-dure), 0 40px 80px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.fiche::backdrop { background: rgba(4, 6, 20, .78); backdrop-filter: blur(6px); }
.fiche[open] { animation: ouvre-fiche .32s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ouvre-fiche { from { transform: translateY(30px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.fiche .fermer {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--contour);
  background: var(--rouge);
  color: var(--contour);
  font-family: var(--titre); font-size: 1.2rem;
  box-shadow: 0 3px 0 var(--contour);
  cursor: pointer;
}
.fiche-corps { display: grid; grid-template-columns: 260px 1fr; gap: 1.4rem; padding: 1.6rem; align-items: center; overflow: auto; max-height: 92vh; }
.fiche-astre { position: relative; display: grid; place-items: center; }
.fiche-astre img { width: 240px; height: 240px; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .6)); animation: flotte 5s ease-in-out infinite; }
.fiche-astre::before {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--climat) 55%, transparent) 0%, transparent 65%);
}
.fiche h2 {
  margin: .2rem 0 .1rem;
  font-family: var(--titre);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--or);
  -webkit-text-stroke: 2px var(--contour);
  paint-order: stroke fill;
  text-shadow: 2px 4px 0 var(--contour);
  line-height: 1.05;
}
.fiche .devise { margin: 0 0 .9rem; color: var(--climat); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
.fiche h4 { margin: .9rem 0 .4rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bleu); }
.gestes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .45rem .9rem; margin: 0; padding: 0; list-style: none; }
.gestes li { display: flex; align-items: center; gap: .6em; font-size: .95rem; }
.keycap {
  font-family: var(--titre); font-size: .78rem; letter-spacing: .06em;
  color: var(--contour); background: linear-gradient(#ffffff, #d9def5);
  border: 2px solid var(--contour); border-radius: 8px; padding: .2em .55em;
  box-shadow: 0 3px 0 var(--contour);
  white-space: nowrap;
}
.regles { margin: 0; padding-left: 1.1em; }

/* ---------- la visionneuse ---------- */
.visionneuse { padding: 1rem; }
.ecran { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 3px solid var(--contour); background: var(--contour); }
.ecran img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .35s; }
.ecran img.change { opacity: 0; }
.ecran figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 31, .92));
  color: var(--encre);
  font-size: 1rem;
}
.ecran figcaption strong { display: block; font-family: var(--titre); font-size: 1.25rem; color: var(--or); letter-spacing: .03em; -webkit-text-stroke: 1px var(--contour); paint-order: stroke fill; }
.fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--contour); background: var(--or); color: var(--contour);
  font-family: var(--titre); font-size: 1.8rem; line-height: 1;
  box-shadow: 0 4px 0 var(--contour);
  cursor: pointer; opacity: .85;
}
.fleche:hover { opacity: 1; }
.fleche.gauche { left: 12px; }
.fleche.droite { right: 12px; }
.vignettes {
  display: flex; gap: .6rem; margin-top: .9rem; padding-bottom: .4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--panneau-clair) transparent;
}
.vignette {
  flex: 0 0 148px;
  scroll-snap-align: start;
  border: 3px solid var(--contour);
  border-radius: 10px;
  padding: 0; background: var(--contour);
  cursor: pointer; overflow: hidden;
  opacity: .6;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.vignette img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.vignette:hover { opacity: .9; transform: translateY(-2px); }
.vignette.actif { opacity: 1; border-color: var(--or); box-shadow: 0 0 0 3px color-mix(in srgb, var(--or) 40%, transparent); }

/* ---------- la station ---------- */
.station { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.borne { padding: 1.6rem 1.4rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.borne.ici { border-color: var(--or); box-shadow: 0 7px 0 var(--contour), 0 0 0 5px color-mix(in srgb, var(--or) 35%, transparent), var(--ombre-douce); }
.borne .ici-badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  font-family: var(--titre); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--or); color: var(--contour);
  border: 3px solid var(--contour); border-radius: 999px; padding: .25em .9em;
  box-shadow: 0 3px 0 var(--contour);
}
.borne svg { width: 54px; height: 54px; filter: drop-shadow(0 4px 0 var(--contour)); }
.borne h3 { margin: .2rem 0 0; font-family: var(--titre); font-size: 1.5rem; color: var(--blanc); letter-spacing: .03em; }
.borne .taille { color: var(--encre); font-size: .95rem; min-height: 1.5em; }
.borne .btn { margin-top: .6rem; width: 100%; }
.borne .absent { color: var(--gris); font-size: .9rem; }

.premier-lancement { margin-top: 3rem; }
details.bulle { margin-bottom: .9rem; overflow: hidden; }
details.bulle summary {
  cursor: pointer; list-style: none;
  padding: 1rem 3.2rem 1rem 1.4rem;
  font-family: var(--titre); font-size: 1.05rem; letter-spacing: .02em; color: var(--blanc);
  position: relative;
}
details.bulle summary::-webkit-details-marker { display: none; }
details.bulle summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--or); color: var(--contour); border: 2px solid var(--contour); box-shadow: 0 2px 0 var(--contour);
  font-size: 1.3rem; line-height: 1;
}
details.bulle[open] summary::after { content: "–"; }
details.bulle[data-os].ici summary::before { content: "TON SYSTÈME · "; color: var(--or); font-size: .8em; letter-spacing: .1em; }
details.bulle .corps { padding: 0 1.4rem 1.2rem; }
details.bulle .corps p { margin: .4rem 0; }
.petit { font-size: .9rem; color: var(--gris); }
.code {
  position: relative;
  margin: .6rem 0;
  padding: .9rem 6.2rem .9rem 1rem;
  background: var(--contour);
  border: 2px solid var(--panneau-clair);
  border-radius: 12px;
  color: var(--bleu);
  font-size: .95rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.copier {
  position: absolute; right: .6rem; top: .55rem;
  font-family: var(--titre); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--or); color: var(--contour); border: 2px solid var(--contour); border-radius: 999px;
  padding: .3em .8em; box-shadow: 0 2px 0 var(--contour); cursor: pointer;
}
.copier.fait { background: var(--course); }

/* ---------- pied ---------- */
.pied {
  text-align: center;
  padding: 4rem 1.2rem 5rem;
  max-width: 760px;
  margin: 0 auto;
}
.pied p { margin: .5rem 0; }
.mascotte { display: block; margin: 0 auto 1rem; width: auto; height: 150px; cursor: pointer; animation: flotte 5s ease-in-out infinite; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); transition: transform .2s; }
.mascotte:hover { transform: rotate(-10deg) scale(1.08); }
.mascotte.saute { animation: saute .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes saute { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-60px) rotate(-18deg) scale(1.15); } 100% { transform: translateY(0) rotate(0); } }
.egg-indice { opacity: .35; }
kbd { background: var(--contour); border: 1px solid var(--panneau-clair); border-radius: 5px; padding: .05em .4em; color: var(--or); }

/* ---------- confettis, toast, pompette ---------- */
#confettis { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px);
  z-index: 60; opacity: 0; pointer-events: none;
  font-family: var(--titre); letter-spacing: .06em; text-transform: uppercase;
  background: var(--or); color: var(--contour);
  border: 3px solid var(--contour); border-radius: 999px;
  padding: .6em 1.4em; box-shadow: 0 5px 0 var(--contour), 0 14px 30px rgba(0, 0, 0, .5);
  transition: opacity .25s, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
body.pompette main, body.pompette .pied { animation: tangue 7s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes tangue { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

/* ---------- l'équipage : les dix bastonneurs ---------- */
.equipage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 .2rem;
  margin: 0 auto 1rem;
  max-width: 1000px;
}
.equipage img {
  height: 165px; width: auto;
  margin: 0 -.35rem;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
  animation: flotte 5s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -.53s);
  transition: transform .2s;
}
.equipage img:hover { transform: translateY(-10px) rotate(-5deg) scale(1.08); }
.equipage-note { margin: 0 auto 3.4rem; }

/* ---------- apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, 1, .3, 1); }
.reveal.vu { opacity: 1; transform: none; }
.hublot .reveal { transform: translateY(14px); transition-delay: .55s; }

/* ---------- petits écrans ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
}
/* deux rangs de cinq dès que la rangée de dix ne tient plus (~790 px) :
   un flex laissait un bastonneur seul, ou cassait à sept */
@media (max-width: 820px) {
  .equipage { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-items: end; gap: .8rem 0; }
  .equipage img { height: 110px; margin: 0 -.2rem; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .hublot { gap: 1.1rem; }
  .titre { font-size: clamp(3rem, 15vw, 5.4rem); }
  .pitch { max-width: 34rem; font-size: 1.05rem; }
  .btn-grand { font-size: 1.05rem; }
  .tampon { font-size: .68rem; }
  .cta { gap: .7rem; flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .cta .btn { width: 100%; }
  .etapes, .station { grid-template-columns: 1fr; }
  .etapes { gap: 2.4rem; }
  .fiche-corps { grid-template-columns: 1fr; padding: 1.2rem; }
  .fiche-astre img { width: 170px; height: 170px; }
  .fiche-astre::before { width: 190px; height: 190px; }
  .grille-jeux { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
  .carte .astre { width: 90px; height: 90px; }
  .carte h3 { font-size: .9rem; }
  .topbar .btn-petit span { display: none; }
  .bandeau { transform: rotate(-1.5deg) scale(1.04); }
  .vignette { flex-basis: 110px; }
  .marque span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .mobiles { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- l'appel au vote, sous la grille ---------- */
.appel-vote { text-align: center; margin: 2.4rem 0 0; }
.appel-vote .btn { white-space: normal; }