/* =============================================================
   PRONOSPORTS — système de design
   Identité : encre profonde, laiton (l'instrument), indigo (le camp
   adverse). Le laiton porte la marque ; l'accent de sport ne teinte
   que la chrome pour qu'on sache où l'on est sans changer d'univers.
   ============================================================= */

:root {
  /* --------------------------------------------------------------
     Noir et blanc. Une seule matière — la lumière — et pas de teinte
     décorative : ce qui porte une couleur ici porte une information.
     -------------------------------------------------------------- */

  /* fonds — l'encre, puis quatre paliers de gris qui montent vers la
     lumière. L'écart entre deux paliers voisins reste faible : c'est ce
     qui donne de la profondeur sans dessiner de marches visibles. */
  --ink: #0A0A0B;
  --surface: #121214;
  --surface-2: #18181B;
  --surface-3: #232326;
  --line: #2C2C31;
  --line-soft: #1D1D21;

  /* texte */
  --text: #F6F6F5;
  --muted: #9B9B99;
  --faint: #6A6A6D;

  /* marque — le blanc. Un accent blanc sur fond noir tient sans
     concurrencer quoi que ce soit, et vieillit mieux qu'une teinte à la
     mode. */
  --brass: #FFFFFF;
  --brass-hi: #FFFFFF;
  --brass-soft: rgba(255, 255, 255, 0.09);
  --brass-line: rgba(255, 255, 255, 0.26);

  /* camps — distingués par la LUMINOSITÉ, pas par la teinte. C'est plus
     robuste que deux couleurs : lisible en daltonisme, à l'impression, et
     sur un écran mal réglé. */
  --home: #FFFFFF;
  --away: #86868C;
  --draw: #3A3A3F;

  /* signaux — les seules couleurs de la palette. Elles ne décorent rien :
     un avertissement doit se distinguer d'un texte courant autrement que
     par sa formulation. */
  --good: #FFFFFF;
  --warn: #E8B45C;
  --bad: #E3705A;

  /* accents de sport — des gris, échelonnés en clarté. Six teintes vives
     rendraient la grille bariolée ; six valeurs de gris la gardent
     lisible tout en distinguant les cartes. */
  --foot: #FFFFFF;
  --basket: #C9C9CE;
  --tennis: #EAEAE8;
  --nfl: #B0B0B6;
  --hockey: #DCDCE2;
  --mma: #A0A0A8;
  --accent: var(--brass);

  /*
   * Le bouton d'action : sa peinture et son encre.
   *
   * Deux variables plutôt qu'une couleur écrite dans la règle, parce que les
   * deux doivent changer ENSEMBLE. Sur fond sombre la marque est vive et le
   * texte doit être noir ; sur fond clair elle est saturée et le texte doit
   * être blanc. Les mesurer donne, pour du texte noir : 5,4 sur le rouge nuit,
   * 9,9 sur l'émeraude — et seulement 3,5 sur le rouge du thème clair, où le
   * blanc remonte à 4,7. Écrire une seule des deux couleurs en dur casserait
   * donc la lisibilité d'un thème sur deux.
   *
   * `--brass-hi` existe déjà dans chaque variante : le dégradé s'en sert, ce
   * qui évite un `color-mix` et fonctionne partout sans repli.
   */
  --btn-fill: var(--brass);
  --btn-hi: var(--brass-hi);
  --btn-ink: #16110A;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --shadow: 0 18px 50px -22px rgba(0, 0, 0, .85);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);

  /* Typographie — humaniste de bout en bout. Fraunces a des empattements
     souples et une plume visible ; Karla est une grotesque chaleureuse,
     aux terminaisons ouvertes ; DM Mono arrondit là où les monospaces
     techniques anguleraient. Aucune des trois ne cherche la neutralité :
     c'était le reproche fait à l'ancienne palette de caractères. */
  --sans: 'Karla', ui-sans-serif, system-ui, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/*
 * Rien ne dépasse la largeur de l'écran.
 *
 * Un seul élément trop large — une barre de navigation qui ne rentre pas, un
 * titre non coupé — et le navigateur ouvre une glissière horizontale sur TOUTE
 * la page. Le visiteur la déclenche alors sans le vouloir en faisant défiler du
 * pouce, et lit un site décalé : c'est ce qu'on voyait, avec le titre et la
 * pastille du compteur amputés de leur bord gauche.
 *
 * `clip` et non `hidden` : `hidden` fait de l'élément un conteneur de
 * défilement, ce qui neutralise le `position: sticky` de la barre de
 * navigation. `clip` coupe sans rien rendre défilable. Le repli garde
 * l'ancien comportement là où `clip` n'est pas connu — une barre non collante
 * vaut mieux qu'une page qui glisse.
 */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(233, 169, 61, .10), transparent 62%),
    radial-gradient(900px 560px at 100% 4%, rgba(124, 140, 255, .09), transparent 58%),
    var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
::selection { background: var(--brass); color: #14100A; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; transition: all .16s ease; background: none; color: var(--text);
}
.btn-lg { padding: 15px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

.btn-brass { background: var(--brass); color: #16110A; font-weight: 700; }
.btn-brass:hover:not(:disabled) { background: var(--brass-hi); transform: translateY(-1px); }

.btn-outline { border-color: var(--line); background: var(--surface); }
.btn-outline:hover { border-color: var(--brass-line); color: var(--brass); }

.btn-quiet { color: var(--muted); padding: 10px 14px; }
.btn-quiet:hover { color: var(--text); }

/* ---------------------------------------------------------------- */
/* Marque                                                            */
/* ---------------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brass); cursor: pointer; }
.brand-mark { flex-shrink: 0; }
.brand-word {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: .14em; color: var(--text);
}
.brand-sm .brand-word { font-size: 16px; letter-spacing: .12em; }

/* ---------------------------------------------------------------- */
/* Navigation                                                        */
/* ---------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(9, 12, 18, .82); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/*
 * Le nom de la marque cède avant les boutons.
 *
 * Sans `min-width: 0`, un élément flex refuse de descendre sous la largeur de
 * son contenu : la marque poussait donc le bouton d'inscription hors de
 * l'écran. Le renommage a rendu le défaut visible — « PRONOSPORTS » mesure une
 * dizaine de pixels de plus que « PRONOSTICK », ce qui suffisait à faire
 * basculer une mise en page qui tenait de justesse.
 *
 * L'ordre de sacrifice est délibéré : sur un site qu'on découvre, le bouton
 * d'inscription compte plus que la longueur du logotype.
 */
.brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.brand-word { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.nav-cta { flex: none; }
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .nav-links { display: none; } }

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

.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

/* Grille technique en fond : le produit parle de mesure, la trame le dit
   avant le premier mot. Deux gradients répétés, aucune image à charger. */
.rays {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 62px);
  mask-image: radial-gradient(120% 90% at 30% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 30% 20%, #000 20%, transparent 78%);
}

/*
 * Le hero en trois colonnes : téléphone, texte, téléphone.
 *
 * L'ancienne composition posait le texte à gauche et un téléphone à droite —
 * la mise en page par défaut de toute page d'accueil de logiciel. Elle a un
 * défaut propre à ce produit : elle donne au visiteur un seul exemple, donc un
 * seul sport, et laisse croire que c'est le seul.
 *
 * Deux écrans qui montrent deux disciplines différentes disent en une image ce
 * qu'aucune phrase ne dit aussi vite. Et le texte, pris entre les deux, se
 * centre : c'est la seule position qui tienne quand on est encadré.
 *
 * En rangée souple plutôt qu'en grille à trois colonnes, et pour une raison
 * précise : un téléphone peut disparaître à l'exécution, quand aucun sport ne
 * lui reste à montrer. Une grille garderait sa colonne vide et son écart, ce
 * qui décalerait le texte d'une quarantaine de pixels sans que rien n'occupe
 * la place. Une rangée souple se referme et recentre pour de bon.
 *
 * Les châssis ne se déforment pas ; c'est le texte qui absorbe la largeur
 * restante, jusqu'à une borne au-delà de laquelle une ligne centrée cesse
 * d'être lisible.
 */
.hero-in {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto; padding: 60px 28px 56px;
  display: flex; align-items: center; justify-content: center; gap: 40px;
}
.hero-in .hero-copy { flex: 0 1 660px; min-width: 0; }
.hero-in .hero-phone { flex: none; }

.hero-phone { position: relative; }
/* Les deux châssis penchent l'un vers l'autre : ils encadrent le texte au lieu
   de le fuir. Le survol les redresse, ce qui suffit à les rendre vivants. */
.hero-phone.gauche .phone-frame { transform: rotateY(9deg) rotateX(2deg) translateY(6px); }
.hero-phone.droite .phone-frame { transform: rotateY(-9deg) rotateX(2deg) translateY(-6px); }
.hero-phone .phone-frame:hover { transform: rotateY(0) rotateX(0) translateY(-6px); }

/*
 * Deux téléphones ne tiennent pas sur toutes les largeurs, et c'est réglé par
 * ordre d'importance plutôt qu'en les rétrécissant jusqu'à l'illisible.
 *
 * En dessous de 1240 px, le châssis maigrit. En dessous de 1080 px, celui de
 * gauche disparaît : deux exemples valent mieux qu'un, mais un exemple lisible
 * vaut mieux que deux vignettes. En dessous de 980 px, tout s'empile et le
 * téléphone restant passe sous le texte.
 */
@media (max-width: 1240px) {
  .hero-in { gap: 26px; }
  .hero-phone .phone-frame { width: 258px; }
  .hero-phone .phone-screen { min-height: 380px; }
}
@media (max-width: 1080px) {
  .hero-phone.gauche { display: none; }
}

/*
 * La composition de bureau est conservée sur téléphone : rangée, et non pile.
 *
 * Le repli naturel serait d'empiler — texte, puis maquette — et c'est ce qui se
 * faisait. La demande est de garder le MÊME format qu'à l'écran d'ordinateur,
 * donc la maquette reste au flanc du texte jusqu'en bas de l'échelle.
 *
 * Ce que ça coûte, en clair : à 390 px, le texte reçoit environ 220 px au lieu
 * de 354. Le titre y tient sur quatre lignes plutôt que deux, et le corps de
 * texte descend à des lignes de trente caractères. C'est un choix de
 * composition, pas un défaut — mais il se paie en lisibilité, et il vaut mieux
 * l'avoir écrit ici que de le redécouvrir plus tard.
 *
 * La maquette rétrécit avec l'écran plutôt que de se figer : `min()` la borne
 * par une part de la largeur disponible, ce qui l'empêche d'étouffer le texte
 * sur les écrans les plus étroits.
 */
@media (max-width: 980px) {
  .hero-in { flex-direction: row; gap: 18px; padding: 34px 16px 40px; align-items: center; }
  .hero-in .hero-copy { flex: 1 1 auto; min-width: 0; }
  .hero-in .hero-phone { flex: none; }
  /*
   * La maquette est RÉDUITE, elle n'est pas recomposée.
   *
   * Première tentative : rétrécir le châssis et rapetisser chaque élément —
   * encoche, barre d'état, rembourrages. Résultat, la carte à l'intérieur se
   * repliait dans une colonne de cent trente pixels : « Kansas City Chiefs »
   * sur trois lignes, le « vs » coupé, l'indice de confiance tronqué. On
   * obtenait une maquette cassée là où on voulait montrer le produit.
   *
   * `zoom` fait ce qu'aucune des deux autres pistes ne fait. `transform:
   * scale()` réduit le dessin mais pas la place occupée : l'élément
   * continuerait de réserver trois cents pixels. Des tailles écrites une à une
   * ne réduisent pas la MISE EN PAGE intérieure, qui se recompose. `zoom`
   * réduit les deux : la carte se dessine exactement comme sur un écran
   * d'ordinateur, puis l'ensemble rapetisse, proportions intactes.
   *
   * C'est bien ce qui était demandé — le même format, en plus petit — et non
   * une seconde composition à maintenir en parallèle.
   */
  .hero-phone { zoom: .42; }
  .hero-phone.droite .phone-frame { transform: rotateY(-7deg) rotateX(1deg); }
}

/*
 * Entre la tablette et le téléphone, la maquette n'a pas à être aussi petite.
 *
 * Un seul facteur pour toute la plage donnerait une vignette de cent pixels à
 * côté d'une colonne de six cents sur une tablette — la maquette y passerait
 * pour une décoration alors qu'elle est la démonstration. Le facteur suit donc
 * la place disponible, en trois paliers.
 *
 * Les deux écrans reviennent dès 860 px : à cette largeur, deux maquettes à
 * 60 % laissent encore près de quatre cents pixels au texte.
 */
@media (min-width: 860px) and (max-width: 1080px) {
  .hero-phone.gauche { display: block; }
}
@media (min-width: 700px) and (max-width: 980px) {
  .hero-phone { zoom: .6; }

  /*
   * Le texte se resserre en proportion : un titre calibré pour 354 px de large
   * déborderait de sa colonne à 207.
   *
   * Sélecteur descendant obligatoire. `.hero h1` est redéclaré mille lignes
   * plus bas dans ce même fichier avec la même spécificité, et c'est la
   * dernière règle qui gagne — une requête média n'y change rien. Écrit
   * simplement, le réglage était chargé et sans effet : le titre restait à
   * 46 px dans une colonne de 207.
   */
  .hero .hero-copy h1 { font-size: clamp(23px, 6.6vw, 40px); margin-bottom: 14px; }
  .hero .hero-copy .lede { font-size: 12.5px; line-height: 1.5; margin-bottom: 18px; }
  .hero .hero-copy .kicker { font-size: 9.5px; letter-spacing: .04em; gap: 6px; margin-bottom: 14px; }
  .hero .hero-copy .hero-actions { gap: 8px; margin-bottom: 18px; }
  .hero .hero-copy .hero-actions .btn-lg { padding: 11px 14px; font-size: 12.5px; }
  .hero .hero-copy .hero-stats { gap: 14px 10px; margin-top: 22px; }
  .hero .hero-copy .hstat-n { font-size: 22px; }
  .hero .hero-copy .hstat-l { font-size: 10px; }


  /*
   * Les quatre chiffres en deux rangées de deux, et non trois puis un.
   *
   * En rangée souple, ils se répartissaient 3 + 1 : le dernier chiffre se
   * retrouvait seul et centré sous les trois autres, ce qui le faisait lire
   * comme une conclusion alors qu'il est du même rang. Une grille à deux
   * colonnes règle la question sans arbitrage de largeur.
   */
  /*
   * Le sélecteur est descendant — `.hero-copy .hero-stats` — et non la classe
   * seule. `.hero-stats { display: flex }` est déclaré mille lignes plus bas
   * dans ce même fichier : à spécificité égale, c'est la dernière règle qui
   * l'emporte, et une requête média n'y change rien. La version simple était
   * donc écrite, chargée, et sans effet.
   */
  .hero-copy .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .hero-copy .hstat { align-items: center; }

  /* Le héros respirait sur deux cents pixels au-dessus du titre : une
     proportion juste sur un écran large, un tiers d'écran sur un téléphone. */
  .hero { padding-block: 26px 34px; }
}

/*
 * Le texte, centré.
 *
 * Centrer ne consiste pas à poser `text-align: center` : les blocs enfants —
 * boutons, chiffres, pastille du compteur — restent alignés à gauche de leur
 * conteneur tant qu'on ne les centre pas eux-mêmes. Et la ligne de texte a
 * besoin d'une largeur maximale : centrée sur toute la largeur disponible,
 * elle devient illisible, l'œil perdant le début de la ligne suivante.
 */
.hero-copy { text-align: center; }
.hero-copy .lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.hero-copy .hero-actions { justify-content: center; }
.hero-copy .hero-stats { justify-content: center; }
.hero-copy .hero-proof { justify-content: center; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--brass-line); color: var(--brass);
  display: grid; place-items: center; background: rgba(9, 12, 18, .45);
  animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll:hover { background: var(--brass-soft); }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }

.kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--brass);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 22px;
}
.hero h1 { font-size: clamp(38px, 4.9vw, 62px); line-height: .98; text-transform: none; }
.hero h1 em { font-style: normal; color: var(--brass); }

/* Ligne en lettres creuses : l'accent typographique du modèle. `text-stroke`
   n'étant pas universel, on garde une couleur de repli lisible. */
.hero h1 .outline {
  color: rgba(255, 255, 255, .10);
  -webkit-text-stroke: 2px var(--brass);
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
  .hero h1 .outline { color: var(--brass); }
}

.lede { color: var(--muted); font-size: 17px; line-height: 1.62; max-width: 490px; margin: 0 0 30px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/*
 * Le lien de connexion, sous les deux boutons.
 *
 * Il reprend la fonction que portait la barre de navigation. En lien et non en
 * bouton, délibérément : trois boutons de même poids ne se hiérarchisent plus,
 * et l'inscription est le geste qu'on cherche à obtenir. Celui-ci doit être
 * atteignable, pas concurrent.
 */
.hero-deja { margin: 0 0 26px; }
.lien-connexion {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color .15s;
}
.lien-connexion:hover { color: var(--text); }

/*
 * Réglages de langue et de thème, au pied de page.
 *
 * Ils vivaient dans la barre de navigation ; celle-ci retirée, il fallait leur
 * donner un toit ou les perdre. Le pied de page est leur place naturelle — on
 * y range ce dont on a besoin une fois, pas à chaque écran.
 */
.foot-reglages {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  padding: 26px 0 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 30px;
}

.hero-proof { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.hero-proof li { font-size: 13px; font-weight: 500; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.hero-proof li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

/* ---------------------------------------------------------------- */
/* Bandeau de chiffres                                               */
/* ---------------------------------------------------------------- */

.band { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(17, 24, 35, .5); }
.band-in {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 720px) { .band-in { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--brass); line-height: 1; }
.stat-lbl { font-size: 12.5px; color: var(--faint); font-weight: 500; }

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

.sec { max-width: 1200px; margin: 0 auto; padding: 84px 24px; }
.sec-head { max-width: 640px; margin-bottom: 40px; }
.eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 14px;
}
.sec-head h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px;
}
.sec-head p { color: var(--muted); font-size: 15.5px; line-height: 1.62; margin: 0; }

/* --- grille de sports --- */
.sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .sport-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sport-grid { grid-template-columns: 1fr; } }

.sport-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px; position: relative; overflow: hidden;
}
.sport-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sc); }
.sport-card .sport-em { font-size: 24px; line-height: 1; }
.sport-card h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 14px 0 5px; letter-spacing: -.02em; }
.sport-card .sport-engine { font-size: 12px; color: var(--sc); font-weight: 600; margin-bottom: 10px; }
.sport-card .sport-leagues { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin-bottom: 18px; }
.sport-card .sport-count { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; }
.sport-card .sport-count-lbl { font-size: 11.5px; color: var(--faint); margin-top: 4px; }

/* --- étapes de méthode --- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; }
.step-n { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--brass); letter-spacing: .08em; }
.steps h3 { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 12px 0 8px; letter-spacing: -.01em; }
.steps p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* --- aperçu --- */
.preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }

/* --- tarifs --- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; } }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 24px; display: flex; flex-direction: column;
}
.price-card.featured {
  border-color: var(--brass-line);
  background: linear-gradient(180deg, var(--brass-soft), var(--surface) 55%);
  position: relative;
}
/* Le mot était écrit en dur dans `content:` — donc en français quelle que soit
   la langue de la page, et invisible pour les lecteurs d'écran. Il est
   désormais posé dans le balisage, traduit comme le reste. */
.price-badge {
  position: absolute; top: -10px; left: 24px;
  background: var(--brass); color: #16110A; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 100px;
}
.price-name { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.price-amt { display: flex; align-items: baseline; gap: 4px; }
.price-amt b { font-family: var(--mono); font-size: 42px; font-weight: 700; line-height: 1; }
.price-amt span { font-family: var(--mono); font-size: 18px; color: var(--muted); }
.price-per { font-size: 12px; color: var(--faint); margin: 6px 0 24px; }
.price-list { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.price-list li { font-size: 13.5px; padding: 10px 0; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; }
.price-list li:first-child { border-top: none; }
.price-list li::before { content: "✓"; color: var(--brass); font-weight: 700; flex-shrink: 0; }

/* --- l'offre gratuite, en bandeau sous la grille --- */
.price-free {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--r-lg); padding: 20px 24px;
}
.price-free-txt { flex: 1 1 320px; min-width: 0; }
.price-free-h { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.price-free p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.price-free .btn { flex: none; }
@media (max-width: 560px) {
  .price-free { padding: 18px; }
  .price-free .btn { width: 100%; }
}

/* --- faq --- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line-soft); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; font-size: 15.5px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--faint); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 14px 0 0; }

/* --- pied --- */
.foot { border-top: 1px solid var(--line-soft); padding: 30px 24px; }
.foot-in { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot p { font-size: 12px; color: var(--faint); margin: 0; }

/* ---------------------------------------------------------------- */
/* Accès                                                             */
/* ---------------------------------------------------------------- */

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card {
  width: 100%; max-width: 430px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--shadow-lg);
}
.link-back, .link-toggle {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 13px; font-weight: 500; color: var(--muted); padding: 0;
}
.link-back { margin-bottom: 22px; }
.link-back:hover, .link-toggle:hover { color: var(--text); }
.link-toggle { display: block; margin: 18px auto 0; }
.auth-card h2 { font-family: var(--display); font-size: 27px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.auth-error { color: var(--bad); font-size: 13px; font-weight: 600; margin-bottom: 14px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select {
  width: 100%; padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 14.5px;
  outline: none; transition: all .15s;
}
.field input:focus, .field select:focus { border-color: var(--brass-line); background: var(--surface-3); box-shadow: 0 0 0 3px var(--brass-soft); }

/* Quatre offres au lieu de trois : sur un écran de 320 px, quatre pastilles
   côte à côte laissent 68 px chacune et « Débutant » se coupe en deux. Elles
   passent donc en grille de deux colonnes sous 420 px. */
.plan-pills { display: flex; gap: 8px; }
@media (max-width: 420px) { .plan-pills { display: grid; grid-template-columns: 1fr 1fr; } }
.plan-pill {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-sm);
  padding: 12px 8px; text-align: center; cursor: pointer; transition: all .15s;
}
.plan-pill b { display: block; font-size: 13px; }
.plan-pill span { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.plan-pill.sel { border-color: var(--brass-line); background: var(--brass-soft); }
.plan-pill.sel b { color: var(--brass); }

/* ---------------------------------------------------------------- */
/* Application                                                       */
/* ---------------------------------------------------------------- */

.appbar { position: sticky; top: 0; z-index: 40; background: rgba(9, 12, 18, .88); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line-soft); }
.appbar-in { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.account-badge {
  background: var(--brass-soft); border: 1px solid var(--brass-line); color: var(--brass);
  padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
}
.appbar-actions { display: flex; gap: 4px; }

.app-main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 90px; }

.sport-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sport-tab {
  font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .15s; user-select: none; display: inline-flex; align-items: center; gap: 7px;
}
.sport-tab:hover { color: var(--text); border-color: var(--faint); }
.sport-tab.active { color: var(--ink); font-weight: 700; border-color: transparent; }
.sport-tab.locked { opacity: .5; }

.league-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.league-chip {
  font-size: 12.5px; font-weight: 500; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; transition: all .15s;
}
.league-chip:hover { color: var(--text); }
.league-chip.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.export-btn { margin-left: auto; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--brass-line); color: var(--brass); background: none; cursor: pointer; }

.grid-heading { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--muted); margin: 34px 0 16px; letter-spacing: -.01em; }
/* Reste du calendrier, non chargé. Discret : c'est une précision, pas un
   appel à l'action — il n'y a rien à cliquer. */
.grid-more { font-size: 12px; color: var(--faint); text-align: center; margin: 6px 0 20px; font-style: italic; }

.group { margin-bottom: 28px; }
.group-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.group-count { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 100px; }
/*
 * `min(320px, 100%)` et non `320px`.
 *
 * `minmax(320px, 1fr)` impose une piste d'au moins 320 px même quand le
 * conteneur est plus étroit : sur un écran de 320 px, marges comprises, la
 * grille des rencontres dépassait donc la page et ouvrait une glissière
 * horizontale sur tout le site. Le `min()` laisse la piste redescendre à la
 * largeur disponible, et le comportement multi-colonnes est inchangé partout
 * où la place existe.
 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }

/* ---------------------------------------------------------------- */
/* Carte de rencontre                                                */
/* ---------------------------------------------------------------- */

.match {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; transition: border-color .15s;
}
.match:hover { border-color: var(--faint); }
.match.live { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.match.featured { padding: 26px; border-radius: var(--r-lg); }

.match-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--faint); margin-bottom: 16px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--bad); font-weight: 700; }
.live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); animation: pulse 1.4s infinite; }

.match-teams { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.match-line { display: flex; align-items: center; gap: 12px; }
.match-line .nm { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-line .sc { font-family: var(--mono); font-size: 19px; font-weight: 700; }

/* Écusson : image officielle, ou monogramme aux couleurs du club en repli. */
.crest { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; flex-shrink: 0; background: var(--surface-2); }

/* Blason de repli : le SVG porte déjà la forme d'écu, le conteneur ne fait
   que réserver la place et centrer. Pas de fond ni d'arrondi, sinon on voit
   un carré derrière l'écu. */
.crest-badge {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.crest-badge svg { width: 100%; height: 100%; display: block; }
.crest-badge.crest-lg { width: 46px; height: 46px; }
.crest-lg { width: 46px; height: 46px; border-radius: 12px; }

/* barre de probabilité compacte */
.pbar { height: 8px; border-radius: 100px; overflow: hidden; display: flex; background: var(--surface-2); }
.pbar i { display: block; height: 100%; }
.pbar .h { background: var(--home); }
.pbar .d { background: var(--draw); }
.pbar .a { background: var(--away); }
.pbar-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-bottom: 7px; font-weight: 500; }
.pbar-labels b { font-family: var(--mono); color: var(--text); font-weight: 700; }
.pbar-note { font-size: 11px; color: var(--faint); margin-top: 9px; line-height: 1.5; }
/* Mention de fiabilité : lisible, jamais alarmante. Un fond d'alerte sur une
   carte de match sur deux ferait fuir le regard au lieu de l'informer. */
.pbar-weak { color: var(--warn, #C98A2E); border-bottom: 1px dotted currentColor; cursor: help; }
/* Compteur de rencontres dans une pastille de tournoi. */
.chip-count {
  font-family: var(--mono); font-size: 10px; opacity: .6;
  margin-left: 6px; padding: 1px 5px; border-radius: 100px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* Le filtre par tournoi est subordonné au filtre par compétition : plus serré,
   plus discret, et collé dessous pour qu'on lise la hiérarchie sans légende. */
.tournament-row { margin-top: -12px; margin-bottom: 22px; }
.tournament-row .league-chip { font-size: 12px; padding: 5px 11px; }

/*
 * Le bouton d'analyse : l'action principale de chaque carte.
 *
 * Deux erreurs successives ont été corrigées ici, et la seconde était la
 * mienne. Il a d'abord porté un fond translucide et un texte de la couleur de
 * l'accent, sur une carte déjà sombre : il se lisait comme un bandeau d'alerte.
 * Puis je l'ai peint avec `var(--accent)` — sans vérifier ce que cette variable
 * VAUT. Or les accents de sport sont volontairement des gris dans la charte
 * nocturne (voir leur déclaration plus haut), et `--foot` vaut `#FFFFFF` :
 * texte blanc sur fond blanc, contraste 1,00. Le bouton était invisible.
 *
 * La leçon tient en une ligne : une couleur d'action ne se prend pas dans une
 * variable dont on ignore la valeur. Elle se prend dans la marque, qui est
 * définie vive et contrastée dans chacune des sept variantes, et elle vient
 * avec son encre.
 */
.analyze-btn {
  position: relative; overflow: hidden;
  margin-top: 16px; width: 100%; padding: 13px 16px;
  border-radius: 12px; border: none;
  /*
   * Trois filets, du plus simple au plus riche.
   *
   * Chaque `var()` porte sa propre valeur de repli, et ce n'est pas de la
   * prudence gratuite : une variable indéfinie rend la déclaration invalide, et
   * un `<button>` sans fond ni couleur retombe sur le style du navigateur —
   * gris clair, texte noir, coins carrés. C'est précisément ce qu'on a vu à
   * l'écran, et c'est indiscernable d'un bouton simplement laid. Avec un repli
   * littéral, le pire cas reste un bouton de marque plat.
   *
   * L'aplat est déclaré avant le dégradé pour la même raison : si le second est
   * rejeté, le premier tient.
   */
  background: var(--btn-fill, var(--brass, #FF3B50));
  background: linear-gradient(135deg,
    var(--btn-hi, var(--brass-hi, #FF6273)),
    var(--btn-fill, var(--brass, #FF3B50)));
  color: var(--btn-ink, #16110A);
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow:
    /* Liseré clair sur l'arête haute : ce qui donne l'épaisseur. */
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 4px 14px color-mix(in srgb, var(--btn-fill, #FF3B50) 30%, transparent);
  transition: transform .12s, box-shadow .2s, filter .15s;
}

/* La flèche avance au survol. Elle dit le sens du geste — on ouvre un panneau,
   on ne bascule pas un réglage. */
.analyze-btn .arrow { transition: transform .18s; }
.analyze-btn:hover .arrow { transform: translateX(3px); }

/*
 * Le reflet qui balaie le bouton au survol.
 *
 * Pseudo-élément déplacé par `transform` : ni recalcul de disposition ni
 * repeinte du fond, une liste peut donc en afficher quatre-vingts sans que le
 * défilement s'en ressente. `pointer-events: none` l'empêche de voler le clic
 * qu'il traverse.
 */
.analyze-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .55s ease;
  pointer-events: none;
}
.analyze-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 8px 22px color-mix(in srgb, var(--btn-fill, #FF3B50) 42%, transparent);
}
.analyze-btn:hover::after { transform: translateX(110%); }
.analyze-btn:active { transform: translateY(0); filter: brightness(.97); }
.analyze-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--btn-fill, #FF3B50),
    0 8px 22px color-mix(in srgb, var(--btn-fill, #FF3B50) 40%, transparent);
}
.analyze-btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; filter: grayscale(.5); }
.analyze-btn:disabled::after { display: none; }

/* La carte en vedette porte un bouton plus haut : c'est l'affiche du jour, et
   son action doit se distinguer de celles de la grille. */
.match.featured .analyze-btn { padding: 16px; font-size: 15px; border-radius: 14px; }

/* Le mouvement est une préférence système, pas un détail : sans reflet ni
   translation, le bouton reste parfaitement lisible. */
@media (prefers-reduced-motion: reduce) {
  .analyze-btn, .analyze-btn::after, .analyze-btn .arrow { transition: none; }
  .analyze-btn:hover { transform: none; }
  .analyze-btn:hover::after { transform: translateX(-110%); }
  .analyze-btn:hover .arrow { transform: none; }
}

/* ---------------------------------------------------------------- */
/* États                                                             */
/* ---------------------------------------------------------------- */

.state { text-align: center; color: var(--muted); font-size: 14px; padding: 48px 20px; }
.state button { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 10px 20px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; font-weight: 600; }
.loading-inline { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 34px 10px; color: var(--muted); font-size: 13.5px; }
.ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brass); animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.lock-panel { border: 1.5px dashed var(--line); background: var(--surface-2); border-radius: var(--r-lg); padding: 46px 24px; text-align: center; }
.lock-panel h3 { font-family: var(--display); font-size: 21px; font-weight: 700; margin: 12px 0 8px; }
.lock-panel p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  padding: 13px 22px; border-radius: 100px; font-size: 13.5px; font-weight: 500;
  z-index: 90; opacity: 0; transition: all .3s ease; pointer-events: none; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk 1.4s infinite; border-radius: 6px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =============================================================
   PANNEAU D'ANALYSE
   Lecture verticale continue : on lit un texte, pas un tableau
   de bord. Les chiffres viennent appuyer la prose, pas l'inverse.
   ============================================================= */

.sheet-overlay {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(5, 7, 11, .78); backdrop-filter: blur(8px);
  padding: 28px 18px; overflow-y: auto;
}
.sheet-overlay.open { display: block; }
@media (max-width: 780px) { .sheet-overlay { padding: 0; } }

.sheet {
  max-width: 900px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); animation: sheetIn .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) { .sheet { border-radius: 0; border: none; min-height: 100vh; } }

/* --- en-tête : les deux camps face à face --- */
.sheet-head {
  padding: 22px 26px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  position: relative;
}
.sheet-close {
  position: absolute; top: 18px; right: 20px; width: 32px; height: 32px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; transition: all .15s;
}
.sheet-close:hover { color: var(--text); border-color: var(--faint); }

/*
 * Le fil d'ariane s'arrête avant le bouton de fermeture.
 *
 * Celui-ci est en position absolue, donc hors du flux : le texte passait
 * dessous, et « FOOTBALL · PREMIER LEAGUE · MATCHDAY 2 » se terminait sous la
 * croix. Sur un écran large la ligne était assez courte pour que ça ne se voie
 * pas ; sur un téléphone, elle butait dessus systématiquement.
 *
 * La réserve vaut la largeur du bouton plus sa marge. Une seule ligne, coupée
 * proprement quand elle est trop longue — un fil d'ariane sur deux lignes
 * repousserait les écussons et déséquilibrerait l'en-tête.
 */
.sheet-meta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
  padding-right: 44px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
@media (max-width: 620px) { .sheet-versus { gap: 10px; } }

.side { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.side.away { align-items: flex-end; text-align: right; }
.side-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.side.away .side-id { flex-direction: row-reverse; }
.side-name { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
@media (max-width: 620px) { .side-name { font-size: 15px; } }

.form-pills { display: flex; gap: 4px; }
.form-pill {
  width: 19px; height: 19px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  font-family: var(--mono); color: var(--ink);
}
.form-pill.W { background: var(--good); }
.form-pill.D { background: var(--draw); color: var(--text); }
.form-pill.L { background: var(--bad); }
.form-record { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

.sheet-center { text-align: center; padding-top: 4px; }
.sheet-center .kick { font-size: 11.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }
.sheet-center .vs { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--faint); letter-spacing: .1em; margin-bottom: 5px; }
.sheet-center .score { font-family: var(--mono); font-size: 26px; font-weight: 700; }

/* --- onglets --- */
.sheet-tabs { display: flex; gap: 2px; padding: 0 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tab {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  padding: 14px 16px; border: none; background: none; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s;
}
.sheet-tab:hover { color: var(--text); }
.sheet-tab.active { color: var(--brass); border-bottom-color: var(--brass); }

.sheet-body { padding: 26px; }
@media (max-width: 780px) { .sheet-head, .sheet-tabs { padding-left: 18px; padding-right: 18px; } .sheet-body { padding: 20px 18px 40px; } }

/* --- blocs --- */
.blk { margin: 0 0 30px; padding: 0; max-width: none; }
.blk:last-child { margin-bottom: 0; }
.blk-h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.blk-h::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }

/* Le bandeau porte une seule phrase, `--demo` compris. En flex, ce <b> devenait
   un élément de rang et s'affichait dans sa propre colonne, au milieu du texte. */
.demo-note {
  display: block; margin-bottom: 22px; padding: 12px 16px;
  border-radius: var(--r-sm); border: 1px dashed color-mix(in srgb, var(--warn) 45%, var(--line));
  background: rgba(245, 181, 71, .07); color: var(--warn); font-size: 12.5px; font-weight: 500; line-height: 1.5;
}

/* --- prose --- */
.lead-text { font-size: 16.5px; line-height: 1.62; margin: 0; color: var(--text); }
.body-text { font-size: 15px; line-height: 1.72; margin: 0; color: var(--text); }
.quote {
  border-left: 2px solid var(--brass); padding: 2px 0 2px 20px;
  font-size: 15.5px; line-height: 1.74; color: var(--text);
}
.muted-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* --- verdict --- */
.verdict {
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  padding: 20px 22px; border-radius: var(--r); margin-bottom: 26px;
  background: linear-gradient(120deg, var(--brass-soft), var(--surface-2) 70%);
  border: 1px solid var(--brass-line);
}
@media (max-width: 560px) { .verdict { grid-template-columns: 1fr; gap: 16px; } }
.verdict-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 7px; }
.verdict-pick { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 6px; }
.verdict-sub { font-size: 13px; color: var(--muted); }
.verdict-sub b { font-family: var(--mono); color: var(--text); }

.conf { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 108px; }
.conf-val { font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1; }
.conf-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.conf-track { width: 100%; height: 5px; border-radius: 100px; background: var(--line); overflow: hidden; }
.conf-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); border-radius: 100px; }
.conf-cap { font-size: 10.5px; color: var(--faint); }

/* --- probabilités exactes --- */
.odds-rows { display: flex; flex-direction: column; gap: 12px; }
.odds-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.odds-row .lb { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 9px; }
.odds-row .pc { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.odds-row .tr { grid-column: 1 / -1; height: 7px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.odds-row .tr i { display: block; height: 100%; border-radius: 100px; }
.odds-row.h .tr i, .odds-row.h .pc { color: var(--home); background: var(--home); }
.odds-row.h .pc { background: none; }
.odds-row.d .tr i { background: var(--draw); }
.odds-row.a .tr i, .odds-row.a .pc { color: var(--away); background: var(--away); }
.odds-row.a .pc { background: none; }

/* --- comparaison bicolore --- */
.cmp { display: flex; flex-direction: column; gap: 14px; }
.cmp-legend { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cmp-legend .h { color: var(--home); }
.cmp-legend .a { color: var(--away); }
.cmp-row { display: flex; flex-direction: column; gap: 6px; }
.cmp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; }
.cmp-top .lab { color: var(--muted); font-weight: 500; }
.cmp-top .v { font-family: var(--mono); font-weight: 700; font-size: 12.5px; }
.cmp-top .v.h { color: var(--home); }
.cmp-top .v.a { color: var(--away); }
.cmp-bar { height: 22px; border-radius: 7px; overflow: hidden; display: flex; }
.cmp-bar i { display: flex; align-items: center; height: 100%; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.cmp-bar i.h { background: var(--home); color: #17110A; justify-content: flex-end; padding-right: 8px; }
.cmp-bar i.a { background: var(--away); color: #0C0F1E; justify-content: flex-start; padding-left: 8px; }
.cmp-row.global .cmp-bar { height: 28px; }
.cmp-row.global .cmp-top .lab { color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }

/* --- scénarios --- */
.scn-list { display: flex; flex-direction: column; gap: 10px; }
.scn { padding: 15px 17px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.scn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.scn-top b { font-size: 14.5px; font-weight: 700; color: var(--brass); }
.scn-top .pc { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.scn p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* --- forces par camp --- */
.strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .strengths { grid-template-columns: 1fr; } }
.str-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; border-top: 2px solid var(--side-color); }
.str-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.str-head span { font-size: 13.5px; font-weight: 700; }
.str-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.str-card li { font-size: 13px; line-height: 1.55; color: var(--muted); padding-left: 15px; position: relative; }
.str-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--side-color); }

/* --- facteurs (étiquettes) --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.chip.home { color: var(--home); border-color: color-mix(in srgb, var(--home) 32%, var(--line)); }
.chip.home::before { background: var(--home); }
.chip.away { color: var(--away); border-color: color-mix(in srgb, var(--away) 32%, var(--line)); }
.chip.away::before { background: var(--away); }

/* --- prédictions chiffrées --- */
.pred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.pred { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.pred-h { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.pred-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.pred-line + .pred-line { border-top: 1px solid var(--line-soft); }
.pred-line b { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.pred-line .team-dot { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.pred-line .team-dot::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--dot); }

/* --- lignes over/under bicolores --- */
.ou { display: flex; flex-direction: column; gap: 11px; }
.ou-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.ou-bar { height: 20px; border-radius: 6px; overflow: hidden; display: flex; }
.ou-bar i { display: flex; align-items: center; height: 100%; font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.ou-bar i.over { background: var(--good); color: #06170F; justify-content: flex-end; padding-right: 7px; }
.ou-bar i.under { background: var(--surface-3); color: var(--muted); justify-content: flex-start; padding-left: 7px; }

/* --- tableaux de marché --- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 0 10px 10px; border-bottom: 1px solid var(--line); }
.tbl th.r, .tbl td.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.hi td { background: var(--brass-soft); }
.tbl tr.hi td:first-child { border-radius: 8px 0 0 8px; }
.tbl tr.hi td:last-child { border-radius: 0 8px 8px 0; }
.tbl .dim { color: var(--faint); font-size: 12px; }

/* --- scores exacts --- */
.scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.score-tile { text-align: center; padding: 13px 8px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.score-tile.top { border-color: var(--brass-line); background: var(--brass-soft); }
.score-tile .s { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.score-tile .p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* --- tendances --- */
.trends { display: flex; flex-direction: column; gap: 7px; }
.trend { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.trend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.trend.positive::before { background: var(--good); }
.trend.negative::before { background: var(--bad); }

/* --- risques / angles morts --- */
.risks { display: flex; flex-direction: column; gap: 9px; }
.risk { padding: 13px 16px; border-radius: var(--r-sm); background: rgba(245, 181, 71, .05); border: 1px solid rgba(245, 181, 71, .2); border-left: 2px solid var(--warn); }
.risk b { display: block; font-size: 13px; color: var(--warn); margin-bottom: 3px; }
.risk span { font-size: 13px; color: var(--muted); line-height: 1.55; }

.blind { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.blind li { font-size: 13px; color: var(--muted); padding-left: 20px; position: relative; line-height: 1.55; }
.blind li::before { content: "○"; position: absolute; left: 3px; color: var(--faint); }

/* --- provenance --- */
.prov { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prov-item { font-size: 11.5px; color: var(--faint); background: var(--surface-3); border: 1px solid var(--line); padding: 6px 12px; border-radius: 100px; }
.prov-item b { font-family: var(--mono); color: var(--muted); }
.quality { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.quality-track { flex: 1; max-width: 180px; height: 5px; border-radius: 100px; background: var(--line); overflow: hidden; }
.quality-track i { display: block; height: 100%; background: var(--good); border-radius: 100px; }

.legal { font-size: 11.5px; color: var(--faint); line-height: 1.6; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------- */
/* Verrou — la partie de la fiche réservée aux offres payantes        */
/* ---------------------------------------------------------------- */

.verrou { position: relative; margin-top: 8px; }

/* Le contour de ce qui reste à voir : titres lisibles, corps en barres.
   Le contenu réservé n'est plus envoyé au navigateur du tout — le flouter
   n'aurait rien caché, un clic droit suffisait à le lire. */
.sq { display: flex; flex-direction: column; gap: 9px; }
.sq-barre {
  display: block; height: 11px; border-radius: 100px;
  background: linear-gradient(90deg, var(--surface-3), var(--line) 60%, var(--surface-3));
}

.verrou-flou {
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
  /* Sans cette hauteur, l'onglet Assistant — dont le corps flouté est vide —
     réduirait le verrou à une bande de quelques pixels. */
  min-height: 260px;
  /* Le flou déborde de son cadre : sans recadrage, les caractères des bords
     bavent sur la fiche. */
  overflow: hidden;
}

/* Fondu vers le bas : le flou seul se lit comme un défaut d'affichage, le
   dégradé dit que la page continue.

   Le fond du voile est une variable et non `--surface` en dur : la fiche porte
   un dégradé de verre dans le thème « scène », et un aplat qui ne serait pas
   le sien dessinerait un rectangle visible. */
.verrou { --verrou-fond: var(--surface); }
.verrou::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--verrou-fond) 20%, transparent) 0%,
    color-mix(in srgb, var(--verrou-fond) 78%, transparent) 55%,
    var(--verrou-fond) 100%);
}

.verrou-appel {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  z-index: 1; width: min(420px, calc(100% - 24px));
  background: var(--surface); border: 1px solid var(--brass-line);
  border-radius: var(--r-lg); padding: 26px 24px; text-align: center;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .75);
}
.verrou-cadenas {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--brass-soft); color: var(--brass); margin-bottom: 12px;
}
.verrou-h { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.35; text-wrap: balance; }
.verrou-p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.verrou-appel .btn { width: 100%; }
.verrou-note { font-size: 11.5px; color: var(--faint); margin: 12px 0 0; }

/*
 * Sur téléphone, l'appel passe AVANT la zone floutée.
 *
 * Superposé, il tombait à 779 px du haut sur un écran de 844 : le verdict et
 * les probabilités occupent déjà toute la hauteur visible, si bien qu'on
 * voyait du texte flou sans jamais lire ce qui l'explique — ni le bouton qui
 * le déverrouille. Remis dans le flux et placé en tête, il est lu avant le
 * flou, qui devient ce qu'il doit être : l'illustration du propos.
 */
@media (max-width: 700px) {
  .verrou { display: flex; flex-direction: column-reverse; }
  .verrou-appel {
    position: relative; z-index: 1;
    left: auto; top: auto; transform: none; width: 100%;
    margin-bottom: 14px; padding: 22px 18px;
  }
  .verrou-flou { min-height: 0; max-height: 420px; }
}

/* Le flou n'est pas un effet décoratif : sans lui le contenu réservé devient
   lisible. On le conserve donc en mouvement réduit, et on ne retire que le
   fondu, qui, lui, est de l'ornement. */
@media (prefers-reduced-motion: reduce) {
  .verrou::after { background: var(--bg); opacity: .55; }
}

/* Réserve épuisée — l'abonné garde le modèle, seule la rédaction manque.
   Pas de flou ici : lui masquer ce qu'il a payé serait une faute. */
.epuise {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 18px 20px;
}
.epuise p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.epuise-note { color: var(--muted); font-size: 13px !important; margin-bottom: 14px !important; }
.epuise .btn { width: auto; }

/* ---------------------------------------------------------------- */
/* Assistant                                                         */
/* ---------------------------------------------------------------- */

/* Le bloc « posez une question », remonté juste sous le verdict. Il portait
   auparavant un simple bouton en pied de fiche, après une douzaine de
   sections — c'est-à-dire à un endroit que presque personne n'atteignait. */
.ask-block {
  margin: 22px 0 4px; padding: 20px;
  border: 1px solid var(--brass-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brass-soft), transparent 70%);
}
.ask-head { display: flex; align-items: flex-start; gap: 14px; }
.ask-mark {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: #16110A;
  font-family: var(--mono); font-size: 17px; font-weight: 700; line-height: 1;
}
.ask-h { font-size: 16px; font-weight: 700; margin: 4px 0 4px; line-height: 1.3; }
.ask-lede { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

.ask-suggests { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.ask-chip {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: 100px; padding: 8px 14px; font-size: 12.5px; font-family: var(--sans);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  text-align: left;
}
.ask-chip:hover { border-color: var(--brass-line); color: var(--brass); background: var(--brass-soft); }

.ask-cta {
  width: 100%; margin-top: 22px; padding: 15px; border-radius: var(--r);
  border: 1px solid var(--brass-line); background: var(--brass-soft); color: var(--brass);
  font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.ask-cta:hover { background: var(--brass); color: #16110A; }

.chat { display: flex; flex-direction: column; gap: 14px; }
.chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.msg { padding: 13px 16px; border-radius: var(--r); font-size: 14px; line-height: 1.62; white-space: pre-wrap; }
.msg.me { align-self: flex-end; max-width: 80%; background: var(--brass-soft); border: 1px solid var(--brass-line); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; max-width: 94%; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.bot.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: text-bottom; background: var(--brass); animation: caret .9s steps(2) infinite; }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 14px; outline: none;
}
.chat-form input:focus { border-color: var(--brass-line); box-shadow: 0 0 0 3px var(--brass-soft); }
.suggests { display: flex; flex-wrap: wrap; gap: 7px; }
.suggest { font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; transition: all .15s; }
.suggest:hover { color: var(--brass); border-color: var(--brass-line); }

.err { padding: 16px 18px; border-radius: var(--r-sm); background: rgba(248, 113, 113, .07); border: 1px solid rgba(248, 113, 113, .28); font-size: 13.5px; line-height: 1.6; }
.err b { display: block; color: var(--bad); margin-bottom: 4px; }

/* ================================================================== */
/* Bandeau défilant                                                    */
/* ================================================================== */

.ticker {
  position: relative; z-index: 45; overflow: hidden;
  background: var(--brass); color: #16110A;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 46s linear infinite;
}
/* Deux jeux identiques se suivent : quand le premier a défilé d'exactement
   sa largeur, le second occupe sa place et la boucle est invisible. */
.ticker-set {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px 8px 0;
  font-family: var(--display); font-weight: 700;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.ticker-set b { font-weight: 700; }
.ticker-set i { font-style: normal; opacity: .5; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ================================================================== */
/* Rail social                                                         */
/* ================================================================== */

.rail {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 35;
  display: flex; flex-direction: column; gap: 10px;
}
.rail a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(17, 24, 35, .78); border: 1px solid var(--line);
  color: var(--muted); backdrop-filter: blur(8px);
  transition: color .15s, border-color .15s, transform .15s;
}
.rail a:hover { color: var(--brass); border-color: var(--brass-line); transform: translateY(-2px); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ================================================================== */
/* Capture d'e-mail                                                    */
/* ================================================================== */

.capture-h {
  font-weight: 700; font-size: 14.5px; color: var(--text);
  margin: 0 0 12px;
}
.capture {
  display: flex; gap: 10px; max-width: 470px; margin: 0 0 10px; flex-wrap: wrap;
}
.capture input {
  flex: 1 1 220px; min-width: 0;
  background: rgba(9, 12, 18, .55); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px;
  color: var(--text); font: inherit; font-size: 14.5px;
}
.capture input::placeholder { color: var(--faint); }
.capture input:focus { outline: none; border-color: var(--brass-line); background: rgba(9, 12, 18, .75); }
.capture input.invalid { border-color: var(--bad); }
.capture .btn { padding: 13px 26px; }

.capture-note { font-size: 13px; min-height: 19px; margin-bottom: 22px; color: var(--faint); }
.capture-note.ok { color: var(--good); }
.capture-note.err { color: var(--bad); }

/* ================================================================== */
/* Section sombre + bande d'appel                                      */
/* ================================================================== */

.sec-dark {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(45, 212, 167, .09), transparent 65%),
    rgba(8, 26, 21, .6);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  max-width: none; padding-left: 24px; padding-right: 24px;
}
.sec-dark > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.cta-band {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(45, 212, 167, .16), transparent 62%),
    linear-gradient(180deg, #0A2A22, #06180F);
  border-top: 1px solid var(--line-soft);
}
.cta-in { max-width: 760px; margin: 0 auto; padding: 76px 24px; text-align: center; }
.cta-in h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 14px;
}
.cta-in p { color: var(--muted); font-size: 16px; margin: 0 0 26px; }

/* ================================================================== */
/* Aperçu façon fiche d'analyse                                        */
/* ================================================================== */

.pv-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
@media (max-width: 900px) { .pv-grid { grid-template-columns: 1fr; } }

.pv-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.pv-h {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.pv-stack { display: flex; flex-direction: column; gap: 16px; }

.pv-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pv-metric span { font-size: 13.5px; color: var(--muted); }
.pv-metric b { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--brass); }

.pv-quote {
  border-left: 2px solid var(--brass-line); padding: 2px 0 2px 14px;
  color: var(--text); font-size: 14.5px; line-height: 1.66;
}

/* Barres de probabilité de l'aperçu */
.prob-rows { display: flex; flex-direction: column; gap: 12px; }
.prob-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; color: var(--muted); }
.prob-top b { font-size: 14px; font-weight: 700; }
.prob-top b.h { color: var(--home); }
.prob-top b.d { color: var(--text); }
.prob-top b.a { color: var(--away); }
.prob-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.prob-bar i { display: block; height: 100%; border-radius: 4px; }
.prob-bar i.h { background: var(--home); }
.prob-bar i.d { background: var(--draw); }
.prob-bar i.a { background: var(--away); }

.conf-inline { display: flex; align-items: center; gap: 12px; }
.conf-inline .conf-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.conf-inline .conf-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); }
.conf-num { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--brass); }
.conf-word { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.pv-foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pv-foot .pv-quote { flex: 1 1 340px; margin: 0; font-size: 13.5px; color: var(--muted); }

/*
 * Réserve au-dessus d'une ancre.
 *
 * Elle valait 84 px : la hauteur de la barre collante, pour que le titre de
 * section ne passe pas dessous. La barre a été retirée de l'accueil, et ces six
 * ancres n'existent que là — les pages légales ont les leurs et gardent leur
 * bandeau de retour.
 *
 * Les 84 px sont donc devenus du vide pur : cliquer « Voir la méthode »
 * amenait le titre à 84 px du haut, avec rien au-dessus. Mesuré, puis ramené à
 * la seule respiration qui reste utile — sans elle, le titre colle au bord de
 * l'écran, ce qui se lit comme une coupure.
 */
#top, #sports, #apercu, #avis, #densite, #methode, #preuve, #tarifs, #faq { scroll-margin-top: 18px; }

/*
 * La barre de navigation sur petit écran, en deux paliers.
 *
 * Elle ne rentrait pas : marque, « Connexion » et « Créer un compte » font
 * ensemble 386 px là où un écran de 390 en offre 362. Le bouton d'inscription
 * sortait donc par la droite, et le débordement décalait toute la page.
 *
 * Sous 520 px, on resserre et « Connexion » perd son habillage de bouton pour
 * redevenir un lien : il reste atteignable, ce qui compte pour un visiteur qui
 * revient, mais il cesse de disputer la place au geste qu'on veut obtenir.
 *
 * Sous 400 px, le mot de la marque s'efface et le sigle reste seul. Un
 * logotype tronqué au milieu d'un mot donne l'impression d'un site cassé ;
 * un sigle seul est une décision qui se lit comme telle.
 */
@media (max-width: 520px) {
  .nav-in { padding: 12px 14px; gap: 6px; }
  .brand { gap: 8px; }
  .brand-word { font-size: 13px; letter-spacing: .06em; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .nav-cta .btn-quiet { padding: 6px 2px; }
  .ticker-set { font-size: 10.5px; letter-spacing: .09em; }
  .capture .btn { flex: 1 1 100%; }
}
/*
 * 370 px, et non 400 : le seuil se choisit sur les appareils réels, pas sur un
 * chiffre rond. À 400 px, un iPhone de 390 — l'écran le plus répandu — perdait
 * le nom de la marque alors que la mesure montre qu'il tient avec seize pixels
 * de marge. Effacer le nom d'un produit que personne ne connaît encore coûte
 * plus cher que de resserrer deux boutons.
 */
@media (max-width: 370px) {
  .brand-word { display: none; }
}

/*
 * Les respirations, sur téléphone.
 *
 * Les marges de section valaient 84 px en haut comme en bas — une respiration
 * juste sur un écran de bureau de mille pixels de haut, un vide d'un tiers
 * d'écran sur un téléphone. Le visiteur y fait défiler du blanc entre deux
 * idées et perd le fil, ce qui se ressent comme du désordre alors que c'est du
 * trop-plein d'espace.
 *
 * Les marges latérales descendent de 24 à 18 px : sur 360 px de large, six
 * pixels de chaque côté rendus au contenu représentent trois pour cent de la
 * ligne, ce qui est visible sur un nom d'équipe long.
 */
@media (max-width: 640px) {
  .sec { padding: 56px 18px; }
  .sec-head { margin-bottom: 28px; }
  .band-in { padding: 22px 18px; }
  .app-main { padding: 16px 16px 72px; }
  .grid-heading { font-size: 16px; margin: 24px 0 12px; }
  .group { margin-bottom: 20px; }

  /*
   * Les barres de choix défilent au lieu de se replier.
   *
   * Six sports et dix compétitions, en `flex-wrap`, occupaient trois puis
   * quatre rangées : sept cents pixels de navigation avant la première
   * rencontre, sur un écran qui en fait huit cent quarante. Le tableau de bord
   * s'ouvrait donc sur ses propres onglets, et il fallait faire défiler pour
   * atteindre ce qu'on est venu voir.
   *
   * Une rangée qui défile horizontalement rend six rangées à la page. C'est
   * aussi le geste attendu sur un téléphone — on balaie une barre d'onglets,
   * on ne la lit pas comme un tableau.
   *
   * `scroll-snap` aligne les pastilles au repos : sans lui, on s'arrête sur
   * une pastille coupée en deux, ce qui donne l'impression d'un bug plutôt
   * que d'une liste.
   */
  .sport-tabs,
  .league-row,
  .tournament-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Les pastilles touchent les bords de l'écran plutôt que de s'arrêter à
       la marge : on voit qu'il y a une suite. */
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .sport-tabs::-webkit-scrollbar,
  .league-row::-webkit-scrollbar,
  .tournament-row::-webkit-scrollbar { display: none; }

  .sport-tabs > *,
  .league-row > *,
  .tournament-row > * { flex: none; scroll-snap-align: start; }

  .sport-tabs { gap: 6px; margin-bottom: 10px; }
  .league-row { gap: 6px; margin-bottom: 14px; }
  .tournament-row { margin-top: -4px; margin-bottom: 16px; }

  /* L'en-tête du tableau de bord tenait sur deux rangées : le nom du compte et
     l'insigne d'offre disent l'essentiel, « Tarifs » se retrouve dans le pied
     de page et n'a pas à disputer la place ici. */
  .appbar-actions [data-nav="pricing"] { display: none; }
  .appbar-in { gap: 8px; padding: 10px 14px; }
  .account { gap: 6px; font-size: 13px; }

  /*
   * Le nom de la marque s'efface dans l'application, pas sur l'accueil.
   *
   * Les trois groupes — marque, compte, déconnexion — demandent 373 px là où
   * un écran de 390 en offre 362 : « Déconnexion » basculait donc sur une
   * seconde rangée, et l'en-tête mangeait quatre-vingt-dix pixels de haut.
   *
   * C'est le nom qui cède, et seulement ici. Sur l'accueil, il présente un
   * produit qu'on ne connaît pas encore et il est gardé jusqu'à 370 px ; dans
   * l'application, l'utilisateur sait où il est, et le sigle suffit à
   * ramener à l'accueil.
   */
  .appbar .brand-word { display: none; }
}

/*
 * Le prénom cède la place au sélecteur de langue.
 *
 * La barre était réglée au pixel : trois groupes pour 373 px sur les 362 que
 * laisse un écran de 390. Y ajouter le choix de la langue la faisait repasser
 * sur deux rangées, et l'en-tête reprenait les quatre-vingt-dix pixels qu'on
 * lui avait retirés.
 *
 * C'est le prénom qui part : l'utilisateur sait qui il est, alors que
 * l'insigne porte son offre et son compteur, et que la langue n'a nulle part
 * ailleurs où aller une fois dans l'application.
 */
@media (max-width: 480px) {
  .appbar #acctName { display: none; }
  .appbar-actions { gap: 6px; }
}

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

.phone {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  /* Léger basculement : le téléphone est un objet, pas une capture d'écran. */
  perspective: 1400px;
}
.phone-frame {
  width: 300px; padding: 11px;
  border-radius: 42px;
  background: linear-gradient(160deg, #34343C, #17171B 45%, #0C0C0E);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .10) inset,
    0 0 0 1.5px rgba(255, 255, 255, .07),
    0 40px 80px -20px rgba(0, 0, 0, .75),
    0 12px 30px -12px rgba(0, 0, 0, .6);
  transform: rotateY(-9deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
.phone-frame:hover { transform: rotateY(-3deg) rotateX(0deg) translateY(-4px); }
@media (max-width: 940px) { .phone-frame { transform: none; } }

.phone-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 24px; border-radius: 0 0 16px 16px;
  background: #0C0C0E; z-index: 3;
}
.phone-screen {
  position: relative; overflow: hidden;
  border-radius: 32px; background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .05);
  min-height: 430px;
}
.phone-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 20px 5px;
  font-size: 11px; font-weight: 700; color: var(--text);
}
.phone-time { font-family: var(--display); letter-spacing: .02em; }
.phone-icons { display: inline-flex; align-items: center; gap: 4px; }
.phone-icons i { width: 11px; height: 8px; border-radius: 1.5px; background: rgba(255, 255, 255, .55); display: block; }
.phone-icons i.bat { width: 17px; border-radius: 2.5px; background: rgba(255, 255, 255, .8); }

.phone-app { padding: 12px 14px 20px; }

/* Le hero passe des dimensions de carte à celles d'un écran étroit : les
   composants réutilisés doivent se resserrer, pas déborder. */
.phone-app .match-top { font-size: 10.5px; margin-bottom: 12px; }
.phone-app .match-line { gap: 9px; }
.phone-app .match-line .nm { font-size: 13.5px !important; }
.phone-app .crest-badge, .phone-app .crest { width: 26px; height: 26px; }
.phone-app .crest-badge.crest-lg, .phone-app .crest-lg { width: 32px; height: 32px; }
.phone-app .pbar-labels { font-size: 10.5px; }
.phone-app .pbar-note { font-size: 10px; line-height: 1.45; }

/* Contenu propre à l'écran du téléphone */
.phone-cmp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.phone-cmp-h {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.phone-cmp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.phone-cmp-row .lab { flex: 0 0 62px; font-size: 10.5px; color: var(--muted); }
.phone-cmp-row .bar { flex: 1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.phone-cmp-row .bar i.h { background: var(--home); }
.phone-cmp-row .bar i.a { background: var(--away); }

.phone-verdict {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--brass-soft); border: 1px solid var(--brass-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.phone-verdict span { font-size: 10.5px; color: var(--muted); }
.phone-verdict b { font-size: 12px; color: var(--brass); font-weight: 700; }

/* ================================================================== */
/* Variantes de couleurs                                               */
/*                                                                     */
/* Toute la charte tient dans les variables ci-dessus : redéfinir une   */
/* poignée d'entre elles suffit à changer l'identité de la page sans    */
/* toucher à un seul composant. L'attribut est posé sur <html>.         */
/* ================================================================== */

/* ================================================================== */
/* Sélecteur de variante                                               */
/* ================================================================== */

/* Dans la barre de navigation : un sélecteur flottant recouvrait le bandeau
   de chiffres, quelle que soit sa position. */
.variant-pick {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; margin-right: 6px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.variant-dot {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  transition: transform .15s, border-color .15s;
}
.variant-dot:hover { transform: scale(1.14); }
.variant-dot[aria-pressed="true"] { border-color: var(--text); }
.variant-dot.v-emeraude { background: linear-gradient(135deg, #2DD4A7 50%, #F0A73C 50%); }
.variant-dot.v-cramoisi { background: linear-gradient(135deg, #FF4757 50%, #4D8DF5 50%); }
/* Masqués dans la barre de navigation faute de place ; au pied de page, la
   contrainte n'existe plus et ils redeviennent accessibles partout. */
@media (max-width: 620px) { .nav .variant-pick { display: none; } }

/* ================================================================== */
/* Bande des compétitions couvertes                                    */
/* ================================================================== */

.leagues {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), #06120E 40%, var(--ink));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* Pelouse nocturne : dégradés seulement, aucune image à charger. Les bandes
   de tonte alternées et la lueur des projecteurs suffisent à la lecture. */
.leagues-pitch {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(255, 255, 255, .13), transparent 70%),
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, .022) 0 46px,
      transparent 46px 92px
    ),
    radial-gradient(120% 90% at 50% 120%, rgba(45, 212, 167, .16), transparent 62%),
    linear-gradient(180deg, #071A13 0%, #04120C 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.leagues-in { position: relative; z-index: 2; padding: 72px 0 66px; }

.leagues-h {
  max-width: 780px; margin: 0 auto 42px; padding: 0 24px; text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.16; letter-spacing: -.02em;
}
.leagues-h em { font-style: normal; color: var(--brass); }

.leagues-marquee {
  overflow: hidden;
  /* Les extrémités s'estompent : le défilement paraît continu au lieu de
     buter sur le bord de l'écran. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.leagues-track { display: flex; width: max-content; animation: leagues 34s linear infinite; }
.leagues-set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
@keyframes leagues { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .leagues-track { animation: none; } }

.league-item {
  display: inline-flex; align-items: center; gap: 11px;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: color .2s, opacity .2s;
  opacity: .78;
}
.league-item:hover { color: #fff; opacity: 1; }
.league-name {
  font-family: var(--display); font-weight: 800;
  font-size: 21px; letter-spacing: .02em; text-transform: uppercase;
}
.league-sub {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); opacity: .85;
}
/* La pastille porte l'accent de son sport : la bande se lit alors comme un
   panorama des six disciplines, pas comme une liste indifférenciée. */
.league-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--lg, #fff) 62%, transparent);
  background: color-mix(in srgb, var(--lg, #fff) 14%, transparent);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  color: var(--lg, rgba(255, 255, 255, .92));
}
.league-sub { color: var(--lg, var(--brass)); }
.league-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .3); flex-shrink: 0; }

/* color-mix reste récent : sans lui, la pastille garde un contour neutre
   plutôt que de disparaître. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .league-mark { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
}

@media (max-width: 620px) {
  .leagues-in { padding: 52px 0 46px; }
  .leagues-set { gap: 36px; padding-right: 36px; }
  .league-name { font-size: 17px; }
}


/* ================================================================== */
/* Accueil — mise en page PRONOSPORTS                                        */
/* ================================================================== */

.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(46px, 6.6vw, 86px); line-height: .92; letter-spacing: -.035em;
  margin: 0 0 24px;
}

.kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 6px 13px 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brass);
}

.lede { color: var(--muted); font-size: 16.5px; line-height: 1.68; max-width: 470px; margin: 0 0 30px; }
.lede b { color: var(--text); font-weight: 700; }

/* Quatre chiffres, dont un à zéro : la promesse de gain. C'est le seul
   endroit du site où un zéro est un argument. */
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 36px; }
.hstat { display: flex; flex-direction: column; gap: 3px; }
.hstat-n { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--brass); line-height: 1; }
.hstat-l { font-size: 11.5px; color: var(--faint); }

/* ---- Densité du total ---- */

.density { background: var(--ink); border-bottom: 1px solid var(--line-soft); }
.density-in { max-width: 1280px; margin: 0 auto; padding: 34px 28px 40px; }

.density-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.density-title, .density-meta {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.density-title { color: var(--brass); }
.density-meta { color: var(--faint); }

/* L'histogramme : une barre par total possible, hauteur proportionnelle à sa
   probabilité. La barre modale est mise en avant, l'espérance est repérée par
   un trait vertical. */
.density-plot {
  position: relative;
  display: flex; align-items: flex-end; gap: 3px;
  height: 212px; padding-bottom: 26px; padding-top: 22px;
  border-bottom: 1px solid var(--line);
}
.dbar { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.dbar i {
  display: block; width: 100%; border-radius: 2px 2px 0 0;
  background: var(--surface-3);
  transition: background .15s;
}
.dbar.peak i { background: var(--brass); }
.dbar.near i { background: color-mix(in srgb, var(--brass) 52%, var(--surface-3)); }
.dbar:hover i { background: var(--brass-hi); }
.dbar-x {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--faint);
}
.dbar-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.dbar:hover .dbar-tip { opacity: 1; }

/* Repère de l'espérance : un trait fin traversant tout le graphique. */
/* Repère de l'espérance. Un fond en pointillés sur un élément d'un pixel
   passait inaperçu : on utilise une bordure, nettement plus lisible. */
.dmean {
  position: absolute; top: 20px; bottom: 26px; width: 0;
  border-left: 2px dashed var(--brass);
  opacity: .75; pointer-events: none;
}
/* L'étiquette se place au-dessus des barres : le graphique réserve pour elle
   une bande haute, sinon elle recouvrait la barre modale. */
.dmean span {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brass);
  white-space: nowrap;
}

.density-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 18px;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
}
.dfoot-sides { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dfoot-side { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dfoot-side b { color: var(--text); }
.dfoot-side .sw { width: 9px; height: 9px; border-radius: 2px; display: block; }
.dfoot-meta { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .density-plot { height: 140px; gap: 2px; }
  .dbar-x { font-size: 8.5px; }
  .hero-stats { gap: 26px; }
}

/* ---- Ancres de section dans la barre de navigation ---- */
.nav-links {
  display: flex; gap: 26px; align-items: center;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
}
.nav-links a { transition: color .14s; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 1000px) { .nav-links { display: none; } }

/* ---- Carte de rencontre du hero ---- */

.hc-side { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; }
.hc-name { font-family: var(--display); font-size: 15px; font-weight: 800; flex: 1; }
.hc-name.r { text-align: right; }
.hc-vs { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .1em; }

.hc-cmp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.hc-cmp-h {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
/* Trois colonnes : valeur, barre, valeur — et le libellé sous la barre, pour
   que les chiffres des deux camps restent alignés d'une ligne à l'autre. */
.hc-cmp-row {
  display: grid; grid-template-columns: 42px 1fr 42px;
  align-items: center; gap: 10px; margin-bottom: 12px;
}
.hc-cmp-row .v { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.hc-cmp-row .v.r { text-align: right; }
.hc-cmp-row .bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; }
.hc-cmp-row .bar i.h { background: var(--home); }
.hc-cmp-row .bar i.a { background: var(--away); }
.hc-cmp-row .lab {
  grid-column: 2; text-align: center; margin-top: -6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
}

.hc-conf {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hc-conf span { font-size: 11.5px; color: var(--muted); }
.hc-conf b { font-family: var(--mono); font-size: 11.5px; color: var(--brass); }

.match-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint);
}

/* ---- Variantes : le lime est la charte de base ---- */

:root[data-variant="emeraude"] {
  --ink: #04110D; --surface: #0B1D18; --surface-2: #10281F; --surface-3: #163327;
  --line: #1F4436; --line-soft: #143026;
  --text: #E8F5EF; --muted: #85A79A; --faint: #56766A;
  --brass: #2DD4A7; --brass-hi: #5BE9C2;
  --brass-soft: rgba(45, 212, 167, .13); --brass-line: rgba(45, 212, 167, .34);
  --home: #2DD4A7; --away: #F0A73C; --draw: #3D5A50;
  --good: #4ADE80; --warn: #FACC15; --bad: #FB7185;
  --deep: #04110D; --deep-2: #071A14;
}
:root[data-variant="cramoisi"] {
  --ink: #12060A; --surface: #230F15; --surface-2: #2E141C; --surface-3: #3A1A23;
  --line: #4E222E; --line-soft: #351720;
  --text: #FCECEF; --muted: #C09098; --faint: #8E656E;
  --brass: #FF4757; --brass-hi: #FF6B78;
  --brass-soft: rgba(255, 71, 87, .14); --brass-line: rgba(255, 71, 87, .36);
  --home: #FF4757; --away: #4D8DF5; --draw: #6B4650;
  --good: #34D399; --warn: #FBBF24; --bad: #FF4757;
  --deep: #12060A; --deep-2: #1C0A11;
}
.variant-dot.v-lime { background: linear-gradient(135deg, #C8FF4D 50%, #FF7A45 50%); }

.hidden { display: none !important; }

/* ---- Sélecteur de langue ---- */
.lang-pick {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; margin-right: 6px;
  border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.lang-opt {
  padding: 5px 9px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--faint);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  transition: color .14s, background .14s;
}
.lang-opt:hover { color: var(--text); }
.lang-opt[aria-pressed="true"] { color: var(--ink); background: var(--brass); }
@media (max-width: 700px) { .nav .lang-pick { display: none; } }

/* Version compacte, pour la barre du tableau de bord : trois groupes s'y
   partagent déjà la largeur, et le sélecteur ne doit pas les faire passer à la
   ligne. Sous 560 px il ne reste que la langue active, cliquable pour faire
   défiler les trois — on ne perd pas la fonction, seulement l'étalage. */
.lang-pick-sm { padding: 2px; margin-right: 0; }
.lang-pick-sm .lang-opt { padding: 4px 7px; font-size: 10px; letter-spacing: .04em; }
@media (max-width: 640px) { .lang-pick-sm .lang-opt { padding: 4px 6px; font-size: 9.5px; } }
@media (max-width: 420px) {
  .lang-pick-sm .lang-opt { display: none; }
  .lang-pick-sm .lang-opt[aria-pressed="true"] { display: block; }
}

/* ---- Panneau des offres ---- */
.offers-sheet { max-width: 1040px; }
.offers-head {
  position: relative; padding: 30px 26px 4px; text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.offers-head h2 {
  font-family: var(--display); font-size: clamp(20px, 3vw, 27px);
  font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em;
}
.offers-head p { margin: 0 0 24px; font-size: 13.5px; color: var(--muted); }
.offers-body { padding: 26px; }
/*
 * Les cartes du panneau ne s'animent pas à l'apparition.
 *
 * Ce n'est pas qu'une question de goût : `.reveal` part à `opacity: 0` et
 * n'est rendu visible que par l'observateur d'intersection, qui balaie la page
 * au chargement. Les cartes injectées ici ne lui passent jamais sous les yeux
 * — sans cette règle, le panneau s'ouvrirait vide. Les deux propriétés sont
 * celles que `.reveal` anime réellement : `translate`, pas `transform`.
 */
.offers-body .price-card,
.offers-body .price-free { opacity: 1; translate: none; }
@media (max-width: 780px) {
  .offers-head { padding: 22px 18px 2px; }
  .offers-body { padding: 18px; }
}

/* ---- Thèmes nocturnes ----
   `clair.css` est ce qui retourne l'éclairage ; il s'annule entièrement sur
   `data-theme="sombre"`. Une variante ne fait donc que repeindre la charte
   nocturne, et les quatre se distinguent par leur seule dominante. */

:root[data-variant="nuit"] {
  --ink: #08080A; --surface: #111114; --surface-2: #17171B; --surface-3: #202027;
  --line: #26262E; --line-soft: #1A1A20;
  --text: #F4F4F6; --muted: #9A9AA4; --faint: #6A6A74;
  --brass: #FF3B50; --brass-hi: #FF6273;
  --brass-soft: rgba(255, 59, 80, .13); --brass-line: rgba(255, 59, 80, .34);
  --home: #22C55E; --away: #8A8A96; --draw: #34343E;
  --good: #22C55E; --warn: #F0B429; --bad: #FF3B50;
  /* `scene.css` peint le corps avec `--deep` : sans cette ligne, les quatre
     thèmes nocturnes auraient rigoureusement le même fond. */
  --deep: #08080A; --deep-2: #101014;
}

:root[data-variant="indigo"] {
  --ink: #06070F; --surface: #0E1122; --surface-2: #141833; --surface-3: #1C2145;
  --line: #262D5A; --line-soft: #171B36;
  --text: #ECEFFB; --muted: #949CC4; --faint: #646B93;
  --brass: #6E8BFF; --brass-hi: #93A9FF;
  --brass-soft: rgba(110, 139, 255, .14); --brass-line: rgba(110, 139, 255, .36);
  --home: #4ADE9B; --away: #8891C0; --draw: #2C3358;
  --good: #4ADE9B; --warn: #F5C451; --bad: #FF7089;
  --deep: #06070F; --deep-2: #0C0F1E;
}

/* Les pastilles du sélecteur : chacune montre son fond et son accent, coupés
   en diagonale. On choisit un thème en le voyant, pas en lisant son nom. */
.variant-dot.v-clair    { background: linear-gradient(135deg, #FBFBFC 50%, #F5253C 50%); }
.variant-dot.v-nuit     { background: linear-gradient(135deg, #111114 50%, #FF3B50 50%); }
.variant-dot.v-indigo   { background: linear-gradient(135deg, #0E1122 50%, #6E8BFF 50%); }
.variant-dot.v-sable    { background: linear-gradient(135deg, #FAF7F1 50%, #D4551F 50%); }
.variant-dot.v-ardoise  { background: linear-gradient(135deg, #F5F7FA 50%, #2670D8 50%); }