/* ============================================================
   LE THEME TRANSLUCIDE (« verre ») ET LA COULEUR DU FANTOME — 07/10/2026
   Lionel : « un thème translucide dans toute l'appli et le site,
   comme sur iPhone » ; « changer la couleur du fantôme, le rendre
   translucide ou transparent ».
   Pose par appareil.js : <html data-verre="1"> et <html data-fantome="…">.
   ============================================================ */

/* ---------- LA COULEUR DU FANTOME (ses bulles restent blanches) ---------- */
:root[data-fantome="bleu"]   { --fa-c1: #F2F8FF; --fa-c2: #CFE5FF; --fa-c3: #9CCBFF; --fa-c4: #6AA6E8; }
:root[data-fantome="vert"]   { --fa-c1: #F1FFF7; --fa-c2: #C9F5DD; --fa-c3: #97E8BE; --fa-c4: #5BC58F; }
:root[data-fantome="rose"]   { --fa-c1: #FFF4F7; --fa-c2: #FFD6E1; --fa-c3: #FFB8CB; --fa-c4: #E883A1; }
:root[data-fantome="violet"] { --fa-c1: #F7F3FF; --fa-c2: #E1D6FF; --fa-c3: #CDB9FF; --fa-c4: #9F86E8; }
:root[data-fantome="or"]     { --fa-c1: #FFFBEA; --fa-c2: #FFEFB8; --fa-c3: #FFE08A; --fa-c4: #D9B243; }
/* translucide : du verre teinte, qui laisse voir derriere lui */
:root[data-fantome="verre"] .fa-corps { fill-opacity: .5; }
:root[data-fantome="verre"] :is(.fa-ombre-bas, .fa-ombre-cote) { opacity: .5; }
:root[data-fantome="verre"] .fa-perso { filter: drop-shadow(0 0 12px rgba(255,255,255,.75)) drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
/* transparent : seulement son contour lumineux, son visage et son antenne */
:root[data-fantome="transparent"] .fa-corps { fill-opacity: .08; stroke: rgba(255,255,255,.95) !important; stroke-width: 2.4 !important; }
:root[data-fantome="transparent"][data-theme="clair"] .fa-corps { stroke: rgba(60,80,110,.75) !important; }
:root[data-fantome="transparent"] :is(.fa-ombre-bas, .fa-ombre-cote, .fa-reflet) { opacity: 0; }

/* le nuancier des reglages */
.nuancier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nuance { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid var(--bord); background: var(--surface); color: var(--texte-2); cursor: pointer; font: 600 11px 'Poppins', system-ui, sans-serif; transition: transform .2s, border-color .2s; }
.nuance i { width: 26px; height: 30px; border-radius: 13px 13px 6px 6px; background: var(--n); border: 1.5px solid rgba(120,135,150,.45); box-shadow: 0 0 10px rgba(255,255,255,.45); }
.nuance.n-verre i { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.15)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nuance.n-transparent i { background: transparent; border: 2px dashed var(--texte-3); box-shadow: none; }
.nuance.actif { border-color: var(--accent); color: var(--texte); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }

/* ---------- LE THEME TRANSLUCIDE ---------- */
:root[data-verre="1"] {
  --verre:        rgba(18, 22, 26, .46);
  --verre-2:      rgba(28, 33, 38, .54);
  --verre-bord:   rgba(255, 255, 255, .14);
  --verre-reflet: rgba(255, 255, 255, .16);
  --verre-flou:   blur(22px) saturate(1.7);
  --fond-mur:     #05070A;
}
:root[data-verre="1"][data-theme="clair"] {
  --verre:        rgba(255, 255, 255, .5);
  --verre-2:      rgba(255, 255, 255, .62);
  --verre-bord:   rgba(255, 255, 255, .75);
  --verre-reflet: rgba(255, 255, 255, .7);
  --fond-mur:     #EEF2F6;
}
/* le mur derriere le verre : des couleurs des logiciels qui derivent doucement */
:root[data-verre="1"] { background: var(--fond-mur); }
:root[data-verre="1"] body { background: transparent !important; }
:root[data-verre="1"] body::before {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32% 30% at 22% 24%, color-mix(in srgb, #1FBF74 60%, transparent), transparent 70%),
    radial-gradient(30% 28% at 78% 18%, color-mix(in srgb, #2E8BE0 60%, transparent), transparent 70%),
    radial-gradient(34% 30% at 72% 78%, color-mix(in srgb, #F2762F 55%, transparent), transparent 70%),
    radial-gradient(30% 30% at 24% 80%, color-mix(in srgb, #7A5CFA 60%, transparent), transparent 70%),
    radial-gradient(22% 22% at 50% 50%, color-mix(in srgb, #E8B412 40%, transparent), transparent 70%);
  filter: blur(30px) saturate(1.2);
  animation: verre-derive 26s ease-in-out infinite alternate;
}
@keyframes verre-derive { to { transform: translate(5%, -4%) rotate(10deg) scale(1.1); } }
/* les fonds pleins deviennent transparents : on voit le mur au travers */
:root[data-verre="1"] :is(.app, .contenu, .dedans, .ecran-plein, .site, main, section, .final, .pied) { background: transparent !important; }
:root[data-verre="1"] section[style*="background"] { background: transparent !important; }

/* LE VERRE : cartes, barres, boutons */
:root[data-verre="1"] :is(.tuile, .tuile-parcours, .ligne-stat, .avantage, .tarif-app, .carte-connexion, .pro-appli, .pro-bientot,
  .bandeau-cles, .salut-robot .bulle, .revision-jour, .point-faible, .vide, .cl-liste .rang, .bandeau-ligue, .ligue,
  .opt-theme, .nuance, .pastille, .defi-bouton, .loupe-bouton, .retour, .rch-suggestions button, .rch-form input, .rch-lecon,
  .carte, .tarif, .question-s, .etape-install, .pastille-hero, .bouton.creux, .carte-cours, .pl, .cnx-form, .serv, .pub) {
  background: var(--verre) !important;
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-color: var(--verre-bord) !important;
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 10px 30px rgba(0, 0, 0, .12);
}
:root[data-verre="1"] :is(.haut, .bas, .nav, .rch-form) {
  background: var(--verre-2) !important;
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-color: var(--verre-bord) !important;
}
/* l'onglet actif et les boutons pleins gardent leur couleur, avec un reflet de verre */
:root[data-verre="1"] :is(.btn:not(.fantome), .bouton:not(.creux)) { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.18); }
:root[data-verre="1"] .btn.fantome { background: var(--verre) !important; -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border-color: var(--verre-bord) !important; }
/* le panneau d'apparence du site */
:root[data-verre="1"] .panneau-apparence { background: var(--verre-2); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); }

@media (prefers-reduced-motion: reduce) { :root[data-verre="1"] body::before { animation: none; } }

/* ---------- LE SITE : le bouton 🎨 et son panneau ---------- */
.bouton-apparence { border: 1px solid var(--bord); background: var(--surface); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 17px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.bouton-apparence:hover { transform: rotate(-12deg) scale(1.08); }
.panneau-apparence { position: fixed; z-index: 7500; width: min(340px, calc(100vw - 24px)); padding: 14px; border-radius: 20px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord); box-shadow: 0 24px 60px rgba(0,0,0,.25);
  animation: saas-entre .4s cubic-bezier(.2,.8,.2,1) both; font-family: 'Poppins', system-ui, sans-serif; }
.panneau-apparence .app-titre { display: block; font-size: 13px; margin: 4px 0 8px; }
.panneau-apparence .choix-theme { display: flex; gap: 6px; flex-wrap: wrap; }
.panneau-apparence .opt-theme { flex: 1; border: 1.5px solid var(--bord); background: var(--surface-2); color: var(--texte); border-radius: 12px; padding: 8px 6px; font: 600 12.5px 'Poppins', system-ui, sans-serif; cursor: pointer; }
.panneau-apparence .opt-theme.actif { border-color: var(--accent, #2E8BE0); }
.panneau-apparence .mini { font-size: 12px; color: var(--texte-2); line-height: 1.45; margin: 8px 0 12px; }
/* le menu du site ne passe jamais sur deux lignes (Recherche et 🎨 l'ont allonge) */
.nav-liens a, .nav-liens .bouton { white-space: nowrap; }
@media (max-width: 1180px) { .nav-liens { gap: 14px; } }
/* le panneau d'apparence reste LISIBLE, meme en translucide */
:root[data-verre="1"] .panneau-apparence { background: rgba(255,255,255,.86); color: #14181C; }
:root[data-verre="1"][data-theme="sombre"] .panneau-apparence { background: rgba(20,24,28,.88); color: #fff; }