/*
 * TOKENS COVER — source unique de vérité visuelle de la web app.
 *
 * ORIGINE DES VALEURS — à lire avant de « corriger » quoi que ce soit.
 *
 * Les couleurs ont d'abord été TRANSCRITES de l'app iOS (`AppTheme.swift`) et du
 * Brand Kit, avec la règle « quand une couleur bouge sur iOS, elle bouge ici ».
 * Cette parité est ABANDONNÉE depuis la refonte de la Home (design « Home en
 * bandes », septembre 2026, Léo) : la palette ci-dessous est celle du design web,
 * et c'est une décision, pas une dérive. Le navy reste la marque, mais l'écran
 * d'un portable n'est pas celui d'un téléphone : les surfaces sont plates, les
 * filets sont du blanc en transparence, et la marque est un lavande (#8DA0F2)
 * plus doux que le bleu du Brand Kit (#6098FF) — qui, en aplat sur un grand
 * écran, transformait chaque lien en bouton. **Ne pas réaligner sur iOS.**
 *
 * Ce qui reste commun aux deux apps : les couleurs de JEU (`game-theme.ts`),
 * les couleurs de camp (`--c-side-*`) et de sort (`--c-win`, `--c-loss`) — le
 * design les reprend au chiffre près.
 *
 * RÈGLE : on nomme un RÔLE, jamais une valeur. `--c-text-secondary`, pas `--c-gray-58`.
 * Ajouter un rôle doit rester exceptionnel — c'est presque toujours le signe qu'un
 * composant peut réutiliser un rôle existant.
 *
 * L'app est en thème SOMBRE uniquement, comme iOS. Il n'y a pas de mode clair à
 * prévoir : le navy est l'identité de la marque, pas une préférence d'affichage.
 */

:root {
  /* ── Fond & surfaces ─────────────────────────────────────────────────────
   * L'échelle monte du plus sombre au plus clair : une carte est PLUS CLAIRE
   * que son fond, jamais plus sombre — c'est comme ça qu'elle se détache sans
   * bordure marquée. Le design est PLAT : pas de dégradé sur les cartes (sauf
   * la carte live, cf. `--g-card-live`), le relief vient du filet et de l'écart
   * de luminance entre deux crans. */

  /** Le plus sombre — vignettes, écran du téléphone de la vitrine. Un cran sous
   * le fond ; le design n'en donne pas, dérivé sur la même teinte. */
  --c-bg-deep: #060a16;
  /** Fond de page. LA couleur du design : un aplat, sans halo perceptible. */
  --c-bg: #090e1c;
  /** Surface de CONTRÔLE : plateau des onglets de période, champs, pastilles. */
  --c-surface: #131c2e;
  /** Onglet ou chip SÉLECTIONNÉ dans une surface de contrôle. Nettement plus
   * clair que `--c-surface` : c'est l'écart, pas la couleur, qui dit « actif ». */
  --c-surface-active: #2c3854;
  /** Chip de jeu sélectionnée — plus sombre que l'onglet actif (#2c3854) : une
   * chip est un filtre, un onglet est une page, ils ne s'allument pas pareil. */
  --c-chip-active: #1e2941;
  --c-chip-active-text: #e6edff;
  /** Compteur posé à côté d'un titre (« Le fil des matchs · 7 »). */
  --c-badge: #1a2335;
  --c-badge-text: #9facbf;
  /** Score d'un match qui ne se joue pas (à venir, terminé) et le « vs ». */
  --c-score-muted: #8c9ab1;
  /** Les deux-points du score hero, plus petits et plus sourds que les chiffres. */
  --c-score-colon: #667085;
  /** Étoile de favori sur une carte : éteinte, allumée. */
  --c-star: #596b88;
  --c-star-on: #93a8ed;
  /** Ligne « Manche 2 · 27:25 » sous le score : un rosé, pas le rouge live. */
  --c-live-text: #e9a09e;
  /** Corps d'une carte. Cartes de match, hero, panneaux du rail : tout est là. */
  --c-card: #151e30;
  /** Surface pleine posée SUR une carte ou à côté d'elle : champ de recherche,
   * chips. À un cheveu au-dessus de `--c-card` — le design est plat, deux
   * surfaces adjacentes ne diffèrent que d'un cran. */
  --c-card-base: #161e33;
  /** Survol d'une carte, et haut des rares dégradés. Un cran de plus. */
  --c-card-top: #1a263d;
  /** Carte d'un match TERMINÉ : plus sombre que `--c-card`, pour que le fil se
   * lise d'un coup d'œil — ce qui est fini s'efface, ce qui vient reste. */
  --c-card-done: #101828;
  /** Fond d'une carte de match EN DIRECT — le seul dégradé du fil, à peine plus
   * clair côté statut que côté étoile. Léger à dessein : c'est la pastille
   * rouge qui dit « live », pas le fond. */
  --g-card-live: linear-gradient(100deg, #1b273c, #182133);

  /* ── Texte ───────────────────────────────────────────────────────────────
   * Gris-bleu du design, jamais du blanc pur : sur ce navy, le blanc pur vibre.
   * Les rôles secondaires portent leur opacité — elle fait partie du rôle, ne
   * pas la retirer : c'est elle qui garde le même gris sur une carte et sur le
   * fond. */

  --c-text-primary: #f2f4f9;
  /** Texte secondaire PLEIN — le gris des cartes du design (« Playoffs · Bo5 »,
   * ligne de compétition, sous-titre MVP). Plein et non translucide : posé sur
   * une carte, un rgba à 60 % tombait à #737d91, un cran trop sombre. */
  --c-text-secondary: #a5adbe;
  /** Libellés discrets pleins : kicker, onglet inactif, chips de jeu, boutons
   * « tranquilles » (Masquer les scores, Voir les matchs), texte des badges. */
  --c-text-muted: #9da6ba;
  /** Petites mentions DANS une carte : heure sous LIVE, « Bo3 », « Terminé »,
   * légende « SCORE DE LA SÉRIE ». */
  --c-text-faint: #8b98af;
  /** Le plus effacé des gris pleins : phase de tournoi, compteurs de groupe,
   * pied du fil, footer. */
  --c-text-dim: #7e8ba1;
  /** Les deux voiles translucides du design, pour ce qui se pose sur le FOND
   * ou le header plutôt que sur une carte : nav inactive, placeholder de
   * recherche, « Gérer », ligue dans « À ne pas manquer » (60 %) ; « vs »,
   * heures du ticker, format (40 %). */
  --c-text-soft: rgb(178 188 210 / 0.6);
  --c-text-tertiary: rgb(178 188 210 / 0.4);

  /* ── Filets & bordures ───────────────────────────────────────────────────
   * Du blanc en transparence, pas un gris opaque : le même filet vaut sur le
   * fond, sur une carte et sur une carte terminée. */

  --c-border: rgb(255 255 255 / 0.07);
  --c-border-strong: rgb(255 255 255 / 0.13);

  /* ── États ──────────────────────────────────────────────────────────────
   * `--c-live` est le rouge le plus saturé de l'app et le reste : rien d'autre
   * ne doit crier aussi fort qu'un match en direct. `--c-live-soft` est sa
   * version TEXTE — le rouge plein sur navy sombre est trop dense pour se lire
   * en 11px ; on l'éclaircit pour le mot « EN DIRECT », et on garde le plein
   * pour la pastille. */

  --c-live: #ff645e;
  --c-live-soft: #ff7b74;
  --c-win: #40d173;
  --c-loss: #ed4c52;
  /** ATTENTION / FAIBLE CONFIANCE. Le seul rôle de cette échelle qui n'ait pas
   * d'équivalent iOS, et il est ajouté pour le data studio — où un chiffre peut
   * être exact ET peu fiable (un taux de 100 % calculé sur un match, une
   * métrique dont le scoreboard manque sur la moitié des games).
   *
   * Il fallait une couleur SÉMANTIQUE distincte de `--c-accent` : l'accent
   * change avec le jeu affiché, donc une alerte peinte à l'accent serait bleue
   * sur LoL et rouge sur Valorant — c'est-à-dire illisible comme alerte, et
   * confondue avec `--c-loss` sur l'un des deux. Ambre parce qu'aucune autre
   * couleur de l'app ne l'occupe, et qu'elle se distingue du vert et du rouge y
   * compris pour un daltonisme deutan.
   *
   * Ce n'est PAS une couleur d'erreur : une erreur est un échec (`--c-loss`),
   * une faible confiance est un résultat valide qu'il faut lire avec prudence. */
  --c-warn: #e8a33d;
  /* ── Camps d'une manche ─────────────────────────────────────────────────
   * Les deux côtés d'un relevé détaillé. Transcrits d'iOS (`LoLGameDetailView`
   * pour le duo bleu/rouge, `ValorantGameDetailView` pour l'orange/turquoise).
   *
   * Ils ne suivent PAS l'accent du jeu, et c'est le point : dans un scoreboard
   * les deux camps doivent se distinguer L'UN DE L'AUTRE. Un accent unique les
   * peindrait de la même couleur, et l'œil ne saurait plus de quel côté il lit.
   *
   * LoL nomme un CAMP réel de la Faille (le payload dit qui joue blue side) ;
   * Valorant n'en a pas — ses deux teintes ne désignent que l'équipe A et
   * l'équipe B, dans l'ordre de la page match. */

  --c-side-blue: #5b8dff;
  --c-side-red: #ff4655;
  --c-side-a: #ef672d;
  --c-side-b: #3cc7ba;

  /** Bleu-ardoise du badge OFFICIEL (streams). FIXE — il ne suit PAS l'accent du
   * jeu, sinon le badge change de couleur d'un jeu à l'autre. Désaturé à dessein :
   * c'est une mention de provenance, elle ne doit pas concurrencer `--c-live`. */
  --c-official: #8ca8cc;

  /* ── Séries de graphique ────────────────────────────────────────────────
   * Palette CATÉGORIELLE, pour les graphiques du data studio qui portent
   * plusieurs séries (une comparaison de joueurs, un découpage par champion).
   *
   * Pourquoi elle ne peut PAS être l'accent du jeu, alors que tout le reste de
   * l'app l'est : l'accent encode « le jeu affiché ». Ici il faut encoder
   * « quelle série », et cinq séries sur la même teinte ne se distinguent plus.
   * Un graphique à UNE série garde bien `--c-accent` — c'est le seul cas où la
   * couleur n'a aucune identité à porter.
   *
   * L'ORDRE fait partie de la palette et ne se change pas : c'est lui qui
   * garantit que deux séries voisines restent distinguables sous protanopie et
   * deutéranopie. Une série se voit attribuer un emplacement dans l'ordre, sans
   * jamais recycler — au-delà de huit, on replie dans « autres » plutôt que de
   * fabriquer une neuvième teinte.
   *
   * Ces valeurs sont VÉRIFIÉES, pas choisies à l'œil : mesurées contre la carte
   * d'alors (#1a2440), elles passent les cinq contrôles calculables — bande de
   * clarté (L 0,48–0,67), plancher de chroma (≥ 0,10), séparation daltonisme
   * (pire paire adjacente ΔE 8,4 en OKLab ×100, cible ≥ 8), plancher en vision
   * normale (19,3 pour un plancher de 15) et contraste sur le fond (≥ 3:1).
   * La carte du design (#151e30) est plus sombre et de même teinte : le
   * contraste sur fond ne fait que monter, et la séparation entre séries ne
   * dépend pas du fond — d'où l'absence de revalidation. Toute modification
   * d'une série, elle, doit être revalidée, pas jugée. */

  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #d55181;
  --viz-6: #008300;
  --viz-7: #9085e9;
  --viz-8: #e66767;

  /* ── Marque ─────────────────────────────────────────────────────────────
   * `--c-brand` est le lavande du design (#8DA0F2) — ce n'est PLUS le #6098FF du
   * Brand Kit, cf. l'en-tête. Sur un fond plat il sert d'accent de LECTURE :
   * lien, point du titre, jauge de vote, focus. Il ne sert PAS de fond de
   * bouton — l'action primaire a sa propre paire, ci-dessous.
   *
   * `--c-halo` teinte les halos du fond ambiant : c'est le bleu LoL (#4F63D8),
   * volontairement plus sourd que la marque, parce qu'un halo en lavande vire
   * au mauve. */
  --c-brand: #8da0f2;
  --c-brand-strong: #6b8afa;
  --c-brand-soft: #c0cdff;
  --c-halo: #4f63d8;

  /** Bouton d'ACTION PRIMAIRE (« Suivre le match ») : presque blanc, texte navy.
   * Le design fait de l'action primaire la surface la plus CLAIRE de l'écran,
   * pas la plus colorée — sur une page qui porte déjà douze couleurs de jeu et
   * un rouge live, un bouton bleu de plus ne se distinguerait de rien. Une seule
   * action par écran a droit à cette paire ; au survol elle passe au blanc.
   *
   * `--c-action-text` est LU AUSSI par `--c-sheet-ink` (plus bas) : c'est
   * l'encre de la feuille claire de la vitrine, titres et disques compris. Le
   * retoucher repeint deux sections entières de `/about`. */
  --c-action: #dce4ff;
  --c-action-hover: #ffffff;
  --c-action-text: #111b32;

  /** AVATAR du compte, dans le header. Un bleu-ardoise désaturé (le design
   * écrit `hsl(215 45% 45%)`), en retrait de `--c-brand` : c'est un repère,
   * pas un bouton. L'initiale est en blanc pur, comme dans le design. */
  --c-avatar: hsl(215 45% 45%);
  --c-avatar-text: #ffffff;

  /* ── Verre ──────────────────────────────────────────────────────────────
   * Approximation du Liquid Glass iOS : un `backdrop-filter: blur()` plus ces
   * fills. Neutre (gris), pas bleuté — un verre teinté sur un fond teinté donne
   * une tache de couleur. Le design de la Home ne s'en sert plus (cartes
   * pleines) ; le rôle reste pour les autres écrans. */

  --c-glass-top: rgb(224 227 234 / 0.14);
  --c-glass-bottom: rgb(202 207 218 / 0.044);
  --c-glass-border: rgb(212 216 226 / 0.13);
  --c-glass-highlight: rgb(255 255 255 / 0.12);
  --blur-glass: blur(20px) saturate(140%);

  /* ── Arrondis ───────────────────────────────────────────────────────────
   * ÉCHELLE FERMÉE. Avant elle, l'app iOS portait 15 valeurs sans règle : deux
   * surfaces du même rôle finissaient à 13 sur un écran et 16 sur l'autre. On
   * nomme ici le RÔLE de la surface, pas sa taille.
   *
   * Resserrée avec le design de septembre 2026 (elle valait 4 · 8 · 13 · 16 ·
   * 20 · 22, en parité iOS) : les grands rayons donnaient du « bulle » à des
   * cartes que le design veut nettes, et un rayon de 20 sur une carte de 87px
   * de haut mange ses angles. `panel` et `feature` partagent 16 : on garde les
   * deux rôles, parce qu'un composant qui se dit `feature` dit quelque chose de
   * sa place dans la page, et que les deux pourront rediverger.
   *
   * EXCEPTION assumée : les CHIPS DE LOGO ne sont pas dans l'échelle. Leur arrondi
   * est proportionnel (`size * 0.30`, cf. `EntityLogo`) — c'est le squircle iOS,
   * où un rayon fixe paraît carré sur une grande icône et rond sur une petite. */

  /* ── Vitrine : la feuille ───────────────────────────────────────────────
   * Le SECOND contexte de couleur de l'app, et le seul : la landing pose une
   * FEUILLE claire bord à bord dans la page navy — la section des démos
   * (`LandingDemo`) et celle des jeux (`LandingGames`), les deux inventaires
   * de la page. On nomme ces rôles « sheet » plutôt que de surcharger
   * `--c-card` / `--c-text-*`, qui sont navy et le restent : rien d'autre
   * dans l'app n'est clair, et l'en-tête de ce fichier le dit — il n'y a pas
   * de mode clair, il y a UNE feuille, posée deux fois. « light » disait un
   * mode d'affichage et « bande » disait un seul endroit : ni l'un ni l'autre
   * n'était vrai.
   *
   * Le papier est un PÉRIWINKLE pâle, la lavande de marque diluée (Léo,
   * 9 sept. 2026 au soir : « j'aimerais tester d'autres harmonisations de
   * couleur tout en restant dans le bleu de l'app »). La première version
   * reprenait le gris d'apple.com au chiffre près (#f5f5f7, encre #1d1d1f) :
   * la grammaire était bonne, la couleur ne tenait à rien dans une page bleue.
   *
   * La tuile, elle, reste BLANC PUR : c'est la lumière de la feuille, et
   * surtout c'est ce qui détache les écrans NAVY des téléphones (12,7 à
   * 15,9:1) — le piège que toute palette sombre reposait. Blanc sur périwinkle
   * fait 1,21:1, plus franc que les 1,09 d'Apple : les coins des tuiles se
   * voient, et c'est voulu. Aucune couleur SATURÉE dans la section : la marque
   * n'y est que diluée dans le papier, et l'encre est le navy de la page
   * (`--c-action-text`, celui du bouton du héros) — c'est elle qui rattache la
   * feuille au reste du site. */

  /* Sections de présentation : navy relevé, cartes bleu-gris et texte clair. */
  --c-sheet-bg: #12182a;
  --c-sheet-card: #1b2438;
  --c-sheet-ink: #f1f3f9;
  --c-sheet-ink-soft: #bac3d5;
  --c-sheet-control: #35415a;
  --c-sheet-control-ink: #f1f3f9;
  --c-sheet-control-hover: #465574;
  --c-sheet-border: rgb(255 255 255 / 0.08);

  --r-hairline: 4px; /* barres de squelette, jauges, filets, option d'onglet */
  --r-chip: 6px; /* pastilles, chips et surfaces ≈36px et moins */
  --r-tile: 10px; /* tuiles et contrôles moyens : stats, champs, boutons de bracket */
  --r-card: 14px; /* LIGNES et cartes — la valeur la plus fréquente */
  --r-panel: 16px; /* grandes surfaces : hero, panneaux de détail */
  --r-feature: 16px; /* pièces pleine largeur qui dominent : affiches, en-têtes */

  /* ── Espacement ─────────────────────────────────────────────────────────
   * Échelle de 4. Absente d'iOS (SwiftUI pose ses marges au cas par cas), donc
   * propre au web — mais fermée pour la même raison que les arrondis. */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Typographie ────────────────────────────────────────────────────────
   * Deux familles, une règle binaire : **SF parle, Barlow crie.**
   *  - `--font-ui` (système) porte tout ce qui se LIT : phrases, libellés,
   *    noms d'équipe, métadonnées. On part du système parce que c'est ce que
   *    fait iOS (SF Pro), et qu'une webfont de texte coûte un FOUC.
   *  - `--font-display` (Barlow Condensed) porte tout ce qui se REGARDE : les
   *    scores, les heures en grand, les titres display (« Au cœur du jeu. »),
   *    le badge de ligue, le wordmark. Graisses 600/700/800, toujours en
   *    `tabular-nums` (cf. `.t-display`). JAMAIS sur du texte courant : en
   *    condensé, une phrase de 14px devient illisible. Le 900 est réservé au
   *    wordmark. */

  /* Barlow STANDARD, pas Condensed : parité de familles avec iOS (`Typography.swift`,
   * `coverDisplay`), fichiers auto-hébergés, cf. `base.css`. */
  --font-display: 'Barlow', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* Sora, la fonte de MARQUE — le mot COVER et rien d'autre (`BrandFont.swift`). */
  --font-brand: 'Sora', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, monospace;

  /* RÔLES TYPO — nommés d'après `Typography.swift`, mais PLUS PETITS D'UN CRAN.
   *
   * Ils ont d'abord repris les tailles iOS (en pt) telles quelles en px, pour
   * garder la parité visuelle avec l'app. **Cette parité est abandonnée**, et
   * c'est une décision, pas une dérive : une taille en pt est calibrée pour un
   * téléphone tenu à 30 cm, pas pour un écran de portable à 60 cm. Les mêmes
   * valeurs qui paraissent justes sur iPhone paraissent grosses sur un MacBook,
   * et elles mangeaient la largeur dont les gouttières ont besoin.
   *
   * L'écart n'est PAS uniforme, et c'est le point. Le titre de page perd 10px
   * (34 → 24 : c'est lui qui était disproportionné sur un écran de bureau), les
   * rôles de texte en perdent un, et le bas de l'échelle ne bouge pas.
   *
   * Une passe a bien réduit le bas de l'échelle aussi, puis a été DÉFAITE : elle
   * n'achetait rien — passer un corps de 13 à 12 ne libère aucune largeur — et
   * elle coûtait la hiérarchie, sept rôles se retrouvant à partager deux
   * tailles. Une échelle dont la moitié des rôles ont le même corps n'est plus
   * une échelle. La largeur, elle, vient du gabarit, des images et de la mise en
   * page ; jamais du corps du texte.
   *
   * Plancher à 10px, en dessous duquel des capitales avec tracking cessent de se
   * lire. L'échelle qui en résulte : 24 · 16 · 14 · 13 · 12 · 11 · 10.
   *
   * Chaque rôle porte taille + graisse. Le tracking et la couleur, quand ils
   * font partie du rôle (badge, libellé de section), sont dans la classe utilitaire
   * correspondante — cf. `base.css`. */

  --t-page-title: 700 28px/1.15 var(--font-ui); /* titre de page */
  --t-heading: 600 16px/1.3 var(--font-ui); /* titre d'un bloc, état vide */
  --t-section-label: 800 10px/1.2 var(--font-ui); /* libellé de section, capitales */
  --t-row-title: 600 14px/1.3 var(--font-ui); /* nom d'entité dans une LIGNE */
  --t-row-subtitle: 500 12px/1.3 var(--font-ui); /* sous-titre d'une ligne */
  --t-card-title: 600 12px/1.3 var(--font-ui); /* nom sous une CARTE */
  --t-body: 500 13px/1.45 var(--font-ui); /* phrase adressée à l'utilisateur */
  --t-control-label: 600 13px/1.2 var(--font-ui); /* texte d'un contrôle cliquable */
  --t-entity-tag: 700 12px/1.2 var(--font-ui); /* acronyme d'équipe */
  --t-badge: 700 10px/1.2 var(--font-ui); /* pastille d'état */
  --t-caption: 600 11px/1.3 var(--font-ui); /* annotation, métadonnée */
  --t-meta: 600 10px/1.3 var(--font-ui); /* variante DENSE de l'annotation */

  /* Les deux rôles DISPLAY du design. Le seul texte en Barlow qui ait une
   * taille de rôle : les scores et les heures, eux, sont hors échelle (littéral
   * commenté sur place, composé avec `.t-display`). */
  --t-display-title: 700 40px/1.05 var(--font-display); /* grand titre display d'une page */
  --t-kicker: 600 11px/1.2 var(--font-ui); /* surtitre en capitales espacées, au-dessus d'un titre */

  /* ── Élévation ──────────────────────────────────────────────────────────
   * Ombres portées discrètes : en thème sombre, une ombre noire sur du navy ne
   * se voit pas — c'est le liseré clair du haut qui crée le relief. */

  --e-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 24px rgb(0 0 0 / 0.28);
  --e-panel: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 16px 48px rgb(0 0 0 / 0.36);
  /** Un élément qui se SOULÈVE de sa surface de contrôle : l'onglet actif d'un
   * groupe de période. Courte et faible — elle dit « posé dessus », pas
   * « flottant ». */
  --e-lift: 0 1px 3px rgb(0 0 0 / 0.2);
  /** Ombre sous un logo posé À NU (les deux écussons du hero) : c'est elle qui
   * le décolle de la carte. À passer dans un `drop-shadow()`, pas un
   * `box-shadow` — l'ombre suit le contour du logo, pas son carré. */
  --e-crest: 0 6px 14px rgb(0 0 0 / 0.5);

  /* ── Mouvement ──────────────────────────────────────────────────────────
   * Courbes proches des ressorts SwiftUI. Rien au-dessus de 320ms : au-delà,
   * une transition d'interface se ressent comme une latence. */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 320ms;

  /* ── Gabarit ────────────────────────────────────────────────────────────
   * Largeur maximale du contenu. L'app iOS est une colonne ; sur desktop on ne
   * l'étire pas à 2000px — on la borne et on centre, sinon une carte de match
   * devient une ligne de tableau illisible. */

  /** Largeur maximale de la zone contenu + rail. Au-delà, une ligne de match
   * devient une ligne de tableau que l'œil ne suit plus d'un bout à l'autre.
   *
   * Elle est descendue jusqu'à 940 pour dégager des gouttières publicitaires,
   * puis REMONTÉE À 1200 : c'était le mauvais levier. Le jour où une régie
   * arrive, la pub va DANS la bande de contenu (rail et flux), où la place
   * existe par construction ; le contenu n'a pas à payer pour elle.
   *
   * 1280 depuis le design de septembre 2026 : c'est la largeur à laquelle le
   * hero (carte + panneau de 360) et le fil (cartes + rail de 300) tiennent
   * sans que la carte de match passe sous les 600px où ses deux équipes se
   * marchent dessus. */
  --w-content: 1280px;
  --w-narrow: 760px;
  /** Rail contextuel de droite. Il vaut 300 et non 288 : c'est la largeur des
   * formats publicitaires standards de colonne (300×250, 300×600), et il en
   * accueille un en pied. Douze pixels pour n'avoir jamais à choisir entre le
   * contenu du rail et son emplacement. */
  --w-rail: 300px;
  /** Hauteurs du chrome (header collant + ticker des directs). Ce sont les
   * SEULES bandes horizontales de l'app, et elles sont nommées ici pour que
   * `scroll-padding-top` et les ancres tombent juste sous le header — pas
   * dessous, cachées. La barre latérale de 208px a disparu avec le design de
   * septembre 2026 ; sa largeur est allée au contenu (1200 → 1280) et au rail. */
  --h-topbar: 80px;
  --h-ticker: 42px;
  /** Panneau « À ne pas manquer », à droite du hero. Plus large que le rail
   * (360 contre 300) parce qu'il porte une heure en grand ET deux équipes sur
   * la même ligne ; à 300 l'une des deux passerait à la ligne. */
  --w-aside-hero: 360px;

  /* Pas de gouttières publicitaires. Elles ont existé (paliers calculés à 1512
   * / 1696 / 1976), et c'est le design « Home en bandes » de septembre 2026 qui
   * les a retirées : la page est centrée, sans emplacement, et à 1512px — la
   * largeur d'un MacBook Pro 14" — le premier palier décalait tout le contenu
   * vers la gauche. Quand une régie arrivera, la place est DANS la bande de
   * contenu : le pied du rail (300 = largeur des formats de colonne) et le
   * flux après le premier groupe. Cf. CLAUDE.md, « Où vit la publicité ». */
}

/* L'accent du JEU affiché. Posé dynamiquement sur un conteneur par
 * `useGameTheme()` (cf. `src/design/game-theme.ts`) — un composant lit
 * `--c-accent` sans jamais savoir de quel jeu il s'agit. Valeur par défaut :
 * le lavande de la marque, pour les écrans multi-jeux. */
:root,
[data-game] {
  --c-accent: var(--c-brand);
}

/* Palette de la présentation de l’app, sans modifier les vues du serveur. */
.landing,
.phone-landing {
  --c-bg: #0c1020;
  --c-bg-deep: #0c1020;
  --c-card: #1b2438;
  --c-card-base: #1b2438;
  --c-card-top: #1b2438;
  --c-surface: #12182a;
  --c-border: rgb(255 255 255 / 0.08);

  background: var(--c-bg);
}
/*
 * LA FEUILLE DE STYLE DES PAGES JURIDIQUES STATIQUES.
 *
 * Elle est servie en DEUX morceaux concaténés, et le premier n'est pas ici :
 * `prerender/plugin.ts` lui préfixe `src/design/tokens.css`, lu sur le disque.
 * C'est le point important — les couleurs, les arrondis, l'échelle
 * typographique et l'espacement des pages juridiques sont exactement ceux de
 * l'app, parce que c'est LE MÊME FICHIER. Une valeur qui bouge dans le design
 * system bouge ici au prochain build, sans que personne ait à y penser.
 *
 * Ce fichier-ci ne contient donc aucun littéral de couleur ni de taille de
 * texte, comme n'importe quel `.vue` du projet : rien que des `var(--*)`. Les
 * seules valeurs en dur sont des géométries propres à la mise en page (largeur
 * minimale de tableau, épaisseur de filet), commentées sur place.
 *
 * Ce qui est REPRIS de `base.css` plutôt qu'importé : le reset y est mêlé aux
 * couches `@layer` et aux réglages PrimeVue, dont ces pages n'ont rien à faire.
 * On reprend les quatre règles qui comptent — la boîte, les marges, le focus
 * visible, le mouvement réduit — et pas les cent autres.
 *
 * Un vrai `.css` et non une chaîne dans un `.ts` : les commentaires du projet
 * citent le code entre accents graves, ce qui referme un template literal au
 * premier `--w-narrow` cité. Le fichier se relit aussi comme du CSS, et
 * Prettier le formate comme tel.
 */
/* ── Reset, réduit à ce dont une page de texte a besoin ─────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text-secondary);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
blockquote,
figure {
  margin: 0;
}

/* Le focus au CLAVIER reste visible partout. Non négociable : c'est la seule
 * indication de position pour qui n'utilise pas de souris, et une page de
 * plusieurs centaines de lignes se parcourt beaucoup au clavier. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-hairline);
}

/* Respecte le réglage système, comme le reste de l'app. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Le nom complet de la marque, lisible par un lecteur d'écran et invisible à
 * l'œil : le lockup affiche « over », les trois arcs faisant le C. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Rôles typographiques ───────────────────────────────────────────────── */
.t-page-title {
  font: var(--t-page-title);
  letter-spacing: -0.02em;
}
.t-heading {
  font: var(--t-heading);
}
.t-row-title {
  font: var(--t-row-title);
}
.t-body {
  font: var(--t-body);
}
.t-control-label {
  font: var(--t-control-label);
}
.t-caption {
  font: var(--t-caption);
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */
/* La barre de la VITRINE (`LandingNav`) dans son état voilé : même bande collée
 * en haut, même filet, même colonne de 1120px, même lockup. Ces pages ne
 * défilent pas depuis un héros — la barre est donc voilée d'emblée, sans le
 * JavaScript qui la fait passer de transparente à voilée. */
.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--c-bg) 82%, transparent);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--c-border);
}

.chrome__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* 1120 : la colonne de `LandingNav` (littérale là-bas aussi). La marque
   * tombe donc au même endroit qu'on vienne de la vitrine ou non. */
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--s-3) var(--s-6);
}

.chrome__marque {
  display: flex;
  flex-shrink: 0;
  color: var(--c-text-primary);
  text-decoration: none;
}

/* Sora, depuis les fichiers de l'app — la même déclaration que `base.css`. */
@font-face {
  font-family: 'Sora';
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/Sora-Variable.ttf') format('truetype-variations');
}

/* `CoverWordmark` à `size = 24`, valeurs résolues : l'écart vaut 0,3 × la
 * taille, le mot 0,73 × la taille. Les garder proportionnelles là-bas et
 * littérales ici — ce fichier n'a pas de props. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
}

.marque__logo {
  display: block;
  flex-shrink: 0;
}

.marque__mot {
  font-family: var(--font-brand);
  font-weight: 750;
  text-transform: uppercase;
  /* Fait partie de la marque (tracking d'iOS), pas de la mise en page. */
  letter-spacing: 0.085em;
  font-size: 17.52px; /* 0,73 × 24, cf. CoverWordmark.vue */
  line-height: 1;
}

/* ── Sélecteur de langue ────────────────────────────────────────────────── */
.langue {
  display: flex;
  gap: var(--s-1);
}

.langue a {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-chip);
  color: var(--c-text-secondary);
  text-decoration: none;
  transition:
    color var(--d-fast) var(--ease-out),
    background-color var(--d-fast) var(--ease-out);
}

.langue a:hover {
  color: var(--c-text-primary);
  background: var(--c-surface);
}

.langue .langue--active {
  color: var(--c-text-primary);
  background: var(--c-surface);
}

/* ── Colonne de lecture ─────────────────────────────────────────────────── */
/* `--w-narrow` (760px) et non `--w-content` : c'est une MESURE de lecture. À
 * 1200px, une ligne de CGU fait plus de 200 caractères et l'œil perd le retour
 * à la ligne suivante. Les tableaux, eux, défilent chez eux. */
.page {
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding: var(--s-10) var(--s-6) var(--s-16);
}

/* La version française prévaut (CGU art. 13.3). Le dire discrètement mais le
 * dire : une traduction publiée sans mention laisse croire qu'elle engage. */
.avis {
  margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-chip);
  background: var(--c-surface);
  color: var(--c-text-secondary);
}

/* ── Le document ────────────────────────────────────────────────────────── */
.doc__h1 {
  color: var(--c-text-primary);
  margin-bottom: var(--s-6);
}
.doc__h2 {
  color: var(--c-text-primary);
  margin-top: var(--s-10);
  margin-bottom: var(--s-4);
}
.doc__h3 {
  color: var(--c-text-primary);
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
}

/* Le filet a déjà créé la respiration : inutile de cumuler les deux marges. */
.doc__filet + .doc__h2 {
  margin-top: var(--s-6);
}

/* Desserrage de l'INTERLIGNE pour la lecture longue : 1,45 est calibré pour une
 * phrase d'interface de deux lignes, pas pour un paragraphe de huit. La TAILLE,
 * elle, reste celle du rôle — la règle « pas de font-size en dur » tient. */
.doc__p {
  line-height: 1.65;
  margin-bottom: var(--s-4);
}

.doc__liste {
  line-height: 1.65;
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
}

.doc__liste--ul {
  list-style: disc;
}
/* Une marche à suivre : le numéro porte du sens, il doit se voir. */
.doc__liste--ol {
  list-style: decimal;
}
.doc__liste li {
  margin-bottom: var(--s-2);
}
.doc__liste li::marker {
  color: var(--c-text-tertiary);
}

/* Les citations portent les mentions imposées par les licences amont (Riot,
 * PandaScore). Le filet les distingue du texte rédigé par Cover : ce ne sont pas
 * nos phrases, et elles ne se reformulent pas. */
.doc__citation {
  line-height: 1.65;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--c-border-strong);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  background: var(--c-surface);
}

.doc__filet {
  height: 1px;
  margin: var(--s-8) 0;
  border: 0;
  background: var(--c-border);
}

/* ── L'action ───────────────────────────────────────────────────────────── */
/* Un paragraphe qui n'est qu'un lien (cf. `page.ts`). Dessiné comme un bouton
 * parce que c'en est un : sur la page de suppression de compte, c'est le geste
 * que le lecteur est venu faire. */
.doc__action {
  margin: var(--s-5) 0 var(--s-6);
}

.doc__bouton {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-tile);
  background: var(--c-brand);
  color: var(--c-bg-deep);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--ease-out);
}

.doc__bouton:hover {
  background: var(--c-brand-soft);
}

/* ── Tableaux ───────────────────────────────────────────────────────────── */
.doc__tableau {
  overflow-x: auto;
  margin-bottom: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

.doc__tableau table {
  width: 100%;
  border-collapse: collapse;
  /* En dessous, les quatre colonnes des tableaux de traitements se réduisent à
   * un mot par ligne. Le conteneur défile alors, ce qui est préférable. */
  min-width: 560px;
}

.doc__tableau th,
.doc__tableau td {
  padding: var(--s-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}

.doc__tableau th {
  font: var(--t-caption);
  color: var(--c-text-primary);
  background: var(--c-surface);
  white-space: nowrap;
}

.doc__tableau td {
  font: var(--t-body);
  line-height: 1.5;
}
.doc__tableau tr:last-child td {
  border-bottom: 0;
}

/* ── Fragments ──────────────────────────────────────────────────────────── */
/* Le gras des documents porte une DÉFINITION (« les CGU », « Consentement ») :
 * il se lit d'abord, d'où la couleur pleine. */
.doc strong {
  color: var(--c-text-primary);
  font-weight: 700;
}

.doc code {
  font-family: var(--font-mono);
  /* Réglage de GLYPHE et non de typo : la police mono rend plus grand à corps
   * égal, et une adresse au milieu d'une phrase doit garder sa hauteur d'x. */
  font-size: 0.92em;
  color: var(--c-text-primary);
  word-break: break-word;
}

.doc a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc a:hover {
  color: var(--c-brand-soft);
}
.doc .doc__bouton {
  text-decoration: none;
}

@media (max-width: 700px) {
  .chrome__inner,
  .page {
    padding-inline: var(--s-4);
  }
}