/* Vitrine ActuFut · prototype de la mission 3 (31/10/2026).
   DA noir, or et blanc (décision de Brandon, 31/10 18h54) : noir profond, or FUT pour les boutons, les prix et les points forts,
   blanc pour les titres ; plus de violet nulle part. La version rouge et or (B) reste dans le code (#version-b), elle n'est plus montrée.
   Mise en page : une colonne pensée pour le téléphone, qui s'ouvre en deux colonnes à partir de 900 px. */
:root {
  --noir: #0A0A0B;
  --carbone: #131316;
  --blanc: #FFFFFF;
  --gris: #8E8E93;
  --gris-clair: #B8B8BE;
  --trait: rgba(255, 255, 255, .08);
  --trait-fort: rgba(255, 255, 255, .16);
  /* L'or des cartes FUT et des récompenses Champions. */
  --or: #DCAA4E;
  --or-clair: #F5DC9A;
  --or-fonce: #A7741F;
  --or-lueur: rgba(220, 170, 78, .36);
  /* Le rouge FUT Champions. */
  --rouge: #E3263F;
  --rouge-sombre: #8E0F22;
  --rouge-fonce: #3A0711;
  --rouge-nuit: #160408;
  /* FUT Champions, son bandeau et les cartes or : or et ambre dans la version A, rouge (et l'or d'avant) dans la version B. */
  --champ-nuit: #120C05;
  --champ-fonce: #2E1E09;
  --champ-voile: rgba(34, 22, 8, .86);
  --champ-transparent: rgba(18, 12, 5, 0);
  --champ-bandeau: linear-gradient(90deg, #171006, #2E1E09 50%, #171006);
  --champ-bandeau-texte: var(--or);
  --champ-bandeau-filet: rgba(227, 38, 63, .75);
  --carte-or: linear-gradient(160deg, #FBE6A2 0%, #E3B65A 36%, #C08A30 68%, #8E6020 100%);
  /* Noir, or et blanc : l'or sert aussi d'accent (boutons, points des titres, repères), le blanc pour le texte. */
  --accent: #DCAA4E;
  --accent-clair: #F5DC9A;
  --accent-lueur: rgba(220, 170, 78, .34);
  --accent-voile: rgba(220, 170, 78, .12);
  --cta: #DCAA4E;
  --cta-clair: #EDC777;
  --cta-ombre: rgba(220, 170, 78, .5);
  --point-logo: #DCAA4E;
  --terrain-fond: #0C0B09;
  --terrain-ligne: rgba(255, 255, 255, .15);
  --panneau-haut: rgba(24, 22, 18, .92);
  --panneau-bas: rgba(11, 10, 9, .94);
  --neige: 255, 250, 240;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --police: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  --gouttiere-g: max(20px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
/* Version B : rouge et or partout, logo blanc. */
:root[data-version="b"] {
  --accent: #E3263F;
  --accent-clair: #FF6B7B;
  --accent-lueur: rgba(227, 38, 63, .42);
  --accent-voile: rgba(227, 38, 63, .16);
  --cta: #E8C46C;
  --cta-clair: #F7E3A8;
  --cta-ombre: rgba(232, 196, 108, .5);
  --point-logo: #FFFFFF;
  --terrain-fond: #170609;
  --terrain-ligne: rgba(232, 196, 108, .17);
  --panneau-haut: rgba(40, 9, 15, .92);
  --panneau-bas: rgba(15, 4, 7, .95);
  --neige: 255, 236, 210;
  --noir: #0D0608;
  --or: #E8C46C;
  --or-clair: #F7E3A8;
  --or-fonce: #B88A2E;
  --or-lueur: rgba(232, 196, 108, .34);
  --champ-nuit: var(--rouge-nuit);
  --champ-fonce: var(--rouge-fonce);
  --champ-voile: rgba(30, 5, 10, .86);
  --champ-transparent: rgba(22, 4, 8, 0);
  --champ-bandeau: linear-gradient(90deg, var(--rouge-sombre), var(--rouge) 50%, var(--rouge-sombre));
  --champ-bandeau-texte: var(--or-clair);
  --champ-bandeau-filet: transparent;
  --carte-or: linear-gradient(160deg, #FCEFB8 0%, #E9C76C 40%, #B98A2E 100%);
}
[data-version="b"] .confiance { background: linear-gradient(180deg, #1C050A, #120407); }
[data-version="b"] .direct, [data-version="b"] .preuves, [data-version="b"] .tutos { background: radial-gradient(90% 60% at 80% 30%, rgba(142, 15, 34, .22), transparent 70%); }
@media (min-width: 900px) {
  :root {
    --gouttiere-g: max(40px, env(safe-area-inset-left, 0px));
    --gouttiere-d: max(40px, env(safe-area-inset-right, 0px));
  }
}
[data-version="a"] .pour-b, [data-version="b"] .pour-a { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
/* Ce qui est masqué le reste, même quand le bloc a son propre display (l'enveloppe des artefacts le faisait pour nous). */
[hidden] { display: none !important; }
html { background: var(--noir); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
/* Le grain de la charte, sur toute la page : jamais un noir plat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--cta); color: var(--noir); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[id] { scroll-margin-top: 76px; }

.evitement {
  position: fixed;
  left: var(--gouttiere-g);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 70;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cta);
  color: var(--noir);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.evitement:focus-visible { transform: none; }

/* Sélecteur de version (prototype seulement). */
.version {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 15px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 10, 11, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.version-titre { margin-right: 4px; font-weight: 500; font-size: 9px; letter-spacing: .28em; color: var(--gris-clair); }
.version button {
  width: 34px;
  height: 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  color: var(--gris-clair);
  transition: background-color .3s, color .3s;
}
.version button[aria-pressed="true"] { background: var(--cta); color: var(--noir); }
@media (min-width: 900px) { .version { top: auto; bottom: 24px; left: 24px; transform: none; } }

/* Typographie : Jost seule, grands écarts d'échelle. */
.info {
  margin: 0;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris);
}
.info b { font-weight: 500; color: var(--blanc); }
.titre-geant {
  margin: 0;
  font-weight: 500;
  font-size: clamp(46px, 12.4vw, 136px);
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.titre-section {
  margin: 16px 0 0;
  font-weight: 500;
  font-size: clamp(36px, 9.6vw, 84px);
  line-height: 1;
  letter-spacing: -.036em;
  text-wrap: balance;
}
.point { color: var(--accent); }
.texte { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--gris-clair); max-width: 36em; }
.texte-blanc { color: var(--blanc); }
.texte-fort { margin: 14px 0 0; font-size: clamp(22px, 5.6vw, 34px); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.petit { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--gris); max-width: 42em; }
@media (min-width: 900px) {
  .info { font-size: 11px; }
  .texte { font-size: 17px; }
}

/* Mots qui montent : chaque mot sort de sa propre fente. */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .14em; margin: -.1em -.02em -.14em; }
.mot > span { display: inline-block; }

/* Boutons : plein (couleur de commande de la version, texte noir), ou trait fin. */
.bouton-plein {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--cta);
  color: var(--noir);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 22px 60px -18px var(--cta-ombre);
  transition: transform .25s var(--ease), background-color .3s;
}
.bouton-plein svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.bouton-plein::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: reflet 6s var(--ease-io) 3s infinite;
}
@keyframes reflet { 0% { transform: translateX(-130%); } 20%, 100% { transform: translateX(130%); } }
.bouton-plein:hover { background: var(--cta-clair); }
.bouton-plein:active { transform: scale(.975); }
.bouton-ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid var(--trait-fort);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: border-color .3s, background-color .3s;
}
.bouton-ligne:hover { border-color: rgba(255, 255, 255, .34); }
.bouton-ligne.fait { border-color: var(--or); color: var(--or-clair); }
.actions { display: grid; }
.actions .bouton-plein { width: 100%; }

/* En-tête : invisible tout en haut de l'ouverture, sombre dès qu'on défile ; une barre d'or suit la lecture. */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gouttiere-d) 12px var(--gouttiere-g);
  border-bottom: 1px solid transparent;
  transition: border-color .45s;
}
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(10, 10, 11, .985);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  transition: opacity .45s;
}
.entete.fond { border-bottom-color: var(--trait); }
.entete.fond::before { opacity: 1; }
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.entete.fond .progression { opacity: 1; }
.progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--or-fonce), var(--or), var(--or-clair)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px var(--or-lueur); }
.entete-logo { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.entete.colle .entete-logo, .menu-ouvert .entete-logo { opacity: 1; transform: none; pointer-events: auto; }
.entete-logo img { width: 84px; height: auto; }
.entete-nav, .entete-commander { display: none; }
.entete-menu {
  position: relative;
  margin-left: auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: rgba(10, 10, 11, .4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.entete-menu span:not(.masque) {
  position: absolute;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blanc);
  transition: transform .45s var(--ease);
}
.entete-menu span:nth-child(1) { transform: translateY(-3.5px); }
.entete-menu span:nth-child(2) { transform: translateY(3.5px); }
.entete-menu[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.entete-menu[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 900px) {
  .entete { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); padding-bottom: 18px; }
  .entete.colle { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 12px; }
  .entete-nav { display: flex; gap: 30px; margin-left: auto; }
  .entete-nav a {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gris-clair);
    transition: color .2s;
  }
  .entete-nav a:hover { color: var(--blanc); }
  .entete-commander {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--cta);
    color: var(--noir);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    transition: background-color .3s;
  }
  .entete-commander:hover { background: var(--cta-clair); }
  .entete-menu { display: none; }
}

/* Menu plein écran (téléphone) : fond opaque, il descend comme un rideau. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) var(--gouttiere-d) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--gouttiere-g);
  background: var(--noir);
  overflow-y: auto;
  animation: rideau .45s var(--ease) both;
}
.menu nav { display: grid; }
.menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
  font-size: clamp(30px, 8.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -.025em;
  animation: monte .6s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms + 60ms);
}
.menu-bas { display: grid; gap: 18px; justify-items: center; animation: monte .6s var(--ease) .35s both; }
.menu-bas .bouton-plein { width: 100%; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes rideau { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes monte { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
html.menu-ouvert, html.menu-ouvert body, html.lecteur-ouvert, html.lecteur-ouvert body { overflow: hidden; }

/* ---------- 1. Ouverture ---------- */
.ouverture {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--noir);
}
.ouverture-fond { position: absolute; inset: 0; z-index: -1; background: #050507; }
[data-version="b"] .ouverture-fond { background: #070203; }
.ouverture-image { position: absolute; inset: 11% 0 0; animation: photo 2.6s var(--ease) both; }
.ouverture-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 36% 0%; }
@keyframes photo { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
.neige { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.balayage { position: absolute; inset: 0; pointer-events: none; animation: balaye 2s var(--ease-io) .15s both; }
.balayage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neige), .95) 30%, rgba(var(--neige), .95) 70%, transparent);
  box-shadow: 0 0 22px 5px var(--accent-lueur);
}
@keyframes balaye { 0% { transform: translateY(-2%); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .8; } 100% { transform: translateY(100%); opacity: 0; } }
.ouverture-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, 0) 16%, rgba(10, 10, 11, 0) 34%, rgba(10, 10, 11, .58) 54%, rgba(10, 10, 11, .93) 76%, var(--noir) 100%);
}
.viseur { position: absolute; inset: calc(env(safe-area-inset-top, 0px) + 74px) 10px 12px; pointer-events: none; }
.viseur i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255, 255, 255, .34); animation: viseur 1s var(--ease) .25s both; }
.viseur i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; transform-origin: 0 0; }
.viseur i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; transform-origin: 100% 0; }
.viseur i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; transform-origin: 0 100%; }
.viseur i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; transform-origin: 100% 100%; }
@keyframes viseur { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
.viseur b { display: none; }

.ouverture-contenu {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 88px) var(--gouttiere-d) calc(env(safe-area-inset-bottom, 0px) + 26px) var(--gouttiere-g);
}

/* La signature s'écrit (le trait), puis le point tombe. */
.signature { position: relative; width: min(300px, 100%); }
.signature::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 40%;
  z-index: -1;
  width: 170%;
  aspect-ratio: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accent-voile), transparent);
  pointer-events: none;
  animation: halo 2.2s var(--ease) 1.3s both;
}
@keyframes halo { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
.autographe { position: relative; width: 100%; aspect-ratio: 3446 / 1271.2; }
.autographe-trait {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: ecrit 1.5s var(--ease-io) .45s both;
}
@keyframes ecrit {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* Point du logo : mêmes cote et diamètre que dans le fichier (cercle r 62 en 3262,7 / -208,6) ; or en A, blanc en B (logo blanc du kit). */
.autographe-point {
  position: absolute;
  left: 95.531%;
  top: 45.188%;
  width: 3.598%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--point-logo);
  animation: tombe .75s var(--rebond) 1.8s both;
}
.autographe-point::after {
  content: "";
  position: absolute;
  inset: -260%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-lueur), transparent);
  opacity: 0;
  animation: eclair 1.4s var(--ease) 1.9s both;
}
@keyframes tombe { from { opacity: 0; transform: translateY(-140%) scale(.2); } to { opacity: 1; transform: none; } }
@keyframes eclair { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
.ligne-logo { margin-top: 12px; font-size: 9.5px; letter-spacing: .38em; color: var(--blanc); animation: ligne 1.4s var(--ease) 1.2s both; }
@keyframes ligne { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .38em; } }
/* Voile sombre derrière la ligne seulement (jamais sur le logo) : elle reste lisible devant les projecteurs. */
.ligne-logo { position: relative; isolation: isolate; width: max-content; max-width: 100%; }
.ligne-logo::before {
  content: "";
  position: absolute;
  inset: -16px -26px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 8, 10, .82), rgba(8, 8, 10, .5) 60%, rgba(8, 8, 10, 0));
}

.ouverture-texte { display: grid; gap: 20px; }
.surtitre { margin-bottom: -6px; animation: monte 1s var(--ease) .85s both; }
.ouverture .titre-geant .mot > span { animation: sort 1.1s var(--ease) both; animation-delay: calc(.95s + var(--i) * 75ms); }
@keyframes sort { from { transform: translateY(110%); } to { transform: none; } }
/* Le point final bat comme l'indicateur « en direct » du suivi. */
.point-direct {
  position: relative;
  display: inline-block;
  width: .155em;
  height: .155em;
  margin-left: .045em;
  border-radius: 50%;
  background: var(--accent);
}
.point-direct > span { position: absolute; opacity: 0; }
.point-direct::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pouls 2.4s var(--ease) 2.6s infinite;
}
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 var(--accent-lueur); }
  70%, 100% { box-shadow: 0 0 0 .34em transparent; }
}
.ouverture-bas { display: grid; gap: 22px; animation: monte 1s var(--ease) 1.55s both; }
.chapo { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--gris-clair); max-width: 31em; text-wrap: pretty; }
.defiler { display: none; }

@media (min-width: 900px) {
  .ouverture { min-height: max(720px, 100svh); }
  .ouverture-image { inset: 0; }
  .ouverture-photo { object-position: 50% 40%; transform: scaleX(-1); }
  .ouverture-voile {
    background:
      linear-gradient(90deg, rgba(10, 10, 11, .86) 0%, rgba(10, 10, 11, .5) 34%, rgba(10, 10, 11, 0) 62%),
      linear-gradient(180deg, rgba(10, 10, 11, .5) 0%, rgba(10, 10, 11, 0) 20%, rgba(10, 10, 11, 0) 50%, rgba(10, 10, 11, .78) 82%, var(--noir) 100%);
  }
  .viseur { inset: 92px 24px 24px; }
  .viseur b {
    display: block;
    position: absolute;
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .32em;
    color: rgba(255, 255, 255, .42);
    white-space: nowrap;
    animation: fondu 1.2s var(--ease) 2.2s both;
  }
  .viseur b:nth-of-type(1) { top: 2px; left: 26px; }
  .viseur b:nth-of-type(2) { top: 2px; right: 26px; }
  .ouverture-contenu { padding-top: 128px; padding-bottom: 64px; }
  .signature { width: 360px; }
  .ouverture-texte { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: end; column-gap: 72px; }
  .ouverture .titre-geant { max-width: 9.6em; }
  .surtitre { grid-column: 1; grid-row: 1; margin-bottom: -10px; }
  .ouverture-texte .titre-geant { grid-column: 1; grid-row: 2; }
  .ouverture-bas { grid-column: 2; grid-row: 2; }
  .actions .bouton-plein { width: auto; justify-self: start; }
  .defiler {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 1px;
    height: 46px;
    overflow: hidden;
    background: linear-gradient(var(--trait-fort), transparent);
    animation: monte 1s var(--ease) 2.2s both;
  }
  .defiler span { position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--or); animation: descend 2.4s var(--ease-io) 2.4s infinite; }
  @keyframes descend { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(46px); opacity: 0; } }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: 120px; }
/* Les lueurs décoratives ne doivent jamais élargir la page. */
.section, .champions, .bandeau-zone, .confiance { overflow-x: hidden; }
@supports (overflow: clip) { .section, .champions, .bandeau-zone, .confiance { overflow-x: clip; } }
.conteneur { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }
@media (min-width: 900px) { .section { padding-block: 176px; } }

/* Apparitions : l'élément est visible au repos ; l'animation part juste avant qu'il entre à l'écran. */
.anime[data-reveal], .anime .mot > span { animation-duration: 1.05s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.anime[data-reveal] { animation-name: monte; animation-delay: calc(var(--i, 0) * 90ms); }
[data-mots].anime .mot > span { animation-name: sort; animation-delay: calc(var(--i) * 55ms); }

/* ---------- 2. Confiance ---------- */
.confiance { position: relative; padding: 40px 0 8px; border-bottom: 1px solid var(--trait); }
.confiance-liste { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
.confiance-liste li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.confiance .ico { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.confiance-liste span { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--gris); }
.confiance-liste b { font-weight: 500; font-size: 14.5px; line-height: 1.25; color: var(--blanc); }
.confiance-paiement { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; padding-bottom: 32px; border-top: 1px solid var(--trait); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-clair); }
.confiance-liste li.anime .ico { animation: dessine 1.4s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); stroke-dasharray: 90; }
@keyframes dessine { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@media (min-width: 900px) {
  .confiance { padding-top: 56px; }
  .confiance-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .confiance-liste b { font-size: 16px; }
}

/* ---------- 3. Suivi en direct ---------- */
.direct { padding-top: 104px; }
.direct::before {
  content: "";
  position: absolute;
  right: -20%;
  top: 10%;
  width: 90%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--accent-voile), transparent 70%);
  pointer-events: none;
}
.direct-grille { display: grid; gap: 44px; }
.ecran { position: relative; width: min(340px, 100%); margin: 0 auto; }
.ecran-cadre {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 36px;
  border: 1px solid var(--trait-fort);
  background: linear-gradient(180deg, var(--panneau-haut) 0%, var(--panneau-bas) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 120px -50px var(--accent-lueur);
}
.ecran-cadre::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 40% at 50% -4%, var(--accent-voile), transparent 72%); }
.etiquette {
  position: absolute;
  top: -11px;
  right: 22px;
  padding: 5px 11px 4px;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: var(--noir);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--gris-clair);
}
.ecran-haut { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ecran-haut img { width: 70px; height: auto; }
.ecran-haut .info { font-size: 9px; }
.ecran-titre { position: relative; margin: 26px 0 0; font-weight: 500; font-size: 27px; line-height: 1.1; letter-spacing: -.02em; }
.ecran-chapo { position: relative; margin: 8px 0 0; min-height: 4.4em; font-size: 13px; line-height: 1.45; color: var(--gris-clair); }
.jauge { position: relative; width: 80%; margin: 14px auto 0; aspect-ratio: 1; color: var(--accent); }
.jauge::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-voile), transparent 70%); transition: transform .8s var(--ease); }
.jauge.termine::before { transform: scale(1.12); }
.jauge svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.jauge .pointilles { stroke: rgba(255, 255, 255, .26); }
.jauge .anneau { stroke: rgba(255, 255, 255, .08); }
.jauge .bout { transform-box: view-box; transform-origin: 160px 160px; }
.jauge .onde { transform-box: fill-box; transform-origin: center; animation: onde 2.2s var(--ease) infinite; }
.jauge.termine .onde { animation: none; opacity: 0; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(2.7); opacity: 0; } }
.jauge-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jauge-nombre { display: flex; align-items: baseline; font-weight: 300; font-size: 62px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--blanc); }
.jauge-nombre small { margin-left: .06em; font-size: .32em; font-weight: 400; letter-spacing: 0; color: var(--gris-clair); }
.jauge-centre .info { margin-top: 8px; font-size: 9px; }
.ecran-direct { position: relative; margin-top: 16px; text-align: center; font-size: 9.5px; }
.pastille { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: pastille 2s infinite; }
.ecran-direct.calme .pastille { background: var(--gris); animation: none; }
.ecran-direct.fini .pastille { animation: none; }
@keyframes pastille { 0% { box-shadow: 0 0 0 0 var(--accent-lueur); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
/* Le direct garde un point rouge, comme un « live » : un des rares rappels de FUT Champions. */
.pastille { --accent-lueur: rgba(227, 38, 63, .45); background: var(--rouge); }
.ecran-chiffres { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--trait); }
.ecran-chiffres div { min-width: 0; padding: 13px 2px 0; text-align: center; }
.ecran-chiffres div + div { border-left: 1px solid var(--trait); }
.ecran-chiffres dt { font-size: 8.5px; letter-spacing: .22em; }
.ecran-chiffres dd { margin: 6px 0 0; font-weight: 300; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecran-chiffres dd.cle { color: var(--accent); }
@media (min-width: 900px) {
  .direct { padding-top: 150px; }
  .direct-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 80px; }
  .ecran { width: 380px; }
}

/* Bandeaux qui défilent (or, puis celui de FUT Champions), un peu penchés ; ils accélèrent quand on fait défiler la page. */
.bandeau-zone { position: relative; padding-block: 34px; }
.bandeau { width: 112%; margin-left: -6%; overflow: hidden; padding-block: 10px; transform: rotate(-2deg); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.bandeau-piste { display: flex; width: max-content; will-change: transform; }
.bandeau-piste span { flex: none; padding-right: .4em; font-weight: 500; font-size: clamp(24px, 6.6vw, 52px); line-height: 1.15; letter-spacing: .02em; white-space: nowrap; }
.bandeau-or { background: linear-gradient(90deg, var(--or-fonce), var(--or) 30%, var(--or-clair) 50%, var(--or) 70%, var(--or-fonce)); color: var(--noir); }
.bandeau-champions { transform: rotate(2deg); background: var(--champ-bandeau); color: var(--champ-bandeau-texte); box-shadow: inset 0 1px 0 var(--champ-bandeau-filet), inset 0 -1px 0 var(--champ-bandeau-filet), 0 20px 50px -20px rgba(0, 0, 0, .8); }

/* ---------- 4. Prix : le terrain de nuit ---------- */
.prix { background: radial-gradient(120% 70% at 50% 45%, var(--terrain-fond), var(--noir) 75%); }
.terrain { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.terrain path, .terrain circle { fill: none; stroke: var(--terrain-ligne); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--trace, 1)); }
.terrain .terrain-point { fill: var(--terrain-ligne); stroke: none; }
.instrument {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 30px;
  margin-top: 44px;
  padding: 28px 20px 22px;
  border-radius: 30px;
  border: 1px solid var(--trait-fort);
  background: linear-gradient(180deg, var(--panneau-haut), var(--panneau-bas));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 100px -40px rgba(0, 0, 0, .8);
}
.instrument::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 75%) var(--my, 20%), var(--or-lueur), transparent 62%);
  opacity: .5;
}
.lecture { display: grid; align-content: start; }
.lecture-quantite { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lecture-credits { font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.offerts { font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--or); transition: opacity .3s; }
.offerts.vide { opacity: 0; }
.lecture-prix { margin: 18px 0 0; display: flex; align-items: flex-start; font-weight: 200; font-size: clamp(104px, 33vw, 176px); line-height: .86; letter-spacing: -.055em; color: var(--or); text-shadow: 0 0 60px var(--or-lueur); }
.lecture-prix .unite { margin: .1em 0 0 .1em; font-size: .3em; font-weight: 300; letter-spacing: 0; color: var(--or-clair); }
.lecture-million { margin: 14px 0 0; font-size: 14px; color: var(--gris); }
/* Pack 2,5 M : les offerts arrivent le lendemain (au plus 2,5 M par 24 h). */
.lecture-livraison { margin: 8px 0 0; font-size: 13px; color: var(--or-clair); }
.lecture-million b { font-weight: 400; color: var(--blanc); font-variant-numeric: tabular-nums; }
.moins-cher { margin-top: 8px; color: var(--or); }
.moins-cher.cache { visibility: hidden; }
.lecture .actions { margin-top: 26px; }

/* Chiffres à rouleaux : chaque chiffre tourne jusqu'au suivant. */
.rouleau { display: inline-flex; font-variant-numeric: tabular-nums; }
.r-col { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.r-pile { display: block; transition: transform .9s var(--ease); }
.r-pile > span { display: block; height: 1em; line-height: 1; }
.r-sep { display: inline-block; line-height: 1; white-space: pre; }

/* Les colonnes : hauteur = crédits reçus ; en or, la part offerte. */
.colonnes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  height: 250px;
  padding-top: 30px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.colonnes::after { content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 1px; background: var(--trait-fort); pointer-events: none; }
.colonne { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 32px; height: 100%; min-width: 0; border-radius: 10px; }
.colonne-zone { position: relative; }
.colonne-barre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(var(--h), 5px);
  overflow: hidden;
  border-radius: 9px 9px 2px 2px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transform-origin: bottom;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.colonne-barre::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .22)); transition: opacity .45s var(--ease); }
.colonne-offerts { position: absolute; left: 0; right: 0; top: 0; height: var(--o); background: linear-gradient(180deg, var(--or-clair), var(--or)); opacity: .45; transition: opacity .45s; }
.colonne-prix {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: calc(max(var(--h), 5px) + 9px);
  font-size: 12px;
  text-align: center;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .3s, transform .45s var(--ease);
}
.colonne-nom { display: flex; align-items: flex-end; justify-content: center; font-weight: 500; font-size: 10.5px; letter-spacing: .1em; color: var(--gris); white-space: nowrap; transition: color .3s; }
.colonne[aria-checked="true"] .colonne-barre { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 46px -8px rgba(255, 255, 255, .28); }
.colonne[aria-checked="true"] .colonne-barre::before { opacity: 1; }
.colonne[aria-checked="true"] .colonne-offerts { opacity: 1; box-shadow: 0 0 18px var(--or-lueur); z-index: 1; }
.colonne[aria-checked="true"] .colonne-prix { color: var(--or); transform: translateY(-3px); }
.colonne[aria-checked="true"] .colonne-nom { color: var(--blanc); }
.instrument.monte-colonnes .colonne-barre { animation: pousse 1.1s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pousse { from { transform: scaleY(0); } to { transform: none; } }
@media (hover: hover) { .colonne:hover .colonne-nom { color: var(--blanc); } }
@media (min-width: 900px) {
  .instrument { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding: 48px 48px 40px; margin-top: 56px; }
  .lecture-credits { font-size: 48px; }
  .colonnes { height: 380px; gap: 14px; }
  .colonne-prix { font-size: 13px; }
  .colonne-nom { font-size: 11px; }
}

/* ---------- 5. Étapes ---------- */
.etapes-grille { display: grid; gap: 52px; }
.etapes-tete { display: flex; flex-direction: column; }
.etapes-photo {
  position: relative;
  overflow: hidden;
  height: 56svh;
  min-height: 340px;
  max-height: 560px;
  margin: -120px calc(-1 * var(--gouttiere-d)) 40px calc(-1 * var(--gouttiere-g));
}
.etapes-photo img { width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.etapes-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir) 0%, rgba(10, 10, 11, 0) 22%, rgba(10, 10, 11, 0) 60%, var(--noir) 100%); }
.note { padding-left: 14px; border-left: 1px solid var(--or); }
.frise { position: relative; list-style: none; margin: 0; padding: 0; --p: 0; }
.frise-rail { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--trait-fort); }
.frise-fil { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p)); background: linear-gradient(var(--accent-clair), var(--accent)); box-shadow: 0 0 14px var(--accent-lueur); }
.frise-tete {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-voile), 0 0 20px var(--accent-lueur);
  transform: translateY(calc(var(--p) * var(--rail, 0px)));
}
.etape { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 44px; }
.etape:last-child { padding-bottom: 0; }
.etape-num {
  position: relative;
  z-index: 1;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: var(--noir);
  font-weight: 300;
  font-size: 14px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  transition: color .5s, border-color .5s, box-shadow .5s, transform .5s var(--rebond);
}
.etape h3 { margin: 9px 0 0; font-weight: 500; font-size: 21px; line-height: 1.22; letter-spacing: -.012em; text-wrap: balance; }
.etape p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--gris-clair); }
.etape.passee .etape-num { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px -4px var(--accent-lueur); transform: scale(1.08); }
.js .etape > div { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .etape:not(.passee) > div { opacity: .62; transform: translateX(6px); }
@media (min-width: 900px) {
  .etapes-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; }
  .etapes-tete { position: sticky; top: 120px; align-self: start; }
  .etapes-photo { order: 4; height: 360px; min-height: 0; margin: 40px 0 0; border-radius: 24px; border: 1px solid var(--trait-fort); }
  .etapes-photo::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0) 50%, rgba(10, 10, 11, .6) 100%); }
  .etape h3 { font-size: 24px; }
  .etape p { font-size: 16.5px; }
  .etape { padding-bottom: 56px; gap: 26px; }
}

/* ---------- 6. Garantie et paiement ---------- */
.garantie-grille { display: grid; gap: 56px; }
.cadran { position: relative; width: min(330px, 86%); aspect-ratio: 1; margin: 0 auto; }
.cadran::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, var(--or-lueur), transparent 70%); opacity: .55; pointer-events: none; }
.cadran-ballon {
  position: absolute;
  inset: 11%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  object-fit: cover;
  opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.cadran svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.cadran line { stroke: rgba(255, 255, 255, .18); stroke-width: 2; stroke-linecap: round; transition: stroke .35s; }
.cadran circle { fill: none; stroke: var(--trait); }
.cadran.allume line { stroke: var(--or); transition-delay: calc(var(--i) * 34ms); }
.cadran.allume line:last-of-type { stroke: var(--blanc); }
.cadran-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cadran-nombre {
  font-weight: 200;
  font-size: clamp(112px, 34vw, 176px);
  line-height: .82;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--or-clair) 10%, var(--or) 55%, var(--or-fonce));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cadran-centre .info { margin-top: 14px; letter-spacing: .4em; color: var(--or-clair); }
.paiement { margin-top: 96px; }
.paiement-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; border-top: 1px solid var(--trait-fort); }
.paiement-liste li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--trait-fort); font-size: 19px; letter-spacing: -.005em; color: var(--gris-clair); }
.paiement-liste b { font-weight: 500; color: var(--blanc); }
.coche { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--or); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .garantie-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 110px; }
  .cadran { width: 100%; max-width: 440px; }
  .paiement { margin-top: 140px; }
  .paiement-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paiement-liste li { padding: 26px 24px 26px 0; font-size: 21px; }
  .paiement-liste li + li { padding-left: 24px; border-left: 1px solid var(--trait-fort); }
}

/* ---------- 7. FUT Champions : or et ambre (A), rouge et or (B) ---------- */
.champions { position: relative; padding-bottom: 120px; background: linear-gradient(180deg, var(--noir) 0%, var(--champ-nuit) 30%, var(--champ-fonce) 62%, var(--champ-nuit) 100%); }
.champions .point { color: var(--rouge); }
.champions .info { color: rgba(247, 227, 168, .7); }
.champions .info b { color: var(--or-clair); }
.champions .texte { color: rgba(255, 236, 214, .78); }
.champions-image { position: relative; height: 78svh; min-height: 460px; max-height: 860px; overflow: hidden; }
.champions-image img { width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.champions-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir) 0%, var(--champ-transparent) 24%, var(--champ-transparent) 46%, var(--champ-voile) 80%, var(--champ-nuit) 100%); }
.champions-contenu { position: relative; margin-top: -210px; }
.objectifs { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid rgba(247, 227, 168, .22); }
.objectif {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 18px;
  grid-template-areas: "nombre mot prix fleche" "barres barres barres barres";
  align-items: baseline;
  column-gap: 12px;
  row-gap: 16px;
  padding: 24px 0 22px;
  border-bottom: 1px solid rgba(247, 227, 168, .22);
  transition: background-color .3s;
}
.objectif-nombre { grid-area: nombre; font-weight: 300; font-size: 56px; line-height: .86; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.objectif-mot { grid-area: mot; font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 236, 214, .75); }
.objectif-prix { grid-area: prix; font-weight: 300; font-size: 32px; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--or); }
.objectif .fleche { grid-area: fleche; align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--or); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.objectif-barres { grid-area: barres; display: grid; grid-template-columns: repeat(var(--max, 15), minmax(0, 1fr)); gap: 4px; }
.objectif-barres i { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background-color .35s, box-shadow .35s; }
.objectifs.allume .objectif-barres i { background: var(--or); transition-delay: calc(var(--r) * 140ms + var(--i) * 26ms); }
.objectifs.allume .objectif-barres i:last-child { background: var(--blanc); box-shadow: 0 0 12px rgba(255, 255, 255, .6); }
@media (hover: hover) {
  .objectif:hover .fleche { transform: translateX(4px); }
  .objectif:hover .objectif-nombre { color: var(--or-clair); }
}
.objectif:active { opacity: .8; }
@media (min-width: 900px) {
  .champions { padding-bottom: 176px; }
  .champions-image { height: 88svh; max-height: 980px; }
  .champions-contenu { margin-top: -300px; }
  .objectifs { max-width: 920px; }
  .objectif { grid-template-columns: 110px 140px minmax(0, 1fr) 120px 18px; grid-template-areas: "nombre mot barres prix fleche"; align-items: center; column-gap: 24px; padding: 30px 0; }
  .objectif-nombre { font-size: 64px; }
  .objectif-prix { text-align: right; font-size: 36px; }
}

/* ---------- 8. Preuves : les vrais avis (ici en exemple) ---------- */
.preuves::before { content: ""; position: absolute; left: -20%; top: 20%; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--accent-voile), transparent 70%); pointer-events: none; }
.preuves-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 380px);
  gap: 14px;
  margin-top: 40px;
  padding: 4px var(--gouttiere-d) 10px var(--gouttiere-g);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere-g);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.preuves-rail::-webkit-scrollbar { display: none; }
.preuve {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  scroll-snap-align: start;
}
.preuve-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.etoiles-vides { display: flex; gap: 3px; }
.etoiles-vides svg { width: 17px; height: 17px; fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-linejoin: round; }
.squelette {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .07) 25%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .07) 75%);
  background-size: 300% 100%;
  animation: chargement 2.2s ease-in-out infinite;
}
.squelette.moyen { width: 72%; }
.squelette.court { width: 34%; }
.squelette.nom { width: 82px; display: inline-block; }
.squelette.pastille { display: inline-block; width: 46px; height: 10px; vertical-align: -1px; }
@keyframes chargement { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.preuve-signature { margin: 8px 0 0; display: grid; gap: 8px; font-size: 12.5px; color: var(--gris); }
.etiquette-exemple { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13px; line-height: 1.5; color: var(--gris-clair); }
.etiquette-exemple b { padding: 4px 10px 3px; border-radius: 999px; border: 1px solid var(--trait-fort); font-weight: 500; font-size: 9px; letter-spacing: .3em; color: var(--blanc); }
.chaine { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto; align-items: start; gap: 10px; margin-top: 44px; max-width: 560px; }
.chaine-noeud { display: grid; justify-items: center; gap: 12px; }
.chaine-noeud i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: var(--noir); }
.chaine-noeud:last-child i { border-color: var(--or); background: var(--or); box-shadow: 0 0 16px var(--or-lueur); }
.chaine-noeud span { font-weight: 500; font-size: 9px; letter-spacing: .24em; color: var(--gris-clair); white-space: nowrap; }
.chaine-lien { position: relative; height: 1px; margin-top: 5px; background: var(--trait-fort); container-type: inline-size; }
.chaine-lien::after { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--or); box-shadow: 0 0 10px var(--or-lueur); animation: voyage 3.4s var(--ease-io) infinite; }
.chaine-lien + .chaine-noeud + .chaine-lien::after { animation-delay: 1.7s; }
@keyframes voyage { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 5px)); opacity: 0; } }
@media (min-width: 900px) {
  .preuves-rail { max-width: 1320px; margin: 52px auto 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 22px; }
}

/* ---------- 9. Tutos ---------- */
.tutos-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 320px);
  gap: 14px;
  margin-top: 40px;
  padding: 4px var(--gouttiere-d) 10px var(--gouttiere-g);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere-g);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tutos-rail::-webkit-scrollbar { display: none; }
.tuto { display: grid; gap: 14px; scroll-snap-align: start; text-align: left; }
.tuto.anime { animation: monte 1s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.tuto-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  border: 1px solid var(--trait-fort);
  background: var(--carbone);
  box-shadow: 0 30px 70px -40px var(--accent-lueur);
}
.tuto-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tuto-lire {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 11, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .3s, transform .4s var(--ease);
}
.tuto-lire svg { width: 16px; height: 16px; fill: none; stroke: var(--blanc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tuto-texte { display: grid; gap: 4px; }
.tuto-texte .info { font-size: 9.5px; }
.tuto-texte b { font-weight: 500; font-size: 16px; line-height: 1.3; }
@media (hover: hover) {
  .tuto:hover .tuto-image img { transform: scale(1.04); }
  .tuto:hover .tuto-lire { background: var(--cta); border-color: var(--cta); }
  .tuto:hover .tuto-lire svg { stroke: var(--noir); }
}
@media (min-width: 900px) {
  .tutos-rail { max-width: 1320px; margin: 52px auto 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 22px; }
}

/* Lecteur de tutos, comme une story. */
.lecteur {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #060608;
  color: var(--blanc);
  overflow: hidden;
}
.lecteur[open] { display: flex; flex-direction: column; animation: fondu .3s var(--ease) both; }
.lecteur:focus, .feuille:focus { outline: none; }
.lecteur::backdrop { background: rgba(0, 0, 0, .8); }
.lecteur-haut { padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gouttiere-d) 12px var(--gouttiere-g); display: grid; gap: 14px; }
.lecteur-segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.lecteur-segments i { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.lecteur-segments i::after { content: ""; display: block; height: 100%; background: var(--blanc); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.lecteur-segments i.vu::after { transform: none; }
.lecteur-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lecteur-ligne .info { font-size: 9px; }
.lecteur-titre { margin: 2px 0 0; font-weight: 500; font-size: 15px; line-height: 1.3; }
.lecteur-fermer, .feuille-fermer { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait-fort); display: grid; place-items: center; }
.lecteur-fermer span, .feuille-fermer span { position: absolute; width: 16px; height: 1.5px; background: var(--blanc); }
.lecteur-fermer span:first-child, .feuille-fermer span:first-child { transform: rotate(45deg); }
.lecteur-fermer span:last-child, .feuille-fermer span:last-child { transform: rotate(-45deg); }
.lecteur-scene { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 var(--gouttiere-d) 0 var(--gouttiere-g); }
.lecteur-scene img { max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: 1080 / 1350; object-fit: contain; border-radius: 16px; border: 1px solid var(--trait); }
.lecteur-zone { position: absolute; top: 0; bottom: 0; width: 40%; }
.lecteur-precedent { left: 0; }
.lecteur-suivant { right: 0; width: 60%; }
.lecteur-position { padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 16px); text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .lecteur { width: min(560px, 100%); height: min(940px, 100%); margin: auto; border-radius: 28px; border: 1px solid var(--trait-fort); }
}

/* Feuille de contact Snapchat : le message à copier, puis Snapchat. */
.feuille {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: #0E0D12;
  color: var(--blanc);
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .6);
  border-top: 1px solid var(--trait-fort);
}
.feuille[open] { animation: glisse .45s var(--ease) both; }
.feuille::backdrop { background: rgba(0, 0, 0, .7); }
@keyframes glisse { from { transform: translateY(100%); } to { transform: none; } }
.feuille-corps { position: relative; display: grid; gap: 14px; padding: 26px var(--gouttiere-d) calc(env(safe-area-inset-bottom, 0px) + 24px) var(--gouttiere-g); }
.feuille-fermer { position: absolute; top: 16px; right: var(--gouttiere-d); }
.feuille-titre { margin: 0; padding-right: 56px; font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.feuille-etapes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.feuille-etapes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--gris-clair); }
.feuille-etapes span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--or); color: var(--or); font-size: 12px; }
.feuille-message {
  margin: 4px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--trait-fort);
  background: rgba(255, 255, 255, .04);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-user-select: all;
  user-select: all;
}
.feuille-boutons { display: grid; gap: 10px; margin-top: 4px; }
.feuille-boutons .bouton-plein, .feuille-boutons .bouton-ligne { width: 100%; }
.feuille .petit { margin: 0; text-align: center; }
.feuille-autre { justify-self: center; min-height: 44px; padding: 0 14px; font-size: 14px; color: var(--gris-clair); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 4px; }
@media (hover: hover) { .feuille-autre:hover { color: var(--blanc); } }
@media (min-width: 900px) {
  .feuille { width: min(520px, 100%); margin: auto; border-radius: 28px; border: 1px solid var(--trait-fort); }
  .feuille[open] { animation: fondu .3s var(--ease) both; }
  .feuille-corps { padding: 32px; }
  .feuille-fermer { right: 20px; }
}

/* ---------- 10. Parrainage ---------- */
.parrainage { padding-block: 72px 120px; }
.parrainage-grille { display: grid; gap: 18px; padding-top: 48px; border-top: 1px solid var(--trait-fort); }
.parrainage-chiffre {
  margin: 0;
  font-weight: 200;
  font-size: clamp(88px, 28vw, 176px);
  line-height: .85;
  letter-spacing: -.055em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--or-clair) 10%, var(--or) 55%, var(--or-fonce));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.parrainage-chiffre .plus { margin-right: .04em; }
@media (min-width: 900px) {
  .parrainage { padding-block: 96px 176px; }
  .parrainage-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 110px; align-items: center; padding-top: 72px; }
}

/* ---------- 11. Dernier appel ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 92svh; padding-bottom: 96px; }
.final-image { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.final-image picture { position: absolute; inset: 0; }
.final-image img { width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 62%; will-change: transform; }
.final-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir) 0%, rgba(10, 10, 11, .1) 30%, rgba(10, 10, 11, .25) 55%, rgba(10, 10, 11, .9) 82%, var(--noir) 100%); }
.final-contenu .titre-geant { margin-top: 16px; }
.final-contenu .actions { margin-top: 32px; }
@media (min-width: 900px) {
  .final { min-height: 100svh; padding-bottom: 150px; }
  .final-contenu .titre-geant { font-size: clamp(80px, 11vw, 168px); }
}

/* Pied : la signature entière. */
.pied { padding: 40px 0 calc(env(safe-area-inset-bottom, 0px) + 48px); }
.pied-contenu { display: grid; justify-items: center; gap: 18px; text-align: center; }
.pied-logo { width: min(320px, 100%); height: auto; margin-bottom: 6px; }
.pied-lien { color: var(--gris-clair); }
.pied-lien:hover { color: var(--blanc); }
@media (min-width: 900px) { .pied { padding-bottom: 72px; } .pied-logo { width: 420px; } }

/* Barre du bas (téléphone) : quand aucun autre bouton n'est à l'écran. */
.barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 22px var(--gouttiere-d) calc(env(safe-area-inset-bottom, 0px) + 14px) var(--gouttiere-g);
  background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, .92) 42%);
  animation: monte .45s var(--ease) both;
}
.barre .bouton-plein { width: 100%; min-height: 54px; }
@media (min-width: 900px) { .barre { display: none !important; } }

/* Petit message en bas d'écran. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 80;
  width: min(420px, calc(100% - 32px));
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--trait-fort);
  background: rgba(19, 19, 22, .96);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--gris-clair);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast b { color: var(--blanc); font-weight: 500; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }


/* ---------- L'envie : les équipes de la semaine, les cartes méta, les plus chères, le calculateur ---------- */
.maj { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--gris-clair); }
.maj::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px var(--or-lueur); animation: pastille 2.4s infinite; }
.source { margin: 18px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--gris); max-width: 60em; }
.fin-rubrique .actions { margin-top: 22px; }
.budgets { display: flex; gap: 8px; margin: 26px calc(-1 * var(--gouttiere-d)) 0 calc(-1 * var(--gouttiere-g)); padding: 2px var(--gouttiere-d) 4px var(--gouttiere-g); overflow-x: auto; scrollbar-width: none; }
.budgets::-webkit-scrollbar { display: none; }
.budgets button {
  flex: none;
  min-width: 68px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  font-weight: 500;
  font-size: 15px;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.budgets button[aria-selected="true"] { background: var(--or); border-color: var(--or); color: var(--noir); box-shadow: 0 10px 30px -12px var(--or-lueur); }
.budgets button:active { transform: scale(.96); }
/* Sur téléphone, les cinq budgets tiennent sur une ligne (390 px et moins), sans bouton coupé au bord. */
@media (max-width: 599px) {
  .budgets { gap: 6px; }
  .budgets button { flex: 1 0 auto; min-width: 0; padding: 0 12px; }
}

.equipe { display: grid; gap: 22px; margin-top: 18px; }
.terrain-equipe {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 150;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--trait-fort);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 8%, transparent 8% 16%),
    radial-gradient(120% 80% at 50% 40%, #1B1915, var(--terrain-fond) 70%, #050505);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .6);
}
[data-version="b"] .terrain-equipe { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 8%, transparent 8% 16%), radial-gradient(120% 80% at 50% 40%, #3a0b14, #170609 70%, #080203); }
.terrain-lignes { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.terrain-lignes rect, .terrain-lignes path, .terrain-lignes circle { fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 1; vector-effect: non-scaling-stroke; }
.terrain-cartes { position: absolute; inset: 0; }
.place { position: absolute; left: var(--x); top: var(--y); width: 17%; display: grid; justify-items: center; gap: 5px; transform: translate(-50%, -50%); }
/* Les cartes partent du bas du terrain et viennent se poser à leur place, ligne après ligne, puis un reflet or les traverse. */
.terrain-cartes.joue .place { animation: distribue .8s var(--ease) both; animation-delay: calc(var(--k) * 70ms); }
@keyframes distribue {
  0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(-12deg) scale(.5); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
.terrain-cartes.joue .cf-reflet { animation: reflet 1.2s var(--ease) both; animation-delay: calc(var(--k) * 70ms + .7s); }
.prix-place { padding: 2px 7px; border-radius: 999px; background: rgba(8, 8, 10, .72); font-size: 10px; font-weight: 500; color: var(--or-clair); font-variant-numeric: tabular-nums; white-space: nowrap; }
.equipe-cote { display: grid; gap: 18px; align-content: start; }
.equipe-bilan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--trait-fort); }
.equipe-bilan div { min-width: 0; padding: 14px 4px; text-align: center; }
.equipe-bilan div + div { border-left: 1px solid var(--trait-fort); }
.equipe-bilan dt { font-weight: 500; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.equipe-bilan dd { margin: 6px 0 0; font-weight: 300; font-size: 23px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.equipe-bilan dd.cle { color: var(--or); }

/* Le pack qu'il te faut : le stylo, juste à côté du papier. */
.pack-ideal { display: grid; gap: 8px; }
.pack-ideal .info { color: var(--or-clair); }
.pi-nom { margin: 0; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.pi-euros { margin: 0; font-weight: 200; font-size: clamp(56px, 16vw, 84px); line-height: .95; letter-spacing: -.045em; color: var(--or); text-shadow: 0 0 50px var(--or-lueur); font-variant-numeric: tabular-nums; }
.pi-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-clair); }
.pi-dm { color: var(--blanc); font-weight: 500; }
.dm-note { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--blanc); font-weight: 500; }
.pack-ideal .bouton-plein { width: 100%; margin-top: 10px; }

/* Les cartes, en forme de carte FUT : note, poste, nom (sans visuel officiel). */
.carte-fut { --forme: polygon(50% 0, 84% 3.5%, 100% 11%, 100% 82%, 93% 89%, 50% 100%, 7% 89%, 0 82%, 0 11%, 16% 3.5%); position: relative; width: 100%; aspect-ratio: 64 / 90; container-type: inline-size; color: #2A1F08; }
.carte-fut::before { content: ""; position: absolute; inset: 0; clip-path: var(--forme); background: var(--carte-or); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.carte-fut::after { content: ""; position: absolute; inset: 4.5%; clip-path: var(--forme); border: 1px solid rgba(255, 255, 255, .45); background: radial-gradient(70% 45% at 50% 38%, rgba(255, 255, 255, .3), transparent 70%); }
.cf-icone { color: #2B2412; }
.cf-icone::before { background: linear-gradient(160deg, #FFFDF4 0%, #EFE4C4 45%, #CDB57C 100%); }
.cf-heros { color: #F6E6B8; }
.cf-heros::before { background: linear-gradient(160deg, #4B48A8 0%, #25236A 55%, #110F35 100%); }
/* Noir, or et blanc : héros et cartes spéciales en noir et or (le type reste écrit sur la carte). */
[data-version="a"] .cf-heros { color: #F5DC9A; }
[data-version="a"] .cf-heros::before { background: linear-gradient(160deg, #3B2F17 0%, #1C170D 55%, #0B0906 100%); }
[data-version="a"] .cf-heros::after { border-color: rgba(220, 170, 78, .65); }
.cf-promo { color: #FFFFFF; }
.cf-promo::before { background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #E8C46C) 45%, #2a2733) 0%, #17151d 55%, #0b0a0f 100%); }
.cf-promo::after { border-color: color-mix(in srgb, var(--accent, #E8C46C) 70%, transparent); }
/* Version A : les cartes spéciales en noir et or, comme la TOTW ; le type reste écrit sur la carte. */
[data-version="a"] .cf-promo { --accent: var(--or) !important; }
[data-version="a"] .cf-promo::before { background: linear-gradient(160deg, color-mix(in srgb, var(--or) 38%, #24211B) 0%, #15130F 55%, #0A0908 100%); }
.cf-contenu { position: absolute; inset: 0; z-index: 1; }
.cf-note { position: absolute; left: 13%; top: 11%; font-weight: 500; font-size: 30cqw; line-height: 1; letter-spacing: -.05em; }
.cf-poste { position: absolute; left: 13%; top: 36%; width: 30cqw; text-align: center; font-weight: 500; font-size: 12cqw; letter-spacing: .04em; }
.cf-drapeau { position: absolute; left: 13%; top: 48%; width: 30cqw; text-align: center; font-size: 13cqw; line-height: 1; }
.cf-nom { position: absolute; left: 7%; right: 7%; top: 58%; text-align: center; font-weight: 500; font-size: 13.5cqw; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-nom.long { font-size: 11cqw; }
.cf-filet { position: absolute; left: 24%; right: 24%; top: 73.5%; height: 1px; background: currentColor; opacity: .3; }
.cf-type { position: absolute; left: 10%; right: 10%; top: 77%; text-align: center; font-weight: 500; font-size: 7.5cqw; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; opacity: .85; }
/* Libellés longs (Destined for Glory, Ultimate Scream, Star Performer) : sur deux lignes, jamais coupés. */
.cf-type.long { top: 75.5%; white-space: normal; font-size: 6.6cqw; line-height: 1.08; letter-spacing: .05em; }
/* Les 6 stats, seulement quand la carte est assez grande pour qu'on les lise (cartes méta, ordinateur). */
.cf-stats { display: none; }
@container (min-width: 120px) {
  .cf-drapeau { top: 47%; font-size: 11cqw; }
  .cf-nom { top: 53%; font-size: 11.5cqw; }
  .cf-nom.long { font-size: 9.5cqw; }
  .cf-filet { top: 64%; }
  .cf-stats { position: absolute; left: 12%; right: 12%; top: 66.5%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5cqw; font-size: 6.6cqw; letter-spacing: .04em; line-height: 1.1; }
  .cf-stats span { white-space: nowrap; }
  .cf-stats b { margin-right: 1.4cqw; font-weight: 500; font-size: 8.4cqw; font-variant-numeric: tabular-nums; }
  .cf-type { top: 84%; font-size: 6.4cqw; }
  .cf-type.long { top: 83.5%; white-space: nowrap; font-size: 5.4cqw; letter-spacing: .03em; line-height: 1.3; }
}
/* Reflet or : il traverse la carte à l'arrivée, et suit le doigt ou la souris ; la carte s'incline un peu. */
.carte-fut { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.carte-fut.touchee { transition-duration: .08s; }
.cf-reflet { position: absolute; inset: 0; z-index: 2; clip-path: var(--forme); pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 246, 220, .12) 54%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: var(--reflet, 140%) 0; mix-blend-mode: overlay; }
@keyframes reflet { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.rail-cartes.anime .cf-reflet { animation: reflet 1.4s var(--ease) both; animation-delay: calc(var(--k) * 70ms + .5s); }
/* La n° 1 du classement se révèle : la carte tourne, un éclat d'or derrière elle. */
.classement.vu .classement-ligne:first-of-type .carte-fut, .classement.vu li:first-child .carte-fut { animation: revele 1.2s var(--ease) both; }
.classement.vu li:first-child .carte-fut .cf-reflet { animation: reflet 1.3s var(--ease) .9s both; }
@keyframes revele {
  0% { transform: perspective(700px) rotateY(90deg) scale(.85); opacity: .2; }
  100% { transform: perspective(700px) rotateY(0) scale(1); opacity: 1; }
}
.classement li:first-child .classement-ligne { position: relative; }
.classement.vu li:first-child .classement-ligne::before { content: ""; position: absolute; left: 10px; top: 50%; width: 170px; aspect-ratio: 1; transform: translate(-10%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 220, 154, .5), rgba(220, 170, 78, .18) 55%, transparent); pointer-events: none; animation: eclat 1.6s var(--ease) both; }
@keyframes eclat { 0% { opacity: 0; scale: .3; } 35% { opacity: 1; } 100% { opacity: .35; scale: 1; } }

/* Cartes méta : une rangée qui glisse (téléphone), une grille (ordinateur). */
.rail-cartes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 18px;
  margin-top: 36px;
  padding: 6px var(--gouttiere-d) 12px var(--gouttiere-g);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere-g);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rail-cartes::-webkit-scrollbar { display: none; }
.fiche-meta { display: grid; gap: 6px; text-align: left; scroll-snap-align: start; }
/* Ombre portée sans filter : sur ces cartes, drop-shadow faisait peindre à WebKit (Safari) un bloc blanc en haut de l'écran. */
.fiche-meta .carte-fut { border-radius: 14% / 10%; box-shadow: 0 24px 26px -14px rgba(0, 0, 0, .7); transition: transform .45s var(--ease); margin-bottom: 8px; }
.fiche-prix { font-weight: 300; font-size: 24px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fiche-prix small { margin-left: 4px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.fiche-pack { font-size: 12.5px; line-height: 1.4; color: var(--gris-clair); }
.fiche-euros { font-weight: 500; font-size: 17px; color: var(--or); font-variant-numeric: tabular-nums; }
.fiche-euros small { font-weight: 400; font-size: 11.5px; color: var(--gris); }
.rail-cartes.anime .fiche-meta { animation: monte .8s var(--ease) both; animation-delay: calc(var(--k) * 70ms); }
@media (hover: hover) { .fiche-meta:hover .carte-fut { translate: 0 -6px; rotate: -1.5deg; } }
@media (min-width: 900px) {
  .rail-cartes { max-width: 1320px; margin: 52px auto 0; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: 34px 26px; padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }
}

/* Les 5 plus chères : un classement. */
.classement { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--trait-fort); }
.classement-ligne { display: grid; grid-template-columns: 30px 66px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--trait-fort); text-align: left; }
.rang { font-weight: 200; font-size: 40px; line-height: 1; color: var(--or); font-variant-numeric: tabular-nums; }
.cl-texte { display: grid; gap: 4px; min-width: 0; }
.cl-nom { font-weight: 500; font-size: 17px; }
.cl-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 300; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-origine { padding: 3px 8px 2px; border-radius: 999px; border: 1px solid var(--trait-fort); font-weight: 500; font-size: 8.5px; letter-spacing: .2em; color: var(--gris-clair); }
.cl-origine.ventes { border-color: var(--or); color: var(--or-clair); }
.cl-pack { font-size: 13px; line-height: 1.45; color: var(--gris-clair); }
.cl-pack b { font-weight: 500; color: var(--or); }
.cl-detail { font-size: 11.5px; line-height: 1.45; color: var(--gris); }
.classement + .source { margin-top: 18px; }
.plus-cheres .actions { margin-top: 26px; }
@media (hover: hover) { .classement-ligne:hover .cl-nom { color: var(--or-clair); } }
@media (min-width: 900px) {
  .classement-ligne { grid-template-columns: 60px 92px minmax(0, 1fr); gap: 28px; padding: 24px 0; }
  .rang { font-size: 56px; }
  .cl-prix { font-size: 32px; }
}

/* Il te manque combien ? */
.calcul { background: radial-gradient(80% 60% at 20% 30%, var(--or-lueur), transparent 70%); }
.calcul-grille { display: grid; gap: 30px; }
.champs { display: grid; gap: 4px; }
.champ { display: grid; gap: 8px; margin-top: 22px; }
.champ input {
  width: 100%;
  height: 64px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--trait-fort);
  background: rgba(255, 255, 255, .04);
  color: var(--blanc);
  font: inherit;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: border-color .3s, box-shadow .3s;
}
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px var(--or-lueur); }
.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.raccourcis button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--trait-fort); font-size: 12.5px; color: var(--gris-clair); font-variant-numeric: tabular-nums; transition: border-color .3s, color .3s; }
.raccourcis button:hover, .raccourcis button.choisi { border-color: var(--or); color: var(--or-clair); }
.calcul-resultat { position: relative; overflow: hidden; padding: 26px 20px 22px; border-radius: 28px; border: 1px solid var(--trait-fort); background: linear-gradient(180deg, var(--panneau-haut), var(--panneau-bas)); }
.manque { margin: 8px 0 22px; font-weight: 200; font-size: clamp(50px, 14.5vw, 92px); line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.calcul-resultat .pack-ideal { padding-top: 20px; border-top: 1px solid var(--trait); }
@media (min-width: 900px) {
  .equipe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 30px; }
  /* Le terrain garde ses proportions (sinon les lignes se serrent) : 520 px de large au plus, centré. */
  .terrain-equipe { width: min(100%, 520px); margin-inline: auto; }
  .prix-place { font-size: 11px; }
  .calcul-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
}

/* Mouvement réduit : tout est posé, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .autographe-trait { -webkit-mask-image: none; mask-image: none; }
  .neige, .balayage { display: none; }
  .bandeau-piste { transform: none !important; }
  .js .etape:not(.passee) > div { opacity: 1; transform: none; }
  .terrain path, .terrain circle { stroke-dashoffset: 0; }
}

/* ---------- Site (01/11/2026) : blocs que le prototype n'a pas ---------- */
.note-moyenne, .bf-haut { margin: 0 0 14px; }
.note-moyenne b, .bf-haut b { color: var(--or-clair); }
.bf-prix b { color: var(--or-clair); }
.grille-texte { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.grille-texte a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 14px 16px; border: 1px solid var(--trait-fort); border-radius: 16px; text-decoration: none; }
.grille-texte small { color: var(--gris); }
.preuve.vraie { gap: 14px; }
.preuve .etoiles-fixes { display: inline-flex; gap: 3px; }
.preuve .etoiles-fixes svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, .14); }
.preuve .etoiles-fixes svg.pleine { fill: var(--or); }
.preuve-texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--blanc); }
.preuve-signature b { font-weight: 500; color: var(--blanc); }
.avis-tous { margin: 22px 0 16px; }

/* --- AFFICHAGE DES CARTES EN IMAGES (.webp) --- */
img.carte-fut {
    width: 100%;
    height: auto;
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
}