/* ============================================================
   Dashboard — thème "dimension" : nuit violette, verre, étoiles
   ============================================================ */
:root {
  --vide: #070414;          /* fond de l'espace */
  --verre: rgba(22, 13, 52, 0.66);
  --verre-fort: rgba(17, 10, 40, 0.9);
  --bord: rgba(176, 148, 255, 0.16);
  --bord-fort: rgba(176, 148, 255, 0.34);
  --nebuleuse: #a855f7;     /* violet principal */
  --nebuleuse-clair: #c79bff;
  --azur: #6d7cff;          /* bleu galaxie */
  --etoile: #f1ecff;        /* texte */
  --brume: #a79dcc;         /* texte secondaire */
  --vert: #4ade80;
  --orange: #fbbf24;
  --rouge: #fb7185;
  --rayon: 14px;
  --rayon-petit: 9px;
  --barre: 252px;
  --police-titre: 'Unbounded', 'Segoe UI', sans-serif;
  --police: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--vide);
  color: var(--etoile);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--nebuleuse-clair); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--nebuleuse-clair); outline-offset: 2px; }

/* L'image de fond reste fixe ; un voile la fonce pour garder le texte lisible */
.fond {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 4, 20, 0.35) 0%, rgba(7, 4, 20, 0.78) 45%, rgba(7, 4, 20, 0.92) 100%),
    url('fond.jpg') center top / cover no-repeat;
}

/* ------------------------------------------------------------ Barre latérale */
.barre {
  position: fixed; inset: 0 auto 0 0; width: var(--barre); z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px;
  background: rgba(9, 5, 26, 0.82);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--bord);
}
.marque {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 18px; text-decoration: none; color: inherit;
}
.marque img { width: 42px; height: 42px; border-radius: 12px; background: #1c1240; }
.marque strong { display: block; font-family: var(--police-titre); font-size: 18px; letter-spacing: 0.01em; }
.marque small { display: block; color: var(--nebuleuse-clair); font-size: 13px; }

nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
nav .groupe { margin: 16px 12px 6px; font-size: 12px; font-weight: 600; color: var(--brume); opacity: 0.8; }
nav .groupe:first-child { margin-top: 0; }
nav a {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--rayon-petit);
  color: #d8d0f5; text-decoration: none; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
nav a svg { width: 19px; height: 19px; flex: none; opacity: 0.85; }
nav a:hover { background: rgba(168, 85, 247, 0.1); color: #fff; }
/* Élément actif : la "lueur d'orbite" — le seul effet appuyé de l'interface */
nav a.actif {
  color: #fff;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.3), rgba(109, 124, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(199, 155, 255, 0.35), 0 0 22px -6px rgba(168, 85, 247, 0.8);
}
nav a.actif::before {
  content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--nebuleuse-clair); box-shadow: 0 0 12px var(--nebuleuse);
}
.statut { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; font-size: 13px; color: var(--brume); }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.statut.hors-ligne .point { background: var(--rouge); box-shadow: 0 0 8px var(--rouge); }

/* ------------------------------------------------------------ Zone principale */
.principal { margin-left: var(--barre); min-height: 100vh; }
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 32px;
  background: linear-gradient(180deg, rgba(7, 4, 20, 0.85), rgba(7, 4, 20, 0));
}
.entete h1 { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 22px; flex: 1; }
#ouvrir-menu { display: none; }
.proprio {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--verre); border: 1px solid var(--bord);
  font-size: 14px;
}
.proprio img { width: 30px; height: 30px; border-radius: 50%; }
.proprio small { display: block; color: var(--brume); font-size: 12px; line-height: 1.2; }
.pastille-local { padding: 2px 8px; border-radius: 999px; background: rgba(74, 222, 128, 0.14); color: var(--vert); font-size: 12px; font-weight: 600; }

main { padding: 8px 32px 64px; max-width: 1280px; }
main:focus, main:focus-visible { outline: none; }

/* ------------------------------------------------------------ Blocs */
.panneau {
  background: var(--verre);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  backdrop-filter: blur(14px);
  padding: 20px;
}
.panneau + .panneau, .grille + .panneau, .panneau + .grille, .grille + .grille { margin-top: 18px; }
.panneau h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.panneau h2 svg { width: 19px; height: 19px; color: var(--nebuleuse-clair); }
.panneau .aide { margin: 0 0 16px; color: var(--brume); font-size: 14px; max-width: 70ch; }
.tete-panneau { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tete-panneau .aide { margin-bottom: 0; }

.grille { display: grid; gap: 18px; align-items: start; }
.grille > .panneau { margin-top: 0; }
.grille.stats > .panneau, .grille.trois > .panneau { align-self: stretch; }
.grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Accueil : bandeau qui laisse voir le décor */
.bandeau {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 36px 4px 30px;
}
.bandeau img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 1px var(--bord-fort), 0 0 40px -8px var(--nebuleuse); }
.bandeau h2 {
  margin: 0; font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(168, 85, 247, 0.5);
}
.bandeau p { margin: 6px 0 0; color: #d6cdf7; font-size: 16px; }
.bandeau .actions { margin-left: auto; }

.stat { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--bord-fort); }
.stat .icone {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(168, 85, 247, 0.16); color: var(--nebuleuse-clair);
}
.stat .icone svg { width: 24px; height: 24px; }
.stat .icone.bleu { background: rgba(109, 124, 255, 0.16); color: #a5b0ff; }
.stat .icone.orange { background: rgba(251, 191, 36, 0.14); color: var(--orange); }
.stat .icone.rouge { background: rgba(251, 113, 133, 0.14); color: var(--rouge); }
.stat .icone.vert { background: rgba(74, 222, 128, 0.14); color: var(--vert); }
.stat .valeur { font-size: 26px; font-weight: 700; line-height: 1.1; display: flex; align-items: center; gap: 6px; }
.stat .libelle { color: var(--brume); font-size: 14px; }

/* Titres de section de l'accueil + bascule de période */
.section-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.section-titre h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.section-titre h2 svg { width: 20px; height: 20px; color: var(--nebuleuse-clair); }
.section-titre p { margin: 0; color: var(--brume); font-size: 14px; flex-basis: 100%; }
.section-titre.staff { margin-top: 40px; padding-top: 22px; border-top: 1px dashed var(--bord-fort); }
.segment { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(8, 4, 24, 0.7); border: 1px solid var(--bord); }
.segment button { all: unset; cursor: pointer; padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--brume); }
.segment button.actif { background: linear-gradient(135deg, var(--nebuleuse), var(--azur)); color: #fff; }
.segment button:focus-visible { outline: 2px solid var(--nebuleuse-clair); }
#activite + .section-titre, #activite .grille + .grille { margin-top: 18px; }
.evolution { display: block; font-size: 12px; color: var(--brume); margin-top: 2px; }
.evolution.hausse { color: var(--vert); }
.evolution.baisse { color: var(--rouge); }
.grille.activite { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rang { width: 26px; text-align: center; flex: none; }

/* Graphique */
.graphique { position: relative; }
.graphique svg { display: block; overflow: visible; }
.graphique .grille-axe { stroke: rgba(176, 148, 255, 0.1); stroke-width: 1; }
.graphique .ligne-base { stroke: rgba(176, 148, 255, 0.35); stroke-width: 1; }
.graphique .texte-axe { fill: var(--brume); font-size: 12px; font-family: var(--police); }
.graphique .barre-graphique { fill: #a35cf5; }
.graphique .zone-survol { fill: transparent; cursor: default; }
.graphique .zone-survol.survol { fill: rgba(176, 148, 255, 0.08); }
.infobulle {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; min-width: 150px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: var(--verre-fort); border: 1px solid var(--bord-fort); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.infobulle span { color: var(--brume); }
.tableau-donnees { margin-top: 10px; }
.tableau-donnees summary { cursor: pointer; color: var(--brume); font-size: 14px; }
.tableau-donnees .tableau tbody tr { cursor: default; }
.mouvements { margin-top: 14px; }
.puce svg { width: 14px; height: 14px; }
.puce.jaune { background: rgba(253, 224, 71, 0.12); color: #fde68a; }
.tri { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--brume); white-space: nowrap; }
.tri select { width: auto; padding: 8px 10px; }
.emoji-actuel .emoji { width: 40px; height: 40px; }
.emoji-actuel { font-size: 32px; line-height: 1; }
label.bouton { position: relative; }

/* ------------------------------------------------------------ Listes */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(176, 148, 255, 0.08); }
.liste li:first-child { border-top: none; }
.liste .avatar, .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: #241a4d; object-fit: cover; }
.liste .corps { flex: 1; min-width: 0; }
.liste .corps strong { font-weight: 600; }
.liste .corps p { margin: 0; color: var(--brume); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .quand { color: var(--brume); font-size: 13px; white-space: nowrap; }
.liste li.cliquable { cursor: pointer; border-radius: var(--rayon-petit); padding-inline: 10px; }
.liste li.cliquable:hover { background: rgba(168, 85, 247, 0.08); }

.vide { text-align: center; padding: 28px 12px; color: var(--brume); }
.vide svg { width: 30px; height: 30px; opacity: 0.6; margin-bottom: 8px; }
.vide strong { display: block; color: var(--etoile); }

/* Tableau des membres */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 13px; font-weight: 600; color: var(--brume); padding: 8px 10px; }
.tableau td { padding: 10px; border-top: 1px solid rgba(176, 148, 255, 0.08); vertical-align: middle; }
.tableau tbody tr { cursor: pointer; }
.tableau tbody tr:hover td { background: rgba(168, 85, 247, 0.07); }
.tableau .membre { display: flex; align-items: center; gap: 12px; }
.tableau .membre small { display: block; color: var(--brume); }

.puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(176, 148, 255, 0.12); color: #ddd3ff; white-space: nowrap;
}
.puce .pastille { width: 8px; height: 8px; border-radius: 50%; }
.puce.rouge { background: rgba(251, 113, 133, 0.14); color: var(--rouge); }
.puce.orange { background: rgba(251, 191, 36, 0.14); color: var(--orange); }
.puce.vert { background: rgba(74, 222, 128, 0.14); color: var(--vert); }
.puce button { all: unset; cursor: pointer; display: grid; opacity: 0.7; }
.puce button:hover { opacity: 1; }
.puce button svg { width: 14px; height: 14px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }

.emoji { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em; object-fit: contain; }

/* ------------------------------------------------------------ Formulaires */
.barre-outils { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span { font-size: 14px; font-weight: 600; }
.champ small { color: var(--brume); font-size: 13px; }
input[type=text], input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%;
  background: rgba(8, 4, 24, 0.7);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  color: var(--etoile);
}
input:focus, select:focus, textarea:focus { border-color: var(--nebuleuse-clair); outline: none; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); }
textarea { resize: vertical; min-height: 110px; }
select option, select optgroup { background: #150d33; }
.recherche { position: relative; flex: 1; min-width: 220px; }
.recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--brume); }
.recherche input { padding-left: 40px; }
.formulaire { display: grid; gap: 16px; }
.formulaire.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formulaire .large { grid-column: 1 / -1; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--rayon-petit);
  border: 1px solid var(--bord-fort); background: rgba(168, 85, 247, 0.1);
  color: var(--etoile); font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.bouton svg { width: 17px; height: 17px; }
.bouton:hover { background: rgba(168, 85, 247, 0.22); border-color: var(--nebuleuse-clair); }
.bouton.principal-btn { background: linear-gradient(135deg, var(--nebuleuse), var(--azur)); border-color: transparent; }
.bouton.principal-btn:hover { filter: brightness(1.1); }
.bouton.danger { background: rgba(251, 113, 133, 0.12); border-color: rgba(251, 113, 133, 0.4); color: #ffc2cd; }
.bouton.danger:hover { background: rgba(251, 113, 133, 0.24); }
.bouton.discret { background: transparent; border-color: transparent; color: var(--brume); }
.bouton.discret:hover { color: var(--etoile); background: rgba(168, 85, 247, 0.1); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton-icone { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--brume); }
.bouton-icone:hover { background: rgba(168, 85, 247, 0.14); color: var(--etoile); }
.bouton-icone svg { width: 20px; height: 20px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres button {
  border: 1px solid var(--bord); background: transparent; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; color: var(--brume); font-weight: 600; font-size: 14px;
}
.filtres button.actif { background: rgba(168, 85, 247, 0.22); border-color: var(--nebuleuse-clair); color: #fff; }

/* Interrupteur */
.interrupteur { position: relative; width: 46px; height: 26px; flex: none; }
.interrupteur input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.interrupteur span { position: absolute; inset: 0; border-radius: 999px; background: rgba(176, 148, 255, 0.2); transition: background 0.2s; pointer-events: none; }
.interrupteur span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.interrupteur input:checked + span { background: var(--nebuleuse); }
.interrupteur input:checked + span::after { transform: translateX(20px); }
.interrupteur input:focus-visible + span { outline: 2px solid var(--nebuleuse-clair); outline-offset: 2px; }

.ligne-reglage { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(176, 148, 255, 0.08); }
.ligne-reglage:first-of-type { border-top: none; }
.ligne-reglage .texte { flex: 1; }
.ligne-reglage .texte strong { display: block; font-weight: 600; }
.ligne-reglage .texte small { color: var(--brume); font-size: 13px; }
.ligne-reglage input[type=number], .ligne-reglage input[type=text] { width: 140px; flex: none; }
.ligne-reglage select { width: 300px; flex: none; }

/* Barre d'enregistrement (apparaît quand il y a des changements) */
.barre-enregistrer {
  position: sticky; bottom: 18px; z-index: 15; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--rayon);
  background: var(--verre-fort); border: 1px solid var(--bord-fort);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------ Tiroir (fiche membre) */
.voile { position: fixed; inset: 0; background: rgba(4, 2, 12, 0.6); z-index: 40; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(560px, 100vw); overflow-y: auto;
  background: rgba(13, 8, 34, 0.97); border-left: 1px solid var(--bord-fort);
  padding: 24px; animation: glisser 0.22s ease-out;
}
@keyframes glisser { from { transform: translateX(40px); opacity: 0; } }
.tiroir .fermer { position: absolute; top: 16px; right: 16px; }
.fiche-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-right: 40px; }
.fiche-tete img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bord-fort); }
.fiche-tete h2 { margin: 0; font-size: 22px; }
.fiche-tete p { margin: 2px 0 6px; color: var(--brume); }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mini-stats div { background: rgba(168, 85, 247, 0.08); border: 1px solid var(--bord); border-radius: var(--rayon-petit); padding: 10px 12px; }
.mini-stats strong { display: flex; align-items: center; gap: 4px; font-size: 18px; }
.mini-stats small { color: var(--brume); font-size: 12px; }
.groupe-actions { margin-bottom: 18px; }
.groupe-actions h3 { font-size: 14px; color: var(--brume); font-weight: 600; margin: 0 0 8px; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 12px; }
.onglets button { all: unset; cursor: pointer; padding: 10px 14px; color: var(--brume); font-weight: 600; border-bottom: 2px solid transparent; }
.onglets button.actif { color: #fff; border-color: var(--nebuleuse-clair); }
.onglets button:focus-visible { outline: 2px solid var(--nebuleuse-clair); }

/* ------------------------------------------------------------ Modale */
.modale-fond { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 12, 0.7); }
.modale {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: rgba(16, 10, 40, 0.98); border: 1px solid var(--bord-fort); border-radius: 18px;
  padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px -20px var(--nebuleuse);
}
.modale h2 { margin: 0 0 6px; font-size: 19px; }
.modale > p { margin: 0 0 18px; color: var(--brume); }
.modale .actions { justify-content: flex-end; margin-top: 20px; }

/* ------------------------------------------------------------ Toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(16, 10, 40, 0.97); border: 1px solid var(--bord-fort);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: apparaitre 0.2s ease-out;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.succes svg { color: var(--vert); }
.toast.erreur { border-color: rgba(251, 113, 133, 0.5); }
.toast.erreur svg { color: var(--rouge); }
@keyframes apparaitre { from { transform: translateY(10px); opacity: 0; } }

/* ------------------------------------------------------------ Cartes à collectionner */
.raretes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rarete { border-radius: var(--rayon-petit); padding: 12px; background: rgba(8, 4, 24, 0.5); border: 1px solid var(--bord); border-top: 3px solid var(--c); }
.rarete strong { display: block; }
.rarete span { color: var(--brume); font-size: 13px; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.carte {
  all: unset; cursor: pointer; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: rgba(8, 4, 24, 0.75); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 24px -12px var(--c);
  transition: transform 0.15s, box-shadow 0.15s;
}
.carte:hover, .carte:focus-visible { transform: translateY(-3px); box-shadow: 0 0 30px -8px var(--c); }
.carte .visuel { aspect-ratio: 3 / 4; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #120a2e), #0a0619); display: grid; place-items: center; }
.carte .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte .visuel svg { width: 40px; height: 40px; opacity: 0.4; }
.carte .infos { padding: 10px 12px; }
.carte .infos strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .infos span { font-size: 13px; color: var(--c); font-weight: 600; }
.carte .infos small { display: block; color: var(--brume); font-size: 12px; }
.apercu-image { width: 120px; aspect-ratio: 3 / 4; border-radius: 10px; object-fit: cover; border: 1px solid var(--bord); background: #120a2e; }

/* Aperçu d'annonce façon Discord */
.apercu-discord { background: #2b2d31; border-radius: 10px; padding: 16px; color: #dbdee1; font-family: 'gg sans', 'Segoe UI', sans-serif; }
.apercu-discord .auteur { display: flex; gap: 12px; }
.apercu-discord .auteur img { width: 40px; height: 40px; border-radius: 50%; }
.apercu-discord .nom { font-weight: 600; color: #fff; }
.apercu-discord .nom em { font-style: normal; font-size: 11px; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }
.apercu-discord .mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; padding: 0 3px; border-radius: 3px; }
.apercu-discord .embed { margin-top: 6px; border-left: 4px solid var(--c, #5865f2); background: #232428; border-radius: 4px; padding: 10px 14px; max-width: 480px; }
.apercu-discord .embed h4 { margin: 0 0 6px; color: #fff; }
.apercu-discord .embed p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.apercu-discord .embed img { margin-top: 10px; border-radius: 4px; max-height: 220px; }
.apercu-discord .embed footer { margin-top: 8px; font-size: 12px; color: #b5bac1; }

.total-taux { font-weight: 700; }
.total-taux.faux { color: var(--rouge); }
.chargement { padding: 60px; text-align: center; color: var(--brume); }

/* ------------------------------------------------------------ Connexion */
body.non-connecte .barre, body.non-connecte .entete { display: none; }
body.non-connecte .principal { margin-left: 0; }
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.ecran-connexion .panneau { max-width: 480px; text-align: center; padding: 36px 32px; }
.ecran-connexion h1 { font-family: var(--police-titre); font-size: 30px; margin: 0 0 10px; }
.ecran-connexion p { color: #d6cdf7; }
.ecran-connexion code { background: rgba(176, 148, 255, 0.14); padding: 1px 6px; border-radius: 5px; word-break: break-all; }
.ecran-connexion ol { text-align: left; color: #d6cdf7; line-height: 1.7; }
.bouton.grand { padding: 13px 24px; font-size: 16px; margin: 10px 0; }
main.ecran-connexion { max-width: none; }

/* Navigation par niveau */
.groupe-nav { display: flex; flex-direction: column; gap: 2px; }
.proprio .bouton-icone { width: 30px; height: 30px; margin-left: 2px; }

/* Petits boutons, références, couleurs de sanction */
.bouton.petit { padding: 6px 12px; font-size: 13px; }
.actions.fin { justify-content: flex-end; flex-wrap: nowrap; }
.ref { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; color: var(--brume); white-space: nowrap; }
.id { color: var(--brume); opacity: 0.75; font-size: 12px; }
.bloc { display: block; }
.sous-titre { margin: 16px 0 8px; font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.texte-orange { color: var(--orange); font-weight: 600; }
.puce.bleu { background: rgba(109, 124, 255, 0.18); color: #b9c0ff; }
.puce.contour { background: transparent; border: 1px solid currentColor; }
.puce.contour.calme { color: var(--brume); border-color: rgba(176, 148, 255, 0.25); font-weight: 500; }
.carre { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--brume); flex: none; }
.type-ligne { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.vert .carre, .carre.vert { background: var(--vert); }
.orange .carre, .carre.orange { background: var(--orange); }
.bleu .carre, .carre.bleu { background: #8b97ff; }
.rose .carre, .carre.rose { background: #f9a8d4; }
.rouge .carre, .carre.rouge { background: var(--rouge); }

/* Tableau des membres : bord gauche selon le risque */
.tableau-membres tbody tr td:first-child { border-left: 3px solid transparent; }
.tableau-membres tr.risque-jaune td:first-child { border-left-color: #fde047; }
.tableau-membres tr.risque-orange td:first-child { border-left-color: var(--orange); }
.tableau-membres tr.risque-rouge td:first-child { border-left-color: var(--rouge); }
.info { display: inline-grid; vertical-align: -3px; cursor: help; color: var(--brume); }
.info svg { width: 15px; height: 15px; }
.tableau tr.sans-clic { cursor: default; }

/* Page Sanctions */
.tete-page { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tete-page .aide { margin: 0; color: var(--brume); }
.onglets-page { margin: 22px 0 14px; }
.onglets .compteur { color: var(--brume); font-weight: 500; margin-left: 4px; }
.filtres-sanctions .barre-outils { margin-bottom: 12px; }
.filtres .carre { margin-right: 4px; vertical-align: 0; }
.panneau.sans-marge { padding: 6px 8px; }
.tableau-sanctions .motif { max-width: 320px; }
.pied-tableau { margin: 10px 10px 4px; }
#liste-sanctions .vide { padding: 40px 12px; }

/* Fenêtre "Nouvelle sanction" */
.types-sanction { border: none; padding: 0; margin: 0; }
.types-sanction legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.types-sanction { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.type-sanction { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); cursor: pointer; font-weight: 600; font-size: 14px; }
.type-sanction input { position: absolute; opacity: 0; }
.type-sanction svg { width: 17px; height: 17px; }
.type-sanction.vert svg { color: var(--vert); }
.type-sanction.orange svg { color: var(--orange); }
.type-sanction.bleu svg { color: #8b97ff; }
.type-sanction.rose svg { color: #f9a8d4; }
.type-sanction.rouge svg { color: var(--rouge); }
.type-sanction:has(input:checked) { border-color: var(--nebuleuse-clair); background: rgba(168, 85, 247, 0.18); }
.type-sanction:has(input:focus-visible) { outline: 2px solid var(--nebuleuse-clair); outline-offset: 2px; }
.membre-choisi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon-petit); background: rgba(168, 85, 247, 0.1); border: 1px solid var(--bord); }
.membre-choisi strong { flex: 1; }
.suggestions { margin-top: 6px; }
.suggestions li { padding: 0; border: none; }
.suggestion { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--rayon-petit); }
.suggestion span { flex: 1; }
.suggestion small { color: var(--brume); }
.suggestion:hover, .suggestion:focus-visible { background: rgba(168, 85, 247, 0.14); }

/* Annonces : couleurs */
.choix-couleur { display: flex; gap: 8px; align-items: center; }
.choix-couleur input[type=color] { width: 48px; height: 42px; padding: 3px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); background: rgba(8, 4, 24, 0.7); cursor: pointer; flex: none; }
.choix-couleur input[type=text] { width: 120px; font-family: ui-monospace, Consolas, monospace; }
.choix-couleur input:invalid { border-color: var(--rouge); }
#favori.actif { color: #fde047; }
#favori.actif svg { fill: #fde047; }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.pastille-couleur { position: relative; }
.pastille-couleur [data-couleur] { width: 30px; height: 30px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.15); cursor: pointer; padding: 0; }
.pastille-couleur.choisie [data-couleur] { border-color: #fff; box-shadow: 0 0 0 2px var(--nebuleuse); }
.pastille-couleur .retirer { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #2a1d55; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: none; padding: 0; }
.pastille-couleur:hover .retirer, .pastille-couleur:focus-within .retirer { display: block; }

/* Mes cartes / classements */
.carte.inconnue { cursor: default; opacity: 0.55; filter: saturate(0.4); }
.carte.inconnue:hover { transform: none; }
.mystere { font-family: var(--police-titre); font-size: 44px; color: color-mix(in srgb, var(--c) 70%, #fff); opacity: 0.7; }
div.carte { cursor: default; }
.liste li.moi { background: rgba(168, 85, 247, 0.14); border-radius: var(--rayon-petit); padding-inline: 10px; }

/* ------------------------------------------------------------ Mobile */
@media (max-width: 1100px) {
  .grille.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raretes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .barre { transform: translateX(-100%); transition: transform 0.2s; }
  .barre.ouverte { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.7); }
  .principal { margin-left: 0; }
  #ouvrir-menu { display: grid; }
  .entete { padding: 12px 16px; }
  .entete h1 { font-size: 18px; }
  .proprio small, .proprio .nom-proprio { display: none; }
  main { padding: 4px 16px 48px; }
  .grille.deux, .grille.trois, .grille.activite, .formulaire.deux { grid-template-columns: minmax(0, 1fr); }
  .tri { margin-left: 0; }
  .tableau-membres .actions.fin { flex-direction: column; align-items: flex-end; }
  .ligne-reglage { flex-wrap: wrap; }
  .ligne-reglage select { width: 100%; }
  .tableau .masquer-mobile { display: none; }
  .raretes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau .actions { margin-left: 0; }
}
@media (max-width: 520px) {
  .grille.stats { grid-template-columns: minmax(0, 1fr); }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.groupe-nav .groupe:first-child { margin-top: 16px; }

/* ------------------------------------------------------------ Sections pliables */
details.pliable { padding: 0; }
details.pliable + details.pliable, .tete-page + details.pliable { margin-top: 12px; }
details.pliable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: var(--rayon);
}
details.pliable > summary::-webkit-details-marker { display: none; }
details.pliable > summary:hover { background: rgba(168, 85, 247, 0.06); }
details.pliable > summary:focus-visible { outline: 2px solid var(--nebuleuse-clair); outline-offset: -2px; }
.icone-pli { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(168, 85, 247, 0.16); color: var(--nebuleuse-clair); flex: none; }
.icone-pli svg { width: 19px; height: 19px; }
.titre-pli { flex: 1; min-width: 0; }
.titre-pli strong { display: block; font-size: 16px; }
.titre-pli small { color: var(--brume); font-size: 13px; }
.fleche-pli { width: 20px; height: 20px; color: var(--brume); transition: transform 0.2s; flex: none; }
details.pliable[open] > summary .fleche-pli { transform: rotate(180deg); }
details.pliable[open] > summary { border-bottom: 1px solid rgba(176, 148, 255, 0.1); border-radius: var(--rayon) var(--rayon) 0 0; }
.corps-pli { padding: 6px 20px 18px; }
.pliage { justify-content: flex-end; }
.pliage .bouton svg { width: 15px; height: 15px; }

/* Dans un formulaire (annonces) : sections plus légères */
.formulaire details.pliable { background: rgba(8, 4, 24, 0.35); backdrop-filter: none; margin: 0; }
.formulaire details.pliable > summary { padding: 12px 14px; }
.formulaire .icone-pli { width: 32px; height: 32px; }
.formulaire .corps-pli { padding: 12px 14px 16px; display: grid; gap: 16px; }

/* Mini-jeux */
.grille-jeux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 8px; }
.carte-jeu { border: 1px solid var(--bord); border-radius: var(--rayon-petit); padding: 4px 14px 10px; background: rgba(8, 4, 24, 0.35); }
.carte-jeu .ligne-reglage { flex-wrap: wrap; }
.carte-jeu .tete-jeu { border-bottom: 1px solid rgba(176, 148, 255, 0.1); }
.carte-jeu:has(.tete-jeu input:not(:checked)) > :not(.tete-jeu) { opacity: 0.45; }
.carte-jeu .ligne-reglage input[type=number] { width: 90px; }
.exemple-gain { margin: -4px 0 6px; font-size: 13px; color: var(--nebuleuse-clair); }

/* ------------------------------------------------------------ Niveaux & boosts */
.niveau-pastille {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; flex: none;
  font-weight: 700; font-size: 13px; white-space: nowrap;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(109, 124, 255, 0.32));
  border: 1px solid var(--bord-fort);
}
.bloc-niveau { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.niveau-grand {
  display: grid; place-items: center; width: 78px; height: 78px; flex: none; border-radius: 50%;
  font-family: var(--police-titre); font-size: 26px; line-height: 1;
  background: radial-gradient(circle at 30% 25%, var(--nebuleuse-clair), var(--nebuleuse) 55%, var(--azur));
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.45);
}
.niveau-grand small { font-family: var(--police); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: -10px; }
.corps-niveau { flex: 1; min-width: 0; display: grid; gap: 8px; }
.tete-niveau { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.barre-niveau { height: 12px; border-radius: 999px; background: rgba(176, 148, 255, 0.12); overflow: hidden; border: 1px solid var(--bord); }
.barre-niveau span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azur), var(--nebuleuse), var(--nebuleuse-clair)); transition: width .4s ease; }

.interrupteur-module { flex: 1; min-width: 260px; padding: 12px 16px; border: 1px solid var(--bord-fort); border-radius: var(--rayon); background: var(--verre); }

.liste-boosts { display: grid; gap: 8px; margin: 8px 0; }
.liste-boosts { justify-items: start; }
.ligne-boost { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 8px 6px 6px; border-radius: var(--rayon-petit); background: rgba(176, 148, 255, 0.06); border: 1px solid var(--bord); }
.ligne-boost .puce { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mult { display: inline-flex; align-items: center; gap: 4px; color: var(--brume); font-weight: 600; }
.mult input { width: 80px; }
.ajout-liste { width: 100%; margin-top: 8px; }
.champ > small { color: var(--brume); font-size: 13px; }
.champ .bouton.petit { margin-top: 8px; align-self: flex-start; }

.apercu-courbe { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.apercu-courbe div { display: grid; padding: 8px 10px; border-radius: var(--rayon-petit); background: rgba(176, 148, 255, 0.07); border: 1px solid var(--bord); }
.apercu-courbe span { color: var(--brume); font-size: 13px; }

.apercu-message { margin-top: 10px; padding: 12px 14px; border-radius: var(--rayon-petit); background: rgba(10, 6, 26, 0.6); border-left: 3px solid var(--nebuleuse); white-space: pre-wrap; overflow-wrap: anywhere; }
.apercu-message .mention { background: rgba(109, 124, 255, 0.3); color: #c9cdff; border-radius: 4px; padding: 0 3px; }

.ajout-recompense { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.ajout-recompense .champ { margin: 0; }
.ajout-recompense input { width: 110px; }
.ajout-recompense select { min-width: 220px; }

.corps-pli .grille.deux + .champ, .corps-pli .grille.deux + .grille.deux { margin-top: 16px; }

.pipette-seule { width: 56px; height: 36px; padding: 2px; border-radius: var(--rayon-petit); border: 1px solid var(--bord-fort); background: transparent; cursor: pointer; flex: none; }

@media (max-width: 700px) {
  .bloc-niveau { flex-direction: column; align-items: stretch; text-align: left; }
  .niveau-grand { width: 64px; height: 64px; font-size: 22px; }
  .ligne-reglage select { width: 100%; }
}

/* ------------------------------------------------------------ Économie */
.fourchette { display: flex; align-items: center; gap: 8px; flex: none; color: var(--brume); font-weight: 600; }
.ligne-reglage .fourchette input { width: 96px; }
.corps-pli .interrupteur-module { margin-bottom: 6px; }
[data-depend] { transition: opacity .2s ease; }
[data-depend].inactif { opacity: .4; pointer-events: none; }
.ajout-liste { max-width: 420px; }
.liste-boosts + .ajout-liste, .puces + .ajout-liste { margin-top: 10px; }
#eco-roles-boost { margin-top: 4px; }
@media (max-width: 700px) {
  .ligne-reglage:has(.fourchette) { flex-wrap: wrap; }
  .fourchette { width: 100%; }
  .ligne-reglage .fourchette input { flex: 1 1 0; min-width: 0; width: auto; }
}
#ajout-booster-eco { margin-top: 10px; }

/* ------------------------------------------------------------ Nouvelle sanction (grande fenêtre + aperçu Discord) */
.modale.large { width: min(1020px, 100%); }
.grille-sanction { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.grille-sanction > .formulaire { display: grid; gap: 14px; }
.colonne-apercu { position: sticky; top: 0; display: grid; gap: 10px; }
.sur-titre { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.sur-titre svg { width: 15px; height: 15px; }
.discord-msg { display: flex; gap: 12px; align-items: flex-start; }
.discord-msg > img, .discord-msg > .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.discord-corps { min-width: 0; flex: 1; }
.discord-tete { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.discord-tete strong { color: #fff; }
.discord-tete small { color: #949ba4; font-size: 12px; }
.tag-bot { font-size: 10px; font-weight: 700; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; }
.discord-embed { margin-top: 6px; border-left: 4px solid var(--c, #5865f2); background: #232428; border-radius: 4px; padding: 10px 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.discord-titre { display: block; color: #fff; margin-bottom: 6px; }
.discord-texte strong { color: #fff; }
.discord-texte code { background: #1e1f22; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.discord-texte .citation, .texte-entree .citation { display: block; border-left: 3px solid #4e5058; padding-left: 8px; }
.discord-champ { margin-top: 8px; display: grid; }
.discord-champ strong { color: #fff; font-size: 13px; }
.discord-champ span { color: #dbdee1; }
.outils-texte { display: flex; gap: 6px; flex-wrap: wrap; }
.outils-texte .bouton { min-width: 34px; justify-content: center; }
.lien-discret { font-weight: 500; font-size: 13px; margin-left: 6px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.case { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); cursor: pointer; font-size: 14px; }
.case:has(input:checked) { border-color: var(--nebuleuse-clair); background: rgba(168, 85, 247, 0.16); }
fieldset.champ { border: none; padding: 0; margin: 0; }
fieldset.champ legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }

/* Messages prédéfinis */
.zone-modeles { padding: 20px; }
.liste-modeles li { align-items: flex-start; }
.liste-modeles .puces { margin: 6px 0; }
.liste-modeles p { margin: 0; color: var(--brume); font-size: 13px; }

/* ------------------------------------------------------------ Logs en direct */
.filtres-journal .barre-outils { margin-bottom: 12px; align-items: center; }
.direct { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vert); white-space: nowrap; }
.point-direct { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pouls 1.8s infinite; }
.direct.arrete { color: var(--brume); }
.direct.arrete .point-direct { animation: none; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.filtres .compteur { opacity: .7; font-weight: 500; }
.journal { display: grid; gap: 8px; margin-top: 16px; }
.entree-journal { background: var(--verre); border: 1px solid var(--bord); border-left: 4px solid var(--c); border-radius: var(--rayon-petit); padding: 10px 14px; backdrop-filter: blur(10px); }
.entree-journal.nouvelle { animation: arrivee 1.6s ease; }
@keyframes arrivee { from { background: rgba(168, 85, 247, 0.28); transform: translateY(-4px); } to { background: var(--verre); transform: none; } }
.tete-entree { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tete-entree .puce { font-size: 12px; }
.tete-entree time { margin-left: auto; color: var(--brume); font-size: 12px; font-variant-numeric: tabular-nums; }
.texte-entree { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; }
.texte-entree code, .champs-entree code { background: rgba(0, 0, 0, .35); padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.champs-entree { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.champs-entree .large { grid-column: 1 / -1; }
.champs-entree small { display: block; color: var(--brume); font-size: 12px; font-weight: 600; }
.champs-entree span { font-size: 14px; overflow-wrap: anywhere; }
.pied-entree { display: block; margin-top: 6px; color: var(--brume); font-size: 12px; }
.actions.centre { justify-content: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .point-direct, .entree-journal.nouvelle { animation: none; } }

/* ------------------------------------------------------------ Permissions */
.defilement { overflow-x: auto; }
.tableau-permissions td, .tableau-permissions th { padding: 10px; }
.tableau-permissions .centre { text-align: center; width: 130px; }
.tableau-permissions td.centre .interrupteur { display: inline-flex; }
.groupe-permissions th { padding-top: 18px; color: var(--nebuleuse-clair); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; border-bottom: 1px solid var(--bord); }
.tableau-permissions tr:not(.groupe-permissions) td { border-bottom: 1px solid rgba(176, 148, 255, 0.08); }

@media (max-width: 860px) {
  .grille-sanction { grid-template-columns: minmax(0, 1fr); }
  .colonne-apercu { position: static; }
  .tableau-permissions .centre { width: 90px; }
}
#liste-sanctions { overflow-x: auto; }

/* ------------------------------------------------------------ Preuves (logs joints, tickets liés) */
.preuves-sanction { display: grid; gap: 16px; padding-top: 6px; border-top: 1px solid var(--bord); }
.bloc-preuve { display: grid; gap: 8px; }
.titre-preuve { font-size: 14px; font-weight: 600; }
.titre-preuve small { color: var(--brume); font-weight: 400; }
.preuves-choisies { display: grid; gap: 6px; }
.preuves-choisies p { margin: 0; }
.preuves-choisies .entree-journal { padding: 8px 12px; }
.bouton.large-btn { width: 100%; justify-content: center; }
.bouton.discret-plein { background: rgba(10, 6, 26, 0.55); border: 1px solid var(--bord); }
.bouton.discret-plein.actif { border-color: var(--nebuleuse-clair); }
.chercheur { display: grid; gap: 8px; padding: 12px; border-radius: var(--rayon-petit); background: rgba(10, 6, 26, 0.5); border: 1px solid var(--bord); }
.chercheur .barre-outils { gap: 8px; flex-wrap: wrap; }
.chercheur .recherche { flex: 1; min-width: 180px; }
.chercheur input[type=url] { flex: 1; min-width: 180px; }
.case-simple { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--brume); cursor: pointer; }
.resultats { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.resultat-log { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--verre); border: 1px solid var(--bord); border-left: 3px solid var(--c, var(--bord-fort)); }
.resultat-log .corps { flex: 1; min-width: 0; }
.resultat-log strong { display: block; font-size: 14px; }
.resultat-log small { color: var(--brume); font-size: 12px; }
.resultat-log p { margin: 2px 0 0; font-size: 13px; color: var(--brume); overflow-wrap: anywhere; }
.puce.ticket svg { width: 14px; height: 14px; }
.puce.ticket a { color: inherit; text-decoration: none; }
.puce-preuves { font: inherit; font-size: 12px; font-weight: 600; color: var(--etoile); background: rgba(109, 124, 255, 0.18); border: 1px solid var(--bord-fort); border-radius: 999px; padding: 1px 8px; cursor: pointer; vertical-align: 1px; }
.puce-preuves:hover { background: rgba(109, 124, 255, 0.32); }
.tete-entree .bouton-icone { margin-left: 4px; }
.preuves-existantes .journal { margin-top: 0; }

/* ------------------------------------------------------------ Onglets avec icône, journalier */
.onglets button { display: inline-flex; align-items: center; gap: 6px; }
.onglets button svg { width: 16px; height: 16px; flex: none; }
.segment-choix { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 6px 0 4px; border-radius: var(--rayon-petit); background: rgba(10, 6, 26, 0.6); border: 1px solid var(--bord); }
.segment-choix label { position: relative; cursor: pointer; }
.segment-choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segment-choix span { display: block; text-align: center; padding: 8px 10px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--brume); transition: background .15s, color .15s; }
.segment-choix input:checked + span { background: linear-gradient(135deg, var(--nebuleuse), var(--azur)); color: #fff; }
.segment-choix input:focus-visible + span { outline: 2px solid var(--nebuleuse-clair); outline-offset: 2px; }
.info-gain { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 10px 12px; border-radius: var(--rayon-petit); border: 1px solid rgba(109, 124, 255, 0.5); background: rgba(109, 124, 255, 0.12); font-size: 14px; }
.info-gain svg { width: 16px; height: 16px; flex: none; color: #8b97ff; }
[data-depend-j] { transition: opacity .2s ease; }
[data-depend-j].inactif { opacity: .4; pointer-events: none; }
#j-ajout-booster { margin-top: 10px; }
.liste-paliers .corps strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.liste-paliers .niveau-pastille { min-width: 48px; justify-content: center; }
[data-pli="eco-journalier"] .tete-panneau { margin-top: 14px; align-items: flex-end; }

/* ------------------------------------------------------------ Réinitialisation */
.zone-danger { display: grid; gap: 14px; }
.cases-reset { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.case-reset { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); cursor: pointer; }
.case-reset input { margin-top: 3px; accent-color: var(--rouge); }
.case-reset strong { display: block; font-size: 14px; }
.case-reset small { color: var(--brume); font-size: 13px; }
.case-reset:has(input:checked) { border-color: rgba(251, 113, 133, 0.6); background: rgba(251, 113, 133, 0.08); }
.zone-danger > .bouton { justify-self: start; }
.carte-jeu .ligne-reglage .texte { min-width: 0; }

/* Recyclage (Mes cartes) */
.recyclage { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border-radius: var(--rayon-petit); background: rgba(10, 6, 26, 0.45); border: 1px solid var(--bord); }
.recyclage > strong { display: flex; align-items: center; gap: 8px; }
.recyclage > strong svg { width: 18px; height: 18px; color: var(--vert); }
.etapes-recyclage { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.etape-recyclage { display: grid; gap: 6px; padding: 10px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); border-top: 3px solid var(--c); }
.etape-recyclage span:first-child { font-weight: 700; }
.etape-recyclage small { color: var(--brume); font-size: 12px; }
.etape-recyclage .barre-niveau { height: 8px; }

/* Grand écran : contenu (et en-tête) centrés dans l'espace à droite du menu */
main { margin-left: auto; margin-right: auto; max-width: 1920px; }
.entete { max-width: 1920px; margin-left: auto; margin-right: auto; }
/* Classements : 3 colonnes sur grand écran (riches · niveaux · actifs), 2 puis 1 sur plus petit */
.grille.classements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1500px) { .grille.classements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grille.classements { grid-template-columns: minmax(0, 1fr); } }
main.ecran-connexion { max-width: none; }
/* Classements : listes longues qui défilent (10 places visibles environ) */
.liste.defilante { max-height: 560px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--bord-fort) transparent; }
.liste.defilante::-webkit-scrollbar { width: 6px; }
.liste.defilante::-webkit-scrollbar-thumb { background: var(--bord-fort); border-radius: 3px; }

/* ------------------------------------------------------------ Boutique (membres) */
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.article-boutique {
  --c: var(--nebuleuse);
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(17, 10, 40, 0.55) 60%);
  transition: border-color 0.15s, transform 0.15s;
}
.article-boutique:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); }
.article-boutique.booster { --c: var(--orange); }
.article-boutique.possede { opacity: 0.7; }
.icone-article { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, white); }
.icone-article svg { width: 22px; height: 22px; }
.corps-article { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.corps-article p { margin: 0; }
.corps-article strong { font-size: 16px; }
.pied-article { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--bord); }
.pied-article .prix { font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 4px; }
.pied-article .bouton { white-space: nowrap; }
.pied-article .bouton:disabled { opacity: 0.55; cursor: not-allowed; }
.pastille-role { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--brume)); flex: none; }
.puce.role { gap: 6px; }
.encart { padding: 12px 16px; border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); border-radius: var(--rayon-petit); color: #fde68a; }

/* ------------------------------------------------------------ Page Bot (profil) */
.mise-bot { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.colonne-bot { display: grid; gap: 20px; min-width: 0; }
.apercu-profil-panneau { position: sticky; top: 20px; }
@media (max-width: 980px) { .mise-bot { grid-template-columns: minmax(0, 1fr); } .apercu-profil-panneau { position: static; } }
.profil-discord { margin-top: 14px; border-radius: 12px; overflow: hidden; background: #111214; border: 1px solid rgba(255, 255, 255, 0.06); color: #dbdee1; }
.profil-banniere { height: 120px; background: linear-gradient(135deg, var(--nebuleuse), var(--azur)); background-size: cover; background-position: center; }
.profil-avatar { position: relative; width: 92px; height: 92px; margin: -46px 0 0 16px; }
.profil-avatar img { width: 92px; height: 92px; border-radius: 50%; border: 6px solid #111214; background: #111214; object-fit: cover; }
.profil-statut { position: absolute; right: 2px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; border: 5px solid #111214; background: #23a55a; }
.profil-corps { padding: 10px 16px 16px; display: grid; gap: 10px; }
.profil-nom { display: flex; align-items: center; gap: 6px; font-size: 20px; }
.profil-nom strong { color: #fff; overflow-wrap: anywhere; }
.profil-activite { font-size: 14px; color: #b5bac1; }
.profil-activite:empty { display: none; }
.profil-bloc { background: #1e1f22; border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.profil-bloc small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #b5bac1; margin-bottom: 4px; white-space: normal; }
.profil-discord .tag-bot { font-size: 11px; }
.ligne-image { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--bord); }
.ligne-image:first-of-type { border-top: none; }
.ligne-image > div { display: grid; gap: 6px; min-width: 0; }
.ligne-image .actions { margin-top: 4px; }
.vignette-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--bord-fort); }
.vignette-banniere { width: 160px; height: 56px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--nebuleuse), var(--azur)); background-size: cover; background-position: center; border: 2px solid var(--bord-fort); }
#compteur-description { font-weight: 500; color: var(--brume); margin-left: 6px; }
@media (max-width: 520px) { .ligne-image { flex-direction: column; align-items: flex-start; } }