/* ============================================================
   RLFR — Discord Rocket League France
   Direction : « stade la nuit », relu aux couleurs françaises.
   Bleu de France en accent principal, craie blanche pour les lignes,
   rouge en contrepoint : le kickoff se joue en tricolore.
   ============================================================ */

:root {
  --stade: #04070f;
  --nuit: #08101f;
  --panneau: #0d1730;
  --panneau-haut: #142244;
  --craie: #edf3f8;
  --texte: #a5b6cf;
  --texte-fort: #eef4fa;
  --bleu: #2e6bff;      /* bleu de France — accent principal */
  --cyan: #4fd8f5;      /* boost, étiquettes, liens */
  --rouge: #e63a4e;     /* contrepoint tricolore */
  --or: #ffc53d;        /* réservé à la rareté « Exotique » */
  --trait: rgba(232, 241, 245, .12);
  --trait-fort: rgba(232, 241, 245, .28);

  --display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --corps: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
  --rayon: 4px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--stade);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  /* trame de terrain très discrète */
  background-image:
    linear-gradient(var(--trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 100% 96px, 96px 100%;
  background-position: center top;
  background-attachment: fixed;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--cyan); color: #04070f; padding: .75rem 1.25rem;
  font-family: var(--display); font-weight: 700; z-index: 999;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ---------- Typographie ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  color: var(--texte-fort);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 8.5vw, 6.2rem); font-style: italic; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.chapeau { font-size: clamp(1.05rem, 1.9vw, 1.3rem); max-width: 62ch; color: var(--texte); }

/* Étiquette type HUD */
.etiquette {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.etiquette::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--cyan);
  transform: rotate(45deg);
  flex: none;
}
.etiquette--rouge { color: var(--rouge); }
.etiquette--rouge::before { background: var(--rouge); }

/* ---------- Barre de navigation ---------- */

.hud {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 14, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.hud__interieur {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px;
}
.marque {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  color: var(--texte-fort);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-right: auto;
}
.marque:hover { text-decoration: none; }
.marque__jeton {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 5px;
  background: url("/assets/blason.png") center/cover no-repeat;
  box-shadow: 0 0 0 1px rgba(232,241,245,.18);
}
.marque em { color: var(--bleu); font-style: italic; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte);
  padding: .55rem .8rem;
  border-radius: var(--rayon);
}
.nav a:hover, .nav a:focus-visible { color: var(--texte-fort); background: rgba(232,241,245,.06); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--cyan); }

.menu-bascule {
  display: none;
  background: none; border: 1px solid var(--trait-fort); color: var(--texte-fort);
  font-family: var(--display); font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: .5rem .8rem; border-radius: var(--rayon); cursor: pointer;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-align: center;
}
.bouton:hover { text-decoration: none; transform: translateY(-2px); }

.bouton--boost {
  background: linear-gradient(100deg, var(--bleu), #5c8dff);
  color: #f4f8ff;
  box-shadow: 0 0 0 1px rgba(46,107,255,.55), 0 10px 30px -12px rgba(46,107,255,.9);
}
.bouton--boost:hover { box-shadow: 0 0 0 1px rgba(46,107,255,.8), 0 16px 40px -12px rgba(46,107,255,1); }

.bouton--contour {
  border-color: var(--trait-fort);
  color: var(--texte-fort);
  background: rgba(232,241,245,.03);
}
.bouton--contour:hover { border-color: var(--cyan); color: var(--cyan); }

.bouton--large { width: 100%; }
.bouton--petit { padding: .6rem 1rem; font-size: .78rem; }

/* Bouton flottant permanent (mobile surtout) */
.flottant {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  box-shadow: 0 0 0 1px rgba(46,107,255,.65), 0 18px 40px -14px rgba(0,0,0,.9);
}

/* ---------- Hero / Kickoff ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--trait); }

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Le clip de gameplay se pose par-dessus la scène vectorielle une fois chargé.
   Tant qu'il ne l'est pas — connexion lente, mode économie, animations réduites —
   c'est l'animation SVG qui reste visible. */
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.scene__video.pret { opacity: 1; }
.hero.video-active .rejouer { display: none; }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,7,14,.55) 0%, rgba(5,7,14,.15) 35%, rgba(5,7,14,.92) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(5,7,14,.7) 100%);
  pointer-events: none;
}

.hero__contenu {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 13vh, 8rem) clamp(3rem, 8vh, 5rem);
}

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .fr {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--bleu);
  text-stroke: 2px var(--bleu);
}
.hero__chapeau { margin-bottom: 2rem; max-width: 54ch; color: #cfdcea; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.6rem; }

/* Tableau de score */
.score {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  max-width: 760px;
}
.score div { background: rgba(10,15,28,.82); padding: 1rem 1.1rem; }
.score dt {
  font-family: var(--display);
  font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texte); margin-bottom: .3rem;
}
.score dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.75rem; font-weight: 700; font-style: italic;
  color: var(--texte-fort); line-height: 1;
}
.score dd em { font-style: italic; color: var(--cyan); }

.rejouer {
  position: absolute;
  right: var(--gouttiere);
  bottom: 1.25rem;
  z-index: 3;
  background: rgba(5,7,14,.7);
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  font-family: var(--display);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .5rem .85rem; border-radius: var(--rayon); cursor: pointer;
}
.rejouer:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Bandeau défilant ---------- */

.bandeau {
  border-block: 1px solid var(--trait);
  background: var(--nuit);
  overflow: hidden;
  padding-block: .8rem;
}
.bandeau__piste {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: defile 42s linear infinite;
}
.bandeau span {
  font-family: var(--display);
  font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3rem;
}
.bandeau span::after {
  content: ""; width: 7px; height: 7px; background: var(--rouge); transform: rotate(45deg);
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--sombre { background: var(--nuit); border-block: 1px solid var(--trait); }
.section__entete { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section__entete p { margin-top: 1.1rem; }

/* ---------- Grilles de cartes ---------- */

.grille { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.carte {
  background: var(--panneau);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  transition: background .2s ease;
}
.carte:hover { background: var(--panneau-haut); }
.carte h3 { margin-bottom: .7rem; }
.carte p { font-size: .97rem; }
.carte__icone {
  width: 34px; height: 34px; margin-bottom: 1.1rem;
  border: 2px solid var(--cyan); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--cyan);
}
.carte--rouge .carte__icone { border-color: var(--rouge); color: var(--rouge); }

/* ---------- Étapes numérotées ---------- */

.etapes { counter-reset: etape; display: grid; gap: 1.5rem; }
.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 0; padding-bottom: 0; }
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  font-family: var(--display);
  font-size: 2.1rem; font-weight: 700; font-style: italic; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rouge);
  text-stroke: 1.5px var(--rouge);
}
.etape h3 { margin-bottom: .4rem; }

/* ---------- Aperçu embed Discord (bot) ---------- */

.embed {
  background: #1a1d24;
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  font-size: .93rem;
  color: #d5dae2;
  max-width: 520px;
}
.embed--bleu { border-left-color: var(--cyan); }
.embed__auteur {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #9aa6b6; margin-bottom: .6rem;
}
.embed__auteur b { color: var(--texte-fort); font-weight: 600; }
.embed__auteur .badge {
  background: #5865f2; color: #fff; font-size: .6rem; padding: .1rem .3rem; border-radius: 3px;
  letter-spacing: .06em;
}
.embed__titre {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--craie); margin-bottom: .4rem; text-transform: none; letter-spacing: 0;
}
.embed__champs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem; margin-top: .9rem;
}
.embed__champs dt { font-size: .72rem; color: #9aa6b6; text-transform: uppercase; letter-spacing: .08em; }
.embed__champs dd { margin: 0; font-weight: 600; color: var(--texte-fort); }
.embed__pied { margin-top: .9rem; font-size: .74rem; color: #8894a6; }

/* ---------- Liste d'actualités ---------- */

.actus { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.actu {
  background: var(--panneau);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.actu:hover { background: var(--panneau-haut); }
.actu time {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
}
.actu h3 { margin-bottom: .5rem; text-transform: none; letter-spacing: -.01em; font-size: 1.22rem; }
.actu p { font-size: .97rem; margin-bottom: .7rem; }
.actu .marqueur {
  display: inline-block;
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--trait-fort); padding: .18rem .5rem; color: var(--texte);
  margin-bottom: .8rem;
}
.chargement { padding: 2rem; text-align: center; color: var(--texte); font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Boutique ---------- */

.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.article { background: var(--panneau); padding: 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.article__rarete {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.r-rare { color: #3aa0ff; } .r-tres-rare { color: #9b5cff; }
.r-import { color: #ff5c9d; } .r-exotique { color: var(--or); } .r-noir-marche { color: #c1c8d4; }
.article h3 { font-size: 1.05rem; text-transform: none; letter-spacing: -.01em; }
.article__type { font-size: .85rem; color: var(--texte); }
.article__prix {
  margin-top: auto; padding-top: .8rem;
  font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.3rem;
  color: var(--texte-fort);
}
.article__prix span { font-size: .72rem; font-style: normal; color: var(--texte); letter-spacing: .1em; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--texte-fort);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--rouge); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--cyan); }
.faq .reponse { padding: 0 3rem 1.5rem 0; max-width: 78ch; }

/* ---------- Appel à l'action final ---------- */

.appel {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--trait);
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(46,107,255,.2), transparent 65%),
    var(--stade);
}
.appel h2 { margin-bottom: 1.2rem; }
.appel p { margin-inline: auto; max-width: 56ch; margin-bottom: 2rem; }
.appel .bouton { font-size: 1.05rem; padding: 1.15rem 2.4rem; }
.appel small { display: block; margin-top: 1.2rem; font-size: .82rem; color: var(--texte); }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--nuit);
  border-top: 1px solid var(--trait);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.pied h4 {
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texte-fort);
  margin: 0 0 1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied ul a { color: var(--texte); }
.pied ul a:hover { color: var(--cyan); }
.pied__bas {
  border-top: 1px solid var(--trait);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: #7d8a9c;
}
.mention { max-width: 70ch; }

/* ---------- Page de redirection ---------- */

.sas { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: var(--gouttiere); }
.sas__cercle {
  width: 84px; height: 84px; margin: 0 auto 2rem;
  border: 3px solid var(--trait); border-top-color: var(--bleu); border-radius: 50%;
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ============================================================
   ANIMATION DU KICKOFF (≈14 s, jouée une fois, rejouable)
   ============================================================ */

.scene .projecteur { opacity: 0; }
.scene .ligne { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.scene .compte { opacity: 0; }
.scene .voiture-bleue, .scene .voiture-rouge { opacity: 0; }
.scene .ballon-groupe { opacity: 0; }
.scene .onde { opacity: 0; }
.scene .particule { opacity: 0; }
.scene .but-texte { opacity: 0; }
.scene .halo-but { opacity: 0; }

.scene.joue .projecteur { animation: allume 1.4s ease-out .1s forwards; }
.scene.joue .ligne { animation: trace 2.2s ease-out .5s forwards; }
.scene.joue .compte-3 { animation: pulse-compte 0.85s ease-out 2.6s forwards; }
.scene.joue .compte-2 { animation: pulse-compte 0.85s ease-out 3.45s forwards; }
.scene.joue .compte-1 { animation: pulse-compte 0.85s ease-out 4.3s forwards; }
.scene.joue .compte-go { animation: pulse-go 1s ease-out 5.15s forwards; }
.scene.joue .ballon-groupe { animation: apparait .4s ease-out 2.4s forwards, vol 2.6s cubic-bezier(.3,.05,.4,1) 7.6s forwards; }
.scene.joue .voiture-bleue { animation: fonce-gauche 2.3s cubic-bezier(.5,0,.35,1) 5.5s forwards; }
.scene.joue .voiture-rouge { animation: fonce-droite 2.3s cubic-bezier(.5,0,.35,1) 5.5s forwards; }
.scene.joue .trainee-bleue, .scene.joue .trainee-rouge { animation: trainee 2.3s ease-in 5.5s forwards; }
.scene.joue .onde-1 { animation: explose 1.5s ease-out 10.1s forwards; }
.scene.joue .onde-2 { animation: explose 1.5s ease-out 10.28s forwards; }
.scene.joue .onde-3 { animation: explose 1.5s ease-out 10.46s forwards; }
.scene.joue .halo-but { animation: halo 2.6s ease-out 10.1s forwards; }
.scene.joue .particule { animation: eclat 1.9s cubic-bezier(.15,.7,.4,1) 10.1s forwards; }
.scene.joue .but-texte { animation: but 3.4s cubic-bezier(.2,1.3,.4,1) 10.35s forwards; }

/* ambiance permanente */
.scene .lueur-stade { animation: respire 7s ease-in-out infinite; transform-origin: center; }
.scene .foule { animation: scintille 4.5s ease-in-out infinite alternate; }

@keyframes allume { from { opacity: 0; } 55% { opacity: .35; } 70% { opacity: .12; } to { opacity: 1; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-compte {
  0% { opacity: 0; transform: scale(1.9); }
  22% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.75); }
}
@keyframes pulse-go {
  0% { opacity: 0; transform: scale(.5) skewX(-12deg); }
  18% { opacity: 1; transform: scale(1.12) skewX(-12deg); }
  30% { transform: scale(1) skewX(-12deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) skewX(-12deg); }
}
@keyframes fonce-gauche {
  0% { opacity: 0; transform: translate(-340px, 60px) scale(.55); }
  12% { opacity: 1; }
  62% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(90px, -30px) scale(1.05); }
}
@keyframes fonce-droite {
  0% { opacity: 0; transform: translate(340px, 60px) scale(.55); }
  12% { opacity: 1; }
  62% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-90px, -30px) scale(1.05); }
}
@keyframes trainee {
  0% { opacity: 0; stroke-dashoffset: 620; }
  20% { opacity: .95; }
  70% { opacity: .8; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -320; }
}
@keyframes vol {
  0% { transform: translate(0, 0) scale(1); }
  55% { transform: translate(6px, -168px) scale(.68); }
  100% { opacity: 0; transform: translate(10px, -232px) scale(.42); }
}
@keyframes explose {
  0% { opacity: .9; transform: scale(.15); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes halo { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eclat {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
@keyframes but {
  0% { opacity: 0; transform: scale(.2) skewX(-12deg); }
  16% { opacity: 1; transform: scale(1.1) skewX(-12deg); }
  26% { transform: scale(1) skewX(-12deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06) skewX(-12deg); }
}
@keyframes respire { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes scintille { from { opacity: .25; } to { opacity: .6; } }

/* ---------- Révélation au défilement ---------- */
.revele { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.revele.vu { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .menu-bascule { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--nuit); border-bottom: 1px solid var(--trait);
    padding: .75rem var(--gouttiere) 1.25rem;
    gap: .2rem;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--trait); }
  .hud .bouton--boost { display: none; }
  .actu { grid-template-columns: 1fr; gap: .5rem; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__actions .bouton { width: 100%; }
  .pied__grille { grid-template-columns: 1fr; }
  .rejouer { left: var(--gouttiere); right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scene .projecteur, .scene .ballon-groupe { opacity: 1; }
  .scene .ligne { stroke-dashoffset: 0; }
  .revele { opacity: 1; transform: none; }
  .rejouer { display: none; }
}

@media print {
  .hud, .flottant, .rejouer, .scene, .bandeau { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- Blocs des mentions légales ---------- */
.remplir {
  border-left: 3px solid var(--rouge);
  background: rgba(230, 58, 78, .07);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-size: .93rem;
}
.remplir strong { color: var(--texte-fort); }
.legal h3 {
  margin: 2.75rem 0 .8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.legal h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.legal li { margin-bottom: .45rem; }
.legal dl { margin: 0 0 1.1em; }
.legal dt { font-family: var(--display); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-top: .9rem; }
.legal dd { margin: .15rem 0 0; }
.maj-date { font-size: .85rem; color: var(--texte); }