/* ─────────────────────────────────────────────────────────────────────
   tikitaklan — site public.

   Les couleurs sont reprises À L'IDENTIQUE de mobile/theme/colors.ts :
   l'encre #0B1120, le vert de marque #059669, et #34D399 pour l'accent
   posé SUR l'encre (le green600 y tombe sous le seuil de contraste —
   c'est la raison d'être de `accentOnInk` dans l'app).

   ⚠️ Aucune dépendance, aucune police distante, aucun script tiers. Un
   site qui parle de RGPD ne peut pas charger Google Fonts : ce serait
   transmettre l'IP de chaque visiteur à un tiers hors UE, sans base
   légale, sur la page même où l'on promet le contraire.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ink: #0b1120;
  --ink-soft: #111827;
  --ink-carte: #131b2c;
  --on-ink: #ffffff;
  --on-ink-2: rgba(255, 255, 255, 0.72);
  --on-ink-3: rgba(255, 255, 255, 0.52);
  --on-ink-border: rgba(255, 255, 255, 0.14);
  --on-ink-surface: rgba(255, 255, 255, 0.07);
  --accent: #34d399;
  --accent-deep: #059669;
  --accent-dark: #064e3b;
  --amber: #f59e0b;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --pill: 999px;

  --max: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Le confort de lecture prime sur l'effet : qui a demandé moins
   d'animation n'en reçoit aucune, y compris le défilement doux. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Un contour de focus VISIBLE, jamais supprimé : c'est la seule façon
   de naviguer au clavier. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.conteneur {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 100;
}
.saut-contenu:focus {
  left: 0;
}

/* ─────────────────────────────── En-tête ─────────────────────────── */

header.barre {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 17, 32, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--on-ink-border);
}

.barre .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 19px;
}
.marque:hover {
  text-decoration: none;
}
.marque img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

nav.liens {
  display: flex;
  align-items: center;
  gap: 28px;
}
nav.liens a {
  color: var(--on-ink-2);
  font-size: 15px;
  font-weight: 500;
}
nav.liens a:hover {
  color: var(--on-ink);
  text-decoration: none;
}

@media (max-width: 760px) {
  nav.liens {
    display: none;
  }
}

/* ─────────────────────────────── Boutons ─────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48px : au-delà du minimum tactile de 44, comme dans l'app. */
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.bouton:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.bouton-plein {
  background: var(--accent);
  color: var(--ink);
}
.bouton-plein:hover {
  background: #6ee7b7;
}
.bouton-fantome {
  background: var(--on-ink-surface);
  color: var(--on-ink);
  border-color: var(--on-ink-border);
}
.bouton-fantome:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ─────────────────────────────── Héros ───────────────────────────── */

.heros {
  position: relative;
  padding: 104px 0 80px;
  overflow: hidden;
}

/* ── Grille du héros ──────────────────────────────────────────────
   Le texte occupe la colonne de gauche ; la seconde reste vide et
   déclarée exprès : c'est elle qui empêche le titre de courir sur la
   partie lumineuse du fond (voir `.heros-fond`). */
.heros-grille {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 30px;
  align-items: center;
  /* Le visuel étant en absolu, il ne porte plus la hauteur du héros :
     c'est cette valeur qui l'empêche de retomber sur les compteurs.
     Elle doit rester ≥ à la largeur maximale du visuel (520 px), qui
     est carré — sinon il déborderait par le bas. */
  min-height: 600px;
}

/* Le texte passe DEVANT le visuel, et s'arrête avant lui. */
.heros-texte {
  position: relative;
  z-index: 1;
}

/* ── FOND DU HÉROS ────────────────────────────────────────────────
   `bg.png` n'est pas un objet détouré à poser dans un coin : c'est un
   fond, avec son propre fondu alpha (36 % de pixels transparents sur
   les bords, opaques au centre-droit). Elle se dissout donc d'elle-même
   vers la gauche, exactement là où vit le texte.

   ⚠️ `height: 100%` + `width: auto` plutôt que `object-fit: cover` : en
   « cover », le recadrage vertical rognerait le fondu du haut et du bas
   et créerait deux bords francs. Là, toute la hauteur de l'image est
   visible, et le débord se fait à gauche — où elle est transparente. */
.heros-fond {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Sécurité de contraste. Le fondu de l'image suffit sur un grand écran,
   mais à largeur intermédiaire la partie opaque se rapproche du titre :
   ce voile garantit le contraste du texte quoi qu'il arrive. */
.heros-voile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--ink) 0%,
    rgba(11, 17, 32, 0.92) 26%,
    rgba(11, 17, 32, 0.45) 48%,
    transparent 66%
  );
}

@media (max-width: 940px) {
  .heros-grille {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Sur une colonne unique le fond passe DERRIÈRE le texte : on le
     recadre en « cover » et on l'atténue, sinon les traits lumineux
     passent sous le titre et le rendent illisible. */
  .heros-fond {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    opacity: 0.5;
  }
  .heros-voile {
    background: linear-gradient(
      to top,
      var(--ink) 4%,
      rgba(11, 17, 32, 0.72) 46%,
      rgba(11, 17, 32, 0.55) 100%
    );
  }
}

/* ── Le bloc de texte, calqué sur la référence ───────────────────── */

.heros-oeil {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-bottom: 20px;
}

h1.titre-heros {
  margin: 0 0 26px;
  font-size: clamp(2.5rem, 5.6vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-transform: uppercase;
  max-width: 13ch;
}
h1.titre-heros .surligne {
  background: linear-gradient(100deg, var(--accent) 0%, #67e8f9 55%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pastille bordée, comme « THE MOST COMPLETE METHOD » sur la référence. */
.pastille-methode {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid var(--on-ink-border);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 40px;
}

/* Le bloc du bas. Sur la référence c'est un compte à rebours d'examen ;
   ici c'est le rendez-vous du lundi matin, qui est LE moment du
   produit. Même forme, contenu qui nous appartient. */
.bloc-rdv {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.bloc-rdv .intitule {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-bottom: 10px;
}
.bloc-rdv .quand {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.bloc-rdv .quand small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-ink-3);
  margin-top: 5px;
}
.bouton-rejoindre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: var(--pill);
  background: var(--on-ink);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bouton-rejoindre:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(255, 255, 255, 0.4);
}
.bouton-rejoindre svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Deux halos colorés, pas une image : rien à télécharger, et la couleur
   reste celle de la marque quelle que soit la largeur d'écran. */
.heros::before,
.heros::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  pointer-events: none;
}
/* Discret : l'illustration porte désormais sa propre lueur, deux halos
   superposés au même endroit feraient une tache. */
.heros::before {
  width: 620px;
  height: 620px;
  background: var(--accent-dark);
  top: -320px;
  right: -220px;
  opacity: 0.28;
}
.heros::after {
  width: 480px;
  height: 480px;
  background: #0f766e;
  bottom: -300px;
  left: -180px;
  opacity: 0.35;
}

.heros .conteneur {
  position: relative;
  z-index: 1;
}

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--pill);
  background: var(--on-ink-surface);
  border: 1px solid var(--on-ink-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-ink-2);
  margin-bottom: 28px;
}
.etiquette .point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 16ch;
}
h1 .surligne {
  background: linear-gradient(105deg, var(--accent) 10%, #5eead4 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accroche {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--on-ink-2);
  max-width: 56ch;
  margin: 0 0 38px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.mention-actions {
  margin-top: 18px;
  font-size: 13px;
  color: var(--on-ink-3);
}

/* ────────────────────────── Compteurs vivants ────────────────────── */

.compteurs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--on-ink-surface);
  border: 1px solid var(--on-ink-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
  .compteurs {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

.compteur {
  text-align: center;
}
.compteur .valeur {
  display: block;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.compteur .libelle {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--on-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Tant que le chiffre n'est pas arrivé, un tiret cadratin — jamais un
   zéro, qui se lit comme une vraie valeur et ferait croire à un produit
   vide le temps du chargement. */
.compteur .valeur[data-etat="chargement"] {
  color: var(--on-ink-3);
}

/* ────────────────────────────── Sections ─────────────────────────── */

section {
  padding: 92px 0;
}

section.alt {
  background: var(--ink-soft);
  border-top: 1px solid var(--on-ink-border);
  border-bottom: 1px solid var(--on-ink-border);
}

.titre-section {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 16px;
  max-width: 22ch;
}

.sous-titre {
  color: var(--on-ink-2);
  max-width: 62ch;
  margin: 0 0 52px;
  font-size: 1.05rem;
}

.oeil {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ─────────────────────────── Le rituel ───────────────────────────── */

.rituel {
  display: grid;
  gap: 2px;
  background: var(--on-ink-border);
  border: 1px solid var(--on-ink-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.etape {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 26px;
  padding: 28px 30px;
  background: var(--ink);
  align-items: start;
}

@media (max-width: 700px) {
  .etape {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 22px;
  }
}

.etape .quand {
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
  padding-top: 3px;
}
.etape h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.etape p {
  margin: 0;
  color: var(--on-ink-2);
  font-size: 15px;
}

/* Le moment clé du produit est signalé, pas noyé dans la liste. */
.etape.phare {
  background: linear-gradient(
    100deg,
    rgba(6, 78, 59, 0.55),
    rgba(19, 27, 44, 0.9)
  );
}

/* ────────────────────────────── Cartes ───────────────────────────── */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.carte {
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--ink-carte);
  border: 1px solid var(--on-ink-border);
}
.carte h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.carte p {
  margin: 0;
  color: var(--on-ink-2);
  font-size: 15px;
}
.carte .pictogramme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(52, 211, 153, 0.13);
  border: 1px solid rgba(52, 211, 153, 0.28);
  margin-bottom: 18px;
}
.carte .pictogramme svg {
  width: 21px;
  height: 21px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═════════════════════ Terrain, cages, décor foot ═════════════════ */

/* Le terrain est DESSINÉ en CSS, pas photographié. Une photo de stade
   c'est 400 ko, un droit d'image à vérifier, et un rendu qui jure avec
   l'encre de la marque. Des lignes blanches translucides en perspective
   donnent le même signal — « c'est du foot » — pour zéro octet. */

.terrain {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  perspective: 620px;
  overflow: hidden;
}

.terrain .pelouse {
  position: absolute;
  inset: 0;
  transform: rotateX(66deg) scale(1.9);
  transform-origin: 50% 100%;
  background-image:
    /* rond central */
    radial-gradient(
      circle at 50% 42%,
      transparent 118px,
      rgba(255, 255, 255, 0.07) 119px,
      rgba(255, 255, 255, 0.07) 121px,
      transparent 122px
    ),
    /* ligne médiane */
      linear-gradient(
        to bottom,
        transparent calc(42% - 1px),
        rgba(255, 255, 255, 0.07) 42%,
        transparent calc(42% + 1px)
      ),
    /* bandes de tonte */
      repeating-linear-gradient(
        to right,
        rgba(52, 211, 153, 0.05) 0 90px,
        transparent 90px 180px
      );
  /* Le terrain s'efface vers le haut : il doit suggérer la profondeur,
     jamais concurrencer le texte posé dessus. */
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 82%);
  mask-image: linear-gradient(to top, #000 8%, transparent 82%);
}

/* Une cage vue de face, en fil de fer. Trois traits et un filet. */
.cage {
  position: absolute;
  width: 200px;
  height: 96px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.13) 0 1px,
      transparent 1px 13px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.13) 0 1px,
      transparent 1px 13px
    );
  pointer-events: none;
}
/* Positionnées derrière l'éventail de cartes : elles y lisent comme un
   but, alors que dans le héros elles entraient en collision avec
   l'illustration. Le parent porte `position: relative`. */
.cage-gauche {
  left: -30px;
  bottom: 6%;
  transform: perspective(360px) rotateY(26deg);
  opacity: 0.5;
}
.cage-droite {
  right: -30px;
  bottom: 6%;
  transform: perspective(360px) rotateY(-26deg);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .cage {
    display: none;
  }
}

/* ═══════════════════════ La carte de joueur ══════════════════════ */

/* Reproduction fidèle du style « vitrine » de l'app
   (src/app/api/carte/[joueurId]/route.tsx) : OVR en haut à gauche,
   poste dessous, bandeau de nom en bas, valeur en TT à droite.
   Si la carte du produit change, celle-ci doit suivre — sinon le site
   promet un objet qui n'existe pas. */

.carte-joueur {
  position: relative;
  width: 300px;
  aspect-ratio: 9 / 14;
  border-radius: var(--r-xl);
  padding: 5px;
  background: linear-gradient(150deg, var(--accent-deep) 0%, #0b1120 70%);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  flex: none;
}

.carte-joueur .cadre {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(11, 17, 32, 0.55);
  overflow: hidden;
}

/* La zone photo. Sur le site, aucune photo réelle : un dégradé et une
   silhouette. Mettre le visage d'une personne existante sur une carte
   qui affiche un OVR et une valeur marchande serait exactement le
   « profil fantôme » que le skill RGPD interdit. */
.carte-joueur .portrait {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 70% at 50% 18%,
      rgba(52, 211, 153, 0.28) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #17304a 0%, #101a2c 55%, #0b1120 100%);
}
.carte-joueur .silhouette {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: 128px;
  height: 150px;
  transform: translateX(-50%);
  opacity: 0.5;
}
.carte-joueur .silhouette svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.16);
}

.carte-joueur .haut {
  position: relative;
  display: flex;
  padding: 20px;
  flex: 1;
}
.carte-joueur .attributs {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.carte-joueur .ovr {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.carte-joueur .ovr-libelle {
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-top: 3px;
}
.carte-joueur .poste {
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-top: 9px;
  font-weight: 700;
}

.carte-joueur .bandeau {
  position: relative;
  padding: 16px 18px 18px;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(to top, rgba(11, 17, 32, 0.97), rgba(11, 17, 32, 0.6));
}
.carte-joueur .pseudo {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.carte-joueur .clan {
  font-size: 12.5px;
  opacity: 0.75;
  margin-top: 3px;
}
.carte-joueur .ligne-valeur {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 14px;
  gap: 10px;
}
.carte-joueur .delta {
  font-size: 12.5px;
  opacity: 0.9;
  color: var(--accent);
  font-weight: 700;
}
.carte-joueur .valeur-tt {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── L'éventail de cartes du héros, en 3D ─────────────────────────── */

/* Le conteneur ancre les cages posées derrière l'éventail. */
#carte .conteneur {
  position: relative;
}

.eventail {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 70px;
  perspective: 1400px;
  min-height: 470px;
}

.eventail .carte-joueur {
  position: absolute;
  bottom: 0;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Les quatre cartes latérales sont plus petites, inclinées et reculées.
   `--i` porte le rang, `--x` le décalage : une seule règle sert les
   quatre positions. */
.eventail .rang-2,
.eventail .rang-3 {
  width: 236px;
  opacity: 0.82;
}
.eventail .rang-4,
.eventail .rang-5 {
  width: 200px;
  opacity: 0.55;
}

.eventail .rang-1 {
  z-index: 5;
  transform: translateY(-26px) scale(1.04);
  box-shadow: 0 40px 90px -24px rgba(16, 185, 129, 0.45),
    0 0 0 1px rgba(52, 211, 153, 0.35);
}
.eventail .rang-2 {
  z-index: 4;
  transform: translateX(-208px) translateY(6px) rotate(-9deg) rotateY(19deg);
}
.eventail .rang-3 {
  z-index: 4;
  transform: translateX(208px) translateY(6px) rotate(9deg) rotateY(-19deg);
}
.eventail .rang-4 {
  z-index: 3;
  transform: translateX(-368px) translateY(34px) rotate(-15deg) rotateY(28deg);
}
.eventail .rang-5 {
  z-index: 3;
  transform: translateX(368px) translateY(34px) rotate(15deg) rotateY(-28deg);
}

.eventail .carte-joueur:hover {
  transform: translateY(-40px) scale(1.06);
  z-index: 6;
}

/* La halo posé sous l'éventail : c'est lui qui donne l'impression que
   les cartes flottent au-dessus du terrain. */
.eventail::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 720px;
  height: 130px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(52, 211, 153, 0.3) 0%,
    transparent 68%
  );
  filter: blur(28px);
  pointer-events: none;
}

@media (max-width: 1060px) {
  .eventail .rang-4,
  .eventail .rang-5 {
    display: none;
  }
  .eventail .rang-2 {
    transform: translateX(-150px) translateY(14px) rotate(-9deg) rotateY(19deg);
  }
  .eventail .rang-3 {
    transform: translateX(150px) translateY(14px) rotate(9deg) rotateY(-19deg);
  }
}

@media (max-width: 680px) {
  .eventail {
    min-height: 400px;
    margin-top: 46px;
  }
  .eventail .rang-2,
  .eventail .rang-3 {
    display: none;
  }
  .eventail .rang-1 {
    width: 250px;
  }
}

/* ═════════════════════ Anatomie de la carte ══════════════════════ */

.anatomie {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 880px) {
  .anatomie {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
  }
}

.anatomie .presentoir {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
/* Légère rotation permanente : la carte se lit comme un OBJET posé,
   pas comme une image plate. */
.anatomie .presentoir .carte-joueur {
  transform: rotateY(-14deg) rotateX(5deg);
  transition: transform 0.5s ease;
}
.anatomie .presentoir .carte-joueur:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.03);
}

.legendes {
  display: grid;
  gap: 22px;
}
.legende {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
}
.legende .numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
}
.legende h4 {
  margin: 4px 0 4px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.legende p {
  margin: 0;
  color: var(--on-ink-2);
  font-size: 14.5px;
}

/* ═══════════════════ Fiche joueur et statistiques ════════════════ */

.fiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .fiche {
    grid-template-columns: 1fr;
  }
}

.panneau {
  padding: 26px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--ink-carte);
  border: 1px solid var(--on-ink-border);
}
.panneau > h3 {
  margin: 0 0 20px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panneau > h3 .note {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-ink-3);
  letter-spacing: 0;
}

/* En-tête de la fiche : identité + OVR, comme dans l'app. */
.entete-joueur {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.entete-joueur .jeton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-deep), #0f766e);
  font-weight: 800;
  font-size: 22px;
  flex: none;
}
.entete-joueur .nom {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.entete-joueur .meta {
  color: var(--on-ink-3);
  font-size: 13.5px;
  margin-top: 2px;
}
.entete-joueur .bloc-ovr {
  margin-left: auto;
  text-align: right;
  line-height: 1;
}
.entete-joueur .bloc-ovr .n {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.entete-joueur .bloc-ovr .l {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--on-ink-3);
  margin-top: 4px;
}

/* Barres d'attributs. La valeur est TOUJOURS écrite à côté : une barre
   seule ne se lit pas au pixel près, et c'est le chiffre qu'on vient
   chercher. */
.barres {
  display: grid;
  gap: 15px;
}
.barre-ligne .tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.barre-ligne .tete .l {
  color: var(--on-ink-2);
}
.barre-ligne .tete .v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.barre-piste {
  height: 8px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.barre-remplissage {
  height: 100%;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

/* Chiffres clés en grille. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--on-ink-border);
  border: 1px solid var(--on-ink-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.chiffre {
  background: var(--ink-carte);
  padding: 18px 12px;
  text-align: center;
}
.chiffre .n {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.chiffre .l {
  font-size: 11.5px;
  color: var(--on-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
  font-weight: 600;
}

/* Courbe d'OVR. SVG en pixels réels — surtout PAS
   preserveAspectRatio="none", qui transformerait les points en
   ellipses. C'est un défaut déjà rencontré et corrigé côté app. */
.courbe {
  width: 100%;
  height: auto;
  display: block;
}
.courbe .trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.courbe .aire {
  fill: url(#degradeCourbe);
  stroke: none;
}
.courbe .point {
  fill: var(--ink);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.courbe .grille {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}
.courbe .etiquette {
  fill: rgba(255, 255, 255, 0.52);
  font-size: 10px;
}

/* Derniers matchs. */
.matchs {
  display: grid;
  gap: 10px;
}
.ligne-match {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--on-ink-surface);
  border: 1px solid var(--on-ink-border);
  font-size: 14px;
}
.pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12.5px;
}
.pastille.v {
  background: rgba(52, 211, 153, 0.16);
  color: var(--accent);
}
.pastille.n {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-ink-2);
}
.pastille.d {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.ligne-match .quoi {
  color: var(--on-ink-2);
}
.ligne-match .score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ligne-match .var {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}
.ligne-match .var.plus {
  color: var(--accent);
}
.ligne-match .var.moins {
  color: #f87171;
}

.badge-motm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fcd34d;
  font-size: 12px;
  font-weight: 700;
}

.mention-fiction {
  margin-top: 26px;
  font-size: 13px;
  color: var(--on-ink-3);
  text-align: center;
}

/* ═════════════════════ Maquette de téléphone ═════════════════════ */

.demo-app {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 330px);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .demo-app {
    grid-template-columns: 1fr;
    gap: 44px;
    justify-items: center;
  }
  .demo-app .texte-demo {
    order: 2;
  }
}

.telephone {
  position: relative;
  width: 300px;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(150deg, #2c3446, #0d1220);
  box-shadow: 0 40px 90px -26px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: perspective(1500px) rotateY(-15deg) rotateX(4deg);
  transition: transform 0.5s ease;
  flex: none;
}
.telephone:hover {
  transform: perspective(1500px) rotateY(0deg) rotateX(0deg);
}

.telephone .ecran {
  position: relative;
  /* Ratio EXACT des captures (460 x 905) : c'est ce qui garantit
     qu'aucune n'est rognee. A changer si le format des captures
     change. */
  aspect-ratio: 460 / 905;
  border-radius: 36px;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  flex-direction: column;
}

/* L'îlot de la caméra : trois pixels qui font toute la crédibilité de
   la maquette. */
.telephone .ilot {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border-radius: var(--pill);
  background: #05070d;
  z-index: 3;
}

/* Emplacement de capture d'écran. Il est VISIBLEMENT vide : un faux
   contenu joli se retrouverait en ligne sans que personne remarque
   qu'il n'a jamais été remplacé. */
.emplacement-capture {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px;
  text-align: center;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0 12px,
    transparent 12px 24px
  );
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  margin: 8px;
  color: var(--on-ink-3);
}
.emplacement-capture .titre-emplacement {
  font-weight: 700;
  font-size: 14px;
  color: var(--on-ink-2);
}
.emplacement-capture .fichier {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--accent);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
  word-break: break-all;
}
.emplacement-capture .dimensions {
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* La galerie de captures, hors téléphone. */
.galerie-captures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.galerie-captures .emplacement-capture {
  aspect-ratio: 460 / 905;
  margin: 0;
  background-color: var(--ink-carte);
}

/* ───────────────────────── Bloc RGPD ─────────────────────────────── */

.rgpd-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.promesse {
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.22);
}
.promesse strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.promesse span {
  color: var(--on-ink-2);
  font-size: 14px;
}

.encadre-avertissement {
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--on-ink-2);
  font-size: 15px;
}
.encadre-avertissement strong {
  color: var(--amber);
}

/* ───────────────────────── Page juridique ────────────────────────── */

.page-texte {
  padding: 64px 0 96px;
}
.page-texte .conteneur {
  max-width: 760px;
}
.page-texte h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  max-width: none;
}
.page-texte h2 {
  margin: 52px 0 14px;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  padding-top: 22px;
  border-top: 1px solid var(--on-ink-border);
}
.page-texte h3 {
  margin: 30px 0 8px;
  font-size: 1.08rem;
}
.page-texte p,
.page-texte li {
  color: var(--on-ink-2);
}
.page-texte li {
  margin-bottom: 9px;
}
.page-texte .maj {
  color: var(--on-ink-3);
  font-size: 14px;
}

.tableau-enveloppe {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--on-ink-border);
  border-radius: var(--r-md);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 560px;
}
th,
td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--on-ink-border);
  vertical-align: top;
}
th {
  background: var(--on-ink-surface);
  font-weight: 700;
  color: var(--on-ink);
}
td {
  color: var(--on-ink-2);
}
tr:last-child td {
  border-bottom: none;
}

/* Emplacement laissé vide dans le texte juridique : il doit SAUTER aux
   yeux, pas se fondre dans le paragraphe. Publier la page avec un
   « à compléter » invisible serait pire que ne rien publier. */
.a-completer {
  background: rgba(245, 158, 11, 0.2);
  border-bottom: 2px dashed var(--amber);
  color: #fde68a;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ───────────────────────────── Pied ──────────────────────────────── */

footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--on-ink-border);
  background: var(--ink-soft);
}
.pied-haut {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 34px;
}
.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.pied-liens a {
  color: var(--on-ink-2);
  font-size: 15px;
}
footer .mention {
  color: var(--on-ink-3);
  font-size: 13.5px;
  max-width: 62ch;
}