/* =============================================================
   PRONOSPORTS — les mondes visuels
   ------------------------------------------------------------
   Chargée en DERNIER, après `pronosports.css`, `scene.css` et
   `clair.css`.

   Une variante de couleur ne suffit pas à faire un thème. Repeindre
   les mêmes cartes de verre en bleu puis en vert donne sept fois la
   même page, et personne n'y voit un choix.

   Chaque thème change donc quatre choses, pas une :

     1. le FOND — sa matière, pas seulement sa teinte ;
     2. la MATIÈRE des cartes — verre flou, papier opaque, ou simple
        trait ;
     3. le RAYON des angles — un outil de travail n'a pas les mêmes
        arrondis qu'une vitrine ;
     4. l'OMBRE — portée profonde, ombre courte, ou aucune.

   C'est ce qui sépare une page dense d'une page aérée, un rapport
   imprimé d'un tableau de bord. Deux thèmes de ce fichier peuvent
   partager une couleur sans se ressembler.
   ============================================================= */

/* ------------------------------------------------------------------ */
/* SABLE — papier, encre, imprimerie                                   */
/* ------------------------------------------------------------------ */

/*
 * Le registre d'un rapport imprimé. Pas de verre, pas de flou, pas de
 * lueur : des aplats opaques, un filet net, et une ombre courte comme
 * celle d'une feuille posée sur une table. Les angles sont presque
 * droits — le papier ne s'arrondit pas.
 */
:root[data-variant="sable"] {
  --r-sm: 3px; --r: 5px; --r-lg: 7px;
  --shadow: 0 1px 0 rgba(60, 46, 26, .07), 0 2px 5px -2px rgba(60, 46, 26, .13);
  --shadow-lg: 0 1px 0 rgba(60, 46, 26, .07), 0 8px 20px -8px rgba(60, 46, 26, .2);
}

:root[data-variant="sable"] body {
  /* Grain de papier : un bruit très fin, et deux lavis à peine perceptibles
     pour que la page ne soit pas un aplat mort. */
  background:
    radial-gradient(60vw 40vw at 12% 0%, rgba(212, 85, 31, .05), transparent 62%),
    radial-gradient(50vw 44vw at 92% 20%, rgba(46, 125, 82, .045), transparent 60%),
    #FAF7F1;
}
:root[data-variant="sable"] .aurora { display: none; }
:root[data-variant="sable"] .grain { opacity: .5; mix-blend-mode: multiply; }

/* Toutes les surfaces deviennent du papier : opaques, cernées, sans flou. */
:root[data-variant="sable"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details,
  .avis-carte, .league-tile, .match, .preview, .hero-card, .auth-card
) {
  background: #FFFDF9;
  border: 1px solid #DCD3C2;
  backdrop-filter: none;
  box-shadow: var(--shadow);
}
:root[data-variant="sable"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  transform: none;
  border-color: #B4451F;
  box-shadow: var(--shadow-lg);
}
/* Le liseré conique du survol appartient au verre : sur du papier, il détonne. */
:root[data-variant="sable"] :is(.sport-card, .price-card, .proof-card, .steps li)::after,
:root[data-variant="sable"] :is(.price-card, .proof-card)::before { display: none; }

/* Un filet double sous les titres de section, comme une manchette. */
:root[data-variant="sable"] .sec-head { border-bottom: 3px double #DCD3C2; padding-bottom: 22px; }
:root[data-variant="sable"] .sec-head h2 { -webkit-text-fill-color: #1E1A14; color: #1E1A14; background: none; }

/* La barre reprend la ligne : rectangulaire, cernée, pas flottante. */
:root[data-variant="sable"] .nav { top: 0; padding-inline: 0; }
:root[data-variant="sable"] .nav-in {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #DCD3C2;
  background: rgba(250, 247, 241, .96);
  box-shadow: none;
  max-width: none;
}

/* ------------------------------------------------------------------ */
/* ARDOISE — l'outil de travail                                        */
/* ------------------------------------------------------------------ */

/*
 * Dense, carré, sans effet. Le registre d'un terminal de salle des
 * marchés : chaque pixel sert, rien n'attire l'œil sauf le chiffre.
 * Angles quasi nuls, aucune ombre, un trait d'un pixel partout, et
 * une trame de fond millimétrée.
 */
:root[data-variant="ardoise"] {
  --r-sm: 2px; --r: 3px; --r-lg: 4px;
  --shadow: none;
  --shadow-lg: none;
}

:root[data-variant="ardoise"] body {
  /* Papier millimétré : la grille dit « instrument de mesure », ce que le
     produit prétend être. */
  background:
    linear-gradient(rgba(18, 23, 31, .045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(18, 23, 31, .045) 1px, transparent 1px) 0 0 / 28px 100%,
    #F5F7FA;
}
:root[data-variant="ardoise"] .aurora { display: none; }
:root[data-variant="ardoise"] .grain { display: none; }

:root[data-variant="ardoise"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details,
  .avis-carte, .league-tile, .match, .preview, .hero-card, .auth-card
) {
  background: #FFFFFF;
  border: 1px solid #D3DBE6;
  backdrop-filter: none;
  box-shadow: none;
}
:root[data-variant="ardoise"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  transform: none;
  border-color: #1F5FBF;
  background: #FBFCFE;
}
:root[data-variant="ardoise"] :is(.sport-card, .price-card, .proof-card, .steps li)::after,
:root[data-variant="ardoise"] :is(.price-card, .proof-card)::before { display: none; }

/* Sections compactées : moins d'air, plus de contenu à l'écran. */
:root[data-variant="ardoise"] .sec { padding-block: 52px; }
:root[data-variant="ardoise"] .sec-head { margin-bottom: 26px; }
:root[data-variant="ardoise"] .sec-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
  -webkit-text-fill-color: #12171F;
  color: #12171F;
  background: none;
}
:root[data-variant="ardoise"] .nav-in { border-radius: 4px; }
:root[data-variant="ardoise"] .btn { border-radius: 3px; }

/* ------------------------------------------------------------------ */
/* NUIT — noir profond, néon                                           */
/* ------------------------------------------------------------------ */

/*
 * L'inverse exact du papier : le fond disparaît, seules les lumières
 * restent. Cartes très sombres, presque invisibles, cernées d'un trait
 * qui s'allume au survol. Halo prononcé sur l'accent.
 */
:root[data-variant="nuit"] {
  --r-sm: 12px; --r: 18px; --r-lg: 26px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 1);
  --shadow-lg: 0 60px 140px -40px rgba(0, 0, 0, 1);
}

:root[data-variant="nuit"] body {
  background:
    radial-gradient(70vw 50vw at 50% -10%, rgba(255, 59, 80, .10), transparent 62%),
    #08080A;
}
:root[data-variant="nuit"] .aurora { opacity: .5; }
:root[data-variant="nuit"] .grain { opacity: .22; }

:root[data-variant="nuit"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details, .avis-carte, .league-tile
) {
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(20px);
}
:root[data-variant="nuit"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  border-color: rgba(255, 59, 80, .5);
  box-shadow: 0 0 70px -22px rgba(255, 59, 80, .65);
}
:root[data-variant="nuit"] .btn-brass { box-shadow: 0 0 34px -8px rgba(255, 59, 80, .8); }

/* ------------------------------------------------------------------ */
/* ÉMERAUDE — la pelouse                                               */
/* ------------------------------------------------------------------ */

/*
 * Le seul thème qui assume le terrain : le fond porte des bandes de
 * tonte, très sombres, et les cartes sont des plaques mates posées
 * dessus. Angles francs, aucun flou — on est dehors, pas derrière une
 * vitre.
 */
:root[data-variant="emeraude"] {
  --r-sm: 6px; --r: 9px; --r-lg: 12px;
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, .95);
  --shadow-lg: 0 40px 90px -34px rgba(0, 0, 0, 1);
}

:root[data-variant="emeraude"] body {
  /* Bandes de tonte : deux verts à peine distincts, alternés tous les
     120 px. De près on ne les voit pas ; de loin la page a une texture. */
  background:
    repeating-linear-gradient(90deg,
      rgba(45, 212, 167, .028) 0 120px,
      transparent 120px 240px),
    radial-gradient(70vw 46vw at 50% 0%, rgba(45, 212, 167, .10), transparent 66%),
    #04110D;
}
:root[data-variant="emeraude"] .aurora { opacity: .35; }

:root[data-variant="emeraude"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details, .avis-carte, .league-tile
) {
  background: #0B1D18;
  border: 1px solid #1F4436;
  backdrop-filter: none;
}
:root[data-variant="emeraude"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  border-color: #2DD4A7;
  background: #0E241E;
}

/* ------------------------------------------------------------------ */
/* INDIGO — ciel nocturne                                              */
/* ------------------------------------------------------------------ */

/*
 * Verre profond et champ d'étoiles. Le fond n'est pas plat : deux
 * couches de points minuscules, à densités différentes, donnent une
 * profondeur que ni un aplat ni un dégradé ne produisent. Cartes très
 * translucides, angles très arrondis.
 */
:root[data-variant="indigo"] {
  --r-sm: 14px; --r: 22px; --r-lg: 30px;
  --shadow: 0 30px 70px -28px rgba(0, 0, 8, .95);
  --shadow-lg: 0 60px 130px -38px rgba(0, 0, 8, 1);
}

:root[data-variant="indigo"] body {
  /* Le champ d'étoiles est dessiné en dégradés radiaux répétés plutôt qu'en
     image : deux tailles de trame, décalées, et l'œil lit un ciel. */
  background:
    radial-gradient(1.4px 1.4px at 22% 18%, rgba(255, 255, 255, .42), transparent 100%) 0 0 / 190px 190px,
    radial-gradient(1px 1px at 68% 62%, rgba(190, 205, 255, .30), transparent 100%) 0 0 / 130px 130px,
    radial-gradient(70vw 48vw at 50% -6%, rgba(110, 139, 255, .16), transparent 66%),
    #06070F;
}
:root[data-variant="indigo"] .aurora { opacity: .55; }

:root[data-variant="indigo"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details, .avis-carte, .league-tile
) {
  background: rgba(110, 139, 255, .07);
  border: 1px solid rgba(150, 170, 255, .16);
  backdrop-filter: blur(26px) saturate(1.2);
}
:root[data-variant="indigo"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  border-color: rgba(150, 170, 255, .5);
  box-shadow: 0 0 80px -26px rgba(110, 139, 255, .8);
}

/* ------------------------------------------------------------------ */
/* CRAMOISI — la salle, avant l'entrée                                 */
/* ------------------------------------------------------------------ */

/*
 * Dramatique et resserré. Vignettage marqué, fond bordeaux très sombre,
 * et un liseré d'accent à gauche de chaque carte plutôt qu'un cadre
 * complet : le regard descend la colonne au lieu de sauter de boîte en
 * boîte.
 */
:root[data-variant="cramoisi"] {
  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --shadow: 0 24px 60px -26px rgba(0, 0, 0, 1);
  --shadow-lg: 0 50px 110px -36px rgba(0, 0, 0, 1);
}

:root[data-variant="cramoisi"] body {
  background:
    radial-gradient(100vw 70vh at 50% 42%, rgba(255, 71, 87, .07), transparent 58%),
    radial-gradient(120vw 90vh at 50% 50%, transparent 38%, rgba(0, 0, 0, .72) 100%),
    #12060A;
}
:root[data-variant="cramoisi"] .aurora { opacity: .3; }
:root[data-variant="cramoisi"] .grain { opacity: .34; }

:root[data-variant="cramoisi"] :is(
  .sport-card, .price-card, .proof-card, .steps li, .faq details, .avis-carte, .league-tile
) {
  background: #1B0C11;
  border: 1px solid #3A1922;
  border-left: 3px solid #FF4757;
  backdrop-filter: none;
}
:root[data-variant="cramoisi"] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover {
  background: #241016;
  border-left-color: #FF7080;
}
:root[data-variant="cramoisi"] :is(.sport-card, .price-card, .proof-card, .steps li)::after,
:root[data-variant="cramoisi"] :is(.price-card, .proof-card)::before { display: none; }

/* ------------------------------------------------------------------ */
/* Communs aux thèmes nocturnes                                        */
/* ------------------------------------------------------------------ */

/*
 * `clair.css` est désactivé par `data-theme="sombre"`, mais certaines
 * règles qu'il portait n'ont pas d'équivalent nocturne — la barre en
 * pastille, notamment. On les rétablit ici pour les quatre thèmes.
 */
:root[data-theme="sombre"] .nav-in {
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: 10px 12px 10px 22px;
}
:root[data-theme="sombre"] .nav { top: 14px; padding-inline: 16px; background: none; border-bottom: none; }
:root[data-theme="sombre"] .nav.compact .nav-in { background: rgba(255, 255, 255, .07); }

/*
 * La pastille se resserre sur téléphone.
 *
 * Elle est déclarée ici avec une spécificité supérieure à celle des règles
 * mobiles de la feuille de base — `:root[data-theme]` l'emporte sur une simple
 * classe. Le resserrement écrit là-bas n'avait donc aucun effet, et la barre
 * gardait ses 34 px de rembourrage plus les 32 px du conteneur : sur un écran
 * de 390, il ne restait que 324 px pour la marque et deux boutons.
 *
 * On corrige au même niveau de spécificité plutôt qu'en surenchérissant
 * ailleurs — c'est ici que la valeur est décidée, c'est ici qu'elle se règle.
 */
@media (max-width: 520px) {
  :root[data-theme="sombre"] .nav { top: 8px; padding-inline: 8px; }
  :root[data-theme="sombre"] .nav-in { padding: 8px 8px 8px 14px; border-radius: 100px; }
}

/* Le bandeau des compétitions : blanc en thème clair, il doit se fondre ici. */
:root[data-theme="sombre"] .leagues { background: none; border-block: 1px solid var(--line); }
:root[data-theme="sombre"] .league-item .league-mark {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-variant] :is(.sport-card, .price-card, .proof-card, .avis-carte):hover { transform: none; }
}