/* =========================================================
   90'Away — site vitrine · page d'accueil (version de travail)
   Couleurs, typographies et règles : docs/03-identite-visuelle.md
   ========================================================= */

/* ---------- Polices ----------
   Aventi (mots en bleu des titres) et Gilroy (textes).
   Aventi est embarquée (assets/fonts/) pour s'afficher sur tous les appareils,
   y compris ceux où elle n'est pas installée. Gilroy : polices installées (local()).
   Licences web À CONFIRMER avant mise en ligne. */
@font-face { font-family: "Aventi"; src: local("Aventi Bold"), local("Aventi-Bold"), url("../../assets/fonts/aventi-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Aventi"; src: local("Aventi Regular"), local("Aventi-Regular"), url("../../assets/fonts/aventi-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: local("Gilroy-Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: local("Gilroy-Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: local("Gilroy-SemiBold"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gilroy"; src: local("Gilroy-Bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: local("Gilroy-Heavy"), local("Gilroy Heavy"); font-weight: 800; font-display: swap; }

/* ---------- Charte ---------- */
:root {
  --nuit: #010014;
  --noir: #0A0A0A;
  --bleu: #0062F5;
  --blanc: #F6F6F6;
  --gris: #AEAEB2;
  --contour: #404040;
  --succes: #4DBD69;
  --erreur: #FD3024;

  /* Prestige (seules couleurs vives autorisées, avec les badges) */
  --p-legendaire: #EFB841;
  --p-epique: #285EF2;
  --p-elite: #E6454C;
  --p-commun: #616672;
  --p-modeste: #464A55;
  --p-mythique: #1E1943;

  --carte: #0D0D12;
  --carte-nuit: #06051A;
  --trait: rgba(246, 246, 246, .08);

  --titre: "Aventi", "Didot", Georgia, serif;
  --texte: "Gilroy", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Grands messages (refonte, écart à la charte à valider : 06) */
  --affiche: "Gilroy", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --gouttiere: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --rayon: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--bleu); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bleu); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------- Typo commune ---------- */
.eyebrow {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--bleu); }

h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h3 {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.005em;
}

.section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(48px, 7vw, 88px); }
.section-head--split { max-width: none; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 32px 64px; }
.section-head--split > div { display: grid; gap: 20px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head__aside, .section-head__lead { color: var(--gris); font-size: 18px; max-width: 440px; }
.section-head__lead { max-width: 560px; }

/* ---------- Boutons ---------- */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--bleu);
  color: #fff;
  font: 600 16px/1 var(--texte);
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .2s;
  box-shadow: 0 0 0 0 rgba(0, 98, 245, 0);
}
.btn:hover { background: #1A72FF; box-shadow: 0 8px 30px -6px rgba(0, 98, 245, .55); }
.btn:active { transform: scale(.98); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

/* ---------- Bandeau version locale ---------- */
.proto-banner {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60;
  font: 500 12px/1 var(--texte); color: var(--gris);
  padding: 9px 14px; border-radius: 999px;
  background: rgba(10, 10, 10, .8); border: 1px solid var(--contour);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; pointer-events: none;
}
.f3-pied { padding-bottom: 76px !important; } /* place sous le pied de page pour ce bandeau : à retirer avec lui */

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 var(--gouttiere); }
.nav__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  height: 60px; padding: 0 10px 0 18px;
  border-radius: 18px;
  border: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.is-scrolled .nav__inner {
  background: rgba(1, 0, 20, .72);
  border-color: var(--trait);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--texte); letter-spacing: -.01em; }
.nav__brand img { width: auto; height: 40px; }
.nav__links { display: flex; gap: 32px; margin-left: auto; }
.nav__links a { position: relative; padding: 8px 0; font: 500 15px/1 var(--texte); color: var(--gris); transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--blanc); }
/* La section en cours (js/main.js) : un trait bleu court sous le lien, qui s'étire depuis le centre */
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px;
  background: var(--bleu); transform: scaleX(0); transition: transform .4s var(--ease);
}
.nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__toggle { display: none; }
.nav__mobile { display: none; }

/* Ancres : le titre de la section arrive à la même hauteur sous la barre fixe,
   quel que soit l'espace en haut de la section (--ancre = haut de l'écran → étiquette) */
:root { --ancre: clamp(112px, 10vw, 136px); }
#application { scroll-margin-top: calc(var(--ancre) - clamp(110px, 14vw, 180px)); }
#classements, #faq { scroll-margin-top: calc(var(--ancre) - clamp(110px, 13vw, 170px)); }
#rejoindre { scroll-margin-top: calc(var(--ancre) - clamp(64px, 7vw, 112px)); }

/* =========================================================
   1. HERO · direction C « Du stade à l'écran »
   Par défaut : composition fixe (photo + téléphone posé dessus).
   .is-anime (ajoutée par le JS sur grand écran) : scène collée,
   la photo se glisse dans l'écran du téléphone au défilement.
   ========================================================= */
.hero-c { position: relative; background: var(--noir); }
.hero-c__scene {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate;
  --tel: min(clamp(240px, 22vw, 320px), calc((100svh - 170px) / 2.2)); /* largeur du téléphone */
  --bord-g: max(var(--gouttiere), calc((100vw - var(--wrap)) / 2));
  --bord-d: max(var(--gouttiere), calc((100vw - var(--wrap)) / 2 + 24px));
}
.hero-c.is-anime { height: 280vh; } /* 240vh pour la photo → téléphone, + 40vh pour lire « Ton histoire » */
.hero-c.is-anime .hero-c__scene { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }

.hero-c__photo { position: absolute; inset: 0; z-index: 2; margin: 0; background: var(--noir); }
.hero-c__photo picture { display: contents; }
.hero-c__photo img { width: 100%; height: 100%; object-fit: cover; animation: photoEntree 1.8s var(--ease) both; }
.hero-c.is-anime .hero-c__photo { will-change: transform, clip-path, opacity; }
@keyframes photoEntree { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

/* Voile : un noir qui part du coin bas gauche et s'estompe en arc, sans bord visible.
   Réglé pour un contraste moyen d'au moins 3:1
   sous le titre bleu sur les 5 photos ; l'ombre des lettres couvre les points très clairs. */
.hero-c__voile {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 26%),
    radial-gradient(ellipse 130% 145% at 0% 100%,
      rgba(10, 10, 10, .86) 0%, rgba(10, 10, 10, .86) 38%, rgba(10, 10, 10, .84) 44%, rgba(10, 10, 10, .77) 50%,
      rgba(10, 10, 10, .67) 57%, rgba(10, 10, 10, .56) 63%, rgba(10, 10, 10, .43) 69%, rgba(10, 10, 10, .3) 75%,
      rgba(10, 10, 10, .19) 81%, rgba(10, 10, 10, .09) 88%, rgba(10, 10, 10, .02) 94%, rgba(10, 10, 10, 0) 100%);
}

/* Photos plus claires derrière le titre (extérieur du stade, sièges bleus) : ombre plus soutenue */
.hero-c[data-photo="2"] .hero-c__voile,
.hero-c[data-photo="3"] .hero-c__voile {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 26%),
    radial-gradient(ellipse 130% 145% at 0% 100%,
      rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .94) 40%, rgba(10, 10, 10, .91) 46%, rgba(10, 10, 10, .84) 52%,
      rgba(10, 10, 10, .74) 58%, rgba(10, 10, 10, .61) 64%, rgba(10, 10, 10, .47) 70%, rgba(10, 10, 10, .33) 76%,
      rgba(10, 10, 10, .2) 82%, rgba(10, 10, 10, .1) 88%, rgba(10, 10, 10, .03) 94%, rgba(10, 10, 10, 0) 100%);
}

.hero-c .hero-c__phone {
  --w: var(--tel);
  position: absolute; z-index: 4;
  right: var(--bord-d);
  top: 50%; margin: calc(var(--w) * -1.08 + 28px) 0 0;
}
.hero-c.is-anime .hero-c__phone { z-index: 1; transform: translateY(var(--ty, 0px)); will-change: transform; }
.hero-c__symbole { display: none; }
.hero-c.is-anime .hero-c__symbole {
  display: block; position: absolute; inset: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .135);
  background: url("../../assets/app/90away-logo-bleu-hd.png") center / 62% no-repeat, var(--nuit);
  opacity: calc(1 - var(--p3, 0));
}

.hero-c__copy {
  position: absolute; z-index: 5;
  left: max(var(--gouttiere), calc((100vw - var(--wrap)) / 2));
  bottom: clamp(40px, 8vh, 88px);
  width: min(620px, calc(100vw - 2 * var(--gouttiere)));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
}
.hero-c__copy > * { animation: copieEntree .9s var(--ease) backwards; }
/* Le texte du Hero s'efface quand la photo entre dans le téléphone (--q : js/main.js) */
.hero-c.is-anime .hero-c__copy { opacity: calc(1 - var(--q, 0)); transform: translateY(calc(var(--q, 0) * -24px)); }
@keyframes copieEntree { from { opacity: 0; translate: 0 18px; } }
.hero-c__copy > :nth-child(1) { animation-delay: .25s; }
.hero-c__copy > :nth-child(2) { animation-delay: .38s; }
.hero-c__copy > :nth-child(3) { animation-delay: .5s; }
.hero-c__copy > :nth-child(4) { animation-delay: .62s; }
.hero-c__copy > :nth-child(5) { animation-delay: .74s; }
.hero-c__marque { height: clamp(64px, 6.6vw, 96px); width: auto; margin-bottom: -4px; }
/* Copie du logo du Hero qui remonte dans la barre au défilement (voir js/main.js) */
.marque-volante { position: fixed; left: 0; top: 0; z-index: 60; transform-origin: 0 0; pointer-events: none; visibility: hidden; will-change: transform, opacity; }
.hero-c__title {
  font-family: var(--affiche); font-weight: 800;
  font-size: clamp(46px, 6.4vw, 108px); line-height: .92; letter-spacing: -.04em;
  transform-origin: 0 100%; transform: scale(var(--ts, 1));
  width: max-content; max-width: calc(100vw - 2 * var(--gouttiere));
}
.hero-c__title span { display: block; width: max-content; max-width: 100%; }
.hero-c__title span + span { color: var(--bleu); text-shadow: 0 0 36px rgba(10, 10, 10, .7), 0 2px 14px rgba(10, 10, 10, .45); }
.hero-c__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: #D4D4D8; max-width: 460px; }

.hero-c__indice {
  position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  font: 600 11px/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--gris);
  opacity: var(--ind, 1);
}
.hero-c__indice::after { content: ""; width: 1px; height: 28px; background: linear-gradient(180deg, var(--gris), transparent); animation: indice 2s var(--ease) infinite; transform-origin: top; }
.hero-c.is-anime .hero-c__indice { display: flex; }
@keyframes indice { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Ton histoire : fin du Hero ----------
   Ordinateur animé : le texte se place à gauche du téléphone et apparaît ligne par ligne
   selon le défilement (--h : js/main.js, --i : rang de la ligne).
   Mobile et « réduire les animations » : voir la fin du fichier. */
.hero-c__histoire { display: grid; gap: 26px; justify-items: start; }
.hero-c__histoire-titre {
  font-family: var(--affiche); font-weight: 800;
  font-size: clamp(38px, 3.9vw, 58px); line-height: .98; letter-spacing: -.035em;
  display: grid; gap: .42em;
}
.hero-c__histoire-titre span { display: block; }
.hero-c__histoire-titre .bleu { color: var(--bleu); font-family: var(--titre); font-weight: 400; font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; }
.hero-c__histoire-texte { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: #D4D4D8; max-width: 460px; text-wrap: pretty; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .hero-c__histoire {
    position: absolute; z-index: 5; left: var(--bord-g);
    top: calc(50% + 34px); transform: translateY(-50%); /* centré sur le téléphone */
    width: min(640px, calc(100vw - var(--bord-g) - var(--bord-d) - var(--tel) - 220px));
    pointer-events: none;
  }
  .hero-c__histoire [data-apparition] {
    --v: clamp(0, calc(var(--h, 0) * 2.5 - var(--i, 0) * .4), 1);
    opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 22px));
  }
  .carte-flottante--visite { right: calc(100% - 20px); top: 21%; }
  .carte-flottante--points { right: calc(100% - 20px); bottom: 19%; }
}

/* Lumière bleue très légère derrière « Ton histoire » : un faisceau flou qui part du coin
   haut droit et descend vers le milieu bas à gauche, pour que le fond noir ne soit pas plat.
   Hero animé : elle apparaît quand la photo s'efface (--p2). */
.hero-c__lueur { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-c.is-anime .hero-c__lueur { opacity: var(--p2, 0); }
.hero-c__lueur::before, .hero-c__lueur::after { content: ""; position: absolute; border-radius: 50%; }
.hero-c__lueur::before { /* le faisceau */
  top: -30%; right: 4%; width: max(220px, 20vw); height: 165%;
  transform-origin: 50% 0; transform: rotate(48deg);
  background: linear-gradient(180deg, rgba(0, 98, 245, .32) 0%, rgba(0, 98, 245, .2) 35%, rgba(0, 98, 245, .11) 65%, rgba(0, 98, 245, 0) 95%);
  filter: blur(70px);
}
.hero-c__lueur::after { /* son point de départ, en haut à droite */
  top: -22%; right: -12%; width: max(360px, 42vw); height: 60%;
  background: radial-gradient(closest-side, rgba(0, 98, 245, .20), rgba(0, 98, 245, 0));
  filter: blur(30px);
}

/* Encoche plus large : elle couvre l'indicateur d'enregistrement de la vidéo */
.phone.phone--video::after { top: calc(var(--w) * .056); width: 42%; height: calc(var(--w) * .1); z-index: 3; }

/* Cartes autour du téléphone, dans le style des cartes de l'app.
   Elles n'apparaissent qu'une fois la vidéo lancée (.is-cartes ou .is-visible). */
.carte-flottante {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 11px; border-radius: 16px;
  background: rgba(13, 13, 18, .84);
  border: 1px solid rgba(0, 98, 245, .32);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85), 0 0 32px -12px rgba(0, 98, 245, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: 600 15px/1.2 var(--texte); color: var(--blanc); white-space: nowrap;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: .3s;
}
.carte-flottante--points { transition-delay: .65s; }
.hero-c.is-cartes .carte-flottante { opacity: 1; transform: none; }
.carte-flottante__icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.carte-flottante--visite .carte-flottante__icone { color: var(--succes); border: 1.5px solid var(--succes); background: rgba(77, 189, 105, .12); }
.carte-flottante--points .carte-flottante__icone { color: var(--bleu); background: rgba(0, 98, 245, .14); }
.carte-flottante strong { font-weight: 700; color: var(--bleu); }

.hero__platforms { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--texte); color: var(--gris); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 4px rgba(0, 98, 245, .18); }

/* =========================================================
   TÉLÉPHONE (cadre dessiné pour le projet, style plat)
   ========================================================= */
.phone {
  --w: 280px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .165);
  background: #111114;
  box-shadow:
    inset 0 0 0 1px #2B2B31,
    0 0 0 1px rgba(64, 64, 64, .7),
    0 50px 90px -30px rgba(0, 0, 0, .9),
    0 30px 60px -40px rgba(0, 98, 245, .35);
}
.phone img, .phone video {
  display: block;
  width: 100%;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  border-radius: calc(var(--w) * .135);
  background: var(--nuit);
}
.phone::after { /* Dynamic Island */
  content: "";
  position: absolute; left: 50%; top: calc(var(--w) * .062);
  width: 30%; height: calc(var(--w) * .085);
  transform: translateX(-50%);
  border-radius: 999px; background: #000;
}

/* =========================================================
   2. CONCEPT
   ========================================================= */
.concept { background: var(--noir); padding: clamp(110px, 14vw, 180px) 0; position: relative; overflow: hidden; isolation: isolate; }
/* Lumière bleue très légère, reprise de « Ton histoire » (.hero-c__lueur) en miroir :
   le faisceau part du coin bas droit et monte vers le haut à gauche. */
.concept::before, .concept::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.concept::before { /* le faisceau */
  bottom: -30%; right: 4%; width: max(220px, 20vw); height: 165%;
  transform-origin: 50% 100%; transform: rotate(-48deg);
  background: linear-gradient(0deg, rgba(0, 98, 245, .26) 0%, rgba(0, 98, 245, .17) 35%, rgba(0, 98, 245, .1) 65%, rgba(0, 98, 245, .05) 85%, rgba(0, 98, 245, 0) 100%);
  filter: blur(70px);
}
/* Raccord avec « Ta collection » : un fondu vers le noir dans la marge du bas, sous le contenu,
   pour que la lumière s'éteigne au lieu d'être coupée par le bord de la section */
.concept > .wrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(104px, 13.5vw, 176px); /* = marge du bas, jamais sur le contenu */
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), var(--noir) 85%);
  pointer-events: none;
}
.concept::after { /* son point de départ, en bas à droite */
  bottom: -22%; right: -12%; width: max(360px, 42vw); height: 60%;
  background: radial-gradient(closest-side, rgba(0, 98, 245, .16), rgba(0, 98, 245, 0));
  filter: blur(30px);
}
/* « Le déplacement » (validé le 19/10/2026).
   Trois étapes en escalier, reliées par un trajet bleu qui se dessine
   au défilement et finit sur un point. Chaque étape a sa petite composition :
   01 le jour du match (2 photos + un billet), 02 trois stades en collection,
   03 la récompense (badge, prestige, total). Sur ordinateur, les visuels se
   logent sous chaque palier du trajet : l'ensemble descend en diagonale,
   textes vers la droite, visuels en contrepoint.
   Sans JavaScript ou en « réduire les animations » : tout est affiché, sans effet. */
.ca { --fs: clamp(40px, 5vw, 70px); --eteint: rgba(246, 246, 246, .16); --accent-eteint: rgba(0, 98, 245, .3); }
.ca .eyebrow { line-height: 1.2; }
.ca__tete {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
  row-gap: 28px; margin-bottom: clamp(88px, 10vw, 152px);
}
.ca__tete .eyebrow { grid-column: 1 / -1; }
/* Le chapeau introduit le parcours : sous l'étiquette, aligné sur le départ du trajet,
   plus grand, d'un seul ton ; seul le nom de l'app ressort, en bleu et un peu plus gros */
.ca__chapeau {
  grid-column: 1 / 9; max-width: 760px;
  font-size: clamp(20px, 1.75vw, 25px); font-weight: 500; line-height: 1.5; letter-spacing: -.005em;
  color: #D9D9DD; text-wrap: pretty;
}
.ca__chapeau-marque { color: var(--bleu); font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }

.ca__parcours { position: relative; }
.ca__trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.ca__trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ca__fond { stroke: rgba(246, 246, 246, .1); stroke-width: 1.5; }
.ca__ligne { stroke: var(--bleu); stroke-width: 2; }
.ca__arret { fill: var(--noir); stroke: rgba(246, 246, 246, .28); stroke-width: 1.5; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.ca__arret.is-atteint { fill: var(--bleu); stroke: var(--bleu); }
.ca__onde { fill: none; stroke: var(--bleu); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca.is-arrive .ca__onde { animation: ca-onde 1.4s var(--ease) both; }
@keyframes ca-onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }

.ca__etapes {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  row-gap: clamp(64px, 7vw, 112px);
}
.ca__etape { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.ca__texte { position: relative; z-index: 2; grid-row: 1; padding-left: 44px; }
.ca__num { display: block; font: 600 13px/1 var(--texte); color: var(--bleu); letter-spacing: .08em; margin-bottom: 18px; }
.ca__titre {
  font-family: var(--affiche); font-weight: 700;
  font-size: var(--fs); line-height: 1.02; letter-spacing: -.035em;
  white-space: nowrap; color: var(--blanc);
}
.ca__accent {
  display: block; font-family: var(--titre); font-style: normal; font-weight: 400;
  font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; color: var(--bleu);
}
.ca__etape p { color: var(--gris); font-size: 17px; line-height: 1.6; max-width: 380px; margin-top: 22px; text-wrap: pretty; }

/* L'escalier : 1 → 5 → 9. Les visuels 2 et 3 se posent sous le palier qui mène à leur étape,
   assez bas pour laisser passer le trajet (hauteur du titre + marge). */
.ca__etape:nth-child(1) .ca__texte { grid-column: 1 / 6; }
.ca__etape:nth-child(2) .ca__texte { grid-column: 5 / 10; }
.ca__etape:nth-child(3) .ca__texte { grid-column: 9 / 13; }
.ca__visuel { position: relative; grid-row: 1; container-type: inline-size; }
.ca__etape:nth-child(1) .ca__visuel { grid-column: 7 / 13; margin-top: -24px; }
.ca__etape:nth-child(2) .ca__visuel { grid-column: 1 / 5; margin-top: calc(31px + var(--fs) * 2.2 + 44px); }
.ca__etape:nth-child(3) .ca__visuel { grid-column: 5 / 9; margin-top: calc(31px + var(--fs) * 2.2 + 44px); }

.ca__visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: var(--carte); }
.ca__jour img, .ca__piece img { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .85), 0 12px 24px -12px rgba(0, 0, 0, .6); }

/* ---------- 01 · Le jour du match ---------- */
.ca__jour { aspect-ratio: 588 / 450; }
.ca__jour .ca__plan { position: absolute; }
.ca__jour .ca__jour-ambiance { right: 2%; top: 0; width: 44%; height: auto; aspect-ratio: 4 / 5; }
.ca__jour .ca__jour-tribune { left: 6%; top: 28%; width: 40%; height: auto; aspect-ratio: 4 / 3; z-index: 2; }
/* le billet : papier clair, talon bleu détachable ; premier plan, à cheval sur les deux photos.
   Ses mesures internes (cqw) se rapportent à sa propre largeur ; l'encoche, à celle du visuel. */
.ca__billet {
  left: 14%; top: 58%; z-index: 3; width: 64%; aspect-ratio: 2.35;
  container-type: inline-size;
  display: flex; rotate: -5deg;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
  --encoche: radial-gradient(circle at 74% 0, transparent 2.75cqw, #000 calc(2.75cqw + .5px)) top / 100% 51% no-repeat,
             radial-gradient(circle at 74% 100%, transparent 2.75cqw, #000 calc(2.75cqw + .5px)) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--encoche); mask: var(--encoche);
}
.ca__billet-corps {
  flex: 0 0 74%; display: flex; flex-direction: column; justify-content: space-between;
  padding: 6.7cqw 7.1cqw 5.9cqw; background: #EEECE7; color: var(--noir); border-radius: 2cqw 0 0 2cqw;
}
.ca__billet-type { font: 600 max(7px, 2.85cqw)/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.ca__billet-tribune { font: 700 max(13px, 6.9cqw)/1 var(--texte); letter-spacing: -.02em; }
.ca__billet-place { display: flex; gap: 5.5cqw; margin: 0; }
.ca__billet-place dt { font: 600 max(6px, 2.35cqw)/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #77767C; margin-bottom: 1.6cqw; }
.ca__billet-place dd { margin: 0; font: 700 max(10px, 4.9cqw)/1 var(--texte); font-variant-numeric: tabular-nums; }
.ca__billet-talon {
  flex: 1; display: grid; place-items: center; background: var(--bleu); border-radius: 0 2cqw 2cqw 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 1px 2.75cqw; background-repeat: repeat-y; background-position: 0 0;
}
.ca__billet-talon span { writing-mode: vertical-rl; rotate: 180deg; font: 600 max(7px, 2.85cqw)/1 var(--texte); letter-spacing: .18em; color: #fff; }

/* ---------- 02 · La collection ---------- */
.ca__collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 7%; align-items: start; }
.ca__piece { margin: 0; }
.ca__piece:nth-child(2) { margin-top: 9cqw; }
.ca__piece:nth-child(3) { margin-top: 18cqw; }
.ca__piece img { height: auto; aspect-ratio: 3 / 4; }
.ca__piece figcaption {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font: 600 11px/1 var(--texte); letter-spacing: .14em; color: var(--gris); font-variant-numeric: tabular-nums;
}
.ca__piece figcaption::before { content: ""; width: 12px; height: 1px; background: var(--bleu); }

/* ---------- 03 · La récompense ---------- */
.ca__gain { display: flex; align-items: center; gap: 9%; }
.ca__medaille { position: relative; flex: 0 0 40%; aspect-ratio: 120 / 132; display: grid; place-items: center; }
/* Badge de prestige Légendaire officiel (app : BadgePrestigeNiveauLegendaire, marges transparentes retirées).
   Le doré reste sur le badge : seule une lueur dorée serrée autour de lui. */
.ca__medaille img {
  width: 76%; height: auto; aspect-ratio: 326 / 348; object-fit: contain; background: none; border-radius: 0;
  filter: grayscale(0) brightness(1) drop-shadow(0 0 16px rgba(239, 184, 65, .3));
}
.ca__anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ca__anneau path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ca__anneau-fond { stroke: rgba(246, 246, 246, .12); stroke-width: 1.5; }
.ca__anneau-trait { stroke: var(--bleu); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }

.ca__score { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.ca__score-label { font: 600 11px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ca__etoiles { display: flex; gap: 5px; margin: 12px 0 18px; }
.ca__etoiles i {
  width: 13px; height: 13px; background: var(--blanc);
  clip-path: polygon(50% 0, 61.8% 35.4%, 100% 38.2%, 69.1% 61.8%, 80.9% 100%, 50% 76.4%, 19.1% 100%, 30.9% 61.8%, 0 38.2%, 38.2% 35.4%);
}
.ca__etoiles i.is-vide { background: rgba(246, 246, 246, .18); }
.ca__total { font: 600 15px/1 var(--texte); color: var(--gris); white-space: nowrap; }
.ca__total b {
  font: 800 clamp(38px, 4vw, 54px)/.9 var(--affiche); letter-spacing: -.04em; color: var(--blanc);
  font-variant-numeric: tabular-nums; margin-right: 4px;
}
.ca__barre { position: relative; display: block; width: 100%; height: 2px; margin-top: 22px; background: rgba(246, 246, 246, .12); border-radius: 1px; }
.ca__barre span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 72%; background: var(--bleu); border-radius: 1px;
  clip-path: inset(-6px -6px -6px -6px);
}
.ca__barre span::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }

/* ---------- Animé : chaque étape s'allume quand le trajet l'atteint ---------- */
.ca.is-anime .ca__titre { color: var(--eteint); transition: color .6s var(--ease); }
.ca.is-anime .ca__accent { color: var(--accent-eteint); transition: color .6s var(--ease); }
.ca.is-anime .ca__num,
.ca.is-anime .ca__etape p { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ca.is-anime .ca__etape p { transition-delay: .12s; }
.ca.is-anime .is-atteinte .ca__titre { color: var(--blanc); }
.ca.is-anime .is-atteinte .ca__accent { color: var(--bleu); }
.ca.is-anime .is-atteinte .ca__num,
.ca.is-anime .is-atteinte p { opacity: 1; transform: none; }

/* Les plans montent l'un après l'autre, du flou au net ; la profondeur au défilement
   passe par transform (js), l'apparition par translate / scale / filter. */
.ca.is-anime .ca__plan {
  opacity: 0; translate: 0 32px; scale: .96; filter: blur(6px);
  transition: opacity .6s var(--ease), translate .9s var(--ease), scale .9s var(--ease), filter .6s var(--ease);
  transition-delay: calc(.05s + var(--i, 0) * .1s);
}
.ca.is-anime .ca__billet { rotate: -11deg; filter: blur(6px) drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); transition-property: opacity, translate, scale, filter, rotate; transition-duration: .6s, .9s, .9s, .6s, 1s; }
.ca.is-anime .is-visible .ca__plan { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.ca.is-anime .is-visible .ca__billet { rotate: -5deg; filter: blur(0) drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.ca__plan { will-change: transform; }

/* 03 : l'anneau se trace, puis le badge prend ses couleurs ; étoiles et barre suivent */
.ca.is-anime .ca__anneau-trait { stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .15s; }
.ca.is-anime .ca__medaille img { filter: grayscale(1) brightness(.45) drop-shadow(0 0 16px rgba(239, 184, 65, 0)); transition: filter .7s var(--ease) .6s; }
.ca.is-anime .ca__etoiles i:not(.is-vide) { background: rgba(246, 246, 246, .18); transition: background .4s var(--ease); }
.ca.is-anime .ca__barre span { clip-path: inset(-6px 100% -6px -6px); transition: clip-path 1s var(--ease) .3s; }
.ca.is-anime .is-visible .ca__anneau-trait { stroke-dashoffset: 0; }
.ca.is-anime .is-visible .ca__medaille img { filter: grayscale(0) brightness(1) drop-shadow(0 0 16px rgba(239, 184, 65, .3)); }
.ca.is-anime .is-visible .ca__etoiles i:not(.is-vide) { background: var(--blanc); }
.ca.is-anime .is-visible .ca__etoiles i:nth-child(1) { transition-delay: .35s; }
.ca.is-anime .is-visible .ca__etoiles i:nth-child(2) { transition-delay: .42s; }
.ca.is-anime .is-visible .ca__etoiles i:nth-child(3) { transition-delay: .49s; }
.ca.is-anime .is-visible .ca__etoiles i:nth-child(4) { transition-delay: .56s; }
.ca.is-anime .is-visible .ca__etoiles i:nth-child(5) { transition-delay: .63s; }
.ca.is-anime .is-visible .ca__barre span { clip-path: inset(-6px -6px -6px -6px); }

/* ---------- Tablette et mobile : une colonne, le trajet descend tout droit à gauche ---------- */
@media (max-width: 900px) {
  .ca__tete { grid-template-columns: 1fr; row-gap: 20px; margin-bottom: 72px; }
  .ca__tete .eyebrow, .ca__chapeau { grid-column: 1; }
  .ca__chapeau { font-size: 19px; line-height: 1.5; }
  .ca__etapes { grid-template-columns: 1fr; row-gap: 80px; }
  .ca__etape { grid-template-columns: 1fr; }
  .ca__etape:nth-child(n) .ca__texte { grid-column: 1; padding-left: 34px; }
  .ca__etape:nth-child(n) .ca__visuel { grid-column: 1; grid-row: 2; margin: 40px 0 0 34px; max-width: 520px; }
  .ca__titre { font-size: min(9.2vw, 56px); }
  .ca__etape p { font-size: 16px; margin-top: 16px; }
  .ca__piece figcaption { margin-top: 10px; font-size: 10px; }
  .ca__etape:nth-child(3) .ca__visuel { max-width: 400px; }
}

/* =========================================================
   3. TA COLLECTION · « L'alignement » (validé le 19/10/2026)
   Les quatre écrans s'alignent sur une même ligne, comme les joueurs avant
   le coup d'envoi. La ligne bleue reprend le trajet de « Le concept » : elle se trace
   au défilement, et chaque écran prend sa place quand elle l'atteint
   (js/main.js, bloc « Ta collection »). Les titres non atteints restent éteints.
   Ordinateur (≥ 1100 px) : les quatre téléphones en rang, la ligne au-dessus.
   Tablette (600-1099 px) : un écran par ligne, texte à gauche, téléphone à droite.
   Mobile (< 600 px) : un écran par ligne, texte puis téléphone ; la ligne descend à gauche.
   Sans JavaScript ou en « réduire les animations » : tout est affiché, ligne tracée.
   ========================================================= */
.al {
  --eteint: rgba(246, 246, 246, .16);
  --ecart: clamp(20px, 2.4vw, 40px);   /* entre deux téléphones */
  --rail: 11px;                        /* diamètre d'un arrêt */
  /* Ressort calculé comme Motion (visualDuration .5 s, bounce .15), échantillonné en linear() */
  --ressort: linear(0, 0.022, 0.074, 0.145, 0.226, 0.311, 0.396, 0.478, 0.554, 0.624, 0.687, 0.742, 0.79, 0.832, 0.867, 0.896, 0.921, 0.941, 0.957, 0.97, 0.98, 0.988, 0.994, 0.998, 1.001, 1.003, 1.005, 1.005, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.002, 1);
  position: relative;
  /* bas plus court que le haut : « Le partage » ajoute déjà sa propre marge */
  padding: clamp(104px, 11vw, 160px) 0 clamp(48px, 4.5vw, 72px);
  /* Part du noir de « Le concept » et reste bleu nuit jusqu'à « Le partage », qui commence dans le même bleu */
  background: linear-gradient(180deg, var(--noir) 0, var(--nuit) min(440px, 42vh), var(--nuit) 100%);
  overflow-x: clip;
}
.al .eyebrow { line-height: 1.2; }

/* ---------- En-tête : même famille que « Le concept » ---------- */
.al__tete { display: grid; gap: 22px; max-width: 860px; margin-bottom: clamp(64px, 6.5vw, 96px); }
.al__titre {
  font: 700 clamp(40px, 5vw, 70px)/1.02 var(--affiche);
  letter-spacing: -.035em; color: var(--blanc);
}
.al__accent {
  display: block; font-family: var(--titre); font-style: normal; font-weight: 400;
  font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; color: var(--bleu);
}

/* ---------- La ligne d'alignement ----------
   Le rail (trait discret) va du premier au dernier arrêt ; le tracé bleu le recouvre.
   Positions posées par le js (--al-debut, --al-long) ; valeurs par défaut sans js. */
.al__rang { position: relative; }
.al__rail {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--rail) / 2); top: calc(var(--rail) / 2 - 1px);
  width: var(--al-long, calc(75% + .75 * var(--ecart))); height: 2px;
  background: rgba(246, 246, 246, .1); border-radius: 1px;
}
.al__trace {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--bleu); transform-origin: 0 50%;
}
.al__arret {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--rail); height: var(--rail); border-radius: 50%;
  background: var(--bleu); box-shadow: 0 0 0 1.5px var(--bleu);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), scale .35s var(--ressort);
}
/* Le dernier arrêt est « le point » : un peu plus grand, une onde quand la ligne l'atteint (comme « Le concept ») */
.al__joueur:last-child .al__arret { scale: 1.3; }
.al__arret::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid var(--bleu); opacity: 0; pointer-events: none;
}
.al.is-arrive .al__joueur:last-child .al__arret::after { animation: al-onde 1.4s var(--ease) both; }
@keyframes al-onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* ---------- Une colonne = un écran ---------- */
.al__liste { position: relative; z-index: 1; }
.al__joueur { position: relative; }
.al__nom {
  position: relative; padding-top: calc(var(--rail) + 18px);
  font: 600 15px/1.2 var(--texte); letter-spacing: .01em; color: #D9D9DD;
}
.al__etape {
  font: 700 clamp(22px, 1.8vw, 26px)/1.14 var(--affiche);
  letter-spacing: -.025em; color: var(--blanc); text-wrap: balance;
}
.al__desc { color: var(--gris); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* L'écran dans son téléphone ; le cadre porte l'apparition, le téléphone le survol */
.al__cadre { position: relative; }
.al__phone { margin: 0; }
.al__phone img, .al__phone video { height: auto; } /* les attributs width/height réservent la place, la largeur suit le téléphone */

/* =========================================================
   ORDINATEUR (≥ 1100 px) : les quatre téléphones en rang
   Sous-grille : noms, téléphones, titres et textes partagent les mêmes lignes,
   donc les quatre paragraphes commencent à la même hauteur.
   ========================================================= */
@media (min-width: 1100px) {
  .al__liste {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto;
    column-gap: var(--ecart);
  }
  /* (container-type sur la colonne annulerait la sous-grille : il est posé sur le cadre) */
  .al__joueur { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .al__cadre { margin-top: 28px; container-type: inline-size; }
  .al__phone { --w: min(100cqw, 284px); }
  .al__etape { margin-top: clamp(32px, 3vw, 44px); }
  .al__desc { margin-top: 14px; max-width: 30ch; }

  /* Une lumière très douce sous le rang, pour que le bleu nuit ne soit pas plat */
  .al__rang::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 8%; right: 8%; top: 14%; height: 52%;
    background: radial-gradient(closest-side, rgba(0, 98, 245, .14), rgba(0, 98, 245, 0));
    filter: blur(40px);
  }
}

/* =========================================================
   TABLETTE ET MOBILE (< 1100 px) : un écran par ligne, la ligne descend à gauche
   ========================================================= */
@media (max-width: 1099px) {
  .al__liste { display: grid; row-gap: clamp(72px, 12vw, 104px); }
  .al__joueur {
    display: grid; padding-left: 34px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nom" "etape" "desc" "cadre";
  }
  .al__nom { grid-area: nom; padding-top: 0; }
  .al__arret { top: .6em; left: -34px; translate: 0 -50%; margin-top: 1px; }
  .al__etape { grid-area: etape; margin-top: 14px; font-size: min(7.4vw, 30px); }
  .al__desc { grid-area: desc; margin-top: 14px; max-width: 46ch; }
  /* Le téléphone coupé en bas, en fondu : l'essentiel de l'écran reste lisible */
  .al__cadre {
    grid-area: cadre; margin-top: 36px;
    --lw: min(300px, calc(100vw - 2 * var(--gouttiere) - 34px));
    height: calc(var(--lw) * 1.48); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .al__phone { --w: var(--lw); }
  .al__rail {
    left: calc(var(--rail) / 2 - 1px); top: var(--al-debut, .6em);
    width: 2px; height: var(--al-long, calc(100% - 4em));
  }
  .al__trace { transform-origin: 50% 0; }
}
/* Tablette : le texte à gauche, le téléphone à droite, sur la même ligne */
@media (min-width: 600px) and (max-width: 1099px) {
  .al__joueur {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 64px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "nom cadre" "etape cadre" "desc cadre";
  }
  .al__cadre { margin-top: 0; --lw: clamp(240px, 36vw, 300px); }
  .al__etape { font-size: clamp(26px, 3.6vw, 32px); }
}

/* =========================================================
   ANIMÉ (classe .is-anime posée par le js, sans « réduire les animations »)
   Chaque colonne attend, éteinte, que la ligne l'atteigne (.is-atteint) :
   le téléphone monte à sa place avec le ressort, le titre s'allume, le texte apparaît.
   Réversible au défilement, comme « Le concept ».
   ========================================================= */
.al.is-anime .al__trace { transform: scaleX(0); will-change: transform; }
.al.is-anime .al__arret { background: var(--noir); box-shadow: 0 0 0 1.5px rgba(246, 246, 246, .28); }
.al.is-anime .al__nom { color: rgba(174, 174, 178, .55); }
.al.is-anime .al__etape { color: var(--eteint); }
.al.is-anime .al__desc { opacity: 0; translate: 0 14px; }
.al.is-anime .al__cadre { opacity: .14; translate: 0 40px; scale: .96; transform-origin: 50% 100%; }

.al.is-pret .al__nom, .al.is-pret .al__etape { transition: color .6s var(--ease); }
.al.is-pret .al__desc { transition: opacity .7s var(--ease) .12s, translate .7s var(--ease) .12s; }
.al.is-pret .al__cadre { transition: opacity .5s var(--ease), translate .8s var(--ressort), scale .8s var(--ressort); }

.al.is-anime .is-atteint .al__arret { background: var(--bleu); box-shadow: 0 0 0 1.5px var(--bleu); }
.al.is-anime .is-atteint .al__nom { color: #D9D9DD; }
.al.is-anime .is-atteint .al__etape { color: var(--blanc); }
.al.is-anime .is-atteint .al__desc { opacity: 1; translate: 0 0; }
.al.is-anime .is-atteint .al__cadre { opacity: 1; translate: 0 0; scale: 1; }

@media (max-width: 1099px) {
  .al.is-anime .al__trace { transform: scaleY(0); }
  .al.is-anime .al__cadre { translate: 0 32px; scale: 1; }
}

/* Survol (souris, ordinateur) : l'écran se soulève un peu, son arrêt grossit */
@media (hover: hover) and (min-width: 1100px) {
  .al__phone { transition: transform .45s var(--ressort), box-shadow .45s var(--ease); }
  .al__joueur:hover .al__phone {
    transform: translateY(-8px);
    box-shadow: inset 0 0 0 1px #2B2B31, 0 0 0 1px rgba(64, 64, 64, .7), 0 60px 90px -30px rgba(0, 0, 0, .95), 0 30px 70px -36px rgba(0, 98, 245, .6);
  }
  .al__joueur:hover .al__arret { scale: 1.35; }
  .al__joueur:last-child:hover .al__arret { scale: 1.6; }
  .al.is-anime .al__joueur:not(.is-atteint):hover .al__phone { transform: none; }
}

/* ---------- Réduire les animations : tout est affiché, sans transition ---------- */
@media (prefers-reduced-motion: reduce) {
  .al__phone, .al__arret { transition: none; }
  .al__joueur:hover .al__phone { transform: none; }
}

/* =========================================================
   4. LE PARTAGE · « L'éclaté » (validé le 19/10/2026)
   Le fil (téléphone) au centre ; autour, trois compositions web sans capture :
   la communauté (avatars), le moment (un vrai badge, une visite), la diffusion d'un souvenir.
   Ordinateur : grille 3 colonnes × 2 rangées, les titres d'une même rangée sont alignés
   de part et d'autre du téléphone ; un trait fin relie chaque bloc au téléphone (js/main.js).
   Tablette et mobile : le fil d'abord, puis les trois blocs sur une ligne conductrice à gauche.
   Raccord avec « Ta collection » : la collection reste bleu nuit en bas (bloc .al) et la lumière
   de « Le partage » est centrée sur la jonction.
   Sans JavaScript ou en « réduire les animations » : tout est affiché, sans effet.
   ========================================================= */
.pe {
  --bleu-texte: #3D86FF;   /* bleu de marque éclairci pour les petits textes (6:1 sur le bleu nuit) */
  --gris-doux: #8E8E93;    /* 6,4:1 sur le bleu nuit */
  --trait-bleu: rgba(0, 98, 245, .5);
  --rayon-photo: 12px;
  --ressort: linear(0, 0.022, 0.074, 0.145, 0.226, 0.311, 0.396, 0.478, 0.554, 0.624, 0.687, 0.742, 0.79, 0.832, 0.867, 0.896, 0.921, 0.941, 0.957, 0.97, 0.98, 0.988, 0.994, 0.998, 1.001, 1.003, 1.005, 1.005, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.002, 1);
  --sortie: cubic-bezier(.22, 1, .36, 1);
  position: relative; isolation: isolate;
  padding: clamp(56px, 5.5vw, 88px) 0 clamp(96px, 10vw, 150px);
  background: var(--nuit);
  overflow-x: clip;
}
/* La lumière de la jonction : très large, très basse en intensité, centrée juste au-dessus du titre */
.pe::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -360px; width: min(1600px, 150vw); height: 900px;
  translate: -50% calc((1 - var(--pe-lumiere, 1)) * 80px);
  opacity: calc(.35 + var(--pe-lumiere, 1) * .65);
  background: radial-gradient(closest-side, rgba(0, 98, 245, .1), rgba(0, 98, 245, .035) 55%, rgba(0, 98, 245, 0));
}
.pe .eyebrow { line-height: 1.2; }

/* ---------- En-tête : même famille que « Le concept » et « Ta collection » ---------- */
.pe__tete { display: grid; gap: 22px; max-width: 860px; margin-bottom: clamp(64px, 6.5vw, 96px); }
.pe__titre { font: 700 clamp(40px, 5vw, 70px)/1.02 var(--affiche); letter-spacing: -.035em; color: var(--blanc); }
.pe__accent {
  display: block; font-family: var(--titre); font-style: normal; font-weight: 400;
  font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; color: var(--bleu);
}
.pe__chapeau { max-width: 560px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.5; color: #D9D9DD; text-wrap: pretty; }

/* ---------- Textes des quatre blocs ---------- */
.pe__etape { font: 700 clamp(22px, 1.9vw, 27px)/1.12 var(--affiche); letter-spacing: -.022em; color: var(--blanc); text-wrap: balance; }
.pe__desc { margin-top: 10px; color: var(--gris); font-size: 16px; line-height: 1.6; max-width: 32ch; text-wrap: pretty; }

/* ---------- Le téléphone (le fil) ---------- */
.pe__phone { --w: min(300px, 78vw); margin: 0; }
.pe .phone img, .pe .phone video { height: auto; }

/* ---------- Le fil : la légende du téléphone ----------
   Les trois icônes reprennent la ligne d'actions d'une visite dans l'app. */
.pe-fil { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pe-fil li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 600 13px/1 var(--texte); color: #D9D9DD;
  background: rgba(0, 98, 245, .08); box-shadow: inset 0 0 0 1px rgba(0, 98, 245, .28);
}
.pe-fil svg { width: 15px; height: 15px; fill: none; stroke: var(--bleu-texte); stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- Petites pièces communes ---------- */
.pe-av { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--nuit), 0 0 0 3px var(--trait-bleu); }
.pe-drapeau {
  position: absolute; right: 2%; bottom: 2%; width: max(14px, 26%); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--nuit); overflow: hidden;
}
.pe-drapeau--fr { background: linear-gradient(90deg, #0055A4 33.4%, #F6F6F6 0 66.6%, #EF4135 0); }
.pe-drapeau--es { background: linear-gradient(180deg, #AA151B 26%, #F1BF00 0 74%, #AA151B 0); }
.pe-drapeau--de { background: linear-gradient(180deg, #111 33.4%, #DD0000 0 66.6%, #FFCE00 0); }
.pe-drapeau--en { background: linear-gradient(90deg, transparent 41%, #CE1124 0 59%, transparent 0), linear-gradient(180deg, transparent 41%, #CE1124 0 59%, transparent 0), #F6F6F6; }

/* =========================================================
   TES AMIS · la tribune
   Six supporters placés librement (positions et tailles en % de la composition).
   Les deux premiers portent leur nom ; les autres le montrent au survol.
   Au survol, l'ami visé passe devant et les autres s'effacent légèrement.
   ========================================================= */
.pe-amis { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; aspect-ratio: 380 / 240; }
.pe-amis__ami { position: absolute; left: var(--x); top: var(--y); width: var(--s); translate: -50% -50%; transition: opacity .3s var(--ease); }
.pe-amis__photo { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; }
.pe-amis__photo img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px rgba(246, 246, 246, .14), 0 18px 34px -14px rgba(0, 0, 0, .9);
  transition: box-shadow .35s var(--ease), scale .5s var(--ressort);
}
.pe-amis__ami.is-etiquete .pe-amis__photo img { box-shadow: 0 0 0 2px rgba(0, 98, 245, .75), 0 0 0 7px rgba(0, 98, 245, .1), 0 22px 40px -16px rgba(0, 0, 0, .95); }
.pe-amis__info {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0;
  display: grid; justify-items: center; gap: 3px; white-space: nowrap; text-align: center;
  font: 500 13px/1.25 var(--texte); color: var(--gris);
}
.pe-amis__info b { font: 600 15px/1.2 var(--texte); color: var(--blanc); }
.pe-amis__rang { color: var(--bleu-texte); font-weight: 600; }
/* Petits avatars : étiquette cachée (lue par les lecteurs d'écran), montrée au survol */
.pe-amis__ami:not(.is-etiquete) .pe-amis__info {
  padding: 8px 11px; border-radius: var(--rayon-photo); background: rgba(13, 13, 18, .96); box-shadow: inset 0 0 0 1px var(--trait), 0 12px 24px -12px #000;
  opacity: 0; translate: -50% -4px; pointer-events: none; z-index: 3;
  transition: opacity .2s var(--ease), translate .3s var(--ease);
}
.pe-amis__ami:not(.is-etiquete) .pe-amis__info b { font-size: 14px; }
/* Avatars collés au bord droit : l'étiquette s'ouvre vers l'intérieur */
.pe-amis__ami.is-bord .pe-amis__info { left: auto; right: 0; translate: 0 -4px; justify-items: end; text-align: right; }
@media (hover: hover) {
  .pe-amis__ami:hover { z-index: 2; }
  .pe-amis:has(.pe-amis__ami:hover) .pe-amis__ami:not(:hover) { opacity: .45; }
  .pe-amis__ami:hover .pe-amis__photo img { scale: 1.08; box-shadow: 0 0 0 2px var(--bleu), 0 0 0 7px rgba(0, 98, 245, .16), 0 22px 40px -16px #000; }
  .pe-amis__ami:hover .pe-amis__info { opacity: 1; translate: -50% 0; }
  .pe-amis__ami.is-bord:hover .pe-amis__info { translate: 0 0; }
}

/* =========================================================
   CE QUI BOUGE · le moment
   Un vrai badge de la collection, en grand : il arrive, son halo s'allume, un reflet le traverse.
   Puis, plus discrète, la visite d'un ami (la photo se pose en se recadrant à peine).
   ========================================================= */
.pe-bouge { display: grid; gap: 26px; width: 100%; }
.pe-bouge__moment, .pe-bouge__visite { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 20px; }
.pe-bouge__badge { position: relative; aspect-ratio: 374 / 420; transition: rotate .5s var(--ressort), scale .5s var(--ressort); }
.pe-bouge__badge img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .7)); }
.pe-bouge__halo {
  position: absolute; inset: -34%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 98, 245, .3), rgba(0, 98, 245, .08) 55%, rgba(0, 98, 245, 0));
}
/* Le reflet : une bande claire, découpée à la forme exacte du badge */
.pe-bouge__reflet {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url("../../assets/app/badges/badge-citoyen-d-europe-grand.webp") center / 100% 100% no-repeat;
  mask: url("../../assets/app/badges/badge-citoyen-d-europe-grand.webp") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
}
.pe-bouge__ligne { display: grid; gap: 6px; font: 500 15px/1.4 var(--texte); color: #D9D9DD; }
.pe-bouge__ligne p { margin: 0; }
.pe-bouge__ligne b { font-weight: 600; color: var(--blanc); }
.pe-bouge__ligne strong { font-weight: 600; color: var(--bleu-texte); }
.pe-bouge__ligne time { font-size: 13px; color: var(--gris-doux); }
.pe-bouge__qui { display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.pe-bouge__moment .pe-bouge__ligne strong { font: 700 21px/1.15 var(--affiche); letter-spacing: -.015em; color: var(--blanc); margin-top: 4px; }

.pe-bouge__photo { position: relative; display: block; aspect-ratio: 3 / 2; }
.pe-bouge__cadre { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--rayon-photo); box-shadow: 0 0 0 1px rgba(246, 246, 246, .08), 0 16px 30px -16px #000; }
.pe-bouge__cadre img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.pe-bouge__photo .pe-av { position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; }
.pe-bouge__meta { display: flex; align-items: baseline; gap: 10px; }
.pe-bouge__pts { font: 700 15px/1 var(--affiche); font-style: normal; color: var(--bleu-texte); white-space: nowrap; }
@media (hover: hover) {
  .pe-bouge__moment:hover .pe-bouge__badge { rotate: -4deg; scale: 1.04; }
  .pe-bouge__visite:hover .pe-bouge__cadre img { scale: 1.05; }
}

/* =========================================================
   PARTAGE TA VISITE · la diffusion
   Ton souvenir (une photo) part vers trois amis : un point lumineux suit chaque trait,
   l'ami s'allume à l'arrivée et réagit d'un J'aime (JS). Repère : viewBox 380 × 240.
   ========================================================= */
.pe-partage { position: relative; width: min(100%, 320px); aspect-ratio: 380 / 240; }
.pe-partage__liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pe-partage__liens path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pe-partage__fond { stroke: rgba(246, 246, 246, .1); stroke-width: 1.25; stroke-dasharray: 2 5; }
.pe-partage__lien { stroke: var(--bleu); stroke-width: 1.5; stroke-dasharray: 1 1; }
.pe-partage__jeton { fill: #CFE0FF; opacity: 0; }
.pe-partage__souvenir {
  position: absolute; left: 6%; top: 14.4%; width: 36%; aspect-ratio: 4 / 5; margin: 0;
  border-radius: 14px; overflow: hidden; rotate: -3deg;
  box-shadow: 0 0 0 1px rgba(246, 246, 246, .12), 0 28px 44px -20px #000, 0 18px 40px -26px rgba(0, 98, 245, .55);
}
.pe-partage__souvenir img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 100%; }
.pe-partage__souvenir figcaption {
  position: absolute; inset: auto 0 0; display: grid; gap: 1px; padding: 26px 10px 9px;
  background: linear-gradient(180deg, rgba(1, 0, 20, 0), rgba(1, 0, 20, .86));
  font: 500 11px/1.25 var(--texte); color: #D9D9DD;
}
.pe-partage__souvenir figcaption b { font: 600 13px/1.2 var(--texte); color: var(--blanc); }
.pe-partage__ami { position: absolute; left: var(--x); top: var(--y); width: min(12%, 42px); aspect-ratio: 1; translate: -50% -50%; }
.pe-partage__ami img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--bleu), 0 0 0 7px rgba(0, 98, 245, .14);
  transition: box-shadow .4s var(--ease), filter .4s var(--ease), scale .5s var(--ressort);
}
.pe-partage__coeur {
  position: absolute; right: -18%; top: -18%; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 2px var(--nuit);
  transition: scale .5s var(--ressort), opacity .2s var(--ease);
}
.pe-partage__coeur svg { width: 11px; height: 11px; fill: var(--blanc); }
.pe-partage__souvenir { transition: rotate .5s var(--ressort), scale .5s var(--ressort); }
@media (hover: hover) {
  .pe-partage:hover .pe-partage__souvenir { rotate: -1deg; scale: 1.03; }
}

/* =========================================================
   COMPOSITION
   ========================================================= */
.pe__scene { position: relative; }
.pe__reseau { display: none; }
.pe__item { position: relative; }
.pe__texte + * { margin-top: 24px; }

/* Ordinateur : 3 colonnes × 2 rangées. Les titres d'une même rangée sont alignés
   de part et d'autre du téléphone, qui occupe les deux rangées. */
@media (min-width: 1100px) {
  .pe__scene {
    --g: clamp(64px, 6.5vw, 104px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: var(--g); row-gap: 72px; align-items: start;
  }
  .pe__cote { display: contents; }
  .pe__phone { --w: 300px; grid-column: 2; grid-row: 1 / 3; align-self: center; z-index: 2; }
  .pe__item { z-index: 1; width: min(100%, 360px); }
  .pe__item--amis { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
  .pe__item--fil { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; width: min(100%, 320px); }
  .pe__item--bouge { grid-column: 3; grid-row: 1; justify-self: start; }
  .pe__item--partage { grid-column: 3; grid-row: 2; justify-self: start; }
  .pe__item--amis .pe__desc, .pe__item--fil .pe__desc { margin-left: auto; }
  .pe__item--fil .pe-fil { justify-content: flex-end; }
  /* La lumière resserrée derrière le téléphone */
  .pe__scene::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 760px; height: 760px; translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(0, 98, 245, .15), rgba(0, 98, 245, .045) 60%, rgba(0, 98, 245, 0)); pointer-events: none;
  }
  /* Le réseau : un trait fin de chaque bloc vers le téléphone (chemins calculés en JS) */
  .pe__reseau { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
  .pe__reseau path { fill: none; stroke-linecap: round; }
  .pe__reseau .pe-lien { stroke: var(--trait-bleu); stroke-width: 1.25; stroke-dasharray: 1 1; transition: stroke .35s var(--ease); }
  .pe__reseau .pe-lien.is-actif { stroke: var(--bleu); }
  .pe__reseau .pe-impulsion { stroke: #8DB8FF; stroke-width: 1.75; stroke-dasharray: .12 2; stroke-dashoffset: .12; opacity: 0; }
  .pe__reseau .pe-point { fill: var(--bleu); }
  .pe__reseau .pe-point-halo { fill: rgba(0, 98, 245, .18); }
}

/* Tablette et mobile : le fil (texte, puis le téléphone entier), puis les trois blocs
   accrochés à une ligne conductrice à gauche, qui part du téléphone */
@media (max-width: 1099px) {
  .pe__scene { display: grid; row-gap: 64px; }
  .pe__cote { display: contents; }
  .pe__item--fil { order: 0; margin-bottom: -24px; }
  .pe__phone { order: 1; justify-self: center; --w: min(290px, 74vw); }
  .pe__item--amis { order: 2; } .pe__item--bouge { order: 3; } .pe__item--partage { order: 4; }
  .pe__item:not(.pe__item--fil) { padding-left: 30px; }
  /* La ligne : continue du téléphone au dernier bloc, un point devant chaque titre */
  .pe__item:not(.pe__item--fil)::before {
    content: ""; position: absolute; left: 5px; top: -64px; bottom: 0; width: 1px;
    background: linear-gradient(180deg, rgba(0, 98, 245, .1), var(--trait-bleu) 64px);
    transform-origin: 50% 0;
  }
  .pe__item--partage::before { bottom: auto; height: calc(64px + 14px); }
  .pe__item:not(.pe__item--fil)::after {
    content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--nuit); box-shadow: inset 0 0 0 1.5px var(--bleu), 0 0 0 4px rgba(0, 98, 245, .12);
  }
  .pe-amis, .pe-bouge, .pe-partage { max-width: 420px; }
  .pe-amis { margin-bottom: 14px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .pe__item--fil { justify-self: center; text-align: center; max-width: 520px; }
  .pe__item--fil .pe__desc { margin-inline: auto; }
  .pe__item--fil .pe-fil { justify-content: center; }
  .pe__item:not(.pe__item--fil) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .pe__item:not(.pe__item--fil) .pe__texte + * { margin-top: 0; }
  .pe__item:not(.pe__item--fil)::after { top: 50%; margin-top: -5.5px; }
  .pe__item--partage::before { height: calc(64px + 50%); }
  .pe__phone { --w: 300px; }
}

/* =========================================================
   MOUVEMENT (seulement si le JS a ajouté .is-anime, donc jamais en « réduire les animations »)
   Chaque bloc reçoit .is-visible à son entrée dans l'écran, rangée par rangée :
   on ne voit jamais un bloc s'animer hors de l'écran, ni tout bouger en même temps.
   .is-joue relance les effets ponctuels (reflet du badge) au survol.
   ========================================================= */
.pe__item { --t: calc(.08s + var(--i) * .16s); }

/* En-tête : le trait de l'étiquette se dessine, puis le titre et le chapeau montent */
.pe.is-pret .pe__tete > * { transition: opacity .8s var(--sortie), translate .9s var(--sortie); }
.pe.is-pret .pe__tete > :nth-child(2) { transition-delay: .08s; }
.pe.is-pret .pe__tete > :nth-child(3) { transition-delay: .18s; }
.pe.is-anime .pe__tete:not(.is-visible) > * { opacity: 0; translate: 0 22px; }
.pe.is-pret .pe__tete .eyebrow::before { transform-origin: 0 50%; transition: scale .7s var(--sortie) .1s; }
.pe.is-anime .pe__tete:not(.is-visible) .eyebrow::before { scale: 0 1; }

/* Téléphone : il monte et se pose, sans rebond (c'est l'objet principal, il doit être calme) */
.pe.is-pret .pe__phone { transition: opacity .7s var(--sortie), translate 1s var(--sortie), scale 1s var(--sortie); }
.pe.is-anime .pe__phone:not(.is-visible) { opacity: 0; translate: 0 48px; scale: .97; }

/* Textes des blocs */
.pe.is-pret .pe__texte > * { transition: opacity .6s var(--sortie) var(--t), translate .7s var(--sortie) var(--t); }
.pe.is-anime .pe__item:not(.is-visible) .pe__texte > * { opacity: 0; translate: 0 12px; }

/* Le fil : les trois repères s'allument l'un après l'autre */
.pe.is-pret .pe-fil li { transition: opacity .45s var(--sortie) calc(var(--t) + .3s + var(--j) * .09s), translate .55s var(--sortie) calc(var(--t) + .3s + var(--j) * .09s); }
.pe.is-anime .pe__item:not(.is-visible) .pe-fil li { opacity: 0; translate: 0 6px; }

/* Tes amis : chacun rejoint la tribune depuis le téléphone, avec un léger ressort */
.pe.is-pret .pe-amis__ami { transition: opacity .45s var(--ease) calc(var(--t) + .15s + var(--j) * .07s), translate .8s var(--ressort) calc(var(--t) + .15s + var(--j) * .07s), scale .8s var(--ressort) calc(var(--t) + .15s + var(--j) * .07s); }
.pe.is-anime .pe__item:not(.is-visible) .pe-amis__ami { opacity: 0; scale: .55; translate: calc(-50% + var(--dx, 0px)) -50%; }
@media (min-width: 1100px) { .pe.is-anime .pe__item:not(.is-visible) .pe-amis__ami { --dx: 56px; } }
@media (hover: hover) { .pe.is-pret .pe__item.is-pose .pe-amis__ami { transition: opacity .3s var(--ease); } }

/* Ce qui bouge : le badge arrive ; son halo s'allume, le reflet passe ; la visite suit, la photo se pose */
.pe.is-pret .pe-bouge__badge { transition: opacity .4s var(--ease) calc(var(--t) + .15s), scale .8s var(--ressort) calc(var(--t) + .15s), rotate .8s var(--ressort) calc(var(--t) + .15s); }
.pe.is-pret .pe__item.is-pose .pe-bouge__badge { transition: rotate .5s var(--ressort), scale .5s var(--ressort); }
.pe.is-anime .pe__item:not(.is-visible) .pe-bouge__badge { opacity: 0; scale: .72; rotate: -10deg; }
.pe.is-pret .pe-bouge__moment .pe-bouge__ligne { transition: opacity .5s var(--sortie) calc(var(--t) + .35s), translate .6s var(--sortie) calc(var(--t) + .35s); }
.pe.is-pret .pe-bouge__visite { transition: opacity .5s var(--sortie) calc(var(--t) + .75s), translate .6s var(--sortie) calc(var(--t) + .75s); }
.pe.is-pret .pe-bouge__cadre img { transition: scale 1.4s var(--sortie) calc(var(--t) + .75s); }
.pe.is-pret .pe__item.is-pose .pe-bouge__cadre img { transition: scale .5s var(--ease); }
.pe.is-anime .pe__item:not(.is-visible) :is(.pe-bouge__moment .pe-bouge__ligne, .pe-bouge__visite) { opacity: 0; translate: 0 10px; }
.pe.is-anime .pe__item:not(.is-visible) .pe-bouge__cadre img { scale: 1.12; }
.pe.is-anime .pe__item.is-joue .pe-bouge__reflet { animation: pe-reflet 1.1s var(--ease) calc((var(--t) + .45s) * var(--attente, 1) + .1s) both; }
.pe.is-anime .pe__item.is-joue .pe-bouge__halo { animation: pe-halo 1.4s var(--sortie) calc((var(--t) + .25s) * var(--attente, 1)) both; }
@keyframes pe-reflet { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes pe-halo { 0% { opacity: 0; scale: .7; } 50% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }

/* Partage : le souvenir se pose ; les traits, les points lumineux et les amis sont pilotés par le JS */
.pe.is-pret .pe-partage__souvenir { transition: opacity .45s var(--ease) calc(var(--t) + .15s), translate .8s var(--ressort) calc(var(--t) + .15s), scale .8s var(--ressort) calc(var(--t) + .15s), rotate .5s var(--ressort); }
.pe.is-pret .pe__item.is-pose .pe-partage__souvenir { transition: rotate .5s var(--ressort), scale .5s var(--ressort); }
.pe.is-anime .pe__item:not(.is-visible) .pe-partage__souvenir { opacity: 0; scale: .9; translate: -24px 0; }
.pe.is-anime .pe-partage__ami:not(.is-recu) img { box-shadow: 0 0 0 1.5px rgba(246, 246, 246, .18), 0 0 0 7px rgba(0, 98, 245, 0); filter: grayscale(.7) brightness(.6); }
.pe.is-anime .pe-partage__ami.is-recu img { animation: pe-recu .5s var(--ressort); }
.pe.is-anime .pe-partage__ami:not(.is-recu) .pe-partage__coeur { scale: 0; opacity: 0; }
.pe.is-anime .pe__item:not(.is-visible) .pe-partage__ami { opacity: 0; }
.pe.is-anime .pe__item:not(.is-visible) .pe-partage__fond { opacity: 0; }
.pe.is-pret .pe-partage__fond { transition: opacity .5s var(--ease) calc(var(--t) + .3s); }
.pe.is-pret .pe-partage__ami { transition: opacity .4s var(--ease) calc(var(--t) + .3s + var(--j) * .08s); }
@keyframes pe-recu { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }

/* Réseau (ordinateur) : chaque trait part du téléphone quand son bloc entre */
@media (min-width: 1100px) {
  .pe.is-pret .pe__reseau .pe-lien { transition: stroke-dashoffset .9s var(--sortie) var(--t), stroke .35s var(--ease); }
  .pe.is-anime .pe__reseau .pe-lien:not(.is-visible) { stroke-dashoffset: 1; }
  .pe.is-pret .pe__reseau :is(.pe-point, .pe-point-halo) { transition: opacity .3s var(--ease) var(--t); }
  .pe.is-anime .pe__reseau :is(.pe-point, .pe-point-halo):not(.is-visible) { opacity: 0; }
  /* Au survol, une lumière parcourt le trait : vers le téléphone (une nouvelle arrive),
     ou vers l'extérieur pour le partage. Décalage .12 = juste avant le début, -1 = juste après la fin */
  .pe__reseau .pe-impulsion.is-joue { animation: pe-impulsion .85s var(--ease) both; }
  .pe__reseau .pe-impulsion--sortant.is-joue { animation-name: pe-impulsion-sortant; }
  @keyframes pe-impulsion { 0% { opacity: 1; stroke-dashoffset: -1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: .12; } }
  @keyframes pe-impulsion-sortant { 0% { opacity: 1; stroke-dashoffset: .12; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
}
/* Ligne conductrice (tablette et mobile) : elle se trace jusqu'au bloc qui entre */
@media (max-width: 1099px) {
  .pe.is-pret .pe__item::before { transition: scale .8s var(--sortie); }
  .pe.is-pret .pe__item::after { transition: scale .5s var(--ressort) .35s, opacity .3s var(--ease) .35s; }
  .pe.is-anime .pe__item:not(.is-visible)::before { scale: 1 0; }
  .pe.is-anime .pe__item:not(.is-visible)::after { scale: .3; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pe *, .pe *::before, .pe *::after, .pe::before { transition: none !important; animation: none !important; }
}

/* =========================================================
   4b. COUVERTURE · « La carte, ce sont les stades » (20/10/2026, en relecture)
   Pas de fond de carte : la carte se dessine avec les stades de la base (un point par lieu,
   js/couverture-donnees.js), en bleu additif — plus il y a de stades, plus la zone s'éclaire.
   À l'entrée dans l'écran (js/main.js, bloc « Couverture ») : les points s'allument d'ouest en est,
   le trait bleu des chiffres avance et les chiffres comptent au même rythme (~1,4 s, une seule fois).
   Puis un repère présente tour à tour un stade loin des cinq grands championnats.
   Version compacte (20/10/2026, Kiliann trouvait le bloc trop gros) :
   ordinateur (≥ 1000 px) : titre | texte sur une ligne, puis carte | colonne des trois chiffres.
   En dessous : une colonne, la carte en pleine largeur, puis les chiffres en liste.
   ========================================================= */
.cv {
  --bleu-texte: #3D86FF;
  --gris-doux: #8E8E93;
  position: relative; isolation: isolate;
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 88px);
  background: var(--nuit);
  overflow-x: clip;
}
.cv .eyebrow { line-height: 1.2; }

/* En-tête : même famille que les autres blocs de « L'application » */
.cv__tete { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.cv__titre { font: 700 clamp(34px, 3.6vw, 52px)/1.04 var(--affiche); letter-spacing: -.03em; color: var(--blanc); text-wrap: balance; }
.cv__accent { font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.12em; letter-spacing: -.005em; color: var(--bleu); }
.cv__chapeau { max-width: 520px; color: #D9D9DD; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }

/* ---------- Carte | chiffres ---------- */
.cv__corps { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .cv__tete { max-width: none; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(40px, 5vw, 80px); align-items: end; }
  .cv__tete .eyebrow, .cv__titre { grid-column: 1; }
  .cv__chapeau { grid-column: 2; grid-row: 2; }
  .cv__corps { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
}

/* ---------- La carte ---------- */
.cv__carte { position: relative; margin: 0; aspect-ratio: 2.0935; } /* rapport largeur / hauteur de js/couverture-donnees.js */
.cv__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Le repère : un anneau sur le stade, son nom et où il se trouve */
.cv__repere {
  position: absolute; left: calc(var(--x, 0) * 1%); top: calc(var(--y, 0) * 1%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.cv__repere.is-visible { opacity: 1; }
.cv__anneau {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%;
  border: 1.5px solid #CFE0FF; box-shadow: 0 0 0 5px rgba(0, 98, 245, .16), 0 0 22px rgba(0, 98, 245, .7);
}
.cv__repere.is-visible .cv__anneau { animation: cv-anneau .7s var(--ease) both; }
@keyframes cv-anneau { from { scale: 2.2; opacity: 0; } }
.cv__etiquette {
  position: absolute; left: 20px; top: 0; translate: 0 -50%;
  display: grid; gap: 3px; white-space: nowrap;
  padding: 9px 13px 10px; border-radius: 12px;
  background: rgba(6, 5, 26, .86); box-shadow: 0 0 0 1px rgba(246, 246, 246, .09), 0 16px 32px -14px #000;
  font: 500 13px/1.3 var(--texte); color: var(--gris);
  transition: translate .45s var(--ease);
}
.cv__etiquette b { font: 600 15px/1.2 var(--texte); color: var(--blanc); }
.cv__compet { color: var(--bleu-texte); font-weight: 600; }
.cv__repere.is-gauche .cv__etiquette { left: auto; right: 20px; }
.cv__repere:not(.is-visible) .cv__etiquette { translate: 6px -50%; }
.cv__repere.is-gauche:not(.is-visible) .cv__etiquette { translate: -6px -50%; }

/* ---------- Les chiffres ---------- */
/* Une ligne par chiffre : le nombre, puis « Près de / stades » à sa droite */
.cv__chiffres { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
/* Le trait : gris au repos, bleu qui avance avec les points (--cv-p, de 0 à 1) */
.cv__chiffres::before, .cv__chiffres::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.cv__chiffres::before { background: var(--trait); }
.cv__chiffres::after { background: linear-gradient(90deg, rgba(0, 98, 245, .15), var(--bleu)); transform-origin: 0 50%; transform: scaleX(var(--cv-p, 1)); }
.cv__chiffre {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto;
  column-gap: 18px; align-items: center; padding: 18px 0;
}
.cv__chiffre + .cv__chiffre { border-top: 1px solid var(--trait); }
.cv__nombre {
  grid-row: 1 / 3; display: block;
  font: 800 clamp(40px, 3.4vw, 52px)/.9 var(--affiche); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--bleu); text-shadow: 0 0 30px rgba(0, 98, 245, .5); /* même traitement que « +300 » des badges */
  transform-origin: 0 70%;
}
/* À l'entrée : chaque nombre se pose avec un léger zoom, l'un après l'autre, pendant qu'il compte */
.cv__chiffres.is-compte .cv__nombre { animation: cv-zoom 1.1s var(--ease) both; }
.cv__chiffres.is-compte .cv__chiffre:nth-child(2) .cv__nombre { animation-delay: .12s; }
.cv__chiffres.is-compte .cv__chiffre:nth-child(3) .cv__nombre { animation-delay: .24s; }
@keyframes cv-zoom {
  0% { transform: scale(.8); opacity: 0; filter: blur(6px); }
  60% { filter: blur(0); }
  100% { transform: none; opacity: 1; }
}
.cv__chiffre--stades .cv__nombre { font-size: clamp(56px, 5vw, 76px); }
.cv__avant { grid-column: 2; align-self: end; font: 500 14px/1.3 var(--texte); color: var(--gris); }
.cv__unite { grid-column: 2; align-self: start; font: 600 clamp(16px, 1.3vw, 18px)/1.25 var(--texte); color: var(--blanc); }

/* ---------- Et ce n'est que le début ---------- */
.cv__suite { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; color: var(--gris); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.cv__suite b { color: var(--blanc); font-weight: 600; }
.cv__pouls { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); translate: 0 -1px; animation: cv-pouls 2.4s var(--ease) infinite; }
@keyframes cv-pouls { 0% { box-shadow: 0 0 0 0 rgba(0, 98, 245, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(0, 98, 245, 0); } }

@media (max-width: 699px) {
  .cv__carte { margin: 0 calc(-1 * var(--gouttiere)); }
  .cv__etiquette { left: 16px; padding: 7px 10px 8px; font-size: 12px; }
  .cv__etiquette b { font-size: 13px; }
  .cv__repere.is-gauche .cv__etiquette { right: 16px; }
  .cv__anneau { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cv *, .cv *::before, .cv *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   5. CLASSEMENTS
   ========================================================= */
.count {
  padding: clamp(110px, 13vw, 170px) 0 clamp(90px, 11vw, 150px);
  background:
    radial-gradient(56% 560px at 50% 600px, rgba(0, 98, 245, .1), rgba(0, 98, 245, 0) 70%),
    var(--nuit);
}

/* 5a. Simulateur « La phrase » (validé le 20/10/2026, D24)
   La visite se compose comme une phrase ; les onglets dessous (six prestiges puis 10 vrais stades par niveau,
   le match, la visite, la revisite) la modifient ; à droite la valeur et le classement fictif.
   Ordinateur (≥ 1100 px) : composer à gauche, résultat à droite. Tablette : composer en haut, valeur et
   classement côte à côte. Mobile : une colonne, la valeur reste collée en bas.
   Prestiges : Épique = rouge, Élite = bleu (Kiliann, 20/10/2026). */
/* ---------- Section : remplace le fond et les marges de .count ---------- */
.cs {
  /* Teintes des six prestiges, reprises de l'app (ReglagesRecherche.couleur, ReglagesDecouverte.degradeIrise).
     Variantes « texte » éclaircies quand la teinte de l'app est trop sombre sur le bleu nuit. */
  --t-mythique: #B1AEE6;
  --t-legendaire: #FBCB1F;
  --t-epique: #0062F5;  --t-epique-texte: #4A8FFF;
  --t-elite: #D00627;   --t-elite-texte: #F2495C;
  --t-commun: #AEAEB2;
  --t-modeste: #6E6E73; --t-modeste-texte: #8E8E93;
  --irise: linear-gradient(100deg, #E6C8A6, #B1AEE6 22%, #76CBD5 45%, #C2ABE5 66%, #87BAE2 84%, #BDB0DF);
  --bleu-texte: #3D86FF;
  --gris-doux: #8E8E93;
  --ressort: linear(0, 0.022, 0.074, 0.145, 0.226, 0.311, 0.396, 0.478, 0.554, 0.624, 0.687, 0.742, 0.79, 0.832, 0.867, 0.896, 0.921, 0.941, 0.957, 0.97, 0.98, 0.988, 0.994, 0.998, 1.001, 1.003, 1.005, 1.005, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.002, 1);
  --sortie: cubic-bezier(.22, 1, .36, 1);
  padding: clamp(104px, 11vw, 160px) 0 clamp(90px, 11vw, 150px);
  background: var(--nuit);
  overflow-x: clip;
}
.cs .eyebrow { line-height: 1.2; }

/* En-tête : même famille que « Le concept », « Ta collection » et « Le partage » */
.cs__tete { display: grid; gap: 22px; max-width: 900px; margin-bottom: clamp(56px, 6vw, 88px); }
.cs__titre { font: 700 clamp(40px, 5vw, 70px)/1.02 var(--affiche); letter-spacing: -.035em; color: var(--blanc); text-wrap: balance; }
.cs__accent { display: block; font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; color: var(--bleu); }
.cs__chapeau { max-width: 640px; color: #D9D9DD; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }

.cs__note { margin-top: 28px; font-size: 13px; color: var(--gris-doux); }

/* La règle des points : commune aux trois directions, chacune la met en scène à sa façon */
.cs-regle { display: flex; gap: 14px; align-items: flex-start; }
.cs-regle__icone { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(0, 98, 245, .5); color: var(--bleu-texte); }
.cs-regle__icone svg { width: 16px; height: 16px; }
.cs-regle p > b { display: block; font: 700 17px/1.3 var(--texte); color: var(--blanc); }
.cs-regle p > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--gris); }


/* Avatar générique de l'app (même silhouette partout) */
.cs-avatar-defaut { display: grid; place-items: end center; overflow: hidden; border-radius: 50%; background: #1B1B22; box-shadow: inset 0 0 0 1.5px var(--bleu); }
.cs-avatar-defaut svg { width: 72%; height: 72%; fill: #4A4A55; }


@media (max-width: 699px) { .cs .cs-regle { align-items: flex-start; } }

.cs--ph {
  --t-rouge: #F2495C;   /* Épique */
  --t-bleu: #4A8FFF;    /* Élite */
  --panneau: linear-gradient(180deg, rgba(13, 14, 34, .9), rgba(6, 5, 26, .9));
}
.ph {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(48px, 6vw, 96px); align-items: start;
}

/* ---------- La phrase ---------- */
.ph__compose { position: relative; }
.ph__phrase {
  font: 600 clamp(27px, 2.6vw, 40px)/1.45 var(--affiche); letter-spacing: -.022em;
  color: #7C7C86; text-wrap: pretty; min-height: 4.35em;
}
/* Les mots à changer : blancs, soulignés d'un trait bleu épais, avec une petite flèche */
.ph__mot {
  appearance: none; border: 0; margin: 0; padding: 0 .06em; font: inherit; letter-spacing: inherit; cursor: pointer;
  color: var(--blanc); background: none; border-radius: .12em;
  text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: .07em; text-underline-offset: .18em;
  transition: background-color .2s var(--ease), color .2s;
}
.ph__mot svg { display: inline-block; width: .36em; height: .36em; margin-left: .14em; vertical-align: .16em; fill: none; stroke: var(--bleu-texte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ph__mot img { display: inline-block; width: .8em; height: .8em; margin-right: .16em; vertical-align: -.08em; }
@media (hover: hover) { .ph__mot:hover { background: rgba(0, 98, 245, .14); } }
.ph__mot:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.ph__mot[aria-expanded="true"] { background: rgba(0, 98, 245, .18); }
.ph__mot.is-change { animation: ph-mot .45s var(--sortie); }
@keyframes ph-mot { from { opacity: .3; } to { opacity: 1; } }
.ph__soude { white-space: nowrap; }

/* ---------- Les onglets, toujours ouverts sous la phrase ---------- */
.ph__onglets { display: flex; gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--trait); }
.ph__onglets button {
  appearance: none; border: 0; background: none; cursor: pointer; position: relative;
  padding: 0 0 14px; font: 600 15px/1.2 var(--texte); color: var(--gris); white-space: nowrap; transition: color .2s;
}
.ph__onglets button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--sortie); }
.ph__onglets button:hover, .ph__onglets button[aria-selected="true"] { color: var(--blanc); }
.ph__onglets button[aria-selected="true"]::after { transform: none; }
.ph__onglets button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }
.ph__panneau { padding-top: 26px; }
.ph__panneau.is-montre { animation: ph-panneau .35s var(--sortie); }
@keyframes ph-panneau { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ph__explique { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--gris); max-width: 560px; }

/* Les six prestiges (comme la V1) */
.ph__prestiges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ph__prestige {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 10px 2px 14px; border-radius: 14px; cursor: pointer;
  transition: background-color .2s;
}
.ph__prestige img { width: min(68px, 100%); height: auto; opacity: .5; filter: saturate(.6); transform: scale(.9); transition: opacity .25s, filter .25s, transform .4s var(--ressort); }
.ph__prestige span { font: 600 14px/1.1 var(--texte); color: var(--gris); transition: color .2s; }
.ph__prestige::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 2px; height: 2px; border-radius: 1px; background: var(--c); transform: scaleX(0); transition: transform .3s var(--sortie); }
@media (hover: hover) { .ph__prestige:hover { background: rgba(246, 246, 246, .04); } }
@media (hover: hover) { .ph__prestige:hover img { opacity: .8; } }
.ph__prestige:has(input:checked) img { opacity: 1; filter: none; transform: none; }
.ph__prestige:has(input:checked) span { color: var(--c); }
.ph__prestige:has(input:checked)::after { transform: none; }
.ph__prestige:first-child:has(input:checked) span { background: var(--irise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph__prestige:first-child::after { background: var(--irise); }
.ph__prestige:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* De vrais stades du niveau choisi : une liste de noms, sobre */
.ph__stades { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--trait); }
.ph__stades-titre { font-size: 14px; color: var(--gris); margin-bottom: 12px; }
.ph__stades-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ph__stade {
  display: grid; gap: 3px; align-content: center; min-height: 56px; padding: 9px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--trait); background: rgba(246, 246, 246, .02); color: #D9D9DD;
  transition: border-color .2s, background-color .2s, color .2s;
}
.ph__stade b { font: 600 15px/1.25 var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__stade small { font: 500 12px/1.3 var(--texte); color: var(--gris-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .ph__stade:hover { border-color: #4A4A55; color: var(--blanc); } }
.ph__stade:has(input:checked) { border-color: var(--bleu); background: rgba(0, 98, 245, .13); color: var(--blanc); }
.ph__stade:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* Le match, la visite, la revisite : des choix simples (comme la V1) */
.ph__options { display: flex; flex-wrap: wrap; gap: 10px; }
.ph__option {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 18px; border-radius: 14px; border: 1px solid var(--contour);
  font: 600 16px/1.2 var(--texte); color: var(--gris);
  transition: border-color .2s, background-color .2s, color .2s;
}
@media (hover: hover) { .ph__option:hover { border-color: #5A5A64; color: var(--blanc); } }
.ph__option:has(input:checked) { border-color: var(--bleu); background: rgba(0, 98, 245, .13); color: var(--blanc); }
.ph__option:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
.ph__jauge { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ph__jauge i { width: 3px; border-radius: 1px; background: rgba(246, 246, 246, .16); }
.ph__jauge i:nth-child(1) { height: 5px; } .ph__jauge i:nth-child(2) { height: 8px; } .ph__jauge i:nth-child(3) { height: 11px; } .ph__jauge i:nth-child(4) { height: 14px; }
.ph__jauge i.is-on { background: var(--bleu-texte); }
.ph__options--visite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph__options--visite .ph__option { align-items: flex-start; padding: 16px; }
.ph__options--visite svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--bleu-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ph__options--visite b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.ph__options--visite small { display: block; margin-top: 6px; font: 500 13px/1.4 var(--texte); color: var(--gris-doux); }
.ph__panneau.is-sans-match .ph__options { opacity: .5; }

/* ---------- L'appel « Simule ta visite » ---------- */
.ph__contenu { transition: opacity .5s var(--ease), filter .5s var(--ease); }
.ph.is-attente .ph__contenu { opacity: .28; filter: blur(3px); pointer-events: none; user-select: none; }
.ph__appel {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ph__appel[hidden] { display: none; }
.ph__appel-btn { min-height: 58px; padding: 0 32px; font-size: 18px; border-radius: 16px; box-shadow: 0 16px 40px -14px rgba(0, 98, 245, .8); }
.ph__appel p { font-size: 15px; color: var(--gris); }
.ph.is-attente .ph__ajouter { opacity: .35; pointer-events: none; }
.ph__appel.is-part { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* ---------- La valeur ---------- */
.ph__resultat, .ph__classement { background: var(--panneau); border: 1px solid rgba(246, 246, 246, .09); }
.ph__resultat {
  --c: #FBCB1F;
  display: grid; justify-items: center; text-align: center;
  padding: 30px 28px 26px; border-radius: 26px 26px 0 0; border-bottom: 0;
}
.ph__badge { width: 88px; height: auto; }
.ph__badge.is-change { animation: ph-badge .5s var(--ressort); }
@keyframes ph-badge { from { transform: scale(.82); opacity: .4; } to { transform: none; opacity: 1; } }
.ph__valeur { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 14px; }
.ph__valeur b { font: 800 clamp(56px, 4.8vw, 72px)/1 var(--affiche); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--blanc); }
.ph__valeur small { font: 700 20px/1 var(--texte); color: var(--gris); }
.ph__delta { position: absolute; left: 100%; top: 0; margin-left: 4px; white-space: nowrap; font: 700 14px/1 var(--texte); font-variant-numeric: tabular-nums; color: var(--bleu-texte); opacity: 0; pointer-events: none; }
.ph__delta.is-baisse { color: var(--gris); }
.ph__delta.is-on { animation: ph-delta 1.4s var(--sortie) forwards; }
@keyframes ph-delta { 0% { opacity: 0; transform: translateY(6px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ph__fiche { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); width: 100%; max-width: 320px; }
.ph__stade-nom { font: 700 17px/1.25 var(--texte); color: var(--blanc); }
.ph__stade-info { margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--gris-doux); }
.ph__niveau { margin-top: 8px; font: 600 15px/1.3 var(--texte); color: var(--c); transition: color .3s; }
.ph--mythique .ph__niveau { background: var(--irise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph__ajouter { margin-top: 22px; gap: .3em; }
.ph__ajouter.is-tape { animation: ph-tape .45s var(--ressort); }
@keyframes ph-tape { from { transform: scale(.95); } to { transform: none; } }

/* ---------- Le classement fictif ---------- */
.ph__classement { --ligne: 50px; padding: 22px 22px 14px; border-radius: 0 0 26px 26px; border-top: 1px solid rgba(246, 246, 246, .07); }
.ph__cl-label { font: 600 12px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ph__rang { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.ph__rang b { font: 800 34px/1 var(--affiche); letter-spacing: -.03em; color: var(--blanc); font-variant-numeric: tabular-nums; }
.ph__rang sup { font-size: .45em; letter-spacing: 0; }
.ph__apercu { font: 600 14px/1.3 var(--texte); color: var(--bleu-texte); }
.ph__apercu.is-neutre { color: var(--gris); }
.ph__tabs { display: flex; gap: 6px; margin: 16px 0 10px; overflow-x: auto; scrollbar-width: none; }
.ph__tabs::-webkit-scrollbar { display: none; }
.ph__tabs button {
  appearance: none; flex: none; cursor: pointer; min-height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--contour); background: none; color: var(--gris); font: 500 13px/1 var(--texte);
  transition: background-color .2s, color .2s, border-color .2s;
}
.ph__tabs button:hover { color: var(--blanc); }
.ph__tabs button[aria-selected="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.ph__tabs button:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; }
.ph__fenetre {
  position: relative; height: calc(var(--ligne) * 5); overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.ph__fenetre.is-change { animation: ph-panneau .35s var(--sortie); }
.ph-ligne {
  position: absolute; left: 0; right: 0; top: 0; height: var(--ligne);
  display: grid; grid-template-columns: 52px 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px 0 8px;
  will-change: transform;
}
.ph-ligne__rang { font: 600 15px/1 var(--texte); color: var(--gris); font-variant-numeric: tabular-nums; text-align: center; }
.ph-ligne__photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(246, 246, 246, .12); }
.ph-ligne__qui { min-width: 0; }
.ph-ligne__qui b { display: block; font: 600 15px/1.2 var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-ligne__qui span { display: block; margin-top: 2px; font: 500 12px/1.2 var(--texte); color: var(--gris-doux); }
.ph-ligne__pts { font: 600 15px/1 var(--texte); font-variant-numeric: tabular-nums; color: #D9D9DD; white-space: nowrap; }
.ph-ligne--toi {
  z-index: 2; border-radius: 14px;
  background: linear-gradient(rgba(0, 98, 245, .17), rgba(0, 98, 245, .17)), var(--nuit);
  box-shadow: inset 0 0 0 1px var(--bleu);
}
.ph-ligne--toi .ph-ligne__rang, .ph-ligne--toi b, .ph-ligne--toi .ph-ligne__pts { color: var(--bleu-texte); }
.ph-ligne--toi .ph-ligne__rang { font-weight: 700; }
.ph-ligne--toi.is-monte { box-shadow: inset 0 0 0 1px var(--bleu), 0 0 26px -6px rgba(0, 98, 245, .9); }
.ph__cl-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--gris-doux); }
.ph__cl-pied b { color: var(--blanc); font-weight: 600; }
.ph__reset { appearance: none; border: 0; background: none; cursor: pointer; font: 600 13px/1 var(--texte); color: var(--gris); padding: 10px 0; }
.ph__reset:hover { color: var(--blanc); }

/* La règle, en conclusion */
.ph__regle { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--trait); align-items: center; gap: 18px; }
.ph__regle .cs-regle__icone { width: 44px; height: 44px; }
.ph__regle .cs-regle__icone svg { width: 18px; height: 18px; }
.ph__regle p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.ph__regle b { font: 700 clamp(20px, 1.9vw, 26px)/1.25 var(--affiche); letter-spacing: -.02em; }
.ph__regle p > span { margin: 0; }

/* =========================================================
   Tablette (700-1099 px)
   ========================================================= */
@media (max-width: 1099px) {
  .ph { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 0; }
  .ph__compose { grid-column: 1 / -1; margin-bottom: 52px; }
  .ph__carte { display: contents; }
  .ph__resultat { border-radius: 26px 0 0 26px; border-bottom: 1px solid rgba(246, 246, 246, .09); border-right: 0; align-content: center; align-self: stretch; }
  .ph__classement { border-radius: 0 26px 26px 0; border-top: 1px solid rgba(246, 246, 246, .09); border-left: 1px solid rgba(246, 246, 246, .07); }
}

/* =========================================================
   Mobile (< 700 px)
   ========================================================= */
@media (max-width: 699px) {
  .ph { display: flex; flex-direction: column; align-items: stretch; }
  .ph > *, .ph__carte > * { min-width: 0; }
  .ph__compose { margin-bottom: 24px; }
  .ph__phrase { font-size: clamp(23px, 6.6vw, 27px); min-height: 0; }
  .ph__soude:has(.ph__mot--stade) { white-space: normal; }
  .ph__onglets { gap: 18px; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); }
  .ph__onglets::-webkit-scrollbar { display: none; }
  .ph__prestiges { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .ph__stades-liste { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere); }
  .ph__stades-liste::-webkit-scrollbar { display: none; }
  .ph__stade { flex: none; width: 210px; }
  .ph__options--visite { grid-template-columns: 1fr; }
  .ph__option { padding: 12px 14px; font-size: 15px; }

  /* La valeur reste collée en bas pendant qu'on compose (au-dessus du bandeau de version locale) */
  .ph__resultat {
    position: sticky; bottom: 58px; z-index: 5;
    grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "badge val btn" "badge niv btn";
    align-items: center; justify-items: start; text-align: left; gap: 0 12px;
    padding: 10px 10px 10px 12px; border-radius: 20px; border: 1px solid rgba(0, 98, 245, .4);
    background: rgba(6, 5, 26, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9);
  }
  .ph.is-attente .ph__resultat { visibility: hidden; }
  .ph__badge { grid-area: badge; width: 46px; }
  .ph__valeur { grid-area: val; margin: 0; gap: 4px; }
  .ph__valeur b { font-size: 30px; }
  .ph__valeur small { font-size: 14px; }
  .ph__delta { font-size: 12px; top: -2px; }
  .ph__fiche { grid-area: niv; margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
  .ph__stade-nom, .ph__stade-info { display: none; }
  .ph__niveau { margin: 0; font-size: 12px; }
  .ph__ajouter { grid-area: btn; margin: 0; min-height: 46px; padding: 0 16px; font-size: 14px; }
  .ph__ajouter-suite { display: none; }
  .ph__classement { margin-top: 16px; border-radius: 22px; border-top: 1px solid rgba(246, 246, 246, .09); padding: 20px 14px 14px; }
  .ph-ligne { grid-template-columns: 44px 30px minmax(0, 1fr) auto; gap: 10px; padding: 0 10px 0 4px; }
  .ph-ligne__photo { width: 30px; height: 30px; }
  .ph__rang b { font-size: 30px; }
}

/* Réduire les animations : changements instantanés */
@media (prefers-reduced-motion: reduce) {
  .ph__mot.is-change, .ph__badge.is-change, .ph__panneau.is-montre, .ph__fenetre.is-change, .ph__ajouter.is-tape { animation: none; }
  .ph__delta.is-on { animation: none; opacity: 1; }
  .ph__contenu, .ph__appel { transition: none; }
}

/* =========================================================
   5d. Badges — « La collection » (validée le 20/10/2026, D25)
   Le +300 compte de 1 à 300 à son entrée dans l'écran (JS).
   Les deux rangées qui défilent restent l'identité de la section ;
   elles deviennent un sélecteur : catégories au-dessus, fiche du badge en dessous.
   Pause : survol, focus clavier, appui tactile, bouton Pause.
   Réduire les animations : rangées immobiles, défilables au doigt / à la molette.
   ========================================================= */
.bc h4, .bc p { margin: 0; }
.bc {
  --bt: #3D86FF;
  --gd: #8E8E93;
  --tuile: 120px;
  --ressort: linear(0, .058, .204, .4, .611, .81, .978, 1.105, 1.187, 1.227, 1.232, 1.21, 1.17, 1.122, 1.074, 1.029, .993, .967, .952, .946, .947, .954, .964, .976, .987, .996, 1.004, 1.009, 1);
  margin-top: clamp(110px, 12vw, 170px);
  border-top: 1px solid var(--trait);
  padding-top: clamp(48px, 5vw, 72px);
}

/* ---------- En-tête : titre + le nombre ---------- */
.bc__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; align-items: end; }
.bc__titres { display: grid; gap: 22px; max-width: 760px; }
.bc .eyebrow { line-height: 1.2; }
.bc__titre { font: 700 clamp(38px, 4.6vw, 64px)/1.02 var(--affiche); letter-spacing: -.035em; color: var(--blanc); text-wrap: balance; }
.bc__accent { font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.12em; letter-spacing: -.005em; color: var(--bleu); }
.bc__chapeau { max-width: 600px; color: #D9D9DD; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }

.bc__compte { display: grid; justify-items: end; gap: 12px; text-align: right; }
.bc__nombre { display: grid; justify-items: end; gap: 10px; line-height: 1; }
.bc__chiffre {
  display: inline-flex; align-items: baseline;
  font: 800 clamp(88px, 8.6vw, 128px)/.9 var(--affiche); letter-spacing: -.05em;
  transform-origin: 100% 70%;
}
.bc__signe { color: var(--bleu); margin-right: .04em; text-shadow: 0 0 34px rgba(0, 98, 245, .55); }
.bc__valeur {
  padding-right: .06em; text-align: left; font-variant-numeric: tabular-nums;
  color: var(--bleu); text-shadow: 0 0 34px rgba(0, 98, 245, .55);
}
.bc__unite { font: 600 clamp(17px, 1.5vw, 20px)/1.2 var(--texte); color: var(--blanc); }
/* Le compte : de 1 à 300, avec un léger zoom qui se pose (piloté par le JS) */
.bc__nombre.is-compte .bc__chiffre { animation: bc-zoom 1.2s var(--ease) both; }
.bc__nombre.is-compte .bc__unite { animation: bc-fondu .5s .6s var(--ease) both; }
@keyframes bc-zoom {
  0% { transform: scale(.82); opacity: 0; }
  12% { opacity: 1; }
  78% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---------- Catégories ---------- */
.bc__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin: clamp(44px, 5vw, 64px) 0 26px; }
.bc__filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-filtre {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(246, 246, 246, .14); background: rgba(246, 246, 246, .03);
  color: #D9D9DD; font: 600 15px/1.2 var(--texte);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.bc-filtre small { font: 600 12px/1 var(--texte); color: var(--gd); font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
.bc-filtre:hover { border-color: rgba(246, 246, 246, .32); color: var(--blanc); }
.bc-filtre:active { transform: scale(.97); }
.bc-filtre[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bc-filtre[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }

.bc__legende { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--texte); color: var(--gris); }
.bc__puce { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(246, 246, 246, .4); margin-left: 6px; }
.bc__puce--ok { margin-left: 0; border: 0; background: var(--bt); box-shadow: 0 0 10px rgba(61, 134, 255, .7); }

/* ---------- Les deux rangées ---------- */
.bc__defile {
  position: relative;
  display: grid; gap: 6px;
  margin: 0 calc(-1 * var(--gouttiere));
  transition: opacity .25s var(--ease);
}
.bc__defile.is-change { opacity: 0; }
.bc__rang {
  overflow: hidden;
  padding: 10px 0 30px; /* place pour le nom qui apparaît sous le badge survolé */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bc__piste {
  display: flex; gap: 18px; width: max-content; padding: 0 9px;
  animation: bc-defile var(--duree, 60s) linear infinite;
  will-change: transform;
}
.bc__rang--inverse .bc__piste { animation-direction: reverse; }
.bc__defile.is-pause .bc__piste,
.bc__defile.is-hors-ecran .bc__piste { animation-play-state: paused; }
@keyframes bc-defile { to { transform: translateX(-50%); } }

.bc-tuile { position: relative; flex: none; }
.bc-tuile__btn {
  appearance: none; cursor: pointer; padding: 14px; margin: 0;
  width: var(--tuile); height: var(--tuile);
  display: grid; place-items: center;
  border-radius: 26px; background: #0B0B12; border: 1px solid var(--trait);
  transition: transform .45s var(--ressort), border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);
}
.bc-tuile__btn img { width: 100%; height: 100%; object-fit: contain; transition: filter .45s var(--ease), opacity .45s var(--ease); }
.bc-tuile__nom {
  position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 4px;
  white-space: nowrap; pointer-events: none;
  font: 600 13px/1 var(--texte); color: var(--blanc);
  opacity: 0; transition: opacity .2s var(--ease), translate .3s var(--ease);
}
.bc-tuile__cadenas {
  position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(1, 0, 20, .82); border: 1px solid rgba(246, 246, 246, .18); color: #D9D9DD;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bc-tuile__cadenas svg, .bc-fiche__cadenas svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Verrouillé : gris, comme dans l'app. Au survol, la couleur revient à moitié : « il pourrait être à toi ». */
.bc-tuile.is-verrouille img { filter: grayscale(1) brightness(.72); opacity: .7; }
.bc-tuile:not(.is-verrouille) .bc-tuile__cadenas { opacity: 0; transform: scale(.6); }

@media (hover: hover) {
  .bc-tuile__btn:hover { transform: translateY(-6px) scale(1.05); border-color: rgba(246, 246, 246, .26); background: #10101A; }
  .bc-tuile__btn:hover + .bc-tuile__nom { opacity: 1; translate: -50% 0; }
  .bc-tuile.is-verrouille .bc-tuile__btn:hover img { filter: grayscale(.45) brightness(.85); opacity: 1; }
}
.bc-tuile__btn:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 26px; }
.bc-tuile__btn:focus-visible + .bc-tuile__nom { opacity: 1; translate: -50% 0; }
.bc-tuile__btn[aria-pressed="true"] {
  border-color: var(--bleu); background: #0B1430;
  box-shadow: 0 0 0 1px var(--bleu), 0 14px 40px -12px rgba(0, 98, 245, .7);
}
.bc-tuile.is-eclat .bc-tuile__btn { animation: bc-eclat-tuile .9s var(--ease); }
@keyframes bc-eclat-tuile { 30% { box-shadow: 0 0 0 1px var(--bleu), 0 0 46px rgba(61, 134, 255, .85); } }

.bc__pause {
  position: absolute; right: var(--gouttiere); bottom: -10px; z-index: 1;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(1, 0, 20, .7); border: 1px solid rgba(246, 246, 246, .14);
  color: var(--gris); font: 600 12px/1 var(--texte);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.bc__pause:hover { color: var(--blanc); border-color: rgba(246, 246, 246, .32); }
.bc__pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bc__pause .bc__pause-lecture { display: none; fill: currentColor; stroke: none; }
.bc__pause[aria-pressed="true"] .bc__pause-ii { display: none; }
.bc__pause[aria-pressed="true"] .bc__pause-lecture { display: inline; }

/* ---------- La fiche du badge ---------- */
.bc-fiche {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  max-width: 980px; margin: clamp(28px, 3vw, 40px) auto 0;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 4vw, 52px);
  border-radius: 32px;
  background:
    radial-gradient(70% 90% at 18% 50%, rgba(0, 98, 245, .16), rgba(0, 98, 245, 0) 70%),
    linear-gradient(180deg, #0B0A1F, #07061A);
  border: 1px solid rgba(246, 246, 246, .08);
}
.bc-fiche__visuel { position: relative; width: min(100%, 210px); justify-self: center; aspect-ratio: 551 / 600; }
.bc-fiche__img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: filter .6s var(--ease); }
.bc-fiche__halo {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 98, 245, .45), rgba(0, 98, 245, 0));
  opacity: .8; transition: opacity .6s var(--ease);
}
/* Le reflet : une bande de lumière découpée à la forme exacte du badge (masque = le visuel lui-même) */
.bc-fiche__reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 65%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: var(--masque) center / contain no-repeat; mask: var(--masque) center / contain no-repeat;
  mix-blend-mode: overlay; opacity: 0;
}
.bc-fiche__cadenas {
  position: absolute; left: 50%; bottom: -6px; translate: -50% 0;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #0B0A1F; border: 1px solid rgba(246, 246, 246, .22); color: var(--blanc);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.bc-fiche__cadenas svg { width: 16px; height: 16px; }
.bc-fiche:not(.is-verrouille) .bc-fiche__cadenas { opacity: 0; transform: translateY(-14px) scale(.6); }
.bc-fiche.is-verrouille .bc-fiche__img { filter: grayscale(1) brightness(.5); }
.bc-fiche.is-verrouille .bc-fiche__halo { opacity: 0; }

.bc-fiche__texte { display: grid; gap: 14px; justify-items: start; align-content: center; }
.bc-fiche__meta { display: flex; gap: 8px; font: 600 13px/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--bt); }
.bc-fiche__meta span:last-child { color: var(--gris); }
.bc-fiche__nom { margin: 0; font: 700 clamp(30px, 3.4vw, 44px)/1.05 var(--affiche); letter-spacing: -.03em; color: var(--blanc); }
.bc-fiche__nom:focus { outline: none; }
.bc-fiche__condition { padding-left: 16px; border-left: 2px solid var(--bleu); }
.bc-fiche__label { font: 600 12px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.bc-fiche__raison { font: 600 clamp(18px, 1.7vw, 22px)/1.35 var(--texte); color: var(--blanc); text-wrap: pretty; }
.bc-fiche__citation { font: 500 16px/1.55 var(--texte); color: var(--gris); max-width: 460px; text-wrap: pretty; }
.bc-fiche__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.bc-fiche__etat { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--texte); color: var(--blanc); }
.bc-fiche__etat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bt); box-shadow: 0 0 10px rgba(61, 134, 255, .7); }
.bc-fiche.is-verrouille .bc-fiche__etat { color: var(--gris); }
.bc-fiche.is-verrouille .bc-fiche__etat::before { background: none; border: 1.5px solid rgba(246, 246, 246, .4); box-shadow: none; }
.bc-fiche__debloquer {
  appearance: none; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--bleu);
  background: rgba(0, 98, 245, .12); color: var(--blanc); font: 600 14px/1 var(--texte);
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.bc-fiche__debloquer:hover { background: var(--bleu); }
.bc-fiche__debloquer:active { transform: scale(.97); }

/* Changement de badge : le visuel arrive avec un léger ressort, le texte en fondu */
.bc-fiche.is-arrivee .bc-fiche__visuel { animation: bc-arrivee .55s var(--ressort); }
.bc-fiche.is-arrivee .bc-fiche__texte { animation: bc-fondu .35s var(--ease); }
@keyframes bc-arrivee { from { transform: scale(.88); opacity: .3; } }
@keyframes bc-fondu { from { opacity: 0; transform: translateY(6px); } }

/* Déblocage : la couleur remonte, le reflet traverse, le halo respire une fois, le cadenas s'envole */
.bc-fiche.is-deblocage .bc-fiche__img { transition: filter 1s var(--ease); }
.bc-fiche.is-deblocage .bc-fiche__visuel { animation: bc-souffle 1.1s var(--ressort); }
.bc-fiche.is-deblocage .bc-fiche__reflet { animation: bc-reflet 1.1s .25s var(--ease) both; }
.bc-fiche.is-deblocage .bc-fiche__halo { animation: bc-halo 1.2s var(--ease); }
@keyframes bc-souffle { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes bc-reflet { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes bc-halo { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: .8; transform: scale(1); } }

/* La série : quand le badge fait partie d'une progression du catalogue */
.bc-serie { display: grid; gap: 10px; margin-top: 6px; width: 100%; padding-top: 16px; border-top: 1px solid rgba(246, 246, 246, .08); }
.bc-serie[hidden] { display: none; }
.bc-serie__liste { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-serie__pas {
  appearance: none; cursor: pointer; display: grid; justify-items: center; gap: 5px; width: 64px; padding: 6px 2px 7px;
  border-radius: 14px; border: 1px solid transparent; background: none; color: var(--gris); font: 600 12px/1 var(--texte);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bc-serie__pas img { width: 34px; height: auto; transition: filter .3s var(--ease); }
.bc-serie__pas.is-verrouille img { filter: grayscale(1) brightness(.7); opacity: .75; }
.bc-serie__pas:hover { background: rgba(246, 246, 246, .05); color: var(--blanc); }
.bc-serie__pas[aria-current="true"] { border-color: rgba(0, 98, 245, .7); background: rgba(0, 98, 245, .12); color: var(--blanc); }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 899px) {
  .bc__tete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bc__compte { justify-items: start; text-align: left; grid-template-columns: auto; }
  .bc__nombre { justify-items: start; }
  .bc__chiffre { transform-origin: 0 70%; }
}
@media (max-width: 699px) {
  .bc { --tuile: 104px; }
  /* Le nombre sur une ligne : +300 à gauche, les mots à droite */
  .bc__nombre { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 14px; }
  .bc__chiffre { font-size: 84px; }
  .bc__unite { padding-bottom: 10px; }
  /* Catégories : une ligne qu'on fait glisser au doigt */
  .bc__barre { margin-top: 36px; }
  .bc__filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere); scroll-padding-inline: var(--gouttiere); }
  .bc__filtres::-webkit-scrollbar { display: none; }
  .bc-filtre { flex: none; padding: 9px 14px; font-size: 14px; }
  .bc-tuile__btn { border-radius: 22px; padding: 10px; }
  .bc__piste { gap: 12px; }
  .bc__pause { bottom: -14px; }
  .bc-fiche { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 22px 30px; border-radius: 26px; text-align: left; }
  .bc-fiche__visuel { width: min(62%, 200px); }
}

/* ---------- Réduire les animations : plus de défilement automatique ---------- */
@media (prefers-reduced-motion: reduce) {
  .bc__piste { animation: none !important; }
  .bc__rang { overflow-x: auto; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
  .bc__piste [data-clone] { display: none; }
  .bc__pause { display: none; }
}

/* =========================================================
   6. FAQ (refonte du 20/10/2026, en relecture)
   Ordinateur : en-tête collé à gauche, 9 questions numérotées à droite.
   Ouverture : la hauteur s'anime (js/main.js, bloc « FAQ »), le + devient −, le numéro et le trait du bas
   passent au bleu. Les liens sont des boutons fins bordés de bleu, toujours visibles.
   Sans JavaScript ou en « réduire les animations » : ouverture native, sans effet.
   ========================================================= */
.faq {
  --bleu-texte: #3D86FF;
  --gris-doux: #8E8E93;
  background: var(--nuit);
  padding: clamp(110px, 13vw, 170px) 0 clamp(48px, 5vw, 80px);
}
.faq .eyebrow { line-height: 1.2; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 6vw, 96px); align-items: start; }
.faq__tete { position: sticky; top: var(--ancre); display: grid; gap: 22px; }
.faq__titre { font: 700 clamp(40px, 4.4vw, 64px)/1.02 var(--affiche); letter-spacing: -.035em; color: var(--blanc); text-wrap: balance; }
.faq__accent { display: block; font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.12em; line-height: 1.06; letter-spacing: -.005em; color: var(--bleu); }
.faq__aside { color: var(--gris); font-size: 17px; }
.faq__contact {
  color: var(--blanc); font-weight: 600;
  text-decoration: underline 1.5px var(--bleu); text-underline-offset: 5px;
  transition: color .2s;
}
.faq__contact:hover { color: var(--bleu-texte); }

.faq__list { border-top: 1px solid var(--trait); }
.qa { position: relative; border-bottom: 1px solid var(--trait); }
/* Le trait du bas passe au bleu sous la question ouverte */
.qa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bleu);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.qa[open]:not(.is-fermeture)::after { transform: scaleX(1); }

.qa summary {
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; column-gap: 16px; align-items: baseline;
  padding: 26px 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__num { font: 600 13px/1 var(--texte); letter-spacing: .08em; color: var(--gris-doux); font-variant-numeric: tabular-nums; transition: color .3s; }
.qa__q { font: 600 clamp(18px, 1.45vw, 21px)/1.35 var(--texte); letter-spacing: -.01em; color: #E4E4E8; text-wrap: pretty; transition: color .2s; }
.qa summary:hover .qa__q, .qa[open] .qa__q { color: #fff; }
.qa[open]:not(.is-fermeture) .qa__num { color: var(--bleu-texte); }
.qa__icone {
  align-self: center; position: relative; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--contour); transition: background-color .3s, border-color .3s;
}
.qa__icone::before, .qa__icone::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; border-radius: 1px;
  translate: -50% -50%; background: var(--blanc); transition: rotate .4s var(--ease);
}
.qa__icone::after { rotate: 90deg; }
.qa summary:hover .qa__icone { border-color: #6A6A72; }
.qa[open]:not(.is-fermeture) .qa__icone { background: var(--bleu); border-color: var(--bleu); }
.qa[open]:not(.is-fermeture) .qa__icone::after { rotate: 0deg; }

/* La réponse */
.qa__a { overflow: hidden; }
.qa__corps { display: grid; gap: 12px; max-width: 680px; padding: 0 48px 32px 60px; }
.qa__corps p { color: #C4C4CA; font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.qa__corps b { color: var(--blanc); font-weight: 700; }
.qa[open] .qa__corps { animation: qa-entree .5s var(--ease) both; }
.qa.is-fermeture .qa__corps { opacity: 0; transition: opacity .18s; }
@keyframes qa-entree { from { opacity: 0; transform: translateY(-8px); } }

/* Les liens : visibles d'un coup d'œil */
.qa__lien {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 8px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(0, 98, 245, .6);
  font: 600 15px/1 var(--texte); color: var(--blanc);
  transition: background-color .25s, border-color .25s;
}
.qa__lien svg { width: 16px; height: 16px; fill: none; stroke: var(--bleu-texte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease); }
a.qa__lien:hover { background: rgba(0, 98, 245, .16); border-color: var(--bleu); }
a.qa__lien:hover svg { translate: 3px 0; }
.qa__lien.is-soon { border-color: var(--contour); color: var(--gris); cursor: default; }
.qa__bientot { padding-left: 10px; border-left: 1px solid var(--contour); font: 600 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-doux); }

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__tete { position: static; }
}
@media (max-width: 699px) {
  .qa summary { grid-template-columns: 30px minmax(0, 1fr) 30px; column-gap: 12px; padding: 22px 0; }
  .qa__icone { width: 30px; height: 30px; }
  .qa__corps { padding: 0 0 28px 42px; }
  .qa__corps p { font-size: 16px; }
}

/* ---------- Formulaire liste d'attente (maquette, aucun envoi) ---------- */
.waitlist { display: grid; gap: 12px; width: 100%; max-width: 520px; }
.waitlist__field {
  display: flex; gap: 6px; width: 100%;
  padding: 6px;
  border-radius: 18px;
  background: rgba(246, 246, 246, .04);
  border: 1px solid var(--contour);
  transition: border-color .25s, box-shadow .25s;
}
.waitlist__field:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(0, 98, 245, .15); }
.waitlist input[type=email] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--blanc);
  font: 500 16px/1 var(--texte);
  padding: 0 14px;
}
.waitlist input::placeholder { color: #7C7C82; }
.waitlist__hint { font: 500 13px/1.4 var(--texte); color: #8A8A90; padding-left: 4px; min-height: 18px; }
.waitlist.is-error .waitlist__field { border-color: var(--erreur); }
.waitlist.is-error .waitlist__hint { color: var(--erreur); }
.waitlist.is-done .waitlist__field { border-color: var(--succes); }
.waitlist.is-done .waitlist__hint { color: var(--succes); }
/* Liste pas encore ouverte (js/config.js) : information neutre, ni erreur ni succès */
.waitlist.is-ferme .waitlist__field { border-color: rgba(0, 98, 245, .55); }
.waitlist.is-ferme .waitlist__hint { color: #D9D9DD; }
.waitlist.is-envoi .btn { opacity: .7; cursor: progress; }

/* =========================================================
   7. REJOINDRE · « Le billet » (validé le 20/10/2026, D26)
   Le billet est une vraie photo détourée (assets/app/fin/billet-photo.webp, 1389 × 746, fond transparent).
   La même image sert deux fois : le corps (à gauche de la perforation) et le talon (à droite), pour que
   le talon puisse se détacher à la validation. L'e-mail s'écrit à l'encre dans la zone blanche ; les textes
   suivent la taille du billet (unités cqw). Les états cachés d'entrée n'existent qu'avec .f3-js
   (posée par js/main.js) : sans JavaScript, tout est affiché.
   ========================================================= */
.f3, .f3-pied {
  --bleu-texte: #3D86FF;   /* bleu éclairci pour les petits textes (6:1 sur le bleu nuit) */
  --gris-doux: #8E8E93;
  --ressort: linear(0, 0.022, 0.074, 0.145, 0.226, 0.311, 0.396, 0.478, 0.554, 0.624, 0.687, 0.742, 0.79, 0.832, 0.867, 0.896, 0.921, 0.941, 0.957, 0.97, 0.98, 0.988, 0.994, 0.998, 1.001, 1.003, 1.005, 1.005, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.002, 1);
  --sortie: cubic-bezier(.22, 1, .36, 1);
}
.f3 { position: relative; isolation: isolate; overflow-x: clip; background: var(--nuit); padding: clamp(64px, 7vw, 112px) 0 clamp(120px, 12vw, 180px); }
.f3::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; right: -5%; top: 10%; width: 70%; height: 90%;
  background: radial-gradient(closest-side, rgba(0, 98, 245, .14), rgba(0, 98, 245, 0));
}
.f3 .eyebrow { line-height: 1.2; }
.f3__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 104px); row-gap: 56px; align-items: center; }
.f3__tete { display: grid; gap: 22px; justify-items: start; }
.f3__titre { font: 700 clamp(48px, 6vw, 92px)/1 var(--affiche); letter-spacing: -.04em; color: var(--blanc); }
.f3__accent { display: block; font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.12em; letter-spacing: -.005em; color: var(--bleu); }
.f3__chapeau { max-width: 440px; color: #D9D9DD; font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; line-height: 1.55; text-wrap: pretty; }

.f3-form { display: grid; gap: 14px; justify-items: start; }
.f3__aide { max-width: 640px; padding-left: 4px; min-height: 18px; font: 500 13px/1.45 var(--texte); color: #A2A2AA; }
.f3-form.is-error .f3__aide { color: #FF6B61; }
.f3-form.is-done .f3__aide { color: #6FD68A; }
.f3-form.is-ferme .f3__aide { color: #D9D9DD; }
.f3__reset {
  appearance: none; border: 0; background: none; padding: 6px 0; cursor: pointer; justify-self: start;
  font: 500 13px/1.3 var(--texte); color: var(--gris-doux); text-decoration: underline; text-underline-offset: 3px;
}
.f3__reset:hover { color: var(--blanc); }

/* Le billet : posé légèrement de travers, il se redresse quand on s'en occupe et s'incline vers la souris (6° au plus) */
.f3-billet {
  position: relative; width: 100%; max-width: 760px; aspect-ratio: 1389 / 746; container-type: inline-size;
  filter: drop-shadow(0 44px 46px rgba(0, 0, 0, .6)) drop-shadow(0 14px 50px rgba(0, 98, 245, .28));
  rotate: -1.6deg;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: rotate .7s var(--ressort), translate .8s var(--sortie), opacity .6s var(--ease), transform .6s var(--ease);
}
.f3-billet.is-incline { transition: rotate .7s var(--ressort), transform .12s linear; }
.f3-billet:hover, .f3-billet:focus-within, .f3-form.is-done .f3-billet { rotate: 0deg; }
.f3-js .f3-form:not(.is-visible) .f3-billet { opacity: 0; translate: 0 48px; rotate: -6deg; }
.f3-form.is-error .f3-billet { animation: f3-refus .4s var(--ease); }
@keyframes f3-refus { 0%, 100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 2px; } }

.f3-billet__corps, .f3-billet__talon { position: absolute; inset: 0; }
.f3-billet__photo, .f3-billet__talon::before {
  content: ""; position: absolute; inset: 0;
  background: url("../../assets/app/fin/billet-photo.webp") 0 0 / 100% 100% no-repeat;
}
.f3-billet__photo { clip-path: polygon(0 0, 66.1% 0, 66.7% 100%, 0 100%); }
.f3-billet__talon::before { clip-path: polygon(66.1% 0, 100% 0, 100% 100%, 66.7% 100%); }
.f3-billet__reflet { /* reflet limité à la forme du billet */
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(48cqw circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%);
  -webkit-mask: url("../../assets/app/fin/billet-photo.webp") 0 0 / 100% 100% no-repeat;
  mask: url("../../assets/app/fin/billet-photo.webp") 0 0 / 100% 100% no-repeat;
  transition: opacity .5s var(--ease);
}
.f3-billet:hover .f3-billet__reflet { opacity: 1; }

/* En-tête posé sur la photo du stade */
.f3-billet__entete { position: absolute; z-index: 2; left: 20%; right: 36.5%; top: 8.5%; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
/* Logo blanc posé sur la bande bleue de gauche, comme un imprimé du billet */
.f3-billet__logo { position: absolute; z-index: 2; left: 4.6%; top: 13%; width: 9.5cqw; height: auto; rotate: -1.2deg; filter: drop-shadow(0 1px 6px rgba(0, 0, 30, .45)); }
.f3-billet__type { font: 600 clamp(9px, 1.45cqw, 11px)/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* Zone blanche : imprimé à l'encre, légèrement incliné comme le billet */
.f3-billet__infos, .f3-billet__titulaire { position: absolute; z-index: 2; left: 5.5%; right: 37.5%; margin: 0; rotate: -1.4deg; }
.f3-billet__infos { top: 57%; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 2cqw; }
.f3-billet__infos dt { font: 600 clamp(8px, 1.15cqw, 10px)/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #5E6684; }
.f3-billet__infos dd { margin: .7cqw 0 0; font: 600 clamp(11px, 1.9cqw, 15px)/1.25 var(--affiche); letter-spacing: -.01em; color: #0A0F2C; }
.f3-billet__titulaire { top: 69.5%; display: grid; gap: .9cqw; padding-top: 1.7cqw; border-top: 1px dashed rgba(10, 15, 44, .3); }
.f3-billet__titulaire label { font: 700 clamp(9px, 1.3cqw, 10.5px)/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #2E3555; cursor: text; }
.f3-billet__titulaire input {
  width: 100%; padding: .7cqw 1.4cqw .9cqw; margin-left: -1.4cqw; border: 0; border-bottom: 2px solid rgba(10, 15, 44, .45); border-radius: .8cqw .8cqw 0 0;
  outline: 0; background: rgba(250, 249, 245, .82); color: #050A24; caret-color: var(--bleu);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
  font: 600 clamp(15px, 3.1cqw, 25px)/1.2 var(--affiche); letter-spacing: -.01em;
  transition: border-color .25s;
}
.f3-billet__titulaire input::placeholder { color: #4A5170; opacity: 1; }
.f3-billet__titulaire input:focus { border-bottom-color: var(--bleu); }
.f3-billet__titulaire input:focus-visible { outline: 0; }
.f3-billet__titulaire input[readonly] { border-bottom-color: transparent; background: transparent; box-shadow: none; }
.f3-form.is-error .f3-billet__titulaire input { border-bottom-color: var(--erreur); }

/* Le tampon, appliqué à l'encre après validation */
.f3-billet__tampon {
  position: absolute; z-index: 3; right: 38.5%; bottom: 25%; pointer-events: none;
  padding: 9px 14px 8px; border: 2.5px solid #0B46C9; border-radius: 9px;
  font: 800 clamp(11px, 2cqw, 15px)/1 var(--affiche); letter-spacing: .14em; text-transform: uppercase; color: #0B46C9;
  box-shadow: inset 0 0 0 3px rgba(11, 70, 201, .14); mix-blend-mode: multiply;
  opacity: 0; rotate: -12deg; scale: 1.8;
}
.f3-form.is-done .f3-billet__tampon { opacity: .85; scale: 1; transition: scale .45s var(--ressort) .45s, opacity .2s .45s; }

/* Le talon : la photo porte déjà le QR et le code-barres ; seul le bouton s'ajoute, sous le QR */
.f3-billet__talon { pointer-events: none; transform-origin: 66.7% 100%; transition: transform .8s var(--sortie); }
.f3-billet__btn {
  position: absolute; left: 68.9%; width: 17%; top: 64%; height: 10.5cqw; padding: 0 1cqw;
  appearance: none; border: 0; cursor: pointer; pointer-events: auto;
  border-radius: 1.4cqw; background: var(--bleu); color: #fff; font: 700 clamp(11px, 1.75cqw, 15px)/1.2 var(--texte);
  box-shadow: 0 10px 24px -10px rgba(0, 98, 245, .8);
  transition: background-color .2s, transform .2s var(--ease), box-shadow .3s;
}
.f3-billet__btn:hover { background: #1A72FF; box-shadow: 0 14px 30px -10px rgba(0, 98, 245, 1); }
.f3-billet__btn:active { transform: scale(.97); }
.f3-billet__btn:focus-visible { outline-color: #fff; }
.f3-form.is-envoi .f3-billet__libelle { opacity: 0; }
.f3-form.is-done .f3-billet__btn { background: #0E3A8C; box-shadow: none; cursor: default; }
/* Validation : le talon se détache */
.f3-form.is-done .f3-billet__talon { transform: translate(2.4cqw, 1.2cqw) rotate(7deg); }

.f3-roue {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  opacity: 0; pointer-events: none;
}
.is-envoi .f3-roue { opacity: 1; animation: f3-roue .7s linear infinite; }
@keyframes f3-roue { to { rotate: 360deg; } }

/* =========================================================
   FOOTER · « le talon » du site
   ========================================================= */
.f3-pied { position: relative; background: #07061F; padding: clamp(56px, 6vw, 80px) 0 clamp(28px, 4vw, 40px); }
.f3-pied::before { /* bord dentelé : demi-cercles découpés dans le haut, comme un billet détaché */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: radial-gradient(circle 6px at 50% 0, var(--nuit) 98%, transparent) 0 0 / 22px 7px repeat-x;
}
.f3-pied__haut { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) auto; column-gap: clamp(40px, 6vw, 96px); row-gap: 44px; align-items: start; }
.f3-pied__marque { display: grid; gap: 20px; justify-items: start; }
.f3-pied__marque img { width: 64px; height: auto; }
/* Slogan : « Tes stades. » en blanc, « Gravés pour toujours. » en bleu 90 Away (règle de marque, comme le Hero) */
.f3-pied__slogan { font: 700 clamp(20px, 1.7vw, 24px)/1.15 var(--affiche); letter-spacing: -.025em; color: var(--blanc); }
.f3-pied__slogan span { display: block; }
.f3-pied__grave { color: var(--bleu); }
.f3-pied__liens { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 36px clamp(28px, 4vw, 64px); }
.f3-pied__titre { margin-bottom: 18px; font: 600 12px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-doux); }
.f3-pied__col ul { display: grid; gap: 12px; }
.f3-pied__col a {
  display: inline-flex; align-items: center; gap: 10px; padding: 2px 0;
  font: 500 15px/1.4 var(--texte); color: #E0E0E6;
  background: linear-gradient(var(--bleu), var(--bleu)) 0 100% / 0 1px no-repeat; /* soulignement qui se trace au survol */
  transition: color .2s, background-size .35s var(--ease);
}
.f3-pied__col a:hover { color: #fff; background-size: 100% 1px; }
.f3-reseau svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--gris); transition: color .2s, scale .3s var(--ease); }
.f3-reseau .f3-reseau__point, .f3-reseau .f3-reseau__plein { fill: currentColor; stroke: none; }
.f3-reseau:hover svg, .f3-reseau:focus-visible svg { color: var(--bleu-texte); scale: 1.08; }
.f3-bientot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #7E7E86; font-size: 15px; line-height: 1.4; padding: 2px 0; cursor: default; white-space: nowrap; }
.f3-bientot small {
  font: 600 9.5px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 6px 3px; border-radius: 5px; border: 1px solid #34343C; color: var(--gris-doux);
}
.f3-pied__remonter {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--contour); color: var(--blanc); transition: border-color .25s, background-color .25s;
}
.f3-pied__remonter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease); }
.f3-pied__remonter:hover { border-color: var(--bleu); background: rgba(0, 98, 245, .12); }
.f3-pied__remonter:hover svg { translate: 0 -2px; }
.f3-pied__bas { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(48px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--trait); font-size: 13px; color: #8A8A90; }
.f3-pied__mail { margin-left: auto; }
.f3-pied__mail a { transition: color .2s; }
.f3-pied__mail a:hover { color: var(--blanc); }

@media (max-width: 899px) {
  .f3__grille { grid-template-columns: minmax(0, 1fr); }
  .f3-pied__haut { grid-template-columns: minmax(0, 1fr) auto; }
  .f3-pied__liens { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  /* Mobile : le billet reste à l'horizontale ; infos masquées, bouton sous le billet */
  .f3-billet { rotate: -1deg; margin-bottom: 76px; }
  .f3-billet__type, .f3-billet__infos { display: none; }
  .f3-billet__entete { top: 9%; }
  .f3-billet__titulaire { top: 60%; padding-top: 0; border-top: 0; }
  .f3-billet__tampon { bottom: 34%; }
  .f3-billet__btn { left: 0; width: 100%; top: calc(100% + 20px); height: 56px; border-radius: 12px; font-size: 15px; }
  .f3-form.is-done .f3-billet__talon { transform: none; }
  .f3-pied__marque img { width: 56px; }
  .f3-pied__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-pied__col:last-child { grid-column: 1 / -1; }
  .f3-pied__col:last-child ul { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .f3-pied__col a, .f3-bientot { min-height: 40px; }
  .f3-pied__mail { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .f3 *, .f3-pied * { transition: none !important; animation: none !important; }
  .f3-js .f3-form .f3-billet { opacity: 1 !important; translate: none !important; }
  .is-envoi .f3-roue { border-color: #fff; }
}

/* =========================================================
   ANIMATIONS D'APPARITION
   ========================================================= */
.load-in { opacity: 0; transform: translateY(18px); animation: entree .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }
@keyframes entree { to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 100ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav__links { gap: 24px; }
}
@media (max-width: 699px) {
  .nav__links, .nav__inner > .btn--small { display: none; }
  .nav__inner { padding: 0 8px 0 16px; }
  .nav__toggle {
    display: grid; place-content: center; gap: 6px; margin-left: auto;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--contour); background: rgba(1, 0, 20, .6);
    cursor: pointer;
  }
  .nav__toggle span:not(.sr-only) { width: 18px; height: 1.5px; background: var(--blanc); transition: transform .3s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
  .nav__mobile:not([hidden]) {
    display: grid; gap: 4px;
    margin: 8px auto 0; max-width: var(--wrap);
    padding: 12px; border-radius: 18px;
    background: rgba(1, 0, 20, .94); border: 1px solid var(--trait);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .nav__mobile a:not(.btn) { padding: 14px 10px; font: 500 17px/1 var(--texte); border-bottom: 1px solid var(--trait); }
  .nav__mobile .btn { margin-top: 10px; }
  .nav__mobile a[aria-current]:not(.btn) { color: var(--blanc); }
  .nav__mobile a[aria-current]:not(.btn)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--bleu); vertical-align: middle; }
  .nav.is-open .nav__inner { background: rgba(1, 0, 20, .94); border-color: var(--trait); }
}

@media (max-width: 900px) {

  /* Hero : la photo, puis le téléphone en dessous */
  .hero-c__scene { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: visible; }
  .hero-c__photo, .hero-c__voile, .hero-c__copy { grid-area: 1 / 1; position: relative; inset: auto; }
  .hero-c__photo { min-height: 84svh; overflow: clip; } /* le zoom d'entrée reste dans le cadre (sinon la page glisse de côté au chargement) */
  .hero-c__copy { align-self: end; left: auto; bottom: auto; width: auto; padding: 120px var(--gouttiere) 36px; }
  .hero-c .hero-c__phone { grid-area: 2 / 1; position: relative; right: auto; top: auto; margin: 36px auto 0; --w: min(290px, 74vw); }
  .hero-c__title { width: auto; max-width: none; }
  .hero-c__voile { background: linear-gradient(180deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 22%), linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .86) 48%, rgba(10, 10, 10, .8) 64%, rgba(10, 10, 10, .3) 82%, rgba(10, 10, 10, 0) 100%); }
  .hero-c[data-photo="2"] .hero-c__voile,
  .hero-c[data-photo="3"] .hero-c__voile { background: linear-gradient(180deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 22%), linear-gradient(0deg, rgba(10, 10, 10, .97) 0%, rgba(10, 10, 10, .93) 48%, rgba(10, 10, 10, .9) 64%, rgba(10, 10, 10, .3) 82%, rgba(10, 10, 10, 0) 100%); }

  .concept::before { transform: rotate(-26deg); } /* section haute et étroite : le faisceau monte plus droit */

  .section-head--split { grid-template-columns: 1fr; }



}


@media (max-width: 560px) {
  .waitlist__field { flex-direction: column; padding: 6px; }
  .waitlist input[type=email] { min-height: 50px; }
  .waitlist .btn { width: 100%; }
  .proto-banner { font-size: 11px; }
}

/* ---------- Ton histoire sans animation (mobile, « réduire les animations », fenêtre très basse) ----------
   Sous la photo : le texte, puis le téléphone ; apparitions à l'entrée dans l'écran. */
@media (max-width: 900px), (prefers-reduced-motion: reduce), (max-height: 559px) {
  .hero-c__suite { position: relative; grid-area: 2 / 1; display: grid; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(64px, 10vw, 112px) var(--gouttiere) 24px; }
  .hero-c__lueur { -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%); mask-image: linear-gradient(180deg, transparent, #000 18%); }
  .hero-c [data-apparition] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .hero-c [data-apparition].is-visible, .hero-c__phone.is-visible .carte-flottante { opacity: 1; transform: none; }
  .carte-flottante { padding: 9px 15px 9px 9px; gap: 10px; font-size: 14px; }
  .carte-flottante__icone { width: 28px; height: 28px; }
  .carte-flottante--visite { left: -16px; top: -34px; }
  .carte-flottante--points { right: -16px; bottom: -34px; }
  .carte-flottante { transition-delay: .7s; }
  .carte-flottante--points { transition-delay: 1s; }
}
@media (max-width: 900px) {
  .hero-c__histoire-titre { font-size: clamp(31px, 8.2vw, 46px); }
  .hero-c .hero-c__phone { margin: 72px auto 40px; }
}
/* Ordinateur sans animation : la photo en plein écran, puis texte et téléphone côte à côte */
@media (min-width: 901px) and (prefers-reduced-motion: reduce), (min-width: 901px) and (max-height: 559px) {
  .hero-c__scene { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: visible; }
  .hero-c__photo, .hero-c__voile, .hero-c__copy { grid-area: 1 / 1; position: relative; inset: auto; }
  .hero-c__photo { min-height: max(100svh, 640px); }
  .hero-c__copy { align-self: end; margin: 0 0 clamp(40px, 8vh, 88px) var(--bord-g); }
  .hero-c__suite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 96px; padding-bottom: 112px; }
  .hero-c .hero-c__phone { grid-area: 1 / 2; position: relative; right: auto; top: auto; margin: 0 24px 0 0; --w: clamp(260px, 24vw, 320px); }
}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .load-in, .reveal { opacity: 1 !important; transform: none; }
}

/* Inscription directe : accord explicite, non précoché, commun aux deux formulaires. */
.waitlist-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 580px; padding: 3px 4px; color: #B8B8C1; font: 400 13px/1.5 var(--texte); cursor: pointer; }
.waitlist-consent input[type=checkbox] { appearance: auto; accent-color: var(--bleu); flex: 0 0 17px; width: 17px; height: 17px; margin: 1px 0 0; padding: 0; cursor: pointer; }
.waitlist-consent input:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }
.waitlist-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-done .waitlist-consent { opacity: .65; }

/* Information courte, séparée du message de résultat qui change après envoi. */
.waitlist-privacy { max-width: 580px; padding-left: 4px; font: 400 12px/1.6 var(--texte); color: #aeb4c4; }
.waitlist-privacy a { color: #94bbff; text-decoration: underline; text-underline-offset: 3px; }
.waitlist-privacy a:hover { color: white; }
.waitlist-privacy a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.waitlist-verification { width: 100%; min-width: 0; max-width: 580px; }
.waitlist-verification:empty { display: none; }