/* Styles Cosy (anime mignon), Néon et Clair pop : ils reprennent la forme du style « Coloré » (theme-colore.css)
   et n'en changent que les couleurs, les matières et les polices. */

/* ---------- Cosy : crème, ciel bleu et nuages, contours chocolat ---------- */
:root[data-theme="cosy"]{--fond:#fff4e3;--texte:#4a3b2f;--doux:#7d6a58;--titre:"Lilita One";--gras:"Lilita One"}
:root[data-theme="cosy"] body{color:#4a3b2f}
:root[data-theme="cosy"] #ciel{background:linear-gradient(180deg,#bfe6ff 0%,#e8f6ff 35%,#fff4e3 70%,#ffe8c7 100%)}
:root[data-theme="cosy"] #ciel::before{inset:-10%;opacity:.9;animation:nuages 90s linear infinite;background:
  radial-gradient(60px 26px at 15% 12%,#fff 98%,transparent),radial-gradient(40px 20px at 22% 10%,#fff 98%,transparent),
  radial-gradient(70px 28px at 70% 20%,#fff 98%,transparent),radial-gradient(45px 20px at 78% 17%,#fff 98%,transparent);background-size:700px 500px}
@keyframes nuages{to{transform:translateX(700px)}}
:root[data-theme="cosy"] #ciel::after{opacity:.5;background-image:radial-gradient(3px 3px at 30% 60%,#ffd166,transparent),radial-gradient(3px 3px at 80% 80%,#8ad6b0,transparent),radial-gradient(2px 2px at 55% 70%,#7cc4ff,transparent)}
:root[data-theme="cosy"] h1,:root[data-theme="cosy"] h2,:root[data-theme="cosy"] h3{color:#fff;text-shadow:0 3px 0 #6b4a2f,2px 0 0 #6b4a2f,-2px 0 0 #6b4a2f,0 -2px 0 #6b4a2f,2px 2px 0 #6b4a2f,-2px 2px 0 #6b4a2f}
:root[data-theme="cosy"] .panneau h2,:root[data-theme="cosy"] .offre h3{color:#fff}
:root[data-theme="cosy"] #barre,:root[data-theme="cosy"] #menu{background:#fffaf0;border-color:#6b4a2f;box-shadow:0 3px 0 rgba(107,74,47,.25)}
:root[data-theme="cosy"] #menu a{color:#a08d79}:root[data-theme="cosy"] #menu a.actif{color:#3a8fd9}:root[data-theme="cosy"] #menu a.actif svg{fill:#ffb703}
:root[data-theme="cosy"] #menu a.actif::before{background:#ffb703}:root[data-theme="cosy"] #menu a.boutique-lien{color:#3a8fd9}
:root[data-theme="cosy"] .compteur{background:#fff;border:3px solid #6b4a2f;color:#4a3b2f}
:root[data-theme="cosy"] .icone-barre{background:#8ad6b0;border-color:#6b4a2f;box-shadow:0 3px 0 #6b4a2f}
:root[data-theme="cosy"] .icone-barre svg{fill:#fff}
:root[data-theme="cosy"] .panneau,:root[data-theme="cosy"] .offre,:root[data-theme="cosy"] .solde{background:linear-gradient(180deg,#7cc4ff,#5aa9ee);border:3px solid #6b4a2f;box-shadow:0 5px 0 #6b4a2f,inset 0 3px 0 rgba(255,255,255,.5)}
:root[data-theme="cosy"] .offre p,:root[data-theme="cosy"] .panneau .sous{color:#f3f9ff}
:root[data-theme="cosy"] .sous{color:#7d6a58}
:root[data-theme="cosy"] .bouton{background:linear-gradient(180deg,#ffe08a,#ffc23d);color:#5a3a12;border-color:#6b4a2f;box-shadow:0 5px 0 #6b4a2f,inset 0 3px 0 rgba(255,255,255,.6);border-radius:999px}
:root[data-theme="cosy"] .bouton.second{background:#fffaf0;color:#6b4a2f}
:root[data-theme="cosy"] .bouton.brille{background:linear-gradient(180deg,#b5efcf,#7fd6a8);color:#1f5a3c}
:root[data-theme="cosy"] .bouton.bleu{background:linear-gradient(180deg,#ffffff,#e8f6ff);color:#2b6cb0}
:root[data-theme="cosy"] .puce{background:#fffaf0;color:#6b4a2f;border-color:#6b4a2f;box-shadow:0 3px 0 #6b4a2f}
:root[data-theme="cosy"] .puce[aria-pressed="true"]{background:#ffc23d;color:#5a3a12}
:root[data-theme="cosy"] .tuile{border-color:#6b4a2f;box-shadow:0 5px 0 #6b4a2f,inset 0 3px 0 rgba(255,255,255,.45)}
:root[data-theme="cosy"] .tuile:nth-child(6n+1){background:linear-gradient(160deg,#ffb48a,#f28f5c)}
:root[data-theme="cosy"] .tuile:nth-child(6n+2){background:linear-gradient(160deg,#8ad6b0,#5bbf8f)}
:root[data-theme="cosy"] .tuile:nth-child(6n+3){background:linear-gradient(160deg,#7cc4ff,#4fa3ea)}
:root[data-theme="cosy"] .tuile:nth-child(6n+4){background:linear-gradient(160deg,#ffd166,#f5b433)}
:root[data-theme="cosy"] .tuile:nth-child(6n+5){background:linear-gradient(160deg,#b9a6ff,#9580f0)}
:root[data-theme="cosy"] .tuile:nth-child(6n+6){background:linear-gradient(160deg,#ff9f8a,#ef7b67)}
:root[data-theme="cosy"] .hero-booster{background:radial-gradient(circle at 80% 40%,#fff3b0 0,transparent 45%),linear-gradient(160deg,#ffb48a,#ffd166);border-color:#6b4a2f;box-shadow:0 5px 0 #6b4a2f}
:root[data-theme="cosy"] .cadeau{background:linear-gradient(160deg,#8ad6b0,#5bbf8f);border-color:#6b4a2f;box-shadow:0 5px 0 #6b4a2f}
:root[data-theme="cosy"] .banniere-saison{border-color:#6b4a2f;box-shadow:0 5px 0 #6b4a2f}
:root[data-theme="cosy"] .salut small,:root[data-theme="cosy"] .titre-section a,:root[data-theme="cosy"] .gain{color:#fff3b0;text-shadow:0 2px 0 #6b4a2f}
:root[data-theme="cosy"] .salut small{color:#e07a3f;text-shadow:none}
:root[data-theme="cosy"] .titre-joueur{background:#fffaf0;color:#6b4a2f;border-color:#6b4a2f;box-shadow:0 3px 0 #6b4a2f}
:root[data-theme="cosy"] .titre-joueur svg{fill:#ffb703}
:root[data-theme="cosy"] .jauge{background:#fffaf0;border-color:#6b4a2f}
:root[data-theme="cosy"] .jauge > span{background:repeating-linear-gradient(-45deg,#7fd6a8 0 10px,#9fe3bd 10px 20px)!important}
:root[data-theme="cosy"] .reserve-points i{border-color:#6b4a2f;background:rgba(255,255,255,.5)}
:root[data-theme="cosy"] input[type=search],:root[data-theme="cosy"] select{border-color:#6b4a2f;color:#4a3b2f;background:#fffaf0}
:root[data-theme="cosy"] .compteur-liste{color:#7d6a58}
:root[data-theme="cosy"] .carte .face{box-shadow:0 0 0 3px #6b4a2f,0 6px 0 3px rgba(107,74,47,.45)}
:root[data-theme="cosy"] .solde .montant{text-shadow:0 3px 0 #6b4a2f}

/* ---------- Néon : nuit violette, grille rétro, lumières cyan et magenta ---------- */
:root[data-theme="neon"]{--fond:#07041a;--texte:#f0f4ff;--doux:#a9a3d9;--titre:"Outfit";--gras:"Outfit"}
:root[data-theme="neon"] #ciel{background:radial-gradient(900px 500px at 50% 110%,rgba(255,0,170,.35),transparent 60%),radial-gradient(700px 400px at 50% -10%,rgba(0,229,255,.25),transparent 60%),#07041a}
:root[data-theme="neon"] #ciel::before{inset:auto 0 0 0;height:45%;opacity:.5;animation:none;transform:perspective(300px) rotateX(60deg);transform-origin:bottom;
  background:linear-gradient(#ff2bd6 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,#ff2bd6 1px,transparent 1px) 0 0/40px 40px}
:root[data-theme="neon"] h1,:root[data-theme="neon"] h2,:root[data-theme="neon"] h3{font-family:"Outfit";font-weight:800;color:#fff;text-shadow:0 0 6px #ff2bd6,0 0 18px #ff2bd6,0 0 32px #b100ff;letter-spacing:.04em}
:root[data-theme="neon"] #barre,:root[data-theme="neon"] #menu{background:rgba(10,5,35,.9);border-color:#00e5ff;box-shadow:0 0 18px rgba(0,229,255,.35)}
:root[data-theme="neon"] #menu a{color:#7c78b8;font-family:"Outfit";font-weight:800}:root[data-theme="neon"] #menu a.actif{color:#00e5ff}
:root[data-theme="neon"] #menu a.actif svg{fill:#00e5ff;filter:drop-shadow(0 0 6px #00e5ff)}:root[data-theme="neon"] #menu a.actif::before{background:#00e5ff;box-shadow:0 0 10px #00e5ff}
:root[data-theme="neon"] .compteur{background:#0d0830;border:1.5px solid #ff2bd6;box-shadow:0 0 10px rgba(255,43,214,.4)}
:root[data-theme="neon"] .icone-barre{background:#0d0830;border:1.5px solid #00e5ff;box-shadow:0 0 10px rgba(0,229,255,.5)}
:root[data-theme="neon"] .icone-barre svg{fill:#00e5ff}
:root[data-theme="neon"] .panneau,:root[data-theme="neon"] .offre,:root[data-theme="neon"] .solde{background:rgba(16,9,50,.85);border:1.5px solid #b100ff;box-shadow:0 0 16px rgba(177,0,255,.45),inset 0 0 20px rgba(177,0,255,.15)}
:root[data-theme="neon"] .bouton{background:transparent;color:#00e5ff;border:2px solid #00e5ff;box-shadow:0 0 12px rgba(0,229,255,.6),inset 0 0 12px rgba(0,229,255,.3);text-shadow:0 0 8px #00e5ff;font-family:"Outfit";font-weight:800;border-radius:12px}
:root[data-theme="neon"] .bouton.second{color:#ff8be8;border-color:#ff2bd6;box-shadow:0 0 10px rgba(255,43,214,.5);text-shadow:0 0 6px #ff2bd6;background:transparent}
:root[data-theme="neon"] .bouton.brille{color:#5dff9e;border-color:#5dff9e;box-shadow:0 0 14px rgba(93,255,158,.6),inset 0 0 12px rgba(93,255,158,.3);text-shadow:0 0 8px #5dff9e;background:transparent}
:root[data-theme="neon"] .bouton.bleu{background:transparent}
:root[data-theme="neon"] .puce{background:transparent;color:#d9d4ff;border:1.5px solid #6a5cff;box-shadow:none;font-family:"Outfit";font-weight:700}
:root[data-theme="neon"] .puce[aria-pressed="true"]{color:#07041a;background:#00e5ff;border-color:#00e5ff;box-shadow:0 0 12px #00e5ff}
:root[data-theme="neon"] .tuile{background:rgba(16,9,50,.85)!important;border:1.5px solid;box-shadow:0 0 14px currentColor}
:root[data-theme="neon"] .tuile:nth-child(3n+1){color:#ff2bd6}:root[data-theme="neon"] .tuile:nth-child(3n+2){color:#00e5ff}:root[data-theme="neon"] .tuile:nth-child(3n+3){color:#5dff9e}
:root[data-theme="neon"] .tuile b{color:#fff;text-shadow:0 0 8px currentColor;font-family:"Outfit";font-weight:800}
:root[data-theme="neon"] .tuile svg{fill:currentColor;filter:drop-shadow(0 0 6px currentColor)}
:root[data-theme="neon"] .hero-booster{background:rgba(16,9,50,.9);border:2px solid #ff2bd6;box-shadow:0 0 22px rgba(255,43,214,.6)}
:root[data-theme="neon"] .cadeau{background:rgba(16,9,50,.9);border:2px solid #5dff9e;box-shadow:0 0 18px rgba(93,255,158,.5)}
:root[data-theme="neon"] .banniere-saison{border:2px solid #ff9b2b;box-shadow:0 0 18px rgba(255,155,43,.6)}
:root[data-theme="neon"] .jauge{background:#0d0830;border:1px solid #6a5cff}
:root[data-theme="neon"] .jauge > span{background:linear-gradient(90deg,#00e5ff,#ff2bd6)!important;box-shadow:0 0 10px #ff2bd6;animation:none}
:root[data-theme="neon"] .gain,:root[data-theme="neon"] .titre-section a,:root[data-theme="neon"] .salut small{color:#00e5ff;text-shadow:0 0 6px #00e5ff}
:root[data-theme="neon"] .mission b,:root[data-theme="neon"] .succes b{font-family:"Outfit";font-weight:800}
:root[data-theme="neon"] .titre-joueur{background:transparent;color:#ffe14d;border:1.5px solid #ffe14d;box-shadow:0 0 10px rgba(255,225,77,.6)}
:root[data-theme="neon"] input[type=search],:root[data-theme="neon"] select{background:#0d0830;color:#fff;border:1.5px solid #6a5cff;box-shadow:none}
:root[data-theme="neon"] .solde .montant{text-shadow:0 0 12px #00e5ff}
:root[data-theme="neon"] .carte .face{box-shadow:0 0 0 1.5px #00e5ff,0 0 18px rgba(0,229,255,.5)}
:root[data-theme="neon"] .carte .nom{text-shadow:0 0 6px #000,0 0 10px #ff2bd6}

/* ---------- Clair pop : blanc, cartes flottantes, rose vif ---------- */
:root[data-theme="pop"]{--fond:#eef4ff;--texte:#1d2340;--doux:#5b6385;--panneau:#ffffff;--ligne:#d7def0;--titre:"Outfit",system-ui,sans-serif;--gras:"Outfit",system-ui,sans-serif}
:root[data-theme="pop"] body{color:#1d2340}
:root[data-theme="pop"] #ciel{background:radial-gradient(700px 400px at 90% -10%,#ffe0f0,transparent 60%),radial-gradient(700px 500px at -10% 30%,#d9f2ff,transparent 60%),#f4f7ff}
:root[data-theme="pop"] #ciel::before,:root[data-theme="pop"] #ciel::after{display:none}
:root[data-theme="pop"] h1,:root[data-theme="pop"] h2,:root[data-theme="pop"] h3{color:#1d2340;text-shadow:none;font-family:"Outfit";font-weight:800}
:root[data-theme="pop"] #barre,:root[data-theme="pop"] #menu{background:#fff;border-color:#e3e8f5;box-shadow:0 4px 18px rgba(30,40,90,.08)}
:root[data-theme="pop"] #menu a{color:#8a91b0}:root[data-theme="pop"] #menu a.actif{color:#ff3d7f}:root[data-theme="pop"] #menu a.actif svg{fill:#ff3d7f}
:root[data-theme="pop"] #menu a.actif::before{background:#ff3d7f}
:root[data-theme="pop"] .compteur{background:#f1f4ff;border:0;color:#1d2340}
:root[data-theme="pop"] .icone-barre{background:#f1f4ff;border:0;box-shadow:none}
:root[data-theme="pop"] .panneau,:root[data-theme="pop"] .offre,:root[data-theme="pop"] .solde{background:#fff;border:0;box-shadow:0 8px 24px rgba(30,40,90,.1);color:#1d2340}
:root[data-theme="pop"] .panneau h2{color:#1d2340}
:root[data-theme="pop"] .sous,:root[data-theme="pop"] .offre p{color:#5b6385}
:root[data-theme="pop"] .bouton{background:#ff3d7f;color:#fff;border:0;box-shadow:0 6px 16px rgba(255,61,127,.35);text-shadow:none;border-radius:999px;font-family:"Outfit";font-weight:800}
:root[data-theme="pop"] .bouton.second{background:#eef1ff;color:#2b3570;box-shadow:none}
:root[data-theme="pop"] .bouton.brille{background:linear-gradient(90deg,#ff3d7f,#ff8a3d)}
:root[data-theme="pop"] .bouton.bleu{background:#2f7bff;color:#fff}
:root[data-theme="pop"] .puce{background:#fff;color:#2b3570;border:1px solid #dfe4f3;box-shadow:none;font-family:"Outfit";font-weight:700}
:root[data-theme="pop"] .puce[aria-pressed="true"]{background:#1d2340;color:#fff}
:root[data-theme="pop"] .tuile{border:0;box-shadow:0 8px 20px rgba(30,40,90,.12)}
:root[data-theme="pop"] .hero-booster{background:linear-gradient(135deg,#7b5cff,#2f7bff);border:0;box-shadow:0 10px 30px rgba(47,123,255,.35)}
:root[data-theme="pop"] .hero-booster h2{color:#fff}
:root[data-theme="pop"] .cadeau{background:linear-gradient(135deg,#ffb020,#ff6a3d);border:0;box-shadow:0 8px 22px rgba(255,120,40,.3);animation:none}
:root[data-theme="pop"] .banniere-saison{border:0}
:root[data-theme="pop"] .mission b,:root[data-theme="pop"] .succes b{color:#1d2340;font-family:"Outfit";font-weight:800}
:root[data-theme="pop"] .gain,:root[data-theme="pop"] .titre-section a{color:#ff3d7f}
:root[data-theme="pop"] .jauge{background:#e8ecf8;border:0}
:root[data-theme="pop"] .jauge > span{background:linear-gradient(90deg,#ff3d7f,#ff8a3d)!important;animation:none}
:root[data-theme="pop"] .salut small{color:#ff3d7f}
:root[data-theme="pop"] .titre-joueur{background:#1d2340;color:#fff;border:0;box-shadow:none}
:root[data-theme="pop"] .titre-joueur svg{fill:#ffd21f}
:root[data-theme="pop"] input[type=search],:root[data-theme="pop"] select{border:1px solid #dfe4f3;box-shadow:none}
:root[data-theme="pop"] .solde .montant{color:#1d2340;text-shadow:none}
:root[data-theme="pop"] .carte .face{box-shadow:0 8px 20px rgba(30,40,90,.25)}
:root[data-theme="pop"] .compteur-liste{color:#5b6385}

/* ---------- lisibilité commune aux styles clairs ---------- */
/* l'ouverture des boosters et le gacha restent une scène de nuit : le texte y reste clair */
:root:is([data-theme="cosy"],[data-theme="pop"]) #calque,:root:is([data-theme="cosy"],[data-theme="pop"]) .gacha-calque{--texte:#fff;--doux:#d8dcff;color:#fff}
:root:is([data-theme="cosy"],[data-theme="pop"]) #calque h1,:root:is([data-theme="cosy"],[data-theme="pop"]) #calque h2{color:#fff}
:root:is([data-theme="cosy"],[data-theme="pop"]) #calque .mission b,:root:is([data-theme="cosy"],[data-theme="pop"]) #calque .succes b{color:#fff}
:root:is([data-theme="cosy"],[data-theme="pop"]) .fiche h1{color:#fff}
:root:is([data-theme="cosy"],[data-theme="pop"]) .banniere-saison b{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
:root[data-theme="pop"] .hero-booster .sous,:root[data-theme="pop"] .hero-booster p{color:rgba(255,255,255,.85)}
:root[data-theme="pop"] .mission .gain{color:#ff3d7f;text-shadow:none}
:root[data-theme="pop"] #menu a.boutique-lien{color:#2f7bff}:root[data-theme="pop"] #menu a.boutique-lien.actif{color:#ff3d7f}
:root[data-theme="cosy"] #menu a.boutique-lien.actif{color:#3a8fd9}
/* Néon : le calendrier de connexion passe en cases sombres éclairées */
:root[data-theme="neon"] .calendrier div{background:#0d0830;color:#a9a3d9;border:1.5px solid #6a5cff}
:root[data-theme="neon"] .calendrier div.pris{background:rgba(93,255,158,.12);border-color:#5dff9e;color:#5dff9e}
:root[data-theme="neon"] .calendrier div.aujourdhui{background:#0d0830;border-color:#ffe14d;color:#ffe14d;box-shadow:0 0 12px rgba(255,225,77,.6)}
:root[data-theme="neon"] .bouton.bleu{color:#7cc4ff;border-color:#7cc4ff;box-shadow:0 0 12px rgba(124,196,255,.6);text-shadow:0 0 8px #7cc4ff}
/* Profil : avec cinq styles, les boutons passent sous le titre du réglage */
#themes{flex-wrap:wrap;gap:8px}