/* ============================================================
   NOCTIS — THÈME DE LÉGION (nuit violette, argent lunaire)
   Remplace simplement l'ancien fichier styles.css par celui-ci.
   Aucun changement n'est apporté aux données ou au JavaScript.
   ============================================================ */

:root{
  --bg:#07080f;
  --bg-soft:#0c0e18;
  --panel:#10121d;
  --panel-2:#161927;
  --panel-hover:#1c2032;
  --line:rgba(170,180,230,.15);
  --line-strong:rgba(170,180,230,.32);
  --text:#eef0fb;
  --muted:#a3a7c0;
  --purple:#6b5bd2;
  --purple-soft:#8b7cf0;
  --purple-dark:#221b4a;
  --gold:#c3cbe6;
  --gold-light:#e8ecfb;
  --gold-dark:#5d6788;
  --danger:#d16879;
  --success:#7fb79a;
  --shadow:0 22px 70px rgba(0,0,0,.42);
  --radius:18px;
}

*{box-sizing:border-box}

html{color-scheme:dark;scroll-behavior:smooth}

body{
  margin:0;
  min-width:320px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 8%,rgba(107,91,210,.18),transparent 30%),
    radial-gradient(circle at 84% 10%,rgba(195,203,230,.10),transparent 28%),
    linear-gradient(145deg,#06070d 0%,#0a0c16 45%,#06070c 100%);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(118deg,transparent 0 13px,rgba(255,255,255,.012) 14px,transparent 15px),
    repeating-linear-gradient(22deg,transparent 0 22px,rgba(255,255,255,.008) 23px,transparent 24px);
  mix-blend-mode:screen;
  z-index:-1;
}

button,input,select,textarea{font:inherit}
button{cursor:pointer}

::selection{background:rgba(107,91,210,.55);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#090a0e}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--gold-dark));border-radius:999px;border:2px solid #090a0e}

.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
}

/* ==================== BARRE LATÉRALE ==================== */
aside{
  position:sticky;
  top:0;
  height:100vh;
  padding:28px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:34px;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(18,19,25,.98),rgba(7,8,11,.99)),
    radial-gradient(circle at top left,rgba(107,91,210,.28),transparent 42%);
  border-right:1px solid var(--line);
  box-shadow:18px 0 60px rgba(0,0,0,.25);
  z-index:20;
}

aside::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:1px;
  height:42%;
  background:linear-gradient(transparent,var(--purple-soft),var(--gold),transparent);
  opacity:.8;
}

.brand{display:flex;gap:14px;align-items:center;min-width:0}

.logo{
  position:relative;
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  color:transparent;
  background:
    radial-gradient(circle at 50% 50%,#0b0c10 53%,transparent 54%),
    conic-gradient(from 205deg,var(--gold-light),var(--gold-dark) 32%,transparent 36% 53%,var(--purple-soft) 58%,var(--purple-dark) 88%,var(--gold-light));
  box-shadow:0 0 0 1px rgba(195,203,230,.22),0 0 30px rgba(107,91,210,.22);
}

.logo::before{
  content:"Y";
  position:absolute;
  inset:6px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold-light);
  background:#0b0c10;
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:500;
  text-shadow:0 0 16px rgba(195,203,230,.4);
}

.brand strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-light);
  font-size:18px;
  letter-spacing:.05em;
  white-space:nowrap;
}

.brand small{display:block;margin-top:4px;color:#8f8794;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

nav{display:grid;gap:9px}

.nav,.side-actions button,.file{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:#aaa2af;
  text-align:left;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:.22s ease;
}

.nav{position:relative;overflow:hidden;font-weight:650}
.nav::before{content:"";position:absolute;left:0;top:17%;height:66%;width:3px;border-radius:999px;background:linear-gradient(var(--purple-soft),var(--gold));opacity:0;transform:scaleY(.3);transition:.22s}
.nav:hover{color:#fff;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.04);transform:translateX(2px)}
.nav.active{color:var(--gold-light);background:linear-gradient(90deg,rgba(107,91,210,.22),rgba(195,203,230,.055));border-color:rgba(107,91,210,.26);box-shadow:inset 0 0 22px rgba(107,91,210,.06)}
.nav.active::before{opacity:1;transform:scaleY(1)}

/* Separation du bloc administration dans la navigation. */
.nav-sep{
  display:flex;align-items:center;gap:9px;
  margin:14px 0 3px;padding:0 4px;
  color:#8f8794;font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.nav-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.nav-sep[hidden]{display:none}

/* --- 3.4.0 : navigation en accordeon -----------------------------------
   Un en-tete de groupe n'est pas un onglet : il n'affiche jamais d'ecran,
   il ouvre ou ferme sa liste. Il ne prend donc jamais l'etat « active »,
   sinon deux elements paraitraient selectionnes en meme temps. */
.nav-groupe{display:grid;gap:9px}
.nav-groupe[hidden]{display:none}

.nav-tete{display:flex;align-items:center;gap:9px}

/* Les cinq entrees de premier niveau portent une icone ; les onglets d'une
   section n'en portent pas. La gouttiere les rattache deja a leur section,
   et une icone sur chaque ligne ferait dix dessins pour dix mots. */
.nav:not(.nav-fils){display:flex;align-items:center;gap:10px}
.nav:not(.nav-fils)>span:not(.badge):not(.nav-chev):not(.nav-cadenas){flex:1;min-width:0}
.nav-ico{
  flex:none;width:19px;height:19px;
  color:var(--purple-soft);opacity:.85;transition:.22s ease;
}
.nav:hover .nav-ico{opacity:1}
.nav.active .nav-ico{color:var(--gold);opacity:1}
.nav-chev{
  flex:none;font-size:11px;line-height:1;color:#8f8794;
  transition:transform .22s ease;
}
.nav-tete[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-cadenas{flex:none;font-size:11px;line-height:1;opacity:.75}

/* Un groupe ouvert porte une gouttiere : elle relie visuellement les
   onglets a leur en-tete, sinon la liste flotte sans rattachement. */
.nav-sous{
  display:grid;gap:6px;
  margin-left:13px;padding-left:11px;
  border-left:1px solid var(--line);
}
.nav-sous[hidden]{display:none}

.nav-fils{padding:9px 12px;font-size:13.5px;font-weight:600}

/* Le groupe replie porte la somme des badges de ses onglets. Sans elle,
   fermer un groupe reviendrait a masquer ce qui reclame une action. */
.badge-groupe{flex:none}

/* Lien vers un outil externe, habille comme un bouton secondaire : il vit
   dans une barre de boutons, il ne doit pas y ressortir comme un lien nu. */
.lien-outil{
  display:inline-block;text-decoration:none;
  border:1px solid rgba(107,91,210,.28);
  background:rgba(107,91,210,.13);
  color:#cda9ef;border-radius:9px;padding:6px 11px;
  font-weight:650;font-size:13px;white-space:nowrap;transition:.18s;
}
.lien-outil:hover{background:rgba(107,91,210,.24);border-color:rgba(154,101,210,.55);color:#fff}
.lien-outil[hidden]{display:none}

/* Boutons d'action de l'en-tete, alignes a droite du titre. */
.entete-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.entete-actions button[hidden]{display:none}

.side-actions{margin-top:auto;display:grid;gap:7px;padding-top:20px;border-top:1px solid var(--line)}
.side-actions button,.file{font-size:13px}
.side-actions button:hover,.file:hover{background:rgba(255,255,255,.035);color:var(--gold-light);border-color:var(--line)}
.file input{display:none}
.danger{color:#e58b99!important}
.ghost:hover{background:rgba(209,104,121,.08)!important;border-color:rgba(209,104,121,.22)!important}

/* ==================== CONTENU ==================== */
main{min-width:0;padding:34px 38px 46px}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:500}
h1{margin:0;color:var(--gold-light);font-size:32px;letter-spacing:.025em;text-shadow:0 0 24px rgba(195,203,230,.08)}
header p{margin:7px 0 0;color:var(--muted)}

.primary{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(195,203,230,.44)!important;
  border-radius:12px;
  padding:11px 17px;
  color:#120f13!important;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 52%,#8e98bd)!important;
  font-weight:800;
  box-shadow:0 8px 24px rgba(93,103,136,.18),inset 0 1px rgba(255,255,255,.5);
  transition:.22s ease;
}
.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(93,103,136,.26)}
.primary:active{transform:translateY(0)}

.view{display:none;animation:viewIn .28s ease}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ==================== CARTES & KPI ==================== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:17px;margin-bottom:20px}

.kpi,.card{
  position:relative;
  overflow:hidden;
  color:var(--text);
  background:linear-gradient(145deg,rgba(24,26,35,.96),rgba(14,15,20,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.025);
}

.kpi::before,.card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-soft),var(--gold),transparent);
  opacity:.58;
}

.kpi::after{
  content:"";
  position:absolute;
  width:110px;height:110px;
  right:-50px;bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,91,210,.15),transparent 68%);
}

.kpi{min-height:118px;transition:.24s ease}
.kpi:hover{transform:translateY(-3px);border-color:var(--line-strong);background:linear-gradient(145deg,rgba(29,31,42,.98),rgba(15,16,21,.98))}
.kpi strong{display:block;margin-top:10px;color:var(--gold-light);font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:500}
.kpi span{color:#a49ca8;font-size:13px;letter-spacing:.035em;text-transform:uppercase}

.grid,.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card h2{margin:0 0 18px;color:#e6e9f7;font-size:19px;letter-spacing:.02em}

.summary-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.055)}
.summary-row:last-child{border:0}
.summary-row:hover{color:var(--gold-light)}
.pill{display:inline-flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}

/* ==================== FILTRES ==================== */
.toolbar{display:flex;gap:11px;margin-bottom:16px;flex-wrap:wrap}

.toolbar input,.toolbar select,input,select,textarea{
  border:1px solid rgba(195,203,230,.17);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
  background:#101219;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}

input::placeholder,textarea::placeholder{color:#716a77}
input:hover,select:hover,textarea:hover{border-color:rgba(107,91,210,.42)}
input:focus,select:focus,textarea:focus{border-color:var(--purple-soft);background:#141620;box-shadow:0 0 0 3px rgba(107,91,210,.13),0 0 18px rgba(107,91,210,.08)}
select option{background:#11131a;color:var(--text)}
.toolbar input{min-width:260px;flex:1}

/* ==================== TABLEAU ==================== */
.table-wrap{
  position:relative;
  overflow:auto;
  background:linear-gradient(145deg,rgba(19,21,28,.98),rgba(10,11,15,.98));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

table{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px}
th,td{padding:12px 13px;border-bottom:1px solid rgba(255,255,255,.052);text-align:left;font-size:13px}
th{
  position:sticky;
  top:0;
  z-index:2;
  color:var(--gold-light);
  background:rgba(11,12,17,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-strong);
  font-size:11px;
  letter-spacing:.075em;
  text-transform:uppercase;
}
tbody tr{transition:.18s ease}
tbody tr:hover{background:linear-gradient(90deg,rgba(107,91,210,.09),rgba(195,203,230,.035))}
tbody tr:last-child td{border-bottom:0}

.tag{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.actions{white-space:nowrap}   /* jamais display:flex sur un <td> : voir plus bas */
.icon-btn{border:1px solid rgba(255,255,255,.07);background:#1b1d26;color:#d8cfda;border-radius:8px;padding:7px 9px;transition:.18s}
.icon-btn:hover{color:var(--gold-light);background:rgba(107,91,210,.15);border-color:rgba(107,91,210,.32);transform:translateY(-1px)}

/* ==================== PARAMÈTRES ==================== */
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-head button{border:1px solid rgba(107,91,210,.28);background:rgba(107,91,210,.13);color:#cda9ef;border-radius:9px;padding:7px 11px;font-weight:700;transition:.18s}
.card-head button:hover{background:rgba(107,91,210,.24);border-color:rgba(154,101,210,.55);color:#fff}
.setting-row{display:grid;grid-template-columns:1fr 1fr 50px 38px;gap:8px;margin:9px 0}
.setting-row.simple{grid-template-columns:1fr 38px}
.setting-row.type{grid-template-columns:1fr 50px 38px}
.setting-row input{width:100%;min-width:0}
.color-input{padding:3px!important;height:40px;cursor:pointer}
.delete{border:1px solid rgba(209,104,121,.17);background:rgba(209,104,121,.09);color:#e9929f;border-radius:9px;transition:.18s}
.delete:hover{background:rgba(209,104,121,.18);border-color:rgba(209,104,121,.36)}

/* ==================== FENÊTRE MODALE ==================== */
dialog{
  width:min(760px,92vw);
  max-height:92vh;
  overflow:auto;
  padding:0;
  color:var(--text);
  background:linear-gradient(145deg,#171923,#0c0d12);
  border:1px solid var(--line-strong);
  border-radius:20px;
  box-shadow:0 32px 110px rgba(0,0,0,.72),0 0 50px rgba(107,91,210,.09);
}
dialog::backdrop{background:rgba(3,4,6,.78);backdrop-filter:blur(7px)}
form{padding:24px}
.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center}
.dialog-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.dialog-head h2{margin:0;color:var(--gold-light);font-size:23px}
.icon{border:0;background:transparent;color:#a89fac;font-size:29px;line-height:1;transition:.18s}
.icon:hover{color:#fff;transform:rotate(8deg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:21px 0}
.form-grid label{display:grid;gap:7px;color:#c9c0cb;font-size:12px;font-weight:750;letter-spacing:.025em}
/* Une declaration d'auteur qui pose `display` l'emporte toujours sur
   l'attribut `hidden` : sans cette regle, le champ « Membre » restait
   affiche en modification d'absence. Le staff pouvait y choisir un autre
   joueur et valider — le PUT n'envoie pas member_id, rien ne changeait,
   et il croyait avoir reattribue l'absence. Piege tombe quatre fois. */
.form-grid label[hidden]{display:none}
.full{grid-column:1/-1}
.dialog-actions{justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.dialog-actions button{padding:10px 16px;border-radius:10px;border:1px solid var(--line-strong);background:#171923;color:#cfc6d1}
.dialog-actions button:hover{border-color:rgba(195,203,230,.38);color:var(--gold-light)}
.dialog-actions .primary{color:#120f13!important}

.alert{padding:11px 12px;border:1px solid rgba(195,203,230,.18);border-left:3px solid var(--gold);border-radius:10px;background:linear-gradient(90deg,rgba(195,203,230,.10),rgba(107,91,210,.04));margin:9px 0;color:#d4daf0}
.muted{color:#7d7582}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1100px){
  .app{grid-template-columns:238px minmax(0,1fr)}
  main{padding:28px 24px 40px}
  .kpis{grid-template-columns:repeat(2,minmax(150px,1fr))}
}

@media(max-width:850px){
  .app{grid-template-columns:1fr}
  aside{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:17px 18px;gap:15px}
  aside::after{display:none}
  .brand{margin-right:auto}
  nav{display:flex;gap:6px;order:3;width:100%;overflow:auto}
  .nav{width:auto;white-space:nowrap}
  .side-actions{display:none}
  main{padding:22px 16px 36px}
  .grid,.settings-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .kpis,.form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  header{align-items:flex-start;flex-direction:column}
  header .primary{width:100%}
  h1{font-size:27px}
  .logo{width:45px;height:45px;flex-basis:45px}
  .brand strong{font-size:16px}
  .setting-row{grid-template-columns:1fr 1fr 42px 36px}
}

/* ============================================================
   AJOUTS v2 — connexion, colonnes groupées, styles cumulables
   ============================================================ */

/* ---------- Écran de connexion ---------- */
.login-screen{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 20% 15%,rgba(107,91,210,.22),transparent 38%),
    radial-gradient(circle at 82% 85%,rgba(195,203,230,.12),transparent 34%),
    linear-gradient(150deg,#07080b,#0b0c11 55%,#07080a);
}
.login-card{
  width:min(400px,100%);display:grid;gap:14px;padding:34px 30px;text-align:center;
  background:linear-gradient(145deg,rgba(24,26,35,.97),rgba(13,14,19,.97));
  border:1px solid var(--line-strong);border-radius:22px;
  box-shadow:0 32px 90px rgba(0,0,0,.6),0 0 60px rgba(107,91,210,.08);
}
.login-card .logo{margin:0 auto}
.login-card h1{margin:6px 0 0;font-size:30px}
.login-card p{margin:0 0 8px;font-size:13px}
.login-card label{display:grid;gap:6px;text-align:left;color:#c9c0cb;font-size:12px;font-weight:750}
.login-card .primary{margin-top:6px;width:100%}
.login-error{
  padding:10px 12px;border-radius:10px;font-size:13px;
  color:#f0b3bd;background:rgba(209,104,121,.12);border:1px solid rgba(209,104,121,.34);
}

/* ---------- En-têtes de colonnes groupées ---------- */
/* La hauteur est fixee explicitement (30px), pas laissee au rendu du
   texte et du padding : la ligne du dessous se cale sur "top:30px" en
   dur plus bas. Sans une valeur garantie ici, un ecart de rendu entre
   les deux (police, marges) ouvrait un interstice ou le flou des deux
   lignes laissait transparaitre le tableau en dessous — l'aspect
   "transparent et moche" signale le 25/08. */
.group-row th{
  height:30px;
  padding:0 13px;font-size:10px;text-align:center;
  background:rgba(8,9,13,.98);border-bottom:0;
}
.grp{border-radius:8px 8px 0 0}
.grp-gvg{background:rgba(230,126,34,.30)!important;color:#f0a860!important}
.grp-pve{background:rgba(118,215,196,.24)!important;color:#8fd8c6!important}
tbody td.grp-gvg{background:rgba(230,126,34,.032)}
tbody td.grp-pve{background:rgba(118,215,196,.028)}
thead tr:first-child th{top:0}
thead tr:nth-child(2) th{top:30px}

/* ---------- Étiquettes de style de jeu ---------- */
.tag-pve{background:rgba(118,215,196,.16);border-color:rgba(118,215,196,.42);color:#a8e6d8}
.tag-gvg{background:rgba(230,126,34,.16);border-color:rgba(230,126,34,.42);color:#f0b880}
.tag-gve{background:rgba(147,112,219,.16);border-color:rgba(147,112,219,.42);color:#c4aef0}

/* ---------- Cases à cocher des styles ---------- */
.styles-box .lbl{display:block;margin-bottom:9px;color:#c9c0cb;font-size:12px;font-weight:750}
.checks{display:flex;gap:9px;flex-wrap:wrap}
.check{
  display:flex;align-items:center;gap:8px;padding:9px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:#101219;
  font-size:13px;font-weight:700;transition:.18s;
}
.check:hover{border-color:rgba(107,91,210,.45);background:#141620}
.check:has(input:checked){
  color:var(--gold-light);border-color:rgba(195,203,230,.5);
  background:linear-gradient(135deg,rgba(107,91,210,.2),rgba(195,203,230,.07));
}
.check input{width:16px;height:16px;accent-color:var(--purple-soft);cursor:pointer}

/* ---------- Blocs de profil ---------- */
.block{
  margin:0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.014);transition:.22s;
}
.block legend{padding:0 9px;color:var(--gold-light);font-family:Georgia,serif;font-size:14px}
.block-gvg{border-color:rgba(230,126,34,.26)}
.block-pve{border-color:rgba(118,215,196,.2)}
.block.off{opacity:.34;pointer-events:none;filter:grayscale(.7)}
.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.triple label{display:grid;gap:7px;color:#c9c0cb;font-size:12px;font-weight:750}
.form-grid small{font-weight:400;letter-spacing:0}
code{padding:2px 6px;border-radius:5px;background:rgba(107,91,210,.18);font-size:12px}
.sync-box{display:grid;gap:4px;padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.dialog-actions{display:flex;align-items:center}
#deleteMember{border-color:rgba(209,104,121,.34)!important}

@media(max-width:700px){ .triple{grid-template-columns:1fr} }

/* ---------- En-têtes triables ---------- */
th.sortable{cursor:pointer;user-select:none;transition:.16s}
th.sortable:hover{color:#fff;background:rgba(107,91,210,.16)}
th.sortable.sorted{color:var(--gold-light)}
th .arrow{margin-left:5px;font-size:9px;opacity:.85}

/* ---------- Sélecteur de niveau dans les comptes ---------- */
.role-select{padding:6px 9px;font-size:12px;border-radius:8px}
.icon-btn.delete{color:#e9929f;border-color:rgba(209,104,121,.22);background:rgba(209,104,121,.08)}
.icon-btn.delete:hover{color:#fff;background:rgba(209,104,121,.2);border-color:rgba(209,104,121,.42)}

/* ============================================================
   AJOUTS v3 — logo, tri des colonnes, comptes staff
   ============================================================ */

.logo-img{
  width:104px;height:auto;display:block;margin:0 auto 2px;
  filter:drop-shadow(0 0 26px rgba(107,91,210,.4)) drop-shadow(0 0 10px rgba(195,203,230,.22));
}
.logo-img.sm{width:52px;flex:0 0 52px;margin:0}
.brand{align-items:center}

/* ---------- En-têtes triables ---------- */
th.sortable{cursor:pointer;user-select:none;transition:.16s}
th.sortable:hover{color:#fff;background:rgba(107,91,210,.2)}
th.sortable.sorted{color:var(--gold-light)}
th .arrow{display:inline-block;min-width:11px;font-size:9px;opacity:.85}

/* ---------- Comptes staff ---------- */
select.mini{padding:6px 9px;font-size:12px;border-radius:8px}
.icon-btn.danger{
  color:#e9929f;background:rgba(209,104,121,.09);border-color:rgba(209,104,121,.2);
}
.icon-btn.danger:hover{
  color:#fff;background:rgba(209,104,121,.24);border-color:rgba(209,104,121,.5);
}
#accountsBody td{vertical-align:middle}
#accountsBody .actions{gap:7px}

/* ---------- Badge de validations en attente ---------- */
.badge{
  display:inline-block;min-width:19px;margin-left:7px;padding:1px 6px;
  border-radius:999px;background:var(--danger);color:#12070a;
  font-size:11px;font-weight:800;text-align:center;
}
/* Une classe qui pose display l'emporte sur l'attribut hidden : sans cette
   ligne, les trois pastilles restent affichees vides en permanence, et une
   pastille rouge qui ne veut rien dire cesse d'etre lue. */
.badge[hidden]{display:none}

/* ---------- Journal replié ---------- */
tr.pliable{cursor:pointer}
tr.pliable:hover{background:rgba(107,91,210,.12)}
.chev{display:inline-block;width:12px;color:var(--gold);font-size:11px}
tr.detail>td{padding:0 13px 12px 34px;background:rgba(0,0,0,.22)}
table.sous{width:auto;min-width:0;border-collapse:collapse}
table.sous td{border:0;padding:5px 16px 5px 0;font-size:12px}

/* ---------- Signature BloodySkrill ---------- */
.signature{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);
  opacity:.62;transition:opacity .25s;
}
.signature:hover{opacity:1}
.signature img{
  width:44px;height:auto;display:block;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.55));
}
.signature small{
  color:#8f8794;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
}
.signature.fiche{margin:22px auto 30px;padding-top:0;border:0;opacity:.5}
.signature.fiche img{width:38px}

@media(max-width:850px){ aside .signature{display:none} }

/* ---------- Onglet Aide ---------- */
#noticeFrame{
  width:100%;height:calc(100vh - 210px);min-height:460px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#08090c;box-shadow:var(--shadow);
}
.version{
  margin-top:8px;text-align:center;
  color:#6d6672;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.version span{color:var(--gold-dark)}

/* ============================================================
   1.8.2 — icônes d'armes et de rôles, commentaires
   ============================================================ */

/* Vignette : l'icône accompagne toujours le nom, jamais seule */
.vig{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  object-fit:cover;vertical-align:middle;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.vig.lg{width:26px;height:26px;flex-basis:26px}

.tag.av{display:inline-flex;align-items:center;gap:7px;padding-left:5px}
.role-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap}
.summary-row .pill{gap:9px}

/* Aperçu accolé aux listes déroulantes : une <option> ne peut pas porter d'image */
.sel-ic{display:flex;align-items:center;gap:9px}
.sel-ic select{flex:1;min-width:0}
.ap{flex:0 0 26px;height:26px;display:grid;place-items:center}

.champ-icone{display:flex;align-items:center;gap:9px}
.champ-icone input{flex:1;min-width:0}
.champ-icone .muted{flex:0 0 26px;text-align:center}

/* Commentaires : passent à la ligne au lieu d'étirer le tableau
   et de repousser la colonne Modifier hors de l'écran */
td.comm{
  max-width:260px;min-width:150px;
  white-space:normal;overflow-wrap:anywhere;line-height:1.45;
}

/* ============================================================
   1.8.3 — icônes modifiables, défilement du tableau
   ============================================================ */

.champ-icone{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.champ-icone input{flex:1;min-width:70px}
.champ-icone .vide{flex:0 0 26px;text-align:center;color:#6d6672}
.mini-b{padding:5px 9px;font-size:11px;white-space:nowrap}

/* Le tableau défile dans son propre cadre : la barre horizontale reste
   visible en bas de l'écran au lieu d'attendre la 73e ligne. */
.table-wrap{max-height:calc(100vh - 300px);min-height:320px;overflow:auto}
#journal .table-wrap,
#accounts .table-wrap,
#settings .table-wrap{max-height:calc(100vh - 340px)}
.table-wrap::-webkit-scrollbar{height:12px;width:12px}
.table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--purple),var(--gold-dark));
  border-radius:999px;border:2px solid #0b0c11;
}

/* ============================================================
   Liste déroulante avec icônes
   Une <option> ne peut pas contenir d'image : le <select> reste
   dans la page pour l'enregistrement, mais il est masqué.
   ============================================================ */

.cbx{position:relative;width:100%;min-width:0}
.cbx-src{
  position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;padding:0;border:0;margin:0;
}

.cbx-btn{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border-radius:10px;
  border:1px solid rgba(195,203,230,.17);background:#101219;
  color:var(--text);font-size:14px;text-align:left;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.cbx-btn:hover{border-color:rgba(107,91,210,.45);background:#141620}
.cbx.ouvert .cbx-btn{
  border-color:var(--purple-soft);background:#141620;
  box-shadow:0 0 0 3px rgba(107,91,210,.13);
}
.cbx-btn img{width:22px;height:22px;flex:0 0 22px;object-fit:contain;border-radius:50%}
.cbx-creux{width:22px;height:22px;flex:0 0 22px}
.cbx-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-lbl.vide{color:#6d6672}
.cbx-fl{flex:0 0 auto;color:var(--gold-dark);font-size:10px}

.cbx-menu{
  display:none;position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;
  max-height:290px;overflow:auto;padding:5px;
  border:1px solid var(--line-strong);border-radius:12px;
  background:linear-gradient(150deg,#181a24,#0e0f15);
  box-shadow:0 22px 60px rgba(0,0,0,.72);
}
.cbx.ouvert .cbx-menu{display:block}

.cbx-grp{
  padding:9px 10px 5px;color:var(--gold-dark);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
}
.cbx-opt{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;
  color:var(--text);font-size:13.5px;text-align:left;
}
.cbx-opt:hover{background:rgba(107,91,210,.2)}
.cbx-opt.sel{background:rgba(195,203,230,.13);color:var(--gold-light)}
.cbx-opt img{width:22px;height:22px;flex:0 0 22px;object-fit:contain;border-radius:50%}
.cbx-opt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cbx-menu::-webkit-scrollbar{width:9px}
.cbx-menu::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--purple),var(--gold-dark));
  border-radius:999px;border:2px solid #12141c;
}

/* La grille à trois colonnes se replie plus tôt : les listes se
   chevauchaient sur la page membre, plus étroite que le site. */
.triple{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){ .triple{grid-template-columns:1fr} }

/* ============================================================
   Tableau des membres — alignement et colonne d'action figée
   ============================================================ */

/* Le tableau a gagné des colonnes depuis la valeur d'origine (1180) :
   trop étroit, il écrasait les cellules et décalait la dernière colonne. */
#members table{min-width:1560px}

/* Les commentaires font varier la hauteur des lignes : sans cet alignement,
   le bouton Modifier flottait en haut de sa cellule. */
#members td{vertical-align:middle}
#members th{vertical-align:bottom}


/* ============================================================
   Alignement de la colonne d'action
   `display:flex` sur un <td> le sort du modèle de tableau : la
   cellule ne suit plus la hauteur de sa ligne et ses séparations
   se décalent de celles des autres colonnes. On rend la cellule
   à sa nature, et le flex passe sur un conteneur interne.
   ============================================================ */
td.actions{
  display:table-cell;
  white-space:nowrap;
  vertical-align:middle;
  text-align:right;
}
td.actions .icon-btn+.icon-btn{margin-left:6px}

/* Lien discret de la barre latérale, calé sur l'aspect des boutons voisins */
.side-lien{
  display:block;width:100%;padding:12px 14px;
  border:1px solid transparent;border-radius:12px;
  color:#aaa2af;font-size:13px;text-decoration:none;
  transition:.22s ease;
}
.side-lien:hover{
  background:rgba(255,255,255,.035);color:var(--gold-light);border-color:var(--line);
}

/* ============================================================
   1.9 — Builds secondaires et fiche de consultation
   ============================================================ */

/* ---------- Bloc de build secondaire dans le formulaire ---------- */
.build2{margin-top:14px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.b2-tog{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 2px;
  border:0;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;text-align:left;transition:color .18s;
}
.b2-tog:hover{color:var(--gold-light)}
.b2-chev{color:var(--gold);font-size:10px;width:11px}
.b2-etat{
  margin-left:auto;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;
  color:#a8d6c0;background:rgba(127,183,154,.14);border:1px solid rgba(127,183,154,.32);
}
.b2-etat:empty{display:none}
.b2-corps{display:none;padding-top:11px}
.build2.ouvert .b2-corps{display:block}
.b2-vider{
  margin-top:10px;padding:6px 11px;border-radius:8px;font-size:11px;
  color:#e9929f;background:rgba(209,104,121,.09);border:1px solid rgba(209,104,121,.2);
}
.b2-vider:hover{background:rgba(209,104,121,.18);border-color:rgba(209,104,121,.4)}

/* ---------- Marqueur dans la liste ---------- */
.mq2{
  display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:800;cursor:help;
  color:var(--gold-light);background:rgba(195,203,230,.15);
  border:1px solid rgba(195,203,230,.36);
}

/* Le pseudo devient le point d'entrée de la fiche */
.lien-nom{
  padding:0;border:0;background:transparent;
  color:var(--text);font:inherit;font-weight:700;text-align:left;
  border-bottom:1px dashed rgba(195,203,230,.32);transition:color .16s;
}
.lien-nom:hover{color:var(--gold-light);border-bottom-color:var(--gold)}

/* ---------- Fiche de consultation ---------- */
#voirDialog{width:min(760px,94vw)}
.voir{padding:24px}
.v-s{margin-top:20px}
.v-s:first-child{margin-top:16px}
.v-h{
  margin:0 0 12px;padding-bottom:7px;font-size:14px;
  border-bottom:1px solid var(--line);color:#e2d6c2;
  letter-spacing:.06em;text-transform:uppercase;font-family:Inter,sans-serif;font-weight:700;
}
.v-h.gvg{color:#f0b880;border-bottom-color:rgba(230,126,34,.3)}
.v-h.pve{color:#a8e6d8;border-bottom-color:rgba(118,215,196,.3)}

.v-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 22px}
.v-l{display:flex;justify-content:space-between;align-items:center;gap:12px;
     padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.v-l span{color:var(--muted);font-size:12.5px}
.v-l strong{font-weight:600;font-size:13.5px;text-align:right}












.role-p{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.role-p img{width:19px;height:19px;flex:0 0 19px}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{
  padding:15px 12px;border-radius:12px;text-align:center;
  background:rgba(255,255,255,.022);border:1px solid var(--line);
}
.stat-t{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.stat-v{margin:7px 0 3px;color:#6d6672;font-family:Georgia,serif;font-size:26px}
.stat-s{color:#6d6672;font-size:10px}
.v-att{
  margin:12px 0 0;padding:10px 13px;border-radius:10px;font-size:12.5px;
  color:#cdb0ec;background:rgba(107,91,210,.1);border-left:3px solid var(--purple-soft);
}
.v-com{
  margin:0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.6;
  color:var(--muted);background:rgba(255,255,255,.022);border:1px solid var(--line);
}
.v-maj{margin:20px 0 0;color:#6d6672;font-size:11px;text-align:right}



/* ============================================================
   Fiche de consultation — bannières de build
   Le principal domine : fond dense, bordure marquée, filigrane
   visible. Le secondaire se met en retrait sans se cacher.
   ============================================================ */

.b-lab{
  margin:0 0 9px;color:var(--gold-light);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
}
.b-lab.deux{color:#7d7582;font-weight:600;font-size:10px}
.v-vide{margin:0 0 10px;color:#6d6672;font-size:13px;font-style:italic}

.C-b{position:relative;padding:18px 20px;border-radius:16px;overflow:hidden;border:1px solid}
.C-fond{
  position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  width:150px;height:150px;object-fit:contain;opacity:.13;pointer-events:none;
}
.C-fond2{
  position:absolute;right:96px;top:50%;transform:translateY(-50%);
  width:112px;height:112px;object-fit:contain;opacity:.08;pointer-events:none;
}
/* 5.4.2 : en flex-wrap, le passage a la ligne se declenche AVANT la
   reduction. Des que les deux noms d'armes etaient longs, le second
   basculait seul sur une deuxieme ligne et la carte doublait de hauteur,
   filigrane recadre au passage. En nowrap, les deux blocs d'arme se
   partagent la place restante a egalite et le nom passe a la ligne DANS
   son bloc : rien n'est tronque, les cartes gardent la meme allure. */
.C-in{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.C-r{display:flex;align-items:center;gap:10px;padding-right:22px;border-right:1px solid var(--line);flex:0 0 auto}
.C-r img{width:38px;height:38px;object-fit:contain}
.C-r b{font-size:15px;font-weight:650}
.C-r small{display:block;color:#7d7582;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.C-a{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0}
.C-a img.lg{width:30px;height:30px;flex:0 0 30px;object-fit:contain}
.C-a img.st{width:17px;height:17px;flex:0 0 17px;border-radius:50%;object-fit:cover}
/* Le nom d'une arme est exactement ce que le joueur vient verifier :
   il ne doit pas finir en points de suspension. */
.C-a span{font-size:13px;font-weight:600;min-width:0;white-space:normal;line-height:1.3}

/* Le retrait à gauche traduit la subordination sans avoir à l'écrire. */
.C-b2{
  border-style:dashed;padding:13px 18px;margin-left:16px;
  opacity:.82;transition:opacity .2s;
}
.C-b2:hover{opacity:1}
.C-b2 .C-fond{opacity:.06;width:120px;height:120px}
.C-b2 .C-fond2{opacity:.035;width:90px;height:90px;right:78px}
.C-b2 .C-in{gap:18px}
.C-b2 .C-r img{width:30px;height:30px}
.C-b2 .C-r b{font-size:13.5px}
.C-b2 .C-a img.lg{width:24px;height:24px;flex-basis:24px}
.C-b2 .C-a img.st{width:14px;height:14px;flex-basis:14px}
.C-b2 .C-a span{font-size:12.5px;font-weight:550}
.C-b+.b-lab{margin-top:15px}

@media(max-width:640px){
  .stats{grid-template-columns:1fr}
  .C-fond,.C-fond2{display:none}
  .C-b2{margin-left:0}
}

/* ------------------------------------------------------------
   2.0 — bandeau d'alerte de synchronisation
   Les evenements Raid-Helper sont supprimes de Discord des qu'ils
   sont termines : un import arrete perd des donnees sans retour.
   L'alerte est donc volontairement voyante et non refermable.
   ------------------------------------------------------------ */
.sync-alerte {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #b7791f;
  background: rgba(183, 121, 31, .14);
  color: #e0b155;
  font-size: 14px;
  line-height: 1.45;
}
.sync-alerte span { flex: 1; }

/* L'attribut hidden vaut display:none, mais la regle display:flex ci-dessus
   a une specificite superieure et l'annulait : le bandeau restait affiche en
   permanence, vide. Meme famille de piege que display:flex sur un <td>. */
.sync-alerte[hidden] { display: none; }

/* ------------------------------------------------------------
   Boutons secondaires du contenu principal
   Seuls .primary, .nav et les boutons du menu lateral avaient un
   style : tout bouton place dans un tableau ou dans le bandeau
   restait au rendu natif du navigateur, gris et hors charte.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Boutons du contenu principal
   Une seule regle de portee large plutot qu'une liste de cas :
   chaque fois qu'un ecran ajoutait un bouton hors des selecteurs
   prevus, il ressortait en gris natif. Les boutons qui ont deja
   leur identite propre sont exclus nommement.
   ------------------------------------------------------------ */
/* Portee elargie a tout le contenu, en-tete et bandeaux compris : la regle
   ne visait que .view, et chaque bouton pose ailleurs ressortait en gris
   natif. C'est arrive quatre fois. Les dialogues vivent hors de <main>,
   ils gardent leurs propres regles. */
/* 5.7.2 — .pan-onglet rejoint les exceptions. Une regle de classe ne peut
   pas passer devant ce selecteur : il porte un identifiant ET quatre
   `:not()`, qui comptent chacun pour une classe. Surencherir demandait
   d'empiler autant de conditions ; l'exclure est ce que la charte prevoit. */
main button:not(.primary):not(.lien-nom):not(.icon):not(.nav):not(.pan-onglet):not(.set-item),
#panneauReglages button:not(.primary):not(.lien-nom):not(.icon):not(.nav):not(.pan-onglet):not(.set-item) {
  border: 1px solid rgba(107, 91, 210, .28);
  background: rgba(107, 91, 210, .13);
  color: #cda9ef;
  border-radius: 9px;
  padding: 6px 11px;
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
  transition: .18s;
}
main button:not(.primary):not(.lien-nom):not(.icon):not(.nav):not(.pan-onglet):not(.set-item):hover,
#panneauReglages button:not(.primary):not(.lien-nom):not(.icon):not(.nav):not(.pan-onglet):not(.set-item):hover {
  background: rgba(107, 91, 210, .24);
  border-color: rgba(154, 101, 210, .55);
  color: #fff;
}
main button:not(.primary):not(.lien-nom):not(.icon):not(.nav):disabled,
#panneauReglages button:not(.primary):not(.lien-nom):not(.icon):not(.nav):disabled {
  opacity: .5; cursor: default;
}

/* Actions destructrices : rouge, quelle que soit leur place. */
main .view button.danger:not(.primary),
#panneauReglages button.danger:not(.primary) {
  color: #e58b99 !important;
  border-color: rgba(209, 104, 121, .3);
  background: rgba(209, 104, 121, .09);
}
main .view button.danger:not(.primary):hover,
#panneauReglages button.danger:not(.primary):hover {
  background: rgba(209, 104, 121, .18);
  border-color: rgba(209, 104, 121, .6);
}

/* Listes d'elements ecartes et lien des archives : plus discrets. */
#panneauReglages #channelsIgnores button,
#panneauReglages #orphelinsIgnores button,
#panneauReglages #archivesInfo button,
#channelsIgnores button,
#orphelinsIgnores button,
#archivesInfo button {
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 12px;
}

.sync-alerte button {
  flex: none;
  white-space: nowrap;
  border: 1px solid rgba(224, 177, 85, .42);
  background: rgba(224, 177, 85, .12);
  color: #e0b155;
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 700;
  transition: .18s;
}
.sync-alerte button:hover {
  background: rgba(224, 177, 85, .22);
  border-color: rgba(224, 177, 85, .75);
  color: #fff;
}
.sync-alerte button:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------------------
   2D — constructeur de rosters
   ------------------------------------------------------------ */

/* Les groupes en colonnes : on voit la composition se construire. */
/* auto-fit et un minimum bas : six groupes de GvG tiennent sur une seule
   ligne en 1080p, au lieu de passer a la ligne et de sortir de l'ecran.
   Le maximum a 250 px evite qu'un roster a deux groupes n'etale deux
   colonnes sur toute la largeur. */
/* Le maximum doit rester 1fr : avec une valeur fixe, le navigateur compte
   les colonnes sur ce maximum et n'en place que quatre. Avec 1fr il compte
   sur le minimum, les six groupes d'un GvG tiennent sur une ligne, et
   .roster-col les rattrape en largeur pour qu'un roster a deux groupes
   n'etale pas deux colonnes de six cents pixels. */
.roster-grille {
  display: grid; gap: 10px; margin-top: 14px; justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.roster-col {
  max-width: 320px;
  border: 1px solid rgba(107, 91, 210, .26);
  background: rgba(107, 91, 210, .07);
  border-radius: 12px; padding: 10px 11px 11px;
  transition: .16s;
}
.roster-col.survol {
  border-color: var(--gold); background: rgba(195, 203, 230, .12);
  box-shadow: 0 0 0 1px rgba(195, 203, 230, .3);
}
/* Depassement signale, jamais bloquant : c'est le staff qui decide. */
.roster-col.trop { border-color: rgba(209, 104, 121, .5); background: rgba(209, 104, 121, .09) }
.roster-col-t {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 12.5px; color: #cda9ef; font-weight: 650;
}
.roster-col-t strong { color: var(--gold-light); font-size: 13px }
.roster-col.trop .roster-col-t { color: #e58b99 }
/* La piste doit valoir minmax(0, 1fr) : une grille implicite « auto »
   prend pour plancher la largeur de son contenu, donc une ligne de
   joueur au nom long pousse et deborde de sa carte au lieu d'etre
   coupee par le text-overflow de .rj-nom. */
.roster-col-c { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-height: 42px }
.rj-vide {
  margin: 0; padding: 11px 0; text-align: center;
  color: var(--muted); font-size: 11.5px; font-style: italic; opacity: .6;
}

/* Ligne de joueur : compacte, les icones portent l'information. */
.rj, .rj-carte {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 7px; border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  font-size: 12.5px; cursor: grab;
}
.rj:hover, .rj-carte:hover { background: rgba(255, 255, 255, .075) }
.rj.drag, .rj-carte.drag { opacity: .4; cursor: grabbing }
.rj-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rj-vig { display: inline-flex; gap: 2px; flex: none }
.rj-vig .vig { width: 17px; height: 17px }
/* Build secondaire : lisere dore, sans texte supplementaire. */
.rj.b2, .rj-carte.b2 { box-shadow: inset 2px 0 0 var(--gold) }

.rj-x, .rj-b2 {
  flex: none; padding: 0 !important; width: 20px; height: 20px;
  display: grid; place-items: center; line-height: 1;
  border-radius: 6px !important; font-size: 13px !important;
  background: transparent !important; border-color: transparent !important;
  opacity: .5;
}
.rj-x:hover  { opacity: 1; background: rgba(209, 104, 121, .2) !important; color: #f0b3bd !important }
.rj-b2:hover { opacity: 1; background: rgba(195, 203, 230, .2) !important; color: var(--gold-light) !important }

/* Les inscrits, en grille : quinze joueurs tiennent sur trois lignes
   au lieu de quinze lignes de tableau. */
.roster-grille-j {
  display: grid; gap: 5px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
/* Le groupe attribué, la ou se trouvait la liste deroulante. */
.rj-eq {
  flex: none; max-width: 84px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11px; font-weight: 700;
  color: var(--gold-light); opacity: .85;
}
.rj-carte { padding: 5px 8px }
.rj-carte.place { background: rgba(107, 91, 210, .16) }

/* Joueur PLACE et absent sur Raid-Helper : le fond rouge est la seule chose
   qui distingue ce cas d'une composition saine, puisque le joueur reste dans
   son bloc d'origine. Passe apres .place, sinon le violet gagnerait. */
.rj-carte.absent-depuis,
.rj-carte.place.absent-depuis {
  background: rgba(209, 104, 121, .28);
  box-shadow: inset 0 0 0 1px rgba(209, 104, 121, .55);
}
.rj-carte.absent-depuis .rj-nom { color: #f0b3bd }

/* Deja place dans une autre composition du meme evenement. Un badge
   textuel, et non un pictogramme : le seul signe disponible etait ⇄, deja
   pris par la bascule de build juste a cote. */
.rj-ailleurs {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(195, 203, 230, .18);
  border: 1px solid rgba(195, 203, 230, .45);
  color: var(--gold-light);
}

.roster-second {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.roster-second .muted { font-size: 12px }
.rj-carte.place .rj-nom { color: var(--gold-light); font-weight: 650 }
.rj-carte select {
  flex: none; width: 108px; padding: 2px 5px; font-size: 11.5px;
  border-radius: 7px; border: 1px solid var(--line);
  background: #11131a; color: var(--text);
}

.roster-bloc {
  display: flex; align-items: baseline; gap: 12px;
  margin: 20px 0 0; padding-left: 11px;
  border-left: 3px solid var(--line-strong);
  font-size: 16px;
}
.roster-bloc small { font-weight: 400 }

/* ---------- Composition a gauche, apercu Discord a droite ---------- */
/* Le message part dans un salon que toute la guilde lit : le voir pendant
   qu'on compose evite la republication corrective. */
.roster-deux {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px; align-items: start; margin-top: 14px;
}
.roster-gauche { min-width: 0 }
.roster-droite {
  /* Colonne en pile verticale. En grille, les trois blocs s'ecartaient des
     que la colonne etait plus haute que son contenu : un vide de cent
     pixels apparaissait entre l'intitule et la zone de texte. */
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; align-self: start;
}

/* Les inscrits juste sous les groupes : le geste va d'ici vers la-haut,
   les separer d'un ecran de defilement obligeait a viser a l'aveugle. */
.roster-inscrits {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.roster-inscrits h3 { margin: 0; font-size: 16px }
.roster-inscrits > p { margin: 7px 0 0 }
.roster-inscrits .roster-bloc { margin-top: 12px }

/* ---------- Tout tient dans l'ecran ---------- */
/* Composer, c'est faire des allers-retours entre la liste des inscrits et
   les groupes. Des que l'un des deux sort de l'ecran, chaque geste demande
   un defilement avant et un apres. On borne donc la hauteur de la zone a
   celle de la fenetre : ce sont les listes qui defilent, chacune chez elle,
   et les deux restent visibles en permanence. */
@media (min-width: 1101px) {
  /* align-items: stretch est indispensable : avec la valeur start posee
     plus haut, les deux colonnes gardent la hauteur de leur contenu et la
     hauteur imposee ici ne descend jamais jusqu'aux listes. */
  .roster-deux {
    /* 435 px : ce que prennent l'en-tete de page, la barre de boutons, la
       ligne d'effectif et la barre de publication au-dessus. En dessous de
       340 px de haut, la zone cesse de retrecir — trois lignes de joueurs
       restent lisibles, la page reprend son defilement normal. */
    height: max(340px, calc(100vh - 435px)); align-items: stretch;
    /* La ligne doit valoir la hauteur imposee, pas celle du contenu. Sans
       cette regle la grille garde bien sa hauteur, mais sa ligne s'etire
       au-dela : les colonnes debordent par le bas au lieu de defiler. */
    grid-template-rows: minmax(0, 1fr);
  }
  .roster-gauche { display: flex; flex-direction: column; min-height: 0 }
  /* Les groupes passent en premier : c'est la composition qu'on regarde,
     elle doit tenir entiere sans defilement. Les inscrits prennent ce qui
     reste et defilent chez eux. Le plafond a 62 % n'existe que pour un
     modele demesure — il empeche les groupes d'avaler tout l'ecran. */
  #rosterGroupes { flex: 0 0 auto; max-height: 62%; overflow: auto }
  .roster-inscrits {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  }
  #rosterBlocs { flex: 1 1 auto; overflow: auto; min-height: 0; padding-right: 4px }
  .roster-droite { height: 100%; align-self: stretch }
  .roster-embed { flex: 1 1 auto; min-height: 90px; max-height: none }
}
.roster-apercu-t { margin: 0; font-size: 14px; color: var(--gold-light) }
.roster-mot { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted) }
.roster-mot textarea {
  padding: 9px 11px; border-radius: 9px; resize: vertical;
  border: 1px solid var(--line); background: #11131a; color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.5;
}

/* En dessous de 1100 px la colonne de droite passe sous la composition :
   340 px pris a une grille de six groupes les rend illisibles. */
@media (max-width: 1100px) {
  .roster-deux { grid-template-columns: minmax(0, 1fr) }
  .roster-droite { position: static }
}

/* ---------- Rendu approchant d'un embed Discord ---------- */
.roster-embed { max-height: 620px; overflow: auto }
.emb {
  padding: 11px 13px; border-radius: 5px;
  background: #2b2d31; border-left: 4px solid var(--gold);
  color: #dbdee1; font-size: 13px; line-height: 1.45;
}
.emb-t  { font-weight: 700; color: #f2f3f5; margin-bottom: 5px }
.emb-d  { margin-bottom: 9px }
.emb-fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px }
.emb-f       { min-width: 0 }
.emb-f.large { grid-column: 1 / -1 }
.emb-fn { font-weight: 700; color: #f2f3f5; font-size: 12.5px; margin-bottom: 2px }
.emb-fv { color: #dbdee1; font-size: 12.5px; word-break: break-word }
.emb-ft {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .07);
  color: #b5bac1; font-size: 11.5px;
}
.emb .emo { width: 17px; height: 17px; vertical-align: -3px }

/* ---------- Points d'attention cliquables ---------- */
/* Un compte qui n'ouvre sur rien laisse le staff chercher a la main.
   Chaque ligne est un bouton pleine largeur vers les fiches concernees. */
.alerte-cliq {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
}
.alerte-cliq .alerte-fleche {
  flex: none; font-size: 12px; font-weight: 700; color: var(--gold-light);
  opacity: .55; transition: .18s;
}
.alerte-cliq:hover { border-color: rgba(195, 203, 230, .45) }
.alerte-cliq:hover .alerte-fleche { opacity: 1; transform: translateX(3px) }

.defaut-bandeau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 14px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(195, 203, 230, .28);
  border-left: 3px solid var(--gold);
  background: rgba(195, 203, 230, .08); color: #d4daf0; font-size: 14px;
}
.defaut-bandeau[hidden] { display: none }

/* ---------- Salon de publication et mentions ---------- */
.roster-publi {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: rgba(107, 91, 210, .07); border: 1px solid var(--line);
}
.roster-publi > label { display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted) }
.roster-publi select { max-width: 260px }
.roster-publi input[type=text], .roster-publi > input { max-width: 220px }
.roster-publi > input[hidden] { display: none }

/* Interrupteur, dans l'esprit des reglages d'un telephone : l'etat se lit
   d'un coup d'oeil, sans avoir a interpreter une case a cocher. */
.bascule { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none }
.bascule input { position: absolute; opacity: 0; width: 0; height: 0 }
.bascule .piste {
  position: relative; flex: none; width: 42px; height: 23px; border-radius: 999px;
  background: #2a2c38; border: 1px solid var(--line); transition: .2s;
}
.bascule .piste::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #8d8695; transition: .2s;
}
.bascule input:checked + .piste {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, #b48c58);
  border-color: rgba(195, 203, 230, .5);
}
.bascule input:checked + .piste::after { left: 21px; background: #17141c }
.bascule input:focus-visible + .piste { box-shadow: 0 0 0 2px rgba(154, 101, 210, .5) }
.bascule-t { font-size: 12.5px; color: var(--muted) }
.bascule input:checked ~ .bascule-t { color: var(--gold-light) }

/* ---------- Mini-fiche au survol d'un inscrit ---------- */
.mini-fiche {
  position: fixed; z-index: 300; width: 290px; max-width: 92vw;
  padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(28, 30, 40, .99), rgba(16, 17, 23, .99));
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
  color: var(--text); font-size: 12.5px; pointer-events: none;
}
.mini-fiche .mf-t {
  font-family: Georgia, "Times New Roman", serif; font-size: 15px;
  color: var(--gold-light); margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.mini-fiche .mf-l {
  display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between; margin-top: 5px;
}
.mini-fiche .mf-l span   { color: var(--muted); font-size: 11.5px; flex: none }
.mini-fiche .mf-l strong { text-align: right; font-weight: 650; min-width: 0 }
.mini-fiche .mf-l .vig   { width: 15px; height: 15px; vertical-align: -3px }
.mini-fiche .mf-c {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  color: #cfc6d1; font-style: italic; white-space: pre-wrap;
  max-height: 120px; overflow: hidden;
}
.mini-fiche .mf-vide { color: var(--muted); font-style: italic }

/* ---------- Absences ---------- */
.abs-validee { background: rgba(127, 183, 154, .16); border-color: rgba(127, 183, 154, .4); color: #a5d3bd }
.abs-refusee { background: rgba(209, 104, 121, .14); border-color: rgba(209, 104, 121, .38); color: #e58b99 }
.abs-annulee { background: rgba(168, 160, 172, .13); border-color: rgba(168, 160, 172, .34); color: var(--muted) }

/* Les mentions, au-dessus de l'embed : c'est la ligne qui notifie. */
.emb-mens { margin-bottom: 7px; line-height: 1.9 }
.emb-men {
  padding: 1px 4px; border-radius: 4px; font-size: 12.5px;
  color: #c9d0fb; background: rgba(88, 101, 242, .22);
}
.emb-avert { margin: 0 0 7px; font-size: 11.5px; color: var(--gold) }
.emb-muet  { margin: 0 0 7px; font-size: 11.5px; color: var(--muted); font-style: italic }

/* ---------- Trait d'insertion pendant le glisser-deposer ---------- */
/* Specificite alignee sur .rj.b2, qui pose deja un box-shadow : sans cela
   le trait ne s'afficherait pas sur les joueurs en build secondaire. */
.roster-col-c .rj-avant { box-shadow: 0 -2px 0 var(--gold) }
.roster-col-c .rj-avant.b2 { box-shadow: 0 -2px 0 var(--gold), inset 2px 0 0 var(--gold) }
.roster-col-c.rj-fin { box-shadow: 0 2px 0 var(--gold) }

/* 5.20.0 — echange de deux groupes. La cible d'echange est violette et
   non doree : le survol dore reste reserve au depot d'un joueur, pour que
   les deux gestes ne se confondent pas en plein brief. */
.roster-col-t[draggable="true"] { cursor: grab }
.roster-col-t[draggable="true"]:active { cursor: grabbing }
.roster-col.grp-pris { opacity: .45 }
.roster-col.grp-cible {
  border-color: rgba(107, 91, 210, .9); background: rgba(107, 91, 210, .22);
  box-shadow: 0 0 0 1px rgba(107, 91, 210, .55);
}

/* 5.21.0 — rotation entre deux compositions. Vert et rouge plutot que
   violet ou dore : ces deux marques ne signalent pas un etat de l'interface
   mais un mouvement de joueur, et doivent se lire sans etre cherchees. */
.rj-entrant, .rj-sortant {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 650;
  padding: 1px 6px; border-radius: 999px; letter-spacing: .2px;
}
.rj-entrant { background: rgba(118, 215, 196, .20); color: #8fd8c6 }
.rj-sortant { background: rgba(209, 104, 121, .20); color: #e58b99 }
.rj-carte.entrant { border-color: rgba(118, 215, 196, .38) }
.rj-carte.sortant { border-color: rgba(209, 104, 121, .38) }
#rosterSecond { margin-left: 8px }

.roster-apercu {
  margin: 0; padding: 14px 16px; border-radius: 11px;
  background: #0d0f14; border: 1px solid var(--line);
  color: #cfc6d1; font: 13px/1.6 "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap; max-height: 340px; overflow: auto;
}

/* Reglage des groupes, replie sous la grille. */
.roster-groupes { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px }
.roster-groupes summary {
  cursor: pointer; color: #cda9ef; font-size: 13.5px; font-weight: 650;
  list-style: none; padding: 4px 0;
}
.roster-groupes summary::before { content: "\25B8  " }
.roster-groupes[open] summary::before { content: "\25BE  " }
.roster-groupes summary:hover { color: #fff }
.roster-groupes p { margin: 10px 0 0 }

.roster-modele-champs {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px;
}
.roster-modele-champs label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted) }
.roster-modele-champs input {
  padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: #11131a; color: var(--text);
}
.roster-modele-champs label input { width: 90px }

/* Un champ par groupe : ajouter et retirer sont des gestes, pas de la saisie. */
.roster-modele-liste { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px }
.roster-groupe-ligne { display: flex; align-items: center; gap: 5px }
.roster-groupe-ligne input {
  width: 155px; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: #11131a; color: var(--text); font-size: 13px;
}
.roster-groupe-ligne button { padding: 4px 9px !important; font-size: 15px !important; line-height: 1 }

/* ============================================================
   3.0.1 — porte membre et espace membre
   Concu pour le telephone d'abord : l'espace membre y sera
   consulte en majorite, contrairement au site staff.
   ============================================================ */

.bouton-discord{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:18px;padding:14px 16px;
  font-size:15px;font-weight:750;text-decoration:none;border-radius:10px;
}
.bouton-discord svg{flex:none}

.acces-staff{margin-top:26px;padding-top:16px;border-top:1px solid #2a2436}
.lien-staff{
  background:none;border:none;padding:4px;cursor:pointer;
  color:#8b8195;font-size:12.5px;text-decoration:underline;
}
.lien-staff:hover{color:#c9c0cb}

.membre-page{
  max-width:640px;margin:0 auto;padding:18px 14px 40px;
}
.membre-entete{text-align:center;margin-bottom:18px}
.membre-entete h1{font-size:20px;margin:8px 0 0}

.membre-carte{
  background:#151221;border:1px solid #2a2436;border-radius:12px;
  padding:16px;margin-bottom:14px;
}
.membre-carte-tete h2{font-size:15px;margin:0 0 12px;color:#d8cfe0}
.membre-sous-titre{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:#8b8195;margin:16px 0 8px;
}

/* Deux colonnes sur ecran large, empilees sur telephone : un tableau
   a deux colonnes sur 360px de large casse les valeurs en bouillie. */
.membre-liste{display:grid;gap:2px 14px;margin:0}
.membre-liste dt{color:#8b8195;font-size:12px}
.membre-liste dd{margin:0 0 10px;color:#e7e1ec;font-size:14.5px}
@media (min-width:480px){
  .membre-liste{grid-template-columns:150px 1fr}
  .membre-liste dt{padding-top:1px}
  .membre-liste dd{margin-bottom:6px}
}
.membre-liste dt[hidden],.membre-liste dd[hidden]{display:none}

.membre-note{font-size:12px;margin:14px 0 0;line-height:1.5}
.membre-pied{text-align:center;font-size:12.5px;color:#8b8195;margin-top:22px}
.membre-pied a{color:#8b8195}

.abs-ligne{
  padding:10px 0;border-bottom:1px solid #241f30;
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;
}
.abs-ligne:last-child{border-bottom:none}
.abs-dates{font-size:14.5px;color:#e7e1ec}
.abs-motif,.abs-reponse{grid-column:1/-1;font-size:12.5px;color:#8b8195}
.abs-reponse{color:#a89bb0;font-style:italic}
.abs-etat{
  font-size:11px;font-weight:750;padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.abs-att{background:#3a3020;color:#e0bd6a}
.abs-val{background:#1e3327;color:#7fce9d}
.abs-ref{background:#3a2226;color:#e08a92}
.abs-ann{background:#26232e;color:#8b8195}

/* --- 3.0.2 : les bannieres de build sur telephone ---
   Concues pour la fiche staff, en fenetre large : role, arme 1 et arme 2
   cote a cote, separes par un filet vertical. A 360 pixels, les trois blocs
   se chevauchent et les noms d'armes se coupent en plein milieu.
   En dessous de 560 pixels on empile : le filet vertical devient horizontal,
   les vignettes rapetissent, et le nom d'arme peut passer a la ligne plutot
   que de disparaitre derriere des points de suspension. */
@media (max-width:560px){
  .membre-page .C-b{padding:14px 15px;border-radius:13px}
  .membre-page .C-in{gap:11px;flex-direction:column;align-items:stretch}
  .membre-page .C-r{
    padding:0 0 10px;border-right:none;border-bottom:1px solid var(--line);
  }
  .membre-page .C-r img{width:32px;height:32px}
  .membre-page .C-r b{font-size:14px}
  .membre-page .C-a img.lg{width:26px;height:26px;flex-basis:26px}
  .membre-page .C-a span{white-space:normal;font-size:12.5px;line-height:1.35}
  .membre-page .C-fond{width:112px;height:112px}
  .membre-page .C-fond2{width:84px;height:84px;right:64px}
  .membre-page .C-b2 .C-r img{width:26px;height:26px}

  /* La grille d'identite passe a une colonne : deux colonnes de 210px
     n'entrent pas dans 360, `auto-fit` en produirait une de toute facon,
     mais l'etiquette et la valeur resteraient collees aux bords. */
  .membre-page .v-g{grid-template-columns:1fr;gap:0}
  .membre-page .v-l{padding:9px 0}
}

/* La fiche membre reprend les sections de la fiche staff, qui vivaient
   jusqu'ici dans une fenetre modale a fond sombre. Dans la carte membre,
   la premiere section n'a pas besoin de sa marge haute. */
.membre-page .v-s:first-child{margin-top:0}
.membre-page .v-l{border-bottom:1px solid #241f30}
.membre-page .v-g{gap:0 22px}

/* --- 3.0.3 : formulaires de l'espace membre --- */
.membre-action{width:100%;margin-top:14px;padding:12px;font-size:14px}
.membre-form{margin-top:14px;border-top:1px solid #241f30;padding-top:14px}
.membre-form label{display:grid;gap:6px;margin-bottom:12px;
  color:#c9c0cb;font-size:12px;font-weight:750;letter-spacing:.025em}
.membre-form label[hidden]{display:none}
.membre-form .triple{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:520px){.membre-form .triple{grid-template-columns:1fr 1fr 1fr;gap:12px}}
.membre-boutons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
/* Le style neutre des boutons vivait enferme dans `.dialog-actions` : hors
   d'une fenetre modale, un bouton retombait sur le rendu par defaut du
   navigateur — gris clair sur fond sombre, plus voyant que le bouton
   principal. « Annuler » attirait l'oeil plus que « Envoyer ». */
.membre-boutons button{
  padding:12px;border-radius:10px;border:1px solid var(--line-strong);
  background:#171923;color:#cfc6d1;font-weight:650;transition:.18s;
}
.membre-boutons button:hover{background:#1d2030;color:#e7e1ec}
/* `.primary` pose deja bordure, couleur et fond en `!important` : rien a
   rappeler ici, la regle ci-dessus ne peut pas le battre. */
.membre-form .styles-box{margin-bottom:14px}
.membre-form fieldset{margin-bottom:14px}

/* --- 3.0.5 : les cadres de profil debordaient du bloc membre ---
   `.block` est un <fieldset>. Le navigateur lui impose par defaut
   `min-inline-size: min-content` : il REFUSE de retrecir en dessous de son
   contenu le plus large. Ici ce contenu est un <select> dont la largeur
   naturelle vaut celle du nom d'arme le plus long — « Dard-Corde de la Prise
   Celeste ». Les trois colonnes additionnees depassaient donc la carte, et
   les cadres GvG et PvE sortaient a droite.
   `box-sizing:border-box` n'y pouvait rien : ce n'est pas un probleme de
   padding, mais de largeur minimale imposee.
   Le meme piege existe dans fiche.html, dans un conteneur plus large — il
   n'y avait simplement jamais assez de place perdue pour se voir. */
.membre-form fieldset{min-inline-size:0}
.membre-form select,
.membre-form input{width:100%;min-width:0;max-width:100%}
/* Un nom d'arme trop long est coupe par le navigateur dans le menu ferme,
   il reste entier a l'ouverture. Mieux vaut un nom tronque qu'une page qui
   deborde. */
.membre-form select{text-overflow:ellipsis}

/* --- 3.0.5 : actions sur une absence --- */
.abs-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.abs-actions button{
  padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:650;
  border:1px solid var(--line-strong);background:#171923;color:#cfc6d1;transition:.18s;
}
.abs-actions button:hover{background:#1d2030;color:#e7e1ec}
.abs-actions button[data-annuler]{border-color:rgba(209,104,121,.34);color:#e08a92}
.abs-actions button:disabled{opacity:.5;cursor:default}
.membre-form-titre{
  margin:0 0 12px;color:var(--gold-light);font-family:Georgia,serif;font-size:15px;
}
.abs-encours{
  font-size:11px;font-weight:750;padding:3px 9px;border-radius:20px;
  background:#2a2438;color:#c4aef0;align-self:center;
}
.abs-actions button[data-rentrer]{border-color:rgba(126,206,157,.34);color:#7fce9d}
.membre-form input[readonly]{opacity:.6;cursor:default}

/* --- 3.0.5 : interversion des builds --- */
.b2-swap{
  margin-right:8px;border:1px solid rgba(195,203,230,.34)!important;
  background:rgba(195,203,230,.10)!important;color:var(--gold-light)!important;
  border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:650;
}
.b2-swap:hover{background:rgba(195,203,230,.20)!important;color:#fff!important}

/* ---------- Joueur placé et absent, DANS son groupe ----------
   C'est le seul endroit où cette information compte : le staff regarde ses
   groupes avant de partir, pas la liste des inscrits en dessous. Le rouge y
   dit une chose et une seule — « il manque quelqu'un ici ».

   Le liseré doré du build secondaire (.rj.b2) est un box-shadow : sans la
   règle combinée ci-dessous, un joueur absent EN build secondaire perdrait
   l'un des deux signaux. Les deux doivent coexister. */
.roster-col-c .rj.absent-depuis {
  background: rgba(209, 104, 121, .30);
  box-shadow: inset 0 0 0 1px rgba(209, 104, 121, .60);
}
.roster-col-c .rj.absent-depuis.b2 {
  box-shadow: inset 0 0 0 1px rgba(209, 104, 121, .60), inset 2px 0 0 var(--gold);
}
.roster-col-c .rj.absent-depuis:hover { background: rgba(209, 104, 121, .40) }

/* 5.1.0 — Les Formations. Une classe qui pose display l'emporte sur
   l'attribut hidden : chaque conteneur porte donc sa regle explicite. */
#formListe[hidden], #formEdition[hidden] { display: none }
.form-cartes {
  display: grid; gap: 8px;
  /* Borne haute en 1fr : avec une borne en px, auto-fit compte les colonnes
     sur le maximum et en met une de trop sur les ecrans etroits. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-carte {
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; text-align: left; background: none;
  color: inherit; font: inherit; width: 100%;
}
.form-carte:hover { border-color: var(--gold) }
.form-carte-n { display: block; font-weight: 600; margin-bottom: 3px }
.form-pool { margin-top: 16px }
.form-pool .card-head input { max-width: 220px }
/* 5.4.1 : le bloc des Formations et celui des Escouades font la meme chose,
   ils se ressemblent donc. Le summary sans style laissait le curseur de
   texte, ce qui n'annonce pas un element cliquable. Le min-width de 320px
   datait du champ unique separe par des virgules : il etirait les deux
   champs numeriques bien au-dela de leur contenu. */
.roster-groupes, .form-groupes {
  margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px;
}
.roster-groupes summary, .form-groupes summary {
  cursor: pointer; color: #cda9ef; font-size: 13.5px; font-weight: 650;
  list-style: none; padding: 4px 0;
}
.roster-groupes summary::before, .form-groupes summary::before { content: "\25B8  " }
.roster-groupes[open] summary::before,
.form-groupes[open] summary::before { content: "\25BE  " }
.roster-groupes summary:hover, .form-groupes summary:hover { color: #fff }
.roster-groupes p, .form-groupes p { margin: 10px 0 0 }
/* Joueur parti de la guilde : le nom reste, barre. Le retirer sans le dire
   ferait disparaitre une place sans que personne ne sache pourquoi. */
.fj-parti .rj-nom { text-decoration: line-through; opacity: .55 }
.form-modifie { color: #e0b062 }
.roster-col-c .rj.absent-depuis .rj-nom { color: #f0b3bd; text-decoration: line-through }

/* Une étiquette en toutes lettres, pas seulement une couleur : environ un
   homme sur douze distingue mal le rouge du vert, et une composition se
   relit souvent sur un téléphone en pleine lumière. */
.rj-abs {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 20px;
  background: rgba(209, 104, 121, .30); color: #f0b3bd;
}

/* 5.4.1 — non inscrit : pose dans un groupe par un import de formation,
   sans inscription Raid-Helper. Ambre et non rouge : ce n'est pas un refus,
   c'est un silence. Le nom n'est pas barre — le joueur n'a rien decline. */
.rj-noins {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 20px;
  background: rgba(201, 149, 74, .28); color: #cdd5ef;
}

/* 5.4.2 — commentaire laisse a l'inscription. Discret : il ne doit pas
   concurrencer les marques d'absence, qui commandent une action. */
.rj-note {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  line-height: 0; color: #9a8fa5; opacity: .75;
}
.rj-note svg { width: 15px; height: 15px; display: block }
.rj-note:hover { opacity: 1; color: var(--gold-light) }

/* ---------- 5.6.0 — Les Parametres en grille ---------- */
.param-fil { display: flex; align-items: center; gap: 9px; margin-bottom: 18px }
#paramRetour {
  border: 0 !important; background: none !important; padding: 0 !important;
  color: var(--muted) !important; font-size: 13.5px; font-weight: 600;
}
#paramRetour:hover { color: var(--gold-light) !important }
.param-fil-sep { color: var(--muted); font-size: 13px }
#paramFilCourant { font-size: 13.5px; font-weight: 650; color: #e6e9f7 }

.param-rubrique {
  margin: 26px 0 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.param-rubrique:first-child { margin-top: 4px }
.param-tuiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* La tuile est un bouton : elle en garde le curseur, pas l'apparence. */
.param-tuile {
  display: flex !important; flex-direction: column; align-items: flex-start;
  gap: 7px; text-align: left; white-space: normal !important;
  padding: 16px 16px 14px !important; border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(160deg, #171923, #101219) !important;
  color: var(--text) !important; transition: .18s;
}
.param-tuile:hover {
  border-color: var(--gold) !important; transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.param-tuile svg { width: 21px; height: 21px; color: var(--muted); transition: .18s }
.param-tuile:hover svg { color: var(--gold-light) }
.param-tuile-t { font-size: 14.5px; font-weight: 650; color: #e6e9f7 }
.param-tuile-n { font-size: 12px; color: var(--muted) }

/* ---------- harmonisation des cartes ---------- */
/* Les neuf cartes se sont ecrites a neuf moments differents : trois styles
   de tableau, des marges variables, des boutons tantot en tete tantot en
   pied. Rien n'est redessine ici — tout est ramene au meme gabarit. */
#settings .card, #panneauReglages .card { --pas: 14px }
#settings .card > p.muted, #panneauReglages .card > p.muted {
  margin: 10px 0 0; font-size: 13px; line-height: 1.6; max-width: 76ch;
}
#settings .card > .table-wrap, #panneauReglages .card > .table-wrap {
  margin-top: var(--pas);
}
/* 5.8.1 — `inline-grid` faisait couler les libellés les uns derriere les
   autres : sur Message epingle, les quatre intitules se suivaient sur une
   seule ligne et leurs champs sur la suivante, sans qu'on sache lequel
   allait avec quoi. Chaque libelle reprend sa ligne, et son champ occupe
   toute la largeur qu'on lui accorde. */
#settings .card > label, #panneauReglages .card > label {
  display: grid; gap: 5px; margin-top: var(--pas);
  font-size: 12.5px; color: var(--muted);
  max-width: 420px;
}
#settings .card > label input, #settings .card > label select,
#settings .card > label textarea,
#panneauReglages .card > label input, #panneauReglages .card > label select,
#panneauReglages .card > label textarea {
  width: 100%;
}
#settings .card-head, #panneauReglages .card-head { min-height: 34px }

@media (max-width: 640px) {
  .param-tuiles { grid-template-columns: 1fr }
}

/* ---------- 5.5.0 — reglages de l'ecran courant ---------- */
/* Bouton discret : c'est un acces, pas une action. Il ne doit pas peser
   autant que « + Ajouter un membre » juste a cote. */
.icon-engrenage {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  border: 1px solid var(--line); background: #14161f; color: var(--muted);
  cursor: pointer;
}
.icon-engrenage svg { width: 19px; height: 19px }
.icon-engrenage:hover { color: var(--gold-light); border-color: var(--gold) }

/* Le panneau couvre la droite, pas tout l'ecran : on garde sous les yeux
   l'ecran qu'on est en train de regler. */
#panneauReglages { position: fixed; inset: 0; z-index: 60 }
#panneauReglages[hidden] { display: none }
.pan-fond {
  position: absolute; inset: 0; background: rgba(3, 4, 6, .62);
  backdrop-filter: blur(3px);
}
.pan-corps {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(860px, 94vw); display: flex; flex-direction: column;
  background: linear-gradient(160deg, #171923, #0c0d12);
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 90px rgba(0, 0, 0, .7);
  animation: panEntre .18s ease-out;
}
@keyframes panEntre { from { transform: translateX(26px); opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .pan-corps { animation: none } }

.pan-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line);
}
.pan-tete h2 { margin: 0; font-size: 18px }
.pan-sous { margin: 5px 0 0; font-size: 12px; color: var(--muted); max-width: 52ch }
.pan-x {
  flex: none; width: 34px; height: 34px; border-radius: 9px; padding: 0;
  border: 1px solid var(--line); background: #14161f; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.pan-x:hover { color: #fff; border-color: var(--line-strong) }

/* Onglets seulement quand il y a plusieurs cartes — Les Ames en a quatre.
   Les empiler ferait defiler sur trois ecrans de haut. */
.pan-onglets {
  display: flex; gap: 6px; padding: 12px 24px 0; flex-wrap: wrap;
}
.pan-onglets:empty { display: none }
/* 5.7.1 — ces trois regles ne portaient que des classes. La charte des
   boutons vise `#panneauReglages button:not(...)` : un identifiant, donc
   elle gagnait, et l'onglet courant ne se distinguait jamais des autres.
   L'identifiant est repris ici pour remettre les poids a egalite. */
#panneauReglages .pan-onglet {
  padding: 7px 14px; border-radius: 20px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-weight: 500;
}
#panneauReglages .pan-onglet:hover {
  color: #fff; background: rgba(255, 255, 255, .04); border-color: var(--line-strong);
}
#panneauReglages .pan-onglet.actif {
  background: linear-gradient(90deg, rgba(107, 91, 210, .22), rgba(195, 203, 230, .055));
  border-color: rgba(107, 91, 210, .38);
  color: var(--gold-light); font-weight: 650;
}

.pan-contenu { flex: 1; overflow: auto; padding: 18px 24px 26px }
/* La carte est deja une carte : dans le panneau, son cadre ferait un
   double encadrement avec celui du panneau. */
.pan-contenu > .card {
  margin: 0 !important; border: 0; background: none; padding: 0;
  box-shadow: none;
}
.pan-contenu > .card::before, .pan-contenu > .card::after { display: none }
body.pan-ouvert { overflow: hidden }

@media (max-width: 620px) {
  .pan-corps { width: 100vw; border-left: 0 }
  .pan-tete, .pan-onglets, .pan-contenu { padding-left: 16px; padding-right: 16px }
}

/* ---------- 5.4.4 — roles Heal / Tank / DPS ---------- */
#rolesDcBloc .ligne-b { display: flex; gap: 10px; margin: 12px 0 }
.rdc-resume { margin: 12px 0; font-size: 13.5px; line-height: 1.5 }
.rdc-tbl { width: 100%; border-collapse: collapse; font-size: 13px }
.rdc-tbl th, .rdc-tbl td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.rdc-tbl th { color: var(--muted); font-size: 11px; text-transform: uppercase }
.rdc-plus, .rdc-moins {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 11px; font-weight: 700; margin-right: 4px;
}
.rdc-plus  { background: rgba(122, 184, 130, .22); color: #a8dcae }
.rdc-moins { background: rgba(209, 104, 121, .22); color: #f0b3bd }
.rdc-err { margin: 6px 0 0 18px; font-size: 12.5px; color: #f0b3bd }
#rolesDcPlan .tbl-wrap { max-height: 42vh; overflow: auto }
.rj.non-inscrit { box-shadow: inset 0 0 0 1px rgba(201, 149, 74, .45) }
.rj.non-inscrit .rj-nom { color: #cdd5ef }

/* ---------- 5.4.1 — choix d'une icone ---------- */
.icone-barre { display: flex; gap: 14px; align-items: center; margin: 14px 0 4px }
.icone-barre input[type="text"], .icone-barre #iconeRecherche {
  flex: 1; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: #11131a; color: var(--text);
}
.icone-grille {
  display: grid; gap: 10px; margin-top: 12px; max-height: 46vh; overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.icone-case {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 8px 6px; border-radius: 10px;
  border: 1px solid var(--line); background: #12141c;
}
.icone-case.actif { border-color: var(--gold); background: rgba(195, 203, 230, .10) }
.icone-pick {
  border: 0; background: none; cursor: pointer; padding: 0; line-height: 0;
}
.icone-pick img { width: 46px; height: 46px; object-fit: contain }
.icone-case:hover { border-color: var(--gold) }
.icone-nom {
  font-size: 10.5px; color: var(--muted); text-align: center;
  word-break: break-all; line-height: 1.25;
}
.icone-usine { font-size: 9.5px; color: #6f6878; text-transform: uppercase; letter-spacing: .05em }
.icone-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: #171923;
  color: #9a8fa5; cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.icone-del:hover { color: #f0b3bd; border-color: rgba(209, 104, 121, .5) }
#iconeDialog { width: min(820px, 94vw) }
.notif-choix{display:grid;gap:8px;margin-top:14px}
@media (min-width:620px){.notif-choix{grid-template-columns:1fr 1fr}}

/* ---------- Plateforme de jeu ----------
   Icones dessinees dans le code, pas des fichiers : rien a televerser, rien
   a perdre au deploiement, et elles suivent la couleur du texte. */
.plat{display:inline-flex;align-items:center;gap:7px;color:#b9aec6}
.plat svg{width:18px;height:18px;flex:none}
.plat-txt{color:#e7e1ec;font-size:14px}
.th-plat{width:38px;padding-left:10px!important;padding-right:0!important}
.td-plat{width:38px;padding-left:10px!important;padding-right:0!important;text-align:center}
.td-plat .plat{color:#8b8195}
tr:hover .td-plat .plat{color:#c9c0cb}
/* Le libelle reste lisible par un lecteur d'ecran sans occuper de place :
   une icone seule n'est pas une information pour tout le monde. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ======================================================================
   3.4.0 — Le Nexus
   ----------------------------------------------------------------------
   Le tableau de bord ne recense plus, il indique quoi faire. Trois
   registres visuels distincts, pour qu'on sache ou regarder sans lire :
   une action reclamee, un evenement qui approche, un etat de fait.
   ====================================================================== */

.nexus-bloc{margin-bottom:20px}
.nexus-bloc:last-child{margin-bottom:0}
.nexus-bloc h3{
  margin:0 0 9px;color:#a49ca8;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
}

/* --- ce qui attend une action ---------------------------------------- */
.nexus-liste{display:grid;gap:9px}
.nexus-ligne{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 15px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:#cfc7d4;transition:.2s ease;
}
.nexus-ligne:hover{border-color:var(--line-strong);background:rgba(255,255,255,.045);transform:translateX(2px)}
.nexus-n{
  flex:none;min-width:32px;padding:3px 9px;border-radius:999px;
  text-align:center;font-family:Georgia,"Times New Roman",serif;
  font-size:17px;color:var(--gold-light);
  background:rgba(107,91,210,.2);border:1px solid rgba(107,91,210,.3);
}
/* Une fiche ou une absence attend une personne : le staff la fait patienter.
   Une proposition du calcul n'attend personne. La teinte les separe. */
.nexus-ligne.urgent .nexus-n{
  color:#e3e8f8;background:rgba(195,203,230,.16);border-color:rgba(195,203,230,.34);
}
.nexus-texte{flex:1;min-width:0}
.nexus-fleche{flex:none;color:#8f8794;font-size:12.5px}

/* --- le prochain rassemblement --------------------------------------- */
.nexus-ev{display:flex;flex-wrap:wrap;align-items:baseline;gap:11px;margin-bottom:14px}
.nexus-ev strong{font-family:Georgia,"Times New Roman",serif;font-size:19px;color:var(--gold-light)}
/* Le total se tient a l'ecart des parts : sur la meme ligne, il inviterait
   a l'additionner avec elles. */
.nexus-attendus{
  margin-left:auto;padding:3px 11px;border-radius:999px;
  font-size:12.5px;color:#a49ca8;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.nexus-chiffres{display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:11px}
.nexus-chiffre{
  padding:12px;border-radius:11px;
  background:rgba(255,255,255,.028);border:1px solid var(--line);
}
.nexus-chiffre span{display:block;color:#a49ca8;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.nexus-chiffre strong{
  display:block;margin-top:5px;
  font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:500;color:#e8e2ee;
}
/* Le silence est la seule valeur sur laquelle on peut agir : elle seule
   se colore. Tout colorer reviendrait a ne rien signaler. */
.nexus-chiffre.alerte{border-color:rgba(195,203,230,.34);background:rgba(195,203,230,.07)}
.nexus-chiffre.alerte strong{color:var(--gold-light)}
.nexus-note{margin:12px 0 0;font-size:12.5px}

/* --- l'effectif en barres -------------------------------------------- */
/* La rangee de chiffres respire avant les barres, sinon les deux registres
   se lisent comme un seul bloc et le total se perd dans les repartitions. */
#nexusEffectif{margin-bottom:24px}
.nexus-barres{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:22px}
.barre-ligne{display:grid;grid-template-columns:118px 1fr 34px;gap:11px;align-items:center;padding:5px 0}
.barre-lib{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:#cfc7d4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-piste{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.barre-part{display:block;height:100%;border-radius:999px;transition:width .3s ease}
.barre-val{text-align:right;font-size:13px;color:#a49ca8}

@media (max-width:720px){
  .nexus-chiffres{grid-template-columns:repeat(2,1fr)}
  .barre-ligne{grid-template-columns:96px 1fr 30px}
}

/* L'entree "Le Théâtre" est un lien vers une page a part, pas un onglet de
   l'application. Sans ces deux declarations, l'ancre arrive soulignee et en
   flux inline : elle perd la largeur et l'alignement des autres entrees. */
a.nav{display:block;text-decoration:none}

/* ----------------------------------------------------------------------
   5.7.0 — Armes et sets
   La liste tient la hauteur, le panneau tient la largeur : la carte ne
   defile plus ni dans un sens ni dans l'autre. Les memes regles servent
   dans la grille des Parametres et dans le panneau lateral, ou la carte
   est deplacee sans etre copiee.
   ---------------------------------------------------------------------- */
.sets-duo{display:grid;grid-template-columns:262px minmax(0,1fr);gap:18px;
  align-items:start;margin-top:14px}
.sets-liste{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel-2)}
.sets-rech{padding:10px;border-bottom:1px solid var(--line)}
.sets-rech input{width:100%}
#setsListe,#classesListe,#rolesListe,#actListe{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.set-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:10px 12px;background:none;border:0;border-left:3px solid transparent;
  border-radius:0;color:var(--text);font-size:13px;transition:.16s}
.set-item:hover{background:var(--panel-hover)}
.set-item.actif{color:var(--gold-light);font-weight:650;
  background:linear-gradient(90deg,rgba(107,91,210,.22),rgba(195,203,230,.055));
  border-left-color:var(--purple-soft)}
.set-pastille{width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  border:1px solid rgba(255,255,255,.12)}
.set-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-alerte{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--danger)}
.set-nb{color:var(--muted);font-size:12px}
.sets-vide{color:var(--muted);padding:14px;font-size:13px}

.sets-panneau{border:1px solid var(--line);border-radius:14px;
  background:var(--panel-2);padding:18px;min-width:0}
.set-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.set-tete h3{margin:0;color:#e6e9f7;font-size:17px;letter-spacing:.02em}
.set-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.set-champs label{display:block;font-size:12px;color:var(--muted)}
.set-champs label.large{grid-column:1 / -1}
.set-champs input[type=text]{width:100%;margin-top:5px}
.set-champs .champ-icone{margin-top:5px}
.set-armes{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.set-armes h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:.04em}
.set-armes-tetes, .set-arme{display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,2fr) auto}
.set-armes-tetes{font-size:11px;color:var(--muted);font-weight:600;padding-bottom:6px}
.set-arme{padding:8px 0;border-top:1px solid var(--line)}
.set-arme input[type=text]{width:100%}
.arme-nom, .arme-exp, .arme-logo{min-width:0}
.arme-lib{display:none;font-size:11px;color:var(--muted)}
.set-armes > button{margin-top:14px}

/* Dans le panneau lateral, la largeur ne se negocie pas : la liste passe
   au-dessus, et le logo d'arme prend sa propre ligne sous les deux noms. */
#panneauReglages .sets-duo{grid-template-columns:minmax(0,1fr)}
#panneauReglages #setsListe,#panneauReglages #classesListe{max-height:216px}
#panneauReglages .set-armes-tetes{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
#panneauReglages .set-armes-tetes span:nth-child(3){display:none}
#panneauReglages .set-arme{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
#panneauReglages .arme-logo{grid-column:1 / -1;display:flex;align-items:center;gap:8px}
#panneauReglages .arme-lib{display:inline}
#panneauReglages .arme-logo .champ-icone{flex:1;min-width:0}

/* 5.9.0 — reglages, regles et rangs en grille. L'effet passe sous son
   libelle : deux colonnes au lieu de trois, donc plus rien qui deborde,
   panneau lateral compris. */
.reg-tetes, .reg-ligne{display:grid;gap:14px;align-items:start;
  grid-template-columns:minmax(0,1fr) 240px}
.reg-tetes{margin-top:16px;padding-bottom:6px;font-size:11px;color:var(--muted);
  font-weight:600;letter-spacing:.075em;text-transform:uppercase}
.reg-ligne{padding:11px 0;border-top:1px solid var(--line)}
.reg-lib{font-size:13px;font-weight:650;color:var(--text)}
.reg-unite{color:var(--muted);font-weight:400}
.reg-eff{display:block;margin-top:3px;font-size:12.5px;font-weight:400;
  color:var(--muted);max-width:78ch}
.reg-ligne input[type=text], .reg-ligne input:not([type]){width:100%}

.rang-tetes, .rang-ligne{display:grid;gap:12px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) 100px auto}
.rang-tetes{margin-top:16px;padding-bottom:6px;font-size:11px;color:var(--muted);
  font-weight:600;letter-spacing:.075em;text-transform:uppercase}
.rang-ligne{padding:9px 0;border-top:1px solid var(--line)}
.rang-ligne input{width:100%}
.rang-id code{font-size:12px;word-break:break-all}

/* L'explication repliee : le texte reste, a un clic. */
details.aide{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
details.aide summary{cursor:pointer;color:var(--muted);font-size:12.5px;list-style:none}
details.aide summary::-webkit-details-marker{display:none}
details.aide summary::before{content:"\203A";display:inline-block;margin-right:7px;
  transition:.18s;color:var(--gold)}
details.aide[open] summary::before{transform:rotate(90deg)}
details.aide p{margin:10px 0 0;font-size:12.5px;line-height:1.6;
  color:var(--muted);max-width:80ch}

@media (max-width:900px){
  .reg-tetes, .reg-ligne{grid-template-columns:minmax(0,1fr)}
  .reg-tetes span:last-child{display:none}
  .rang-tetes, .rang-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .rang-tetes span:nth-child(2){display:none}
  .rang-id{grid-column:1 / -1;order:9}
}
#panneauReglages .reg-tetes, #panneauReglages .reg-ligne{
  grid-template-columns:minmax(0,1fr) 180px}

/* 5.8.1 — les salons en grille. Les colonnes se dimensionnent sur leur
   contenu au lieu d'etre etirees, et le bloc se replie en deux lignes des
   que la largeur manque — panneau lateral compris. */
.salons-tetes, .salon-ligne{display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 130px 150px auto auto}
.salons-tetes{margin-top:14px;padding:0 0 6px;font-size:11px;color:var(--muted);
  font-weight:600;letter-spacing:.075em;text-transform:uppercase}
.salon-ligne{padding:9px 0;border-top:1px solid var(--line)}
.salon-ligne input[type=text], .salon-ligne input:not([type]),
.salon-ligne select{width:100%}
.s-id code{font-size:12px;word-break:break-all}
.s-actif{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.s-actif > span{display:none}

/* Sous 1080 px et dans le panneau : identifiant et reglages sur une seconde
   ligne. Le libelle « Actif » apparait alors, la colonne d'en-tete ayant
   disparu. */
#panneauReglages .salons-tetes, #panneauReglages .salon-ligne{
  grid-template-columns:minmax(0,1fr) 130px 150px auto auto}
#panneauReglages .salons-tetes span:nth-child(2){display:none}
#panneauReglages .s-id{grid-column:1 / -1;order:9}
#panneauReglages .s-actif > span{display:inline}

@media (max-width:1080px){
  .salons-tetes, .salon-ligne{
    grid-template-columns:minmax(0,1fr) 130px 150px auto auto}
  .salons-tetes span:nth-child(2){display:none}
  .s-id{grid-column:1 / -1;order:9}
  .s-actif > span{display:inline}
}

/* 5.8.0 — `table{min-width:1180px}` a ete pose pour l'annuaire des membres.
   Applique aux cartes de reglages, il etirait trois colonnes sur 1180 px et
   poussait la derniere hors du cadre. Ces tableaux se dimensionnent sur leur
   contenu ; leur conteneur garde son defilement pour les cas etroits. */
#carteRegles table, #carteDiscord table{min-width:0}
#carteRegles .table-wrap, #carteDiscord .table-wrap{min-height:0}

/* Un panneau de reference sans sous-liste n'a pas besoin de la hauteur
   minimale prevue pour les armes. */
#rolesPanneau .set-champs, #actPanneau .set-champs{margin-top:14px}

@media (max-width:900px){
  .sets-duo{grid-template-columns:1fr}
  #setsListe{max-height:230px}
  .set-champs{grid-template-columns:1fr}
  .set-armes-tetes{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .set-armes-tetes span:nth-child(3){display:none}
  .set-arme{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .arme-logo{grid-column:1 / -1;display:flex;align-items:center;gap:8px}
  .arme-lib{display:inline}
  .arme-logo .champ-icone{flex:1;min-width:0}
}


/* ============================================================
   5.11.0 — LISIBILITE EN 1080p
   Tout ce qui touche a la densite est enferme dans une plage
   1101–2278 px. Le plafond n'est pas arbitraire : le tableau des
   Ames reclame 1922 px, la barre laterale et les marges de <main>
   en prennent 356, il faut donc agir tant que la fenetre est sous
   2278 px. Un 1080p en fait 1905 : c'etait tout l'objet du lot, et
   un plafond a 1600 px l'excluait (defaut de la 5.11.0).
   Au-dessus, le 1440p (2545 px) est inchange ; en dessous de
   1101 px, les regles existantes des petits ecrans gardent la main.
   ============================================================ */

/* ---------- Les Escouades : apercu Discord repliable ---------- */
.roster-deux.apercu-replie { grid-template-columns: minmax(0, 1fr) }
.roster-deux.apercu-replie .roster-droite { display: none }
/* Le bouton ferme le cadre de publication, cale a droite. */
#rosterApercuBtn { margin-left: auto }
/* Etat actif : habillage repris a l'identique de la charte, defini
   dans strat.css pour #thVoirLegende.on et #thPanneau.on (boutons
   Legende et Joueurs du Theatre) et pour .th-seg button.on. Le
   commentaire qui l'accompagne enonce la regle : le violet dit
   « actif », le gris dit « action ». La 5.11.1 avait pose un degrade
   violet plein, invente, qui ne correspondait a aucun autre bouton
   du site. */
#rosterApercuBtn.on {
  color: var(--gold-light) !important;
  background: linear-gradient(90deg, rgba(107, 91, 210, .3), rgba(195, 203, 230, .09)) !important;
  border-color: rgba(107, 91, 210, .3) !important;
  box-shadow: inset 0 0 22px rgba(107, 91, 210, .06);
}

/* ---------- Les Ames : densite et colonnes figees ---------- */
@media (min-width: 1101px) and (max-width: 2278px) {

  /* 42 px repris sur la barre laterale, 32 sur les marges de main.
     Valeurs deja utilisees plus haut pour les ecrans etroits. */
  .app { grid-template-columns: 238px minmax(0, 1fr) }
  main { padding: 28px 22px 40px }

  /* 13 -> 6 px de marge horizontale sur 14 colonnes : ~196 px rendus
     au tableau. Le gain vertical est un effet de bord bienvenu, il
     fait tenir deux lignes de plus dans la fenetre. */
  #members th, #members td { padding: 9px 6px }

  /* Les pastilles d'armes fixent la largeur des quatre colonnes de
     builds : c'est la qu'un pixel de marge se paie quatre fois. */
  #members .tag { padding: 4px 6px }

  /* Commentaires : la colonne imposait 150 px de plancher et passait a
     la ligne. Resserree, contenu complet au survol (attribut title). */
  #members td.comm {
    max-width: 64px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Colonnes figees. Filet de securite : si le tableau deborde encore
     de quelques dizaines de pixels, on defile sans perdre de vue a qui
     appartient la ligne.
     5.11.2 — les deux colonnes se figent a left:0, la colonne Discord
     passant AU-DESSUS de la colonne Plateforme. La 5.11.0 calait Discord
     a 48 px, en supposant 38 px de largeur plus 10 de marge : faux, la
     feuille pose *{box-sizing:border-box}, donc 38 px est deja le total.
     Les 10 px d'ecart laissaient defiler le contenu des colonnes
     suivantes a nu. Sans calcul, l'erreur ne peut plus revenir : au
     repos rien ne bouge, au defilement l'icone de plateforme glisse
     sous le nom.
     Empilement : l'en-tete doit rester au-dessus du corps, sinon les
     cellules figees passent par-dessus la ligne de titres. */
  /* 5.11.3 — la colonne Discord se cale sur la largeur MESUREE de la
     colonne Plateforme (--fige-discord, posee par app.js). Les deux
     restent donc visibles cote a cote pendant le defilement, sans
     ecart ni recouvrement. La valeur de repli ne sert qu'a la premiere
     image, avant la mesure. */
  #members tbody td.td-plat,
  #members tbody tr > td:nth-child(2) {
    position: sticky; background: #12141b;
  }
  #members tbody td.td-plat { left: 0; z-index: 1 }
  #members tbody tr > td:nth-child(2) {
    left: var(--fige-discord, 38px); z-index: 2;
  }
  #members tbody tr:hover td.td-plat,
  #members tbody tr:hover > td:nth-child(2) { background: #1b1726 }

  #members thead tr:not(.group-row) th.th-plat,
  #members thead tr:not(.group-row) th:nth-child(2) {
    position: sticky; background: #0f1116;
  }
  #members thead tr:not(.group-row) th.th-plat { left: 0 }
  #members thead tr:not(.group-row) th:nth-child(2) {
    left: var(--fige-discord, 38px);
  }
}


/* ============================================================
   5.11.3 — L'EN-TETE AU-DESSUS DU CORPS
   Deux defauts lies, visibles des que le tableau defile.

   Empilement. th porte z-index:2 ; les cellules figees du corps
   portaient 2 elles aussi. A z-index egal, c'est le dernier
   element du DOM qui passe devant, donc le tbody : les noms de
   membres s'affichaient par-dessus la ligne de titres. Toute
   l'en-tete monte a 6, les deux colonnes figees a 7 pour rester
   devant les colonnes d'en-tete qui defilent sous elles.

   Opacite. th cumule un fond translucide et un backdrop-filter :
   le contenu qui passe dessous transparait, d'ou les trainees
   floues dans les bandes GvG et PvE. Les fonds passent en opaque.
   Les valeurs sont le melange exact des couleurs actuelles sur le
   fond du tableau : rien ne change a l'oeil au repos.
   ============================================================ */
#members thead th { z-index: 6; backdrop-filter: none }
#members thead tr:not(.group-row) th.th-plat,
#members thead tr:not(.group-row) th:nth-child(2) { z-index: 7 }

#members .group-row th { background: #08090d }
#members .group-row th.grp-gvg { background: #1e2338 !important }
#members .group-row th.grp-pve { background: #223a39 !important }


/* ============================================================
   5.11.4 — EN-TETE OPAQUE, COLONNE FIGEE VERROUILLEE

   Opacite. La 5.11.3 a retire le backdrop-filter sans rendre les
   fonds opaques : th est a rgba(11,12,17,.96), les 4 % restants
   laissaient lire le texte qui defile dessous. On pose des
   couleurs pleines, equivalentes au melange precedent sur le
   fond du tableau — rien ne change a l'oeil au repos, la fuite
   disparait au defilement.

   Colonne verrouillee. Discord se cale sur la largeur de la
   colonne Plateforme. Plutot que de dependre d'une mesure prise
   au bon moment, on impose cette largeur : 38 px fermes. La
   valeur de repli du CSS devient donc exacte par construction, et
   --fige-discord (pose par app.js) ne fait plus que la confirmer.
   38 px suffisent : l'icone fait 20 px et la marge gauche 10.
   ============================================================ */

#members thead tr:nth-child(2) th { background: #0b0c11 }
#members thead tr:not(.group-row) th.th-plat,
#members thead tr:not(.group-row) th:nth-child(2) { background: #0b0c11 }

@media (min-width: 1101px) and (max-width: 2278px) {
  #members thead th.th-plat,
  #members tbody td.td-plat {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
}


/* ============================================================
   5.11.5 — BANDES D'EN-TETE OPAQUES

   .grp-gvg et .grp-pve sont declarees en !important avec un fond
   translucide, et elles habillent DEUX lignes : la bande de
   regroupement (« GVG », « PVE ») et les intitules de colonnes
   (Arme 1, Arme 2, Role). La 5.11.4 n'avait traite que la
   premiere, et sans !important : les intitules laissaient donc
   toujours lire les pastilles d'armes qui defilaient dessous.

   On cible ici thead entier, avec !important pour l'emporter, et
   uniquement thead : les cellules du corps (tbody td.grp-*, a
   .032 et .028 d'opacite) gardent leur teinte de fond, qui est ce
   qui colore les deux zones du tableau.

   Couleurs : melange exact des rgba precedents sur le fond du
   tableau. #1e2338 = rgba(230,126,34,.30) sur #08090d.
              #223a39 = rgba(118,215,196,.24) sur #08090d.
   Rien ne change a l'oeil au repos.
   ============================================================ */
#members thead th.grp-gvg { background: #1e2338 !important }
#members thead th.grp-pve { background: #223a39 !important }


/* ============================================================
   5.12.0 — BOUTON DE SAISIE D'UN INVITE

   Meme gabarit que la croix de retrait, en discret : il est
   present sur toutes les lignes sans fiche, il ne doit pas
   attirer l'oeil plus que l'absence de vignettes ne le fait
   deja.
   ============================================================ */
.rj-inv {
  border: 0;
  background: transparent;
  color: var(--muted, #8a93a5);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.rj-inv:hover { color: var(--txt, #e6e8ee); background: rgba(255,255,255,.08) }


/* ============================================================
   5.12.1 — FENETRE DU BUILD D'UN INVITE

   Trois champs cote a cote comme le profil GvG d'une fiche, et
   la meme liste habillee. Sous 720 px l'ecran n'a plus la place
   pour trois colonnes : elles se replient.
   ============================================================ */
.inv-grille{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:18px 0 4px;
}
.inv-grille label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:720px){
  .inv-grille{grid-template-columns:1fr}
}

/* ============================================================
   5.12.1 — INSCRIPTIONS ECARTEES

   Un tableau imposait sa largeur minimale et faisait defiler la
   fenetre dans les deux sens. Une grille de pastilles s'adapte a
   la largeur disponible : la liste se lit d'un coup, ce qui est
   tout l'interet de l'avoir sortie de l'ecran principal.
   ============================================================ */
.ec-grille{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
  margin-top:6px;
}
.ec-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px 9px 13px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  min-width:0;
}
.ec-nom{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  color:var(--text);
}
.ec-rep{
  flex:0 0 auto;
  padding:4px 10px;
  font-size:12px;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:9px;
  cursor:pointer;
}
.ec-rep:hover{
  color:var(--gold-light);
  border-color:var(--gold-dark);
  background:rgba(195,203,230,.1);
}


/* ============================================================
   5.12.2 — LE MENU NE DOIT PLUS ETRE COUPE

   Une liste habillee deploie son menu en position absolue sous
   son bouton : il sort donc de son conteneur. Les fenetres du
   site portent overflow:auto, ce qui rogne le depassement et
   fait apparaitre une barre de defilement — visible des le
   premier clic sur « Arme 2 ».

   Cette fenetre-ci n'a rien a faire defiler : trois champs et
   deux boutons tiennent toujours. Elle passe donc en
   overflow:visible, et le menu se deploie par-dessus le bord.
   Les autres fenetres gardent leur reglage : la fiche membre,
   elle, a besoin de defiler.

   240 px au lieu de 290 : le menu doit rester a l'ecran meme
   quand la fenetre est deja proche du bas sur un portable.
   ============================================================ */
#inviteDialog { overflow: visible }
#inviteDialog .voir { overflow: visible }
#inviteDialog .cbx-menu { max-height: 240px }


/* ============================================================
   5.13.0 — LA CARTE PREND LA HAUTEUR DE SON CONTENU

   .table-wrap impose 320 px de haut a tous les tableaux du
   site : c'est bon pour Les Ames, ou l'on fait defiler des
   dizaines de lignes, et absurde ici, ou la liste est
   normalement vide. Une ligne unique laissait 250 px de noir
   sous elle.

   Le mode d'emploi, lui, se replie quand il n'y a rien a
   rattacher : c'est un mode d'emploi, pas une alarme, et il
   n'a rien a dire quand la liste est vide.
   ============================================================ */
#orphelinsList .table-wrap { min-height: 0 }
#carteOrphelins.repliee #orphelinsAide { display: none }

/* ============================================================
   5.13.0 — TROIS SECTIONS DANS LA FENETRE DES ECARTES
   ============================================================ */
.ec-titre{
  margin:18px 0 8px;
  color:var(--gold-light);
  font-size:14px;
  font-weight:600;
  letter-spacing:.03em;
}
.ec-titre small{
  margin-left:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
}
.ec-note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.6;
}
.ec-note button{
  margin-left:6px;
  padding:4px 10px;
  font-size:12px;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:9px;
  cursor:pointer;
}
.ec-note button:hover{
  color:var(--gold-light);
  border-color:var(--gold-dark);
  background:rgba(195,203,230,.1);
}


/* ------------------------------------------------------------
   5.14.0 — inscrits ranges par role
   Quatre colonnes : au-dela, les pseudos se coupent en 1080p, et
   l'ecran du staff est en 1080p six fois sur dix. Huit roles se
   lisent donc sur deux rangees de quatre.
   ------------------------------------------------------------ */
.roster-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .roster-roles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.roster-role {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: 6px 8px 8px;
  min-width: 0;
}
/* La colonne des fiches incompletes ne doit pas se fondre dans les autres. */
.roster-role.sans { border-style: dashed; border-color: rgba(255, 255, 255, .16) }
.roster-role-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.roster-role-t span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-role-t strong {
  font-weight: 600;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}
.roster-role-c { display: flex; flex-direction: column; gap: 4px }
.roster-role-c .rj-carte { width: 100%; box-sizing: border-box }

/* ==========================================================
   5.16.0 — ajout d'un invité à la main (Les Escouades)
   Bouton normal, pas le dégradé or : l'or est réservé à
   l'action principale de l'écran.
   ========================================================== */
#rosterAjout { display: inline-flex; align-items: center; gap: 8px }
#ajInvDialog { width: min(560px, 92vw) }
#ajInvRecherche { width: 100%; margin: 4px 0 12px }
.aj-inv-liste {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(52vh, 460px); overflow: auto; padding-right: 4px;
}
.aj-inv-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; text-align: left; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  transition: .15s;
}
.aj-inv-item:hover { background: var(--panel-hover); border-color: rgba(107,91,210,.42) }
.aj-inv-nom { font-weight: 700 }
.aj-inv-compte { font-size: 12px }
.aj-inv-tag {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--gold-light); background: rgba(195,203,230,.12);
  border: 1px solid rgba(195,203,230,.35);
}
.aj-inv-tag + .aj-inv-tag { margin-left: 6px }
.aj-inv-tag.alerte { color: #e9929f; background: rgba(209,104,121,.12); border-color: rgba(209,104,121,.4) }
.aj-inv-libre { justify-content: center; border-style: dashed; color: var(--purple-soft) }
.aj-inv-msg { margin: 0 0 6px; color: var(--danger) }


/* ============ NOTICE DE L'ECRAN — 5.24.0 ============================
   Le panneau reprend .pan-fond / .pan-corps / .pan-x du panneau de
   reglages. Seule la largeur change. Les styles du contenu sont TOUS
   portes par .notice-corps : le site utilise deja .carte ailleurs, les
   laisser libres casserait Les Parametres. */
#panneauNotice { position: fixed; inset: 0; z-index: 60 }
#panneauNotice[hidden] { display: none }
#panneauNotice .pan-corps { width: clamp(380px, 32vw, 560px) }
#panneauNotice .pan-contenu { padding: 16px }

.icon-notice.actif {
  background: linear-gradient(160deg, var(--violet, #6b5bd2), #4e2a80);
  border-color: var(--violet, #6b5bd2); color: #fff;
}
.pan-x.actif { color: #fff; background: var(--violet, #6b5bd2) }

#ntChamp {
  width: 100%; min-height: 260px; resize: vertical;
  background: #0f1017; color: inherit; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-family: Consolas, 'Cascadia Mono', monospace;
}
.nt-legende { font-size: 12px; color: var(--muted); margin: 14px 0 6px; font-weight: 600 }
.nt-apercu  { border: 1px solid var(--line); border-radius: 10px; padding: 12px }
.nt-pied {
  flex: 0 0 auto; padding: 8px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--gold-light); min-height: 31px;
}
.nt-vide { color: var(--muted); font-style: italic }

.notice-corps { font-size: 14.5px; line-height: 1.55 }
.notice-corps h2 { font-size: 17px; margin: 0 0 6px; color: var(--gold-light); font-weight: 600 }
.notice-corps h3 { font-size: 14px; margin: 0 0 5px; font-weight: 650 }
.notice-corps p  { margin: 0 0 10px }
.notice-corps .chapo { color: var(--muted); font-size: 14px }
.notice-corps .gris  { color: var(--muted) }
.notice-corps .carte {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  background: rgba(255, 255, 255, .02); margin-bottom: 13px;
}
.notice-corps .carte.accent {
  border-color: rgba(107, 91, 210, .35); background: rgba(107, 91, 210, .07);
  margin-bottom: 9px; padding: 11px 12px;
}
.notice-corps .carte.accent:last-child { margin-bottom: 0 }
.notice-corps .tache { display: flex; gap: 11px; margin-bottom: 11px }
.notice-corps .tache:last-child { margin-bottom: 0 }
.notice-corps .tache p { margin: 0; font-size: 14px }
.notice-corps .tache .num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(107, 91, 210, .28); border: 1px solid rgba(107, 91, 210, .55);
  color: #cda9ef; font-size: 12px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.notice-corps .ui {
  background: rgba(195, 203, 230, .14); border: 1px solid rgba(195, 203, 230, .3);
  border-radius: 5px; padding: 1px 5px; font-size: 13px;
  color: var(--gold-light); white-space: nowrap;
}
.notice-corps .note {
  border-left: 2px solid var(--gold); padding: 9px 11px; font-size: 13.5px;
  background: rgba(195, 203, 230, .06); border-radius: 0 8px 8px 0;
  color: var(--muted);
}
.notice-corps ul, .notice-corps ol { margin: 0 0 10px; padding-left: 20px }
.notice-corps li { margin-bottom: 4px }


/* ---- listes et tableaux des notices — 5.24.2 ---- */
.notice-corps ul,
.notice-corps ol { margin: 0 0 11px; padding-left: 0; list-style: none }
.notice-corps ol { counter-reset: nt-num }
.notice-corps li { position: relative; padding-left: 17px; margin-bottom: 7px; font-size: 14px }
.notice-corps li:last-child { margin-bottom: 0 }
.notice-corps ul > li::before {
  content: ''; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(107, 91, 210, .85);
}
.notice-corps ol > li { counter-increment: nt-num; padding-left: 22px }
.notice-corps ol > li::before {
  content: counter(nt-num) '.'; position: absolute; left: 0; top: 0;
  color: var(--gold-light); font-weight: 650; font-size: 13px;
}
.notice-corps li > ul,
.notice-corps li > ol { margin: 6px 0 0 }

.notice-corps table {
  width: 100%; border-collapse: collapse; margin: 0 0 11px; font-size: 13.5px;
}
.notice-corps th,
.notice-corps td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.notice-corps th { color: var(--gold-light); font-weight: 650; font-size: 12.5px }
.notice-corps tr:last-child td { border-bottom: 0 }
.notice-corps td:not(:first-child),
.notice-corps th:not(:first-child) { width: 1%; white-space: nowrap; text-align: center }

.notice-corps hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0 }
.notice-corps code {
  background: rgba(255, 255, 255, .06); border-radius: 4px;
  padding: 1px 5px; font-size: 12.5px; color: var(--muted);
}
.notice-corps a { color: var(--gold) }

/* ============================================================
   NOCTIS 1.0 — taux de participation, profil Aion 2
   ============================================================ */
.th-num,.td-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag-act{background:rgba(107,91,210,.16);border-color:rgba(139,124,240,.4)}
.tag-rang{background:rgba(107,91,210,.2);border-color:rgba(139,124,240,.45)}
.stats-vieux{color:#f0b46a;white-space:nowrap}

/* Pastille de taux. La couleur n'est jamais la seule information :
   le pourcentage et le detail num/den restent ecrits. */
.taux{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;border-radius:999px;
  font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);color:var(--text);white-space:nowrap}
.taux small{font-weight:500;font-size:11px;color:var(--muted)}
.taux-ok{background:rgba(127,183,154,.14);border-color:rgba(127,183,154,.5);color:#bfe3cf}
.taux-orange{background:rgba(240,164,74,.16);border-color:rgba(240,164,74,.6);color:#ffd09a}
.taux-rouge{background:rgba(222,92,108,.18);border-color:rgba(222,92,108,.65);color:#ffb3bd}
.taux-sans{color:var(--muted)}
.taux-abs{background:rgba(195,203,230,.08);color:var(--muted);font-weight:500;font-style:italic}

.nexus-chiffre.niv-rouge strong{color:#ff8a98}
.nexus-chiffre.niv-orange strong{color:#ffc27a}

/* Les Presences */
.pres-filtres{display:flex;gap:8px;flex-wrap:wrap}
.pres-filtres input{max-width:200px}
.pres-repartition{margin-top:18px}
.pres-histo{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;height:150px;align-items:end;
  padding:8px 4px 0;border-bottom:1px solid var(--line)}
.pres-barre{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.pres-b{width:100%;max-width:46px;border-radius:6px 6px 2px 2px;min-height:2px;background:#7fb79a}
.pres-b.niv-orange{background:#f0a44a}
.pres-b.niv-rouge{background:#de5c6c}
.pres-n{font-size:12px;font-weight:700;color:var(--text);min-height:15px}
.pres-l{font-size:11px;color:var(--muted);margin-bottom:-20px}
.pres-histo + p, .pres-repartition{padding-bottom:18px}
.pres-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;margin-top:12px}
.pres-ligne{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) auto;align-items:center;gap:12px;
  text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text)}
.pres-ligne:hover{background:var(--panel-hover)}
.pres-ligne.niv-rouge{border-color:rgba(222,92,108,.55);background:linear-gradient(90deg,rgba(222,92,108,.12),var(--panel-2) 60%)}
.pres-ligne.niv-orange{border-color:rgba(240,164,74,.5);background:linear-gradient(90deg,rgba(240,164,74,.10),var(--panel-2) 60%)}
.pres-nom{display:flex;flex-direction:column;min-width:0;font-weight:600}
.pres-nom small{display:flex;align-items:center;gap:4px;color:var(--muted);font-weight:400;font-size:12px}
.pres-nom small .vig{width:16px;height:16px}
.pres-jauge{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.pres-jauge span{display:block;height:100%;border-radius:999px;background:#7fb79a}
.pres-ligne.niv-orange .pres-jauge span{background:#f0a44a}
.pres-ligne.niv-rouge .pres-jauge span{background:#de5c6c}
.pres-ligne.niv-sans .pres-jauge span{background:#6d7290}

/* Compositions : classe sans icone, non venu, hors Legion */
.rj-pastille{display:inline-block;width:12px;height:12px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);flex:none}
.rj-nv{font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px;border:1px solid var(--line-strong);
  background:transparent;color:var(--muted);line-height:1.4}
.rj-nv:hover{color:#ffb3bd;border-color:rgba(222,92,108,.6)}
.rj-nv.actif{background:rgba(222,92,108,.25);color:#ffd2d8;border-color:rgba(222,92,108,.7)}
.rj-nv-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:1px 5px;border-radius:6px;background:rgba(222,92,108,.22);color:#ffc2ca}
.rj.non-venu .rj-nom,.rj-carte.non-venu .rj-nom{text-decoration:line-through;opacity:.75}
.roster-hors{font-size:13px;line-height:1.6}

@media (max-width:640px){
  .pres-grille{grid-template-columns:1fr}
  .pres-ligne{grid-template-columns:minmax(0,1fr) auto}
  .pres-jauge{display:none}
}
#presResume{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){#presResume{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Le bouton NV reste discret : il ne sert qu'apres l'evenement. */
.rj button.rj-nv{padding:0 5px!important;min-height:0;height:18px;font-size:10px;border-radius:5px;
  background:transparent;box-shadow:none;opacity:.55}
.rj:hover button.rj-nv,.rj button.rj-nv.actif{opacity:1}
.rj .rj-nv-tag{display:none}

/* Noctis : la banniere de la Legion derriere l'ecran de connexion et
   en tete de l'espace membre. Assombrie pour que le texte reste lisible. */
.login-screen{
  background:
    linear-gradient(180deg,rgba(7,8,15,.55),rgba(7,8,15,.92) 70%),
    url(/banniere.webp) center top/cover no-repeat,
    #07080f;
}
.membre-entete{
  padding:22px 12px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(7,8,15,.35),rgba(7,8,15,.85)),
             url(/banniere.webp) center/cover no-repeat;
}
.logo-img{border-radius:50%}
.rj button.rj-nv{display:none}
.rj:hover button.rj-nv,.rj button.rj-nv.actif{display:inline-block}

/* Noctis 1.2 — cohortes et chefs */
.roster-grille.avec-cohortes{display:flex;flex-direction:column;gap:14px}
.cohorte{border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px;
  background:linear-gradient(180deg,rgba(107,91,210,.08),transparent 60%)}
.cohorte-t{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 4px 10px;font-size:13px}
.cohorte-n{font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.cohorte-chef strong{color:var(--text)}
.cohorte-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.rj-chef-c,.rj-chef-g{margin-right:4px;font-weight:700}
.rj-chef-c{color:#c9b6ff}
.rj-chef-g{color:#ffd27a}
.rj button.rj-chef{display:none;padding:0 4px!important;min-height:0;height:18px;font-size:11px;line-height:1;
  border-radius:5px;background:transparent;box-shadow:none;border:1px solid var(--line-strong);color:var(--muted)}
.rj:hover button.rj-chef{display:inline-block}
.rj button.rj-chef.actif{color:#ffd27a;border-color:rgba(255,210,122,.6)}
.roster-grille.cohorte-grille{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.cohorte-grille .roster-col{max-width:none}
@media (max-width:1100px){.roster-grille.cohorte-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.roster-grille.cohorte-grille{grid-template-columns:1fr}}
/* Noctis 1.3 — editeur de groupes par cohorte */
.coh-ed{border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px;background:rgba(107,91,210,.05)}
.coh-ed-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.coh-ed-t strong{color:var(--gold-light);text-transform:uppercase;letter-spacing:.04em;font-size:13px}
.coh-ed-t .danger{margin-left:auto}
.coh-ed-g{display:flex;flex-wrap:wrap;gap:8px}
.coh-ed-g .roster-groupe-ligne{display:flex;gap:4px;align-items:center}
.coh-ed-g .roster-groupe-ligne input{width:140px}
/* Noctis 1.3 — deplacer un groupe d'une cohorte a l'autre */
.cohorte-depot{display:none;align-items:center;justify-content:center;text-align:center;min-height:90px;
  padding:10px;border:2px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px}
.glisse-groupe .cohorte:not(.coh-source) .cohorte-depot{display:flex}
.cohorte.coh-cible{outline:2px solid var(--gold-light);outline-offset:3px}
.cohorte.coh-cible .cohorte-depot{border-color:var(--gold-light);color:var(--gold-light)}

/* Noctis 1.3 — en-tete de l'espace membre : la banniere porte deja le
   nom et l'embleme de la Legion. Affichee entiere (sans recadrage) et
   sans logo par-dessus ; le pseudo passe dessous. */
.membre-entete{display:block;padding:0 0 4px;background:none;text-align:center;border-bottom:0}
.membre-entete::before{content:'';display:block;aspect-ratio:3/1;border-radius:14px;
  border:1px solid var(--line);background:url(/banniere.webp) center/cover no-repeat}
.membre-entete h1{margin:12px 0 0}

/* Noctis 1.3 — choix de la classe par tuiles (icone + nom), rangees par role */
.choix-classe{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.cc-role-t{display:flex;align-items:center;gap:6px;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.cc-role-t img{width:18px;height:18px;object-fit:contain}
.cc-liste{display:flex;flex-wrap:wrap;gap:8px}
.cc-btn{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;
  box-shadow:none;font-weight:600}
.cc-btn img{width:30px;height:30px;object-fit:contain}
.cc-btn:hover{border-color:var(--c)}
.cc-btn.actif{border-color:var(--c);background:linear-gradient(100deg,color-mix(in srgb,var(--c) 30%,transparent),transparent);
  box-shadow:0 0 0 1px var(--c) inset}

.cc-lbl{display:block;color:#c9c0cb;font-size:12px;font-weight:750;letter-spacing:.025em}

/* Noctis 1.4.2 — banniere de la Legion dans l'en-tete de chaque ecran.
   Le titre reste a gauche sur fond uni ; la banniere, calee a droite,
   laisse le mot NOCTIS hors du texte. Les boutons ? et engrenage gardent
   un fond sombre pour rester lisibles sur l'image. */
/* 1.4.4 : la banniere occupe toute la largeur de l'en-tete, a son echelle
   naturelle (cover). La hauteur suit la largeur de l'ecran pour que le mot
   NOCTIS tienne en entier ; le titre garde un fond sombre a gauche. */
main>header{position:relative;overflow:hidden;
  min-height:clamp(120px,calc((100vw - 240px) * .12),210px);
  padding:22px 22px 22px 26px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(90deg,rgba(11,12,22,.95) 0%,rgba(11,12,22,.8) 18%,rgba(11,12,22,.15) 38%,rgba(11,12,22,0) 60%),
             url(/banniere.webp) center 47%/cover no-repeat,#0b0c16}
main>header h1{text-shadow:0 2px 12px rgba(0,0,0,.6)}
main>header .entete-actions{position:relative;z-index:1;padding:6px;border-radius:14px;
  background:rgba(9,10,18,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
main>header .entete-actions button{opacity:.82;transition:opacity .15s}
main>header .entete-actions button:hover,main>header .entete-actions button:focus-visible{opacity:1}
main>header .entete-actions:empty{display:none}
@media (max-width:900px){
  main>header{background:linear-gradient(180deg,rgba(11,12,22,.45),rgba(11,12,22,.9) 85%),
             url(/banniere.webp) center 40%/cover no-repeat,#0b0c16}
}