/* CHARM · panel staff dans la D.A. des nouveaux menus (chocogrenouille d'Échap, livre de notes) :
   boîtes nuit au double liseré doré, titres de section en étiquette entre volutes, boutons dorés comme
   « Continuer », boutons secondaires en lettres dorées comme « Annuler », champs sombres au liseré doré.
   Chargé après site.css et staff-v2.css : seules l'apparence des boutons, champs et panneaux change. */
:root { --da-or: #d3bb84; --da-or-clair: #f0dca6; --da-or-vif: #f3d48c; --da-liseré: #b89a6380; --da-liseré-doux: #b89a631f; --da-nuit: linear-gradient(145deg, #13203a, #0a111e); }

/* ---- Panneaux ---- */
.dossier-section, .indicateurs article, .profil-module, .journal-entree, .candidature, .jeu-carte, .eco-carte, .module-jeu {
    position: relative; background: var(--da-nuit) !important; border: 1px solid var(--da-liseré) !important;
    box-shadow: 0 18px 50px #0006, inset 0 0 40px #b89a630d; }
.dossier-section::before, .indicateurs article::before, .profil-module::before, .candidature::before, .jeu-carte::before, .eco-carte::before, .module-jeu::before {
    content: ""; position: absolute; inset: 6px; width: auto; height: auto; border: 1px solid var(--da-liseré-doux); background: none; pointer-events: none; }
.dossier-section { padding-top: 30px; margin-top: 26px; }
.dossier-section .dossier-section { background: #070d16cc !important; }
/* Titre de section : étiquette dorée posée sur le bord haut, entre volutes natives. */
.section-entete { background: none; padding-bottom: 10px; }
.section-entete h2 { position: absolute; top: -12px; left: 22px; margin: 0; padding: 3px 38px; white-space: nowrap; color: var(--da-or-clair);
    font: 12px CharmColumna, serif !important; letter-spacing: .18em; text-transform: uppercase; background: url('../natif/UI_T_LegendBack.png') center / 100% 100% no-repeat; }
.section-entete h2::before, .section-entete h2::after { content: ""; position: absolute; top: 50%; width: 24px; height: 12px; margin-top: -6px; background: url('../natif/UI_T_GoldLeaf_Flourish.png') center / contain no-repeat; }
.section-entete h2::before { left: 8px; transform: scaleX(-1); } .section-entete h2::after { right: 8px; }
.section-entete:has(h2:only-child) { padding: 0; margin: 0; }
.indicateurs article { padding: 22px 18px; border-bottom: 1px solid var(--da-liseré) !important; }
.indicateurs strong { color: var(--da-or-clair); }
.journal-entree { border-left: 1px solid var(--da-liseré) !important; }

/* ---- Boutons ---- */
.bouton-principal, .staff-main .bouton-principal, .page-jeu .bouton-principal {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 10px 20px; border: 0 !important; border-image: none !important;
    background: linear-gradient(140deg, #d3bb84, #886d3c) !important; color: #111723 !important; text-shadow: none;
    font: 12px CharmColumna, serif !important; letter-spacing: .1em !important; text-transform: uppercase !important;
    box-shadow: 0 8px 26px #b89a6322; cursor: pointer; transition: filter .25s, transform .25s; }
.bouton-principal:hover:not(:disabled), .staff-main .bouton-principal:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); color: #111723 !important; }
.bouton-principal:disabled { filter: grayscale(.5) brightness(.65); cursor: default; }
.bouton-texte, .staff-main .bouton-texte {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 6px; border: 0; background: none; color: var(--da-or) !important;
    font: 11px CharmColumna, serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; cursor: pointer; transition: color .2s; }
.bouton-texte::after { display: none; }
.bouton-texte:hover:not(:disabled) { color: #fff0c7 !important; }
.bouton-texte:disabled { opacity: .45; }
/* Filtres et onglets : liseré doré fin, l'actif devient doré comme un bouton principal. */
.filtre { border: 1px solid #b89a6355 !important; background: #0a111e !important; color: #efe4c9 !important; padding: 7px 13px;
    font: 11px CharmColumna, serif !important; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.filtre:hover { border-color: var(--da-or) !important; color: #fff0c7 !important; }
.filtre.actif:not([data-statut]) { border-color: transparent !important; background: linear-gradient(140deg, #d3bb84, #886d3c) !important; color: #111723 !important; }
.filtre .nb { background: #0006; color: inherit; }
.badge { border: 1px solid #b89a6355 !important; background: #0a111e !important; font: 11px CharmColumna, serif; letter-spacing: .06em; }
.fermer-jeu { border: 1px solid var(--da-liseré) !important; background: var(--da-nuit) !important; color: var(--da-or) !important; font: 11px CharmColumna, serif !important; letter-spacing: .14em; text-transform: uppercase; }

/* ---- Champs ---- */
.staff-main input:not([type=checkbox]):not([type=radio]):not([type=range]), .staff-main select, .staff-main textarea {
    background: #070d16 !important; border: 1px solid #b89a6345 !important; border-radius: 0; color: #efe4c9; color-scheme: dark; transition: border-color .2s, box-shadow .2s; }
.staff-main input:focus, .staff-main select:focus, .staff-main textarea:focus { outline: none; border-color: var(--da-or) !important; box-shadow: 0 0 0 3px #b89a6322; }
.staff-main select option { background: #0a111e; color: #efe4c9; }
.staff-main input[type=checkbox] { accent-color: var(--da-or); }

/* ---- Listes ---- */
.candidature-ligne { background: #0a111e !important; border: 1px solid #b89a632e !important; transition: border-color .2s, background .2s; }
.candidature-ligne:hover, .candidature-ligne.actif { border-color: var(--da-or) !important; background: #b89a6314 !important; box-shadow: inset 3px 0 0 var(--da-or); }
.utilisateur-carte { border: 1px solid transparent; }
.utilisateur-carte:hover { border-color: #b89a6355; background: linear-gradient(180deg, #b89a6314, transparent); }
.objet-carte { background: var(--da-nuit) !important; border: 1px solid #b89a6355 !important; }
.ligne, .permission-ligne { border-bottom-color: #b89a631c !important; }
.staff-nav .rubrique.actif { background: linear-gradient(90deg, #b89a6326, transparent) !important; box-shadow: inset 2px 0 0 var(--da-or); }
#message:not(:empty) { padding: 10px 14px; border: 1px solid var(--da-liseré); background: var(--da-nuit); color: var(--da-or-clair); }
#message.erreur { color: #f2b1a5 !important; border-color: #d0574a77; }