/* =======================
   FV Maths — THEMES GLOBAUX
   ======================= */

/* Variables d’accents (palettes “prestige”) */
:root{
  --accent:#b68955;        /* bronze par défaut */
  --accent-2:#f1d1a2;
  --accent-weak:rgba(182,137,85,.25);
}

/* Palettes (débloquées par score) */
body.palette-bronze  { --accent:#a97142; --accent-2:#e1bf99; --accent-weak:rgba(169,113,66,.25); }
body.palette-silver  { --accent:#9aa3ad; --accent-2:#dce3ea; --accent-weak:rgba(154,163,173,.25); }
body.palette-gold    { --accent:#c9a227; --accent-2:#ffe79b; --accent-weak:rgba(201,162,39,.25); }
body.palette-diamond { --accent:#5ad2ff; --accent-2:#c8f2ff; --accent-weak:rgba(90,210,255,.25); }
body.palette-violet  { --accent:#7b2ff7; --accent-2:#f107a3; --accent-weak:rgba(123,47,247,.25); } /* ton “mode violet” */

/* Boutons “header” recolorés par palette */
.bouton-header{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#111;
  border:1px solid rgba(0,0,0,.06);
}
.bouton-header:hover{ filter:brightness(1.05); }

/* Cartes/encarts : petit bord à la couleur d'accent */
.section-jeux details, .bouton-jeu{ border-color: var(--accent-weak); }

/* Accents sur petits éléments */
h2 strong, h3 strong, .ico-24{ color: var(--accent); }
a:hover{ text-decoration-color: var(--accent); }

/* Zone score en “mode palette” (sélecteur dans l’UI) */
body.score-mode-palette .score{
  color:#111;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  border-color: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -8px 16px rgba(0,0,0,.08),
    0 14px 26px var(--accent-weak) !important;
}
body.theme-night.score-mode-palette .score{ color:#001018; }

/* ——— Correctif universel de calques pour les thèmes ——— */
html, body { min-height:100%; }
body { position: relative; } /* contexte pour ::before/::after */

body[class*="theme-"] h1,
body[class*="theme-"] .wrapper,
body[class*="theme-"] footer {
  position:relative;
  z-index:1;     /* passe AU-DESSUS des overlays des thèmes */
}

/* Assure aussi les coins header au premier plan */
.top-left, .top-right { position:absolute; z-index:2; }

/* Anti-conflit avec l’image de fond quand un thème est actif */
body[class*="theme-"].bg-new { background-image: none !important; }

/* ——— Effet halo optionnel autour du pseudo ——— */
#user-pseudo{ position:relative; z-index:0; }
body.halo-soft #user-pseudo::after{
  content:""; position:absolute; left:-10px; right:-10px; top:-6px; bottom:-6px;
  border-radius:12px; background: currentColor; opacity:.18; filter: blur(10px); z-index:-1;
}

/* =======================
   THÈME : NUIT ÉTOILÉE
   ======================= */
body.theme-night { color:#000; }
body.theme-night .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-night a,
body.theme-night .bouton-header { color:#000; }

body.theme-night::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* petites étoiles + halos */
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 22%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 42% 14%, rgba(255,255,255,0.75) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 66% 19%, rgba(180,200,255,0.6) 50%, transparent 53%),
    radial-gradient(2px 2px at 80% 25%, rgba(255,255,255,0.9) 60%, transparent 61%),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35% 65%, rgba(200,220,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 72%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 82%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.85) 60%, transparent 61%),
    /* halos */
    radial-gradient(900px 700px at 15% 12%, rgba(255,255,255,0.15) 0%, transparent 70%),
    radial-gradient(800px 600px at 85% 88%, rgba(100,150,255,0.08) 0%, transparent 70%),
    linear-gradient(180deg,#0b1020 0%,#151b34 100%);
  background-repeat:no-repeat;
}

/* =======================
   THÈME : OCÉAN
   ======================= */
body.theme-ocean { color:#ffffff; }
body.theme-ocean .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-ocean .bouton-jeu,
body.theme-ocean .bouton-header { color:#000; }

body.theme-ocean::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(12px 12px at 12% 24%, rgba(255,255,255,.10) 40%, transparent 41%),
    radial-gradient(10px 10px at 28% 18%, rgba(255,255,255,.08) 40%, transparent 41%),
    radial-gradient(8px 8px   at 44% 30%, rgba(255,255,255,.10) 40%, transparent 41%),
    radial-gradient(14px 14px at 66% 22%, rgba(255,255,255,.09) 40%, transparent 41%),
    radial-gradient(9px 9px   at 78% 40%, rgba(255,255,255,.10) 40%, transparent 41%),
    radial-gradient(900px 700px at 20% 0%, rgba(0,255,255,.10) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 100%, rgba(0,120,255,.10) 0%, transparent 70%),
    linear-gradient(180deg, #031e3a 0%, #063b5b 40%, #0a5f79 100%);
}
body.theme-ocean::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    image-set(
      url("/fond/ocean_bulles.avif") type("image/avif"),
      url("/fond/ocean_bulles.webp") type("image/webp"),
      url("/fond/ocean_bulles.png") type("image/png")
    );
  background-repeat: repeat;
  opacity:.25;
}

/* =======================
   THÈME : FORÊT
   ======================= */
body.theme-forest { color:#ffffff; }
body.theme-forest .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-forest .bouton-jeu,
body.theme-forest .bouton-header { color:#000; }

body.theme-forest::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 15% 8%,  rgba(120,200,120,.12) 0%, transparent 70%),
    radial-gradient(800px 600px at 85% 92%, rgba(60,140,80,.10) 0%, transparent 70%),
    radial-gradient(8px 8px at 20% 30%,  rgba(255,255,255,.08) 45%, transparent 46%),
    radial-gradient(10px 10px at 38% 18%, rgba(255,255,255,.06) 45%, transparent 46%),
    radial-gradient(9px 9px   at 54% 42%, rgba(255,255,255,.07) 45%, transparent 46%),
    radial-gradient(7px 7px   at 70% 26%, rgba(255,255,255,.06) 45%, transparent 46%),
    radial-gradient(8px 8px   at 82% 52%, rgba(255,255,255,.07) 45%, transparent 46%),
    linear-gradient(180deg, #0a1d12 0%, #0f2d1a 40%, #134127 100%);
}
body.theme-forest::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    image-set(
      url("/fond/forest_overlay.avif") type("image/avif"),
      url("/fond/forest_overlay.webp") type("image/webp"),
      url("/fond/forest_overlay.png") type("image/png")
    );
  background-repeat: repeat;
  opacity:.22;
}

/* =======================
   THÈME : DÉSERT
   ======================= */
body.theme-desert { color:#ffffff; }
body.theme-desert .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-desert .bouton-jeu,
body.theme-desert .bouton-header { color:#000; }

body.theme-desert::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 18% 10%, rgba(255,200,120,.18) 0%, transparent 70%),
    radial-gradient(800px 600px at 82% 90%, rgba(255,150,80,.12) 0%, transparent 70%),
    radial-gradient(1px 1px at 22% 44%, rgba(255,255,255,.15) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 26%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 58%, rgba(255,255,255,.12) 50%, transparent 51%),
    linear-gradient(180deg, #2a1406 0%, #7a4a19 38%, #c28e3a 65%, #edc77a 100%);
}
body.theme-desert::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/desert_dunes.avif") type("image/avif"),
    url("/fond/desert_dunes.webp") type("image/webp"),
    url("/fond/desert_dunes.png") type("image/png")
  );
  background-repeat: repeat;
  opacity:.18;
}

/* =======================
   THÈME : GALAXIE (avec variantes)
   ======================= */
body.theme-galaxy { color:#ffffff; }
body.theme-galaxy .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-galaxy .bouton-jeu,
body.theme-galaxy .bouton-header { color:#000; }

body.theme-galaxy{ --mw-opacity:.85; --bh-opacity:.85; }
body.theme-galaxy::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% 12%, rgba(170,90,255,.18) 0%, transparent 70%),
    radial-gradient(1000px 700px at 85% 78%, rgba(255,90,200,.14) 0%, transparent 70%),
    radial-gradient(900px 600px  at 55% 35%, rgba(80,160,255,.12) 0%, transparent 70%),
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255,255,255,.60) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 42%, rgba(255,255,255,.70) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(200,220,255,.60) 50%, transparent 53%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.85) 60%, transparent 61%),
    linear-gradient(180deg,#0a0b1a 0%, #101436 40%, #0b1028 100%);
}
body.theme-galaxy::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:none; /* rempli par gx-mw / gx-bh */
}
body.theme-galaxy.gx-mw::after{
  background:
    image-set(
      url("/fond/galaxy_mw.avif") type("image/avif"),
      url("/fond/galaxy_mw.webp") type("image/webp"),
      url("/fond/galaxy_mw.png")  type("image/png")
    );
  background-repeat:no-repeat;
  background-position:center 28%;
  background-size:1600px auto;
  opacity: var(--mw-opacity);
}
body.theme-galaxy.gx-bh::after{
  background-repeat:no-repeat;
  background-position:72% 55%;
  background-size:900px auto;
  opacity: var(--bh-opacity);
}
@media (prefers-reduced-motion: no-preference){
  body.theme-galaxy.gx-bh::after,
  body.theme-galaxy.gx-mw.gx-bh::after{
    animation: gx-drift 120s linear infinite;
  }
  @keyframes gx-drift{ from{ transform: rotate(0.0001turn);} to{ transform: rotate(0.0100turn);} }
}

/* =======================
   THÈME : TROU NOIR
   ======================= */
body.theme-blackhole { color:#ffffff; }
body.theme-blackhole .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-blackhole .bouton-jeu,
body.theme-blackhole .bouton-header { color:#000; }

body.theme-blackhole::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% 12%, rgba(170,90,255,.18) 0%, transparent 70%),
    radial-gradient(1000px 700px at 85% 78%, rgba(255,90,200,.14) 0%, transparent 70%),
    radial-gradient(900px 600px  at 55% 35%, rgba(80,160,255,.12) 0%, transparent 70%),
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255,255,255,.60) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 42%, rgba(255,255,255,.70) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(200,220,255,.60) 50%, transparent 53%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.85) 60%, transparent 61%),
    linear-gradient(180deg,#0a0b1a 0%, #101436 40%, #0b1028 100%);
}
body.theme-blackhole::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    image-set(
      url("/fond/galaxy_blackhole.avif") type("image/avif"),
      url("/fond/galaxy_blackhole.webp") type("image/webp"),
      url("/fond/galaxy_blackhole.png")  type("image/png")
    );
  background-repeat:no-repeat;
  background-position:72% 55%;
  background-size:900px auto;
  opacity:.85;
}

/* ——— Look verrouillé (thèmes non débloqués) ——— */
.theme-lock { opacity:.45; filter:grayscale(1); pointer-events:auto; }
.theme-lock input[type="checkbox"]{ pointer-events:none; }
/* =======================
   THÈME : VOLCAN
   ======================= */
body.theme-volcano { color:#ffffff; }
body.theme-volcano .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-volcano .bouton-jeu,
body.theme-volcano .bouton-header { color:#000; }

body.theme-volcano::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* halos rouge/orange */
    radial-gradient(900px 700px at 20% 12%, rgba(255,120,60,0.18) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 88%, rgba(255,60,0,0.12) 0%, transparent 70%),
    /* fond basaltique chaud */
    linear-gradient(180deg,#1a0f0b 0%, #31160f 40%, #4b1a12 70%, #6d2a0f 100%);
  background-repeat:no-repeat;
}
body.theme-volcano::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/volcan.avif") type("image/avif"),
    url("/fond/volcan.webp") type("image/webp"),
    url("/fond/volcan.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position: 78% 70%;
  background-size: min(48vw, 900px) auto;
  opacity:.22;
}

/* =======================
   THÈME : AURORE
   ======================= */
body.theme-aurora { color:#ffffff; }
body.theme-aurora .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-aurora .bouton-jeu,
body.theme-aurora .bouton-header { color:#000; }

body.theme-aurora::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* halos verts/violets façon aurores */
    radial-gradient(1100px 800px at 18% 8%,  rgba(80,220,160,0.14) 0%, transparent 70%),
    radial-gradient(1000px 700px at 82% 86%, rgba(160,120,255,0.12) 0%, transparent 70%),
    /* ciel froid */
    linear-gradient(180deg,#071426 0%, #0c2140 45%, #0a1730 100%);
  background-repeat:no-repeat;
}
body.theme-aurora::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/aurore.avif") type("image/avif"),
    url("/fond/aurore.webp") type("image/webp"),
    url("/fond/aurore.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position: center 25%;
  background-size: min(80vw, 1600px) auto;
  opacity:.24;
}
/* === VOLCAN — amélioration intégration & lisibilité === */
body.theme-volcano{
  /* variables de placement/force (ajuste si besoin) */
  --volcano-x: 78%;
  --volcano-y: 70%;
  --volcano-size: min(52vw, 980px);
  --volcano-opacity: .20;
  --volcano-feather: 22%;      /* largeur du fondu en bord */
  --volcano-glow: rgba(255,120,60,0.18);
}

/* 1) Halo “lave” supplémentaire pour fondre le PNG dans le fond */
body.theme-volcano::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* halo localisé autour du volcan (nouveau) */
    radial-gradient(600px 420px at var(--volcano-x) var(--volcano-y),
                    var(--volcano-glow) 0%, transparent 70%),
    /* halos globaux (avec alphas corrigés) */
    radial-gradient(900px 700px at 20% 12%, rgba(255,120,60,0.18) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 88%, rgba(255,60,0,0.12) 0%, transparent 70%),
    /* fond basaltique */
    linear-gradient(180deg,#1a0f0b 0%, #31160f 40%, #4b1a12 70%, #6d2a0f 100%);
  background-repeat:no-repeat;
}

/* 2) PNG volcan repositionné + fondu de bords via mask */
body.theme-volcano::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/volcan.avif") type("image/avif"),
    url("/fond/volcan.webp") type("image/webp"),
    url("/fond/volcan.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position: var(--volcano-x) var(--volcano-y);
  background-size: var(--volcano-size) auto;
  opacity: var(--volcano-opacity);
  /* fondu doux autour du PNG : même position/size que l’image */
  -webkit-mask-image: radial-gradient(120% 120% at var(--volcano-x) var(--volcano-y),
                                      #000 60%, transparent calc(60% + var(--volcano-feather)));
  mask-image: radial-gradient(120% 120% at var(--volcano-x) var(--volcano-y),
                              #000 60%, transparent calc(60% + var(--volcano-feather)));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--volcano-size) auto;
  mask-size: var(--volcano-size) auto;
  -webkit-mask-position: var(--volcano-x) var(--volcano-y);
  mask-position: var(--volcano-x) var(--volcano-y);
  /* option : légère fusion couleur avec le fond (peut être retiré) */
  mix-blend-mode: normal;
}

/* 3) Reposition responsive pour éviter qu’il soit “derrière” trop de cartes */
@media (max-width: 1024px){
  body.theme-volcano{
    --volcano-x: 92%;  /* cale plus à droite */
    --volcano-y: 62%;
    --volcano-size: min(54vw, 760px);
  }
}
@media (max-width: 700px){
  body.theme-volcano{
    --volcano-x: 84%;  /* remonte à droite sur mobile */
    --volcano-y: 20%;
    --volcano-size: min(84vw, 560px);
    --volcano-feather: 26%;
  }
}

/* 4) Subtil drift (optionnel) pour donner de la vie, sans gêner la lecture */
@media (prefers-reduced-motion: no-preference){
  body.theme-volcano::after{
    animation: volcano-drift 42s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes volcano-drift{
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(0,-0.6vh,0) scale(1.01); }
  }
}
/* =======================
   THÈME : CRISTAUX ÉTERNELS (40 badges)
   ======================= */
body.theme-crystal { color:#000 !important; }
body.theme-crystal * { color:#000 !important; text-shadow:none !important; }
body.theme-crystal.bg-new { background-image:none !important; }
body.theme-crystal::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 20% 12%, rgba(120,200,255,.15) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 88%, rgba(200,150,255,.12) 0%, transparent 70%),
    linear-gradient(180deg,#031026 0%, #082045 40%, #0b2f5f 100%);
}
body.theme-crystal::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/cristal.avif") type("image/avif"),
    url("/fond/cristal.webp") type("image/webp"),
    url("/fond/cristal.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.28;
}

/* =======================
   THÈME : CITÉ VOLANTE (45 badges)
   ======================= */
body.theme-skycity { color:#000 !important; }
body.theme-skycity * { color:#000 !important; text-shadow:none !important; }
body.theme-skycity.bg-new { background-image:none !important; }
body.theme-skycity::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 70% 20%, rgba(200,160,255,.18) 0%, transparent 70%),
    radial-gradient(900px 700px at 25% 85%, rgba(255,220,160,.14) 0%, transparent 70%),
    linear-gradient(180deg,#0d1022 0%, #1c1f3c 45%, #2b315a 100%);
}
body.theme-skycity::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/volant.avif") type("image/avif"),
    url("/fond/volant.webp") type("image/webp"),
    url("/fond/volant.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.28;
}

/* =======================
   THÈME : PORTAIL MYSTIQUE (50 badges)
   ======================= */
body.theme-portal { color:#000 !important; }
body.theme-portal * { color:#000 !important; text-shadow:none !important; }
body.theme-portal.bg-new { background-image:none !important; }
body.theme-portal::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 700px at 50% 50%, rgba(120,190,255,.22) 0%, transparent 65%),
    radial-gradient(1000px 800px at 50% 50%, rgba(140,170,255,.10) 0%, transparent 70%),
    linear-gradient(180deg,#041021 0%, #092238 45%, #0e2f4c 100%);
}
body.theme-portal::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/portail.avif") type("image/avif"),
    url("/fond/portail.webp") type("image/webp"),
    url("/fond/portail.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.30;
}

/* =======================
   THÈME : TRÔNE DU DIEU DES MATHS (55 badges)
   ======================= */
body.theme-throne { color:#000 !important; }
body.theme-throne * { color:#000 !important; text-shadow:none !important; }
body.theme-throne.bg-new { background-image:none !important; }
body.theme-throne::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 20% 15%, rgba(255,220,120,.16) 0%, transparent 70%),
    radial-gradient(900px 700px at 80% 85%, rgba(200,220,255,.12) 0%, transparent 70%),
    linear-gradient(180deg,#0f1320 0%, #1a1f2e 40%, #22283a 100%);
}
body.theme-throne::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/zeus.avif") type("image/avif"),
    url("/fond/zeus.webp") type("image/webp"),
    url("/fond/zeus.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.28;
}
/* =======================
   THÈME : DRAGON (60 badges)
   ======================= */
body.theme-dragon { color:#fff; }
body.theme-dragon .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-dragon .bouton-jeu,
body.theme-dragon .bouton-header { color:#000; }

body.theme-dragon::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 20% 15%, rgba(255,80,80,.20) 0%, transparent 70%),
    radial-gradient(900px 700px at 80% 85%, rgba(120,20,20,.15) 0%, transparent 70%),
    linear-gradient(180deg,#0f0a0a 0%, #1a1010 40%, #2a0f0f 100%);
}
body.theme-dragon::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/dragon.avif") type("image/avif"),
    url("/fond/dragon.webp") type("image/webp"),
    url("/fond/dragon.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:min(50vw, 1000px) auto;
  opacity:.28;
}

/* =======================
   THÈME : MONTAGNE (65 badges)
   ======================= */
body.theme-montagne { color:#fff; }
body.theme-montagne .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-montagne .bouton-jeu,
body.theme-montagne .bouton-header { color:#ffffff; }

body.theme-montagne::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,#0a0a12 0%, #1a1f28 50%, #2b3240 100%);
}
body.theme-montagne::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/montagne.avif") type("image/avif"),
    url("/fond/montagne.webp") type("image/webp"),
    url("/fond/montagne.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  opacity:.30;
}

/* =======================
   THÈME : ORAGE (70 badges)
   ======================= */
body.theme-orage { color:#fff; }
body.theme-orage .section-jeux details[open]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
body.theme-orage .bouton-jeu,
body.theme-orage .bouton-header { color:#ffffff; }

body.theme-orage::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 700px at 50% 0%, rgba(120,120,255,.20) 0%, transparent 70%),
    linear-gradient(180deg,#0a0a14 0%, #101020 40%, #181830 100%);
}
body.theme-orage::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:image-set(
    url("/fond/orage.avif") type("image/avif"),
    url("/fond/orage.webp") type("image/webp"),
    url("/fond/orage.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.30;
}
/* =======================
   THÈME : LICORNE / CANDY (8 badges)
   ======================= */
body.theme-licorne { color:#000 !important; }
body.theme-licorne * { color:#000 !important; text-shadow:none !important; }
body.theme-licorne.bg-new { background-image:none !important; }

body.theme-licorne::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* halos pastel arc-en-ciel (doux, non criards) */
  background:
    radial-gradient(900px 700px at 20% 12%, rgba(255,192,203,.28) 0%, transparent 70%),
    radial-gradient(900px 700px at 80% 88%, rgba(186,225,255,.22) 0%, transparent 70%),
    radial-gradient(1200px 800px at 50% 0%, rgba(255,255,200,.18) 0%, transparent 70%),
    /* ciel candy */
    linear-gradient(180deg,#fff6fb 0%, #ffece6 45%, #ffe5ff 70%, #e7f3ff 100%);
}
body.theme-licorne::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* ⚠️ images à fond transparent */
  background:image-set(
    url("/fond/licorne.avif") type("image/avif"),
    url("/fond/licorne.webp") type("image/webp"),
    url("/fond/licorne.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.80;
}

/* =======================
   THÈME : FERME (overlay)
   ======================= */
body.theme-ferme { color:#111 !important; }
body.theme-ferme * { color:#111 !important; text-shadow:none !important; }
body.theme-ferme.bg-new { background-image:none !important; }

body.theme-ferme::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* ciel → horizon → champs, avec halo “soleil” */
  background:
    radial-gradient(1200px 800px at 75% 10%, rgba(255,236,170,.35) 0%, transparent 60%),
    radial-gradient(900px 700px  at 20% 85%, rgba(140,200,120,.20) 0%, transparent 70%),
    linear-gradient(180deg,#eaf6ff 0%, #fff8cc 45%, #e8f6d9 70%, #d9f0c8 100%);
}
body.theme-ferme::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* ⚠️ images à fond transparent */
  background:image-set(
    url("/fond/ferme.avif") type("image/avif"),
    url("/fond/ferme.webp") type("image/webp"),
    url("/fond/ferme.png")  type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center;         /* ajuste: center bottom; si besoin */
  background-size:cover;
  opacity:.80;
}