:root {
  --bg: #070708;
  --panel: #111113;
  --panel-alt: #18181b;
  --border: #27272a;
  --text: #f4f4f5;
  --text-dim: #a1a1aa;
  /* Monochrome : accent gris clair (bordures, focus, liens), degrades du
     gris au noir. Le texte reste blanc sur les degrades sombres. */
  --accent: #d4d4d8;
  --accent2: #71717a;
  --accent-glow: #00000099;
  --grad: linear-gradient(180deg, #52525b 0%, #18181b 100%);
  --grad-doux: linear-gradient(180deg, #27272a 0%, #111113 100%);
  --ok: #2ecc71;
  --err: #e74c3c;
  --warn: #f1c40f;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-alt); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mainSwapOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-18px); }
}
@keyframes mainSwapIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes drift {
  0%   { transform: translate(-6%, -4%) scale(1); }
  50%  { transform: translate(4%, 3%) scale(1.08); }
  100% { transform: translate(-6%, -4%) scale(1); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 14px transparent; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes eq {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes shrinkWidth {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100vh;
  color: var(--text-dim);
  font-size: 14px;
  animation: fadeIn .3s ease;
}
.loading.inline { height: auto; padding: 60px 0; }
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.skeleton {
  background: linear-gradient(90deg, var(--panel-alt) 25%, var(--border) 50%, var(--panel-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* --- Login --- */
.login-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.login-screen::before,
.login-screen::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  z-index: -1;
  filter: blur(90px);
  opacity: .28;
  animation: drift 16s ease-in-out infinite;
}
.login-screen::before {
  background: radial-gradient(circle, #a1a1aa, transparent 70%);
  top: -20%;
  left: -15%;
}
.login-screen::after {
  background: radial-gradient(circle, #3f3f46, transparent 70%);
  bottom: -25%;
  right: -15%;
  animation-delay: -8s;
}

.login-card {
  width: 100%;
  max-width: 380px;
  margin: 0 20px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 34px;
  text-align: center;
  box-shadow: 0 20px 60px -20px #000000aa;
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1);
}
.login-logo {
  width: 64px; height: 64px;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); border: 1px solid #52525b;
  animation: pulseGlow 2.6s ease-in-out infinite;
}
.login-logo img { width: 26px; height: auto; display: block; }
.login-card h1 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.login-card p { color: var(--text-dim); margin: 0 0 26px; font-size: 13.5px; line-height: 1.55; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid #52525b;
  background: var(--grad);
  color: white;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  box-shadow: 0 10px 26px -12px var(--accent-glow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 14px 32px -10px var(--accent-glow); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--grad-doux); border: 1px solid var(--border); width: auto; box-shadow: none; }
.btn.danger { background: var(--err); border-color: transparent; width: auto; box-shadow: none; }
.btn.compact { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.setup-warning {
  background: var(--panel-alt);
  border: 1px solid #7a5d0f55;
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

/* --- Shell --- */
/* height (pas min-height) : cadre la sidebar et .main sur exactement la
   fenetre, pour que .main.overflow-y:auto defile bien tout seul en gardant
   la sidebar fixe - avec min-height, .shell grandissait avec le contenu et
   c'etait toute la page (sidebar comprise) qui defilait a la place. */
/* overflow: clip (et pas seulement hidden) : le halo decoratif ::before
   deborde a droite, et un conteneur « hidden » reste defilable - un clic
   ou un focus pres du bord decalait tout le dashboard (menu coupe a
   gauche). clip interdit tout defilement de ce cadre. */
.shell { position: relative; display: flex; height: 100vh; overflow: hidden; overflow: clip; isolation: isolate; animation: fadeIn .35s ease; }
.shell::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 55vmax; height: 55vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #a1a1aa, transparent 70%);
  filter: blur(110px);
  opacity: .12;
  z-index: -1;
  animation: drift 22s ease-in-out infinite;
  pointer-events: none;
}
/* Meme grille discrete que le site public, en beaucoup plus attenuee (page
   dense en contenu, contrairement a une landing page) - juste assez pour
   que le dashboard ne se sente pas visuellement coupe du reste d'Athena. */
.shell::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, #ffffff05 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 60% 55% at 25% 0%, #000 40%, transparent 90%);
  z-index: -1;
  pointer-events: none;
}
.sidebar {
  /* 272px etaient calcules pour la liste des serveurs ("POLICE NATIONALE",
     "Palmyre RP | FiveM"...). Cette liste a demenage sur l'accueil : le plus
     long libelle restant est "Bienvenue & départs" (~125px a 13px), et la
     colonne gardait donc ~60px de vide sur toute sa hauteur, pris sur le
     contenu. */
  width: 228px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeUp .4s cubic-bezier(.16,1,.3,1) backwards;
}
.sidebar-header { display: flex; align-items: center; gap: 9px; padding: 2px 6px 4px; }
.sidebar-header .name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: inherit; text-decoration: none; }
.sidebar-header .brand-mark { width: 18px; height: auto; flex-shrink: 0; }
.guild-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; transition: border-color .15s ease;
}
.guild-search:focus-within { border-color: var(--accent); }
.guild-search-icon { font-size: 12px; opacity: .7; flex-shrink: 0; }
.guild-search-input {
  background: transparent; border: none; color: var(--text); outline: none;
  font-size: 13px; padding: 8px 0; width: 100%; min-width: 0;
}
/* Intitule de section au-dessus de la liste : sans lui, la barre laterale
   enchaine une recherche et une colonne d'avatars sans jamais dire ce
   qu'elle liste. Le compteur evite aussi d'avoir a faire defiler pour
   savoir combien de serveurs on gere. */
/* La colonne de gauche ne liste plus les serveurs : avec 187 serveurs,
   c'etait une seconde liste du MEME contenu que la grille de l'accueil. Les
   regles .guild-list / .guild-item / .guild-list-label ont donc disparu avec
   elle. .guild-search reste : la barre de recherche a simplement demenage
   sur l'accueil (voir .accueil-barre). */
.user-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  flex-shrink: 0; margin-top: auto;
  padding: 12px 6px 2px; border-top: 1px solid var(--border);
}
/* Le pseudo s'affiche en entier (retour a la ligne si besoin) : le bouton
   de deconnexion passe sur sa propre ligne, dessous. */
.user-footer .uname { font-size: 13px; font-weight: 600; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.user-footer > .btn { flex: 1 0 100%; }
.user-footer img.avatar-moi, .user-footer .icon-fallback { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.user-footer .icon-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-alt); font-size: 11px; font-weight: 700;
}

/* Icones Athena (blanches) : toujours a la taille du texte qu'elles
   accompagnent. */
.ath-ico { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-ico .ath-ico { width: 15px; height: 15px; }
.btn.compact.btn-ico .ath-ico { width: 13px; height: 13px; }

/* Petits raccourcis ronds : documentation, support, site. */
.liens-ronds { display: flex; align-items: center; gap: 6px; }
.lien-rond {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-doux); border: 1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease;
}
.lien-rond:hover { border-color: var(--accent); transform: translateY(-1px); }
.lien-rond .ath-ico { width: 14px; height: 14px; opacity: .85; }
.sidebar > .liens-ronds { justify-content: center; padding: 10px 0 2px; }

/* --- Navigation par modules (sidebar desktop) --- */
/* Chaque module d'Athena devient sa propre page plutot qu'un bloc de plus
   dans un scroll infini (voir .pages/.page plus bas) - cette liste est le
   sommaire, groupe par theme, qui bascule d'une page a l'autre. Sur mobile,
   la MEME structure (meme fonction JS renderPageNav) est injectee en haut
   de .main sous forme de bande d'onglets horizontale (.page-nav-mobile) au
   lieu de rester dans la sidebar (voir media query plus bas). */
/* flex:1 sur un conteneur VIDE reservait 645px de vide entre la liste et le
   pied de page, bordure comprise - la nav n'est remplie qu'une fois un
   serveur choisi (voir renderPageNav). Elle prend desormais la place de son
   contenu, et disparait completement tant qu'elle n'en a pas. */
/* overflow-x: hidden explicite : `overflow-y: auto` seul fait calculer
   `overflow-x: visible` en `auto` (regle CSS), et le translateX(2px) du
   survol suffisait alors a faire apparaitre une barre de defilement
   HORIZONTALE sous la nav.
   max-height: 50% servait a partager la hauteur avec la liste des serveurs ;
   celle-ci partie, ce plafond ne faisait plus que couper la nav en deux au
   profit du vide en dessous. */
.sidebar-nav {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding-top: 10px;
  border-top: 1px solid var(--border); margin-top: 2px;
}
.sidebar-nav:empty { display: none; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border: none; }
.page-nav { display: flex; flex-direction: column; gap: 2px; }
.page-nav-group {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); padding: 10px 10px 4px;
}
.page-nav-group:first-child { padding-top: 0; }
.page-nav-item {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.page-nav-item:hover { background: var(--panel-alt); color: var(--text); transform: translateX(2px); }
.page-nav-item.active {
  background: var(--grad);
  color: white; box-shadow: inset 0 0 0 1px #52525b;
}
/* Icones du menu et des fiches en niveaux de gris : sobres, sans l'effet
   « emoji partout » des interfaces generees. */
.page-nav-icon { flex-shrink: 0; display: inline-flex; opacity: .8; }
.page-nav-icon .ath-ico { width: 16px; height: 16px; }
.page-nav-item.active .page-nav-icon { opacity: 1; }
.page-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bande d'onglets mobile : cachee par defaut, activee par la media query
   (max-width: 860px) plus bas. */
.page-nav-mobile { display: none; }

.main { flex: 1; padding: 30px 36px; overflow-y: auto; }
.main.main-swap-out { animation: mainSwapOut .18s ease forwards; }
.main.main-swap-in { animation: mainSwapIn .28s cubic-bezier(.16,1,.3,1) backwards; }
.main h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.01em; animation: fadeUp .35s ease backwards; }
.main .sub { color: var(--text-dim); font-size: 12.5px; margin: 0 0 26px; animation: fadeUp .35s ease .03s backwards; }
.empty-state { color: var(--text-dim); padding: 70px 0; text-align: center; font-size: 13.5px; animation: fadeIn .4s ease; }

/* --- Ecran d'accueil (avant d'avoir choisi un serveur) --- */
.accueil { animation: fadeUp .4s cubic-bezier(.16,1,.3,1) backwards; }
/* Accueil sans colonne : le contenu est borne et centre, sinon les cartes
   s'etalent sur toute la largeur d'un ecran large et deviennent illisibles. */
.shell-accueil .main { padding: 26px 32px; }
.shell-accueil .accueil { max-width: 1400px; margin: 0 auto; }
.accueil-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.accueil-topbar .name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: inherit; text-decoration: none;
}
.accueil-topbar .brand-mark { width: 18px; height: auto; flex-shrink: 0; }
.accueil-compte { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.accueil-compte img.avatar-moi, .accueil-compte .icon-fallback {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-alt); font-size: 11px; font-weight: 700;
}
.accueil-compte .uname { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.accueil-tete { margin-bottom: 18px; }
/* Barre de recherche de l'accueil : elle vit avec les cartes qu'elle filtre,
   la colonne de gauche ne listant plus rien. */
.accueil-barre {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.accueil-barre .guild-search { flex: 1; max-width: 420px; }
.accueil-compteur {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.accueil-vide-recherche { grid-column: 1 / -1; padding: 24px 0; }

/* Retour vers l'accueil : seul moyen de changer de serveur depuis une page,
   maintenant que la colonne ne liste plus les serveurs. */
.retour-accueil {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.retour-accueil:hover { background: var(--panel); border-color: var(--accent); color: var(--text); }
.retour-accueil.cache { display: none; }
.accueil-tete h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.01em; }
/* auto-fill et non auto-fit : avec deux ou trois serveurs, auto-fit etire
   les cartes sur toute la largeur de l'ecran et donne des pavés absurdes. */
.accueil-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
.accueil-carte {
  /* min-width: 0 : sans lui, un nom de serveur long poussait la carte hors
     de l'ecran sur telephone. */
  min-width: 0;
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  animation: fadeUp .4s cubic-bezier(.16,1,.3,1) backwards;
}
.accueil-carte:nth-child(1) { animation-delay: .04s; }
.accueil-carte:nth-child(2) { animation-delay: .07s; }
.accueil-carte:nth-child(3) { animation-delay: .10s; }
.accueil-carte:nth-child(4) { animation-delay: .13s; }
.accueil-carte:nth-child(5) { animation-delay: .16s; }
.accueil-carte:nth-child(n+6) { animation-delay: .19s; }
.accueil-carte:hover {
  background: var(--panel-alt); border-color: var(--accent);
  color: var(--text); transform: translateY(-2px);
}
.accueil-carte img, .accueil-carte .icon-fallback {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  object-fit: cover; background: var(--panel-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
/* min-width: 0 sur le conteneur de texte : sans lui, un enfant flex refuse
   de descendre sous la largeur de son contenu et l'ellipsis ne se declenche
   jamais - meme piege que sur .guild-item. */
.accueil-carte-texte {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.accueil-carte-nom {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accueil-carte-membres { font-size: 11.5px; color: var(--text-dim); }
.accueil-pied { color: var(--text-dim); font-size: 12.5px; margin: 22px 0 0; }
.accueil-vide {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; max-width: 560px; color: var(--text-dim); font-size: 13.5px;
}
.accueil-vide p { margin: 0 0 10px; }
.accueil-vide ul { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.accueil-vide .btn { display: inline-block; text-decoration: none; }

/* --- Pages (un module = un ecran, plus tout empile) --- */
.pages { position: relative; }
.page { display: none; }
.page.active { display: block; animation: pageIn .32s cubic-bezier(.16,1,.3,1) backwards; }
/* Changement de categorie : les blocs rejouaient leur apparition en
   cascade (jusqu'a ~0,9 s pour le dernier), la page paraissait vide un
   instant a chaque clic. La page glisse deja en entier : les blocs
   apparaissent avec elle. */
.pages.deja-vue .section { animation: none; }
.chargement-echoue { display: block; }
.chargement-echoue p { margin: 0 0 14px; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-card {
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px 18px;
  animation: fadeUp .4s cubic-bezier(.16,1,.3,1) backwards;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.stat-card:nth-child(1) { animation-delay: .02s; }
.stat-card:nth-child(2) { animation-delay: .06s; }
.stat-card:nth-child(3) { animation-delay: .10s; }
.stat-card:nth-child(4) { animation-delay: .14s; }
.stat-card:nth-child(5) { animation-delay: .18s; }
.stat-card:nth-child(6) { animation-delay: .22s; }
.stat-card:hover { border-color: #333c52; transform: translateY(-2px); box-shadow: 0 10px 24px -14px #000000cc; }
.stat-card .label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
/* "Niveau 2 (9)" se cassait en deux lignes et desalignait la carte par
   rapport a ses voisines. La valeur se reduit plutot que de passer a la
   ligne, et toutes les cartes gardent la meme hauteur. */
.stat-card { display: flex; flex-direction: column; }
.stat-card .value {
  font-size: clamp(17px, 2.1vw, 22px); font-weight: 700; margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.section {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; margin-bottom: 20px; animation: fadeUp .45s cubic-bezier(.16,1,.3,1) backwards;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 20px; align-items: start;
}
/* Chaque reglage individuel (field-row/toggle-row) devient une case de la
   grille ; tout le reste (titre, sous-titres, textarea, listes de logs/
   musique...) reste en pleine largeur - plus simple et plus robuste qu'une
   liste de classes a maintenir a la main a chaque nouveau type de contenu. */
.section > *:not(.field-row):not(.toggle-row) { grid-column: 1 / -1; }
.section:nth-of-type(1) { animation-delay: .06s; }
.section:nth-of-type(2) { animation-delay: .10s; }
.section:nth-of-type(3) { animation-delay: .14s; }
.section:nth-of-type(4) { animation-delay: .18s; }
.section:nth-of-type(5) { animation-delay: .22s; }
.section:nth-of-type(6) { animation-delay: .26s; }
.section:nth-of-type(7) { animation-delay: .30s; }
.section:nth-of-type(8) { animation-delay: .34s; }
.section:nth-of-type(9) { animation-delay: .38s; }
.section:nth-of-type(10) { animation-delay: .42s; }
.section:nth-of-type(n+11) { animation-delay: .46s; }
.section h2 { margin: 0 0 14px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }

.modules-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.modules-head h2 { margin: 0; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.module-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 10px; cursor: pointer; text-align: center;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.module-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-icon { font-size: 20px; }
.module-label { font-size: 12px; color: var(--text-dim); }
.module-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.module-card.active .module-label { color: var(--text); }
.module-card.active .module-dot { background: var(--ok); box-shadow: 0 0 0 3px #2ecc7122; }
.module-card.active { border-color: #2ecc7144; background: #2ecc7108; }
.subhead {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 18px 0 4px; padding-top: 10px; border-top: 1px solid var(--border);
}
.premium-hint { color: var(--warn); }

/* --- Pages Protections --- */
/* Un carre par protection, ranges par categorie (compteur d'actives), une
   coche verte fine dans chaque carre pour activer ou couper. La fiche de
   la protection choisie s'ouvre sous les carres. */
.prot-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start;
  animation: fadeUp .45s cubic-bezier(.16,1,.3,1) backwards;
}
.prot-grille {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 6px 14px 14px;
}
.prot-cat {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); padding: 12px 2px 6px;
}
.prot-count { font-weight: 600; letter-spacing: 0; text-transform: none; }
.prot-carres { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.prot-carre {
  position: relative; aspect-ratio: 1 / 1; min-height: 120px;
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; outline: none; color: var(--text-dim);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .18s ease;
}
.prot-carre:hover, .prot-carre:focus-visible { border-color: #52525b; color: var(--text); transform: translateY(-2px); }
.prot-carre.on { color: var(--text); border-color: #2ecc7140; }
.prot-carre.active { background: linear-gradient(180deg, #ffffff12, #ffffff03); box-shadow: inset 0 0 0 1px #ffffff2e; color: var(--text); }
.prot-carre-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prot-carre-icone {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-doux); border: 1px solid #3f3f46;
}
.prot-carre-icone .ath-ico { width: 18px; height: 18px; opacity: .85; }
.prot-carre-nom { margin-top: auto; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.prot-carre-etat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.prot-carre-etat.on { color: var(--ok); }

/* La coche : une case fine, et un trait vert fin quand c'est actif. */
.coche {
  position: relative; flex-shrink: 0; width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: transparent; border: 1.5px solid #52525b; border-radius: 8px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.coche::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 12px;
  border: solid var(--ok); border-width: 0 1.6px 1.6px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.coche:hover { border-color: var(--ok); }
.coche:focus-visible { outline: 2px solid #2ecc7166; outline-offset: 2px; }
.coche.on { border-color: var(--ok); background: #2ecc7114; box-shadow: 0 0 0 3px #2ecc7112; }
.coche.on::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.coche.verrou { cursor: help; border-style: dashed; }
.coche.verrou.on { border-style: solid; opacity: .8; }
.prot-head .coche { width: 32px; height: 32px; border-radius: 9px; }
.prot-head .coche::after { width: 7px; height: 14px; border-width: 0 1.8px 1.8px 0; }
.prot-carre.bascule-on { animation: ligneOn .8s ease-out; }
.prot-carre.bascule-off { animation: ligneOff .8s ease-out; }

.prot-detail { min-width: 0; }
.prot-vue { display: flex; flex-direction: column; gap: 14px; animation: fadeIn .2s ease; }
.prot-head { display: flex; align-items: center; gap: 14px; }
.prot-head-icone {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--grad); border: 1px solid #52525b;
}
.prot-head-texte { flex: 1; min-width: 0; }
.prot-head-texte h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.prot-resume { margin: 3px 0 0; color: var(--text-dim); font-size: 13px; }
.prot-head-etat { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prot-etat { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.prot-etat.on { color: var(--ok); }
.prot-alerte-place:empty { display: none; }
.prot-alerte {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid #f1c40f40; background: #f1c40f0f; color: #f5d76e;
  font-size: 13px; line-height: 1.45;
}
.prot-alerte strong { display: block; color: var(--warn); }
.prot-logs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px 10px 14px; font-size: 13px;
}
.prot-logs-texte { flex: 1; min-width: 0; color: var(--text-dim); }
.prot-logs-texte.prot-logs-court { flex: 0 0 auto; }
.prot-logs-texte strong { color: var(--text); }
.prot-logs .custom-select { flex: 1; min-width: 180px; }
.prot-logs .btn { width: auto; }
.prot-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.prot-card-title { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.prot-how { list-style: none; margin: 0; padding: 14px 18px; display: grid; gap: 10px; }
.prot-how li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.prot-how li::before { content: "›"; position: absolute; left: 3px; top: -2px; color: var(--accent2); font-size: 17px; font-weight: 700; }
.prot-foot {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px;
  margin: 0 18px; padding: 12px 0 16px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
}
.prot-ignores { flex: 1 1 260px; margin: 0; line-height: 1.5; }
.prot-ignores strong, .prot-foot .perms-title { color: var(--text); font-weight: 700; }
.prot-perms { flex: 0 1 auto; }
.prot-reglages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; align-items: start;
  padding: 16px 18px 18px;
}
.prot-reglages > *:not(.field-row):not(.toggle-row) { grid-column: 1 / -1; }
.verif-web-reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.verif-web-reglages[hidden] { display: none; }
.verif-web-reglages > .hint { grid-column: 1 / -1; }
/* Protection eteinte : ses reglages restent lisibles et modifiables (on
   prepare souvent la config avant d'activer), mais visiblement en retrait -
   sinon rien ne distingue un seuil qui s'applique d'un seuil dormant. */
.prot-card.inactive { border-style: dashed; }
.prot-card.inactive .prot-reglages > * { opacity: .55; }
.prot-card.inactive:hover .prot-reglages > * { opacity: 1; }
@media (max-width: 1100px) {
  .prot-carres { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 600px) {
  .prot-head { flex-wrap: wrap; }
  .prot-head-etat { width: 100%; justify-content: space-between; }
  .prot-card-title, .prot-how, .prot-reglages { padding-left: 14px; padding-right: 14px; }
  .prot-foot { margin: 0 14px; }
}

/* Permissions dont une protection a besoin, cochees selon ce qu'Athena a. */
.perms-row {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.perms-title { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.perm-chip {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text-dim);
}
.perm-chip.ok { color: var(--ok); background: #2ecc7112; border-color: #2ecc7135; }
.perm-chip.missing { color: var(--err); background: #e74c3c14; border-color: #e74c3c40; }

/* Bandeau « Athena n'est pas 100 % operationnelle » : jaune, discret. */
.ops-warning {
  margin: 10px 0 18px; padding: 12px 16px;
  border: 1px solid #f1c40f40; border-radius: 12px;
  background: #f1c40f0f; color: var(--warn);
  font-size: 14px; line-height: 1.45;
}
.ops-warning ul { margin: 6px 0; padding-left: 18px; color: #f5d76e; }
.ops-warning-hint { display: block; font-size: 12px; color: var(--text-dim); }

/* Commandes perso (facon DraftBot) : options en haut, formulaire a gauche,
   liste a droite. */
.cmdp { animation: fadeUp .45s cubic-bezier(.16,1,.3,1) backwards; }
.cmdp-tete h2 { margin: 0; font-size: 19px; }
.cmdp-sous { margin: 4px 0 20px; color: var(--text-dim); font-size: 12.5px; }
.cmdp-label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text);
}
.cmdp-label.petit { margin: 12px 0 6px; font-size: 10.5px; color: var(--text-dim); }
.cmdp-form > .cmdp-label.petit:first-child { margin-top: 2px; }
.cmdp-options { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px 24px; margin-bottom: 22px; }
.cmdp-option input[type=text] {
  width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px;
}
.cmdp-option input[type=text]:focus, .cmdp-champ input:focus, .cmdp-champ textarea:focus { outline: none; border-color: var(--accent); }
.cmdp-option-ligne { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 13px; color: var(--text-dim); }
.cmdp-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cmdp-col { min-width: 0; }
.cmdp-form {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px;
}
.cmdp-champ { position: relative; }
.cmdp-champ input, .cmdp-champ textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 70px 9px 12px; font-size: 13.5px; font-family: inherit;
}
.cmdp-champ textarea { display: block; resize: vertical; min-height: 70px; padding-bottom: 22px; }
.cmdp-compteur { position: absolute; right: 10px; bottom: 9px; font-size: 11px; color: var(--text-dim); pointer-events: none; }
.cmdp-compteur.vide { color: #e74c3c99; }
.cmdp-actions-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cmdp-actions-tete .cmdp-label.petit { margin: 0; }
.cmdp-menu-ancre { position: relative; }
.btn.cmdp-ajouter { width: auto; padding: 7px 12px; font-size: 12.5px; }
.cmdp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px;
  max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 34px -12px #000c;
}
.cmdp-menu[hidden] { display: none; }
.cmdp-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  background: none; border: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.cmdp-menu-item:hover, .cmdp-menu-item:focus-visible { background: var(--panel); outline: none; }
.cmdp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cmdp-vide {
  padding: 14px; border: 1px dashed var(--border); border-radius: 10px;
  text-align: center; font-size: 12.5px; color: var(--text-dim);
}
.cmdp-action { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; }
.cmdp-action .custom-select { width: 100%; }
.cmdp-corps { display: flex; flex-direction: column; gap: 8px; }
.cmdp-corps > input[type=text], .cmdp-ligne > input[type=number] {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 8px 11px; font-size: 13px; width: 100%; font-family: inherit;
}
.cmdp-ligne { display: flex; align-items: center; gap: 10px; }
.cmdp-ligne > input[type=number] { width: 80px; }
.cmdp-ligne .couleur-select { flex: 1; }
.cmdp-action-nom { display: inline-flex; align-items: center; gap: 7px; }
.cmdp-menu-item { display: flex; align-items: center; gap: 9px; }
.cmdp-menu-item .ath-ico { width: 15px; height: 15px; opacity: .85; }
.cmdp-pris { display: block; margin-top: 4px; font-size: 11.5px; color: var(--warn); }
.cmdp-action-tete { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cmdp-action-num {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: #e4e4e7; color: #0a0a0b; font-size: 11px; font-weight: 700;
}
.cmdp-action-nom { flex: 1; font-weight: 600; }
.cmdp-retirer {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 13px;
}
.cmdp-retirer:hover, .cmdp-retirer:focus-visible { color: var(--err); border-color: #e74c3c55; background: #e74c3c14; outline: none; }
.cmdp-form > .hint { margin: 6px 0 0; }
.cmdp-avance { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.cmdp-avance summary { cursor: pointer; font-size: 12.5px; color: var(--text-dim); }
.cmdp-avance summary:hover { color: var(--text); }
.cmdp-avance-corps { margin-top: 10px; }
.cmdp-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cmdp-pied .btn { width: auto; padding: 9px 20px; }
.cmdp-pied .btn[hidden] { display: none; }
.cmdp-liste { display: flex; flex-direction: column; gap: 6px; }
.cmdp-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; cursor: pointer; outline: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.cmdp-item:hover, .cmdp-item:focus-visible { border-color: var(--accent); }
.cmdp-item.active { border-color: var(--accent2); background: var(--grad-doux); }
.cmdp-item-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmdp-item-nom { color: var(--accent2); font-size: 13px; }
.cmdp-item-resume { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
  .cmdp-grille, .cmdp-options { grid-template-columns: minmax(0, 1fr); }
}
.btn.small { padding: 6px 12px; font-size: 12px; }

/* Personnalisation d'Athena : apercu facon profil Discord, puis photo,
   banniere et bio. */
.perso { animation: fadeUp .45s cubic-bezier(.16,1,.3,1) backwards; }
.perso-vip {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid #f1c40f40; border-radius: 12px; background: #f1c40f0f; color: #f5d76e; font-size: 13px;
}
.perso-vip strong { color: var(--warn); }
.perso-apercu {
  max-width: 460px; margin-bottom: 20px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
}
.perso-banniere { aspect-ratio: 17 / 6; background: linear-gradient(180deg, #3f3f46, #0a0a0b); }
.perso-banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perso-identite { display: flex; align-items: flex-end; gap: 10px; padding: 0 16px; margin-top: -38px; }
.perso-avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 5px solid var(--panel); background: var(--panel-alt);
}
.perso-nom { font-size: 18px; font-weight: 700; padding-bottom: 6px; }
.perso-app { margin-bottom: 9px; padding: 1px 6px; border-radius: 4px; background: #3f3f46; color: white; font-size: 10px; font-weight: 700; }
.perso-bio-apercu { margin: 8px 16px 16px; color: var(--text-dim); font-size: 13px; white-space: pre-wrap; min-height: 1em; }
.perso-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.perso-bloc {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px;
}
.perso-bloc .cmdp-label { margin: 0; }
.perso-bloc textarea { width: 100%; }
.perso-fichier { display: none; }
.perso-mini {
  display: grid; place-items: center; overflow: hidden;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--panel-alt);
  color: var(--text-dim); font-size: 12px;
}
.perso-mini.pdp { width: 140px; aspect-ratio: 1; border-radius: 50%; }
.perso-mini.banniere { width: 100%; aspect-ratio: 17 / 6; }
.perso-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perso-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.perso-actions .btn { width: auto; }
.perso-actions .btn[hidden] { display: none; }
.perso-actions a.btn { font-size: 12px; padding: 6px 10px; text-decoration: none; display: inline-flex; align-items: center; }
.perso-discord { margin-top: 14px; }

/* AutoMod Discord */
.automod-limites { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.automod-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.automod-regle {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.automod-regle.inactive { border-style: dashed; opacity: .75; }
.automod-regle-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.automod-regle-texte .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automod-regle-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.automod-type, .automod-athena {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim);
}
.automod-athena { color: var(--text); background: var(--panel-alt); }
.automod-outils { margin-bottom: 16px; }
.automod-case { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.automod-plein { margin: 0; color: var(--err); font-size: 12.5px; }
.automod .perso-bloc input[type=text] {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
}

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: border-color .15s ease, transform .15s ease;
}
.toggle-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.toggle-row .tname { font-size: 13.5px; }
.toggle-row.locked { opacity: .55; }
.toggle-row.locked:hover { border-color: var(--border); transform: none; }
.toggle-row.locked .switch { cursor: not-allowed; }
.switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 999px; transition: background .2s ease, border-color .2s ease;
}
.slider::before {
  content: ""; position: absolute; height: 15px; width: 15px; left: 3px; top: 3px;
  background: var(--text-dim); border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
input:checked + .slider { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px #2ecc7122; }
input:checked + .slider::before { transform: translateX(17px); background: white; }
.switch:active .slider::before { width: 19px; }

.field-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: border-color .15s ease, transform .15s ease;
}
.field-row:hover, .field-col:hover { border-color: var(--accent); transform: translateY(-1px); }
.field-row .tname { font-size: 12.5px; color: var(--text-dim); }
.field-row input[type=text], .field-row input[type=number] {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 11px; font-size: 13px; width: 100%;
  transition: border-color .15s ease;
}
.field-row input[type=text]:focus, .field-row input[type=number]:focus { outline: none; border-color: var(--accent); }
.field-col {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: border-color .15s ease, transform .15s ease;
}
.field-col .tname { font-size: 12.5px; color: var(--text-dim); }
.hint { color: var(--text-dim); font-size: 11.5px; }

.field-row .custom-select, .field-col .custom-select { width: 100%; }
.custom-select { position: relative; display: inline-block; min-width: 180px; }
/* Le menu ouvert passe devant les blocs suivants (autres menus compris).
   Le bloc qui le contient monte aussi : son survol (translateY) en fait un
   contexte d'empilement, et l'interrupteur du bloc suivant passait par-dessus
   la liste. */
.custom-select.open { z-index: 40; }
.field-row:has(.custom-select.open), .field-col:has(.custom-select.open), .toggle-row:has(.custom-select.open),
.prot-logs:has(.custom-select.open), .cmdp-action:has(.custom-select.open), .section:has(.custom-select.open) {
  position: relative; z-index: 41;
}
.custom-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 11px; font-size: 13px; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease;
}
.custom-select-trigger:hover { border-color: var(--accent); }
.custom-select.open .custom-select-trigger { border-color: var(--accent); }
.custom-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-chevron { flex-shrink: 0; font-size: 10px; color: var(--text-dim); transition: transform .15s ease; }
.custom-select.open .custom-select-chevron { transform: rotate(180deg); }
.custom-select.disabled .custom-select-trigger { opacity: .5; cursor: not-allowed; }
.custom-select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 4px; max-height: 220px; overflow-y: auto;
  box-shadow: 0 14px 30px -10px #000000cc;
  display: none;
}
.custom-select.open .custom-select-menu { display: block; animation: fadeUp .12s ease; }
.custom-select-option {
  padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.custom-select-option:hover { background: var(--panel); }
.custom-select-option, .custom-select-label { display: flex; align-items: center; gap: 8px; }
.cs-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #ffffff33; box-shadow: 0 0 0 2px #00000040;
}
.couleur-select { display: flex; flex-direction: column; gap: 8px; }
.couleur-perso.cachee { display: none; }
.couleur-perso input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 11px; font-size: 13px; width: 100%;
}
.couleur-perso input:focus { outline: none; border-color: var(--accent); }
.deployer-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deployer-panel.en-bas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.deployer-panel .btn { width: auto; }
.savoir-ia textarea { min-height: 150px; }
.savoir-ia .compteur { align-self: flex-end; }
.custom-select-option.selected { background: #3f3f46; color: var(--text); }
.custom-multiselect-option {
  display: flex; align-items: center; gap: 9px;
}
.custom-multiselect-option.selected { background: var(--accent-glow); color: var(--text); }
.custom-multiselect-check {
  flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.custom-multiselect-option.selected .custom-multiselect-check { background: var(--accent); border-color: var(--accent); color: #0a0a0b; }

textarea {
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 9px 11px; font-size: 13px; font-family: inherit;
  resize: vertical; transition: border-color .15s ease;
}
textarea:focus { outline: none; border-color: var(--accent); }

.music-queue-row { flex-wrap: nowrap; }
.music-queue-row .music-query-input { flex: 1; min-width: 160px; width: auto; }
@media (max-width: 860px) { .music-queue-row { flex-wrap: wrap; } }

.modlog-entry {
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.modlog-entry:last-child { border-bottom: none; }
.modlog-header {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; background: transparent; border: none;
  color: inherit; text-align: left; cursor: pointer; font-family: inherit;
  border-radius: 8px; transition: background .15s ease, padding-left .15s ease;
}
.modlog-header:hover { background: var(--panel-alt); padding-left: 14px; }
.modlog-icon { font-size: 18px; flex: 0 0 auto; }
.modlog-headline { flex: 1 1 auto; min-width: 0; }
.modlog-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-weight: 600; }
.modlog-action { color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; }
.modlog-sep { color: var(--text-dim); opacity: .5; }
.modlog-target { color: var(--text); font-size: 13.5px; }
.modlog-sub { color: var(--text-dim); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.modlog-chevron { color: var(--text-dim); font-size: 14px; flex: 0 0 auto; transition: transform .15s ease; }
.modlog-details {
  max-height: 0; overflow: hidden; padding: 0 10px;
  transition: max-height .2s ease, padding .2s ease;
  background: var(--panel-alt); border-radius: 8px;
}
.modlog-entry.open .modlog-details {
  max-height: 500px; padding: 12px 14px; margin: 0 6px 10px;
}
.modlog-field { display: flex; gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border); }
.modlog-field:last-child { border-bottom: none; }
.modlog-field-key { flex: 0 0 100px; color: var(--text-dim); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 600; padding-top: 1px; }
.modlog-field-val { flex: 1 1 auto; color: var(--text); word-break: break-word; }
.modlog-proof { color: var(--accent); text-decoration: none; }
.modlog-proof:hover { text-decoration: underline; }

.member-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 360px; overflow-y: auto; }
.member-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; transition: opacity .2s ease, border-color .15s ease;
}
.member-row:hover { border-color: #333c52; }
.member-row.done { opacity: 0.45; pointer-events: none; }
.member-row img, .member-row .icon-fallback {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--panel); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.member-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.member-info .mname { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-info .mtag { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-glow); color: var(--accent); margin-top: 2px;
}
.badge.warn { background: #f1c40f22; color: var(--warn); }
.member-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.music-track { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.music-status { display: flex; align-items: center; gap: 8px; }
.music-track:last-child { border-bottom: none; }
.music-track.playing .eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; flex-shrink: 0; }
.music-track .eq span {
  width: 3px; background: var(--ok); border-radius: 2px;
  animation: eq .9s ease-in-out infinite;
  transform-origin: bottom;
}
.music-track .eq span:nth-child(1) { height: 6px; animation-delay: -.6s; }
.music-track .eq span:nth-child(2) { height: 13px; animation-delay: -.2s; }
.music-track .eq span:nth-child(3) { height: 9px; animation-delay: -.9s; }
.music-controls { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.toast {
  position: fixed; bottom: 22px; right: 22px;
  background: var(--panel-alt); border: 1px solid var(--border);
  padding: 11px 18px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 10px 30px -10px #000000aa;
  overflow: hidden;
  animation: toastIn .3s cubic-bezier(.16,1,.3,1);
}
.toast::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--accent);
  animation: shrinkWidth 3s linear forwards;
}
.toast.error { border-color: var(--err); }
.toast.error::after { background: var(--err); }
.toast.premium { border-color: var(--warn); }
.toast.premium::after { background: var(--warn); }

.modal-overlay {
  position: fixed; inset: 0; background: #00000099;
  display: flex; align-items: center; justify-content: center;
  z-index: 100; animation: fadeIn .15s ease;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; width: min(360px, calc(100vw - 32px));
  box-shadow: 0 20px 50px -15px #000000cc;
  animation: fadeUp .2s cubic-bezier(.16,1,.3,1);
}
.modal-card h3 { margin: 0 0 10px; font-size: 16px; }
.modal-avec-icone { text-align: center; }
.modal-avec-icone .modal-actions { justify-content: center; }
.modal-icone {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); border: 1px solid #52525b;
  animation: iconeEntree .45s cubic-bezier(.34,1.56,.64,1);
}
.modal-icone.danger { background: linear-gradient(180deg, #7f1d1d 0%, #2a0f0f 100%); border-color: #b91c1c; }
.modal-icone .ath-ico { width: 24px; height: 24px; animation: iconeSortie 1.6s ease-in-out .45s infinite; }
@keyframes iconeEntree { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes iconeSortie { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Ecran de sortie apres « Se deconnecter ». */
.sortie-anim {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 40%, #27272a 0%, #050506 70%);
  animation: fadeIn .2s ease;
}
.sortie-anim p { margin: 0; font-size: 15px; color: var(--text-dim); transition: color .2s ease; }
.sortie-cercle {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); border: 1px solid #52525b;
  animation: sortiePulse 1s ease-in-out infinite;
}
.sortie-cercle .ath-ico { width: 30px; height: 30px; }
.sortie-anim.fini p { color: var(--text); }
.sortie-anim.fini .sortie-cercle { animation: none; }
.sortie-anim.fini .sortie-cercle .ath-ico { animation: sortieGlisse .55s cubic-bezier(.55,0,1,.45) forwards; }
.sortie-anim.disparait { animation: modalClose .25s ease forwards; }
@keyframes sortiePulse { 0%, 100% { box-shadow: 0 0 0 0 #ffffff22; } 50% { box-shadow: 0 0 0 12px #ffffff00; } }
@keyframes sortieGlisse { to { transform: translateX(26px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal-icone, .modal-icone .ath-ico, .sortie-cercle, .sortie-anim.fini .sortie-cercle .ath-ico { animation: none; }
}
.modal-card p { margin: 0 0 18px; color: var(--text-dim); font-size: 13.5px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
.modal-input {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 9px 12px; font-size: 13.5px; font-family: inherit;
  transition: border-color .15s ease;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
/* Chiffres avec fleches natives desactivees : rendu incoherent selon
   navigateur/OS (parfois comme une petite croix) alors que le reste du
   champ suit deja notre propre style arrondi. */
.modal-input[type=number]::-webkit-inner-spin-button,
.modal-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.modal-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
select.modal-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px; cursor: pointer;
}
select.modal-input option { background: var(--panel-alt); color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
/* Couleurs vives : vert et rouge francs, legere lueur au survol. */
.btn.modal-confirm {
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  box-shadow: 0 4px 14px rgba(34,197,94,.30);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn.modal-confirm:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(34,197,94,.45); transform: translateY(-1px); }
.btn.modal-cancel {
  background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
  box-shadow: 0 4px 14px rgba(239,68,68,.28);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn.modal-cancel:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(239,68,68,.42); transform: translateY(-1px); }
.btn.modal-confirm.success { animation: modalConfirmPop .32s cubic-bezier(.34,1.56,.64,1); }
/* Sur une confirmation oui/non, les couleurs de la modale de moderation
   s'inversent : c'est CONFIRMER qui est l'action lourde, pas annuler. */
.btn.modal-confirm-danger { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 14px rgba(239,68,68,.30); }
.btn.modal-cancel-neutre { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.btn.modal-cancel-neutre:hover { border-color: var(--accent); }
/* Cibles tactiles : les deux boutons se touchent a 10px d'intervalle. */
.modal-actions .btn { min-height: 40px; }
.modal-card.closing { animation: modalClose .2s ease forwards; }
@keyframes modalConfirmPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes modalClose {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.92); }
}

/* --- Responsive (mobile/tablette) --- */
@media (max-width: 860px) {
  /* overflow-x: hidden (pas overflow-x: visible) : le slide horizontal
     translateX() du swap de page (mainSwapIn/mainSwapOut) depassait
     brievement la largeur de l'ecran a chaque changement de module - sans
     hauteur fixe pour la cacher (contrairement au bureau, voir .shell plus
     haut), ce debordement forcait le navigateur mobile a dezoomer toute la
     page le temps de l'anim, un vrai bug visuel a chaque clic de module.
     overflow-y reste visible : la page doit toujours defiler naturellement
     en hauteur sur mobile (voir min-height: 100vh juste au-dessus). */
  /* clip (et non hidden) : hidden faisait de .shell un conteneur de
     defilement que scrollIntoView pouvait decaler sur le cote - tout le
     dashboard restait coupe a gauche (« bug de calibrage »). */
  .shell { flex-direction: column; height: auto; min-height: 100vh; overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
  /* Deux rangees plutot qu'une seule : header+recherche+compte sur la
     premiere, liste des serveurs sur sa PROPRE rangee en pleine largeur -
     avant, les 4 elements se partageaient une seule rangee et la liste des
     serveurs (le seul moyen d'en choisir un) se retrouvait ecrasee a
     quelques pixels de large entre la recherche et le compte, illisible et
     quasi inutilisable sur telephone. */
  .sidebar {
    width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--border);
  }
  /* La recherche portait le `flex: 1` qui poussait le compte a droite ; elle
     est partie sur l'accueil avec la liste. C'est l'en-tete qui prend le
     relais, sinon marque et compte se collent a gauche. */
  /* flex: 1 0 auto (et non flex: 1) : l'en-tete pouvait retrecir sous sa
     propre largeur, la rangee ne passait jamais a la ligne et la photo de
     profil et « Déconnexion » recouvraient le nom « Athena ». */
  .sidebar-header { padding: 0; flex: 1 0 auto; order: 1; }
  /* Pseudo en entier sur une ligne avec le bouton : faute de place, tout
     le compte passe sur sa propre rangee plutot que de couper le pseudo. */
  .user-footer {
    flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; order: 2;
    border-top: none; padding: 0;
  }
  .user-footer .uname { flex: 0 1 auto; }
  .user-footer > .btn { flex: 0 0 auto; }
  /* La barre laterale devient une rangee ordonnee (order: 1..4) : un
     element sans `order` s'y placerait en tete et casserait la premiere
     rangee. L'intitule n'a de toute facon aucun sens au-dessus d'une bande
     horizontale d'avatars. */
  /* La liste des serveurs a quitte la colonne : sur mobile elle occupait une
     rangee entiere pour dupliquer la grille de l'accueil, juste en dessous. */
  /* Sur sa propre rangee et en pleine largeur : c'est le seul moyen de
     changer de serveur, et une cible tactile coincee entre la marque et
     l'avatar sur une rangee deja pleine se rate une fois sur deux. */
  .retour-accueil { order: 3; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 11px 12px; }
  /* Les raccourcis ronds partagent la rangee de « Mes serveurs ». */
  .sidebar > .liens-ronds { order: 4; padding: 0; }
  .lien-rond { width: 36px; height: 36px; }

  /* La nav par modules quitte la sidebar (deja tres serree en rangees sur
     mobile) pour une bande d'onglets horizontale scrollable en haut de
     .main - meme composant JS (renderPageNav), juste une autre instance du
     DOM affichee ici via .page-nav-mobile pendant que celle de la sidebar
     est masquee. */
  .sidebar-nav { display: none; }
  .page-nav-mobile {
    display: flex; flex-direction: row; gap: 6px;
    overflow-x: auto; padding-bottom: 10px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    animation: fadeUp .35s ease .05s backwards;
  }
  .page-nav-mobile .page-nav-group { display: none; }
  .page-nav-mobile .page-nav-item {
    flex-shrink: 0; flex-direction: column; gap: 4px;
    align-items: center; justify-content: center;
    /* 44px : la cible tactile minimale recommandee. Les onglets tombaient a
       ~38px de haut, assez pour rater l'onglet voisin au pouce. */
    min-height: 44px; scroll-snap-align: start;
    padding: 8px 14px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border);
  }
  /* Le fond `var(--panel-alt)` de la regle mobile ci-dessus a la meme
     specificite que `.page-nav-item.active` mais passe APRES : il ecrasait
     le degrade, et l'onglet courant ne se distinguait plus que par la
     couleur de son texte. */
  .page-nav-mobile .page-nav-item.active {
    border-color: transparent;
    background: var(--grad);
    box-shadow: inset 0 0 0 1px #52525b;
  }
  .page-nav-mobile .page-nav-label { flex: none; font-size: 11px; }
  /* -webkit-overflow-scrolling + scroll-snap : la bande se feuillette au
     doigt et s'arrete sur un onglet entier au lieu de le couper en deux. */
  .page-nav-mobile { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .page-nav-mobile::-webkit-scrollbar { height: 4px; }
  .page-nav-mobile::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .main { padding: 20px 16px; overflow-y: visible; }
  .main h1 { font-size: 18px; }

  /* L'accueil n'ayant pas de colonne, sa barre du haut est le seul endroit
     ou se deconnecter : elle reste sur une rangee, le pseudo cede la place
     en premier. */
  .shell-accueil .main { padding: 16px; }
  .accueil-topbar { padding-bottom: 14px; margin-bottom: 18px; gap: 10px; }
  .accueil-barre { flex-wrap: wrap; }
  .accueil-barre .guild-search { max-width: none; min-width: 180px; }
  /* Les cartes de serveur sont des cibles tactiles : une seule colonne
     plutot que deux cartes de 160px ou le nom se coupe. */
  .accueil-grille { grid-template-columns: 1fr; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .section { padding: 16px 16px; }

  .member-row { flex-wrap: wrap; }
  .member-actions { width: 100%; justify-content: flex-end; }

  .toast { left: 16px; right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .login-card { padding: 30px 22px; }
  /* A 375px, marque + pseudo + bouton ne tiennent plus sur une ligne : le
     compte passe sous la marque, pseudo en entier. */
  .accueil-topbar { flex-wrap: wrap; }
  .accueil-compte { flex: 1 1 100%; justify-content: flex-start; }
  .grid { grid-template-columns: 1fr 1fr; }
  .section { grid-template-columns: 1fr; }
  .stat-card .value { font-size: 18px; }
}

/* --- Verrou WL securite : floutage + overlay ---------------------------- */
.wl-secu-container {
  position: relative;
}
.wl-secu-locked {
  filter: blur(6px) saturate(0.6);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  transition: filter 0.2s ease;
}
.wl-secu-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 32px 20px;
  pointer-events: none;
}
.wl-secu-overlay .wl-secu-locked-box {
  /* Sticky pour rester dans la viewport quand la page en-dessous est plus
     longue que l'ecran : le message d'acces refuse suit le scroll au lieu
     de partir en haut ou en bas. */
  position: sticky;
  top: max(20vh, 90px);
  margin: 0 auto;
}
.wl-secu-locked-box {
  pointer-events: auto;
  max-width: 460px;
  padding: 36px 32px;
  background: rgba(18, 22, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.wl-secu-eye {
  color: var(--warn, #f7b955);
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  opacity: 0.9;
}
.wl-secu-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.wl-secu-line {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #e6e7ea);
}
.wl-secu-line strong { color: var(--warn, #f7b955); font-weight: 600; }
.wl-secu-line.dim { color: var(--text-dim, #9198a1); font-size: 13px; }
.wl-secu-line code {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--accent2, #8b96ff);
}
@media (max-width: 640px) {
  .wl-secu-locked-box { padding: 26px 20px; }
  .wl-secu-title { font-size: 17px; }
  .wl-secu-line { font-size: 13.5px; }
}

/* Liens sous la carte de connexion */
.login-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 8px; }
.login-liens a { color: var(--text-dim); font-size: 12.5px; text-decoration: none; padding: 10px 4px; }
.login-liens a:hover { color: var(--text); }

/* Reglage sur toute la largeur de la grille d'une section. */
.section > .field-row.pleine { grid-column: 1 / -1; }

/* --- Choix d'un membre (niveaux, casino, liste noire) --- */
.choix-membre { position: relative; display: flex; align-items: center; width: 100%; }
.choix-membre .choix-membre-loupe { position: absolute; left: 11px; width: 14px; height: 14px; opacity: .6; pointer-events: none; }
.field-row .choix-membre input[type=text] { padding-left: 32px; }
.choix-membre-liste {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px #000a; max-height: 320px; overflow-y: auto;
}
.choix-membre-liste[hidden] { display: none; }
.field-row:has(.choix-membre-liste:not([hidden])) { position: relative; z-index: 41; }
.choix-membre-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 7px; padding: 7px 8px; color: var(--text);
  font: inherit; cursor: pointer;
}
.choix-membre-item:hover { background: var(--panel-alt); }
.choix-membre-item img, .choix-membre-item .icon-fallback {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--panel-alt);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.choix-membre-item .mname { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choix-membre-item .mtag { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choix-membre-vide { padding: 8px; font-size: 12.5px; color: var(--text-dim); }

/* --- Page Niveaux --- */
.niv-tete h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.niv-tete h2 .ath-ico { width: 18px; height: 18px; }
.niv-tete .hint { margin: 0 0 12px; }
.niv-recompenses { display: flex; flex-direction: column; gap: 6px; }
.niv-recompenses .empty-state { padding: 14px 0; }
.niv-recompense {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
}
.niv-palier { font-size: 12.5px; font-weight: 700; min-width: 76px; }
.niv-role { flex: 1; min-width: 0; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niv-ajout { flex-direction: row; align-items: center; flex-wrap: wrap; }
.niv-ajout input[type=number] { width: 84px !important; flex: 0 0 auto; }
.niv-ajout .custom-select { flex: 1 1 180px; width: auto; }
.niv-fiche {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
  background: var(--panel-alt); border: 1px solid var(--accent2); border-radius: 10px; padding: 12px 14px;
  animation: fadeUp .3s cubic-bezier(.16,1,.3,1);
}
.niv-fiche[hidden] { display: none; }
.niv-fiche-tete { display: flex; align-items: center; gap: 10px; }
.niv-fiche-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.niv-fiche-actions input[type=number] {
  width: 84px; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 6px 10px; font-size: 13px;
}
.niv-classement { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.niv-classement .empty-state { padding: 24px 0; }
.niv-ligne {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
}
.niv-ligne.parti { opacity: .6; }
.niv-rang { width: 26px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }
.niv-medaille { width: 22px; height: 22px; margin: 0 2px; flex-shrink: 0; }
.niv-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; object-fit: cover;
}
.niv-infos { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.niv-infos .mname { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niv-infos .mtag { font-size: 11.5px; color: var(--text-dim); }
.niv-barre { display: block; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; max-width: 260px; }
.niv-rempli { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a1a1aa, #fafafa); }
.niv-niveau { font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.niv-pied { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.niv-pied:empty { display: none; }
.niv-tout-effacer { justify-self: start; margin-top: 14px; }
.niv .btn { width: auto; }
.niv-fiche-actions .tname { font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 640px) {
  .niv-ligne { flex-wrap: wrap; }
  /* Le nom garde de la place : le solde et le bouton passent dessous. */
  .niv-infos { min-width: 120px; }
  .niv-ligne .btn { margin-left: auto; }
  .niv-barre { max-width: none; }
}

/* --- Page Casino --- */
.cas-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cas-jeu-nom { display: flex; align-items: center; gap: 8px; color: var(--text) !important; }
.cas-jeu-nom .ath-ico { width: 16px; height: 16px; opacity: .9; }
.cas-exclure { gap: 10px; }
.cas-exclure .cas-cible { font-size: 12.5px; }
.cas-exclure .btn { align-self: flex-start; }

/* --- Page Modération récente --- */
.modlog-page .modlog-liste { display: flex; flex-direction: column; gap: 6px; }
.modlog-page .modlog-entry { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; }
.modlog-page .modlog-entry:last-child { border-bottom: 1px solid var(--border); }
.modlog-page .modlog-header { padding: 9px 12px; gap: 10px; border-radius: 10px; }
.modlog-page .modlog-header:hover { padding-left: 12px; }
.modlog-icon .ath-ico { width: 16px; height: 16px; }
.modlog-page .modlog-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border);
}
.modlog-icon.type-lourde { border-color: #e74c3c66; background: #e74c3c14; }
.modlog-icon.type-legere { border-color: #f1c40f55; background: #f1c40f10; }
.modlog-icon.type-levee { border-color: #2ecc7155; background: #2ecc7110; }
.modlog-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.modlog-page .modlog-title .badge { margin-top: 0; }
.modlog-page .modlog-details { padding: 0 14px; }
.modlog-page .modlog-entry.open .modlog-details { padding: 6px 14px 12px; }
.modlog-edition { flex-direction: column; gap: 6px; }
/* En colonne, la largeur fixe du libelle (flex: 0 0 100px) devenait une
   hauteur de 100px : un grand vide sous « Raison ». */
.modlog-edition .modlog-field-key { flex: 0 0 auto; }
.modlog-edition textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; resize: vertical;
}
.modlog-boutons { display: flex; gap: 8px; padding-top: 8px; }
.modlog-page .btn, #section-blacklist .btn { width: auto; }
.modlog-compte { margin: 4px 0 2px; }
.modlog-plus { justify-self: center; }
.modlog-plus[hidden] { display: none; }

/* --- Alertes « il manque quelque chose » ---
   Bandeau du haut, permissions manquantes d'une protection, pas de salon
   de logs : un degrade jaune -> orange translucide, « fantome », qui se
   voit sans crier. */
.ops-warning, .prot-alerte, .prot-logs.manquant {
  background: linear-gradient(100deg, #facc1529 0%, #fb923c1c 55%, #f9731608 100%);
  border: 1px solid #fbbf2447;
  box-shadow: inset 0 1px 0 #fde68a1a, 0 12px 32px -20px #f59e0b73;
}
.ops-warning { color: #fcd34d; }
.ops-warning ul { color: #fde68a; }
.prot-alerte { color: #fde68a; }
.prot-alerte strong { color: #fcd34d; }
.prot-logs.manquant .prot-logs-texte { color: #fde68a; }

/* Permissions : du texte, sans pastille autour. */
.perms-row { gap: 4px 14px; }
.perm-chip, .perm-chip.ok, .perm-chip.missing {
  padding: 0; border: 0; border-radius: 0; background: none;
}
.perm-chip.missing { color: #fb923c; }

/* --- Touches de blanc, en plus leger que le site ---
   Liseres blancs en haut des blocs, page active marquee d'un trait blanc,
   survols en blanc. Les cases de reglage perdent leur bordure (case dans
   une case) : le dashboard respire. */
:root { --lisere: inset 0 1px 0 #ffffff14; }
.section, .prot-card, .stat-card, .prot-grille, .prot-logs, .login-card { box-shadow: var(--lisere); }
.page-nav-item.active {
  background: linear-gradient(90deg, #ffffff17, #ffffff05);
  box-shadow: inset 2px 0 0 #fafafa;
}
.stat-card:hover { border-color: #ffffff8c; }
.field-row, .field-col, .toggle-row { border-color: transparent; }
.field-row:hover, .field-col:hover, .toggle-row:hover { border-color: #ffffff33; transform: none; }
.toggle-row.locked:hover { border-color: transparent; }
.field-row input[type=text]:focus, .field-row input[type=number]:focus { border-color: #ffffffb3; }
.prot-head-icone { box-shadow: var(--lisere); border-color: #71717a; }
/* Modules de l'apercu : emojis en couleur, un peu effaces quand le module
   est coupe ; le point d'etat dit toujours actif / inactif. */
.module-icon { opacity: .6; transition: opacity .2s ease, transform .2s ease; }
.module-card.active .module-icon { opacity: 1; }
.module-card:hover .module-icon { opacity: 1; transform: scale(1.12); }


/* ==========================================================================
   Finitions : bandeau d'etat aligne, retour « Mes serveurs », choix du
   serveur, champs nombre et interrupteurs animes.
   ========================================================================== */

/* Bandeau « Athena n'est pas 100 % operationnelle » : l'icone a sa colonne,
   titre, liste et conseil s'alignent tous dans la seconde, a toutes les
   largeurs. */
.ops-warning {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 14px 18px;
}
/* « Masquer » sous le texte, en grand : plus de petit bouton perdu à droite. */
.ops-warning-masquer {
  grid-column: 2; justify-self: start; margin-top: 10px;
  padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: rgba(253, 230, 138, .06); color: inherit; border: 1px solid rgba(253, 230, 138, .4);
}
.ops-warning-masquer:hover { background: rgba(253, 230, 138, .14); }
.ops-warning-icone { line-height: 1; padding-top: 1px; }
.ops-warning-icone .ath-ico { width: 22px; height: 22px; display: block; }
.ops-warning-corps { min-width: 0; }
.ops-warning-titre { display: block; font-size: 14.5px; line-height: 1.35; }
.ops-warning ul { margin: 7px 0 8px; padding-left: 18px; }
.ops-warning li + li { margin-top: 3px; }
.ops-warning-hint { line-height: 1.45; }
@media (max-width: 480px) {
  .ops-warning { padding: 12px 14px; column-gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
  .ops-warning-masquer { margin-top: 8px; padding: 8px 14px; font-size: 13px; }
  .ops-warning-icone .ath-ico { width: 19px; height: 19px; }
  .ops-warning-titre { font-size: 14px; }
}

.stat-card .detail { margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.prot-logs[hidden] { display: none; }

/* « Mes serveurs » : une vraie fleche, plus grande, qui glisse au survol. */
.retour-fleche {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--grad-doux); border: 1px solid var(--border); flex-shrink: 0;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s ease;
}
.retour-fleche .ath-ico { width: 15px; height: 15px; }
.retour-accueil:hover .retour-fleche { transform: translateX(-3px); border-color: #ffffff55; }

/* Choix du serveur : loupe Athena, cartes plus riches et vivantes. */
.guild-search { padding: 0 12px; border-radius: 12px; min-height: 42px; }
.guild-search-icon { display: inline-flex; opacity: .75; font-size: 0; transition: opacity .15s ease, transform .2s ease; }
.guild-search-icon .ath-ico { width: 16px; height: 16px; }
.guild-search:focus-within .guild-search-icon { opacity: 1; transform: scale(1.1); }
.guild-search-input { font-size: 14px; padding: 11px 0; }
.accueil-barre .guild-search { max-width: 460px; }
.accueil-grille { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; }
.accueil-carte {
  position: relative; overflow: hidden; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #ffffff0d, #ffffff03 60%), var(--panel);
  transition: border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease;
}
.accueil-carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, #ffffff14, transparent 55%);
  opacity: 0; transition: opacity .25s ease;
}
.accueil-carte:hover, .accueil-carte:focus-visible {
  border-color: #ffffff4d; transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px #000000e6, 0 0 0 1px #ffffff14;
}
.accueil-carte:hover::after, .accueil-carte:focus-visible::after { opacity: 1; }
.accueil-carte img, .accueil-carte .icon-fallback {
  width: 50px; height: 50px; border-radius: 14px; font-size: 18px;
  box-shadow: 0 0 0 1px #ffffff1f, 0 8px 18px -10px #000000cc;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.accueil-carte:hover img, .accueil-carte:hover .icon-fallback { transform: scale(1.06) rotate(-2deg); }
.accueil-carte-nom { font-size: 15px; }
.accueil-carte-membres { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.accueil-carte-membres .ath-ico { width: 13px; height: 13px; opacity: .7; }
.accueil-carte-fleche {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  background: var(--panel-alt); border: 1px solid var(--border); opacity: .55;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.accueil-carte-fleche .ath-ico { width: 14px; height: 14px; }
.accueil-carte:hover .accueil-carte-fleche { opacity: 1; transform: translateX(3px); border-color: #ffffff55; }

/* Champs nombre : fleches Athena, la valeur rebondit a chaque cran. */
.nombre { position: relative; display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; }
.field-row .nombre, .field-col .nombre, .modal-field .nombre, .cmdp-corps .nombre { display: flex; width: 100%; }
.niv-ajout .nombre, .niv-fiche-actions .nombre, .cmdp-ligne .nombre { flex: 0 0 auto; }
.nombre input[type=number] {
  -moz-appearance: textfield; appearance: textfield; padding-right: 34px !important; transition: color .15s ease;
}
.nombre input[type=number]::-webkit-inner-spin-button,
.nombre input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nombre-fleches {
  position: absolute; top: 3px; right: 3px; bottom: 3px; width: 24px;
  display: flex; flex-direction: column; gap: 2px;
}
.nombre-pas {
  flex: 1; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.nombre-pas::before {
  content: ""; width: 6px; height: 6px; border: solid var(--text-dim); border-width: 0 1.6px 1.6px 0;
  transform: translateY(-1px) rotate(225deg); transition: border-color .15s ease;
}
.nombre-pas.bas::before { transform: translateY(-2px) rotate(45deg); }
.nombre-pas:hover { background: var(--grad-doux); border-color: #ffffff55; }
.nombre-pas:hover::before { border-color: var(--text); }
.nombre-pas:active { transform: scale(.88); }
.nombre.monte input[type=number] { animation: nombreMonte .28s cubic-bezier(.34,1.56,.64,1); }
.nombre.descend input[type=number] { animation: nombreDescend .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes nombreMonte { 0% { text-indent: 0; color: var(--ok); } 40% { text-indent: 0; transform: translateY(-2px); } 100% { transform: none; } }
@keyframes nombreDescend { 0% { color: var(--warn); } 40% { transform: translateY(2px); } 100% { transform: none; } }

/* Interrupteurs : onde verte (active) ou rouge (coupe), rebond du curseur,
   eclat sur la ligne. */
.switch.bascule-on .slider { animation: ondeOn .65s ease-out; }
.switch.bascule-off .slider { animation: ondeOff .65s ease-out; }
.switch.bascule-on .slider::before { animation: curseurOn .45s cubic-bezier(.34,1.56,.64,1); }
.switch.bascule-off .slider::before { animation: curseurOff .45s cubic-bezier(.34,1.56,.64,1); }
.toggle-row.bascule-on, .prot-head.bascule-on, .field-row.bascule-on { animation: ligneOn .8s ease-out; }
.toggle-row.bascule-off, .prot-head.bascule-off, .field-row.bascule-off { animation: ligneOff .8s ease-out; }
@keyframes ondeOn { 0% { box-shadow: 0 0 0 0 #2ecc7199; } 100% { box-shadow: 0 0 0 12px #2ecc7100; } }
@keyframes ondeOff { 0% { box-shadow: 0 0 0 0 #e74c3c80; } 100% { box-shadow: 0 0 0 12px #e74c3c00; } }
@keyframes curseurOn { 0% { transform: translateX(0) scale(1); } 60% { transform: translateX(19px) scale(1.2); } 100% { transform: translateX(17px) scale(1); } }
@keyframes curseurOff { 0% { transform: translateX(17px) scale(1); } 60% { transform: translateX(-2px) scale(1.2); } 100% { transform: translateX(0) scale(1); } }
@keyframes ligneOn { 0% { box-shadow: inset 0 0 0 1px #2ecc7199, 0 0 22px -6px #2ecc7166; } 100% { box-shadow: inset 0 0 0 1px #2ecc7100, 0 0 0 0 #2ecc7100; } }
@keyframes ligneOff { 0% { box-shadow: inset 0 0 0 1px #e74c3c80, 0 0 22px -6px #e74c3c55; } 100% { box-shadow: inset 0 0 0 1px #e74c3c00, 0 0 0 0 #e74c3c00; } }
.prot-etat { transition: color .25s ease; }
.prot-head.bascule-on .prot-etat, .prot-head.bascule-off .prot-etat { animation: etatChange .4s ease-out; }
@keyframes etatChange { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .switch.bascule-on .slider, .switch.bascule-off .slider,
  .switch.bascule-on .slider::before, .switch.bascule-off .slider::before,
  .bascule-on, .bascule-off, .nombre.monte input, .nombre.descend input,
  .prot-head.bascule-on .prot-etat, .prot-head.bascule-off .prot-etat { animation: none !important; }
  .accueil-carte, .accueil-carte img, .accueil-carte-fleche, .retour-fleche { transition: none; }
}

/* ===========================================================================
   Retouches 2.22 : coches, chevrons, déconnexion, icônes des modules,
   verrou de la liste blanche, animations.
   =========================================================================== */

/* --- Déconnexion : plus grande, plus calme. Le rouge n'apparait qu'au survol. */
.btn.btn-sortie {
  width: auto; padding: 10px 16px; font-size: 14px; font-weight: 600;
  background: var(--panel-alt); color: var(--text-dim);
  border: 1px solid var(--border); box-shadow: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .12s ease;
}
.btn.btn-sortie .ath-ico { width: 16px; height: 16px; opacity: .75; transition: opacity .18s ease, transform .18s ease; }
.btn.btn-sortie:hover { filter: none; color: #fca5a5; border-color: #7f1d1d; background: #1c0f10; box-shadow: none; }
.btn.btn-sortie:hover .ath-ico { opacity: 1; transform: translateX(2px); }
.btn.btn-sortie:active { transform: scale(.98); }
.user-footer > .btn.btn-sortie { min-height: 42px; }
@media (max-width: 860px) {
  .btn.btn-sortie { padding: 8px 12px; font-size: 13px; }
  .user-footer > .btn.btn-sortie { min-height: 0; }
}

/* --- Icônes des modules (emojis d'Athena, plus d'emojis natifs). */
.prot-carre-icone .ath-ico { transition: opacity .15s ease, transform .2s ease; }
.prot-carre:hover .prot-carre-icone .ath-ico, .prot-carre.active .prot-carre-icone .ath-ico { opacity: 1; transform: scale(1.08); }
.prot-head-icone .ath-ico { width: 24px; height: 24px; }

/* --- Cases à cocher : carrées, arrondies, la coche se dessine. */
:where(input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid #52525b; background: #111113;
  display: inline-grid; place-content: center; vertical-align: middle;
  transition: background .18s ease, border-color .18s ease, box-shadow .25s ease, transform .12s ease;
}
:where(input[type="checkbox"])::before {
  content: ""; width: 10px; height: 10px; background: #0a0a0b;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0) rotate(-12deg); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
:where(input[type="checkbox"]):hover { border-color: #a1a1aa; }
:where(input[type="checkbox"]):checked { background: #f4f4f5; border-color: #f4f4f5; animation: cocheOnde .45s ease-out; }
:where(input[type="checkbox"]):checked::before { transform: scale(1) rotate(0); }
:where(input[type="checkbox"]):active { transform: scale(.9); }
:where(input[type="checkbox"]):focus-visible { outline: none; box-shadow: 0 0 0 3px #ffffff26; }
:where(input[type="checkbox"]):disabled { opacity: .45; cursor: not-allowed; }
@keyframes cocheOnde { 0% { box-shadow: 0 0 0 0 #ffffff55; } 100% { box-shadow: 0 0 0 9px #ffffff00; } }

.custom-multiselect-check {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #52525b; background: #111113;
  display: inline-grid; place-content: center; font-size: 0;
  transition: background .18s ease, border-color .18s ease;
}
.custom-multiselect-check::before {
  content: ""; width: 10px; height: 10px; background: #0a0a0b;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
}
.custom-multiselect-option.selected .custom-multiselect-check { background: #f4f4f5; border-color: #f4f4f5; }
.custom-multiselect-option.selected .custom-multiselect-check::before { transform: scale(1); }
.custom-multiselect-option.vient.selected .custom-multiselect-check { animation: cocheOnde .45s ease-out; }
.custom-multiselect-option.vient.selected .custom-multiselect-check::before { animation: cochePose .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cochePose { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(0); } }
.custom-multiselect-option:hover .custom-multiselect-check { border-color: #a1a1aa; }

/* --- Chevrons dessinés (plus de « ▾ » ou « ▸ » en texte). */
.custom-select-chevron, .modlog-chevron {
  font-size: 0; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px;
  color: var(--text-dim); transform: translateY(-2px) rotate(45deg);
  transition: transform .22s cubic-bezier(.34, 1.3, .64, 1), color .15s ease;
}
.custom-select-trigger:hover .custom-select-chevron { color: var(--text); }
.custom-select.open .custom-select-chevron { transform: translateY(2px) rotate(225deg); color: var(--text); }
.modlog-chevron { transform: rotate(-45deg); margin-right: 2px; }
.ouvert > .modlog-chevron, .ouvert .modlog-chevron { transform: rotate(45deg); }
.prot-how li::before {
  content: ""; left: 4px; top: 8px; width: 6px; height: 6px; font-size: 0;
  border-right: 2px solid var(--accent2, #a1a1aa); border-top: 2px solid var(--accent2, #a1a1aa);
  transform: rotate(45deg);
}

/* --- Verrou de la liste blanche : page floutée sur fond sombre. */
.wl-secu-locked { filter: blur(10px) saturate(.5); opacity: .45; }
.wl-secu-overlay {
  background: radial-gradient(ellipse at 50% 22%, #18181bcc 0%, #070708e6 70%);
  border-radius: 16px; backdrop-filter: blur(2px);
}
.wl-secu-locked-box {
  max-width: 500px; background: linear-gradient(180deg, #1c1c20f2 0%, #0d0d0ff2 100%);
  border: 1px solid #3f3f46; border-radius: 20px; padding: 34px 30px 26px;
  box-shadow: 0 30px 80px -24px #000000e6, inset 0 1px 0 #ffffff12;
  animation: verrouEntree .35s cubic-bezier(.2, .9, .3, 1.15);
}
.wl-secu-eye { margin-bottom: 16px; }
.wl-secu-halo {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #3f3f46 0%, #18181b 70%); border: 1px solid #52525b;
  box-shadow: 0 0 0 8px #ffffff08, 0 10px 30px -8px #000;
  animation: verrouRespire 3s ease-in-out infinite;
}
.wl-secu-halo .wl-secu-cadenas { width: 32px; height: 32px; }
.wl-secu-title { font-size: 21px; letter-spacing: -.01em; }
.wl-secu-line strong { color: var(--text); }
.wl-secu-nom { color: #fde68a !important; }
.wl-secu-attention {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b1f 0%, #ef44441a 100%); border: 1px solid #f59e0b55;
}
.wl-secu-attention .ath-ico { width: 20px; height: 20px; margin-top: 2px; }
.wl-secu-attention strong { display: block; color: #fcd34d; font-size: 13.5px; margin-bottom: 4px; }
.wl-secu-attention p { margin: 0; color: #e4e4e7; font-size: 13px; line-height: 1.55; }
@keyframes verrouEntree { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes verrouRespire { 0%, 100% { box-shadow: 0 0 0 8px #ffffff08, 0 10px 30px -8px #000; } 50% { box-shadow: 0 0 0 14px #ffffff04, 0 10px 30px -8px #000; } }

/* --- Animations : pages et cartes entrent en douceur, rien de brusque. */
.section { animation: carteEntree .28s ease both; }
.section:nth-of-type(2) { animation-delay: .04s; }
.section:nth-of-type(3) { animation-delay: .08s; }
@keyframes carteEntree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :where(input[type="checkbox"]), :where(input[type="checkbox"])::before,
  .custom-multiselect-check, .custom-multiselect-check::before,
  .custom-select-chevron, .modlog-chevron, .wl-secu-locked-box, .wl-secu-halo, .section, .prot-carre, .coche, .coche::after {
    animation: none !important; transition: none !important;
  }
}
.wl-secu-line code { white-space: nowrap; }

/* Créateur de serveur (façon /createserveur) : réglages en haut, éditeur
   bloc par bloc à gauche, aperçu Discord à droite. */
.createur {
  --t-texte: #a1a1aa; --t-vocal: #34d399; --t-annonces: #fbbf24;
  --t-forum: #60a5fa; --t-scene: #c084fc; --t-separateur: #71717a;
}
.createur-reglages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 12px;
}
.createur-reglage { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.createur-reglage select { width: 100%; }
.createur-emojis { padding-bottom: 8px; }
.createur-modeles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.createur .tname { font-size: 12.5px; color: var(--text-dim); }
.createur-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin: 12px 0; }
.createur-plan { display: flex; flex-direction: column; gap: 12px; }
.createur-categorie { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--panel-alt); }
.createur-categorie.separateur { border-style: dashed; background: transparent; padding: 8px 12px; }
.createur-tete, .createur-salon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.createur input[type=text], .createur select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 11px; font-size: 13px; transition: border-color .15s ease;
}
.createur input[type=text]:focus, .createur select:focus { outline: none; border-color: var(--accent); }
.createur-tete input[type="text"] { flex: 1 1 130px; min-width: 0; font-weight: 600; }
.createur-outils { display: inline-flex; gap: 4px; margin-left: auto; }
.createur-outils .btn.compact { padding: 5px 9px; }
.createur-salons { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0 12px; }
.createur-salon {
  padding: 6px 8px; border-radius: 9px; background: var(--bg);
  border: 1px solid var(--border); border-left: 3px solid var(--t-texte);
}
.createur-salon.type-vocal { border-left-color: var(--t-vocal); }
.createur-salon.type-annonces { border-left-color: var(--t-annonces); }
.createur-salon.type-forum { border-left-color: var(--t-forum); }
.createur-salon.type-scene { border-left-color: var(--t-scene); }
.createur-salon.separateur { border-left-color: var(--t-separateur); border-style: dashed; border-left-style: solid; }
.createur-salon input[type="text"] { flex: 1 1 100px; min-width: 0; }
.createur-salon input.createur-emoji { flex: 0 0 52px; width: 52px; text-align: center; padding: 7px 4px; }
.createur-salon select { flex: 0 0 auto; min-width: 104px; }
.createur-salon.separateur input[type="text"] { letter-spacing: .04em; color: var(--text-dim); }
.createur-vide { display: none; }
.createur-type {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  background: color-mix(in srgb, var(--t-texte) 18%, transparent); color: var(--t-texte);
}
.createur-type .ath-ico { width: 15px; height: 15px; }
.createur-type.type-vocal { background: color-mix(in srgb, var(--t-vocal) 18%, transparent); }
.createur-type.type-annonces { background: color-mix(in srgb, var(--t-annonces) 18%, transparent); }
.createur-type.type-forum { background: color-mix(in srgb, var(--t-forum) 18%, transparent); }
.createur-type.type-scene { background: color-mix(in srgb, var(--t-scene) 18%, transparent); }
.createur-type.type-separateur { background: color-mix(in srgb, var(--t-separateur) 22%, transparent); }
.createur-trait { font-size: 13px; color: var(--text-dim); line-height: 1; }
.createur-blocs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 0 12px; }
.createur-bloc {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 9px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.createur-bloc:hover { border-color: var(--accent2); transform: translateY(-1px); }
.createur-bloc .createur-type { width: 22px; height: 22px; flex-basis: 22px; }
.createur-coche { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.createur-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.createur-resume { margin-top: 10px; }
/* Aperçu : la colonne des salons de Discord. */
.createur-apercu {
  position: sticky; top: 12px; background: #2b2d31; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 10px; max-height: 70vh; overflow-y: auto;
}
.createur-apercu > .tname { display: block; margin: 0 6px 8px; }
.createur-discord { display: flex; flex-direction: column; gap: 1px; font-family: "gg sans", "Noto Sans", system-ui, sans-serif; }
.dc-categorie {
  display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 0 4px;
  color: #949ba4; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-categorie:first-child { margin-top: 0; }
.dc-categorie span { overflow: hidden; text-overflow: ellipsis; }
.dc-chevron { font-size: 11px; }
.dc-cadenas { width: 11px; height: 11px; opacity: .7; }
.dc-separateur { color: #6d6f78; font-weight: 500; letter-spacing: 0; }
.dc-salon {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; color: #949ba4;
  font-size: 14px; white-space: nowrap; overflow: hidden;
}
.dc-salon span { overflow: hidden; text-overflow: ellipsis; }
.dc-salon .ath-ico { width: 16px; height: 16px; opacity: .65; }
.dc-salon:hover { background: #35373c; color: #dbdee1; }
.dc-trait { color: #6d6f78; }
.dc-trait .ath-ico { opacity: .35; }
@media (max-width: 1100px) {
  .createur-layout { grid-template-columns: minmax(0, 1fr); }
  .createur-apercu { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .createur-salons, .createur-blocs { margin-left: 0; }
  /* Ligne 1 : type et emoji ; ligne 2 : nom ; ligne 3 : options et outils. */
  .createur-salon select { flex: 1 1 0; min-width: 0; }
  .createur-salon input[type="text"]:not(.createur-emoji) { flex: 1 1 100%; }
  .createur-tete .createur-outils { margin-left: 0; }
}

/* --- Historique des tickets : un bloc par ticket --- */
.th-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.th-cible-zone:empty { display: none; }
.th-carte {
  background: linear-gradient(180deg, var(--panel-alt), var(--panel));
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--lisere, none); animation: fadeUp .3s ease backwards;
}
.th-carte.th-en-avant { border-color: #fafafa66; box-shadow: 0 0 0 1px #fafafa33, 0 12px 30px -18px #ffffff40; }
.th-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.th-icone { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #ffffff0d; flex: 0 0 auto; }
.th-icone .ath-ico { width: 18px; height: 18px; }
.th-titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.th-numero { font-size: 15px; }
.th-motif { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-salon { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.th-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.th-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.th-cle { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 600; }
.th-cle .ath-ico { width: 13px; height: 13px; opacity: .8; }
.th-val { font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.th-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--text-dim); }
.th-raison { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.th-raison p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.th-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 900px) { .th-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .th-grille { grid-template-columns: minmax(0, 1fr); }
  .th-salon { display: none; }
  .th-actions .btn { width: 100%; justify-content: center; }
}

/* Rôles-réactions : un bloc par panneau publié. */
.rr-liste { display: grid; gap: 10px; margin-top: 8px; }
.rr-carte { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.rr-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rr-tete .hint { margin-left: auto; }
.rr-roles { margin: 0; color: var(--muted, var(--text)); word-break: break-word; }
.rr-carte .btn { justify-self: start; }

/* Fiche niveau : une case par action (niveau, ajouter, retirer, fixer, zéro). */
.niv-fiche-nom { flex: 1; min-width: 0; }
.niv-fiche-nom strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niv-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.niv-case {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.niv-case-titre { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.niv-case-titre .ath-ico { width: 18px; height: 18px; }
.niv-case .hint { font-size: 12px; line-height: 1.35; flex: 1; }
.niv-case-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.niv-case-ligne input[type=number] {
  width: 96px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 6px 10px; font-size: 13px;
}
.niv-case-ligne .nombre { flex: 0 0 auto; }
.niv-case.ajout { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.niv-case.retrait { border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.niv-case.zero { border-color: color-mix(in srgb, #f87171 45%, var(--border)); }
@media (max-width: 640px) {
  .niv-cases { grid-template-columns: minmax(0, 1fr); }
}

/* --- Candidatures : trois étapes numérotées --- */
.cand-etape {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.cand-etape-tete { display: flex; align-items: flex-start; gap: 12px; }
.cand-etape-tete strong { display: block; font-size: 14px; }
.cand-etape-tete .hint { display: block; margin-top: 2px; line-height: 1.45; }
.cand-etape-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--grad-doux); border: 1px solid #3f3f46;
}
.cand-etape-corps { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cand-etape .field-row, .cand-etape .field-col { background: var(--panel); }
.cand-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.cand-questions { display: flex; flex-direction: column; gap: 6px; }
.cand-question { display: flex; align-items: center; gap: 8px; }
.cand-q-num { width: 24px; flex-shrink: 0; text-align: right; color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cand-question input {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 11px; font-size: 13px; transition: border-color .15s ease;
}
.cand-question input:focus { outline: none; border-color: var(--accent); }
.cand-retirer {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cand-retirer:hover { color: var(--err); border-color: #e74c3c66; background: #e74c3c12; }
.cand-questions-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-left: 32px; }
.cand-compteur { color: var(--text-dim); font-size: 12px; }
.cand-perso { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; }
.cand-perso summary { cursor: pointer; font-size: 13px; color: var(--text-dim); }
.cand-perso[open] summary { margin-bottom: 10px; color: var(--text); }
.cand-etape .deployer-panel { margin-top: 0; }
@media (max-width: 600px) {
  .cand-etape { padding: 12px; }
  .cand-questions-pied { padding-left: 0; }
}