/* =====================================================================
   IRMP Industries — Console du bot Discord
   Charte « mise en page DraftBot, couleurs IRMP ».

   Ce fichier remplace l'ancienne feuille, qui était une copie de celle du
   portail principal : sur 268 classes définies, 72 seulement servaient
   ici. La structure, les composants et les proportions reprennent le
   tableau de bord DraftBot (rail des serveurs, carte du serveur, sections
   à interrupteur, cartes de modules, aperçus Discord) ; les couleurs
   restent celles d'IRMP (or sur brun sombre) plutôt que l'orange-rouge.

   Tous les noms de classes de l'ancienne feuille sont conservés, ce qui
   permet aux 24 pages existantes d'adopter la nouvelle apparence sans
   toucher à leur balisage.
   ===================================================================== */

:root{
  /* Fonds — brun très sombre, plus neutre que l'ancien pour se rapprocher
     du gris DraftBot sans perdre la chaleur IRMP. */
  --bg:#131210;
  --bg-deep:#0c0b09;
  --panel:#1b1a17;
  --panel-alt:#211f1b;
  --panel-raised:#272420;
  --panel-hover:#2d2a24;
  --border:#302c25;
  --border-soft:#26231e;
  --border-strong:#3d382e;

  --text:#f0ece4;
  --text-dim:#9d968a;
  --text-faint:#6f6a60;

  /* Or IRMP — l'accent, à la place de l'orange-rouge DraftBot. */
  --amber:#d98a2b;
  --amber-bright:#e8a44f;
  --amber-soft:#f0c58a;
  --amber-dim:#7a4d18;
  --amber-ghost:rgba(217,138,43,.13);

  --blue:#8fb4d9;
  --blue-bright:#a5c3e0;
  --blue-dim:#556c82;
  --green:#4e9d69;
  --green-bright:#6fbf8b;
  --teal:#4f7a54;
  --red:#b5504a;
  --red-bright:#d47068;
  --rivet:#3a3225;

  --card-accent:var(--amber);
  --card-accent-dim:var(--amber-dim);

  --radius-sm:6px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;

  --font-hero:'Space Grotesk',sans-serif;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --rail-w:72px;
  --sidebar-w:252px;
  --topbar-h:56px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  min-height:100vh;
  width:100%;
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--amber);color:#17140e;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#332f28;border-radius:8px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#443f35;}

/* ---------------------------------------------------------------------
   Typographie utilitaire
   --------------------------------------------------------------------- */
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);}
.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.page-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:6px;
}
.page-sub{
  font-size:13.5px;
  color:var(--text-dim);
  line-height:1.6;
  margin-bottom:24px;
  max-width:820px;
}
.empty-note{
  border:1px dashed var(--border-strong);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
  line-height:1.6;
}

/* =====================================================================
   ÉCRAN DE CONNEXION
   ===================================================================== */
#auth-screen{background:var(--bg);}
.auth-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:var(--shadow-lg);
}
.auth-heading{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  margin-bottom:8px;
}
.auth-desc{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:22px;}
.signup-note{font-size:11.5px;color:var(--text-faint);line-height:1.6;}
.brand-mark{display:flex;align-items:center;gap:10px;}
.brand-mark .glyph,.glyph{border-radius:10px;}

.form-error,.form-success{
  display:none;
  border-radius:var(--radius);
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.5;
  margin-bottom:14px;
}
.form-error{background:rgba(181,80,74,.12);border:1px solid rgba(181,80,74,.4);color:var(--red-bright);}
.form-success{background:rgba(78,157,105,.12);border:1px solid rgba(78,157,105,.4);color:var(--green-bright);}
.form-error.show,.form-success.show{display:block;}

/* =====================================================================
   CHAMPS DE FORMULAIRE
   ===================================================================== */
.field{margin-bottom:16px;}
.field label,.field-label{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:7px;
}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=search],
select,
textarea{
  width:100%;
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-body);
  font-size:13.5px;
  padding:10px 12px;
  transition:border-color .13s,background .13s;
}
textarea{
  min-height:96px;
  resize:vertical;
  line-height:1.6;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--amber);
  background:var(--panel-raised);
}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239d968a' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
  cursor:pointer;
}
input[type=range]{
  width:100%;
  appearance:none;
  height:6px;
  border-radius:4px;
  background:var(--panel-raised);
  padding:0;
  border:none;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:#efe9df;
  border:none;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#efe9df;border:none;cursor:pointer;
}
/* Liste à choix multiple : pas de chevron (il n'y a pas de menu à ouvrir),
   des lignes lisibles et une sélection à l'or IRMP. */
select[multiple]{
  background-image:none;
  padding:6px;
  cursor:default;
}
select[multiple] option{
  padding:5px 8px;
  border-radius:5px;
  color:var(--text-dim);
}
select[multiple] option:checked{
  background:var(--amber-ghost) linear-gradient(0deg,var(--amber-ghost),var(--amber-ghost));
  color:var(--amber-bright);
  font-weight:600;
}
select option{background:var(--panel-alt);color:var(--text);}

input[type=color]{
  -webkit-appearance:none;appearance:none;
  width:60px;height:38px;
  padding:3px;
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
input[type=color]::-webkit-color-swatch{border:none;border-radius:5px;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.field-hint{font-size:11.5px;color:var(--text-faint);line-height:1.55;margin-top:6px;}

/* Champ avec compteur de caractères, façon DraftBot */
.field-count{position:relative;}
.field-count .counter{
  position:absolute;right:12px;bottom:10px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
  pointer-events:none;
}
.field-count .counter b{color:var(--amber);font-weight:500;}

/* Bouton « effacer » d'un sélecteur, comme le × de DraftBot */
.select-wrap{position:relative;}
.select-wrap .select-clear{
  position:absolute;right:32px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;border-radius:4px;
}
.select-wrap .select-clear:hover{color:var(--text);background:var(--panel-raised);}
.select-wrap select{padding-right:56px;}

.pw-wrap{position:relative;}
.pw-toggle{
  position:absolute;right:8px;top:31px;
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  padding:6px;border-radius:6px;display:flex;
}
.pw-toggle:hover{color:var(--text);background:var(--panel-raised);}

.search-box{
  width:100%;
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-size:13px;
  padding:9px 12px 9px 34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6a60' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:11px center;
}
.search-box:focus{outline:none;border-color:var(--amber);}

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn-primary,.btn-ghost{
  width:100%;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  cursor:pointer;
  transition:background .13s,border-color .13s,color .13s,opacity .13s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn-primary{
  background:var(--amber);
  border:1px solid var(--amber);
  color:#17140e;
}
.btn-primary:hover{background:var(--amber-bright);border-color:var(--amber-bright);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--text-dim);
}
.btn-ghost:hover{background:var(--panel-raised);color:var(--text);border-color:var(--border-strong);}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed;}

.admin-action-btn{
  background:var(--panel-raised);
  border:1px solid var(--border-strong);
  color:var(--text-dim);
  border-radius:var(--radius-sm);
  font-size:11.5px;
  font-weight:600;
  padding:6px 11px;
  cursor:pointer;
  transition:background .13s,color .13s,border-color .13s;
  white-space:nowrap;
}
.admin-action-btn:hover{background:var(--panel-hover);color:var(--text);}
.admin-action-btn-danger{
  background:rgba(181,80,74,.12);
  border-color:rgba(181,80,74,.42);
  color:var(--red-bright);
}
.admin-action-btn-danger:hover{background:rgba(181,80,74,.22);color:#f0a49c;}

.mobile-menu-btn{
  display:none;
  background:var(--panel-alt);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:var(--radius-sm);
  padding:7px;
  cursor:pointer;
}
.mobile-menu-btn:hover{color:var(--text);}

/* =====================================================================
   INTERRUPTEURS
   ===================================================================== */
.toggle-switch{
  display:flex;align-items:flex-start;gap:11px;
  cursor:pointer;
  user-select:none;
}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0;}
.toggle-switch-track{
  position:relative;
  flex-shrink:0;
  width:38px;height:21px;
  border-radius:999px;
  background:#4a453c;
  transition:background .16s;
  margin-top:1px;
}
.toggle-switch-thumb{
  position:absolute;
  top:2.5px;left:2.5px;
  width:16px;height:16px;
  border-radius:50%;
  background:#efe9df;
  transition:transform .16s;
  box-shadow:var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-switch-track{background:var(--amber);}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb{transform:translateX(17px);}
.toggle-switch input:focus-visible + .toggle-switch-track{box-shadow:0 0 0 3px var(--amber-ghost);}
.toggle-switch-text{font-size:13px;color:var(--text);line-height:1.5;}

/* Gros interrupteur d'activation d'une section (haut à droite chez DraftBot) */
.section-toggle{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  cursor:pointer;
}
.section-toggle input{position:absolute;opacity:0;width:0;height:0;}
.section-toggle .track{
  position:relative;width:52px;height:28px;border-radius:999px;
  background:#4a453c;transition:background .16s;
}
.section-toggle .thumb{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#efe9df;transition:transform .16s;box-shadow:var(--shadow-sm);
}
.section-toggle input:checked + .track{background:var(--amber);}
.section-toggle input:checked + .track .thumb{transform:translateX(24px);}

/* Case à cocher carrée des cartes de module */
.check-box{
  position:relative;
  flex-shrink:0;
  width:20px;height:20px;
  cursor:pointer;
  display:inline-block;
}
.check-box input{position:absolute;opacity:0;width:0;height:0;}
.check-box .box{
  display:block;width:20px;height:20px;
  border:1.5px solid var(--border-strong);
  border-radius:5px;
  background:var(--panel-alt);
  transition:background .13s,border-color .13s;
}
.check-box input:checked + .box{
  background:var(--amber);
  border-color:var(--amber);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317140e' stroke-width='3.2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}

/* =====================================================================
   STRUCTURE : rail des serveurs + barre latérale + contenu
   ===================================================================== */
#dashboard-screen{display:none;}
#dashboard-screen.show{display:block;}

/* --- Rail des serveurs (colonne d'avatars, tout à gauche) --- */
.guild-rail{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--rail-w);
  background:var(--bg-deep);
  border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;align-items:center;
  padding:12px 0 16px;
  gap:8px;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:120;
  scrollbar-width:none;
}
.guild-rail::-webkit-scrollbar{display:none;}
.guild-rail-item{
  position:relative;
  width:46px;height:46px;
  flex-shrink:0;
  border-radius:50%;
  cursor:pointer;
  background:var(--panel-raised);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:14px;font-weight:600;color:var(--text-dim);
  transition:border-radius .16s,filter .16s,border-color .16s;
  border:2px solid transparent;
  overflow:hidden;
}
.guild-rail-item img{width:100%;height:100%;object-fit:cover;display:block;}
.guild-rail-item:hover{border-radius:16px;filter:brightness(1.15);}
.guild-rail-item.active{border-radius:16px;border-color:var(--amber);}
/* Le trait vertical à gauche de l'avatar actif — posé sur un conteneur pour
   ne pas être rogné par l'overflow:hidden de la pastille. */
.guild-rail-slot{position:relative;display:flex;justify-content:center;width:100%;flex-shrink:0;}
.guild-rail-slot::before{
  content:'';
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:0;border-radius:0 4px 4px 0;
  background:var(--amber);
  transition:height .16s;
}
.guild-rail-slot:hover::before{height:16px;}
.guild-rail-slot.active::before{height:28px;}
.guild-rail-sep{width:30px;height:1px;background:var(--border);flex-shrink:0;margin:2px 0;}
.guild-rail-spacer{flex:1;}

/* --- Barre latérale --- */
.sidebar{
  position:fixed;top:0;left:var(--rail-w);bottom:0;
  width:var(--sidebar-w);
  background:var(--panel);
  border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;
  z-index:110;
  overflow:hidden;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.sidebar-brand .glyph{width:26px;height:26px;flex-shrink:0;}
.sidebar-brand b{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  color:var(--text-dim);
  text-transform:uppercase;
}

/* Carte du serveur courant, en haut de la barre latérale */
.guild-card{
  position:relative;
  padding:20px 16px 16px;
  text-align:center;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.guild-card-avatar{
  width:78px;height:78px;border-radius:50%;
  margin:0 auto 10px;
  background:var(--panel-raised);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);
}
.guild-card-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.guild-card-name{
  font-family:var(--font-display);
  font-size:15px;font-weight:600;color:var(--text);
  line-height:1.35;
  word-break:break-word;
}
.guild-card-meta{font-size:11.5px;color:var(--text-faint);margin-top:3px;}
.guild-card-dot{
  position:absolute;left:16px;top:16px;
  width:9px;height:9px;border-radius:50%;
  background:var(--text-faint);
}
.guild-card-dot.online{background:var(--green-bright);box-shadow:0 0 0 3px rgba(111,191,139,.15);}
.guild-card-gear{
  position:absolute;right:12px;top:12px;
  background:none;border:none;color:var(--text-faint);
  cursor:pointer;padding:6px;border-radius:6px;display:flex;
}
.guild-card-gear:hover{color:var(--text);background:var(--panel-raised);}

/* --- Navigation --- */
.nav-scroll{flex:1;overflow-y:auto;padding:10px 10px 14px;}
.nav-group{margin-bottom:14px;}
.nav-group-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:0 8px;
  margin-bottom:6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:13px;
  color:var(--text-dim);
  cursor:pointer;
  transition:background .12s,color .12s;
  margin-bottom:1px;
  line-height:1.3;
}
.nav-item svg{flex-shrink:0;opacity:.85;}
.nav-item:hover{background:var(--panel-alt);color:var(--text);}
.nav-item.active{
  background:var(--amber-ghost);
  color:var(--amber-bright);
}
.nav-item.active svg{opacity:1;}
.nav-badge-new{
  margin-left:auto;
  background:var(--amber);
  color:#17140e;
  font-size:8.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 5px;border-radius:4px;
  text-transform:uppercase;
}
.tab-badge{
  background:var(--red);
  color:#fff;
  font-size:10px;font-weight:700;
  min-width:17px;height:17px;
  border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;
}

.sidebar-footer{
  border-top:1px solid var(--border-soft);
  padding:12px;
  flex-shrink:0;
}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--amber-dim);
  color:var(--amber-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  flex-shrink:0;
}
.u-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.logout-btn{
  width:100%;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-faint);
  border-radius:var(--radius-sm);
  font-size:12px;
  padding:7px 10px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:color .13s,border-color .13s,background .13s;
}
.logout-btn:hover{color:var(--red-bright);border-color:rgba(181,80,74,.4);background:rgba(181,80,74,.08);}

.sidebar-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:105;
}

/* --- Zone principale --- */
.main{
  margin-left:calc(var(--rail-w) + var(--sidebar-w));
  min-height:100vh;
}
.topbar{
  position:sticky;top:0;
  height:var(--topbar-h);
  background:rgba(19,18,16,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  gap:16px;
  z-index:90;
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.breadcrumb b{color:var(--text);font-weight:500;}

.content{padding:28px 24px 90px;max-width:1240px;}

/* Pages */
.page-section{display:none;}
.page-section.show{display:block;animation:fade .18s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* =====================================================================
   SECTIONS ET CARTES
   ===================================================================== */
.panel{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:18px;
}
.panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.panel-head h3{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
  line-height:1.35;
}
.panel-head .sub{font-size:12.5px;color:var(--text-dim);margin-top:3px;line-height:1.5;font-weight:400;}

/* En-tête de section façon DraftBot : titre + description + interrupteur */
.section-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:19px;font-weight:600;color:var(--text);
  line-height:1.3;
}
.section-head p{font-size:13px;color:var(--text-dim);line-height:1.6;margin-top:5px;max-width:640px;}
.section-sep{height:1px;background:var(--border-soft);margin:28px 0;}

/* Deux colonnes : réglages à gauche, aperçu à droite */
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.setting-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}

.synth-card{
  background:var(--panel-alt);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:14px 16px;
}

/* Grille d'indicateurs */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.kpi-card{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:16px 18px;
}
.kpi-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:7px;
  line-height:1.4;
}
.kpi-card .value{
  font-family:var(--font-display);
  font-size:26px;font-weight:600;color:var(--text);
  line-height:1.1;
}
.kpi-delta{font-size:11.5px;margin-top:6px;color:var(--text-faint);line-height:1.5;}
.kpi-delta.up{color:var(--green-bright);}
.kpi-delta.down{color:var(--red-bright);}

/* Cartes de modules (page Journaux) et de détections (Auto-modération) */
.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:14px;
}
.module-card{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:14px;
  display:flex;flex-direction:column;gap:11px;
  transition:border-color .13s,opacity .13s;
}
.module-card.off{opacity:.62;}
.module-card:hover{border-color:var(--border-strong);}
.module-card-head{display:flex;align-items:flex-start;gap:11px;flex:1;}
.module-card-icon{
  width:34px;height:34px;border-radius:50%;
  background:var(--panel-raised);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);flex-shrink:0;font-size:15px;
}
.module-card-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35;}
.module-card-desc{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin-top:3px;}
.module-card-foot{display:flex;gap:8px;align-items:center;margin-top:auto;}
.module-card-foot select{flex:1;min-width:0;}

/* =====================================================================
   TABLEAUX
   ===================================================================== */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px;}
.table-wrap th{
  text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);
  padding:10px 14px;
  background:var(--panel-alt);
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.table-wrap td{
  padding:11px 14px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-dim);
  vertical-align:middle;
}
.table-wrap tr:last-child td{border-bottom:none;}
.table-wrap tbody tr:hover td{background:var(--panel-alt);}
.table-wrap td b,.table-wrap td strong{color:var(--text);font-weight:600;}

/* =====================================================================
   PASTILLES
   ===================================================================== */
.status-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--text-dim);
  background:var(--panel-alt);
  white-space:nowrap;
}
.status-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.status-chip.ok{color:var(--green-bright);border-color:rgba(111,191,139,.35);background:rgba(78,157,105,.1);}
.status-chip.warn{color:var(--amber-bright);border-color:rgba(232,164,79,.35);background:var(--amber-ghost);}
.status-chip.stop{color:var(--red-bright);border-color:rgba(181,80,74,.35);background:rgba(181,80,74,.1);}

.p-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--panel-raised);
  border:1px solid var(--border);
  color:var(--text-dim);
  white-space:nowrap;
}
.role-badge{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  padding:2px 8px;border-radius:999px;
  background:var(--panel-raised);
  border:1px solid var(--border);
  color:var(--text-dim);
  text-transform:uppercase;
}
.role-badge.sm{font-size:9.5px;padding:1px 7px;}
.role-badge.gov{color:var(--amber-bright);border-color:rgba(232,164,79,.35);background:var(--amber-ghost);}

/* Puce de rôle avec pastille de couleur, façon DraftBot */
.chip-list{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  background:var(--panel-alt);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 10px;min-height:42px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;
  padding:3px 9px;border-radius:999px;
  background:var(--panel-raised);border:1px solid var(--border-strong);
  color:var(--text);
}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;}
.chip-x{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:0 0 0 2px;font-size:13px;line-height:1;}
.chip-x:hover{color:var(--red-bright);}
.chip-add{
  width:24px;height:24px;border-radius:50%;
  background:var(--panel-raised);border:1px solid var(--border-strong);
  color:var(--text-dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
}
.chip-add:hover{color:var(--amber);border-color:var(--amber-dim);}

/* =====================================================================
   APERÇU D'UN MESSAGE DISCORD
   ===================================================================== */
.dsc-preview{
  background:#232427;
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.5;
  color:#dbdee1;
}
.dsc-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.dsc-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--panel-raised);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.dsc-avatar img{width:100%;height:100%;object-fit:cover;}
.dsc-name{font-size:14px;font-weight:600;color:#f2f3f5;}
.dsc-badge{
  background:#5865f2;color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.03em;
  padding:1px 4px;border-radius:3px;text-transform:uppercase;
}
.dsc-time{font-size:11px;color:#949ba4;}
.dsc-mention{
  background:rgba(88,101,242,.3);color:#c9cdfb;
  padding:0 2px;border-radius:3px;
}
.dsc-var{
  background:#2b2d31;color:#c9ccd1;
  font-family:var(--font-mono);font-size:11.5px;
  padding:1px 4px;border-radius:3px;
}
.dsc-embed{
  border-left:4px solid var(--amber);
  background:#2b2d31;
  border-radius:4px;
  padding:12px 14px;
  margin-top:6px;
}
.dsc-embed-title{font-size:14px;font-weight:600;color:#f2f3f5;margin-bottom:5px;}
.dsc-embed-desc{font-size:13px;color:#dbdee1;line-height:1.5;}
.dsc-embed-field{margin-top:8px;}
.dsc-embed-field b{display:block;font-size:13px;color:#f2f3f5;}
.dsc-embed-field span{font-size:13px;color:#dbdee1;}
.dsc-embed-foot{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:#949ba4;margin-top:9px;
}
.dsc-banner{
  margin-top:8px;
  border-radius:5px;
  overflow:hidden;
  background:linear-gradient(120deg,#1f1d1a,#2a2621);
  border:1px solid var(--border);
  padding:22px 18px;
  display:flex;align-items:center;gap:16px;
}
.dsc-banner-avatar{
  width:74px;height:74px;border-radius:50%;
  background:var(--panel-raised);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.dsc-banner-avatar img{width:100%;height:100%;object-fit:cover;}
.dsc-banner-text .big{
  font-family:var(--font-display);
  font-size:30px;font-weight:600;color:#e8e2d8;line-height:1.05;
  letter-spacing:-.02em;
}
.dsc-banner-text .small{font-size:13px;color:#a9a297;margin-top:3px;line-height:1.4;}
.dsc-banner-text .srv{font-family:var(--font-display);font-size:19px;color:#d6cfc3;line-height:1.2;}
.preview-label{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px;
}

/* =====================================================================
   BANDEAU « MODIFICATIONS NON ENREGISTRÉES »
   ===================================================================== */
.unsaved-bar{
  position:fixed;
  left:calc(var(--rail-w) + var(--sidebar-w) + 24px);
  right:24px;bottom:20px;
  background:var(--panel-raised);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:12px 14px 12px 18px;
  display:none;
  align-items:center;justify-content:space-between;
  gap:14px;
  z-index:95;
  max-width:1216px;
}
.unsaved-bar.show{display:flex;}
.unsaved-bar .txt{font-size:13px;color:var(--text);font-weight:500;}
.unsaved-bar .acts{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.unsaved-bar .btn-primary,.unsaved-bar .btn-ghost{width:auto;padding:8px 18px;}
.unsaved-bar .btn-ghost{border-color:transparent;}

/* =====================================================================
   MODALES
   ===================================================================== */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(3px);
  z-index:200;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open,
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:24px;
  width:100%;max-width:460px;
  max-height:88vh;overflow-y:auto;
  position:relative;
}
.modal-box h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:10px;}
.modal-close{
  position:absolute;right:14px;top:14px;
  background:none;border:none;color:var(--text-faint);
  cursor:pointer;font-size:18px;line-height:1;
  padding:5px;border-radius:6px;
}
.modal-close:hover{color:var(--text);background:var(--panel-raised);}

/* =====================================================================
   NAVIGATION BASSE (mobile)
   ===================================================================== */
.bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;
  background:var(--panel);
  border-top:1px solid var(--border-soft);
  z-index:100;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}

/* =====================================================================
   ADAPTATIF
   ===================================================================== */
@media (max-width:1180px){
  .grid-2col,.setting-grid{grid-template-columns:1fr;gap:20px;}
}
@media (max-width:1024px){
  .sidebar{
    left:0;
    transform:translateX(-100%);
    transition:transform .2s ease;
    width:min(84vw,300px);
  }
  .sidebar.open{transform:none;}
  .sidebar-backdrop.open,
  .sidebar-backdrop.show{display:block;}
  .guild-rail{transform:translateX(-100%);transition:transform .2s ease;}
  .guild-rail.open{transform:none;}
  .main{margin-left:0;}
  .mobile-menu-btn{display:inline-flex;}
  .unsaved-bar{left:16px;right:16px;}
}
@media (max-width:720px){
  .content{padding:20px 16px 96px;}
  .topbar{padding:0 16px;}
  .page-title{font-size:22px;}
  .field-row,.field-row-3{grid-template-columns:1fr;}
  .module-grid{grid-template-columns:1fr;}
  .unsaved-bar{flex-direction:column;align-items:stretch;gap:10px;}
  .unsaved-bar .acts{justify-content:flex-end;}

  /* Tableaux transformés en cartes : chaque cellule porte son intitulé
     dans data-label, comme dans l'ancienne feuille. */
  .responsive-card-table thead{display:none;}
  .responsive-card-table tbody tr{
    display:block;
    background:var(--panel-alt);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    padding:10px 12px;
    margin-bottom:10px;
  }
  .responsive-card-table tbody td{
    display:flex;justify-content:space-between;gap:14px;
    padding:5px 0;border:none;
    font-size:12.5px;
  }
  .responsive-card-table tbody td::before{
    content:attr(data-label);
    font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-faint);
    flex-shrink:0;
  }
  .responsive-card-table tbody tr:hover td{background:transparent;}
}