/* =============================================================
   1. CONFIGURATION DES THÈMES & VARIABLES
============================================================= */
body.theme-dark {
    --fond-wiki: #0e071b; 
    --fond-box: #0e071b;  
    --fond-carte: #1c093a; 
    --texte-principal: #e6edf3;
    --texte-secondaire: #caafed;
    --neon: #d946ef; 
    --lueur-neon: #ff8fd8;
    --chat-accent: #d946ef;
    --banniere-gradient: linear-gradient(135deg, #180a2b 0%, #0c1a30 100%);
    --card-stat-bg: #ffffff;
    --card-stat-texte: #0d1117;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
}

body.theme-light {
    --fond-wiki: #E6BF6C;
    --fond-box: #f4d38c;
    --fond-carte: #f5e6c8;   /* crème chaude, plus de blanc pur (moins agressif pour les yeux) */
    --texte-principal: #3a2d11;
    --texte-secondaire: #6b5527;
    --neon: #0077b6;
    --lueur-neon: #ffa62b;
    --chat-accent: #ffa62b;
    --banniere-gradient: linear-gradient(135deg, #cc9628 0%, #e2b44f 100%);
    --card-stat-bg: #3a2d11;
    --card-stat-texte: #ffffff;
    --shadow-soft: 6px 6px 16px rgba(0,0,0,0.08), -6px -6px 16px rgba(255,255,255,0.4); 
}

h1, h2, h3, .titre-sommaire, .stat-number {
    font-family: 'Cinzel', serif !important;
    letter-spacing: 1px;
}

/* Barre de défilement de la page, adaptée au thème */
/* éléments hors écran : leurs animations sont mises en pause (défilement plus fluide) */
.hors-ecran, .hors-ecran::before, .hors-ecran::after,
.hors-ecran *, .hors-ecran *::before, .hors-ecran *::after {
    animation-play-state: paused !important;
}
/* on limite la portée des recalculs de style aux cartes répétées
   (contain: layout seulement -> aucun risque de rogner les halos néon qui débordent) */
.avis-carte, .stat-card { contain: layout style; }
.box-dashboard, .annonce-item, .maj-item, .gazette-item { contain: layout; }
.cl-bloc { contain: layout paint; }

html { scrollbar-width: thin; scrollbar-color: #d946ef transparent; }
html:has(body.theme-light) { scrollbar-color: #ff3a1e transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(217, 70, 239, 0.08); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(#d946ef, #7a1d8a);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 8px -2px rgba(217, 70, 239, 0.6);
}
::-webkit-scrollbar-thumb:hover { background: #ec6bff; }
::-webkit-scrollbar-corner { background: transparent; }
html:has(body.theme-light) ::-webkit-scrollbar-track { background: rgba(255, 58, 30, 0.09); }
html:has(body.theme-light) ::-webkit-scrollbar-thumb {
    background: linear-gradient(#ff3a1e, #8a1500);
    box-shadow: 0 0 8px -2px rgba(255, 58, 30, 0.6);
}
html:has(body.theme-light) ::-webkit-scrollbar-thumb:hover { background: #ff6a4d; }

/* -------------------------------------------------------------
   2. BASES, POSITIONNEMENT ET BARRE SUPÉRIEURE
------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--fond-wiki);
    color: var(--texte-principal);
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    transition: all 0.5s ease-in-out;
}

.barre-outils, .menu-lateral, .box-dashboard, .carte-aventurier, .stat-card, .btn-grave,
.item-lien, .menu-evenements, .carte-aventurier-mini, .quete-item, .titre-divin,
.affichage-profil-selectionne, .zone-canvas-graphique, .stats-detaillees, .filtre-equipement,
.badge-niveau-hero, .titre-jauge, .info-hero-texte h3 {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

.barre-outils {
    position: fixed;
    top: 0; left: 0; right: 0; height: 140px;
    background: transparent;                 /* la surface visible est portée par ::before */
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 90;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* La "vitre" translucide de la barre : sa base se fond TRÈS progressivement dans le contenu,
   sur une longue distance, sans aucune arête visible. Calque DERRIÈRE le contenu de la barre,
   ne rogne aucun menu déroulant. */
.barre-outils::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 260px;                           /* déborde largement sous la barre pour un fondu long */
    background-color: var(--surface-fond, var(--fond-box));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    transition: background-color 0.5s ease-in-out;
}
/* Petit flou "verre" limité à la barre elle-même (bord net masqué par le calque ci-dessus) */
.barre-outils::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; height: 100%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Apparition en fondu de la barre du haut (à l'arrivée sur le site et à chaque changement de page) */
.barre-outils.anim-entree {
    animation: entreeBarreHaut 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes entreeBarreHaut {
    0%   { opacity: 0; transform: translateY(-45px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Simple fondu (disque de musique + roue des paramètres) au chargement / changement de page */
.fondu-entree { animation: fonduEntree 0.85s ease both; }
@keyframes fonduEntree { from { opacity: 0; } to { opacity: 1; } }

body.menu-ouvert .barre-outils { left: 280px; }

/* Encadré néon commun (icône du sommaire + roue des paramètres) :
   pastille ronde + double anneau HUD segmenté qui tourne, couleur du thème, avec fondu. */
.cadre-neon {
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    position: relative;
    border-radius: 50%;
    background: var(--surface-fond, transparent);
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 0 7px var(--accent-neon-halo), inset 0 0 6px rgba(0, 0, 0, 0.3);
    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.cadre-neon::before,
.cadre-neon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
/* Halo fixe et léger autour de la pastille (aucune animation = léger pour le PC) */
.cadre-neon::before {
    inset: -6px;
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 0 9px var(--accent-neon-halo);
    opacity: 0.45;
    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
/* Un seul anneau segmenté qui tourne (le seul élément animé de l'encadré) */
.cadre-neon::after {
    inset: -11px;
    background: conic-gradient(from 0deg,
        var(--accent-neon) 0 18%, transparent 18% 27%,
        var(--accent-neon) 27% 49%, transparent 49% 58%,
        var(--accent-neon) 58% 84%, transparent 84% 100%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
    filter: drop-shadow(0 0 3px var(--accent-neon-halo));
    animation: rotationHud 9s linear infinite;
    will-change: transform;
}
@keyframes rotationHud { to { transform: rotate(360deg); } }
.cadre-neon:hover::after { animation-duration: 4s; }

/* Icône du sommaire : 3 points néon dans la pastille, qui s'étirent en 3 barres
   au survol ou quand le sommaire est ouvert. */
.btn-menu-toggle {
    cursor: pointer; margin-right: 15px;
    width: 34px; height: 34px; padding: 8px;
    align-self: flex-start; margin-top: 16px;   /* descendu : le haut ne rogne plus l'anneau qui tourne */
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.btn-menu-toggle span {
    display: block;
    width: 6px; height: 6px; border-radius: 50%;   /* état "point" au repos */
    background: var(--accent-neon);
    box-shadow: 0 0 5px var(--accent-neon), 0 0 10px var(--accent-neon-halo);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s ease, border-radius 0.3s ease,
                background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.btn-menu-toggle:hover span,
body.menu-ouvert .btn-menu-toggle span {
    width: 18px; height: 3px; border-radius: 3px;   /* état "barre" */
}

.zone-recherche {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; width: 300px;
    position: relative;
    /* Contour à dégradé mouvant (même animation que le reste du site) */
    border: 2px solid transparent;
    border-radius: 22px;
    background-image:
        linear-gradient(var(--recherche-fond), var(--recherche-fond)),
        var(--recherche-degrade);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-size: 100% 100%, 400% 400%;
    animation: fluxMagiqueNaturel 8s ease infinite;
    box-shadow: 0 0 12px 1px var(--recherche-lueur);
    /* Fondu des couleurs quand on change de thème */
    transition: background-image 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.zone-recherche:focus-within {
    box-shadow: 0 0 20px 3px var(--recherche-lueur);
}
.zone-recherche input { background: none; border: none; outline: none; color: var(--texte-principal); width: 100%; transition: color 0.5s ease-in-out; }
.zone-recherche input::placeholder { color: var(--texte-secondaire); opacity: 0.8; }

/* Couleurs qui changent selon le thème (toutes avec un fondu au changement de mode) */
body.theme-dark {
    --recherche-fond: #140a26;
    --recherche-degrade: linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%);
    --recherche-lueur: rgba(217, 70, 239, 0.45);
    --flamme-couleur: #d946ef;
    /* Opacité de la barre du haut ET du sommaire (0.70 = 70% opaque). Baisse la valeur pour plus de transparence. */
    --surface-fond: rgba(14, 7, 27, 0.70);
    --sommaire-fond: rgba(14, 7, 27, 0.70);
    --accent-neon: #d946ef;              /* couleur néon générale (hamburger, fil discord, roue...) */
    --accent-neon-halo: rgba(217, 70, 239, 0.55);
    --switch-neon: #d946ef;              /* néon du switch de thème */
    --lecteur-accent: #d946ef;           /* boutons + volume du lecteur de musique */
    --disque-fond: #141018;              /* intérieur du disque */
    --disque-sillon: rgba(255, 255, 255, 0.06);
    --disque-bordure: #c026f0;           /* violet néon */
    --disque-bordure-vif: #d94dff;       /* segments "lumineux" du contour : violet un peu plus clair */
    --disque-bordure-2: #7b3dff;         /* variante violet-bleu */
    --disque-lueur: rgba(192, 38, 240, 0.7);
    --lecteur-accent-box: rgba(217, 70, 239, 0.22);
    --musique-panneau: #271641;          /* fond du menu de lecture (violet profond) */
    --musique-panneau-bord: rgba(217, 70, 239, 0.4);
    --musique-temps-txt: #c9a9e8;
}
body.theme-light {
    --recherche-fond: #f6dcb2;
    --recherche-degrade: linear-gradient(135deg, #E6BF6C 0%, #ff2323 40%, #E07B16 50%, #ff2323 60%, #E6BF6C 100%);
    --recherche-lueur: rgba(255, 35, 35, 0.45);
    --flamme-couleur: #ff2323;
    --surface-fond: rgba(244, 211, 140, 0.70);
    --sommaire-fond: rgba(244, 211, 140, 0.70);
    --accent-neon: #ff2323;
    --accent-neon-halo: rgba(255, 35, 35, 0.6);
    --switch-neon: #ff2323;
    --disque-fond: #ff9124;              /* disque orange vif en thème clair (bien démarqué du fond doré) */
    --disque-sillon: rgba(90, 40, 0, 0.16);
    --disque-bordure: #ff5e00;           /* orange néon */
    --disque-bordure-vif: #ff8a2b;       /* segments "lumineux" du contour : orange un peu plus clair */
    --disque-bordure-2: #ff2d1a;         /* variante rouge */
    --disque-lueur: rgba(255, 110, 20, 0.85);
    --lecteur-accent: #ff4d1a;           /* rouge-orangé pour le lecteur en thème clair */
    --lecteur-accent-box: rgba(255, 94, 0, 0.20);
    --musique-panneau: #ffe6c9;          /* fond du menu de lecture (chaud, sans blanc pur) */
    --musique-panneau-bord: rgba(255, 120, 40, 0.35);
    --musique-temps-txt: #915420;
}

/* La petite flamme animée à droite de la barre de recherche */
.icone-flamme {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
}
.icone-flamme svg {
    width: 100%; height: 100%;
    fill: var(--flamme-couleur);
    filter: drop-shadow(0 0 3px var(--flamme-couleur)) drop-shadow(0 0 7px var(--flamme-couleur));
    transform-origin: 50% 90%;
    animation: flammeVacille 1.4s ease-in-out infinite;
    transition: fill 0.5s ease-in-out, filter 0.5s ease-in-out; /* fondu violet <-> rouge */
}
@keyframes flammeVacille {
    0%, 100% { transform: scale(1, 1)      rotate(-1deg); opacity: 0.92; }
    25%      { transform: scale(1.08, 0.94) rotate(1.5deg); opacity: 1; }
    50%      { transform: scale(0.95, 1.07) rotate(-1.5deg); opacity: 0.85; }
    75%      { transform: scale(1.05, 0.97) rotate(1deg); opacity: 1; }
}
/* Le switch de thème + la cloche + le tchat : remontés en haut à droite de la barre */
.actions-droite { display: flex; gap: 15px; align-items: center; align-self: flex-start; margin-top: 14px; }
.btn-action { background: none; border: none; font-size: 1.4rem; cursor: pointer; transition: transform 0.2s; }
.btn-action:hover { transform: scale(1.1); }

/* -------------------------------------------------------------
   3. STRUCTURE DU MENU LATÉRAL FLOTTANT (ZÉRO CHEVAUCHEMENT)
------------------------------------------------------------- */
.menu-lateral {
    position: fixed;
    /* Le menu commence sous la barre supérieure, en la laissant respirer ! */
    top: 150px;
    left: -300px; 
    bottom: 20px;
    width: 230px;
    background-color: var(--sommaire-fond, var(--fond-box));
    border-radius: 24px;
    padding: 20px;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    /* FIXÉ : Un z-index très haut pour passer devant absolument TOUT, même la barre supérieure */
    z-index: 9999 !important; 
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: brumeFlottanteSommaire 6s ease-in-out infinite alternate;
}

body.menu-ouvert .menu-lateral { left: 20px; }
body.menu-ouvert .zone-principale { margin-left: 250px; }

.entete-menu { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.titre-sommaire { font-size: 1.3rem; color: var(--neon); letter-spacing: 2px; }
/* FIXÉ : On force la croix à se caler en haut à droite de la boîte sans écraser le titre */
.btn-fermer-menu { 
    position: absolute !important; 
    top: 5px !important; 
    right: 15px !important; 
    background: none !important; 
    border: none !important; 
    color: var(--texte-secondaire) !important; 
    font-size: 1.2rem !important; 
    cursor: pointer !important; 
    z-index: 10 !important;
    transition: color 0.2s ease !important;
}
.btn-fermer-menu:hover { 
    color: #ff3333 !important; /* Devient rouge flash au survol */
}
.liens-sommaire { list-style: none; flex-grow: 1; }

.liens-sommaire li {
    opacity: 0; transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

body.menu-ouvert .liens-sommaire li {
    animation: apparitionLien 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
body.menu-ouvert .liens-sommaire li:nth-child(1) { animation-delay: 0.1s; }
body.menu-ouvert .liens-sommaire li:nth-child(2) { animation-delay: 0.18s; }
body.menu-ouvert .liens-sommaire li:nth-child(3) { animation-delay: 0.26s; }
body.menu-ouvert .liens-sommaire li:nth-child(4) { animation-delay: 0.34s; }
body.menu-ouvert .liens-sommaire li:nth-child(5) { animation-delay: 0.42s; }

@keyframes apparitionLien { to { opacity: 1; transform: translateY(0); } }

.liens-sommaire li a {
    display: block; color: var(--texte-principal); text-decoration: none;
    padding: 12px 15px; border-radius: 14px; font-size: 1.1rem;
    margin-bottom: 8px; transition: all 0.2s;
}
.liens-sommaire li a:hover, .liens-sommaire li a.actif {
    background-color: var(--fond-carte); color: var(--neon); box-shadow: var(--shadow-soft);
}
.pied-menu { border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px; }

/* -------------------------------------------------------------
   4. LES ONDES DE FOND EN DIAGONALE (SOMBRE & CLAIR)
------------------------------------------------------------- */
body.theme-dark::before {
    content: ""; position: fixed; top: -10%; left: -10%; width: 120%; height: 120%; z-index: -1; 
    background: linear-gradient(135deg, #0e071b 0%, #471A96 30%, #d946ef 50%, #471A96 70%, #0e071b 100%);
    background-size: cover; animation: vagueDiagonaleDivine 7s ease-in-out infinite;
    pointer-events: none; transition: opacity 0.5s ease-in-out; 
}

@keyframes vagueDiagonaleDivine {
    0% { opacity: 0.3; transform: translate(2%, 2%) scale(1); }
    50% { opacity: 1; transform: translate(-2%, -2%) scale(1.05); }
    100% { opacity: 0.3; transform: translate(2%, 2%) scale(1); }
}

body.theme-light::before {
    content: ""; position: fixed; top: -10%; left: -10%; width: 120%; height: 120%; z-index: -1; 
    background: linear-gradient(135deg, #E6BF6C 0%, #f4d38c 30%, #E07B16 50%, #f4d38c 70%, #E6BF6C 100%);
    background-size: cover; animation: vagueDiagonaleDivineClair 7s ease-in-out infinite;
    pointer-events: none; transition: opacity 0.5s ease-in-out;
}

@keyframes vagueDiagonaleDivineClair {
    0% { opacity: 0.4; transform: translate(2%, 2%) scale(1); }
    50% { opacity: 1; transform: translate(-2%, -2%) scale(1.05); }
    100% { opacity: 0.4; transform: translate(2%, 2%) scale(1); }
}

/* onde de fond du thème VERT (Konami) — prioritaire sur le violet / le doré */
body.theme-vert::before {
    content: ""; position: fixed; top: -10%; left: -10%; width: 120%; height: 120%; z-index: -1;
    background: linear-gradient(135deg, #04140c 0%, #0b5c30 30%, #2fe07a 50%, #0b5c30 70%, #04140c 100%);
    background-size: cover; animation: vagueDiagonaleDivine 7s ease-in-out infinite;
    pointer-events: none; transition: opacity 0.5s ease-in-out;
}

/* -------------------------------------------------------------
   5. ZONE PRINCIPALE ET SYSTÈME D'ONGLETS
------------------------------------------------------------- */
.zone-principale {
    margin-top: 140px; padding: 30px;
    min-height: calc(100vh - 140px);
    display: flex; flex-direction: column; align-items: center; 
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.menu-ouvert .zone-principale { margin-left: 280px; }

.contenu-onglet {
    display: none; opacity: 0; transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 100%; max-width: 1100px; 
}

/* L'onglet actif se déploie comme un menu de jeu vidéo (Effet HUD lent) */
.contenu-onglet.actif { 
    display: block; 
    /* Durée augmentée à 1.4s pour bien savourer le mouvement fluide */
    animation: apparitionCinematique 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes apparitionCinematique {
    0% {
        opacity: 0;
        transform: translateY(-60px); /* Conserve le grand mouvement de descente */
        /* FIXÉ : Le flou bizarre a été complètement supprimé ici pour éviter l'éblouissement */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* S'installe proprement */
    }
}

/* Les sous-menus de filtre : toujours présents, mais repliés (hauteur 0) tant que ce n'est pas ouvert.
   Ils descendent alors en douceur et les sous-pages apparaissent une à une, comme dans le sommaire. */
.sous-menu-tri {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.menu-deroulant-conteneur.ouvert .sous-menu-tri {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
}

@keyframes apparitionSousItem { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
.sous-menu-tri li { opacity: 0; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li { animation: apparitionSousItem 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(1) { animation-delay: 0.08s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(2) { animation-delay: 0.14s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(3) { animation-delay: 0.20s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(4) { animation-delay: 0.26s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(5) { animation-delay: 0.32s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(6) { animation-delay: 0.38s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(7) { animation-delay: 0.44s; }
.menu-deroulant-conteneur.ouvert .sous-menu-tri li:nth-child(8) { animation-delay: 0.50s; }

/* -------------------------------------------------------------
   6. LA BANNIÈRE DIVINE HOLOGRAPHIQUE
------------------------------------------------------------- */
.banniere-divine {
    width: 100%; min-height: 450px; border-radius: 36px; padding: 60px 50px;
    position: relative; overflow: hidden; box-shadow: var(--shadow-soft);
    border: 1px solid rgba(157, 78, 221, 0.2); margin-bottom: 30px;
    display: flex; align-items: flex-end; background-color: #0c1a30;
    transition: background 0.5s ease-in-out;
}

.banniere-image-fond {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/danmachi-bannière.jpeg'); background-size: cover;
    background-position: center 30%; z-index: 1; transition: background-image 0.5s ease-in-out;
}

body.theme-light .banniere-image-fond { background-image: url('Images/banniere-feu.png'); }

.effet-holo {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(157, 78, 221, 0.4) 30%, rgba(0, 255, 204, 0.4) 50%, rgba(255, 215, 0, 0.3) 70%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%; opacity: 0.25; pointer-events: none; z-index: 2;
    animation: balayageHoloContinu 6s linear infinite;
}

@keyframes balayageHoloContinu {
    0% { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}

.contenu-banniere { position: relative; z-index: 3; width: 100%; }
.zone-logo-titre { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }

/* =============================================================
   1. FIXÉ : ADRESSES EXACTES DES LOGOS DE CLOCHES (AVEC LE S)
============================================================= */
.logo-banniere-img {
    height: 45px; 
    width: 45px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    /* Correction chirurgicale : ajout du "s" à images/ */
    background-image: url('images/cloche-violette.png'); 
    transition: background-image 0.5s ease-in-out;
}
body.theme-light .logo-banniere-img { 
    background-image: url('images/cloche-rouge.png'); 
}

/* =============================================================
   2. FIXÉ : ADRESSES EXACTES DES BANNIÈRES AVENTURIERS
============================================================= */
.banniere-fond-aventuriers-sombre {
    /* Correction chirurgicale : ajout de images/ devant le nom */
    background-image: url('images/argonauta.jpg') !important;
}

.banniere-fond-aventuriers-claire {
    background-image: url('images/feu.jpg') !important;
}

.logo-familia { color: var(--neon); font-weight: bold; font-size: 1.1rem; transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out; }
.intro-section h1 { font-size: 2.8rem; color: #ffffff; margin-bottom: 10px; text-shadow: 0 0 12px rgba(157, 78, 221, 0.4); }
.intro-section p { font-size: 1.1rem; color: #c3c7db; max-width: 600px; }
.conteneur-particules { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.particule-violette {
    position: absolute; background: radial-gradient(circle, rgba(186, 104, 200, 0.8) 0%, rgba(157, 78, 221, 0) 70%);
    border-radius: 50%; pointer-events: none; animation: monterEtDisparaitre 1.5s linear forwards;
}
@keyframes monterEtDisparaitre {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}

/* -------------------------------------------------------------
   7. DASHBOARD GENERAL (ACCUEIL)
------------------------------------------------------------- */
.donjon-container { 
    display: grid; grid-template-columns: 1fr 1.2fr 1.1fr; gap: 20px; width: 100%;
}
@media (max-width: 900px) { .donjon-container { grid-template-columns: 1fr; } }

.box-dashboard {
    background-color: var(--fond-box); border-radius: 20px; padding: 20px;
    box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 15px;
}
.box-title {
    font-family: 'Orbitron', sans-serif; font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px;
}
.item-lien { background: var(--fond-carte); padding: 12px 18px; border-radius: 30px; box-shadow: var(--shadow-soft); cursor: pointer; }
.colonne-stats { display: flex; flex-direction: column; gap: 15px; }
.stat-card { background: var(--card-stat-bg); color: var(--card-stat-texte); border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-soft); }

/* -------------------------------------------------------------
   8. INTERFACE AVENTURIERS (STRUCTURE GAMIFIÉE)
------------------------------------------------------------- */
.profil-gamifie-container {
    display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; gap: 20px; width: 100%;
}
@media (max-width: 950px) { .profil-gamifie-container { grid-template-columns: 1fr; } }

/* Fiche d'identité technique */
/* Badge de Niveau incrusté style RPG */
.badge-niveau-hero {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--accent-neon);                 /* écriture néon selon le thème */
    text-shadow: 0 0 8px var(--accent-neon-halo);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px -4px var(--accent-neon-halo);
    z-index: 10;
}
.carte-aventurier-mini {
    cursor: pointer; padding: 10px; background: var(--fond-carte); border-radius: 12px;
    border-left: 3px solid transparent; transition: all 0.2s;
}
.carte-aventurier-mini.actif { border-left-color: var(--neon); box-shadow: var(--shadow-soft); }
.titre-divin { font-size: 0.9rem; color: var(--texte-secondaire); margin-bottom: 20px; }

/* Jauges HP & Mind */
.statistiques-jauges-hero { display: flex; flex-direction: column; gap: 12px; }
.barre-fond-jauge { width: 100%; height: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 20px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.barre-remplissage-jauge { height: 100%; border-radius: 20px; transition: width 1s ease-in-out; }
.titre-jauge { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; }

/* Liste des Quêtes */
.liste-quetes-gamifiees { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.quete-item {
    background: var(--fond-carte); padding: 14px; border-radius: 12px; font-size: 0.9rem;
    display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-soft); border-left: 3px solid #ffb703;
}
.quete-item.terminee { border-left-color: #2ec4b6; opacity: 0.6; text-decoration: line-through; }
.badge-xp { align-self: flex-end; font-size: 0.75rem; font-family: 'Orbitron', sans-serif; font-weight: bold; color: #ffb703; background: rgba(255, 183, 3, 0.1); padding: 2px 8px; border-radius: 6px; }
.quete-item.terminee .badge-xp { color: #2ec4b6; background: rgba(46, 196, 182, 0.1); }

/* -------------------------------------------------------------
   9. CORRECTIF GRAPHIQUE ET CANVAS (POUR LE RADAR CHART)
------------------------------------------------------------- */
.profil-graphique-toile {
    display: flex;
    flex-direction: column;
}

/* On force la boîte du milieu à faire 380px de haut pour donner de la place au graphique */
.zone-canvas-graphique {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px; 
    padding: 15px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    position: relative;
}

/* On impose au canvas de prendre 100% de la boîte pour que Chart.js s'affiche enfin géant */
.zone-canvas-graphique canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 320px !important;
}
.zone-canvas-graphique { min-height: 320px !important; }

/* --- LÉGENDE CLIQUABLE DU RADAR (grande zone de clic transparente) --- */
.radar-legende {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}
.leg-item {
    -webkit-appearance: none; appearance: none;
    background: none;               /* hitbox transparente */
    border: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px;             /* <-- la grande zone de clic */
    border-radius: 12px;
    font-family: inherit; font-size: 0.82rem; font-weight: 700;
    color: var(--texte-principal);
    transition: background-color 0.2s ease, opacity 0.2s ease, color 0.5s ease-in-out;
}
.leg-item:hover { background: rgba(255, 255, 255, 0.06); }
.leg-marque { width: 26px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.leg-equip { border: 2px dashed #ffce54; box-shadow: 0 0 6px rgba(255, 206, 84, 0.5); }
.leg-brut  { background: var(--accent-neon); box-shadow: 0 0 7px var(--accent-neon-halo); transition: background-color 0.5s ease-in-out; }
.leg-item.masque { opacity: 0.4; }
.leg-item.masque span:last-child { text-decoration: line-through; }
.leg-item.masque .leg-marque { filter: grayscale(1) brightness(0.7); box-shadow: none; }

/* --- BLOC "ROUGE" : chiffres détaillés du radar --- */
.stats-detaillees {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    font-size: 0.82rem;
}
.stats-detaillees .stat-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.stats-detaillees .stat-nom {
    color: var(--texte-secondaire);
    letter-spacing: 0.4px;
    transition: color 0.5s ease-in-out;
}
.stats-detaillees .stat-val {
    font-weight: 800;
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    color: var(--accent-neon);
    text-shadow: 0 0 7px var(--accent-neon-halo);
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
.stats-detaillees .stat-bonus {
    color: #ffce54;
    text-shadow: 0 0 7px rgba(255, 206, 84, 0.6);
    font-size: 0.78rem;
}
.stats-detaillees .stat-fleche { color: var(--texte-secondaire); }
.stats-detaillees .stat-tot { color: #ffce54; text-shadow: 0 0 7px rgba(255, 206, 84, 0.6); }
.stats-detaillees .stat-ligne-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--accent-neon-halo);
    transition: border-color 0.5s ease-in-out;
}
.stats-detaillees .stat-ligne-total .stat-nom { color: var(--texte-principal); font-weight: 700; }
.stats-detaillees .stats-vide { text-align: center; font-style: italic; color: var(--texte-secondaire); padding: 20px 0; }

/* Fondu d'apparition des chiffres quand on change d'aventurier / d'équipement */
.stats-detaillees.anim-stats .stat-ligne {
    opacity: 0;
    animation: apparitionStatLigne 0.4s ease forwards;
}
.stats-detaillees.anim-stats .stat-ligne:nth-child(1) { animation-delay: 0.02s; }
.stats-detaillees.anim-stats .stat-ligne:nth-child(2) { animation-delay: 0.06s; }
.stats-detaillees.anim-stats .stat-ligne:nth-child(3) { animation-delay: 0.10s; }
.stats-detaillees.anim-stats .stat-ligne:nth-child(4) { animation-delay: 0.14s; }
.stats-detaillees.anim-stats .stat-ligne:nth-child(5) { animation-delay: 0.18s; }
.stats-detaillees.anim-stats .stat-ligne:nth-child(6) { animation-delay: 0.22s; }
@keyframes apparitionStatLigne { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* --- BLOC "JAUNE" : liste réductible de l'équipement --- */
.filtre-equipement {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 14px;
}
.equip-entete {
    background: none; border: none; cursor: pointer; width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px;
    color: var(--accent-neon);
    text-shadow: 0 0 6px var(--accent-neon-halo);
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
.equip-entete .equip-fleche {
    display: inline-block; font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.equip-entete.ouvert .equip-fleche { transform: rotate(90deg); }

.equip-liste {
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, padding 0.45s ease;
    padding-top: 0;
}
.equip-entete.ouvert + .equip-liste {
    max-height: 260px;
    opacity: 1;
    padding-top: 8px;
}
/* Hitbox plus large et texte en néon (couleur du thème) pour chaque pièce d'équipement */
.filtre-equipement .ligne-parametre {
    font-size: 0.8rem;
    align-items: center;
    gap: 12px;
    padding: 7px 6px;
    min-height: 34px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}
.filtre-equipement .ligne-parametre:hover { background: rgba(255, 255, 255, 0.05); }
.filtre-equipement .texte-parametre {
    padding-top: 0;
    color: var(--accent-neon);
    text-shadow: 0 0 6px var(--accent-neon-halo);
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
.filtre-equipement .texte-parametre strong { color: var(--accent-neon); }
.equip-bonus {
    color: #ffce54;
    text-shadow: 0 0 6px rgba(255, 206, 84, 0.55);
    font-size: 0.76rem;
    white-space: nowrap;
}

/* Fondu de la liste d'équipement quand on change d'aventurier */
.equip-liste.anim-equip .ligne-parametre {
    opacity: 0;
    animation: apparitionStatLigne 0.4s ease forwards;
}
.equip-liste.anim-equip .ligne-parametre:nth-child(1) { animation-delay: 0.04s; }
.equip-liste.anim-equip .ligne-parametre:nth-child(2) { animation-delay: 0.10s; }
.equip-liste.anim-equip .ligne-parametre:nth-child(3) { animation-delay: 0.16s; }
.equip-liste.anim-equip .ligne-parametre:nth-child(4) { animation-delay: 0.22s; }

/* -------------------------------------------------------------
   10. MENUS DÉROULANTS DE TRI DE LA BANNIÈRE (CORRIGÉS)
------------------------------------------------------------- */
.titre-categorie-tri {
    display: block;
    color: var(--texte-principal);
    font-size: 0.9rem;
    padding: 4px 0;
    opacity: 0.8;
    transition: color 0.2s;
}
.titre-categorie-tri:hover {
    color: var(--neon);
    opacity: 1;
}

/* (L'ouverture animée des sous-menus de filtre est gérée plus haut, section 5.) */

.liens-tri-banniere .btn-tri {
    color: var(--texte-principal);
    font-size: 0.85rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.liens-tri-banniere .btn-tri:hover, .liens-tri-banniere .btn-tri.actif {
    opacity: 1;
    color: var(--neon);
    padding-left: 5px;
}

/* -------------------------------------------------------------
   11. POPUPS, LUEURS ET FENÊTRE DU CHATBOT
------------------------------------------------------------- */
.conteneur-cloche { position: relative; }
/* pastille de notif : couleur adaptée au thème + fondu d'apparition / de disparition */
.badge-evenement {
    position: absolute; top: -2px; right: -2px;
    background: var(--accent-neon); color: #fff;
    font-size: 0.65rem; font-weight: 700; padding: 2px 5px; border-radius: 10px;
    z-index: 10; pointer-events: none;
    box-shadow: 0 0 9px -1px var(--accent-neon-halo);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
body.theme-light:not(.theme-vert) .badge-evenement { color: #fff4e6; }
.badge-evenement.lu { opacity: 0; transform: scale(0.35); }
.badge-evenement[hidden] { display: none; }
@keyframes badgeApparait { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.badge-evenement.apparait { animation: badgeApparait 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.badge-evenement.apparait.lu { animation: none; }   /* acquittée -> reste invisible (.lu prime) */
/* la cloche SONNE (balancement + "ding") tant qu'on n'a pas cliqué dessus */
.conteneur-cloche.sonne .icone-neon {
    transform-origin: 50% 12%;
    animation: clocheSonne 1.15s ease-in-out infinite;
}
body.anim-reduites .conteneur-cloche.sonne .icone-neon { animation: none; }
.menu-evenements { position: absolute; top: 44px; right: 0; background: var(--fond-carte); border: 2px solid var(--neon); padding: 14px; border-radius: 18px; width: 250px; box-shadow: var(--shadow-soft); color: var(--texte-principal); z-index: 200; }
.menu-evenements h4 { margin-bottom: 5px; color: var(--neon); }

.fenetre-chatbot {
    position: fixed; bottom: 20px; right: 20px; width: 320px; height: 400px;
    background: var(--fond-box); border: 2px solid var(--chat-accent); border-radius: 16px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--shadow-soft), 0 0 14px 1px var(--lueur-neon);
    z-index: 1000; color: var(--texte-principal);
    opacity: 0; transform: translateY(15px) scale(0.98); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fenetre-chatbot.ouverte {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.entete-chatbot { background: var(--chat-accent); color: #000; padding: 12px; font-weight: bold; display: flex; justify-content: space-between; }
.entete-chatbot button { background: none; border: none; cursor: pointer; font-weight: bold; font-size: 1rem; color: #000000; }
.zone-messages { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--chat-accent) transparent; }
.zone-messages::-webkit-scrollbar { width: 6px; }
.zone-messages::-webkit-scrollbar-track { background: transparent; }
.zone-messages::-webkit-scrollbar-thumb { background: var(--chat-accent); border-radius: 50px; }

/* Fondu d'apparition pour chaque nouveau message (joueur ou Oracle) */
@keyframes apparitionMessage {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.msg-bot, .msg-utilisateur { animation: apparitionMessage 0.35s ease forwards; }

.msg-bot { background: var(--fond-carte); padding: 10px; border-radius: 10px; font-size: 0.9rem; align-self: flex-start; max-width: 85%; box-shadow: var(--shadow-soft); }
.msg-utilisateur { background: var(--chat-accent); color: #000000; padding: 10px; border-radius: 10px; font-size: 0.9rem; align-self: flex-end; max-width: 85%; font-weight: 500; box-shadow: var(--shadow-soft); }

/* lien de navigation envoyé par l'Oracle (« où trouver X » -> emmène au bon endroit) */
.oracle-lien {
    -webkit-appearance: none; appearance: none;
    display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
    padding: 3px 9px; margin: 3px 0;
    border-radius: 8px; line-height: 1.35;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--chat-accent) 45%, transparent);
    text-align: left;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.oracle-lien:hover {
    background: color-mix(in srgb, var(--chat-accent) 26%, transparent);
    box-shadow: 0 0 12px -4px var(--chat-accent);
}

/* Indicateur "en cours de réponse" : 3 petits points qui bougent */
.msg-bot.chargement { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.msg-bot.chargement .point { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-accent); animation: rebondPoint 1.2s ease-in-out infinite; }
.msg-bot.chargement .point:nth-child(2) { animation-delay: 0.15s; }
.msg-bot.chargement .point:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebondPoint {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.saisie-chatbot { display: flex; padding: 10px; background: rgba(0,0,0,0.05); border-top: 1px solid rgba(255,255,255,0.05); }
.saisie-chatbot input { flex-grow: 1; border: none; padding: 10px; border-radius: 8px; background: var(--fond-carte); color: var(--texte-principal); outline: none; }
.saisie-chatbot button { background: var(--chat-accent); color: #000000; border: none; padding: 0 15px; margin-left: 5px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: transform 0.2s; }
.saisie-chatbot button:hover { transform: scale(1.05); }

/* =============================================================
   RE-ALIGNEMENT DE LA BARRE DU HAUT & CONTRAINTES INTERRUPTEUR
============================================================= */

/* 1. Bouton de thème : une LUNE (thème sombre) / une FLAMME (thème clair) */
.switch-theme-container {
    display: inline-flex;
    position: relative;
    width: 38px;
    height: 45px;
}
.switch-checkbox { opacity: 0; width: 0; height: 0; position: absolute; }

.switch-label {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
}
.switch-ic {
    position: absolute;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    transition: opacity 0.45s ease-in-out;
    pointer-events: none;   /* les clics traversent l'icône -> le label reçoit le clic (changement de thème) */
}
.switch-ic svg { width: 24px; height: 24px; display: block; }
/* la flamme garde sa taille ; la lune est agrandie pour paraître de la même taille
   (les deux SVG n'ont pas le même "vide" autour du dessin) */
.switch-ic-flamme svg { width: 40px; height: 31.5px; }
.switch-ic-lune svg { width: 48px; height: 48px; }
/* Remonte l'icône pour la centrer sur l'axe de la cloche et du tchat.
   >>> Pour l'ajuster : change la valeur translateY ci-dessous (plus négatif = plus haut). */
.switch-ic-flamme { transform: translateY(-2px); }
/* axe X : la lune est un peu décalée vers la GAUCHE pour ne pas coller à la cloche
   (change le 1er nombre du translate : plus négatif = plus à gauche) */
.switch-ic-lune   { transform: translate(-4px, -5px); }

/* LUNE — thème sombre */
.switch-ic-lune svg {
    fill: var(--switch-neon);
    filter: drop-shadow(0 0 4px var(--switch-neon)) drop-shadow(0 0 10px var(--switch-neon));
    transition: fill 0.5s ease-in-out;
    transform-origin: 50% 15%;
}
.switch-ic-flamme { opacity: 0; }
.switch-ic-flamme svg {
    fill: none;
    stroke: var(--switch-neon);
    stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 4px var(--switch-neon)) drop-shadow(0 0 10px var(--switch-neon));
    transition: stroke 0.5s ease-in-out;
}

/* En thème CLAIR : on masque la lune, on montre la flamme */
.switch-checkbox:checked + .switch-label .switch-ic-lune   { opacity: 0; }
.switch-checkbox:checked + .switch-label .switch-ic-flamme { opacity: 1; }

/* La lune se balance légèrement au survol / au clic */
.switch-label:hover .switch-ic-lune svg,
.switch-label:active .switch-ic-lune svg {
    animation: luneBalance 1.1s ease-in-out infinite;
}
@keyframes luneBalance {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(9deg); }
}

/* La flamme vacille en permanence, un peu plus au survol */
.switch-checkbox:checked + .switch-label .switch-ic-flamme svg {
    animation: flammeSwitchVacille 1.6s ease-in-out infinite;
    transform-origin: 50% 90%;
}
@keyframes flammeSwitchVacille {
    0%, 100% { transform: scale(1) skewX(0deg); }
    25%      { transform: scale(1.05, 0.97) skewX(-3deg); }
    50%      { transform: scale(0.97, 1.04) skewX(2deg); }
    75%      { transform: scale(1.03, 0.98) skewX(-2deg); }
}
body.anim-reduites .switch-ic-lune svg,
body.anim-reduites .switch-ic-flamme svg { animation: none !important; }

/* ÉMERAUDE — thème caché « Émeraude » (Konami) : remplace la lune ET la flamme.
   Diamant taillé en trait néon (comme la flamme), couleur verte. */
.switch-ic-emeraude { opacity: 0; transform: translateY(-2px); }
.switch-ic-emeraude svg {
    width: 32px; height: 32px; display: block; overflow: visible;
    filter: drop-shadow(0 0 3px #2fe07a) drop-shadow(0 0 9px #7CFC00);
}
.switch-ic-emeraude svg path {
    fill: none;
    stroke: #2fe07a;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
body.theme-vert .switch-ic-lune,
body.theme-vert .switch-ic-flamme,
body.theme-vert .switch-checkbox:checked + .switch-label .switch-ic-lune,
body.theme-vert .switch-checkbox:checked + .switch-label .switch-ic-flamme { opacity: 0 !important; }
body.theme-vert .switch-ic-emeraude { opacity: 1; }
/* le cristal reste immobile — seules les particules vertes bougent autour (JS) */

/* 2. Style des boutons d'action invisibles pour le Line-Art */
.btn-grave {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important; 
    border: none !important;     
    box-shadow: none !important;  
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 0;
}

/* 3. Tracé géométrique néon (Line-Art) pour la cloche et le chat */
.icone-neon {
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* --- LOGIQUE MODE SOMBRE (Néon Violet #DD00FF) --- */
body.theme-dark .icone-neon {
    color: #DD00FF; 
    filter: drop-shadow(0 0 2px #DD00FF) drop-shadow(0 0 6px rgba(221, 0, 255, 0.6));
}

/* --- LOGIQUE MODE CLAIR (Néon Orange #FF7300) --- */
body.theme-light .icone-neon {
    color: #FF7300; 
    filter: drop-shadow(0 0 1px #FF7300) drop-shadow(0 0 4px rgba(255, 115, 0, 0.5));
}

.btn-grave:hover .icone-neon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}

/* --- Icône « L'Oracle » (oracle.gif) à la place de la bulle de tchat --- */
#btn-chat {
    /* décalage de teinte du gif selon le thème (à ajuster si besoin) :
       sombre = violet (base, 0deg) ; clair = orange/rouge ; Émeraude = vert */
    --oracle-hue: 0deg;
}
body.theme-light:not(.theme-vert) #btn-chat { --oracle-hue: -48deg; }
body.theme-vert #btn-chat { --oracle-hue: 95deg; }
.ic-oracle-gif {
    width: 30px; height: 30px; display: block; object-fit: contain;
    filter: hue-rotate(var(--oracle-hue)) saturate(1.15)
            drop-shadow(0 0 3px var(--accent-neon)) drop-shadow(0 0 8px var(--accent-neon-halo));
    transition: filter 0.35s ease, transform 0.2s ease;
}
.btn-grave:hover .ic-oracle-gif {
    transform: scale(1.12);
    filter: hue-rotate(var(--oracle-hue)) saturate(1.25)
            drop-shadow(0 0 5px var(--accent-neon)) drop-shadow(0 0 13px var(--accent-neon-halo));
}
/* la même fée, en petit, à côté du titre « L'Oracle » dans l'en-tête du tchat */
.entete-chatbot-titre { display: inline-flex; align-items: center; gap: 8px; }
.ic-oracle-titre {
    width: 24px; height: 24px; display: block; object-fit: contain; flex: none;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
}

/* La cloche des notifications "sonne" (balancement gauche-droite) au survol */
#btn-cloche:hover .icone-neon {
    transform-origin: 50% 12%;
    animation: clocheSonne 1s ease-in-out infinite;
}
@keyframes clocheSonne {
    0%       { transform: scale(1.1) rotate(0deg); }
    12%      { transform: scale(1.1) rotate(17deg); }
    28%      { transform: scale(1.1) rotate(-14deg); }
    43%      { transform: scale(1.1) rotate(10deg); }
    58%      { transform: scale(1.1) rotate(-6deg); }
    72%      { transform: scale(1.1) rotate(3deg); }
    85%, 100% { transform: scale(1.1) rotate(0deg); }
}
body.anim-reduites #btn-cloche:hover .icone-neon { animation: none; }

/* --- CONFIGURATION DES LOGOS DE BANNIÈRE --- */
.titre-banniere-img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    display: block;
    margin-bottom: 5px;
    /* Petit effet de fondu doux lors du changement de thème ! */
    transition: opacity 0.3s ease-in-out;
}

/* --- LOGIQUE PAR DÉFAUT (MODE SOMBRE ENCLENCHÉ) --- */
body.theme-dark .logo-clair {
    display: none; /* On cache le logo doré */
}
body.theme-dark .logo-sombre {
    display: block; /* On affiche le logo violet */
}

/* --- LOGIQUE CHANGEMENT DE THEME (MODE CLAIR ENCLENCHÉ) --- */
body.theme-light .logo-sombre {
    display: none; /* On cache le logo violet */
}
body.theme-light .logo-clair {
    display: block; /* On affiche le logo doré */
}

/* --- BANNIÈRE AVENTURIERS : les deux titres sont superposés et se fondent l'un dans l'autre --- */
.titre-banniere-wrap {
    position: relative;
    height: 80px;
    margin-bottom: 8px;
}
body.theme-dark  .titre-banniere-wrap .titre-banniere-img,
body.theme-light .titre-banniere-wrap .titre-banniere-img {
    display: block;                 /* on annule le display:none, c'est l'opacité qui gère */
    position: absolute;
    left: 0; top: 0;
    margin-bottom: 0;
    transition: opacity 0.5s ease-in-out;
}
/* hors thème Émeraude : le logo "vert" est superposé (display:block, position:absolute)
   mais doit rester invisible — sinon il masque le logo violet / rouge. */
body.theme-dark:not(.theme-vert)  .titre-banniere-wrap .logo-clair,
body.theme-dark:not(.theme-vert)  .titre-banniere-wrap .logo-vert,
body.theme-light:not(.theme-vert) .titre-banniere-wrap .logo-sombre,
body.theme-light:not(.theme-vert) .titre-banniere-wrap .logo-vert { opacity: 0; }
body.theme-dark:not(.theme-vert)  .titre-banniere-wrap .logo-sombre,
body.theme-light:not(.theme-vert) .titre-banniere-wrap .logo-clair { opacity: 1; }

/* --- ADAPTATION VISUELLE BANNIÈRE CLAIRE --- */
body.theme-light .logo-familia {
    color: #ffd700 !important; /* Jaune doré éclatant visible sur le fond */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* =============================================================
   CADRE DIVIN ANIME POUR LES PORTRAITS AVENTURIERS
============================================================= */
.cadre-divin-portrait {
    width: 280px;
    height: 280px;
    position: relative;
    border-radius: 24px; /* Bords légèrement arrondis */
    padding: 4px; /* Épaisseur de la bordure animée */
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* Force l'image à rester parfaitement carrée à l'intérieur */
#hero-portrait {
    border-radius: 16px; /* Arrondi légèrement plus petit pour épouser le cadre */
    background-color: #000;
    position: relative;
    z-index: 2;
}

/* =============================================================
   ANIMATION REPARÉE : LE FLUX MAGIQUE NATUREL (8 SECONDES)
============================================================= */
@keyframes fluxMagiqueNaturel {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================================
   REPARATION : CADRE DIVIN DES PORTRAITS DE PROFIL
============================================================= */
.cadre-divin-portrait {
    border: 4px solid transparent !important; 
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-size: 100% 100%, 400% 400% !important; 
    animation: fluxMagiqueNaturel 8s ease infinite !important; /* Rétablit le flux ! */
    overflow: hidden;
    position: relative;
}

body.theme-dark .cadre-divin-portrait {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}
body.theme-light .cadre-divin-portrait {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}

/* =============================================================
   REPARATION : PANNEAU DE FILTRE DU REGISTRE (BANNIÈRE)
============================================================= */
.sommaire-banniere-tri {
    position: relative;
    overflow: hidden;
    z-index: 5;
    border: 4px solid transparent !important;
    border-radius: 16px !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-size: 100% 100%, 400% 400% !important;
    animation: fluxMagiqueNaturel 8s ease infinite !important; /* Rétablit le feu tournant ! */
    padding: 15px 20px !important;
    transition: background-image 0.5s ease-in-out !important; /* fondu des couleurs au changement de thème */
}

body.theme-dark .sommaire-banniere-tri {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}
body.theme-light .sommaire-banniere-tri {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}

/* Textes du filtre : tous à la même taille, en néon (couleur du thème), avec fondu */
.sommaire-banniere-tri h4,
.sommaire-banniere-tri .titre-categorie-tri,
.sommaire-banniere-tri .btn-tri {
    color: var(--accent-neon) !important;
    text-shadow: 0 0 6px var(--accent-neon-halo), 0 0 12px var(--accent-neon-halo) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    opacity: 1 !important;
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out, padding-left 0.2s ease !important;
}
.sommaire-banniere-tri .btn-tri:hover,
.sommaire-banniere-tri .btn-tri.actif { padding-left: 6px !important; filter: brightness(1.3); }

/* Flèche des onglets réductibles : pointe à droite, puis vers le bas quand c'est ouvert */
.sommaire-banniere-tri .titre-categorie-tri::before {
    content: "\203A"; /* › */
    display: inline-block;
    margin-right: 9px;
    font-weight: 900;
    transform: rotate(0deg);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-deroulant-conteneur.ouvert .titre-categorie-tri::before { transform: rotate(90deg); }

/* Barre de recherche interne à la page Aventuriers (reprend le style de celle du haut) */
.recherche-aventuriers {
    width: 100% !important;
    margin: 14px auto 2px !important;
    padding: 7px 14px !important;
}
/* Le panneau de filtre est toujours foncé : fond de la barre sombre + texte clair dans les 2 thèmes */
.recherche-aventuriers { --recherche-fond: #16110b !important; }
.recherche-aventuriers input { color: #ffffff !important; font-size: 0.8rem; }
.recherche-aventuriers input::placeholder { color: rgba(255, 255, 255, 0.6) !important; font-size: 0.78rem; }

/* =============================================================
   STRUCTURE INTACTE : LE SOMMAIRE LATÉRAL FLUIDE
============================================================= */
.menu-lateral {
    position: fixed;
    top: 116px !important;                   /* remonte sous la barre : le haut du sommaire naît dans son fondu */
    left: 20px !important;
    right: auto !important;
    width: 240px;
    /* Bien transparent : on voit le fond de la page bouger au travers */
    background-color: var(--sommaire-fond, var(--fond-box));
    border-radius: 0 0 24px 24px;
    padding: 0 20px 25px 20px !important;
    z-index: 999999 !important;
    /* Si le sommaire est trop grand, on peut le faire défiler — sans barre de défilement visible */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* anciens Edge/IE */
    overscroll-behavior: contain;
    /* Le haut du panneau (teinte) se fond sur une longue distance -> aucune arête */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 24px, #000 62px);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 24px, #000 62px);

    height: 0px !important;
    opacity: 0;
    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none !important;
    clip-path: inset(0px -50px -50px -50px) !important;
    box-shadow: inset 20px 0 20px -20px var(--lueur-neon), inset -20px 0 20px -20px var(--lueur-neon), inset 0 -20px 20px -20px var(--lueur-neon);

    transition: height 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                padding 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                margin-top 0.45s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.45s ease,
                opacity 0.8s ease-in-out !important;
}
/* Le flou "verre" du sommaire, porté par un calque à part et masqué en haut :
   son bord ne fait aucune coupure (même principe que la barre du haut). */
.menu-lateral::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    border-radius: inherit;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 66px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 66px);
    pointer-events: none;
    z-index: -1;
}

/* --- THÈME CLAIR : lueur du sommaire plus intense et plus rouge --- */
body.theme-light .menu-lateral {
    box-shadow:
        inset 30px 0 40px -16px #ff2323,
        inset -30px 0 40px -16px #ff2323,
        inset 0 -30px 40px -16px #ff2323,
        0 0 45px 2px rgba(255, 35, 35, 0.45);
}

body.menu-ouvert .menu-lateral {
    height: 660px !important;
    /* Le contenu (à partir de SOMMAIRE) commence bien plus bas, sous la zone de fondu */
    padding: 62px 20px 25px 20px !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.menu-lateral:not(body.menu-ouvert .menu-lateral) {
    height: 0px !important;
    padding: 0px 20px 0px 20px !important;
    opacity: 0 !important;
}

body.menu-ouvert .barre-outils,
body.menu-ouvert .zone-principale {
    margin-left: 0 !important;
    left: 0 !important;
}

/* =============================================================
   DESIGN INTÉRIEUR DU SOMMAIRE (TEXTES, NÉONS ET DISCORD)
============================================================= */
.entete-menu { 
    display: flex; flex-direction: column; align-items: center; position: relative;
    margin-bottom: 25px; margin-top: 10px; width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out !important;
}
.menu-lateral:not(body.menu-ouvert .menu-lateral) .entete-menu { transform: translateX(-40px) !important; opacity: 0 !important; }

.titre-sommaire { 
    font-size: 1.4rem !important; font-weight: 900 !important; letter-spacing: 2px !important; text-align: center !important; width: 100% !important; margin-bottom: 10px !important; display: block !important; opacity: 1 !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: fluxMagiqueNaturel 6s linear infinite !important; 
}
body.theme-dark .titre-sommaire { background: linear-gradient(90deg, #ff007f, #d946ef, #9d4ede, #ff007f); background-size: 400% 400%; }
body.theme-light .titre-sommaire { background: linear-gradient(90deg, #ff0000, #ff7300, #ffea00, #ff0000); background-size: 400% 400%; }

.liens-sommaire { list-style: none; flex-grow: 1; }
.liens-sommaire li { opacity: 0; transform: translateX(-40px); }
body.menu-ouvert .liens-sommaire li { animation: surgissementTitreLateral 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
body.menu-ouvert .liens-sommaire li:nth-child(1) { animation-delay: 0.20s; }
body.menu-ouvert .liens-sommaire li:nth-child(2) { animation-delay: 0.25s; }
body.menu-ouvert .liens-sommaire li:nth-child(3) { animation-delay: 0.30s; }
body.menu-ouvert .liens-sommaire li:nth-child(4) { animation-delay: 0.35s; }
body.menu-ouvert .liens-sommaire li:nth-child(5) { animation-delay: 0.40s; }
body.menu-ouvert .liens-sommaire li:nth-child(6) { animation-delay: 0.45s; }
body.menu-ouvert .liens-sommaire li:nth-child(7) { animation-delay: 0.50s; }
body.menu-ouvert .liens-sommaire li:nth-child(8) { animation-delay: 0.55s; }

/* L'item "Espace staff" de la roue n'apparaît que pour le staff */
/* item staff de la roue : caché par défaut (spécificité > .roue-item), montré si staff */
.roue-item.roue-item-staff { display: none; }
body.est-staff .roue-item.roue-item-staff { display: flex; }

@keyframes surgissementTitreLateral { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }

/* --- FERMETURE DU SOMMAIRE : les pages repartent en fondu, en sens inverse --- */
@keyframes disparitionTitreLateral { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-40px); } }
.menu-lateral.menu-en-fermeture .liens-sommaire li { animation: disparitionTitreLateral 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(7) { animation-delay: 0s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(6) { animation-delay: 0.03s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(5) { animation-delay: 0.06s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(4) { animation-delay: 0.08s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(3) { animation-delay: 0.12s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(2) { animation-delay: 0.16s; }
.menu-lateral.menu-en-fermeture .liens-sommaire li:nth-child(1) { animation-delay: 0.20s; }

.liens-sommaire li a { display: block; text-decoration: none !important; padding: 10px 15px; border-radius: 12px; font-size: 1.05rem; margin-bottom: 6px; font-weight: 600; background: transparent;
    /* surbrillance INSTANTANÉE (plus de latence), seul le décalage garde un léger fondu */
    transition: color 0.06s linear, text-shadow 0.06s linear, background-color 0.06s linear, padding-left 0.14s ease; }

/* --- sous-page réductible « Familias mineures » dans le sommaire --- */
.sommaire-avec-sous { position: relative; }
.sommaire-sous-toggle {
    position: absolute; top: 7px; right: 8px;
    width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 1.1rem; font-weight: 900; line-height: 1;
    color: #ffffff;
    border-radius: 9px;
    border: 1.5px solid currentColor;
    background: color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: 0 0 10px -2px currentColor;
}
body.theme-dark .sommaire-sous-toggle { color: #ff9fe0; }
body.theme-light .sommaire-sous-toggle { color: #ff5a2a; }
body.theme-vert .sommaire-sous-toggle { color: #8effa8; }
.sommaire-avec-sous > .lien-onglet { padding-right: 46px; }
.sommaire-sous-toggle span { display: inline-block; transition: transform 0.2s ease; }
.sommaire-sous-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.sommaire-sous-toggle:hover { background: color-mix(in srgb, currentColor 28%, transparent); box-shadow: 0 0 14px 0 currentColor; }
.sommaire-sous-liste { list-style: none; margin: -2px 0 6px; padding: 0 0 0 16px; }
.sommaire-sous-liste[hidden] { display: none; }
.sommaire-sous-liste li a.lien-sous {
    font-size: 0.92rem; padding: 7px 12px; opacity: 0.9;
}
.sommaire-sous-liste li a.lien-sous::before { content: "↳ "; opacity: 0.6; }
body.theme-dark .liens-sommaire li a { color: #e0aaff !important; text-shadow: 0 0 8px #c77dff, 0 0 15px rgba(199, 125, 255, 0.4); }
body.theme-dark .liens-sommaire li a:hover { color: #f72585 !important; text-shadow: 0 0 12px #f72585, 0 0 20px rgba(247, 37, 133, 0.6); background: rgba(255, 255, 255, 0.02); padding-left: 20px; }
body.theme-dark .liens-sommaire li a.actif { background-color: rgba(247, 37, 133, 0.08) !important; color: #ff52a2 !important; text-shadow: 0 0 10px #ff52a2, 0 0 20px rgba(255, 82, 162, 0.8) !important; border-left: 3px solid #ff52a2; padding-left: 18px; }
body.theme-light .liens-sommaire li a { color: #ff7300 !important; text-shadow: 0 0 8px #ff7300, 0 0 15px rgba(255, 115, 0, 0.4) !important; }
body.theme-light .liens-sommaire li a:hover { color: #ff0000 !important; text-shadow: 0 0 12px #ff0000, 0 0 20px rgba(255, 0, 0, 0.6) !important; background: rgba(0, 0, 0, 0.02); padding-left: 20px; }
body.theme-light .liens-sommaire li a.actif { background-color: rgba(255, 0, 0, 0.06) !important; color: #ff3333 !important; text-shadow: 0 0 10px #ff3333, 0 0 20px rgba(255, 51, 51, 0.8) !important; border-left: 3px solid #ff3333 !important; padding-left: 18px; }

/* Bas du sommaire : plus d'encadré. Juste le bouton "Rejoindre le Discord" :
   pilule arrondie, contour néon (couleur du thème) qui respire comme une brume,
   et texte en dégradé animé comme les autres titres. */
.pied-menu {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding-top: 14px; margin-top: 14px;
}
.lien-discord {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-weight: 800; font-size: 0.9rem; letter-spacing: 0.6px;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    border: 2px solid var(--accent-neon) !important;
    text-decoration: none !important;
    background-color: transparent !important;
    background-size: 280% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation: fluxMagiqueNaturel 6s linear infinite, discordBrume 8.5s ease-in-out infinite !important;
    transition: transform 0.2s ease, border-color 0.5s ease-in-out !important;
}
body.theme-dark  .lien-discord { background-image: linear-gradient(90deg, #ff2fbf, #d946ef, #9d6bff, #ff2fbf) !important; }
body.theme-light .lien-discord { background-image: linear-gradient(90deg, #ff3d00, #ff9a2e, #ffc46b, #ff3d00) !important; }
.lien-discord:hover { transform: scale(1.04); }

/* Brume néon douce : le halo du contour varie lentement et faiblement (aucun "battement") */
@keyframes discordBrume {
    0%, 100% { box-shadow: 0 0 7px -1px var(--accent-neon-halo), 0 0 16px -4px var(--accent-neon-halo), inset 0 0 8px -4px var(--accent-neon-halo); }
    50%      { box-shadow: 0 0 10px -1px var(--accent-neon-halo), 0 0 22px -3px var(--accent-neon-halo), inset 0 0 10px -3px var(--accent-neon-halo); }
}

.menu-lateral::before, .menu-lateral::after, .btn-fermer-menu { display: none !important; content: none !important; }
/* barre de défilement du sommaire masquée (Chrome / Safari) */
.menu-lateral::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* =============================================================
   RESTAURATION : DEUX CALQUES DE BANNIÈRE POUR LES AVENTURIERS
============================================================= */

/* Configuration de base des deux calques superposés */
.banniere-fond-aventuriers-sombre,
.banniere-fond-aventuriers-claire {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center 30%;
    z-index: 1;
    /* Transition d'opacité ultra-propre garantie sans déformation ou aplatissement */
    transition: opacity 0.5s ease-in-out !important;
}

.banniere-fond-aventuriers-sombre {
    /* Si l'image est dans un dossier séparé, garde 'images/alfia.jpeg' */
    /* Si elle est à la racine, utilise './alfia.jpeg' ou simplement 'alfia.jpeg' */
    background-image: url('images/argonauta.jpg') !important;
}

.banniere-fond-aventuriers-claire {
    background-image: url('images/feu.jpg') !important;
}

/* --- CINÉMATIQUE DU MODE SOMBRE (Alfia s'allume, Hestia s'éteint) --- */
body.theme-dark .banniere-fond-aventuriers-sombre {
    opacity: 1 !important;
}
body.theme-dark .banniere-fond-aventuriers-claire {
    opacity: 0 !important;
}

/* --- CINÉMATIQUE DU MODE CLAIR (Alfia s'éteint, Hestia s'allume) --- */
body.theme-light .banniere-fond-aventuriers-sombre {
    opacity: 0 !important;
}
body.theme-light .banniere-fond-aventuriers-claire {
    opacity: 1 !important;
}

/* =============================================================
   HAUTEUR REHAUSSÉE POUR LA BANNIÈRE AVENTURIERS
============================================================= */
#banniere-aventuriers {
    min-height: 373px !important; /* On l'agrandit pour lui donner un aspect majestueux */
    padding: 40px !important;    /* On donne de l'air aux textes intérieurs */
}

/* =============================================================
   CONTOURS MAGIQUES ET FLUIDES POUR LES BANNIÈRES (ACCUEIL & AVENTURIERS)
============================================================= */
.banniere-divine {
    position: relative;
    border: 4px solid transparent !important; /* Crée l'épaisseur exacte du contour */
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-size: 100% 100%, 400% 400% !important; /* Étire le fond pour le flux lent de 8s */
    animation: fluxMagiqueNaturel 8s ease infinite !important; /* Réutilise notre superbe animation ! */
    transition: background-image 0.5s ease-in-out !important; /* fondu des couleurs au changement de thème */
}

/* --- LE CONTOUR EN MODE SOMBRE (VIOLET ET ROSE NÉON) --- */
body.theme-dark .banniere-divine {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), 
                      linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}

/* --- LE CONTOUR EN MODE CLAIR (ROUGE ET ORANGE VIBRANT) --- */
body.theme-light .banniere-divine {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), 
                      linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}

/* =============================================================
   CLASSE GÉNÉRIQUE UNIFIÉE : CONTOURS FLUIDES POUR LES BLOCS HUD
============================================================= */
.carte-hud-divine {
    position: relative;
    border: 4px solid transparent !important; /* Crée l'épaisseur du contour */
    border-radius: 24px !important; /* Harmonise les angles */
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-size: 100% 100%, 400% 400% !important;
    animation: fluxMagiqueNaturel 8s ease infinite !important; /* Ondulation sacrée de 8s */
    transition: background-image 0.5s ease-in-out !important; /* fondu des couleurs au changement de thème */
}

/* --- EFFET EN MODE SOMBRE (VIOLET ET ROSE NÉON) --- */
body.theme-dark .carte-hud-divine {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), 
                      linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}

/* --- EFFET EN MODE CLAIR (ROUGE ET ORANGE VIBRANT) --- */
body.theme-light .carte-hud-divine {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)), 
                      linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}

/* =============================================================
   CORRECTIF CONTRASTE MODE SOMBRE : CARTE STATISTIQUES (DB)
============================================================= */
body.theme-dark .stat-card p,
body.theme-dark .stat-card h4 {
    color: #ffffff !important; /* Force le titre et la description en blanc la nuit */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* =============================================================
   LECTEUR DE MUSIQUE (disque collé au bord droit, se déroule au survol)
============================================================= */
.lecteur-musique {
    position: fixed;          /* collé à l'écran, reste visible même en défilant */
    top: 84px;                /* un peu plus bas */
    right: -12px;             /* au repos : le disque est coupé pile en deux dans le coin */
    height: 44px;             /* = hauteur du disque : il ne bouge pas verticalement au survol */
    display: flex;
    align-items: flex-start;  /* le panneau se déroule vers le BAS, pas au-dessus des icônes */
    gap: 0;
    z-index: 95;
    transition: right 0.62s cubic-bezier(0.16, 1, 0.3, 1);   /* déroulé un peu plus lent et doux */
}
/* Au survol : le panneau se déroule dans le coin et POUSSE le disque vers la gauche
   (le disque a l'air de reculer en tirant le menu derrière lui) */
.lecteur-musique:hover,
.lecteur-musique:focus-within {
    right: 6px;
}

/* --- LE DISQUE QUI TOURNE EN PERMANENCE --- */
.disque-musique {
    position: relative;
    z-index: 2;               /* passe devant le panneau qui se déroule derrière lui */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    background-color: var(--disque-fond);
    /* Vinyle propre : sillons concentriques + reflet + centre lumineux (remplacé par une pochette via le JS) */
    background-image:
        radial-gradient(circle at 50% 50%, #fff 0 5%, rgba(255, 255, 255, 0.35) 6% 9%, transparent 11%),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 2.4px,
            var(--disque-sillon) 2.4px 3.6px, transparent 3.6px 5px),
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.30), transparent 52%),
        radial-gradient(circle at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.28) 100%);
    background-size: cover;
    background-position: center;
    border: 1.5px solid var(--disque-bordure);
    box-shadow: 0 0 22px 4px var(--disque-lueur), 0 0 46px 8px var(--disque-lueur), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.4);
    animation: tourneDisque 3.4s linear infinite;
    animation-play-state: paused;   /* immobile à l'arrêt, tourne pendant la lecture (voir .joue) */
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

/* ===== CONTOUR "HUD" : plusieurs anneaux néon segmentés, concentriques,
   qui tournent AVEC le disque. Violet (thème sombre) / orange-rouge (thème clair). ===== */
.disque-musique::before,
.disque-arc {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ep, 2px)), #000 calc(100% - var(--ep, 2px)));
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ep, 2px)), #000 calc(100% - var(--ep, 2px)));
    filter: drop-shadow(0 0 2.5px var(--disque-lueur)) drop-shadow(0 0 6px var(--disque-lueur));
}
/* anneau 1 : le plus proche, épais, avec un segment blanc net */
.disque-musique::before {
    inset: -4px; --ep: 3px;
    background: conic-gradient(from 8deg,
        var(--disque-bordure) 0 26%, var(--disque-bordure-vif) 27% 37%,
        var(--disque-bordure) 38% 60%, transparent 60% 69%,
        var(--disque-bordure) 69% 93%, transparent 93% 100%);
}
/* anneau 2 */
.disque-arc:nth-child(1) {
    inset: -9px; --ep: 2.5px;
    background: conic-gradient(from 130deg,
        transparent 0 6%, var(--disque-bordure) 6% 30%,
        transparent 30% 45%, var(--disque-bordure-vif) 46% 55%,
        var(--disque-bordure) 56% 86%, transparent 86% 100%);
}
/* anneau 3 */
.disque-arc:nth-child(2) {
    inset: -14px; --ep: 2px;
    background: conic-gradient(from 250deg,
        var(--disque-bordure) 0 24%, transparent 24% 40%,
        var(--disque-bordure) 40% 68%, transparent 68% 79%,
        var(--disque-bordure) 79% 100%);
}
/* anneau 4 : variante de teinte (violet-bleu / rouge) */
.disque-arc:nth-child(3) {
    inset: -19px; --ep: 1.5px; opacity: 0.85;
    background: conic-gradient(from 40deg,
        transparent 0 10%, var(--disque-bordure-2) 10% 42%,
        transparent 42% 58%, var(--disque-bordure) 58% 90%,
        transparent 90% 100%);
}
/* anneau 5 : extérieur, fin et discret */
.disque-arc:nth-child(4) {
    inset: -24px; --ep: 1.5px; opacity: 0.6;
    background: conic-gradient(from 190deg,
        var(--disque-bordure) 0 16%, transparent 16% 52%,
        var(--disque-bordure) 52% 74%, transparent 74% 100%);
}

.disque-musique::after { /* petit point central lumineux */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px var(--disque-lueur);
    transform: translate(-50%, -50%);
}
/* Le disque tourne UNIQUEMENT quand une musique joue (il se fige en pause, sans revenir à zéro) */
.lecteur-musique.joue .disque-musique { animation-play-state: running; }

@keyframes tourneDisque {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Étincelles autour du disque pendant la lecture (couleur du thème) */
.disque-etincelle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px 1px var(--disque-lueur), 0 0 3px var(--disque-bordure);
    pointer-events: none;
    z-index: 3;
    animation: etincelleDisque 0.75s ease-out forwards;
}
@keyframes etincelleDisque {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    28%  { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.35); }
}
body.anim-reduites .disque-etincelle { display: none; }

/* Enveloppe : contient les ondes (derrière, plus larges) + le panneau (devant, opaque).
   Pas d'overflow ici pour que les ondes débordent autour du panneau, comme sur la maquette. */
.panneau-musique-wrap {
    position: relative;
    display: flex;
    margin-left: -18px;             /* le disque chevauche le bord gauche du panneau */
}

/* --- ONDES SONORES : bande large DERRIÈRE le panneau (dépasse sur les côtés) --- */
.musique-waves {
    position: absolute;
    left: 50%; top: 50%;
    width: 84%;                     /* même largeur que le panneau (pas de débordement sur les côtés) */
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;                     /* derrière le panneau (z-index 1) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}
.lecteur-musique:hover .musique-waves,
.lecteur-musique:focus-within .musique-waves { opacity: 0.85; }

.musique-waves span {
    flex: 1 1 0;
    min-width: 2px;
    height: 30%;                    /* au repos : caché derrière le panneau */
    border-radius: 999px;
    background: linear-gradient(to top, var(--lecteur-accent), rgba(255, 255, 255, 0.5));
    box-shadow: 0 0 7px -1px var(--lecteur-accent);
    transform-origin: center;       /* la barre grandit vers le HAUT et le BAS -> sort du panneau */
    transition: height 0.12s linear;
}
/* Repli "faux" (si l'analyse audio n'est pas dispo) : les barres pulsent entre le bord du panneau et le maxi */
@keyframes ondeBarre {
    0%, 100% { transform: scaleY(0.58); }   /* -> pointes ramenées sur les bords du panneau */
    50%      { transform: scaleY(1); }
}
.lecteur-musique.joue .musique-waves:not(.reactif) span {
    /* bosse centrée : grande au milieu (158%), petite sur les bords (~109%) */
    height: calc(90% + var(--env, 0.6) * 68%);
    animation: ondeBarre 0.9s ease-in-out infinite;
}
.lecteur-musique.joue .musique-waves:not(.reactif) span:nth-child(3n)   { animation-duration: 0.68s; }
.lecteur-musique.joue .musique-waves:not(.reactif) span:nth-child(3n+1) { animation-duration: 1.18s; }
.lecteur-musique.joue .musique-waves:not(.reactif) span:nth-child(4n)   { animation-delay: 0.18s; }
.lecteur-musique.joue .musique-waves:not(.reactif) span:nth-child(5n)   { animation-delay: 0.36s; }
.lecteur-musique.joue .musique-waves:not(.reactif) span:nth-child(2n)   { animation-delay: 0.1s; }
body.anim-reduites .musique-waves { display: none; }

/* --- LE PANNEAU QUI SE DÉROULE DERRIÈRE LE DISQUE, VERS LE COIN --- */
.panneau-musique {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 45%),
        var(--musique-panneau, var(--fond-carte));
    border: 1px solid var(--musique-panneau-bord, transparent);
    border-radius: 20px;
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.5), 0 0 24px -6px var(--disque-lueur);
    white-space: nowrap;
    pointer-events: none;
    transition: max-width 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.55s ease,
                padding 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.5s ease-in-out,
                border-color 0.5s ease-in-out,
                box-shadow 0.5s ease-in-out;
}
.lecteur-musique:hover .panneau-musique,
.lecteur-musique:focus-within .panneau-musique {
    max-width: 348px;
    opacity: 1;
    padding: 14px 20px 13px 32px;   /* padding-gauche large : le texte dégage le disque */
    pointer-events: auto;
}

/* Titre de la chanson : centré en haut, écriture en dégradé animé adapté au thème */
.musique-titre {
    align-self: stretch;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 280% 100%;
    animation: fluxMagiqueNaturel 6s linear infinite;
}
body.theme-dark  .musique-titre { background-image: linear-gradient(90deg, #ff2fbf, #d946ef, #9d6bff, #ff2fbf); }
body.theme-light .musique-titre { background-image: linear-gradient(90deg, #ff3d00, #ff9a2e, #ffc46b, #ff3d00); }

/* Barre de lecture (progression) */
.musique-progres {
    display: flex;
    align-items: center;
    gap: 9px;
}
.musique-temps {
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--musique-temps-txt, var(--texte-secondaire));
    flex-shrink: 0;
    transition: color 0.5s ease-in-out;
}
.musique-barre {
    -webkit-appearance: none; appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
}
.musique-barre::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(to right,
        var(--lecteur-accent) 0 var(--prog, 0%),
        rgba(140, 140, 140, 0.32) var(--prog, 0%) 100%);
    box-shadow: 0 0 6px -1px var(--lecteur-accent);
}
.musique-barre::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lecteur-accent); }
.musique-barre::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(140, 140, 140, 0.32); }
.musique-barre::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
    width: 15px; height: 15px; margin-top: -4.5px;
    border-radius: 50%;
    background: var(--lecteur-accent);
    border: 2.5px solid #fff;
    box-shadow: 0 0 6px var(--lecteur-accent), 0 0 12px var(--lecteur-accent);
}
.musique-barre::-moz-range-thumb {
    box-sizing: border-box; width: 15px; height: 15px; border-radius: 50%;
    background: var(--lecteur-accent); border: 2.5px solid #fff;
    box-shadow: 0 0 6px var(--lecteur-accent), 0 0 12px var(--lecteur-accent);
}

/* --- LIGNE DES CONTRÔLES --- */
.musique-controles {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.musique-controles button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    color: var(--lecteur-accent);
    display: flex;
    transition: transform 0.15s ease, background-color 0.2s ease, color 0.5s ease-in-out, opacity 0.2s ease;
}
.musique-controles button svg {
    width: 18px; height: 18px; display: block;
    fill: currentColor;
    filter: drop-shadow(0 0 3px var(--lecteur-accent));
}
.musique-controles button:hover { transform: scale(1.15); }
#musique-lecture svg { width: 20px; height: 20px; }
#musique-lecture .ic-pause { display: none; }
.lecteur-musique.joue #musique-lecture .ic-play  { display: none; }
.lecteur-musique.joue #musique-lecture .ic-pause { display: block; }

/* Bouton "répéter" : gris éteint par défaut, cadre allumé quand actif */
#musique-loop .ic-loop { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: none; }
#musique-loop { opacity: 0.42; }
#musique-loop.loop-actif {
    opacity: 1;
    background: var(--lecteur-accent-box);
    box-shadow: inset 0 0 0 1px var(--lecteur-accent), 0 0 8px -2px var(--lecteur-accent);
}
#musique-loop.loop-actif .ic-loop { filter: drop-shadow(0 0 4px var(--lecteur-accent)); }

/* mode aléatoire : reste en surbrillance quand actif */
#musique-aleatoire.aleatoire-actif {
    background: var(--lecteur-accent-box);
    box-shadow: inset 0 0 0 1px var(--lecteur-accent), 0 0 9px -2px var(--lecteur-accent);
}
#musique-aleatoire.aleatoire-actif svg { filter: drop-shadow(0 0 4px var(--lecteur-accent)); }

/* Icône haut-parleur avant le volume — cliquable pour couper / rétablir le son */
.musique-icone-volume {
    display: flex;
    flex-shrink: 0;
    margin-left: 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.15s ease, color 0.3s ease;
}
.musique-icone-volume:hover { transform: scale(1.15); }
.musique-icone-volume svg {
    width: 16px; height: 16px;
    fill: var(--lecteur-accent);
    filter: drop-shadow(0 0 3px var(--lecteur-accent));
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}
.musique-icone-volume .ic-mute {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    display: none;
}
.musique-icone-volume.est-mute .ic-son  { display: none; }
.musique-icone-volume.est-mute .ic-mute { display: block; }
.musique-icone-volume.est-mute { color: #ff5555; }
.musique-icone-volume.est-mute svg { fill: #ff5555; stroke: #ff5555; filter: drop-shadow(0 0 3px rgba(255, 85, 85, 0.7)); }

/* --- BARRE DE VOLUME : rail fin + rond néon, la partie colorée suit le rond --- */
.musique-controles input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 60px;
    height: 6px;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    transition: none;
}
.musique-controles input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--lecteur-accent) 0 var(--vol, 50%),
        rgba(140, 140, 140, 0.32) var(--vol, 50%) 100%);
    box-shadow: 0 0 6px -1px var(--lecteur-accent);
    transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.musique-controles input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 999px; background: rgba(140, 140, 140, 0.32);
}
.musique-controles input[type="range"]::-moz-range-progress {
    height: 6px; border-radius: 999px;
    background: var(--lecteur-accent);
    box-shadow: 0 0 6px -1px var(--lecteur-accent);
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.musique-controles input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--lecteur-accent);
    border: 2.5px solid #fff;
    box-shadow: 0 0 6px var(--lecteur-accent), 0 0 12px var(--lecteur-accent);
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.musique-controles input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--lecteur-accent);
    border: 2.5px solid #fff;
    box-shadow: 0 0 6px var(--lecteur-accent), 0 0 12px var(--lecteur-accent);
}

/* --- LIGNE "FAVORI" : liste déroulante maison assortie au lecteur --- */
.musique-favori-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lecteur-accent);
    transition: color 0.5s ease-in-out;
}
.musique-favori-ligne + .musique-favori-ligne { margin-top: 7px; }
/* les deux étiquettes (♪ Titre / ★ Favori) alignées sur la même largeur */
.musique-favori-ligne .favori-titre { min-width: 52px; }
.favori-titre { flex-shrink: 0; }
.favori-select { flex: 1; min-width: 0; }
.favori-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--lecteur-accent);
    background: rgba(255, 255, 255, 0.04);
    color: var(--texte-principal);
    cursor: pointer;
    transition: border-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.theme-light .favori-trigger { color: #3a2205; background: rgba(0, 0, 0, 0.03); }
.favori-trigger:hover { box-shadow: 0 0 10px -2px var(--lecteur-accent); }
.favori-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favori-chevron { display: flex; flex-shrink: 0; transition: transform 0.25s ease; }
.favori-chevron svg { width: 15px; height: 15px; fill: none; stroke: var(--lecteur-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.favori-trigger[aria-expanded="true"] .favori-chevron { transform: rotate(180deg); }

/* Le menu (posé sur <body>, position calculée en JS) */
.favori-menu {
    position: fixed;
    z-index: 2147483000;
    margin: 0;
    padding: 5px;
    list-style: none;
    border-radius: 14px;
    background: var(--musique-panneau, var(--fond-carte));
    border: 1.5px solid var(--lecteur-accent);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.55), 0 0 18px -4px var(--disque-lueur);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.favori-menu.ouvert { opacity: 1; transform: translateY(0) scale(1); }
.favori-option {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--texte-principal);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body.theme-light .favori-option { color: #3a2205; }
.favori-option:hover { background: var(--lecteur-accent-box); }
.favori-option.actif {
    color: var(--lecteur-accent);
    background: var(--lecteur-accent-box);
    box-shadow: inset 0 0 0 1px var(--lecteur-accent);
}
/* Liste des titres (longue) : défilement interne discret */
.piste-menu { max-height: 244px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lecteur-accent) transparent; }
.piste-menu::-webkit-scrollbar { width: 6px; }
.piste-menu::-webkit-scrollbar-thumb { background: var(--lecteur-accent); border-radius: 6px; }
.piste-menu::-webkit-scrollbar-track { background: transparent; }

/* =============================================================
   ROUE DES PARAMÈTRES (dans le coin, sous la barre, à droite)
============================================================= */
.zone-parametres {
    position: fixed;
    top: 84px;               /* coin haut-gauche, sous l'icône du sommaire (même axe) */
    left: 20px;              /* aligné avec l'icône du sommaire */
    z-index: 96;
}

.roue-parametres {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    /* pastille ronde + anneaux HUD : voir .cadre-neon */
}
.roue-parametres svg {
    width: 19px;
    height: 19px;
    fill: var(--accent-neon);
    filter: drop-shadow(0 0 3px var(--accent-neon));
    transition: fill 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Seule la roue (le SVG) tourne — les anneaux tournent tout seuls */
.roue-parametres:hover svg { transform: rotate(180deg); }
.zone-parametres.ouvert .roue-parametres svg { transform: rotate(180deg); }
.zone-parametres.ouvert .roue-parametres {
    box-shadow: 0 0 16px 2px var(--accent-neon-halo), inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.panneau-parametres[hidden] { display: none; }
.panneau-parametres {
    position: absolute;
    top: 0;
    left: calc(100% + 14px);   /* se déplie à DROITE de la roue */
    width: 340px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--fond-carte);
    color: var(--texte-principal);
    border: 2px solid var(--accent-neon);
    border-radius: 14px;
    box-shadow: var(--shadow-soft), 0 0 16px -2px var(--accent-neon-halo);
    transform-origin: left center;
    /* état FERMÉ (mais pas encore hidden) : le panneau est là, invisible et rétréci */
    opacity: 0;
    transform: translateX(-14px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.34s ease,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.5s ease-in-out, color 0.5s ease-in-out,
                border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.panneau-parametres.ouvert {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}
body.anim-reduites .panneau-parametres { transition: opacity 0.15s ease; transform: none; }
.panneau-parametres h4 {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--accent-neon);
    text-shadow: 0 0 8px var(--accent-neon-halo);
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
.ligne-parametre {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.35;
    cursor: pointer;
}
.ligne-parametre .texte-parametre { padding-top: 1px; }

/* Case à cocher maison : croix néon (non) qui se transforme en checkmark (oui), sans carré */
.ligne-parametre input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
    pointer-events: none;
}
.marque-toggle {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
}
/* Deux calques colorés au thème (via mask) : une vraie croix ✕ et une vraie coche ✓ */
.marque-toggle::before,
.marque-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--accent-neon);
    filter: drop-shadow(0 0 4px var(--accent-neon)) drop-shadow(0 0 9px var(--accent-neon-halo));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1),
                background-color 0.5s ease-in-out;
}
/* La croix (état non coché) */
.marque-toggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5 L19 19 M19 5 L5 19' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5 L19 19 M19 5 L5 19' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: 1;
    transform: scale(1);
}
/* La coche (état coché) */
.marque-toggle::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 L9.5 18 L20 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 L9.5 18 L20 6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    opacity: 0;
    transform: scale(0.4);
}
.ligne-parametre input:checked ~ .marque-toggle::before { opacity: 0; transform: scale(0.4); }
.ligne-parametre input:checked ~ .marque-toggle::after  { opacity: 1; transform: scale(1); }
/* =============================================================
   CURSEUR PERSONNALISÉ (image cristal) + PARTICULES + ONDE AU CLIC
============================================================= */
/* Curseur NATIF (image réduite en data-URI par le JS) : rendu par le navigateur,
   donc AUCUNE latence et quasi aucun poids CPU. !important pour battre tous les
   "cursor: pointer" éparpillés dans la feuille. */
html.curseur-actif,
html.curseur-actif *,
html.curseur-actif *::before,
html.curseur-actif *::after { cursor: var(--curseur-normal, auto) !important; }

html.curseur-actif a, html.curseur-actif button, html.curseur-actif [role="button"], html.curseur-actif [onclick],
html.curseur-actif input, html.curseur-actif select, html.curseur-actif textarea, html.curseur-actif label,
html.curseur-actif summary, html.curseur-actif [tabindex]:not([tabindex="-1"]),
html.curseur-actif .lien-onglet, html.curseur-actif .btn-tri, html.curseur-actif .titre-categorie-tri,
html.curseur-actif .carte-aventurier-mini, html.curseur-actif .disque-musique, html.curseur-actif .lecteur-musique,
html.curseur-actif .roue-item, html.curseur-actif .roue-noyau, html.curseur-actif .roue-radiale,
html.curseur-actif .switch-label, html.curseur-actif .switch-theme-container,
html.curseur-actif .lien-discord, html.curseur-actif .item-lien, html.curseur-actif .quete-item,
html.curseur-actif .equip-entete, html.curseur-actif .leg-item, html.curseur-actif .favori-option,
html.curseur-actif .favori-trigger, html.curseur-actif .rs-item, html.curseur-actif .carte-classe,
html.curseur-actif .cadre-neon, html.curseur-actif .btn-action, html.curseur-actif .musique-icone-volume,
html.curseur-actif .avis-btn, html.curseur-actif .avis-carte, html.curseur-actif .staff-mini,
html.curseur-actif .btn-discord, html.curseur-actif .profil-pastille, html.curseur-actif .profil-menu-item,
html.curseur-actif .btn-staff, html.curseur-actif .switch-label * , html.curseur-actif .roue-item * ,
html.curseur-actif a *, html.curseur-actif button * {
    cursor: var(--curseur-actif, var(--curseur-normal, pointer)) !important;
}
#curseur-perso { display: none !important; }

/* Couleur des particules qui suivent le curseur, selon le thème */
body.theme-dark  { --particule-couleur: #c94dff; }
body.theme-light { --particule-couleur: #ff5a2e; }

/* Fines particules qui montent et s'estompent (comme le fond de la bannière d'accueil) */
.curseur-particule {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, var(--particule-couleur, var(--accent-neon)) 0%,
                                var(--particule-couleur, var(--accent-neon)) 42%, transparent 85%);
    box-shadow: 0 0 5px var(--particule-couleur, var(--accent-neon));
    pointer-events: none;
    z-index: 2147483646;
    transform: translate(-50%, -50%);
}

/* Onde façon "goutte dans l'eau" quand on clique : un seul anneau qui s'écarte
   et s'estompe tout en douceur, avec une aura néon du thème */
.clic-onde {
    position: fixed;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--accent-neon);
    box-shadow: 0 0 13px var(--accent-neon), inset 0 0 9px var(--accent-neon-halo);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2147483645;
    animation: clicOnde 1.15s cubic-bezier(0.12, 0.7, 0.25, 1) forwards;
}
@keyframes clicOnde {
    0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.28); border-width: 2.5px; }
    55%  { opacity: 0.22; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(5.2);  border-width: 0.4px; }
}

@media (pointer: coarse) {
    #curseur-perso { display: none; }
}

/* =============================================================
   MODE "ANIMATIONS RÉDUITES" (PC peu puissants) —
   on coupe seulement les boucles infinies ; les transitions,
   les fondus de thème et les apparitions ponctuelles restent.
============================================================= */
body.anim-reduites .banniere-divine,
body.anim-reduites .carte-hud-divine,
body.anim-reduites .sommaire-banniere-tri,
body.anim-reduites .lien-discord,
body.anim-reduites .titre-sommaire,
body.anim-reduites .musique-titre,
body.anim-reduites .effet-holo,
body.anim-reduites .disque-musique,
body.anim-reduites .cadre-neon::after,
body.anim-reduites .icone-flamme svg,
body.anim-reduites .cur-cristal {
    animation: none !important;
}
body.anim-reduites::before,
body.anim-reduites::after { animation: none !important; }
/* le contour dégradé reste visible mais figé */
body.anim-reduites .cadre-neon::after { opacity: 0.85; }
/* on retire aussi les flous "verre" (coûteux en GPU) — la translucidité reste */
body.anim-reduites .barre-outils::after,
body.anim-reduites .menu-lateral::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =============================================================
   PETITES ÉTOILES SCINTILLANTES DU SOMMAIRE
   (couleur adaptée au thème, avec fondu au changement de mode)
============================================================= */
body.theme-dark  { --etoile-couleur: #dcbcff; }
body.theme-light { --etoile-couleur: #ffd9a6; }

.sommaire-etoiles {
    position: absolute;
    inset: 0;
    z-index: 0;              /* derrière les textes du sommaire */
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.etoile-sommaire {
    position: absolute;
    border-radius: 50%;
    background: var(--etoile-couleur, #dcbcff);
    box-shadow: 0 0 4px var(--etoile-couleur, #dcbcff), 0 0 9px rgba(255, 255, 255, 0.22);
    opacity: var(--o, 0.4);
    animation: scintilleEtoile var(--d, 4s) ease-in-out var(--r, 0s) infinite;
    transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
/* scintillement bien visible : la lumière varie ET l'étoile dérive un peu */
@keyframes scintilleEtoile {
    0%   { opacity: calc(var(--o, 0.4) * 0.15); transform: translate(0, 0) scale(0.55); }
    25%  { opacity: var(--o, 0.4);              transform: translate(1.5px, -2px) scale(1); }
    50%  { opacity: calc(var(--o, 0.4) * 0.35); transform: translate(0, -3px) scale(0.7); }
    75%  { opacity: var(--o, 0.4);              transform: translate(-1.5px, -1px) scale(0.95); }
    100% { opacity: calc(var(--o, 0.4) * 0.15); transform: translate(0, 0) scale(0.55); }
}
body.anim-reduites .etoile-sommaire { animation: none !important; }

/* Les vrais contenus du sommaire passent au-dessus des étoiles */
.menu-lateral .entete-menu,
.menu-lateral .liens-sommaire,
.menu-lateral .pied-menu { position: relative; z-index: 1; }

/* Contour lumineux du sommaire : néon STATIQUE (plus d'animation de box-shadow,
   trop coûteuse en repeint pendant le défilement). La "brume" douce est portée
   par un calque à part qui ne fait varier que son OPACITÉ (compositeur seul). */
body.menu-ouvert .menu-lateral {
    box-shadow: inset 22px 0 26px -20px var(--accent-neon), inset -22px 0 26px -20px var(--accent-neon),
                inset 0 -24px 26px -20px var(--accent-neon), 0 0 30px -4px var(--accent-neon-halo);
}
.sommaire-lueur {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    box-shadow: inset 20px 0 32px -18px var(--accent-neon), inset -20px 0 32px -18px var(--accent-neon), inset 0 -22px 32px -18px var(--accent-neon);
    opacity: 0;
    animation: sommaireLueurPulse 9s ease-in-out infinite;
}
@keyframes sommaireLueurPulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } }
body.anim-reduites .sommaire-lueur { animation: none !important; }

/* =============================================================
   PAGE « CRÉATION DE PERSONNAGE »
============================================================= */
/* Titre de la bannière : même esprit que les titres de l'Accueil / Aventuriers —
   grande police du site (Cinzel), couleur du thème, halo néon, fondu au changement de thème */
.titre-creation {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--accent-neon);
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: 0 0 12px var(--accent-neon-halo), 0 0 30px var(--accent-neon-halo), 0 2px 5px rgba(0, 0, 0, 0.45);
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
@media (max-width: 560px) { .titre-creation { font-size: 2rem; } }

/* THÈME CLAIR : le texte des bannières de la page Création passe en (quasi) noir
   pour rester lisible sur le fond clair (fondu au changement de thème conservé). */
body.theme-light .banniere-creation .titre-creation {
    color: #1c1220;
    -webkit-text-fill-color: #1c1220;
    text-shadow: 0 1px 4px rgba(255, 244, 224, 0.6), 0 0 16px rgba(255, 180, 120, 0.35);
}
body.theme-light .banniere-creation .intro-section p {
    color: #241a22;
}
.banniere-creation .intro-section p { transition: color 0.5s ease-in-out; }

/* Sommaire dans la bannière (mène en douceur aux Classes / aux Races) —
   placé sur le CÔTÉ DROIT de la bannière, comme le filtre de la page Aventuriers */
.banniere-creation .contenu-banniere {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.banniere-creation .intro-section { flex: 1; min-width: 250px; }
.sommaire-creation {
    flex: 0 0 auto;
    width: 232px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 42%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fond-carte) 58%, transparent);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 18px -8px var(--accent-neon-halo), inset 0 0 20px -16px var(--accent-neon);
    transition: border-color 0.5s ease-in-out, background 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.sommaire-creation-titre {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--accent-neon);
    opacity: 0.9;
    margin-bottom: 2px;
    transition: color 0.5s ease-in-out;
}
.sommaire-creation-lien {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    font-size: 0.88rem; font-weight: 600;
    color: #d9dae7;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 32%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-neon) 7%, transparent);
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease,
        padding-left 0.2s ease, box-shadow 0.35s ease;
}
.sommaire-creation-lien::before { content: "\203A"; color: var(--accent-neon); font-weight: 900; font-size: 1em; }
.sommaire-creation-lien:hover,
.sommaire-creation-lien:focus-visible {
    color: var(--accent-neon);
    border-color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 18%, transparent);
    padding-left: 18px;
    box-shadow: 0 4px 14px -6px var(--accent-neon-halo);
    outline: none;
}
/* cibles du sommaire : ne pas passer sous la barre du haut */
#bloc-classes, #bloc-races { scroll-margin-top: 90px; }
@media (max-width: 720px) {
    .sommaire-creation { width: 100%; }
}

/* La page Création est un peu plus large pour laisser respirer 4 grandes cartes */
/* même largeur que les autres pages -> même distance sommaire / bannière */
#page-creation { max-width: 1100px; }

.bloc-classes { margin-top: 30px; text-align: center; }
.bloc-classes > h2 { margin-bottom: 4px; text-align: center; }
.bloc-classes > p { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; }

/* La grille de cartes : 4 par ligne, centrée */
.grille-classes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 30px;
    margin: 58px auto 0;   /* place pour le "perchoir" du chat au-dessus de la grille */
    max-width: 1240px;
}
@media (max-width: 1040px) { .grille-classes { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
@media (max-width: 560px)  { .grille-classes { grid-template-columns: 1fr; max-width: 320px; } }

/* Chaque carte : un bouton qui se retourne en 3D au clic (plus grande, plus haute) */
.carte-classe {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; padding: 0; margin: 0;
    font: inherit; color: inherit;
    cursor: pointer;
    position: relative;
    width: 100%;
    aspect-ratio: 25 / 42;
    perspective: 1400px;
}
/* les cartes hors écran ne consomment plus de CPU (animations en pause) -> défilement fluide */
.carte-classe.hors-vue .carte-face,
.carte-classe.hors-vue .carte-face::after { animation-play-state: paused; }
.carte-classe-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}
.carte-classe.retournee .carte-classe-inner { transform: rotateY(180deg); }
/* survol : on fait juste briller le contour (pas de scale -> pas de rognage avec content-visibility) */
.carte-classe:hover .carte-face { box-shadow: 0 0 22px 0 var(--accent-neon-halo), 0 0 46px -6px var(--accent-neon-halo), inset 0 0 24px -12px var(--accent-neon); }
.carte-classe:hover .carte-face::after { opacity: 0.42; animation-duration: 3.2s; }

/* Les deux faces : contour "ruban néon" multi-teintes (façon screen 3),
   animé (dégradé qui coule + halo qui respire), adapté au thème */
.carte-face {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    display: flex; flex-direction: column;
    padding: 16px;
    border-radius: 22px;
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-size: 100% 100%, 320% 320%;
    /* halo STATIQUE (plus d'animation de box-shadow : trop lourde x20 cartes) */
    box-shadow: 0 0 15px -2px var(--accent-neon-halo), 0 0 34px -9px var(--accent-neon-halo), inset 0 0 24px -14px var(--accent-neon);
    animation: fluxMagiqueNaturel 7s ease infinite;
    transition: background-image 0.5s ease-in-out, box-shadow 0.25s ease;
    overflow: hidden;
}
body.theme-dark  .carte-face { background-image: linear-gradient(var(--fond-box), var(--fond-box)), linear-gradient(130deg, #7b3dff 0%, #d946ef 26%, #4dd0ff 50%, #d946ef 74%, #7b3dff 100%); }
body.theme-light .carte-face { background-image: linear-gradient(var(--fond-box), var(--fond-box)), linear-gradient(130deg, #ff8a2b 0%, #ff2d1a 28%, #ffd24d 50%, #ff2d1a 72%, #ff8a2b 100%); }
.carte-face.arriere {
    transform: rotateY(180deg);
    align-items: center; justify-content: center;
    text-align: center; gap: 14px; padding: 30px 24px;
}
/* effet holographique qui balaie la carte (comme sur les bannières) — SANS coupure :
   le balayage fait un aller-retour (alternate), donc aucun "saut" au bouclage. */
.carte-face::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 20%,
        rgba(157,78,221,0.30) 38%,
        rgba(0,255,204,0.34) 50%,
        rgba(255,215,0,0.26) 62%,
        rgba(255,255,255,0) 80%);
    background-size: 230% 100%;
    background-repeat: no-repeat;
    opacity: 0.24;
    mix-blend-mode: screen;
    animation: holoCarteBalayage 6.5s ease-in-out infinite alternate;
}
@keyframes holoCarteBalayage {
    from { background-position: 128% 0; }
    to   { background-position: -28% 0; }
}
body.theme-light .carte-face::after { mix-blend-mode: overlay; opacity: 0.32; }
body.anim-reduites .carte-face { animation: none !important; }
body.anim-reduites .carte-face::after { animation: none !important; opacity: 0.1; }
body.anim-reduites .carte-classe-inner { transition: transform 0.35s ease; }

/* petit trait néon en haut de la carte (accent "ruban") */
.carte-face::before {
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
    box-shadow: 0 0 7px var(--accent-neon-halo);
    opacity: 0.75;
    pointer-events: none;
    z-index: 2;
}

/* Rebord intérieur + rivets lumineux dans les angles (comme sur l'inspiration) */
.cc-rebord {
    position: absolute; inset: 9px;
    border: 1.5px solid var(--accent-neon);
    border-radius: 14px;
    opacity: 0.42;
    pointer-events: none;
    box-shadow: inset 0 0 14px -8px var(--accent-neon-halo);
    transition: border-color 0.5s ease-in-out;
}
.cc-rebord::before, .cc-rebord::after {
    content: "";
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent-neon);
    box-shadow: 0 0 6px var(--accent-neon), 0 0 12px var(--accent-neon-halo);
}
.cc-rebord::before { top: -3px;    left: -3px; }
.cc-rebord::after  { bottom: -3px; right: -3px; }

/* En-tête : numéro (angle gauche) + emplacement du futur logo de classe (droite) */
.cc-entete {
    position: relative; z-index: 1;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 4px 4px 0;
}
.cc-num {
    font-family: 'Cinzel', serif;
    font-size: 1.9rem; font-weight: 900; line-height: 1;
    color: var(--accent-neon);
    text-shadow: 0 0 10px var(--accent-neon-halo), 0 0 20px var(--accent-neon-halo);
    padding: 4px 12px 6px;
    border: 1.5px solid var(--accent-neon);
    border-radius: 4px 14px 4px 14px;
    background: rgba(0, 0, 0, 0.16);
    transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
body.theme-light .cc-num { background: rgba(255, 255, 255, 0.16); }
.cc-logo {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--accent-neon);
    opacity: 0.55;
    display: grid; place-items: center;
    transition: border-color 0.5s ease-in-out;
}
.cc-logo::before {
    content: "✦";
    font-size: 17px;
    color: var(--accent-neon);
    transition: color 0.5s ease-in-out;
}

/* Grande zone réservée à la future illustration */
.cc-illus {
    position: relative; z-index: 1;
    flex: 1;
    margin: 12px 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 9px, transparent 9px 18px),
        radial-gradient(circle at 50% 38%, var(--accent-neon-halo), transparent 72%);
    opacity: 0.5;
}

/* Bandeau : petite barre séparateur (thème) + nom de la classe */
.cc-bandeau {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 0 4px;
}
.cc-sep {
    flex-shrink: 0;
    width: 26px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-neon), transparent);
    box-shadow: 0 0 6px var(--accent-neon-halo);
    transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.cc-nom {
    font-family: 'Cinzel', serif;
    font-size: 1.08rem; font-weight: 700; letter-spacing: 0.4px;
    color: var(--texte-principal);
}

/* Espace réservé à la description */
.cc-desc {
    position: relative; z-index: 1;
    margin: 10px 4px 2px;
    padding: 10px 12px;
    min-height: 60px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.78rem; line-height: 1.5;
    color: var(--texte-principal);
    opacity: 0.7;
}
body.theme-light .cc-desc { background: rgba(255, 255, 255, 0.16); }

/* Face arrière */
.carte-face.arriere .cc-rebord { inset: 9px; }
.carte-face.arriere .cc-nom { font-size: 1.3rem; }
.carte-face.arriere .cc-sep { width: 48px; }
.carte-face.arriere p {
    font-size: 0.88rem; line-height: 1.6;
    color: var(--texte-principal);
    opacity: 0.85;
    max-width: 210px;
}

/* =============================================================
   CARTE DE CLASSE : illustration plein cadre (recto) + fiche au dos
   Rempli par moduleClassesRaces() dans script.js (tableau CLASSES).
============================================================= */
/* --- RECTO : l'image occupe toute la carte, sous les décorations --- */
.cc-photo {
    position: absolute; inset: 0;
    z-index: 0;                 /* sous le rebord/rivets (z1) et le balayage holo (z2) */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.cc-photo::after {   /* voile dégradé -> numéro (haut) et nom (bas) restent lisibles */
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(6,3,16,0.92) 0%, rgba(6,3,16,0.32) 34%, rgba(6,3,16,0) 56%),
        linear-gradient(to bottom, rgba(6,3,16,0.55) 0%, rgba(6,3,16,0) 24%);
}
body.theme-light .cc-photo::after {
    background:
        linear-gradient(to top, rgba(28,11,3,0.90) 0%, rgba(28,11,3,0.30) 34%, rgba(28,11,3,0) 56%),
        linear-gradient(to bottom, rgba(28,11,3,0.45) 0%, rgba(28,11,3,0) 24%);
}
/* quand une image est posée : on cache la zone-placeholder et on cale le nom en bas */
.carte-classe.cc-a-image .cc-illus { display: none; }
.carte-classe.cc-a-image .carte-face.avant .cc-bandeau { margin-top: auto; }
.carte-classe.cc-a-image .carte-face.avant .cc-nom { text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.carte-classe.cc-a-image .carte-face.avant .cc-desc {
    background: transparent; border: 0; opacity: 0.95;
    min-height: 0; margin: 2px 4px 0; padding: 0 6px 2px;
    font-style: italic; font-size: 0.82rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
body.theme-light .carte-classe.cc-a-image .carte-face.avant .cc-desc { background: transparent; }

/* --- VERSO : description longue + blocs de règles (Tour / Passif / …) --- */
.carte-face.arriere.cc-verso-riche {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    gap: 6px;
    padding: 16px 12px 12px;
}
.carte-face.arriere.cc-verso-riche .cc-nom {
    align-self: center;
    font-size: 1.12rem;   /* un peu plus compact que le verso simple pour laisser la place au texte */
}
.carte-face.arriere.cc-verso-riche .cc-sep { align-self: center; width: 40px; }
.cc-verso {
    position: relative; z-index: 1;
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding-right: 5px;
    display: flex; flex-direction: column; gap: 8px;
    /* PAS de mask-image ici : un mask-image sur un élément overflow:auto/scroll est
       un bug Chrome connu qui empêche justement le défilement à la MOLETTE (le
       scroll reste possible au clic-glissé ou en JS, ce qui rendait le bug trompeur
       à diagnostiquer). Le fondu de bas de carte est refait via .cc-verso-fondu
       (un vrai calque séparé, non scrollable, pointer-events:none) plus bas. */
    /* .cc-verso vit dans une carte qui bascule en 3D (.carte-classe-inner a
       transform-style:preserve-3d, .carte-face a backface-visibility:hidden).
       Chrome classe alors mal toute la zone de CONTENU comme "défilable à la
       molette seulement via le compositor" -> la molette ne déclenche RIEN sauf
       exactement sur la scrollbar native (chemin différent). Fix : on sort
       .cc-verso de ce contexte 3D en lui donnant son propre calque de rendu,
       "à plat", indépendant de la matrice 3D du parent -> la molette redevient
       normale sur toute la carte, pas juste sur la scrollbar. */
    transform: translateZ(0);
    transform-style: flat;
    will-change: transform;
}
.cc-verso::-webkit-scrollbar { width: 5px; }
.cc-verso::-webkit-scrollbar-thumb { background: var(--accent-neon-halo); border-radius: 3px; }
/* fondu de bas de carte (remplace l'ancien mask-image) : calque séparé posé PAR-DESSUS
   .cc-verso (jamais scrollé lui-même), visible uniquement sur les dos "riches" */
.cc-verso-fondu {
    display: none;
    position: absolute; left: 12px; right: 17px; bottom: 12px; height: 22px;
    background: linear-gradient(to bottom, transparent, var(--fond-box) 85%);
    pointer-events: none; z-index: 2;
}
.carte-face.arriere.cc-verso-riche .cc-verso-fondu { display: block; }
.cc-verso-p {
    margin: 0;
    font-size: 0.74rem; line-height: 1.46;
    color: var(--texte-principal); opacity: 0.9;
}
.cc-meca {
    border: 1px solid var(--accent-neon);
    border-radius: 9px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.22);
}
body.theme-light .cc-meca { background: rgba(255, 255, 255, 0.18); }
.cc-meca-titre {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px;
    color: var(--accent-neon);
    text-shadow: 0 0 8px var(--accent-neon-halo);
    margin-bottom: 2px;
}
.cc-meca p { margin: 0; font-size: 0.71rem; line-height: 1.42; opacity: 0.9; }
/* dernier bloc : petite marge pour que le fondu ne masque pas la dernière ligne */
.cc-verso > :last-child { margin-bottom: 14px; }

/* =============================================================
   IMAGE DU DISQUE DE MUSIQUE (adaptée au thème, avec fondu)
   bell-sombre.png en thème sombre / bell-clair.png en thème clair
============================================================= */
.disque-visage {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: -1;                 /* sur la face du disque, sous les anneaux et le point central */
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
.disque-visage-sombre { background-image: url('images/bell-sombre.png'); }
.disque-visage-clair  { background-image: url('images/bell-clair.png'); }
body.theme-dark  .disque-visage-sombre { opacity: 1; }
body.theme-light .disque-visage-clair  { opacity: 1; }

/* =============================================================
   SÉPARATEURS "FLAMME" (bannière ↔ cartes ↔ bas de page)
   fine ligne néon dégradée dont les bouts se consument
============================================================= */
.separateur-flamme {
    position: relative;
    width: min(560px, 82%);
    height: 34px;
    margin: 22px auto;   /* un cran de plus : laisse la place au chat au-dessus des box */
}
/* la ligne néon dégradée : ses extrémités "brûlent" via un masque animé */
.separateur-flamme::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-neon-halo) 12%,
        var(--accent-neon) 30%,
        rgba(255, 255, 255, 0.85) 50%,
        var(--accent-neon) 70%,
        var(--accent-neon-halo) 88%,
        transparent 100%);
    filter: drop-shadow(0 0 4px var(--accent-neon)) drop-shadow(0 0 10px var(--accent-neon-halo));
    -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) center / 260% 100% no-repeat;
            mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) center / 260% 100% no-repeat;
    animation: flammeRespire 3.4s ease-in-out infinite;
    transition: background 0.5s ease-in-out, filter 0.5s ease-in-out;
}
/* halo diffus, comme la chaleur d'une flamme */
.separateur-flamme::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 12px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse 55% 120% at 50% 50%, var(--accent-neon-halo), transparent 70%);
    filter: blur(3px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent) center / 210% 100% no-repeat;
            mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent) center / 210% 100% no-repeat;
    animation: flammeRespire 2.7s ease-in-out infinite reverse;
    opacity: 0.6;
}
@keyframes flammeRespire {
    0%, 100% { -webkit-mask-size: 260% 100%; mask-size: 260% 100%; opacity: 0.65; }
    50%      { -webkit-mask-size: 148% 100%; mask-size: 148% 100%; opacity: 1; }
}
/* petites langues de feu qui montent et s'éteignent */
.separateur-flamme .flammeche {
    position: absolute;
    bottom: 50%;
    width: 5px; height: 5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: var(--accent-neon);
    box-shadow: 0 0 6px var(--accent-neon), 0 0 12px var(--accent-neon-halo);
    opacity: 0;
    animation: langueFlamme 2.6s ease-in-out infinite;
    transition: background 0.5s ease-in-out;
}
.separateur-flamme .flammeche:nth-child(1) { left: 38%; animation-delay: 0s; }
.separateur-flamme .flammeche:nth-child(2) { left: 50%; animation-delay: 0.9s; }
.separateur-flamme .flammeche:nth-child(3) { left: 62%; animation-delay: 1.7s; }
@keyframes langueFlamme {
    0%   { opacity: 0;   transform: translateY(0) scale(0.6); }
    28%  { opacity: 0.9; }
    70%  { opacity: 0.5; transform: translateY(-14px) scale(1); }
    100% { opacity: 0;   transform: translateY(-24px) scale(0.25); }
}
body.anim-reduites .separateur-flamme::before,
body.anim-reduites .separateur-flamme::after { animation: none !important; }
body.anim-reduites .separateur-flamme .flammeche { display: none !important; }

/* =============================================================
   APPARITION / DISPARITION FLUIDE DU CONTENU AU DÉFILEMENT
============================================================= */
.sr {
    /* apparition/disparition = surtout un FONDU, avec un léger glissement.
       Même courbe douce que les cartes de la page Création de personnage.
       !important : indispensable car les blocs "carte-hud-divine" / "banniere-divine"
       imposent leur propre transition en !important (fondu de thème) — on la reprend
       ici pour garder le fondu de thème ET obtenir la révélation au défilement. */
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        background-image 0.5s ease-in-out,
        background-color 0.5s ease-in-out,
        color 0.5s ease-in-out,
        border-color 0.5s ease-in-out,
        box-shadow 0.5s ease-in-out !important;
    backface-visibility: hidden;
}
.sr-cache      { opacity: 0; transform: translate3d(0, 18px, 0); }
.sr-cache-haut { opacity: 0; transform: translate3d(0, -18px, 0); }
.sr-cache-bas  { opacity: 0; transform: translate3d(0, 18px, 0); }
body.anim-reduites .sr { transition: none !important; }
body.anim-reduites .sr-cache,
body.anim-reduites .sr-cache-haut,
body.anim-reduites .sr-cache-bas { opacity: 1 !important; transform: none !important; }

/* =============================================================
   ROUE RADIALE (EXPÉRIMENTALE) — coin haut-gauche
============================================================= */
/* on masque les 2 anciens boutons du coin (sommaire + roue des paramètres) ;
   ils restent dans la page et pilotables par la roue radiale.
   visibility (et non display) : la barre de recherche garde sa position d'origine. */
body.roue-radiale-active .btn-menu-toggle { visibility: hidden !important; pointer-events: none; }
body.roue-radiale-active .roue-parametres { display: none !important; }
body.roue-radiale-active #panneau-parametres { position: fixed; top: 74px; left: 18px; }

.roue-radiale {
    position: fixed;
    top: 16px; left: 16px;
    width: 48px; height: 48px;
    z-index: 99990;
}

/* petites particules (couleur du thème) autour du noyau quand la roue est fermée */
.roue-particule {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle, #fff 0%, var(--particule-couleur, var(--accent-neon)) 35%, transparent 80%);
    box-shadow: 0 0 6px var(--particule-couleur, var(--accent-neon)), 0 0 11px var(--particule-couleur, var(--accent-neon));
}
/* le noyau : petit bouton central rond, néon léger */
.roue-noyau {
    position: absolute;
    inset: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;   /* aucun fond derrière la cloche, dans les 2 thèmes */
    border: 2px solid var(--accent-neon);
    box-shadow: 0 0 12px -2px var(--accent-neon-halo);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.5s ease-in-out;
    z-index: 3;
}
.roue-radiale.ouverte .roue-noyau {
    box-shadow: 0 0 20px 1px var(--accent-neon-halo), inset 0 0 9px rgba(0, 0, 0, 0.35);
}
/* grossissement immédiat quand on survole la roue */
.roue-radiale:hover .roue-noyau {
    transform: scale(1.09);
    box-shadow: 0 0 18px 0 var(--accent-neon-halo), inset 0 0 9px rgba(0, 0, 0, 0.35);
}

/* la cloche : halo néon TRÈS léger pour bien voir le dessin */
.roue-noyau-ic { position: relative; width: 26px; height: 26px; display: block; }
.rn-cloche {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 0 1.5px var(--accent-neon-halo));
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}
body.theme-dark  .rn-cloche-sombre { opacity: 1; }
body.theme-light .rn-cloche-clair  { opacity: 1; }
/* thème vert (Konami) : cloche verte, mêmes effets ; masque les 2 autres */
body.theme-vert  .rn-cloche-sombre,
body.theme-vert  .rn-cloche-clair  { opacity: 0; }
body.theme-vert  .rn-cloche-vert   { opacity: 1; }

/* 2e anneau néon segmenté qui tourne en sens inverse (effet "disque") */
.roue-noyau-anneau {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        var(--accent-neon) 0 13%, transparent 13% 24%,
        var(--accent-neon) 24% 45%, transparent 45% 55%,
        var(--accent-neon) 55% 79%, transparent 79% 89%,
        var(--accent-neon) 89% 100%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 3px var(--accent-neon-halo)) drop-shadow(0 0 7px var(--accent-neon-halo));
    animation: roueAnneauInv 7s linear infinite;
}
@keyframes roueAnneauInv { to { transform: rotate(-360deg); } }
body.anim-reduites .roue-noyau-anneau { animation: none !important; }

/* anneaux décoratifs "règle HUD" qui grandissent à l'ouverture */
.roue-anneaux { position: absolute; inset: 0; pointer-events: none; }
.roue-cercle {
    position: absolute;
    left: 50%; top: 50%;
    border-radius: 50%;
    border: 1.5px solid var(--accent-neon-halo);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    transition: transform 0.55s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease, border-color 0.5s ease-in-out;
}
/* plus petits et plus nombreux, on garde l'opacité */
.roue-cercle-1 { width: 84px;  height: 84px;  }
.roue-cercle-2 { width: 118px; height: 118px; }
.roue-cercle-3 { width: 152px; height: 152px; border-style: dashed; }
.roue-cercle-4 { width: 188px; height: 188px; }
.roue-cercle-5 { width: 226px; height: 226px; border-style: dashed; }
.roue-cercle-6 { width: 266px; height: 266px; }
.roue-radiale.ouverte .roue-cercle { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
.roue-radiale.ouverte .roue-cercle-2 { transition-delay: 0.03s; opacity: 0.42; }
.roue-radiale.ouverte .roue-cercle-3 { transition-delay: 0.06s; opacity: 0.34; animation: roueTourneLent 26s linear infinite; }
.roue-radiale.ouverte .roue-cercle-4 { transition-delay: 0.09s; opacity: 0.3; }
.roue-radiale.ouverte .roue-cercle-5 { transition-delay: 0.12s; opacity: 0.26; animation: roueTourneLentInv 34s linear infinite; }
.roue-radiale.ouverte .roue-cercle-6 { transition-delay: 0.15s; opacity: 0.22; }
@keyframes roueTourneLent    { to { rotate: 360deg; } }
@keyframes roueTourneLentInv { to { rotate: -360deg; } }
body.anim-reduites .roue-cercle-3,
body.anim-reduites .roue-cercle-5 { animation: none !important; }

/* les items : partent du centre et se déploient en éventail (--x / --y calculés en JS) */
.roue-items { position: absolute; inset: 0; pointer-events: none; }
.roue-item {
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--accent-neon);
    background: transparent;              /* plus de pastille "blanche" derrière l'icône */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: var(--texte-principal);
    cursor: pointer;
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
    box-shadow: 0 0 10px -2px var(--accent-neon-halo);
    transition: transform 0.38s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.26s ease,
                box-shadow 0.2s ease, filter 0.2s ease, border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
/* La roue se déploie D'ABORD (les cercles), PUIS les icônes surgissent une à une —
   mais SANS temps mort : la 1re part quasi tout de suite, cascade rapide et fluide. */
.roue-radiale.ouverte .roue-item {
    opacity: 1;
    transform: translate(var(--x), var(--y)) scale(1);
    pointer-events: auto;
    transition-delay: calc(0.1s + var(--i) * 0.055s), calc(0.1s + var(--i) * 0.055s), 0s, 0s, 0s, 0s;
}
/* fermeture : tout se replie vite, sans attente */
.roue-radiale:not(.ouverte) .roue-item { transition-delay: 0s; }

.roue-item-ic { display: flex; line-height: 0; }
.roue-item-ic svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: var(--accent-neon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px var(--accent-neon-halo));
    transition: stroke 0.5s ease-in-out;
}
/* survol : l'aura s'allume TOUT DE SUITE (pas de scale = pas de sensation de latence) */
.roue-item:hover {
    box-shadow: 0 0 18px 1px var(--accent-neon-halo), 0 0 30px -4px var(--accent-neon-halo), inset 0 0 6px rgba(0, 0, 0, 0.3);
    filter: brightness(1.25);
    z-index: 2;
}
/* étiquette au survol */
.roue-item::after {
    content: attr(data-txt);
    position: absolute;
    left: 50%; top: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 3px 7px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
    white-space: nowrap;
    border-radius: 6px;
    background: var(--fond-carte);
    border: 1px solid var(--accent-neon);
    color: var(--texte-principal);
    box-shadow: 0 0 10px -3px var(--accent-neon-halo);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.roue-item:hover::after { opacity: 1; }

/* Roue déployée ALORS QUE le sommaire est ouvert :
   on ENTAILLE le haut-gauche du sommaire en suivant exactement le cercle de la roue,
   le contenu descend sous l'entaille, et les icônes de la roue passent devant. */
body.roue-ouverte #roue-radiale { z-index: 1000000; }

/* --notch-r animable -> l'entaille GRANDIT et RÉTRÉCIT en douceur (pas de saut). */
@property --notch-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Tant que la roue est ouverte (sommaire en cours d'ouverture OU de fermeture) :
   le masque d'entaille est en place, mais son rayon vaut 0 par défaut (aucune entaille). */
body.roue-ouverte.menu-ouvert .menu-lateral,
body.roue-ouverte .menu-lateral.menu-en-fermeture.menu-lateral {
    --notch-cx: 20px;
    --notch-cy: -76px;
    --notch-r: 0px;
    --notch-flou: 22px;
    margin-top: 0 !important;
    padding: 132px 20px 25px 20px !important;
    -webkit-mask-image:
        radial-gradient(circle var(--notch-r) at var(--notch-cx) var(--notch-cy), transparent 0 calc(var(--notch-r) - var(--notch-flou)), #000 var(--notch-r)),
        linear-gradient(to bottom, transparent 0, #000 30px);
            mask-image:
        radial-gradient(circle var(--notch-r) at var(--notch-cx) var(--notch-cy), transparent 0 calc(var(--notch-r) - var(--notch-flou)), #000 var(--notch-r)),
        linear-gradient(to bottom, transparent 0, #000 30px);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    transition: padding 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.7s cubic-bezier(0.25, 1, 0.5, 1),
                --notch-r 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease-in-out !important;
}
/* Sommaire PLEINEMENT ouvert + roue ouverte : le rayon monte à 190 -> l'entaille apparaît en fondu */
body.roue-ouverte.menu-ouvert .menu-lateral {
    --notch-r: 190px;
    height: 730px !important;
}
/* FERMETURE (roue ouverte) : l'entaille RESTE pleine pendant que le sommaire se replie,
   il disparaît donc en gardant sa forme, sans jamais redevenir rectangulaire. */
body.roue-ouverte .menu-lateral.menu-en-fermeture.menu-lateral {
    --notch-r: 190px;
    transition: height 0.44s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.44s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.36s ease-in-out !important;
}

/* =============================================================
   BARRE DE RECHERCHE DU HAUT : nette tout en haut de la page,
   elle se fond dans le décor quand on descend (revient nette au survol)
============================================================= */
.barre-outils .zone-recherche {
    /* centrée sur la page (sortie du flux flex) */
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    transition: filter 0.4s ease, opacity 0.4s ease,
                background-image 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
body.page-defilee .barre-outils .zone-recherche {
    filter: blur(2.4px) saturate(0.9);
    opacity: 0.4;
}
body.page-defilee .barre-outils .zone-recherche:hover,
body.page-defilee .barre-outils .zone-recherche:focus-within {
    filter: none;
    opacity: 1;
}
body.anim-reduites .barre-outils .zone-recherche { transition: opacity 0.4s ease; }
body.anim-reduites.page-defilee .barre-outils .zone-recherche { filter: none; opacity: 0.55; }

/* =============================================================
   SUGGESTIONS DE RECHERCHE (sous la barre du haut)
============================================================= */
.recherche-suggestions {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    width: 100%;
    z-index: 200000;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    border-radius: 16px;
    background: var(--recherche-fond, var(--fond-carte));
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6), 0 0 18px -4px var(--accent-neon-halo);
    transform-origin: top center;
    overflow: hidden;
    animation: sugDeroule 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.recherche-suggestions[hidden] { display: none !important; }
@keyframes sugDeroule {
    from { opacity: 0; transform: translateY(-8px) scaleY(0.7); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.recherche-suggestions .rs-item { animation: sugItem 0.28s ease backwards; }
.recherche-suggestions .rs-item:nth-child(1) { animation-delay: 0.03s; }
.recherche-suggestions .rs-item:nth-child(2) { animation-delay: 0.06s; }
.recherche-suggestions .rs-item:nth-child(3) { animation-delay: 0.09s; }
.recherche-suggestions .rs-item:nth-child(4) { animation-delay: 0.12s; }
.recherche-suggestions .rs-item:nth-child(5) { animation-delay: 0.15s; }
.recherche-suggestions .rs-item:nth-child(6) { animation-delay: 0.18s; }
.recherche-suggestions .rs-item:nth-child(7) { animation-delay: 0.21s; }
.recherche-suggestions .rs-item:nth-child(8) { animation-delay: 0.24s; }
@keyframes sugItem {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.anim-reduites .recherche-suggestions,
body.anim-reduites .recherche-suggestions .rs-item { animation: none !important; }
.rs-item {
    -webkit-appearance: none; appearance: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%;
    padding: 7px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--texte-principal);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.rs-item:hover, .rs-item.actif {
    background: var(--accent-neon-halo);
    color: #fff;
}
body.theme-light .rs-item:hover, body.theme-light .rs-item.actif { color: #2a1400; }
.rs-txt { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px; }
.rs-sous { font-size: 0.66rem; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.4px; }

/* flash rouge si la recherche "Entrée" ne trouve rien */
.zone-recherche.recherche-vide { animation: rechercheVide 0.5s ease; }
@keyframes rechercheVide {
    0%, 100% { box-shadow: 0 0 12px 1px var(--recherche-lueur); }
    50%      { box-shadow: 0 0 14px 3px #ff4d4d; }
}

/* =============================================================
   PARTICULES DU BOUTON DE THÈME (aura lune / étincelles flamme)
============================================================= */
.switch-particule {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, var(--pc, var(--switch-neon)) 0%, transparent 78%);
    box-shadow: 0 0 5px var(--pc, var(--switch-neon));
}

/* Bouton "aléatoire" du lecteur : icône au trait (comme la boucle) */
#musique-aleatoire svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Page Création : quand le sommaire est ouvert, le contenu se décale pour
   ne rien laisser sous le panneau (ni bannière ni cartes) */
/* La page Création se comporte comme les autres (centrée, pas de décalage
   quand le sommaire s'ouvre : le sommaire translucide passe simplement par-dessus le bord). */

/* Panneau des PARAMÈTRES ouvert avec la roue : même entaille arrondie que le sommaire,
   pour ne pas empiéter sur la roue */
body.roue-ouverte #panneau-parametres:not([hidden]) {
    --pn-r: 182px;
    -webkit-mask-image: radial-gradient(circle var(--pn-r) at 22px -40px, transparent 0 calc(var(--pn-r) - 20px), #000 var(--pn-r));
            mask-image: radial-gradient(circle var(--pn-r) at 22px -40px, transparent 0 calc(var(--pn-r) - 20px), #000 var(--pn-r));
    padding-top: 132px;
}

/* =============================================================
   PAGE DE GARDE : connexion Discord OBLIGATOIRE
============================================================= */
.gate-connexion {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-neon) 22%, transparent), transparent 55%),
        var(--fond-wiki, #0e071b);
}
body.non-connecte { overflow: hidden; }
body.non-connecte .gate-connexion { display: flex; }
.gate-carte {
    max-width: 420px;
    width: 100%;
    text-align: center;
    padding: 38px 30px 30px;
    border-radius: 24px;
    border: 2px solid var(--accent-neon);
    background: var(--fond-carte);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 40px -8px var(--accent-neon-halo);
    animation: gateApparait 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gateApparait { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.gate-emblem {
    font-size: 2.6rem;
    color: var(--accent-neon);
    text-shadow: 0 0 16px var(--accent-neon-halo), 0 0 34px var(--accent-neon-halo);
    margin-bottom: 6px;
}
.gate-carte h2 { font-size: 1.4rem; margin-bottom: 10px; color: var(--accent-neon); }
.gate-carte p { font-size: 0.92rem; line-height: 1.55; opacity: 0.88; }
.gate-btn {
    margin: 20px auto 6px;
    font-size: 0.9rem;
    padding: 12px 20px;
}
.gate-note { font-size: 0.72rem; opacity: 0.5; margin-top: 8px; }

/* =============================================================
   ÉCRAN D'INTRO « GALAXIE » (avant la connexion) — toujours violet
============================================================= */
.intro-galaxie {
    position: fixed; inset: 0;
    z-index: 2147483601;
    display: flex; align-items: center; justify-content: center;
    padding: 30px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #1a0b33 0%, #0c0620 55%, #05030f 100%);
    transition: opacity 1.1s ease;
}
/* nébuleuse : 2 couches de dégradés violets qui DÉRIVENT nettement.
   PERF : on n'anime QUE `transform` (composité GPU) — pas de `filter` (repaint coûteux).
   Chaque couche est promue sur son propre calque. */
.intro-nebuleuse {
    position: absolute; inset: -55%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 44% 36% at 30% 28%, rgba(150, 70, 245, 0.5), transparent 60%),
        radial-gradient(ellipse 50% 42% at 74% 72%, rgba(220, 85, 255, 0.42), transparent 62%),
        radial-gradient(ellipse 38% 52% at 55% 45%, rgba(95, 48, 200, 0.34), transparent 65%);
    animation: introNebuleuse 30s linear infinite alternate;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* 2e couche, contre-mouvement plus lent -> parallaxe visible */
.intro-nebuleuse::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 40% 34% at 68% 24%, rgba(180, 90, 255, 0.4), transparent 60%),
        radial-gradient(ellipse 46% 40% at 24% 74%, rgba(120, 55, 220, 0.34), transparent 62%);
    animation: introNebuleuse2 38s linear infinite alternate;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
@keyframes introNebuleuse {
    0%   { transform: translate3d(-9%, -6%, 0)  scale(1); }
    50%  { transform: translate3d(10%, 8%, 0)   scale(1.28); }
    100% { transform: translate3d(-6%, 11%, 0)  scale(1.12); }
}
@keyframes introNebuleuse2 {
    0%   { transform: translate3d(8%, 5%, 0)    scale(1.15); }
    50%  { transform: translate3d(-11%, -7%, 0) scale(1); }
    100% { transform: translate3d(6%, -9%, 0)   scale(1.22); }
}
body.anim-reduites .intro-nebuleuse,
body.anim-reduites .intro-nebuleuse::after { animation: none; }
.intro-etoiles {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.intro-contenu {
    position: relative; z-index: 2;
    max-width: 640px; text-align: center;
    color: #f0e6ff;
}
.intro-texte {
    font-family: 'Cinzel', 'Montserrat', serif;
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    line-height: 1.7;
    text-shadow: 0 0 18px rgba(180, 110, 255, 0.6), 0 0 40px rgba(150, 80, 240, 0.4);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 2.4s ease, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-texte strong { color: #d9a6ff; }
.intro-texte.vu { opacity: 1; transform: none; }
.intro-btn {
    margin-top: 34px;
    -webkit-appearance: none; appearance: none;
    padding: 13px 30px;
    font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.5px;
    color: #fff; cursor: pointer;
    border-radius: 40px;
    border: 1.5px solid #c98cff;
    background: linear-gradient(135deg, rgba(150, 70, 240, 0.4), rgba(90, 40, 170, 0.4));
    box-shadow: 0 0 24px -4px rgba(180, 110, 255, 0.7), inset 0 0 18px -8px rgba(220, 170, 255, 0.8);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, background 0.25s ease;
}
.intro-btn.vu { opacity: 1; transform: none; }
.intro-btn:hover {
    background: linear-gradient(135deg, rgba(170, 90, 255, 0.55), rgba(110, 50, 200, 0.55));
    box-shadow: 0 0 32px 0 rgba(200, 130, 255, 0.8), inset 0 0 20px -6px rgba(230, 190, 255, 0.9);
}
/* sortie : le texte + le bouton s'effacent lentement */
.intro-galaxie.intro-sortie .intro-texte,
.intro-galaxie.intro-sortie .intro-btn {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* ---- message d'accueil : bloc qui s'efface en fondu quand on clique « prêt·e » ---- */
.intro-accueil { transition: opacity 0.85s ease, transform 0.85s ease; }
.intro-accueil.intro-part { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* ---- scène : la fée « l'Oracle » + la conversation ---- */
.intro-scene { display: flex; flex-direction: column; align-items: center; }
.intro-fee {
    /* réglages : taille + teinte violette de la fée + force du halo */
    --fee-taille: clamp(150px, 24vw, 240px);   /* largeur du cadre webp (800×450) */
    --fee-hue: 0deg;           /* nudge de teinte (+ vers le rose, - vers le bleu) autour du violet */
    --fee-sat: 1.3;            /* saturation */
    --fee-halo: 0;             /* halo néon (0 = aucun ; le fondu de la fée vient du blend-mode) */
    position: relative;
    opacity: 0; transform: translateY(10px) scale(0.9);
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 6px;
    /* idle "vivant" : 3 mouvements de périodes différentes -> jamais mécanique */
    animation: introFeeFlotte 5.2s ease-in-out infinite,
               introFeeRespire 3.7s ease-in-out infinite,
               introFeeTangue  8.1s ease-in-out infinite;
    will-change: transform, translate, rotate, scale;
}
.intro-fee.vu { opacity: 1; transform: none; }
.intro-fee.intro-fee-vide { display: none; }   /* gif absent -> on garde la conversation seule */
@keyframes introFeeFlotte {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}
@keyframes introFeeRespire {
    0%, 100% { scale: 1; }
    50%      { scale: 1.045; }
}
@keyframes introFeeTangue {
    0%, 100% { rotate: -2.2deg; translate: -3px 0; }
    50%      { rotate:  2.2deg; translate:  3px 0; }
}
body.anim-reduites .intro-fee { animation: none; }
.intro-fee-img {
    width: var(--fee-taille, clamp(150px, 24vw, 240px)); height: auto; display: block;
    /* mix-blend-mode: screen -> sur le fond violet foncé de l'intro, les pixels sombres
       (le léger voile de compression du webp dans la zone "transparente") disparaissent,
       seule la lueur de la fée ressort. Fini le rectangle qu'on voyait derrière elle. */
    mix-blend-mode: screen;
    /* teinte plus VIOLETTE, sans booster la luminosité (sinon le voile ressortirait) */
    filter:
        sepia(0.24)
        hue-rotate(calc(210deg + var(--fee-hue)))
        saturate(var(--fee-sat))
        drop-shadow(0 0 5px rgba(190, 120, 255, calc(var(--fee-halo) * 0.85)))
        drop-shadow(0 0 14px rgba(150, 85, 235, calc(var(--fee-halo) * 0.4)));
}
/* si jamais le blend rend la fée trop pâle, repasse ici en "normal" :
   .intro-fee-img { mix-blend-mode: normal; } et remonte --fee-halo à ~0.4 */
.intro-dialogue {
    max-width: 600px;
    opacity: 0; transform: translateY(14px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-dialogue.vu { opacity: 1; transform: none; }
.intro-dialogue.sortie {
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro-dlg-texte {
    font-family: 'Cinzel', 'Montserrat', serif;
    font-size: clamp(1rem, 2.2vw, 1.32rem);
    line-height: 1.7;
    color: #f0e6ff;
    text-shadow: 0 0 16px rgba(180, 110, 255, 0.55), 0 0 34px rgba(150, 80, 240, 0.35);
    margin: 0;
}
.intro-dlg-texte strong { color: #e0b8ff; }
.intro-dlg-btn {
    margin-top: 26px;
    opacity: 1;            /* c'est le bloc .intro-dialogue qui gère le fondu */
    transform: none;
    animation: none;
}
/* phase "décor" : le message est parti, les ÉTOILES RESTENT en fond DERRIÈRE la gate,
   les clics vont à la box de connexion qui apparaît par-dessus. */
.intro-galaxie.intro-fond {
    pointer-events: none;
    z-index: 2147483599;   /* sous #gate-connexion (2147483600) */
}
.intro-galaxie.intro-fond .intro-contenu { display: none; }

/* phase 1 (message de bienvenue) : la box de connexion est masquée */
body.intro-active { overflow: hidden; }
body.intro-active #gate-connexion { opacity: 0 !important; pointer-events: none !important; }

/* phase 2 : la box de connexion APPARAÎT EN FONDU TRANQUILLE sur le fond étoilé */
body.intro-gate { overflow: hidden; }
body.intro-gate #gate-connexion {
    background: transparent !important;         /* on voit les étoiles derrière */
    opacity: 1;
    transition: opacity 1.4s ease;
}
body.intro-gate #gate-connexion .gate-carte {
    animation: gateApparaitDoux 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 30px 80px -22px rgba(0, 0, 0, 0.75), 0 0 44px -6px rgba(180, 110, 255, 0.55);
}
@keyframes gateApparaitDoux {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
#gate-connexion { transition: opacity 1.4s ease, background 0.6s ease; }

/* fin : tout le voile (étoiles comprises) disparaît -> arrivée sur le site */
.intro-galaxie.intro-fin { opacity: 0; pointer-events: none; }
/* arrivée en douceur sur le site après connexion */
body.arrivee-douce .donjon-container,
body.arrivee-douce .barre-outils,
body.arrivee-douce .menu-lateral,
body.arrivee-douce .lecteur-musique,
body.arrivee-douce .roue-radiale {
    animation: arriveeDouce 1.3s ease both;
}
@keyframes arriveeDouce { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.anim-reduites .intro-texte,
body.anim-reduites .intro-btn { transition: opacity 0.3s ease; transform: none; }

/* =============================================================
   CONNEXION DISCORD (bouton + profil avec cadre animé)
============================================================= */
.zone-connexion { display: flex; align-items: center; }
.btn-discord {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    color: var(--accent-neon);
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.5s ease-in-out, color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.btn-discord[hidden] { display: none !important; }
.btn-discord svg { width: 18px; height: 18px; fill: currentColor; filter: drop-shadow(0 0 4px var(--accent-neon-halo)); }
.btn-discord:hover { transform: translateY(-1px); box-shadow: 0 0 12px -2px var(--accent-neon-halo); }
@media (max-width: 900px) { .btn-discord-txt { display: none; } .btn-discord { padding: 8px; } }

.profil-discord { position: relative; }
.profil-discord[hidden] { display: none !important; }
.profil-pastille {
    -webkit-appearance: none; appearance: none;
    width: 40px; height: 40px;
    padding: 0; border: none; background: none;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: grid; place-items: center;
}
.profil-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    background: var(--fond-carte);
}
/* cadre "énergie liquide" néon autour de l'avatar (façon anneau qui ondule) */
.profil-cadre {
    position: absolute; inset: -3px;
    border-radius: 50%;
    pointer-events: none;
}
/* halo multicolore diffus qui tourne et ondule (façon "aura" — cf. gif de référence) */
.profil-cadre::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 47% 53% 52% 48% / 50% 47% 53% 50%;
    background: conic-gradient(from 0deg,
        #7a2bff, #b455ff, #d94fd0, #9d6bff, #5b2be0, #c77dff, #7a2bff);
    filter: blur(7px) saturate(1.3);
    opacity: 0.85;
    z-index: -1;
    animation: cadreOndule 6s ease-in-out infinite, rotationHud 7s linear infinite;
}
body.theme-light .profil-cadre::before {
    background: conic-gradient(from 0deg,
        #ff7a2c, #ff3d55, #ffab35, #ffd76b, #ff5e3a, #ffc14d, #ff7a2c);
    opacity: 0.9;
}
/* fin liseré net qui redessine le bord de l'avatar */
.profil-cadre::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 55%, transparent);
    box-shadow: 0 0 8px -2px var(--accent-neon-halo);
}
@keyframes cadreOndule {
    0%, 100% { border-radius: 47% 53% 52% 48% / 50% 47% 53% 50%; }
    33%      { border-radius: 55% 45% 47% 53% / 44% 55% 45% 56%; }
    66%      { border-radius: 46% 54% 56% 44% / 56% 46% 54% 44%; }
}
body.anim-reduites .profil-cadre::before { animation: none !important; }

/* Le profil s'affiche CENTRÉ à l'écran, avec fondu — comme le Panel Admin. */
.profil-menu {
    position: fixed; inset: 0;
    z-index: 200001;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.profil-menu.ouvert { opacity: 1; pointer-events: auto; }
.profil-menu[hidden] { display: none !important; }
.profil-menu::before { display: none; }   /* plus de petite pointe : c'est une fenêtre centrée */
/* la fenêtre elle-même (contenu défilant) — grande, comme le Panel Admin */
.profil-menu-scroll {
    position: relative;
    width: min(620px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: var(--fond-carte);
    border: 2px solid var(--accent-neon);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.65), 0 0 26px -6px var(--accent-neon-halo);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Badges pleine largeur en haut ; puis Notifications | Boîte de messages ; puis Testeur Staff pleine largeur */
.profil-menu-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.profil-menu-grille > .profil-bloc-badges,
.profil-menu-grille > .profil-role-test { grid-column: 1 / -1; }
/* les badges s'étalent bien sur toute la largeur */
.profil-bloc-badges .profil-badges { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 560px) { .profil-menu-grille { grid-template-columns: 1fr; } }
.profil-menu-scroll::-webkit-scrollbar { display: none; }
.profil-menu.ouvert .profil-menu-scroll { transform: translateY(0) scale(1); }
body.anim-reduites .profil-menu { transition: opacity 0.12s ease; }
body.anim-reduites .profil-menu-scroll { transition: none; }
/* bouton de fermeture (comme le Panel Admin) */
.profil-menu-close {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center;
    border-radius: 8px; cursor: pointer;
    background: color-mix(in srgb, var(--accent-neon) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 35%, transparent);
    color: var(--accent-neon); font-size: 0.9rem; line-height: 1;
}
.profil-menu-close:hover { background: color-mix(in srgb, var(--accent-neon) 22%, transparent); }
.profil-menu-nom {
    padding: 6px 10px 8px;
    font-size: 0.74rem; font-weight: 700;
    color: var(--accent-neon);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 25%, transparent);
    margin-bottom: 4px;
}
.profil-menu-item {
    display: block; width: 100%;
    -webkit-appearance: none; appearance: none;
    text-align: left;
    padding: 8px 10px;
    border: none; background: none;
    border-radius: 9px;
    color: var(--texte-principal);
    font: inherit; font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.profil-menu-item:hover { background: color-mix(in srgb, var(--accent-neon) 16%, transparent); }
.profil-menu-item[hidden] { display: none; }
/* bouton Panel Admin : DANS le bloc « Testeur Staff », juste sous les rôles */
.profil-menu-admin {
    margin: 4px 0 12px;
    text-align: center;
    color: var(--accent-neon);
    font-weight: 800; letter-spacing: 0.5px;
    padding: 11px 14px;
    border: 1.5px solid var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 15%, transparent);
    box-shadow: 0 0 16px -4px var(--accent-neon-halo), inset 0 0 14px -9px var(--accent-neon);
}
.profil-menu-admin:hover {
    background: color-mix(in srgb, var(--accent-neon) 22%, transparent);
    border-color: var(--accent-neon);
}

/* titre néon DÉGRADÉ + CENTRÉ — « Testeur Staff » et l'en-tête des notifications */
.profil-titre-neon,
.cl-entete > span {
    text-align: center;
    opacity: 1;
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-neon) 60%, #fff) 0%,
        var(--accent-neon) 45%,
        color-mix(in srgb, var(--accent-neon) 55%, var(--texte-principal)) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 6px var(--accent-neon-halo));
}
.cl-entete { justify-content: center; }

/* bouton « Se déconnecter » : néon TRÈS vif (action importante), adapté au thème */
.profil-menu-quitter {
    margin-top: 8px;
    text-align: center;
    font-weight: 800; letter-spacing: 0.6px;
    color: #fff;
    border: 1.5px solid var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 26%, transparent);
    box-shadow: 0 0 16px -3px var(--accent-neon-halo), inset 0 0 14px -8px var(--accent-neon);
    text-shadow: 0 0 8px var(--accent-neon-halo);
}
.profil-menu-quitter:hover {
    background: color-mix(in srgb, var(--accent-neon) 38%, transparent);
    box-shadow: 0 0 22px -1px var(--accent-neon-halo), inset 0 0 16px -6px var(--accent-neon);
}
body.theme-light:not(.theme-vert) .profil-menu-quitter { color: #2a1400; }

/* =============================================================
   ACCUEIL : AVIS DE LA COMMUNAUTÉ (carrousel qui défile tout seul)
============================================================= */
.bloc-avis, .bloc-pleine-largeur { grid-column: 1 / -1; }

/* Annonces officielles + journal des mises à jour (accueil) */
.annonce-item { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 14%, transparent); }
.annonce-item:last-child { border-bottom: none; }
.annonce-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.annonce-tete strong { font-size: 0.86rem; color: var(--accent-neon); }
.annonce-tete span { font-size: 0.68rem; opacity: 0.6; }
.annonce-item p { margin-top: 3px; font-size: 0.8rem; line-height: 1.45; opacity: 0.9; }

.maj-item { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 12%, transparent); }
.maj-item:last-child { border-bottom: none; }
.maj-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.maj-date { font-size: 0.74rem; font-weight: 700; color: var(--accent-neon); }
.maj-v { font-size: 0.66rem; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-neon) 40%, transparent); opacity: 0.8; }
.maj-item ul { margin: 0; padding-left: 18px; }
.maj-item li { font-size: 0.8rem; line-height: 1.5; opacity: 0.9; }
.avis-piste-wrap {
    overflow: hidden;
    margin: 4px -6px 4px;
    padding: 18px 6px;          /* de la marge verticale pour que les cartes agrandies ne soient pas rognées */
    cursor: grab;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.avis-piste-wrap.glisse { cursor: grabbing; }
.avis-piste {
    display: flex;
    width: max-content;
    will-change: transform;
}
.avis-hint { font-size: 0.68rem; opacity: 0.5; margin-bottom: 12px; }
.avis-carte {
    flex: 0 0 auto;
    width: 258px;
    margin-right: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    /* contour dégradé animé + fond teinté (comme le panneau de filtre Aventuriers) */
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-size: 100% 100%, 320% 320%;
    animation: fluxMagiqueNaturel 8s ease infinite;
    box-shadow: inset 0 0 18px -12px var(--accent-neon);
    transition: box-shadow 0.18s ease, border-color 0.2s ease, transform 0.18s ease;
    transform-origin: center;
}
body.anim-reduites .avis-carte { animation: none; }
.avis-piste-wrap:not(.glisse) .avis-carte:hover {
    transform: scale(1.055);
    box-shadow: 0 0 18px -6px var(--accent-neon-halo), inset 0 0 16px -12px var(--accent-neon);
    border-color: var(--accent-neon);
    z-index: 2;
}
.avis-carte-txt { font-size: 0.82rem; line-height: 1.5; color: var(--texte-principal); opacity: 0.92; }
.avis-carte-nom { margin-top: 8px; font-size: 0.72rem; font-weight: 700; color: var(--accent-neon); }

/* pop + cœurs qui s'envolent au like */
.like-btn.pop { animation: likePop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes likePop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.coeur-vole {
    position: fixed;
    font-size: 15px;
    color: var(--accent-neon);
    text-shadow: 0 0 8px var(--accent-neon-halo);
    pointer-events: none;
    z-index: 2147483000;
    transform: translate(-50%, -50%);
}

.avis-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.avis-btn {
    -webkit-appearance: none; appearance: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--accent-neon);
    background: var(--accent-neon);
    color: #fff;
    font: inherit; font-size: 0.76rem; font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
body.theme-light .avis-btn { color: #2a1400; }
.avis-btn:hover { transform: translateY(-1px); box-shadow: 0 0 12px -2px var(--accent-neon-halo); }
.avis-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
/* les 3 boutons d'avis sont pleins (comme « Laisser un avis »), dans tous les thèmes */
.avis-btn-fantome { background: var(--accent-neon); color: #fff; }
body.theme-light .avis-btn-fantome { color: #2a1400; }

.avis-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.avis-form[hidden] { display: none; }
.avis-form textarea, .avis-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: var(--fond-carte);
    color: var(--texte-principal);
    font: inherit; font-size: 0.82rem;
    resize: vertical;
}
.avis-form textarea:focus, .avis-form input:focus { outline: none; border-color: var(--accent-neon); }
.avis-form-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.avis-form-info { font-size: 0.72rem; opacity: 0.7; }

/* =============================================================
   ESPACE STAFF
============================================================= */
#page-staff .staff-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: stretch;   /* toutes les box d'une rangée à la même hauteur */
}
/* box "liste" (bugs, signalements, journaux…) : hauteur bornée, contenu défilant */
#page-staff .staff-grille > .staff-box-liste {
    display: flex;
    flex-direction: column;
    max-height: 560px;
}
#page-staff .staff-box-liste .staff-liste-defilante {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;   /* c'est le flex qui borne, plus le max-height fixe */
}
/* rangée dédiée : « Sondage — créer/gérer » (étroit) + « Boîte de messages » (large),
   alignées et calées sur les blocs au-dessus, avec défilement interne. */
#page-staff .staff-formes-rangee {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* sondage et messages ~même largeur, plus larges */
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}
@media (max-width: 900px) { #page-staff .staff-formes-rangee { grid-template-columns: 1fr; } }
#page-staff .staff-formes-rangee-1col { grid-template-columns: 1fr; }
#page-staff .staff-box-forme {
    display: flex;
    flex-direction: column;
    max-height: 470px;                 /* plus court en hauteur (défile à l'intérieur) */
}
#page-staff .staff-box-forme > .staff-liste,
#page-staff .staff-box-forme > .staff-msg {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) transparent;
}
#page-staff .staff-box-forme > .staff-liste::-webkit-scrollbar,
#page-staff .staff-box-forme > .staff-msg::-webkit-scrollbar { width: 8px; }
#page-staff .staff-box-forme > .staff-liste::-webkit-scrollbar-thumb,
#page-staff .staff-box-forme > .staff-msg::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-neon) 70%, transparent); border-radius: 8px;
}
.staff-refus { text-align: center; padding: 60px 20px; }
.staff-refus h2 { margin-bottom: 10px; }
.staff-refus p { opacity: 0.75; }
.staff-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* listes longues (journal des avis, dossiers…) : défilement interne, la grille reste alignée */
.staff-liste-defilante {
    max-height: 440px;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) transparent;
}
.staff-liste-defilante::-webkit-scrollbar { width: 8px; }
.staff-liste-defilante::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-neon) 70%, transparent); border-radius: 8px; }
.staff-vide { opacity: 0.6; font-style: italic; font-size: 0.85rem; }

/* « Anciens dossiers » : petits onglets Plaintes / Sondages / Commentaires */
.staff-sous-onglets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.staff-sous-onglet {
    -webkit-appearance: none; appearance: none;
    flex: 1 1 auto; min-width: 0;
    padding: 6px 8px; border-radius: 8px;
    font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
    cursor: pointer; white-space: nowrap;
    color: var(--texte-principal);
    background: color-mix(in srgb, var(--accent-neon) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 26%, transparent);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.staff-sous-onglet:hover { background: color-mix(in srgb, var(--accent-neon) 15%, transparent); }
.staff-sous-onglet.actif {
    color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 17%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent-neon), 0 0 10px -5px var(--accent-neon-halo);
}
.staff-sous-pane[hidden] { display: none; }
.staff-sous-pane { display: flex; flex-direction: column; gap: 10px; }
/* résultats d'un sondage archivé */
.staff-arch-q { margin-top: 8px; font-size: 0.8rem; }
.staff-arch-q:first-child { margin-top: 4px; }
.staff-arch-q > strong { display: block; margin-bottom: 4px; }
.staff-arch-opt {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 0.76rem;
    background: color-mix(in srgb, var(--accent-neon) 8%, transparent);
}
.staff-arch-opt + .staff-arch-opt { margin-top: 3px; }
.staff-arch-opt span:last-child { opacity: 0.7; font-variant-numeric: tabular-nums; }
.staff-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-neon) 6%, var(--fond-carte));
    border: 1px solid color-mix(in srgb, var(--accent-neon) 26%, transparent);
}
.staff-item.traite { opacity: 0.55; }
.staff-item-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; margin-bottom: 6px; }
.staff-item-tete span { opacity: 0.6; font-size: 0.72rem; }
.staff-item p { font-size: 0.82rem; line-height: 1.5; color: var(--texte-principal); opacity: 0.9; }
.staff-item-bas { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.staff-de { font-size: 0.7rem; opacity: 0.55; }
.staff-mini {
    -webkit-appearance: none; appearance: none;
    padding: 5px 10px; margin-left: 6px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    background: transparent;
    color: var(--accent-neon);
    font: inherit; font-size: 0.7rem; font-weight: 700;
    cursor: pointer;
}
.staff-mini:hover { background: color-mix(in srgb, var(--accent-neon) 14%, transparent); }
.staff-mini-sup { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); }
.staff-item-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.staff-item-meta { font-size: 0.74rem; opacity: 0.75; margin-bottom: 4px; }
.staff-item.etat-traite { border-color: color-mix(in srgb, #4caf50 40%, transparent); }
.staff-item.etat-traite .staff-item-tete strong::after { content: " · traité"; color: #6fcf7f; font-weight: 600; font-size: 0.78rem; }

/* --- Menu profil : badges + notifications --- */
.profil-pastille-pastille {
    position: absolute; top: -2px; right: -2px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #ff4d4d;
    color: #fff;
    font-size: 9px; font-weight: 800; line-height: 15px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.7);
}
.profil-pastille-pastille[hidden] { display: none; }
.profil-menu-bloc { padding: 6px 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 18%, transparent); margin-bottom: 4px; }
.profil-menu-titre { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.6; margin-bottom: 5px; }
.profil-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge-chip {
    font-size: 0.68rem; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-neon) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    color: var(--texte-principal);
}
.profil-menu-bloc { padding: 8px 6px 10px; }
.profil-menu-nom { font-size: 0.8rem; }
.profil-badges { gap: 6px; }
.profil-notifs {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 168px; overflow-y: auto; padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) transparent;
}
.profil-notifs::-webkit-scrollbar { width: 6px; }
.profil-notifs::-webkit-scrollbar-thumb { background: var(--accent-neon); border-radius: 6px; }
.profil-notifs::-webkit-scrollbar-track { background: transparent; }

/* icônes des sections de l'espace staff (héritent de la couleur du thème) */
.box-title-ic {
    display: inline-flex; vertical-align: -3px; margin-right: 7px;
}
.box-title-ic svg {
    width: 17px; height: 17px;
    fill: none; stroke: var(--accent-neon); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 3px var(--accent-neon-halo));
}
.staff-item.log-item { opacity: 0.9; }
.staff-item.log-valide { border-color: color-mix(in srgb, #4caf50 45%, transparent); }
.staff-item.log-nonretenu { border-color: color-mix(in srgb, #9e9e9e 40%, transparent); opacity: 0.7; }
.staff-log-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.notif-ligne { font-size: 0.72rem; line-height: 1.4; padding: 5px 7px; border-radius: 7px; background: color-mix(in srgb, var(--accent-neon) 6%, transparent); opacity: 0.75; }
.notif-ligne.non-lu { opacity: 1; border-left: 2px solid var(--accent-neon); }
.profil-vide { font-size: 0.7rem; opacity: 0.55; font-style: italic; }

/* --- Boîte de messages (menu profil) : défile sans barre visible --- */
.profil-messages {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 150px; overflow-y: auto;
    scrollbar-width: none;
}
.profil-messages::-webkit-scrollbar { display: none; }
.message-ligne {
    font-size: 0.74rem; line-height: 1.4;
    padding: 7px 9px; border-radius: 9px;
    background: color-mix(in srgb, var(--accent-neon) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 16%, transparent);
    opacity: 0.82;
}
.message-ligne.non-lu { opacity: 1; border-color: var(--accent-neon); box-shadow: inset 3px 0 0 var(--accent-neon); }
.message-tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.message-tete strong { color: var(--accent-neon); font-size: 0.76rem; }
.message-tete span { font-size: 0.64rem; opacity: 0.6; flex-shrink: 0; }
.message-de { font-size: 0.64rem; opacity: 0.6; margin: 1px 0 3px; }
.message-ligne p { margin: 0; }

/* --- Boîte de messages (espace staff : envoi) --- */
.staff-msg { display: flex; flex-direction: column; gap: 8px; }
.staff-msg select,
.staff-msg input,
.staff-msg textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 10px; border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: var(--fond-carte); color: var(--texte-principal);
    font: inherit; font-size: 0.82rem; outline: none;
}
.staff-msg textarea { resize: vertical; min-height: 60px; }
.staff-msg select:focus,
.staff-msg input:focus,
.staff-msg textarea:focus { border-color: var(--accent-neon); box-shadow: 0 0 10px -3px var(--accent-neon-halo); }
.staff-msg button { align-self: flex-end; }
.staff-msg select { color-scheme: dark; }
body.theme-light .staff-msg select { color-scheme: light; }
.staff-msg select option { background: var(--fond-carte); color: var(--texte-principal); }

/* staff : formulaire de création de sondage */
.staff-sondage-form .staff-sq-bloc {
    display: flex; flex-direction: column; gap: 5px;
    padding: 9px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 22%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 4%, transparent);
    margin-bottom: 7px;
}
.staff-sondage-form .staff-sq-opts { min-height: 54px; resize: vertical; }
.staff-sondage-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-sondage-ligne .staff-mini { align-self: auto; }
.staff-hint { font-size: 0.72rem; opacity: 0.6; line-height: 1.5; }
.staff-hint code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.92em;
    padding: 1px 4px; border-radius: 4px;
    background: color-mix(in srgb, var(--accent-neon) 16%, transparent);
    color: var(--accent-neon);
}
/* champ durée libre : pas de flèches haut/bas (on est passé en type=text de toute façon) */
.staff-champ-libre::-webkit-outer-spin-button,
.staff-champ-libre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.staff-champ-libre { -moz-appearance: textfield; appearance: textfield; }
.staff-champ { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; }
.staff-champ > span { opacity: 0.75; font-weight: 600; letter-spacing: 0.3px; }
.staff-champ .sel-perso-trigger { width: 100%; }
.staff-champ-libre {
    width: 100%; box-sizing: border-box;
    padding: 8px 10px; border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: var(--fond-carte); color: var(--texte-principal);
    font: inherit; font-size: 0.82rem; outline: none;
}
.staff-champ-libre:focus { border-color: var(--accent-neon); box-shadow: 0 0 10px -3px var(--accent-neon-halo); }
/* segment "un seul choix / plusieurs choix" */
.staff-segment {
    display: inline-flex; align-self: flex-start;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    border-radius: 999px; overflow: hidden;
}
.staff-seg {
    -webkit-appearance: none; appearance: none;
    background: none; border: none; cursor: pointer;
    padding: 7px 14px; font: inherit; font-size: 0.78rem; font-weight: 600;
    color: var(--texte-principal); opacity: 0.7;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.staff-seg + .staff-seg { border-left: 1.5px solid color-mix(in srgb, var(--accent-neon) 30%, transparent); }
.staff-seg:hover { opacity: 1; }
.staff-seg.actif {
    opacity: 1;
    background: color-mix(in srgb, var(--accent-neon) 22%, transparent);
    color: var(--accent-neon);
}
.staff-mini-pub { align-self: flex-start; margin-top: 2px; }
.staff-sondage-actif p { margin-top: 4px; }
.staff-avis-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }

/* --- Bouton d'invitation sur la page de garde --- */
.gate-invite-txt { font-size: 0.82rem; line-height: 1.45; opacity: 0.85; margin: 14px 0 8px; }
.gate-btn-invite {
    display: inline-block; text-decoration: none;
    padding: 10px 18px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700;
    color: var(--texte-principal);
    border: 1.5px solid var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 10%, transparent);
    transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.gate-btn-invite:hover {
    transform: scale(1.04);
    background: color-mix(in srgb, var(--accent-neon) 20%, transparent);
    box-shadow: 0 0 16px -4px var(--accent-neon-halo);
}

/* --- Likes --- */
.avis-carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.like-btn {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 35%, transparent);
    background: transparent;
    color: var(--texte-principal);
    font: inherit; font-size: 0.72rem; font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.like-btn:hover { background: color-mix(in srgb, var(--accent-neon) 12%, transparent); }
.like-btn.aime {
    color: var(--accent-neon);
    border-color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 16%, transparent);
    box-shadow: 0 0 10px -3px var(--accent-neon-halo);
}
.like-btn:active { transform: scale(0.92); }
.like-btn-mien { opacity: 0.4; cursor: not-allowed; }
.like-btn-mien:hover { background: none; }
.like-btn-mien:active { transform: none; }

/* --- Easter eggs : éléments cachés cliquables (emblème accueil, flamme de recherche) --- */
.egg-clic { cursor: pointer; transition: filter 0.25s ease, transform 0.2s ease; }
.egg-clic:hover { filter: drop-shadow(0 0 8px var(--accent-neon-halo)) brightness(1.12); }
.egg-clic.egg-sonne { animation: eggSonne 0.55s ease; transform-origin: 50% 20%; }
@keyframes eggSonne {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(13deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-4deg); }
}

/* --- Toast --- */
.wiki-toast {
    position: fixed;
    left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(20px);
    max-width: 92vw;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--fond-carte);
    color: var(--texte-principal);
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6), 0 0 18px -4px var(--accent-neon-halo);
    font-size: 0.82rem; font-weight: 600;
    opacity: 0;
    pointer-events: none;
    z-index: 2147483000;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.wiki-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* champ select des formulaires communauté */
.avis-form select {
    padding: 9px 12px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: var(--fond-carte);
    color: var(--texte-principal);
    font: inherit; font-size: 0.82rem;
}
/* formulaires de report/avis : bien lisibles aussi en thème clair */
body.theme-light .avis-form textarea,
body.theme-light .avis-form input[type="text"],
body.theme-light .avis-form select { background: #f7ecd4; color: #2a1400; }
body.theme-light .avis-form textarea::placeholder,
body.theme-light .avis-form input::placeholder { color: rgba(42, 20, 0, 0.5); }
body.theme-light .avis-form-info { color: #3a2205; }

/* liste déroulante maison "type de signalement" (adaptée au thème) */
.sel-perso { position: relative; }
.sel-perso-trigger {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    background: var(--fond-carte);
    color: var(--texte-principal);
    font: inherit; font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.theme-light:not(.theme-vert) .sel-perso-trigger { background: #f7ecd4; color: #2a1400; }
.sel-perso-trigger:hover { border-color: var(--accent-neon); box-shadow: 0 0 10px -3px var(--accent-neon-halo); }
.sel-perso-chev { display: flex; transition: transform 0.2s ease; }
.sel-perso-chev svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-neon); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sel-perso-trigger[aria-expanded="true"] .sel-perso-chev { transform: rotate(180deg); }
.sel-perso-menu {
    position: fixed;
    z-index: 2147483600;   /* au-dessus du Panel Admin (2147483500) */
    margin: 0; padding: 5px;
    list-style: none;
    border-radius: 12px;
    background: var(--fond-carte);
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6), 0 0 16px -4px var(--accent-neon-halo);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
body.theme-light:not(.theme-vert) .sel-perso-menu { background: #f7ecd4; }
.sel-perso-menu.ouvert { opacity: 1; transform: none; }
.sel-perso-opt {
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--texte-principal);
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
body.theme-light:not(.theme-vert) .sel-perso-opt { color: #2a1400; }
.sel-perso-opt:hover { background: color-mix(in srgb, var(--accent-neon) 16%, transparent); }
.sel-perso-opt.actif { color: var(--accent-neon); background: color-mix(in srgb, var(--accent-neon) 12%, transparent); box-shadow: inset 0 0 0 1px var(--accent-neon); }

/* --- Journal des avis (staff) --- */
.avislog-item { border-color: color-mix(in srgb, #ffb347 40%, transparent); }
.avislog-item.avislog-remplace { border-color: color-mix(in srgb, #9e9e9e 40%, transparent); opacity: 0.8; }
.staff-avislog-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* --- Menu profil : bascule de rôle (mode test) --- */
.profil-role-test { border-top: 1px solid color-mix(in srgb, var(--accent-neon) 18%, transparent); }
.role-choix { display: flex; gap: 5px; }
.role-btn {
    -webkit-appearance: none; appearance: none;
    flex: 1;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 35%, transparent);
    background: transparent;
    color: var(--texte-principal);
    font: inherit; font-size: 0.68rem; font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.role-btn:hover { background: color-mix(in srgb, var(--accent-neon) 12%, transparent); }
.role-btn.actif {
    background: var(--accent-neon);
    color: #fff;
    border-color: var(--accent-neon);
}
body.theme-light .role-btn.actif { color: #2a1400; }

/* =============================================================
   ICÔNES DE DROITE : floutées quand on descend (comme la recherche),
   SAUF le disque de musique
============================================================= */
body.page-defilee .actions-droite {
    filter: blur(2.2px) saturate(0.92);
    opacity: 0.42;
}
body.page-defilee .actions-droite:hover,
body.page-defilee .actions-droite:focus-within,
body.page-defilee .actions-droite:has(.profil-menu.ouvert),
body.page-defilee .actions-droite:has(#menu-events.ouvert) {
    filter: none;
    opacity: 1;
}
.actions-droite { transition: filter 0.4s ease, opacity 0.4s ease; }
body.anim-reduites.page-defilee .actions-droite { filter: none; opacity: 0.6; }

/* =============================================================
   PAS DE SÉLECTION DE TEXTE (sauf champs de saisie)
============================================================= */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
img, a, .avis-carte, .oeuf-cloche, .egg-clic { -webkit-user-drag: none; }

/* =============================================================
   PANNEAU PARAMÈTRES ouvert avec la roue : coin haut-droit arrondi
   + titre remonté dans la zone dégagée
============================================================= */
body.roue-ouverte #panneau-parametres:not([hidden]) {
    border-radius: 16px 64px 18px 18px;
}
body.roue-ouverte #panneau-parametres:not([hidden]) h4 {
    position: absolute;
    top: 100px;
    left: 158px;
    margin: 0;
}
@media (max-width: 520px) {
    body.roue-ouverte #panneau-parametres:not([hidden]) h4 { position: static; }
}

/* =============================================================
   ACCUEIL — Événement en cours + Gazette d'Orario + note MàJ
============================================================= */
#bloc-evenement-corps strong { color: var(--accent-neon); font-size: 0.9rem; }
#bloc-evenement-corps p { font-size: 0.82rem; line-height: 1.5; margin-top: 4px; opacity: 0.9; }
.event-fin { display: inline-block; margin-top: 8px; font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-neon) 40%, transparent); opacity: 0.85; }
.maj-plus { margin-top: 10px; font-size: 0.72rem; font-style: italic; opacity: 0.55; }
.gazette-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 12%, transparent); }
.gazette-item:last-child { border-bottom: none; }
.gazette-date { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--accent-neon); min-width: 96px; }
.gazette-item p { font-size: 0.82rem; line-height: 1.45; opacity: 0.9; }

/* =============================================================
   CLOCHE DE NOTIFICATIONS (menu de la barre du haut)
============================================================= */
.menu-evenements {
    border-color: var(--accent-neon) !important;
    width: 310px !important;
    max-width: calc(100vw - 24px);
    max-height: 72vh;
    padding: 0 !important;
    overflow: visible;
    transform-origin: top right;
    /* état FERMÉ — reste présent le temps de l'animation de sortie */
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.menu-evenements.ouvert {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.menu-evenements[hidden] { display: none !important; }
body.anim-reduites .menu-evenements { transition: opacity 0.12s ease; transform: none; }
/* petite pointe vers la cloche (comme le menu profil) */
.menu-evenements::before {
    content: "";
    position: absolute;
    top: -6px; right: 15px;
    width: 10px; height: 10px;
    background: var(--fond-carte);
    border-left: 2px solid var(--accent-neon);
    border-top: 2px solid var(--accent-neon);
    transform: rotate(45deg);
    transition: background 0.5s ease, border-color 0.5s ease;
    z-index: 1;
}
/* en-tête */
.cl-entete {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 15px;
    border-radius: 16px 16px 0 0;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px;
    color: var(--accent-neon);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 22%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 8%, transparent);
}
.cl-entete-ic { width: 17px; height: 17px; flex-shrink: 0; }
/* corps défilable */
.cl-corps {
    padding: 6px 15px 14px;
    max-height: calc(72vh - 46px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) transparent;
}
.cl-corps::-webkit-scrollbar { width: 8px; }
.cl-corps::-webkit-scrollbar-thumb { background: var(--accent-neon); border-radius: 8px; }
.cl-vide { opacity: 0.6; font-size: 0.8rem; padding: 10px 0; text-align: center; }
.cl-bloc {
    padding: 11px;
    margin-top: 9px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 18%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-neon) 5%, transparent);
}
.cl-titre { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-neon); opacity: 0.9; margin-bottom: 5px; }
.cl-bloc strong { font-size: 0.82rem; color: var(--texte-principal); display: block; }
.cl-bloc p { font-size: 0.78rem; line-height: 1.4; opacity: 0.85; margin-top: 3px; }
.cl-gaz { border-left: 2px solid color-mix(in srgb, var(--accent-neon) 40%, transparent); padding-left: 8px; }
.cl-sondage { display: flex; flex-direction: column; gap: 5px; margin: 7px 0 4px; }
/* sondage multi-questions : chaque groupe d'options */
.cl-sq { display: flex; flex-direction: column; gap: 5px; margin: 3px 0 9px; }
.cl-sq:last-child { margin-bottom: 0; }
.cl-sq-q { margin-top: 6px; }
.cl-sq-q strong, .cl-sq-titre { font-size: 0.8rem; color: var(--texte-principal); display: block; }
/* titre + description du sondage (au-dessus des questions) */
.cl-sondage-titre { display: block; font-size: 0.86rem; color: var(--texte-principal); margin-bottom: 2px; }
.cl-sondage-desc { font-size: 0.76rem; line-height: 1.45; opacity: 0.8; margin: 0 0 6px; }
.cl-opt {
    position: relative;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 30%, transparent);
    background: transparent;
    color: var(--texte-principal);
    font: inherit; font-size: 0.76rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.cl-opt:hover { border-color: var(--accent-neon); }
.cl-opt.choisi { border-color: var(--accent-neon); box-shadow: inset 0 0 0 1px var(--accent-neon); }
/* sondage clôturé : on montre encore les résultats mais on ne peut plus voter */
.cl-sondage-clos .cl-opt { cursor: default; opacity: 0.82; }
.cl-sondage-clos .cl-opt:hover { border-color: color-mix(in srgb, var(--accent-neon) 30%, transparent); }
.cl-opt-jauge { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent-neon) 22%, transparent); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); z-index: 0; }
.cl-opt-txt { position: relative; z-index: 1; flex: 1; text-align: left; }
.cl-opt-pct { position: relative; z-index: 1; font-weight: 700; opacity: 0.8; }
.cl-sondage-total { font-size: 0.68rem; opacity: 0.55; }

/* THÈME CLAIR : fond du menu des notifications en orange un peu foncé,
   texte plus clair que le fond. On redéfinit les variables localement :
   tout l'intérieur (en-tête, blocs, jauges...) s'adapte automatiquement. */
body.theme-light .menu-evenements {
    /* fond inchangé (orange foncé, « très bien comme il est »), mais l'accent passe
       en ROUGE NÉON et l'ensemble tire vers l'orange/rouge. */
    --accent-neon: #ff5230;
    --accent-neon-halo: rgba(255, 90, 55, 0.55);
    --texte-principal: #fff4e6;
    background: #b7671f !important;
    border-color: #ff7a4d !important;
    color: #fff4e6;
    box-shadow: 0 18px 40px -16px rgba(60, 25, 0, 0.55), 0 0 24px -6px rgba(255, 90, 50, 0.5);
}
body.theme-light .menu-evenements::before { background: #b7671f; border-color: #ff7a4d; }
/* titres du menu en rouge néon */
body.theme-light .cl-entete,
body.theme-light .cl-titre,
body.theme-light .cl-sondage-titre,
body.theme-light .cl-sq-titre,
body.theme-light .cl-sq-q strong {
    color: #ff6a44 !important;
    text-shadow: 0 0 7px rgba(255, 80, 45, 0.55), 0 0 14px rgba(255, 80, 45, 0.35);
}
body.theme-light .cl-entete { background: rgba(255, 120, 70, 0.16); border-bottom-color: rgba(255, 110, 70, 0.4); }
body.theme-light .cl-bloc { background: rgba(255, 235, 210, 0.1); border-color: rgba(255, 130, 80, 0.35); }
body.theme-light .cl-bloc strong { color: #fff4e6; }
body.theme-light .cl-bloc p, body.theme-light .cl-gaz { color: #fdeede; }
body.theme-light .cl-gaz { border-left-color: rgba(255, 110, 70, 0.55); }
body.theme-light .cl-opt { color: #fff4e6; border-color: rgba(255, 120, 75, 0.5); }
body.theme-light .cl-opt.choisi { border-color: #ff6a44; box-shadow: inset 0 0 0 1px #ff6a44; }
body.theme-light .cl-opt-jauge { background: rgba(255, 105, 65, 0.3); }

/* =============================================================
   SIGNALEMENT — pièces jointes + fiche membre (staff)
============================================================= */
.assist-fichiers {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px;
    border: 1.5px dashed color-mix(in srgb, var(--accent-neon) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-neon) 7%, transparent);
    color: var(--accent-neon);
    font-size: 0.78rem; font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.assist-fichiers:hover {
    border-style: solid;
    box-shadow: 0 0 12px -3px var(--accent-neon-halo);
    background: color-mix(in srgb, var(--accent-neon) 12%, transparent);
}
.assist-fichiers input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.assist-apercus { display: flex; flex-wrap: wrap; gap: 8px; }
.assist-apercus:empty { display: none; }
.apercu { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-neon) 40%, transparent); }
.apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu button {
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,0.7); color: #fff;
    font-size: 10px; line-height: 16px; cursor: pointer;
}
.staff-membre-fiche code {
    background: color-mix(in srgb, var(--accent-neon) 14%, transparent);
    padding: 1px 5px; border-radius: 5px; font-size: 0.72rem;
}
.staff-item-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.staff-item-imgs img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent-neon) 35%, transparent); }

/* =============================================================
   ACCUEIL — blocs en dégradé néon animé + titres centrés en dégradé
============================================================= */
/* fill translucide -> le dégradé néon animé transparaît (comme le panneau de filtre Aventuriers).
   Vaut pour TOUS les blocs de l'accueil (y compris "Dernières Alertes") + les cartes d'avis. */
body.theme-dark #page-accueil .box-dashboard,
body.theme-dark #page-accueil .avis-carte {
    background-image:
        linear-gradient(rgba(20, 8, 42, 0.80), rgba(14, 6, 30, 0.90)),
        linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}
body.theme-light #page-accueil .box-dashboard,
body.theme-light #page-accueil .avis-carte {
    background-image:
        linear-gradient(rgba(255, 245, 224, 0.82), rgba(250, 238, 210, 0.92)),
        linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}

/* titres de l'accueil : centrés, en dégradé animé adapté au thème */
#page-accueil .box-title {
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.6px;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-size: 280% 100%;
    animation: fluxMagiqueNaturel 6s linear infinite;
    transition: background-image 0.5s ease-in-out;
}
body.theme-dark  #page-accueil .box-title { background-image: linear-gradient(90deg, #ff2fbf, #d946ef, #9d6bff, #ff2fbf); }
body.theme-light #page-accueil .box-title { background-image: linear-gradient(90deg, #ff3d00, #ff9a2e, #ffc46b, #ff3d00); }
body.anim-reduites #page-accueil .box-title { animation: none; }

/* =============================================================
   SÉPARATEURS INTERNES DES BLOCS = mini "séparateur flamme"
   (injecté entre les items par le JS)
============================================================= */
.annonce-item, .maj-item, .gazette-item, .cl-bloc { border-bottom: none !important; }
.separateur-flamme.sep-mini {
    width: min(320px, 70%);
    height: 20px;
    margin: 4px auto;
}
.separateur-flamme.sep-mini .flammeche { width: 3.5px; height: 3.5px; }

/* =============================================================
   BADGE DE VERSION — petit, coin bas-droite, adapté au thème
============================================================= */
#badge-version {
    position: fixed;
    right: 12px;
    bottom: 10px;
    z-index: 2147483200;
    padding: 3px 9px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--accent-neon);
    background: color-mix(in srgb, var(--fond-carte) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 55%, transparent);
    border-radius: 8px;
    box-shadow: 0 0 10px -3px var(--accent-neon-halo), inset 0 0 8px -6px var(--accent-neon);
    backdrop-filter: blur(3px);
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    transition: opacity 0.4s ease, color 0.5s ease, background 0.5s ease,
        border-color 0.5s ease, box-shadow 0.5s ease;
}
#badge-version:hover { opacity: 0.9; }
body.non-connecte #badge-version { display: none; }
body.anim-reduites #badge-version { backdrop-filter: none; }

/* =============================================================
   CERCLES AMBIANTS — décor de fond qui dérive doucement
   (mêmes anneaux pointillés que la roue, adaptés au thème)
============================================================= */
.cercles-ambiants {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.cercle-ambiant {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed var(--accent-neon-halo);
    opacity: 0.13;
    transition: border-color 0.5s ease-in-out;
}
body.theme-light .cercle-ambiant { opacity: 0.16; }
.ca-1 { width: 140px;  height: 140px;  left: 4%;   top: 16%;  animation: deriveCercle 34s ease-in-out infinite; }
.ca-2 { width: 220px;  height: 220px;  left: 78%;  top: 8%;   border-style: solid; animation: deriveCercle 46s ease-in-out infinite reverse; }
.ca-3 { width: 90px;   height: 90px;   left: 88%;  top: 62%;  animation: deriveCercle 28s ease-in-out infinite; }
.ca-6 { width: 60px;   height: 60px;   left: 30%;  top: 40%;  animation: deriveCercle 24s ease-in-out infinite reverse; }
/* .ca-4 et .ca-5 retirés : moins de calques animés = plus fluide */
.ca-4, .ca-5 { display: none !important; }
@keyframes deriveCercle {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(24px, -30px) rotate(90deg); }
    50%      { transform: translate(-18px, 22px) rotate(180deg); }
    75%      { transform: translate(-28px, -14px) rotate(270deg); }
}
body.anim-reduites .cercle-ambiant { animation: none !important; }
@media (max-width: 700px) { .ca-2, .ca-4 { display: none; } }

/* =============================================================
   IMAGE DE FOND DE LA BANNIÈRE "CRÉATION DE PERSONNAGE"
   sombre = freya.jpeg   |   clair = bell-feu.jpg
   (fondu croisé propre au changement de thème, comme la bannière Aventuriers)
============================================================= */
.banniere-creation-fond-sombre,
.banniere-creation-fond-claire,
.banniere-creation-fond-vert,
.banniere-races-fond-vert {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;   /* on cadre depuis le HAUT de l'image */
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.banniere-creation-fond-sombre {
    background-image: linear-gradient(rgba(6, 2, 14, 0.42), rgba(6, 2, 14, 0.52)), url('images/freya.jpeg');
}
.banniere-creation-fond-claire {
    background-image: linear-gradient(rgba(250, 238, 222, 0.30), rgba(252, 240, 224, 0.40)), url('images/bell-feu.jpg');
}
.banniere-creation-fond-vert {
    background-image: linear-gradient(rgba(2, 14, 8, 0.42), rgba(2, 16, 9, 0.52)), url('images/ryu-2.jpg');
}
.banniere-races-fond-vert {
    background-image: linear-gradient(rgba(2, 14, 8, 0.42), rgba(2, 16, 9, 0.52)), url('images/ryu-4.jpg');
}
body.theme-dark  .banniere-creation-fond-sombre { opacity: 1; }
body.theme-dark  .banniere-creation-fond-claire { opacity: 0; }
body.theme-light .banniere-creation-fond-sombre { opacity: 0; }
body.theme-light .banniere-creation-fond-claire { opacity: 1; }

/* =============================================================
   BADGE ARCHIVISTE : le journal des mises à jour devient défilable
   (molette / glissement) — bloc un peu plus compact mais lisible
============================================================= */
#liste-maj {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) transparent;
    overscroll-behavior: contain;
}
#liste-maj::-webkit-scrollbar { width: 9px; }
#liste-maj::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-neon) 70%, transparent);
    border-radius: 9px;
}
#liste-maj::-webkit-scrollbar-track { background: transparent; }

/* =============================================================
   EASTER EGGS — confettis, message, tête de chat (inactivité)
============================================================= */
.egg-confetti {
    position: fixed;
    z-index: 2147483400;
    pointer-events: none;
    border-radius: 2px;
    will-change: transform, opacity;
}
.egg-message {
    position: fixed;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%) translateY(20px);
    z-index: 2147483350;
    max-width: min(90vw, 420px);
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    color: var(--texte-principal);
    background: color-mix(in srgb, var(--fond-carte) 82%, transparent);
    border: 1.5px solid var(--accent-neon);
    box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.5), 0 0 20px -6px var(--accent-neon-halo);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.egg-message.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* chat-pixel.gif : après 2 min d'inactivité, apparaît EN FONDU sur un "perchoir"
   ancré AU-DESSUS d'une box. Enfant du perchoir -> suit le défilement tout seul. */
.chat-perchoir {
    position: absolute;
    left: 50%;
    top: 0;
    width: 92px;
    height: 66px;
    transform: translate(-50%, -100%);   /* zone juste au-dessus du bord haut de la box */
    pointer-events: none;
    z-index: 6;
}
#egg-chat {
    position: absolute;
    left: 50%;
    bottom: 0;                            /* pattes posées sur le bord haut de la box */
    width: 78px;
    height: auto;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    /* teinte SOMBRE (violet) par défaut */
    --chat-teinte: sepia(1) saturate(2.4) hue-rotate(228deg) brightness(0.95);
}
#egg-chat.visible { opacity: 1; transform: translate(-50%, 9px) scale(1); }
/* variante bannière : la box est en overflow:hidden -> le perchoir ne peut pas
   déborder au-dessus. On le pose À L'INTÉRIEUR, contre le bord haut, et le chat
   se tient juste sous ce bord. */
.chat-perchoir.dans-la-box { transform: translate(-50%, 0); }
.chat-perchoir.dans-la-box #egg-chat { top: -18px; bottom: auto; }
.chat-perchoir.dans-la-box #egg-chat.visible { transform: translate(-50%, 4px) scale(1); }
#egg-chat img {
    display: block;
    width: 100%; height: auto;
    image-rendering: pixelated;
    /* le GIF a un fond sombre opaque : on l'ESTOMPE aux bords avec un masque
       elliptique -> plus de carré. Le drop-shadow suit alors la forme douce. */
    -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 55%, #000 44%, rgba(0,0,0,0.30) 70%, transparent 100%);
            mask-image: radial-gradient(ellipse 58% 64% at 50% 55%, #000 44%, rgba(0,0,0,0.30) 70%, transparent 100%);
    /* sur box sombre (thèmes sombre + vert) : screen fait disparaître le fond noir du gif */
    mix-blend-mode: screen;
    filter: var(--chat-teinte) brightness(1.12) contrast(1.1)
        drop-shadow(0 0 4px var(--accent-neon)) drop-shadow(0 0 9px var(--accent-neon-halo));
    transition: filter 0.5s ease-in-out;
}
/* thème clair (box claires) : screen effacerait le chat -> on garde le chat (multiply)
   et le masque adoucit le reste. */
body.theme-light #egg-chat img {
    mix-blend-mode: multiply;
    filter: var(--chat-teinte) brightness(0.92) contrast(1.25) saturate(1.4)
        drop-shadow(0 0 4px var(--accent-neon)) drop-shadow(0 0 8px var(--accent-neon-halo));
}
body.theme-light #egg-chat { --chat-teinte: sepia(1) saturate(2.3) hue-rotate(318deg) brightness(1.05); }
body.theme-vert  #egg-chat { --chat-teinte: sepia(1) saturate(2.6) hue-rotate(70deg) brightness(1.02); }
body.anim-reduites #egg-chat { transition: opacity 0.2s ease; }

/* =============================================================
   THÈME VERT CACHÉ (déverrouillé au Konami code) — n'altère pas
   les thèmes clair / sombre : il s'ajoute par-dessus.
============================================================= */
body.theme-vert {
    --fond-wiki: #061c0e;
    --fond-box: #05170b;
    --fond-carte: #0b2718;
    --texte-principal: #e6ffee;
    --texte-secondaire: #a9e8bf;
    --neon: #2fe07a;
    --lueur-neon: #7CFC00;
    --chat-accent: #2fe07a;
    --banniere-gradient: linear-gradient(135deg, #04140c 0%, #0a2e18 100%);
    --card-stat-bg: #0b2718;
    --card-stat-texte: #eafff0;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
    --accent-neon: #2fe07a;
    --accent-neon-halo: rgba(47, 224, 122, 0.55);
    --switch-neon: #2fe07a;
    --particule-couleur: #57ff9e;
    --recherche-fond: #06210f;
    --recherche-degrade: linear-gradient(135deg, #04140c 0%, #0f7a3f 40%, #2fe07a 50%, #0f7a3f 60%, #04140c 100%);
    --recherche-lueur: rgba(47, 224, 122, 0.45);
    --flamme-couleur: #2fe07a;
    --surface-fond: rgba(5, 22, 12, 0.74);
    --sommaire-fond: rgba(5, 22, 12, 0.74);
    --musique-panneau: #082017;
    --musique-panneau-bord: rgba(80, 255, 150, 0.35);
    --musique-temps-txt: #a9e8bf;
    --lecteur-accent: #2fe07a;
    --lecteur-accent-box: rgba(47, 224, 122, 0.20);
    --disque-fond: #0f7a3f;
    --disque-sillon: rgba(0, 60, 25, 0.28);
    --disque-bordure: #2fe07a;
    --disque-bordure-vif: #7CFC00;
    --disque-bordure-2: #00d68f;
    --disque-lueur: rgba(90, 255, 150, 0.85);
}
body.theme-vert .carte-hud-divine,
body.theme-vert #page-accueil .box-dashboard,
body.theme-vert #page-accueil .avis-carte {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)),
        linear-gradient(135deg, #04140c 0%, #0b5c30 40%, #2fe07a 50%, #0b5c30 60%, #04140c 100%) !important;
}
body.theme-vert .banniere-divine {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)),
        linear-gradient(135deg, #04140c 0%, #0b5c30 40%, #2fe07a 50%, #0b5c30 60%, #04140c 100%) !important;
}
body.theme-vert .carte-face {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)),
        linear-gradient(130deg, #0b7a3f 0%, #2fe07a 26%, #7CFC00 50%, #2fe07a 74%, #0b7a3f 100%) !important;
}
body.theme-vert #page-accueil .box-title {
    background-image: linear-gradient(90deg, #2fe07a, #7CFC00, #00d68f, #2fe07a) !important;
}
body.theme-vert .banniere-creation-fond-sombre,
body.theme-vert .banniere-creation-fond-claire { opacity: 0; }
body.theme-vert .banniere-creation-fond-vert,
body.theme-vert .banniere-races-fond-vert { opacity: 1; }
html:has(body.theme-vert) { scrollbar-color: #2fe07a transparent; }
html:has(body.theme-vert) ::-webkit-scrollbar-thumb { background: linear-gradient(#2fe07a, #0b5c30); }

/* le badge de version reste cliquable (confettis au clic sur "V1") */
#badge-version { pointer-events: auto; cursor: pointer; }

/* =============================================================
   THÈME VERT (Konami) — 3e palette complète, prioritaire sur
   clair ET sombre (placée en fin de feuille : gagne par l'ordre).
============================================================= */
/* Icônes néon de la barre (cloche des notifs + tchat) */
body.theme-vert .icone-neon {
    color: #2fe07a;
    filter: drop-shadow(0 0 2px #2fe07a) drop-shadow(0 0 6px rgba(47, 224, 122, 0.6));
}
/* Compteur de la cloche */
body.theme-vert .badge-evenement {
    background: #17351f;
    color: #d6ffe6;
    box-shadow: 0 0 8px -2px rgba(47, 224, 122, 0.7);
}

/* Titres en dégradé animé -> vert.
   ⚠ On utilise "background-image" (pas "background"), sinon le raccourci remet
   background-clip à "border-box" et le dégradé remplit tout le cadre (bug screen 2). */
body.theme-vert .titre-sommaire { background-image: linear-gradient(90deg, #00d68f, #2fe07a, #7CFC00, #00d68f); background-size: 400% 400%; }
body.theme-vert .musique-titre  { background-image: linear-gradient(90deg, #2fe07a, #7CFC00, #00d68f, #2fe07a); }
body.theme-vert .lien-discord   { background-image: linear-gradient(90deg, #2fe07a, #7CFC00, #00d68f, #2fe07a) !important; }
body.theme-vert #page-accueil .box-title { background-image: linear-gradient(90deg, #2fe07a, #7CFC00, #00d68f, #2fe07a) !important; }

/* Titres pleins (h1 / h2 / titre de la page Création) -> vert néon animé */
body.theme-vert h1,
body.theme-vert h2,
body.theme-vert .banniere-creation .titre-creation {
    color: #7CFC00 !important;
    -webkit-text-fill-color: #7CFC00 !important;
    text-shadow: 0 0 12px rgba(47, 224, 122, 0.75), 0 0 26px rgba(47, 224, 122, 0.45), 0 2px 5px rgba(0, 0, 0, 0.45) !important;
}
body.theme-vert .banniere-creation .titre-creation {
    background: none !important;
}

/* Aura "énergie" autour de la photo Discord -> conic vert */
body.theme-vert .profil-cadre::before {
    background: conic-gradient(from 0deg,
        #1f9d5b, #2fe07a, #7CFC00, #00d68f, #0f7a3f, #57ff9e, #1f9d5b) !important;
    opacity: 0.9;
}

/* Sommaire : lueur latérale verte (remplace le rouge du thème clair) */
body.theme-vert .menu-lateral {
    box-shadow:
        inset 30px 0 40px -16px #2fe07a,
        inset -30px 0 40px -16px #2fe07a,
        inset 0 -30px 40px -16px #2fe07a,
        0 0 45px 2px rgba(47, 224, 122, 0.4) !important;
}
/* Liens du sommaire -> vert */
body.theme-vert .liens-sommaire li a {
    color: #9dff9d !important;
    text-shadow: 0 0 8px #2fe07a, 0 0 15px rgba(47, 224, 122, 0.4) !important;
}
body.theme-vert .liens-sommaire li a:hover {
    color: #eaffca !important;
    text-shadow: 0 0 12px #7CFC00, 0 0 20px rgba(124, 252, 0, 0.6) !important;
    background: rgba(255, 255, 255, 0.03);
    padding-left: 20px;
}
body.theme-vert .liens-sommaire li a.actif {
    background-color: rgba(47, 224, 122, 0.10) !important;
    color: #b6ff7a !important;
    text-shadow: 0 0 10px #7CFC00, 0 0 20px rgba(124, 252, 0, 0.8) !important;
    border-left: 3px solid #7CFC00 !important;
    padding-left: 18px;
}

/* Menu des notifications : fond vert un peu foncé + texte plus clair
   (mêmes variables locales que le traitement du thème clair) */
body.theme-vert .menu-evenements {
    --accent-neon: #d8ffe6;
    --accent-neon-halo: rgba(150, 255, 190, 0.5);
    --texte-principal: #eafff0;
    background: #0b3a22 !important;
    border-color: #7CFC00 !important;
    color: #eafff0;
    box-shadow: 0 18px 40px -16px rgba(0, 40, 15, 0.6), 0 0 22px -6px rgba(80, 255, 150, 0.4);
}
body.theme-vert .menu-evenements::before { background: #0b3a22; border-color: #7CFC00; }
body.theme-vert .cl-entete { background: rgba(210, 255, 225, 0.12); }
body.theme-vert .cl-bloc { background: rgba(210, 255, 225, 0.10); border-color: rgba(180, 255, 205, 0.26); }
body.theme-vert .cl-bloc p, body.theme-vert .cl-gaz { color: #e6ffee; }
body.theme-vert .cl-opt { color: #eafff0; }

/* Barre du haut : la surface translucide reprend la teinte verte */
body.theme-vert .barre-outils::before { background: rgba(5, 22, 12, 0.74); }

/* Chatbot : renforts verts (l'essentiel passe déjà par les variables) */
body.theme-vert .fenetre-chatbot { box-shadow: var(--shadow-soft), 0 0 16px 1px rgba(124, 252, 0, 0.5); }
body.theme-vert .saisie-chatbot { background: rgba(255, 255, 255, 0.04); }

/* Bannière d'accueil : image "ryu.jpg" + logo cloche verte.
   !important + ordre : reste vert même si on bascule lune/flamme pendant le Konami. */
body.theme-vert .banniere-image-fond { background-image: url('images/ryu.jpg') !important; }
body.theme-vert .logo-banniere-img   { background-image: url('images/cloche-verte.png') !important; }

/* Page Aventuriers : cadre des portraits + panneau de filtre en vert */
body.theme-vert .cadre-divin-portrait {
    background-image: linear-gradient(var(--fond-box), var(--fond-box)),
        linear-gradient(135deg, #04140c 0%, #0b5c30 40%, #2fe07a 50%, #0b5c30 60%, #04140c 100%) !important;
}
body.theme-vert .sommaire-banniere-tri {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        linear-gradient(135deg, #04140c 0%, #0b5c30 40%, #2fe07a 50%, #0b5c30 60%, #04140c 100%) !important;
}

/* Fondu doux au passage vers / depuis le thème vert (comme sombre <-> clair).
   Opaque au pic pour masquer les échanges d'images de bannière, puis s'estompe. */
#fondu-theme {
    position: fixed; inset: 0; z-index: 2147483040;
    pointer-events: none; opacity: 0;
    transition: opacity 0.45s ease-in-out;
}
#fondu-theme.actif { opacity: 0.96; }
body.anim-reduites #fondu-theme { display: none; }

/* =============================================================
   PANEL ADMIN (réservé) — s'adapte aux 3 thèmes via les variables
============================================================= */
.panel-admin-fond {
    position: fixed; inset: 0;
    z-index: 2147483500;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.panel-admin-fond.ouvert { opacity: 1; pointer-events: auto; }
.panel-admin {
    width: min(520px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;          /* pas de "scroll chaining" vers la page */
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    background: var(--fond-carte);
    border: 2px solid var(--accent-neon);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.65), 0 0 26px -6px var(--accent-neon-halo);
    color: var(--texte-principal);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    scrollbar-width: thin; scrollbar-color: var(--accent-neon) transparent;
    /* couche de composition dédiée : le scroll interne ne force plus le
       recalcul du backdrop-filter (blur) du fond -> plus de saccade */
    will-change: transform;
    transform: translateZ(0) translateY(14px) scale(0.97);
}
.panel-admin-fond.ouvert .panel-admin { transform: translateZ(0) translateY(0) scale(1); }
.panel-admin::-webkit-scrollbar { width: 8px; }
.panel-admin::-webkit-scrollbar-thumb { background: var(--accent-neon); border-radius: 8px; }
.pa-entete {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.6px;
    color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 10%, var(--fond-carte));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 25%, transparent);
    border-radius: 16px 16px 0 0;
}
.pa-close {
    background: none; border: none; cursor: pointer;
    color: var(--accent-neon); font-size: 1rem; line-height: 1;
    width: 26px; height: 26px; border-radius: 8px;
    transition: background 0.2s ease;
}
.pa-close:hover { background: color-mix(in srgb, var(--accent-neon) 18%, transparent); }
.pa-corps { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.pa-section { display: flex; flex-direction: column; gap: 9px; contain: layout style; }
.pa-titre {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent-neon); opacity: 0.9;
}
.pa-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-badge {
    position: relative;
    -webkit-appearance: none; appearance: none;
    padding: 6px 10px; border-radius: 999px;
    font: inherit; font-size: 0.74rem; font-weight: 600;
    cursor: pointer;
    color: var(--texte-principal);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 30%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 6%, transparent);
    opacity: 0.6;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.pa-badge:hover { transform: translateY(-1px); }
/* infobulle « comment obtenir ce badge » — au thème, remplace le title natif */
.pa-badge[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%; bottom: calc(100% + 9px);
    transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 240px;
    white-space: normal; text-align: center;
    padding: 8px 11px; border-radius: 9px;
    font-size: 0.74rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.1px;
    /* fond TOTALEMENT opaque + texte franc -> lisible quelle que soit la teinte du thème */
    color: #ffffff;
    background: #17131f;
    border: 1px solid var(--accent-neon);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.8), 0 0 16px -5px var(--accent-neon-halo);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 12;
}
body.theme-light:not(.theme-vert) .pa-badge[data-tip]::after { color: #2a1400; background: #fff3e0; }
.pa-badge[data-tip]:hover::after,
.pa-badge[data-tip]:focus-visible::after { opacity: 1 !important; }
.pa-badge[data-tip]::before {
    content: "";
    position: absolute;
    left: 50%; bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--accent-neon);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 6;
}
.pa-badge[data-tip]:hover::after,
.pa-badge[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.pa-badge[data-tip]:hover::before,
.pa-badge[data-tip]:focus-visible::before { opacity: 1; }
.pa-badge.actif {
    opacity: 1;
    border-color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 22%, transparent);
    box-shadow: 0 0 10px -4px var(--accent-neon-halo);
}
.pa-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.pa-btn {
    -webkit-appearance: none; appearance: none;
    padding: 8px 13px; border-radius: 10px;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    color: var(--texte-principal);
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 8%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.pa-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent-neon) 18%, transparent); border-color: var(--accent-neon); }
.pa-btn.danger { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.08); }
.pa-btn.danger:hover { background: rgba(255, 107, 107, 0.18); border-color: #ff6b6b; }
.pa-btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.pa-btn[disabled]:hover { transform: none; background: color-mix(in srgb, var(--accent-neon) 8%, transparent); border-color: color-mix(in srgb, var(--accent-neon) 40%, transparent); }

/* Panel Admin : notes + aide-mémoire (Konami / easter eggs / badges) */
.pa-note { font-size: 0.76rem; line-height: 1.5; opacity: 0.85; margin: 0; }
.pa-note-fine { opacity: 0.6; font-size: 0.72rem; }
.pa-titre-sub { margin-top: 10px; }
.pa-konami {
    font-family: 'Orbitron', 'Cinzel', serif; letter-spacing: 2px;
    color: var(--accent-neon); font-size: 0.9rem;
}
.pa-memo {
    margin: 6px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 0.75rem; line-height: 1.45;
}
.pa-memo li {
    padding: 7px 9px; border-radius: 8px;
    background: color-mix(in srgb, var(--accent-neon) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 16%, transparent);
}
.pa-memo strong { color: var(--texte-principal); }
.pa-mini {
    -webkit-appearance: none; appearance: none;
    margin-left: 4px; padding: 2px 8px; border-radius: 999px;
    font: inherit; font-size: 0.68rem; font-weight: 700; cursor: pointer;
    color: var(--accent-neon);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 10%, transparent);
}
.pa-mini:hover { background: color-mix(in srgb, var(--accent-neon) 22%, transparent); border-color: var(--accent-neon); }
.pa-memo-section .pa-memo { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-neon) transparent; }

/* <select> natifs restants (ex. espace staff) : au moins la couleur au thème */
.panel-admin select, .avis-form select, #staff-msg-membre {
    background: var(--fond-carte); color: var(--texte-principal);
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    border-radius: 10px; padding: 8px 10px; font: inherit; outline: none;
    color-scheme: dark;
}
body.theme-light .panel-admin select,
body.theme-light .avis-form select,
body.theme-light #staff-msg-membre { color-scheme: light; }
.panel-admin select option, .avis-form select option, #staff-msg-membre option {
    background: var(--fond-carte); color: var(--texte-principal);
}
body.anim-reduites .panel-admin-fond,
body.anim-reduites .panel-admin { transition: opacity 0.15s ease; }

/* =============================================================
   FENÊTRE DE CONFIRMATION MAISON (remplace confirm()/prompt())
   S'adapte aux 3 thèmes.
============================================================= */
.wiki-dialog-fond {
    position: fixed; inset: 0;
    z-index: 2147483550;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.wiki-dialog-fond.ouvert { opacity: 1; pointer-events: auto; }
.wiki-dialog {
    width: min(400px, 100%);
    padding: 20px 20px 16px;
    border-radius: 16px;
    background: var(--fond-carte);
    border: 2px solid var(--accent-neon);
    box-shadow: 0 22px 55px -16px rgba(0, 0, 0, 0.65), 0 0 24px -6px var(--accent-neon-halo);
    color: var(--texte-principal);
    transform: translateY(12px) scale(0.96);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.wiki-dialog-fond.ouvert .wiki-dialog { transform: translateY(0) scale(1); }
.wd-msg { font-size: 0.92rem; line-height: 1.5; }
.wd-champ {
    width: 100%; box-sizing: border-box;
    margin-top: 12px; padding: 9px 11px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 40%, transparent);
    background: var(--fond-box); color: var(--texte-principal);
    font: inherit; font-size: 0.85rem; outline: none;
}
.wd-champ:focus { border-color: var(--accent-neon); box-shadow: 0 0 10px -3px var(--accent-neon-halo); }
.wd-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.wd-btn {
    -webkit-appearance: none; appearance: none;
    padding: 8px 16px; border-radius: 10px;
    font: inherit; font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wd-annuler {
    color: var(--texte-principal);
    border: 1.5px solid color-mix(in srgb, var(--texte-principal) 25%, transparent);
    background: transparent;
}
.wd-annuler:hover { background: color-mix(in srgb, var(--texte-principal) 8%, transparent); }
.wd-ok {
    color: #fff;
    border: 1.5px solid var(--accent-neon);
    background: var(--accent-neon);
}
.wd-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--accent-neon-halo); }
.wd-ok.wd-danger { background: #e5484d; border-color: #e5484d; }
.wd-ok.wd-danger:hover { box-shadow: 0 6px 16px -6px rgba(229, 72, 77, 0.6); }
body.anim-reduites .wiki-dialog-fond,
body.anim-reduites .wiki-dialog { transition: opacity 0.12s ease; }

/* =============================================================
   THÈME VERT (Konami) — bannières : titres-images + fonds "ryu"
   + lisibilité du texte + titres de l'espace staff
============================================================= */

/* --- Logo de titre "vert" (accueil + aventuriers) --- */
.titre-banniere-img.logo-vert { display: none; }
body.theme-vert .logo-vert { display: block; }
body.theme-vert .logo-sombre,
body.theme-vert .logo-clair { display: none !important; }
/* bannière Aventuriers : les 3 titres sont superposés, l'opacité gère */
body.theme-vert .titre-banniere-wrap .titre-banniere-img {
    display: block; position: absolute; left: 0; top: 0; margin-bottom: 0;
    transition: opacity 0.5s ease-in-out;
}
body.theme-vert .titre-banniere-wrap .logo-sombre,
body.theme-vert .titre-banniere-wrap .logo-clair { opacity: 0; }
body.theme-vert .titre-banniere-wrap .logo-vert { opacity: 1; }

/* --- Titre-image de la page Création / Races en thème vert --- */
.titre-creation-vert { display: none; max-width: 100%; max-height: 92px; height: auto; }
body.theme-vert .banniere-creation .titre-creation { display: none; }
body.theme-vert .banniere-creation .titre-creation-vert { display: block; }
/* la bannière « Les Classes » n'a pas d'image de titre dédiée : on garde le texte en thème vert */
body.theme-vert .banniere-classes .titre-creation { display: block; }
/* idem pour la bannière du Bestiaire */
body.theme-vert .banniere-bestiaire .titre-creation { display: block; }

/* --- Fonds de bannières en thème vert --- */
body.theme-vert .banniere-image-fond { background-image: url('images/ryu.jpg') !important; }
body.theme-vert .banniere-fond-aventuriers-sombre {
    background-image: url('images/ryu-3.jpg') !important;
    opacity: 1 !important;
}
body.theme-vert .banniere-fond-aventuriers-claire { opacity: 0 !important; }

/* --- Lisibilité du texte SUR les bannières en thème vert (sauf le titre) --- */
/* « ● ORACLE SYSTEM » (point compris) en vert néon en thème Émeraude */
body.theme-vert .logo-familia {
    color: #7CFC00;
    text-shadow: 0 0 10px rgba(124, 252, 0, 0.6), 0 0 20px rgba(124, 252, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.theme-vert .banniere-divine .intro-section p,
body.theme-vert .banniere-creation .intro-section p {
    color: #f1fff6 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.45);
    opacity: 1;
}

/* --- Descriptions sous les titres = en CLAIR dans tout le thème vert --- */
body.theme-vert .bloc-classes > p,
body.theme-vert #page-familias > p,
body.theme-vert #page-bestiaire > p,
body.theme-vert #page-regles > p,
body.theme-vert .annonce-item p,
body.theme-vert .gazette-item p,
body.theme-vert .maj-item,
body.theme-vert .maj-item li,
body.theme-vert .cl-bloc p,
body.theme-vert .event-fin,
body.theme-vert .avis-carte-txt,
body.theme-vert .item-lien {
    color: #dff7e7 !important;
    opacity: 1;
}

/* =============================================================
   ESPACE STAFF : titres de box centrés + dégradé animé (3 thèmes)
============================================================= */
#page-staff .box-title {
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.6px;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-size: 280% 100%;
    animation: fluxMagiqueNaturel 6s linear infinite;
}
body.theme-dark  #page-staff .box-title { background-image: linear-gradient(90deg, #ff2fbf, #d946ef, #9d6bff, #ff2fbf); }
body.theme-light #page-staff .box-title { background-image: linear-gradient(90deg, #ff3d00, #ff9a2e, #ffc46b, #ff3d00); }
body.theme-vert  #page-staff .box-title { background-image: linear-gradient(90deg, #2fe07a, #7CFC00, #00d68f, #2fe07a); }
body.anim-reduites #page-staff .box-title { animation: none; }
/* l'icône du titre garde sa couleur (elle n'est pas "clippée") */
#page-staff .box-title .box-title-ic { -webkit-text-fill-color: initial; }

/* (le sélecteur de membre du Panel Admin utilise désormais le composant
   maison .sel-perso — plus de <select> natif ici.) */

/* (le style du chat est entièrement géré plus haut : masque elliptique +
   mix-blend-mode selon le thème -> aucun carré, aucune tuile) */

/* =============================================================
   FLUIDITÉ : on met en PAUSE les grosses animations (dégradés
   qui coulent, ondes de fond, holo) UNIQUEMENT pendant le scroll.
   Aucun effet perdu — ils repartent 150  ms après l'arrêt.
============================================================= */
body.scroll-actif::before,
body.scroll-actif .carte-hud-divine,
body.scroll-actif .banniere-divine,
body.scroll-actif .carte-face,
body.scroll-actif .carte-face::after,
body.scroll-actif .effet-holo,
body.scroll-actif .cercle-ambiant,
body.scroll-actif .cadre-divin-portrait,
body.scroll-actif .sommaire-banniere-tri,
body.scroll-actif .separateur-flamme::before,
body.scroll-actif .separateur-flamme::after,
body.scroll-actif #page-accueil .box-title,
body.scroll-actif #page-staff .box-title,
body.scroll-actif .titre-sommaire,
body.scroll-actif .musique-titre,
body.scroll-actif .lien-discord,
body.scroll-actif .profil-cadre::before {
    animation-play-state: paused !important;
}

/* =============================================================
   CLASSEMENT — DUEL DES AVENTURIERS (page Aventuriers)
============================================================= */
/* couleurs des 2 aventuriers du classement (miroir de couleursDuel() en JS) */
/* NB : --accent-neon n'existe QUE sur body.theme-* ; le mettre sur :root donnerait
   un --duel-a vide (barre de légende invisible côté A). On pose donc une valeur
   littérale sur :root et on la surcharge par thème. */
:root            { --duel-a: #d946ef;            --duel-b: #4ade80; }  /* sombre : violet vs vert clair */
body.theme-dark  { --duel-a: var(--accent-neon); }
body.theme-light { --duel-a: #e5484d;            --duel-b: #2f7dd4; }  /* clair  : rouge  vs bleu       */
body.theme-vert  { --duel-a: var(--accent-neon); --duel-b: #ff7ac0; }  /* Émeraude : vert vs rosé       */

.banniere-classement .titre-creation { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.banniere-bestiaire .titre-creation { font-size: clamp(1.6rem, 4vw, 2.4rem); }

/* Proportions calées sur le RENDU de .profil-gamifie-container (section Status) :
   là, les colonnes latérales gonflent grâce à leur contenu (liste des membres,
   quêtes), ce qui donne ~1 : 1.2 : 1.05. Ici le contenu latéral est plus court,
   donc on fixe directement ce ratio. */
.duel-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.05fr;
    gap: 20px; width: 100%; align-items: stretch;   /* les 2 profils descendent jusqu'au bas de la box radar */
}
@media (max-width: 950px) { .duel-container { grid-template-columns: 1fr; align-items: start; } }
/* garde-fou : le canvas radar (width:100%) ne doit pas élargir la colonne du milieu */
.duel-radar { min-width: 0; }
.duel-radar canvas { max-width: 100%; }

.duel-cote { display: flex; flex-direction: column; gap: 14px; }
/* le rang « top X » se place JUSTE sous les infos du personnage (plus calé en bas) */
.duel-cote .duel-rang { margin-top: 0; }
.duel-pick .sel-perso-trigger { width: 100%; }

/* infos personnage (sobre, sans encadré) */
.duel-ident {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 8px 12px 4px;
}
.duel-ident .cadre-divin-portrait { margin: 0 auto 6px; }
.duel-portrait {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    position: relative; border-radius: inherit;
}
.duel-ident h3 { margin: 0; font-size: 1.05rem; }
.duel-ident .titre-divin { margin: 0; font-size: 0.82rem; opacity: 0.85; }

/* rang au classement — accent JAUNE */
.duel-rang {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #ffce54 55%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, #ffce54 16%, transparent), transparent 75%);
    color: var(--texte-principal);
}
.duel-rang-tranche {
    font-family: 'Orbitron', 'Cinzel', sans-serif; font-weight: 800; letter-spacing: 1px;
    font-size: 0.95rem; color: #ffce54;
    text-shadow: 0 0 10px rgba(255, 206, 84, 0.4);
}
.duel-rang-pos { font-size: 1.1rem; font-weight: 800; }
.duel-rang-note { font-size: 0.72rem; opacity: 0.65; }

/* radar central */
.duel-radar { display: flex; flex-direction: column; }
/* hauteur DÉFINIE (pas seulement min-height) : sinon le canvas en height:100% retombe à 0.
   flex:none -> le radar ne change pas de taille quand un menu d'équipement s'ouvre. */
.duel-radar .zone-canvas-graphique { flex: none; height: 360px; min-height: 360px; margin-top: 10px; }
.duel-legende {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    font-size: 0.76rem; margin-top: 4px;
}
.duel-leg { display: inline-flex; align-items: center; gap: 6px; opacity: 0.9; }
.duel-leg-pt { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.duel-leg-a .duel-leg-pt { background: var(--duel-a); }
.duel-leg-b .duel-leg-pt { background: var(--duel-b); }
.duel-leg-eq .duel-leg-pt {
    background: repeating-linear-gradient(90deg, #ffce54 0 4px, transparent 4px 7px);
    height: 3px; width: 18px;
}
/* joueur de gauche = doré ; ADVERSAIRE (droite) = ROUGE */
.duel-leg-eq-a .duel-leg-pt { background: repeating-linear-gradient(90deg, #ffce54 0 4px, transparent 4px 7px); }
.duel-leg-eq-b .duel-leg-pt { background: repeating-linear-gradient(90deg, #ff4d4d 0 4px, transparent 4px 7px); }
.duel-leg.duel-leg-eq-b, .duel-leg.duel-leg-eq-b span { color: #ff6b6b; }
/* légende « équipement » : bouton cliquable (afficher / masquer sur le graphique) */
.duel-leg-eq {
    -webkit-appearance: none; appearance: none;
    background: none; border: none; cursor: pointer;
    font: inherit; color: inherit;
    padding: 2px 5px; border-radius: 6px;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.duel-leg-eq:hover { background: color-mix(in srgb, var(--accent-neon) 12%, transparent); }
.duel-leg-eq.masque { opacity: 0.4; text-decoration: line-through; }
.duel-leg-eq > * { pointer-events: none; }   /* le clic va toujours au bouton */

/* ÉQUIPEMENT — encadré sous le radar : en-tête RÉDUCTIBLE + 2 menus déroulants.
   Cadre = même esprit que le filtre de la bannière Aventuriers (contour dégradé animé). */
.duel-equip-bar {
    display: block;
    margin-top: 16px; padding: 10px 14px 12px;
    border: 3px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) padding-box,
        linear-gradient(135deg, var(--fond-wiki) 0%, var(--accent-neon) 50%, var(--fond-wiki) 100%) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: fluxMagiqueNaturel 8s ease infinite;
    transition: background 0.5s ease-in-out;
}
body.anim-reduites .duel-equip-bar { animation: none; }

.duel-equip-grille {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 10px 16px;
    align-items: start;
}
@media (max-width: 720px) {
    .duel-equip-grille { grid-template-columns: 1fr; }
    .duel-equip-vsep { display: none; }
}
.duel-equip-vsep {
    align-self: stretch; min-height: 34px; border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--accent-neon) 22%, var(--accent-neon) 78%, transparent);
    box-shadow: 0 0 10px -2px var(--accent-neon-halo);
}
.duel-equip-drop { position: relative; min-width: 0; }
.duel-equip-trigger {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 4px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px;
    color: var(--accent-neon);
    text-shadow: 0 0 6px var(--accent-neon-halo);
    transition: filter 0.2s ease, color 0.5s ease-in-out;
}
.duel-equip-trigger:hover { filter: brightness(1.3); }
/* les clics sur le texte ou la flèche vont au bouton (déroulé du menu) */
.duel-equip-trigger > * { pointer-events: none; }
.duel-equip-trigger-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-equip-trigger .sel-perso-chev { flex: none; transition: transform 0.2s ease; }
.duel-equip-trigger[aria-expanded="true"] .sel-perso-chev { transform: rotate(180deg); }
.duel-equip-pop {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px;
    max-height: 260px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--accent-neon) transparent;
}
/* sans ça, `display:flex` ci-dessus écrase le `[hidden]` du navigateur -> le menu ne se replie jamais */
.duel-equip-pop[hidden] { display: none !important; }
/* ouverture / fermeture PROGRESSIVE (piloté par animPop en JS) — durées synchronisées
   pour éviter que le contenu "chevauche" avant que la hauteur ait fini de s'ouvrir */
.duel-equip-pop.pop-anime {
    overflow: hidden;
    margin-top: 0;
    will-change: max-height, opacity;
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.28s ease,
                margin-top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.anim-reduites .duel-equip-pop.pop-anime { transition: none; }
.duel-equip-pop::-webkit-scrollbar { width: 7px; }
.duel-equip-pop::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-neon) 70%, transparent); border-radius: 7px; }
.duel-equip-pop .ligne-parametre {
    font-size: 0.78rem; align-items: center; gap: 10px;
    padding: 6px; min-height: 32px; border-radius: 10px;
    transition: background-color 0.2s ease;
}
.duel-equip-pop .ligne-parametre:hover { background: color-mix(in srgb, var(--accent-neon) 8%, transparent); }
.duel-equip-pop .texte-parametre { padding-top: 0; color: var(--accent-neon); text-shadow: 0 0 6px var(--accent-neon-halo); }
.duel-equip-pop .texte-parametre strong { color: var(--texte-principal); }
.duel-equip-vide { font-size: 0.76rem; opacity: 0.55; font-style: italic; }

/* statuts comparés : intégrés dans la box "Comparaison des Statuts", au-dessus de la légende */
.duel-radar .duel-stats {
    flex: none;
    margin: 6px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 22%, transparent);
}
.duel-stats { position: relative; }
.duel-stats-tete, .duel-stats-ligne {
    display: grid; grid-template-columns: 1fr minmax(96px, auto) 1fr; align-items: center;
}
.duel-stats-tete {
    font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.5px;
    text-transform: uppercase; opacity: 0.75; padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-neon) 35%, transparent);
    margin-bottom: 4px;
}
.duel-sc-a { text-align: right; color: var(--duel-a); }
.duel-sc-b { text-align: left; color: var(--duel-b); }
.duel-sc-mid { text-align: center; }
.duel-stats-ligne { padding: 7px 0; font-size: 0.86rem; }
.duel-stats-ligne + .duel-stats-ligne { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.duel-stat-nom {
    text-align: center; font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase;
    opacity: 0.7; padding: 0 6px;
}
.duel-v { font-variant-numeric: tabular-nums; font-weight: 600; opacity: 0.85; }
/* couleur des stats calquée sur la section Statuts : A = sa couleur de thème, B = la sienne,
   et les modificateurs d'équipement (le « (base+bonus) ») toujours en doré. */
.duel-v-a { text-align: right; color: var(--duel-a); }
.duel-v-b { text-align: left; color: var(--duel-b); }
.duel-v i { font-style: normal; font-size: 0.72rem; opacity: 0.85; color: #ffce54; }
.duel-v.gagne { opacity: 1; font-weight: 800; }
.duel-v-a.gagne { color: var(--duel-a); }
.duel-v-b.gagne { color: var(--duel-b); }
.duel-v-a.gagne::after { content: " \25B2"; font-size: 0.6em; vertical-align: 2px; }
.duel-v-b.gagne::before { content: "\25B2 "; font-size: 0.6em; vertical-align: 2px; }
.duel-stats-total {
    margin-top: 4px; font-size: 0.95rem;
    border-top: 1.5px solid color-mix(in srgb, var(--accent-neon) 45%, transparent) !important;
}
.duel-stats-total .duel-stat-nom { font-weight: 800; opacity: 0.9; }

/* ===== THÈME CLAIR : lisibilité des graphiques radar (statut + classement) ===== */
body.theme-light:not(.theme-vert) .zone-canvas-graphique {
    /* toile foncée -> le texte orange néon des axes et les courbes ressortent */
    background: rgba(38, 20, 6, 0.9);
}
/* le tableau de stats comparées : encadré foncé + intitulés en orange néon */
body.theme-light:not(.theme-vert) .duel-radar .duel-stats {
    background: rgba(38, 20, 6, 0.9);
    border-radius: 14px;
    padding: 12px 14px;
    border-bottom: none;
}
body.theme-light:not(.theme-vert) .duel-stats-tete,
body.theme-light:not(.theme-vert) .duel-stat-nom,
body.theme-light:not(.theme-vert) .duel-sc-mid {
    color: #ff9d4a;
    opacity: 1;
    text-shadow: 0 0 6px rgba(255, 140, 60, 0.45);
}
body.theme-light:not(.theme-vert) .duel-stats-tete { border-bottom-color: rgba(255, 150, 70, 0.4); }
body.theme-light:not(.theme-vert) .duel-stats-ligne + .duel-stats-ligne { border-top-color: rgba(255, 200, 150, 0.14); }
body.theme-light:not(.theme-vert) .duel-v { color: #ffe6cf; }
body.theme-light:not(.theme-vert) .duel-v-a,
body.theme-light:not(.theme-vert) .duel-v-a.gagne { color: #ff7a45; }
body.theme-light:not(.theme-vert) .duel-v-b,
body.theme-light:not(.theme-vert) .duel-v-b.gagne { color: #ffbf42; }
/* screen 3 : noms des équipements en orange néon */
body.theme-light:not(.theme-vert) .duel-equip-pop .texte-parametre strong {
    color: #ff9d4a;
    text-shadow: 0 0 6px rgba(255, 140, 60, 0.4);
}

/* =============================================================
   PAGE FAMILIAS — un grand bloc par familia (bannière + onglets)
============================================================= */
.familias-vide {
    text-align: center; padding: 40px 20px;
    color: var(--texte-secondaire); font-style: italic;
    font-family: 'Montserrat', sans-serif; font-size: 0.95rem;
}
.familia-bloc { margin-bottom: 14px; position: relative; }
.familia-bloc[hidden] { display: none; }
.familia-a-venir .familia-carte { opacity: 0.72; }

/* la carte est grande et laisse la tête du personnage dépasser en haut (overflow visible) */
.familia-carte {
    position: relative; padding: 0; overflow: visible;
    min-height: 640px;
    --masc: 320px;   /* largeur réservée à gauche pour le personnage */
    --falna: 260px;  /* largeur réservée à droite pour le logo néon */
}
/* #5 — FOND des box familia en dégradé ANIMÉ (le flux "fluxMagiqueNaturel" hérité de
   .carte-hud-divine anime maintenant AUSSI la couche intérieure) :
   thème sombre -> violet ; thème clair -> l'orange du menu des notifications. */
.familia-carte { background-size: 280% 280%, 400% 400% !important; }
body.theme-dark:not(.theme-vert) .familia-carte {
    background-image:
        linear-gradient(135deg, #150826 0%, #2a1050 35%, #431f8c 50%, #2a1050 65%, #150826 100%),
        linear-gradient(135deg, #0e071b 0%, #471A96 40%, #d946ef 50%, #471A96 60%, #0e071b 100%) !important;
}
body.theme-light:not(.theme-vert) .familia-carte {
    /* le fond devient foncé -> on éclaircit le texte et l'accent, comme le menu des notifs */
    --texte-principal: #fff3e4;
    --accent-neon: #ffd7ab;
    --accent-neon-halo: rgba(255, 205, 150, 0.55);
    background-image:
        linear-gradient(135deg, #7a3d10 0%, #a5571b 35%, #c47c2c 50%, #a5571b 65%, #7a3d10 100%),
        linear-gradient(135deg, #E6BF6C 0%, #ff3333 40%, #E07B16 50%, #ff3333 60%, #E6BF6C 100%) !important;
}
/* falna bien lisible sur ce fond orange foncé */
body.theme-light:not(.theme-vert) .familia-carte .familia-falna {
    background: #ffe9d2; opacity: 0.9;
}
/* "falna" néon décoratif à droite : même traitement que le logo de la cloche sur la roue —
   glyphe plein aux couleurs du thème + halo néon net (cœur clair, diffusion douce). */
.familia-falna {
    position: absolute; right: 18px; top: 50%;
    width: calc(var(--falna) - 24px); height: 86%;
    transform: translateY(-50%);
    pointer-events: none; z-index: 0;
    background: var(--accent-neon);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center right; mask-position: center right;
    -webkit-mask-size: contain; mask-size: contain;
    opacity: 0.82;
    filter:
        drop-shadow(0 0 1.5px color-mix(in srgb, #fff 70%, var(--accent-neon)))
        drop-shadow(0 0 7px var(--accent-neon))
        drop-shadow(0 0 20px var(--accent-neon-halo));
    /* apparaît / disparaît en fondu, comme les panneaux, au changement d'onglet */
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
body.anim-reduites .familia-falna { transition: none; }
/* personnage : ancré en bas à gauche, la tête déborde au-dessus des onglets */
.familia-mascotte {
    position: absolute; left: 10px; bottom: 12px;
    width: calc(var(--masc) - 20px); top: 44px;
    z-index: 1; pointer-events: none;
}
.familia-onglets, .familia-corps { position: relative; z-index: 2; }
.familia-onglets {
    display: flex; gap: 6px;
    padding: 14px 18px 0 var(--masc);   /* décalé à droite de la tête -> boutons cliquables */
}
.familia-corps { padding: 24px var(--falna) 30px var(--masc); }
.fam-onglet {
    -webkit-appearance: none; appearance: none;
    background: none; border: none; cursor: pointer;
    padding: 9px 16px; border-radius: 10px 10px 0 0;
    font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px;
    color: var(--texte-principal); opacity: 0.6;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fam-onglet:hover { opacity: 1; }
.fam-onglet.actif {
    opacity: 1;
    color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 12%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent-neon);
}
.fam-panneau { padding: 0; }
.fam-panneau[hidden] { display: none; }
.fam-panneau h3 { margin: 0; font-size: 1.3rem; }
/* changement d'onglet Profil <-> À propos : les informations apparaissent en fondu */
@keyframes famPanneauFondu {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fam-panneau:not([hidden]) { animation: famPanneauFondu 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.anim-reduites .fam-panneau:not([hidden]) { animation: none; }

/* cadre du personnage (occupe toute la .familia-mascotte) */
.fam-dieu-portrait {
    position: absolute; inset: 0; border-radius: 16px;
    background-size: cover; background-position: center top;
    border: 1px solid color-mix(in srgb, var(--accent-neon) 32%, transparent);
    box-shadow: 0 0 24px -10px var(--accent-neon-halo);
}
/* option "débord" : AUCUN cadre — le personnage est posé seul, la tête dépasse en haut.

   >>>>> POUR RÉGLER LA POSITION / LA TAILLE DE L'IMAGE <<<<<
   3 variables, à changer ici (pour toutes les familias) OU par familia dans
   script.js (objet `dieu` : imageX / imageY / imageH) :
     --img-x : décalage horizontal   (ex: -30px = vers la gauche, 40px = vers la droite)
     --img-y : décalage vertical     (ex: -20px = vers le haut,   30px = vers le bas)
     --img-h : hauteur de l'image     (ex: 130% = plus grand / tête qui dépasse plus ;
                                       100% = plus petit)
*/
.fam-dieu-portrait-debord {
    --img-x: 0px;
    --img-y: 0px;
    --img-h: 116%;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.fam-dieu-portrait-debord img {
    position: absolute; left: 50%; bottom: 0;
    transform: translate(calc(-50% + var(--img-x)), var(--img-y));
    width: auto; height: var(--img-h);
    max-width: none; max-height: none;
    display: block;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}
.fam-dieu-sous { margin: 2px 0 14px; font-size: 0.82rem; opacity: 0.8; font-weight: 500; }

.fam-champ { margin-top: 14px; }
.fam-champ:first-child { margin-top: 0; }
/* intitulés (description physique / mentale / arcanums / à propos / membres) :
   gras + dégradé néon adapté au thème + halo */
.fam-lbl {
    display: block; margin-bottom: 5px;
    font-size: 0.72rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-neon) 60%, #fff) 0%,
        var(--accent-neon) 45%,
        color-mix(in srgb, var(--accent-neon) 55%, var(--texte-principal)) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 6px var(--accent-neon-halo));
}
/* texte du profil : un peu plus gras, légère teinte néon + halo discret, adapté au thème */
.fam-champ p,
.fam-arcanums {
    margin: 0; font-size: 0.87rem; line-height: 1.58; font-weight: 500;
    color: color-mix(in srgb, var(--accent-neon) 16%, var(--texte-principal));
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-neon-halo) 45%, transparent);
    opacity: 1;
}
.fam-arcanums { padding-left: 18px; }
.fam-arcanums li { margin: 4px 0; }
.fam-arcanums li::marker { color: var(--accent-neon); }

/* Onglet « Membres » (3e onglet) : simple liste nom + rôle, sans photo — seule
   l'image d'Hestia reste. La falna est masquée sur cet onglet (voir plus bas) donc
   la liste dispose de toute la largeur : petites cartes, proportions sobres. */
.fam-membres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px; margin-top: 8px;
    align-items: start;   /* chaque carte = hauteur de son contenu */
}
.fam-membre {
    position: relative;
    padding: 11px 13px; border-radius: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--accent-neon) 15%, transparent),
            color-mix(in srgb, var(--accent-neon) 4%, transparent) 60%,
            color-mix(in srgb, var(--fond-carte) 28%, transparent)) padding-box,
        linear-gradient(150deg,
            color-mix(in srgb, var(--accent-neon) 62%, transparent) 0%,
            color-mix(in srgb, var(--accent-neon) 18%, transparent) 50%,
            color-mix(in srgb, var(--accent-neon) 48%, transparent) 100%) border-box;
    box-shadow: 0 6px 16px -14px rgba(0, 0, 0, 0.55);
}
.fam-membre-txt { min-width: 0; }
.fam-membre-txt strong {
    display: block; font-size: 0.9rem; line-height: 1.3;
    color: color-mix(in srgb, var(--accent-neon) 30%, var(--texte-principal));
}
.fam-membre-txt p {
    margin: 4px 0 0; font-size: 0.8rem; line-height: 1.5; opacity: 0.85;
    overflow-wrap: break-word;
}

/* ---- trombinoscope : encadrés photo SOUS la liste, nom sous chaque image ---- */
.fam-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 108px));
    justify-content: start;
    gap: 16px 14px; margin-top: 8px;
}
.fam-galerie-item { margin: 0; }
.fam-galerie-img {
    position: relative;
    display: block; width: 100%; aspect-ratio: 3 / 4;
    border-radius: 12px;
    background-color: var(--fond-carte);
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55),
                0 0 18px -9px var(--accent-neon-halo),
                inset 0 0 20px -16px var(--accent-neon);
}
/* l'encadré : contour DÉGRADÉ (adapté au thème via --accent-neon), suit les angles arrondis */
.fam-galerie-img::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 2px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--accent-neon) 85%, transparent) 0%,
        color-mix(in srgb, var(--accent-neon) 25%, transparent) 50%,
        color-mix(in srgb, var(--accent-neon) 70%, transparent) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
}
.fam-galerie-img.sans-image {
    display: grid; place-items: center;
    background-image: linear-gradient(150deg,
        color-mix(in srgb, var(--accent-neon) 20%, var(--fond-carte)), var(--fond-carte));
}
.fam-galerie-img.sans-image::after {
    content: attr(data-ini);
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.7rem;
    color: color-mix(in srgb, var(--accent-neon) 70%, var(--texte-principal));
    opacity: 0.65;
}
.fam-galerie-nom {
    display: block; margin-top: 7px; text-align: center;
    font-size: 0.74rem; font-weight: 600; line-height: 1.25;
    color: color-mix(in srgb, var(--accent-neon) 25%, var(--texte-principal));
}

/* Sur l'onglet « Membres » : on efface la falna décorative (en fondu, pas en coupure)
   et on récupère son couloir de droite -> la liste a toute la largeur. */
.familia-carte[data-onglet="membres"] .familia-falna { opacity: 0; }
.familia-carte[data-onglet="membres"] .familia-corps { padding-right: 40px; }

/* ---- bouton « copier le lien » (ancres partageables) ---- */
.copier-lien {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    color: var(--accent-neon);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    background: color-mix(in srgb, var(--accent-neon) 10%, transparent);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.copier-lien:hover { background: color-mix(in srgb, var(--accent-neon) 22%, transparent); transform: translateY(-1px); box-shadow: 0 0 12px -4px var(--accent-neon-halo); }
.copier-lien.ok { color: #4ade80; border-color: #4ade80; background: rgba(74, 222, 128, 0.15); }
.copier-lien-familia { position: absolute; top: 16px; right: 16px; z-index: 4; }
.copier-lien-banniere { position: absolute; top: 18px; right: 18px; z-index: 6; }

/* ---- menu « aller à… » sur le côté de chaque bannière de familia (#8) ----
   Posé en position:absolute sur la .familia-bloc (PAS dans la bannière, qui est
   overflow:hidden) : il reste ainsi ancré au bouton et défile avec la page
   comme n'importe quel menu déroulant, sans aucun repositionnement JS. */
.familia-banniere-nav {
    position: absolute; top: 26px; right: 30px; z-index: 5;
    width: min(280px, calc(100% - 60px));
    overflow: visible;   /* .sommaire-banniere-tri est overflow:hidden -> il tronquerait le menu */
}
.familia-banniere-nav h4 {
    font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: #fff;
    margin-bottom: 10px; letter-spacing: 1px;
}
.fam-nav-trigger { font-size: 0.8rem; }
/* le menu : enfant absolu du wrapper, ancré sous le bouton (surcharge le position:fixed
   de .sel-perso-menu) */
.familia-banniere-nav .fam-nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    width: auto; max-height: 340px; overflow-y: auto;
}
.fam-nav-menu .fam-nav-fam { font-weight: 700; }
.fam-nav-menu .fam-nav-sous {
    padding-left: 22px; font-size: 0.76rem; opacity: 0.82;
}
.fam-nav-menu .fam-nav-sous:hover { opacity: 1; }
.fam-nav-menu .fam-nav-vide { opacity: 0.55; font-style: italic; cursor: default; }
/* menu accroché au <body> (bannière principale, overflow:hidden) : position:fixed + scroll auto */
.fam-nav-menu-fixe { position: fixed; overflow-y: auto; }

/* --- filtre de la bannière « Registre des Familias » : sous-onglets + 2 menus déroulants --- */
.familias-sous-onglets {
    display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.fam-sous-onglet {
    -webkit-appearance: none; appearance: none;
    flex: 1 1 auto; min-width: 0;
    padding: 7px 10px; border-radius: 9px;
    font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.3px;
    cursor: pointer; white-space: nowrap;
    color: var(--texte-principal);
    background: color-mix(in srgb, var(--accent-neon) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-neon) 30%, transparent);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.fam-sous-onglet:hover { background: color-mix(in srgb, var(--accent-neon) 16%, transparent); }
.fam-sous-onglet.actif {
    color: var(--accent-neon);
    background: color-mix(in srgb, var(--accent-neon) 18%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent-neon), 0 0 12px -5px var(--accent-neon-halo);
}
.familias-nav-dd { margin-top: 8px; }
.familias-nav-dd .fam-nav-trigger { width: 100%; }
/* petit flash quand on arrive sur la cible via le menu */
@keyframes famCibleFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    30%      { box-shadow: 0 0 0 2px var(--accent-neon), 0 0 26px -4px var(--accent-neon-halo); }
}
.fam-cible-flash { animation: famCibleFlash 1.4s ease; border-radius: 14px; }
body.anim-reduites .fam-cible-flash { animation: none; }

/* portrait de divinité manquant : lettre initiale sur fond dégradé */
.fam-dieu-portrait.sans-image {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--accent-neon) 22%, var(--fond-carte)),
        var(--fond-carte));
}
.fam-dieu-portrait.sans-image::after {
    content: attr(data-ini);
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: 'Cinzel', serif; font-weight: 700;
    color: color-mix(in srgb, var(--accent-neon) 70%, var(--texte-principal));
    opacity: 0.6;
    font-size: 3rem;
}

/* écrans étroits : le personnage repasse en haut du bloc, plus de réservation latérale */
@media (max-width: 900px) {
    .familia-carte { overflow: hidden; min-height: 0; --masc: 24px; --falna: 26px; }
    .familia-falna { display: none; }
    .familia-mascotte {
        position: relative; inset: auto; left: auto; top: auto; bottom: auto;
        width: min(280px, 70%); height: 340px; margin: 16px auto 0;
    }
    .familia-onglets { padding-left: 18px; }
    .familia-corps { padding: 22px 22px 26px; }
    .fam-dieu-portrait-debord img { height: 100%; }
    .familia-banniere-nav {
        position: relative; top: auto; right: auto;
        width: calc(100% - 44px); margin: 0 22px 10px;
    }
    .fam-membres { grid-template-columns: 1fr; margin-right: 0; }
}

/* =============================================================
   PAGE BESTIAIRE : SCHÉMA HOLOGRAPHIQUE DU DONJON (1 -> 50)
   Rempli par moduleBestiaire() dans script.js.
   - .donjon-tour empile 10 "tranches" de 5 étages (div role=button,
     PAS des <button> -> elles contiennent des <button class="de-etage">
     et un <button> ne peut pas être imbriqué dans un autre <button>).
   - Chaque tranche porte ses propres teintes via les variables inline
     --tr-h (teinte HSL) et --tr-larg (largeur, tour qui se resserre).
   - Le panneau de droite (#bestiaire-panneau) réutilise .carte-classe
     (cartes de classes/races) pour la fiche de monstre retournable.
============================================================= */
.bestiaire-intro {
    text-align: center; max-width: 640px; margin: 0 auto 6px; opacity: 0.8;
}

.donjon-holo-layout {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 36px; flex-wrap: wrap; margin-top: 30px;
}

.donjon-holo { flex: 1 1 380px; max-width: 460px; display: flex; flex-direction: column; align-items: center; }

.donjon-entree {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: 2px;
    font-size: 0.76rem; color: var(--accent-neon);
    text-shadow: 0 0 8px var(--accent-neon-halo);
    opacity: 0.9; margin-bottom: 6px;
}
.donjon-entree svg { width: 16px; height: 16px; animation: donjonFlecheEntree 1.6s ease-in-out infinite; }
@keyframes donjonFlecheEntree {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(4px); opacity: 1; }
}

.donjon-tour { width: 100%; display: flex; flex-direction: column; align-items: center; }

.donjon-abime {
    margin-top: 10px; font-size: 0.72rem; letter-spacing: 1px; opacity: 0.45;
    font-family: 'Cinzel', serif; text-align: center;
}

/* --- une tranche d'étages (ex: "Étages 1 - 5") --- */
.donjon-tranche {
    position: relative; width: var(--tr-larg, 100%);
    min-height: 50px; margin-bottom: 7px; padding: 10px 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 16px; cursor: pointer; overflow: hidden;
    border: 1.5px solid hsla(var(--tr-h), 85%, 62%, 0.55);
    /* fond opaque (var(--fond-box)) SOUS la teinte de la tranche : la lisibilité du
       texte ne dépend plus de la luminosité de la teinte (qui peut devenir très
       claire selon l'étage) — la teinte n'est plus qu'un voile par-dessus. */
    background:
        repeating-linear-gradient(0deg, hsla(var(--tr-h), 85%, 65%, 0.07) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, hsla(var(--tr-h), 85%, 55%, 0.34), hsla(var(--tr-h), 85%, 40%, 0.20)),
        linear-gradient(var(--fond-box), var(--fond-box));
    box-shadow: 0 0 14px -4px hsla(var(--tr-h), 90%, 60%, 0.55), inset 0 0 18px -10px hsla(var(--tr-h), 90%, 65%, 0.7);
    transition: min-height 0.5s ease, box-shadow 0.3s ease, opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* état de départ ("pas encore déroulé") -> révélé en cascade par moduleBestiaire()
   à l'arrivée sur la page (effet "hologramme qui se déploie") */
.donjon-tranche.pas-encore {
    opacity: 0; transform: scaleY(0.25) translateY(-16px); transform-origin: top center;
    pointer-events: none;
}
body.anim-reduites .donjon-tranche.pas-encore { transition: none; opacity: 1; transform: none; }
.donjon-tranche::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(100deg, transparent 32%, hsla(var(--tr-h), 100%, 78%, 0.4) 50%, transparent 68%);
    background-size: 220% 100%; opacity: 0;
    transition: opacity 0.3s ease;
    animation: balayageHoloContinu 4.5s linear infinite;
}
.donjon-tranche:hover, .donjon-tranche:focus-visible {
    box-shadow: 0 0 20px -2px hsla(var(--tr-h), 90%, 65%, 0.8), inset 0 0 22px -10px hsla(var(--tr-h), 90%, 70%, 0.85);
}
.donjon-tranche:hover::after, .donjon-tranche.actif::after { opacity: 0.55; }
.donjon-holo-layout.zoom-actif .donjon-tranche:not(.actif) {
    opacity: 0.4; transform: scale(0.97); filter: saturate(0.7);
}
.donjon-tranche.actif { min-height: 232px; justify-content: flex-start; padding-top: 16px; }

.dt-etiquette {
    position: relative; z-index: 1;
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.4px;
    color: hsl(var(--tr-h) 90% 72%); text-shadow: 0 0 8px hsla(var(--tr-h), 90%, 60%, 0.65);
}
.dt-sous {
    position: relative; z-index: 1;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.75; margin-top: 2px;
}

/* --- les étages, révélés à l'intérieur de la tranche active --- */
.donjon-etages {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 94%; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
}
.donjon-tranche.actif .donjon-etages { max-height: 140px; opacity: 1; margin-top: 14px; }
.de-etage {
    -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
    padding: 7px 14px; border-radius: 20px; color: var(--texte-principal);
    background: rgba(0, 0, 0, 0.28); border: 1px solid hsla(var(--tr-h), 85%, 70%, 0.55);
    font-size: 0.76rem; font-weight: 600;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
body.theme-light .de-etage { background: rgba(255, 255, 255, 0.4); }
.de-etage:hover { transform: translateY(-2px); box-shadow: 0 0 10px hsla(var(--tr-h), 90%, 65%, 0.7); }
.de-etage.actif { background: hsla(var(--tr-h), 90%, 55%, 0.92); color: #0c0316; box-shadow: 0 0 14px hsla(var(--tr-h), 95%, 65%, 0.85); }

body.anim-reduites .donjon-tranche::after { animation: none !important; opacity: 0.12; }

@media (max-width: 860px) {
    .donjon-holo-layout { flex-direction: column; align-items: center; }
    .bestiaire-panneau { position: static !important; width: 100%; max-width: 460px; }
}

/* --- le panneau de droite : liste des menaces + fiche retournable --- */
.bestiaire-panneau {
    flex: 1 1 380px; max-width: 480px; min-height: 260px;
    position: sticky; top: 100px;
}
.bp-placeholder { text-align: center; opacity: 0.6; padding: 30px 10px; font-size: 0.9rem; }
/* apparition fluide de tout le contenu du panneau à chaque étage cliqué */
.bp-corps { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.bp-corps.visible { opacity: 1; transform: translateY(0); }
.bp-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bp-entete h3 { font-family: 'Cinzel', serif; margin: 0; }
.bp-sous { font-size: 0.74rem; opacity: 0.7; margin-top: 3px; }
.bp-fermer {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    background: transparent; border: 1px solid var(--accent-neon); color: var(--accent-neon); font: inherit;
}
.bp-vide-etage { text-align: center; opacity: 0.65; font-size: 0.85rem; padding: 16px 6px; }
.bp-liste-monstres {
    list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 8px;
    max-height: 250px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--accent-neon) transparent;
}
.bp-liste-monstres::-webkit-scrollbar { width: 6px; }
.bp-liste-monstres::-webkit-scrollbar-thumb { background: var(--accent-neon-halo); border-radius: 3px; }
.bp-monstre-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-radius: 12px; cursor: pointer; font: inherit; text-align: left;
    color: var(--texte-principal); background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, border-color 0.2s ease;
}
body.theme-light .bp-monstre-item { background: rgba(255, 255, 255, 0.3); }
.bp-monstre-item:hover, .bp-monstre-item.actif { border-color: var(--accent-neon); background: hsla(var(--tr-h, 300), 80%, 55%, 0.16); }
.bp-danger-tag {
    flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.bp-fiche {
    margin-top: 6px; width: 230px; max-width: 100%; margin-left: auto; margin-right: auto;
    opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.bp-fiche.visible { opacity: 1; transform: translateY(0); }
.bp-fiche:empty { margin: 0; }

/* fiche monstre : réutilise les cartes de classe (.carte-classe) telles quelles, juste une hauteur dédiée */
.carte-monstre { aspect-ratio: 25 / 34; }

/* "tranche de Statuts" (force/vitesse/résistance/magie/dextérité) en tête du dos de la fiche */
.bd-stats-ligne {
    display: flex; flex-wrap: wrap; gap: 5px 8px; justify-content: center;
    padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bd-stat {
    font-size: 0.66rem; letter-spacing: 0.3px; color: var(--texte-principal); opacity: 0.85;
}
.bd-stat b { color: var(--accent-neon); font-family: 'Cinzel', serif; }
.bd-decouverte {
    margin: 2px 0 0; font-size: 0.68rem; opacity: 0.75; font-style: italic;
}

/* wheel-scroll robuste au dos des cartes (.carte-classe et .carte-monstre) : le
   défilement interne ne doit jamais "fuiter" vers le défilement de la page */
.cc-verso { overscroll-behavior: contain; }

/* =============================================================
   BESTIAIRE : formulaire public "Signaler une découverte"
   (communaute.js -> monterBestiaireForm()) + outils staff associés
============================================================= */
.bloc-decouverte { margin-top: 34px; }
.bd-form-intro { font-size: 0.85rem; opacity: 0.8; margin: 2px 0 4px; }
.bd-form-grille { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.bd-form-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-form-stats input:not([type="checkbox"]) { flex: 1 1 100px; min-width: 90px; }
@media (max-width: 520px) { .bd-form-grille { grid-template-columns: 1fr; } }

/* --- espace staff : boîte des découvertes à valider --- */
.staff-decouverte-item { padding: 12px 14px; }
.staff-decouverte-form { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.staff-decouverte-form .bd-form-grille { grid-template-columns: 90px 1fr 1fr; }
@media (max-width: 620px) { .staff-decouverte-form .bd-form-grille { grid-template-columns: 1fr; } }
.staff-decouverte-form textarea, .staff-decouverte-form input:not([type="checkbox"]), .staff-decouverte-form select,
#staff-bestiaire-choix {
    width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.22); color: var(--texte-principal);
}
body.theme-light .staff-decouverte-form textarea, body.theme-light .staff-decouverte-form input:not([type="checkbox"]),
body.theme-light .staff-decouverte-form select, body.theme-light #staff-bestiaire-choix {
    background: #f7ecd4; color: #2a1400; border-color: rgba(0, 0, 0, 0.12);
}
.staff-decouverte-form textarea:focus, .staff-decouverte-form input:focus:not([type="checkbox"]), .staff-decouverte-form select:focus,
#staff-bestiaire-choix:focus { outline: none; border-color: var(--accent-neon); }
#staff-bestiaire-choix { margin: 4px 0 8px; }
.staff-decouverte-brut {
    font-size: 0.76rem; opacity: 0.8; background: rgba(0, 0, 0, 0.18); border-radius: 8px;
    padding: 8px 10px; margin: 4px 0;
}
.staff-code {
    max-height: 220px; overflow: auto; font-size: 0.7rem; line-height: 1.5;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--accent-neon); border-radius: 8px;
    padding: 10px; white-space: pre-wrap; word-break: break-word; margin: 6px 0;
}
body.theme-light .staff-code { background: rgba(255, 255, 255, 0.55); }
.staff-decouverte-note { font-size: 0.72rem; opacity: 0.7; margin: 2px 0 6px; }

/* =============================================================
   ESPACE STAFF : onglets principaux (Modération / Modifications du wiki)
   + boîtes "Modifications du wiki" (Bestiaire / Familias / Classes & Races)
============================================================= */
.staff-nav-principale {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px;
}
.staff-nav-onglet {
    -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
    padding: 10px 20px; border-radius: 30px; font-weight: 700; font-size: 0.88rem;
    background: rgba(0, 0, 0, 0.22); color: var(--texte-principal);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.theme-light .staff-nav-onglet { background: rgba(255, 255, 255, 0.35); }
.staff-nav-onglet:hover { border-color: var(--accent-neon); }
.staff-nav-onglet.actif {
    background: var(--accent-neon); border-color: var(--accent-neon); color: #0c0316;
    box-shadow: 0 0 14px -2px var(--accent-neon-halo);
}
.staff-vue[hidden] { display: none; }
.staff-modifs-titre {
    font-family: 'Cinzel', serif; margin: 28px 0 4px; font-size: 1.15rem;
    display: flex; align-items: center; gap: 8px;
}
.staff-modifs-titre:first-child { margin-top: 18px; }

/* boîte "Modifications du wiki" : PAS de max-height (contrairement à .staff-box-forme
   de la Modération) — elle a toute la place de sa propre sous-page, pas besoin de
   comprimer son contenu dans une grille serrée (c'était le bug des champs qui
   débordaient hors du cadre néon). */
#page-staff .staff-box-modif { display: flex; flex-direction: column; }

.staff-check {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem;
    cursor: pointer; user-select: none; padding: 6px 4px;
}
.staff-check input {
    -webkit-appearance: none; appearance: none; margin: 0; flex: none;
    width: 18px; height: 18px; border-radius: 5px; position: relative;
    background: var(--fond-carte);
    border: 1.5px solid color-mix(in srgb, var(--accent-neon) 45%, transparent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.staff-check input:hover { border-color: var(--accent-neon); box-shadow: 0 0 8px -2px var(--accent-neon-halo); }
.staff-check input:focus-visible { outline: 2px solid var(--accent-neon); outline-offset: 2px; }
.staff-check input:checked {
    background: var(--accent-neon); border-color: var(--accent-neon);
    box-shadow: 0 0 10px -2px var(--accent-neon-halo);
}
.staff-check input:checked::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px;
    border: solid #0c0316; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.fam-form-membre, .cr-form-meca { padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, 0.1); }
.cr-form-meca textarea { flex: 2 1 220px; }