/* =========================================================
   Fichier : ade_style.css
   Version : v2.6.8
   Date    : 2026-10-18
   Description : Charte graphique officielle ADE (themes clair/sombre, degrade directionnel, responsive)
   Auteur  : L'Antre des Enfers - Projet Web
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=Rajdhani:wght@500;600&family=Poppins:wght@300;400;600&display=swap');

/* ================= VARIABLES GLOBALES ================= */
:root {
  --bg: #000;
  --text: #E6E9FF;
  --accent1: #00B2FF;
  --accent2: #00E6B8;
  --accent3: #F58727;
  --gold: #FFC300;
  --container-w: 1300px;
}

/* ================= RESET DE BASE ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  width: 100%;
  transition: background 0.4s ease, color 0.4s ease;
  overflow-x: clip; /* plus strict que hidden, empêche tout pixel de dépassement */
}

/* Calque d'arrière-plan animé */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1s ease, filter 1s ease;
  overflow: hidden;
}

/* ================= HEADER ================= */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(8px);
  padding: 14px 20px;
  display: flex;
  justify-content: center;
  z-index: 11000;
  transition: all 0.3s ease;
}

/* HEADER COMPACT */
.site-header--compact {
  padding: 2px 16px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  transform: translateY(-2px);
}
.site-header--compact .nav__logo { width: 40px; height: 40px; transform: translateY(1px); }
.site-header--compact .nav__title { font-size: 0.95rem; filter: brightness(0.9); }

/* NAV */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(var(--container-w), 94vw);
}

/* Marque (logo + titre) — version desktop de base */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav__logo {
  width: 60px;
  height: 60px;
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}
.nav__title {
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(90deg, var(--accent1), var(--accent3), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.1rem;
  transition: font-size 0.3s ease, filter 0.3s ease;
}

/* Liens de navigation */
.nav__links { display: flex; gap: 16px; }
.nav__link {
  position: relative;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--accent1), var(--accent3), var(--gold), var(--accent1));
  background-size: 0% 30px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s ease, text-shadow 0.3s ease;
  font-size: 20px;
}
.nav__link:visited { color: #fff; }
.nav__link:hover { background-size: 100% 3px; text-shadow: 0 0 6px var(--accent1), 0 0 10px var(--accent3); }

/* Actions droite */
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.nav__actions { display: flex; gap: 12px; align-items: center; }
.nav__actions img { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(0, 178, 255, 0.4)); }
.nav__actions > a { width:42px; height:42px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border:2px solid var(--accent1); border-radius:50%; }
.menu-toggle { display: none; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--text); }

/* ================= BOUTONS (Header & divers) ================= */
.btn-toggle-theme {
  border: 2px solid var(--accent1);
  border-radius: 50%;
  background: none;
  color: var(--accent1);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-account-help {
  width:42px; height:42px; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--accent1); border-radius:50%; background:rgba(0,0,0,.38); color:var(--accent1);
  font:700 1.1rem 'Rajdhani',sans-serif; cursor:pointer;
}
.btn-account-help:hover { background:var(--accent1); color:#111; }
.btn-account-help:focus-visible, .account-help-dismiss:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.btn-tribe-chat-envelope[hidden] { display:none; }
.btn-tribe-chat-envelope {
  position:relative; width:42px; height:42px; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border:2px solid #858e98; border-radius:50%; background:rgba(0,0,0,.38); color:#858e98; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-tribe-chat-envelope.has-unread { color:var(--accent1); border-color:var(--accent1); box-shadow:0 0 10px rgba(0,178,255,.32); }
.btn-tribe-chat-envelope:hover { transform:translateY(-1px); }
.btn-tribe-chat-envelope:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.btn-tribe-chat-envelope__icon { font-size:23px; line-height:1; }
.btn-tribe-chat-envelope__count {
  position:absolute; top:-6px; right:-7px; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; border-radius:999px; background:#e74c3c; color:#fff;
  font:700 11px/1 'Rajdhani',sans-serif; box-shadow:0 0 0 2px #101820;
}
.btn-tribe-chat-envelope__count[hidden] { display:none; }
.icon-sun, .icon-moon { opacity: 0; position: absolute; transition: opacity 0.3s ease; }
.icon-sun.active, .icon-moon.active { opacity: 1; }
.btn-account {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .25);
  color: var(--text); text-decoration: none;
}

/* ================= SECTIONS ================= */
.section {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 74px 20px 52px;
  text-align: center;
  z-index: 1;
  overflow: hidden;
}

#accueil {
  padding-top: 118px;
  padding-bottom: 44px;
}

#serveurs {
  padding-top: 64px;
  padding-bottom: 54px;
}

#reglement {
  padding-top: 64px;
  padding-bottom: 260px;
}

.news-toggle { display: none; }

/* ================= TYPO ================= */
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  background: linear-gradient(90deg, #00d9ff 0%, #f2a33a 62%, #ffd866 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 9px rgba(0, 178, 255, 0.55));
  text-shadow: none;
  transition: text-shadow 0.4s ease, filter 0.4s ease;
}
p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 20px; }
.section > .container > p {
  color: #f2f6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* ================= BOUTONS GÉNÉRAUX ================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 10px;
  font-family: 'Rajdhani', sans-serif; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s ease;
}
.btn-primary { background: linear-gradient(90deg, var(--accent1), var(--accent3)); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--accent2); color: var(--accent2); }

/* ================= FOOTER ================= */
.fixed-footer {
  position: fixed; bottom: 0; width: 100%;
  background: rgba(0, 0, 0, 0.4); color: var(--text);
  padding: 10px 0; font-size: 1.2rem; z-index: 999;
  backdrop-filter: blur(8px);
  transition: padding 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease, transform 0.3s ease;
}
.fixed-footer--compact {
  padding: 4px 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}
.foot {
  width: min(var(--container-w), 94vw);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  justify-content: center;
  text-align: center;  
  gap: 0 14px;
  transition: gap 0.3s ease;
}
.foot__center { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.foot__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; color: var(--text); text-decoration: none; font-size: 1.1rem; transition: color 0.3s ease, text-shadow 0.3s ease; }
.foot__link:hover { color: var(--accent1); text-shadow: 0 0 6px var(--accent1); }
.foot__socials {
  position: absolute;
  right: 14%;              /* même retrait que les icônes du header */
  bottom: 10px;             /* légèrement au-dessus du bord */
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
}
.social-icon img { width: 24px; height: 24px; opacity: 0.8; transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; }
.social-icon img:hover { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 6px var(--accent1)); }
.foot__views { width: 100%; text-align: center; font-size: 0.82rem; margin-top: 6px; color: #fff; opacity: 0.92; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.3px; }
.foot__copy { width: 100%; text-align: center; font-size: 0.8rem; margin-top: 4px; color: #fff; opacity: 0.9; }
.foot__links a,
.foot__links a:visited { color: var(--accent1); text-decoration: none; }
.foot__links a:hover { color: var(--accent3); text-shadow: 0 0 6px var(--accent3); }
.fixed-footer--compact .foot {
  flex-wrap: nowrap;
  gap: 6px 18px;
}
.fixed-footer--compact .foot__links {
  gap: 10px;
  font-size: 0.95rem;
}
.fixed-footer--compact .foot__socials {
  position: static;
  order: 3;
  gap: 8px;
}
.fixed-footer--compact .social-icon img,
.fixed-footer--compact .social-btn img {
  width: 20px;
  height: 20px;
}
.fixed-footer--compact .foot__views,
.fixed-footer--compact .foot__copy {
  width: auto;
  margin-top: 0;
  font-size: 0.76rem;
  white-space: nowrap;
}

/* ================= THEME LIGHT / DARK MASK ================= */
body.dark {
  background: linear-gradient(to right, #008B8B 0%, transparent 60%);
  color: #111; --text: #111; --bg: #FFFFFF;
}
body.light {
  background: linear-gradient(to right, #50C878 0%, transparent 60%);
  color: #E6E9FF; --text: #E6E9FF; --bg: #000;
}

/* Cartes news selon theme */
body.light .news-card { background: rgba(255, 255, 255, 0.9); color: #111; box-shadow: 0 0 8px rgba(0,0,0,0.15); border-color: rgba(0,0,0,0.2); }
body.light .news-card h3 { color: #000; }
body.dark .news-card,
body.dark .news-card * { color: #E6E9FF !important; }
body.dark  .news-card { background: rgba(0, 0, 0, 0.55); color: var(--text); }

/* Lisibilité titre + logo selon thème */
body.dark h1 {
  text-shadow: none;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 9px rgba(0, 178, 255, 0.55))
    brightness(1.08);
}
body.light h1 { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); filter: brightness(0.9); }
body.dark .nav__title { text-shadow: 0 0 8px rgba(0, 178, 255, 0.6); filter: brightness(1.2); }
body.light .nav__title { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); filter: brightness(0.9); }

/* Transition d'image de fond */
body::before, body::after {
  content: ""; position: fixed; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
  z-index: -1; opacity: 0; transition: opacity 1.2s ease-in-out, transform 3s ease;
}
body::after { transform: scale(1.05); }
body { background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }

/* ================= MODALE MARKDOWN ================= */
.modal {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.65); z-index: 9999; opacity: 0; transition: opacity 0.5s ease;
}
.hidden { display: none !important; }
.modal.hidden { display: none; }
.modal.visible { opacity: 1; }
.modal-content {
  position: relative; width: 90%; max-width: 800px; max-height: 70vh; overflow-y: auto;
  padding: 24px 30px; border-radius: 14px; margin-top: 60px;
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.35s ease, opacity 0.35s ease, background 0.3s ease, color 0.3s ease;
  box-shadow: 0 0 20px rgba(0,178,255,0.5); font-family: 'Poppins', sans-serif; opacity: 0;
}
.modal.visible .modal-content { transform: scale(1) translateY(0); opacity: 1; }
body.dark .modal-content  { background: rgba(15, 20, 25, 0.95); color: #E6E9FF; }
body.light .modal-content { background: rgba(255,255,255,0.96); color: #111; box-shadow: 0 0 18px rgba(0,230,184,0.4); }
.modal-close { position: absolute; top: 10px; right: 20px; background: none; border: none; color: var(--accent1); font-size: 28px; cursor: pointer; transition: transform 0.2s ease; }
.modal-close:hover { transform: scale(1.15); }
.modal-content > .modal-close { position:sticky; top:-1px; z-index:20; display:block; width:max-content; margin:-24px -30px 8px auto; padding:4px 10px; background:rgba(15,20,25,.98); border-radius:0 0 0 10px; }
body.light .modal-content > .modal-close { background:rgba(255,255,255,.98); }
#feature-modal .account-feature-box { position:relative; display:flex; flex-direction:column; max-height:70vh; overflow:hidden; }
.feature-modal-header { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; width:calc(100% + 60px); box-sizing:border-box; margin:-24px -30px 12px; padding:12px 54px 10px 30px; background:rgba(15,20,25,.98); border-bottom:1px solid rgba(0,208,255,.28); }
.feature-modal-header h2 { min-width:0; margin:0; padding-right:8px; color:var(--accent1); }
.feature-modal-header .modal-close { position:absolute; top:50%; right:18px; flex:0 0 auto; padding:0 4px; border:0; background:transparent; color:var(--accent1); font-size:28px; line-height:1; transform:translateY(-50%); }
.feature-modal-header .modal-close:hover { transform:translateY(-50%) scale(1.15); }
#feature-modal #feature-content { min-height:0; flex:1 1 auto; overflow:auto; }
body.light .feature-modal-header { background:rgba(255,255,255,.98); border-bottom-color:rgba(0,116,159,.25); }

/* ================= BLOCS CONTENUS ================= */
/* Accueil */
/* ================= NEWS GRID AUTO-CENTREE ================= */
.cluster-status-panel {
  width: min(1180px, 100%);
  margin: 0 auto 24px;
}

.cluster-status-panel h2 {
  margin: 0 0 12px;
  color: var(--accent1);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cluster-status-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.discord-community-panel {
  margin-top: 26px;
}

.discord-community-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 12px;
}

.discord-community-heading h2 {
  margin: 0;
}

.cluster-status-card {
  display: flex;
  flex: 0 0 calc((100% - 36px) / 4);
  min-height: 108px;
  padding: 14px 10px;
  border: 1px solid rgba(0, 178, 255, .35);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(0, 31, 56, .88), rgba(0, 12, 25, .94));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.cluster-status-card__name {
  color: var(--text-light, #eaf7ff);
  font-family: 'Orbitron', sans-serif;
  font-size: .76rem;
  letter-spacing: .03em;
}

.cluster-status-card__count {
  margin-top: 6px;
  color: var(--gold, #ffc300);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  line-height: 1;
}

.cluster-status-card__label {
  margin-top: 5px;
  color: rgba(234, 247, 255, .78);
  font-size: .8rem;
}

.cluster-status-card.is-unavailable {
  border-color: rgba(245, 135, 39, .55);
}

.cluster-status-card.is-unavailable .cluster-status-card__count,
.cluster-status-card.is-unavailable .cluster-status-card__label {
  color: var(--accent3, #f58727);
}

body.light .cluster-status-card {
  border-color: rgba(0, 112, 176, .25);
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(229, 243, 250, .96));
  box-shadow: 0 8px 24px rgba(0, 65, 105, .1);
}

body.light .cluster-status-card__name {
  color: #123047;
}

body.light .cluster-status-card__count {
  color: #0070b0;
}

body.light .cluster-status-card__label {
  color: #456274;
}

body.light .cluster-status-card.is-unavailable .cluster-status-card__count,
body.light .cluster-status-card.is-unavailable .cluster-status-card__label {
  color: #b75d0b;
}

.news-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 22px; max-width: 1330px; margin: 0 auto; }
.news-card { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 0 0 400px; width: 400px; max-width: 100%; height: 315px; overflow: hidden; background: rgba(0,0,0,0.35); border: 2px solid transparent; border-image: linear-gradient(90deg, var(--accent1), var(--accent3)) 1; border-radius: 14px; padding: 20px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.news-card:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(0,178,255,0.4); }
.news-card__content { min-height: 0; overflow: hidden; }
.news-card.is-overflowing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.86));
  pointer-events: none;
}
.news-card__more {
  position: relative;
  width: 100%;
  margin-top: 10px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--accent1);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0, 178, 255, .92), rgba(245, 135, 39, .92));
  color: #071015;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
body.dark .news-card__more,
body.light .news-card__more {
  color: #071015 !important;
}
.news-card.is-overflowing .news-card__more { display: inline-flex; }
.news-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.news-modal.visible {
  opacity: 1;
  pointer-events: auto;
}
.news-modal__dialog {
  position: relative;
  width: min(920px, 94vw);
  max-height: min(82vh, 760px);
  overflow: auto;
  padding: 32px 36px;
  border: 1px solid rgba(0, 178, 255, .45);
  border-radius: 14px;
  background: rgba(5, 10, 14, .96);
  box-shadow: 0 0 32px rgba(0, 178, 255, .25);
  color: #f2f6ff;
  text-align: left;
}
.news-modal__dialog h1,
.news-modal__dialog h2,
.news-modal__dialog h3 { margin-bottom: 18px; }
.news-modal__dialog p,
.news-modal__dialog li {
  max-width: none;
  color: #f2f6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.news-modal__close {
  position: absolute;
  top: 10px;
  right: 18px;
  border: 0;
  background: transparent;
  color: var(--accent1);
  cursor: pointer;
  font-size: 28px;
}

/* Serveurs (onglets) */
.tabs { display: flex; justify-content: center; gap: 10px; margin: 20px 0; }
.tab-btn { background: transparent; border: 2px solid var(--accent1); color: var(--accent1); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; transition: all 0.3s ease; }
.tab-btn:hover, .tab-btn.active { background: linear-gradient(90deg, var(--accent1), var(--accent3)); color: #fff; }
.tab-content { max-width: 900px; margin: 0 auto; text-align: left; line-height: 1.6; background: rgba(0,0,0,0.35); border-radius: 12px; padding: 20px 30px; box-shadow: 0 0 15px rgba(0,178,255,0.3); }

/* Règlement (cartes) */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 30px; }
.rule-card { background: rgba(0,0,0,0.3); border-radius: 14px; padding: 20px; border: 2px solid transparent; transition: all 0.3s ease; cursor: pointer; text-align: left; }
.rule-card:hover { border-image: linear-gradient(90deg, var(--accent1), var(--accent3)) 1; box-shadow: 0 0 20px rgba(0,230,184,0.3); transform: translateY(-6px); }

/* Rendu Markdown Serveurs */
#serveurs-content{
  width:min(1100px, 94vw); max-width:1100px; box-sizing:border-box;
  font-size:.95rem; line-height:1.6; margin:0 auto; padding:24px 32px; text-align:left;
  background:rgba(0,0,0,.45); border-radius:14px; box-shadow:0 0 0 1px rgba(0,178,255,.15) inset;
  max-height:calc(85vh - 200px); overflow-y:auto; transition:opacity .3s ease;
}
body.dark #serveurs-content,
body.dark #serveurs-content p,
body.dark #serveurs-content li,
body.dark #serveurs-content strong,
body.dark #serveurs-content b {
  color: #f2f6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
#serveurs-content::-webkit-scrollbar{ width:6px; }
#serveurs-content::-webkit-scrollbar-thumb{ background:var(--accent1); border-radius:3px; }
#serveurs-content{ scrollbar-width:thin; scrollbar-color:var(--accent1) transparent; }
#serveurs-content.loading{ opacity:.35; pointer-events:none; }
#serveurs-content h1, #serveurs-content h2, #serveurs-content h3{
  margin:14px 0 18px;
  font-family:'Orbitron',sans-serif;
  line-height:1.35;
  letter-spacing:0;
  background:none;
  -webkit-background-clip:initial;
  -webkit-text-fill-color:currentColor;
  color:var(--accent1);
  text-shadow:0 0 8px rgba(0,178,255,.55), 0 2px 4px rgba(0,0,0,.95);
}
#serveurs-content h1{ font-size:1.45rem; font-weight:700; }
#serveurs-content h2{ font-size:1.2rem; font-weight:700; margin-top:28px; }
#serveurs-content h3{ font-size:1.05rem; font-weight:700; margin-top:22px; }
#serveurs-content h1 strong,
#serveurs-content h1 b,
#serveurs-content h2 strong,
#serveurs-content h2 b,
#serveurs-content h3 strong,
#serveurs-content h3 b {
  color:inherit !important;
  font:inherit;
  text-shadow:inherit;
}
#serveurs-content strong,
#serveurs-content b {
  color:#f2f6ff !important;
  font-weight:600;
  text-shadow:0 0 4px rgba(0,0,0,0.7);
}
#serveurs-content ul,
#serveurs-content ol {
  margin-left: 1.5rem;
  padding-left: 0.5rem;
  list-style: disc;
}
#serveurs-content li{
  margin:4px 0;
  font-family:'Poppins', sans-serif !important;
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
  color:#f2f6ff !important;
  text-shadow:0 0 4px rgba(0,0,0,0.7);
}
#serveurs-content li::marker{
  color:var(--accent3);
  text-shadow:0 0 6px rgba(255,120,0,0.6);
}
#serveurs-content a{
  display:inline-block; text-decoration:none; font-weight:600; color:var(--accent1);
  padding:6px 14px; margin:3px 6px; border:1px solid var(--accent1); border-radius:10px;
  background:rgba(0,0,0,.30); box-shadow:0 0 8px rgba(0,178,255,.28);
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
#serveurs-content a:hover{ background:linear-gradient(90deg,var(--accent1),var(--accent3)); color:#fff; box-shadow:0 0 12px var(--accent3); transform:translateY(-2px); }
#serveurs-content code{
  background:none;
  padding:0;
  border-radius:0;
  font-family:'Poppins', sans-serif;
  font-size:1rem;
  color:#f2f6ff;
}
#serveurs-content hr{ border:0; height:1px; background:linear-gradient(90deg,var(--accent1),var(--accent3),transparent); margin:10px 0; opacity:.5; }
body.light #serveurs-content{ background:rgba(255,255,255,.82); color:#111; }
body.light #serveurs-content li {
  color:#222 !important;
  text-shadow:none;
}
body.light #serveurs-content h1,
body.light #serveurs-content h2,
body.light #serveurs-content h3 {
  color:var(--accent1);
  text-shadow:0 0 3px rgba(0,0,0,0.25);
}
body.light #serveurs-content strong,
body.light #serveurs-content b,
body.light #serveurs-content code {
  color:#222 !important;
  text-shadow:none;
}
body.light #serveurs-content a{ background:rgba(255,255,255,.65); border-color:var(--accent2); color:#000; box-shadow:0 0 8px rgba(0,230,184,.28); }
body.light #serveurs-content a:hover{ background:linear-gradient(90deg,var(--accent2),var(--accent3)); color:#fff; box-shadow:0 0 10px var(--accent3); }
body.light .markdown-box { background: rgba(255, 255, 255, 0.85); color: #000; box-shadow: 0 0 4px rgba(0,0,0,0.15); border-color: rgba(0,0,0,0.2); }
body.light .markdown-box strong { color: #000; }
body.dark  .markdown-box { background: rgba(0, 0, 0, 0.65); color: var(--text); }
/* modale taille cohérente */
.modal-content{ max-width:1100px; font-size:.95rem; line-height:1.35; }
.account-feature-box { width:min(96vw,1100px); max-width:1100px; }
.account-feature-box:has(.users-overview) { width:calc(100vw - 32px); max-width:none; box-sizing:border-box; }
.account-feature-box > .modal-close { z-index:5; }
.account-feature-box.feature-modal--loading { min-height:220px; overflow:hidden; }
.feature-loading {
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  padding:24px;
  border-radius:14px;
  background:rgba(15,20,25,.92);
}
body.light .feature-loading { background:rgba(255,255,255,.94); }
/* aligner labels */
#serveurs-content p {
  display:block;
  max-width:none;
  margin:4px 0 20px;
  font-family:'Poppins', sans-serif;
  font-size:1rem;
  line-height:1.7;
}
#serveurs-content p b { display:inline-block; min-width:70px; }

/* ================= BOUTONS FLOTTANTS (réseaux) ================= */
.social-buttons {
  position: fixed; bottom: 25px; right: 25px; display: flex; flex-direction: line; gap: 12px; z-index: 9999;
}
.social-btn {
  width: 35px; height: 35px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px);
  border: 2px solid var(--accent1); transition: all 0.3s ease;
  text-decoration: none; color: var(--text); box-shadow: 0 0 8px rgba(0,178,255,0.25);
}
.social-btn img { width: 28px; height: 28px; filter: drop-shadow(0 0 6px rgba(0,178,255,0.4)); transition: transform 0.25s ease, filter 0.25s ease; }
.social-btn:hover { transform: scale(1.1); box-shadow: 0 0 14px var(--accent1); }
.social-btn:hover img { filter: drop-shadow(0 0 10px var(--accent3)); }
.social-btn.discord { border-color: var(--accent1); }
.social-btn.youtube  { border-color: var(--accent1); }
.social-btn.paypal   { border-color: var(--accent1); }
.social-btn.account  { border-color: var(--accent1); font-size: 24px; }

/* =========================================================
   SECTION REGLEMENT — Flammes fluides et naturelles
   ========================================================= */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
  perspective: 1000px;
}

.rule-card {
  position: relative;
  background: rgba(10, 10, 10, 0.55);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: left;
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 0 12px rgba(255, 80, 0, 0.25);
  transition: all 0.5s ease;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}
.rule-card:nth-child(2) { animation-delay: 0.2s; }
.rule-card:nth-child(3) { animation-delay: 0.4s; }

/* === Couche de chaleur === */
.rule-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 90%, rgba(255,120,0,0.2), transparent 70%);
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.8s ease, transform 1.2s ease;
  z-index: 0;
}
.rule-card:hover::before {
  opacity: 0.9;
  transform: scale(1);
}

/* === Flammes principales === */
.rule-card::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  height: 130%;
  opacity: 0;
  background: conic-gradient(
    from 180deg,
    rgba(255, 80, 0, 0.8),
    rgba(255, 140, 0, 0.7),
    rgba(255, 200, 0, 0.4),
    rgba(255, 50, 0, 0.6),
    rgba(255, 90, 0, 0.8)
  );
  filter: blur(28px);
  mix-blend-mode: screen;
  transition: opacity 0.8s ease;
  animation: flameFlow 2.8s infinite ease-in-out alternate;
  z-index: 1;
}
.rule-card:hover::after {
  opacity: 1;
}

/* === Survol général === */
.rule-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 25px rgba(255, 120, 0, 0.7), 0 0 40px rgba(255, 160, 0, 0.4);
}

/* === Titres === */
.rule-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent1), var(--accent3), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 3;
}
.rule-card h3::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent3), transparent);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.rule-card:hover h3::after {
  width: 100%;
}

.rule-card p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  z-index: 3;
  position: relative;
}

/* === Animations === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flammes chaotiques — plus organiques */
@keyframes flameFlow {
  0%   { transform: translateY(0) scaleY(1) rotate(0deg); filter: hue-rotate(0deg) blur(28px); }
  25%  { transform: translateY(-6%) scaleY(1.05) rotate(2deg); filter: hue-rotate(10deg) blur(30px); }
  50%  { transform: translateY(-12%) scaleY(1.1) rotate(-1deg); filter: hue-rotate(-5deg) blur(26px); }
  75%  { transform: translateY(-8%) scaleY(1.08) rotate(3deg); filter: hue-rotate(8deg) blur(29px); }
  100% { transform: translateY(-14%) scaleY(1.15) rotate(-2deg); filter: hue-rotate(0deg) blur(28px); }
}

/* =========================================================
   RESPONSIVE UNIQUE — (max-width: 850px), (max-height: 768px)
   (regroupe tous les anciens @media)
   ========================================================= */
@media (max-width: 850px), (max-height: 768px) {
  .cluster-status-card {
    flex-basis: calc((100% - 12px) / 2);
  }

  /* NAV globale */
  .nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }

  /* Burger visible */
  .menu-toggle {
    display: block; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--accent1); margin-left: 10px;
  }

  /* Panneau menu déroulant (ne traverse plus) */
  .nav__links {
    position: absolute; top: 65px; right: 15px;
    display: none; flex-direction: column; align-items: flex-end;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 12px; padding: 10px 18px;
    width: auto; max-width: 220px; gap: 10px;
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.25); z-index: 9999;
  }
  .nav__links.show { display: flex; }
  .nav__links a { color: #fff; text-align: right; font-size: 0.95rem; padding: 6px 0; text-decoration: none; width: 100%; }
  .nav__links a:hover { color: var(--gold); text-shadow: 0 0 6px var(--accent3); }

  /* Icônes/Actions droites */
  .nav__actions { flex-direction: row !important; justify-content: flex-end !important; align-items: center; gap: 8px; margin-right: 10px; }
  .nav__actions a img, .nav__actions img { width: 32px; height: 32px; }
  .btn-toggle-theme, .btn-account, .btn-account-help, .btn-tribe-chat-envelope { font-size: 18px; }
  .btn-account { width: 32px; height: 32px; font-size: 20px; }

  /* Marque : logo + titre sur 2 lignes à droite du logo (ton correctif) */
  .nav__brand {
    display: flex; flex-direction: row; align-items: flex-start;
    max-width: 130px; line-height: 1.1; gap: 6px;
  }
  .nav__title {
    display: block; word-break: break-word; font-size: 14px; white-space: normal; margin-top: 2px;
  }
  .nav__logo { width: 48px; height: 48px; flex-shrink: 0; }

  /* Sections / titres */
  .section { padding: 60px 16px; }
  h1 { font-size: 1rem; word-break: break-word; }

  /* Tabs empilés */
  .tabs { flex-direction: column; align-items: stretch; }
  .tab-btn { width: 100%; text-align: center; }

  /* Footer */
  .foot { flex-direction: column; align-items: center; text-align: center; }
  .foot__center { flex-direction: column; gap: 6px; }
  .foot__links { flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }
  .foot__socials { position: static; justify-content: center; gap: 12px; margin-bottom: 5px; padding-bottom: 5px; }
  .foot__link { color: var(--accent2); font-size: 0.85rem; }
  .foot__views { text-align: center; font-size: 11px; color: #fff; opacity: 0.9; }
  .foot__copy { text-align: center; font-size: 11px; color: #fff; opacity: 0.85; }
  .fixed-footer--compact .foot { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .fixed-footer--compact .foot__links { margin-bottom: 0; font-size: 12px; }
  .fixed-footer--compact .foot__views,
  .fixed-footer--compact .foot__copy { font-size: 10px; }

  /* Boutons flottants */
  .social-buttons { right: 15px; bottom: 15px; gap: 10px; }
  .social-btn img { width: 15px; height: 15px; }
  
  .news-toggle {
    display: block; width: 100%; margin: 12px 0; padding: 10px 14px;
    font-size: 1rem; color: var(--accent1);
    background: rgba(0,0,0,.5); border: 1px solid var(--accent1);
    border-radius: 8px; cursor: pointer; text-transform: uppercase; text-align: center;
  }
  .news-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .news-grid:not(.active) .news-card { display: none; }
  .news-grid:not(.active) .news-card:first-child { display: block; } /* 1ʳᵉ visible */
  .news-grid.active .news-card { display: block; }
  }
  .rule-card { text-align: center; padding: 20px; }
  .rule-card h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
}



/* === SECTION REGLEMENT (ONGLETS + FLAMMES) — v2.3.0 === */
#reglement {
  position: relative;
  padding-top: 80px;
  padding-bottom: 260px;
  text-align: center;
}

.reglement-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px auto;
  max-width: 1000px;
  transition: all 0.3s ease;
}

.tab-btn {
  background: rgba(0,0,0,0.4);
  border: 2px solid var(--accent1);
  color: var(--accent1);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.tab-btn:hover,
.tab-btn.active {
  background: linear-gradient(90deg, var(--accent1), var(--accent3));
  color: #fff;
  box-shadow: 0 0 10px rgba(0,178,255,0.4);
}

#reglement-content {
  width: min(1100px, 94vw);
  max-width: 1100px;
  box-sizing: border-box;
  margin: 25px auto 0;
  text-align: left;
  line-height: 1.6;
  background: rgba(0,0,0,0.45);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 0 15px rgba(0,178,255,0.3);
  transition: opacity 0.3s ease;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}
#reglement-content h1,
#reglement-content h2,
#reglement-content h3 {
  margin: 14px 0 18px;
  font-family: 'Orbitron', sans-serif;
  line-height: 1.35;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--accent1);
  text-shadow: 0 0 8px rgba(0,178,255,.55), 0 2px 4px rgba(0,0,0,.95);
}
#reglement-content h1 { font-size: 1.45rem; font-weight: 700; }
#reglement-content h2 { font-size: 1.2rem; font-weight: 700; margin-top: 28px; }
#reglement-content h3 { font-size: 1.05rem; font-weight: 700; margin-top: 22px; }
#reglement-content p {
  display: block;
  max-width: none;
  margin: 4px 0 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
body.dark #reglement-content,
body.dark #reglement-content p,
body.dark #reglement-content li,
body.dark #reglement-content strong,
body.dark #reglement-content b {
  color: #f2f6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
#reglement-content.loading { opacity: 0.3; pointer-events: none; }
body.light #reglement-content {
  background: rgba(255,255,255,0.9);
  color: #E6E9FF;
  box-shadow: 0 0 10px rgba(0,230,184,0.25);
}

/* === Flammes fluides === */
#reglement-content::after {
  display: none;
}

/* Animation des flammes */
@keyframes flameFlow {
  0%   { transform: translateY(0) scaleY(1) rotate(0deg); filter: hue-rotate(0deg) blur(36px); }
  25%  { transform: translateY(-6%) scaleY(1.05) rotate(2deg); filter: hue-rotate(10deg) blur(38px); }
  50%  { transform: translateY(-12%) scaleY(1.1) rotate(-1deg); filter: hue-rotate(-5deg) blur(34px); }
  75%  { transform: translateY(-8%) scaleY(1.08) rotate(3deg); filter: hue-rotate(8deg) blur(36px); }
  100% { transform: translateY(-14%) scaleY(1.15) rotate(-2deg); filter: hue-rotate(0deg) blur(36px); }
}

/* Menu hamburger mobile */
.tab-toggle {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--accent1);
  border-radius: 8px;
  color: var(--accent1);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  padding: 10px 14px;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 400px;
  margin: 0 auto;
}
.tab-toggle:hover { background: rgba(0,0,0,0.8); color: var(--gold); }

/* Responsive mobile */
@media (max-width: 850px) {
  .tab-toggle { display: block; margin-top: 12px; }
  .reglement-tabs { display: none; flex-direction: column; align-items: stretch; gap: 8px; }
  .reglement-tabs.active {
    display: flex;
    background: rgba(0,0,0,0.85);
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,178,255,0.3);
  }
  .reglement-tabs .tab-btn { width: 100%; text-align: center; font-size: 0.95rem; }
  #reglement-content { padding: 18px 20px; font-size: 0.9rem; }
}

/* Apparition fluide */
@keyframes fadeInReglement {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
#reglement-content { animation: fadeInReglement 0.6s ease forwards; }

/* === Règlement : conteneur scrollable interne === */
#reglement-content {
  /* hauteur max en desktop : ~70% de la fenêtre */
  max-height: min(70vh, calc(100dvh - 250px));
  overflow: auto;
  overscroll-behavior: contain;   /* pas de rebond sur la page */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  background: rgba(0, 0, 0, 0.7) !important; /* fond plus opaque */
  color: #E6E9FF !important;                 /* texte clair */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);   /* légère ombre */  
}


body.light #reglement-content {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #333 !important;
  font-weight: 600;
  text-shadow: none;
}

/* Variante mobile : prend (hauteur écran - header - footer - marges) */
@media (max-width: 850px) {
  #reglement-content {
    /* ajuste  var(--hdr) / var(--ftr) si besoin */
    --hdr: 72px;      /* hauteur approx. de .site-header */
    --ftr: 48px;      /* hauteur approx. du footer */
    --marg: 24px;     /* marge visuelle */
    max-height: calc(100dvh - var(--hdr) - var(--ftr) - var(--marg));
  }
  #reglement-content::after {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
  }  
}

/* Optionnel : onglets collants pour rester visibles pendant le scroll du contenu */
.reglement-tabs {
  position: sticky;
  top: calc( var(--hdr,72px) + 12px );
  z-index: 2;
}

/* Le fond “flammes” reste sous le texte et ne capte pas les clics */
#reglement-content::after {
  pointer-events: none;
  z-index: 0;
}
#reglement-content > * { position: relative; z-index: 1; }

/* Scrollbar (facultatif) */
#reglement-content::-webkit-scrollbar { width: 10px; }
#reglement-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); border-radius: 10px; }
#reglement-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent1), var(--accent3)); border-radius: 10px; }
#reglement-content { scrollbar-width: thin; scrollbar-color: var(--accent3) rgba(0,0,0,0.25); }

/* === Correctif spécifique aux listes du règlement === */
#reglement-content ul,
#reglement-content ol {
  margin-left: 1.5rem;
  padding-left: 0.5rem;
  list-style: disc;
}

#reglement-content li {
  font-family: 'Poppins', sans-serif !important; /* uniforme avec le reste */
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
}

body.light #reglement-content li {
  color: #222;
}

#reglement-content li::marker {
  color: var(--accent3);
}

/* === Amélioration de la lisibilité des listes dans le règlement === */
#reglement-content li {
  color: #f2f6ff !important;           /* texte clair lisible */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7); /* légère ombre pour contraste */
  line-height: 1.7;
}

/* Thème clair : couleur plus sombre */
body.light #reglement-content li {
  color: #222 !important;
  text-shadow: none;
}

/* Amélioration des puces */
#reglement-content li::marker {
  color: var(--accent3);
  text-shadow: 0 0 6px rgba(255, 120, 0, 0.6);
}

/* === Modale Connexion === */
.login-box {
  max-width: 400px;
  text-align: center;
}
.login-box h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--accent1), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.login-box input {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent1);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
}
.login-box .btn-primary {
  margin-top: 8px;
}
#profile-modal .login-box {
  max-width: 620px;
}
.profile-dialog { display:flex; flex-direction:column; max-height:70vh; overflow:hidden; }
.profile-modal-header { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; width:calc(100% + 60px); box-sizing:border-box; margin:-24px -30px 12px; padding:12px 54px 10px 30px; background:rgba(15,20,25,.98); border-bottom:1px solid rgba(0,208,255,.28); }
.profile-modal-header h2 { min-width:0; margin:0; padding-right:8px; color:var(--accent1); background:none; -webkit-text-fill-color:initial; }
.profile-modal-header .modal-close { position:absolute; top:50%; right:18px; padding:0 4px; border:0; background:transparent; color:var(--accent1); font-size:28px; line-height:1; transform:translateY(-50%); }
.profile-modal-header .modal-close:hover { transform:translateY(-50%) scale(1.15); }
.profile-modal-body { min-height:0; flex:1 1 auto; overflow:auto; padding-right:4px; }
body.light .profile-modal-header { background:rgba(255,255,255,.98); border-bottom-color:rgba(0,116,159,.25); }
.account-association-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(0, 178, 255, .48);
  border-radius: 10px;
  background: rgba(0, 178, 255, .06);
  text-align: left;
}
.account-association-panel h3 {
  margin: 0 0 8px;
  color: var(--accent1);
  font-size: 1.05rem;
}
.account-association-panel p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .84);
  line-height: 1.45;
}
.ark-association-actions,
.ark-association-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ark-association-actions .btn-primary,
.ark-association-code-row .btn-primary {
  margin-top: 0;
}
.ark-association-code {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(0, 208, 255, .55);
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
  text-align: center;
}
.ark-association-code code {
  color: #fff;
  font: 700 1.5rem/1.3 ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
  overflow-wrap: anywhere;
}
.ark-association-code small,
.account-association-panel > small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
}
@media (max-width: 600px) {
  #profile-modal .login-box { max-width: 94vw; }
  .ark-association-code-row { flex-direction: column; }
}
.login-loading-box {
  display:grid;
  justify-items:center;
  gap:10px;
  max-width:360px;
  text-align:center;
}
.login-loading-box h2 {
  margin:0;
  font-family:'Orbitron', sans-serif;
  font-size:1.25rem;
  color:var(--accent1);
}
.login-loading-box p { margin:0; color:rgba(255,255,255,.78); }
.login-loading-spinner {
  width:42px;
  height:42px;
  border:4px solid rgba(0,208,255,.22);
  border-top-color:var(--accent1);
  border-right-color:var(--accent3);
  border-radius:50%;
  animation:ade-login-spin .8s linear infinite;
}
@keyframes ade-login-spin { to { transform:rotate(360deg); } }
.token-dialog p { margin:0 0 16px; color:rgba(255,255,255,.8); line-height:1.45; }
.token-dialog label { color:var(--accent1); font-weight:700; text-align:left; }
.token-dialog input { width:100%; box-sizing:border-box; }
.login-links {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
.login-links a {
  color: var(--accent1);
  text-decoration: none;
}
.login-links a:hover {
  color: var(--gold);
}

/* Compte ADE : point d'entrée d'authentification et menu de session. */
.account-slot { display:inline-flex; align-items:center; }
.btn-account {
  width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; border:2px solid var(--accent1); border-radius:50%; cursor:pointer;
  color:var(--gold); background:rgba(0,0,0,.38); font:600 .88rem 'Rajdhani', sans-serif; overflow:hidden;
  text-transform:uppercase;
}
.btn-account:hover { background:linear-gradient(90deg,var(--accent3),var(--gold)); color:#111; }
.account-wrapper { position:relative; }
.account-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:220px; z-index:11010; padding:8px; border:1px solid var(--accent1); border-radius:10px; background:#101820; box-shadow:0 0 18px rgba(0,178,255,.45); }
.account-menu.hidden { display:none; }
.account-menu a,.account-menu button { display:block; width:100%; border:0; background:transparent; color:#fff; padding:10px 12px; text-align:left; text-decoration:none; font:600 1rem 'Rajdhani', sans-serif; cursor:pointer; }
.account-menu a:hover,.account-menu button:hover { color:#111; background:var(--accent1); }
.account-page { width:min(1100px,94vw); margin:0 auto; padding:120px 0 160px; color:#fff; }
.account-welcome { margin:0 0 22px; color:#fff; text-align:center; text-shadow:0 0 10px rgba(0,178,255,.7); }
.account-card { width:100%; box-sizing:border-box; text-align:center; padding:28px; border:1px solid rgba(0,178,255,.65); border-radius:14px; background:rgba(3,12,18,.78); box-shadow:0 0 22px rgba(0,178,255,.24); }
.account-help-card { margin:0 0 18px; text-align:left; }
.account-help-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; }
.account-help-dismiss {
  flex:0 0 34px; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent1); border-radius:50%; background:rgba(0,0,0,.38); color:var(--accent1);
  font:600 1.5rem/1 'Rajdhani',sans-serif; cursor:pointer;
}
.account-help-dismiss:hover { background:var(--accent1); color:#111; }
.account-help-card h2 { margin:0; color:var(--accent1); text-align:left; }
.account-help-card ul { display:grid; gap:9px; margin:0; padding-left:22px; line-height:1.5; }
.account-help-card li { padding-left:3px; }
.account-help-card strong { color:var(--accent1); }
.charon-rate-help { width:100%; max-width:none; margin:-8px auto 18px; color:rgba(255,255,255,.78); font-size:.95rem; text-align:center; }
.tribe-chat-card { text-align:left; }
.tribe-chat-card > h2 { margin:0 0 8px; color:var(--accent1); text-align:center; }
.tribe-chat-card > p { width:100%; max-width:none; margin:0 auto 16px; text-align:center; }
.account-card h1,.account-card h2,.account-card p,.account-card span,.account-card strong,.account-card th,.account-card td { color:#fff; }
.account-card h1 { margin:0 0 24px; }
#player-name:not(:empty)::before { content:" "; }
.charon-account-card { position:relative; }
.charon-support-button { position:absolute; top:14px; right:16px; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:5px 12px; border:1px solid var(--accent1); border-radius:8px; color:var(--accent1); font-weight:700; text-decoration:none; }
.charon-support-button:hover { box-shadow:0 0 12px var(--accent1); }
.charon-summary { display:flex; justify-content:center; align-items:baseline; gap:10px; margin:0 0 20px; padding:0 125px; font:600 1.15rem 'Rajdhani',sans-serif; }
.charon-summary strong { color:var(--gold); font-size:1.35rem; }
@media (max-width: 600px) { .charon-summary { padding:42px 0 0; } .charon-support-button { top:12px; right:12px; } }
#charons-history[hidden] { display:none; }
.table-scroll { overflow-x:auto; }
.sortable-table thead th[tabindex="0"] { cursor:pointer; user-select:none; }
.sortable-table thead th[tabindex="0"]::after { content:"↕"; margin-left:7px; opacity:.55; }
.sortable-table thead th[tabindex="0"][aria-sort="ascending"]::after { content:"↑"; opacity:1; }
.sortable-table thead th[tabindex="0"][aria-sort="descending"]::after { content:"↓"; opacity:1; }
.sortable-table thead th[tabindex="0"]:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
#charons-table { width:100%; border-collapse:collapse; color:#fff; }
#charons-table caption { caption-side:top; padding:0 0 12px; color:#fff; font:600 1.2rem 'Rajdhani',sans-serif; }
#charons-table th,#charons-table td { padding:12px; border-bottom:1px solid rgba(255,255,255,.22); text-align:left; }
#charons-table th { color:var(--accent1); }
#charons-table .credit { color:#54df8f; font-weight:700; }
#charons-table .debit { color:#ff7878; font-weight:700; }
#security-logs-table { width:100%; border-collapse:collapse; color:#fff; }
#security-logs-table th,#security-logs-table td { padding:10px; border-bottom:1px solid rgba(255,255,255,.2); text-align:left; }
#security-logs-table th { color:var(--accent1); }
.staff-message-history-scroll { width:100%; max-width:100%; overflow-x:auto; }
.staff-message-history-table { width:100%; min-width:1040px; table-layout:fixed; border-collapse:collapse; color:#fff; }
.staff-message-history-table th,.staff-message-history-table td { padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.2); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.staff-message-history-table th { color:var(--accent1); white-space:normal; }
.staff-message-history-table th:nth-child(1),.staff-message-history-table td:nth-child(1) { width:15%; }
.staff-message-history-table th:nth-child(2),.staff-message-history-table td:nth-child(2) { width:15%; }
.staff-message-history-table th:nth-child(3),.staff-message-history-table td:nth-child(3) { width:31%; }
.staff-message-history-table th:nth-child(4),.staff-message-history-table td:nth-child(4) { width:13%; }
.staff-message-history-table th:nth-child(5),.staff-message-history-table td:nth-child(5) { width:13%; }
.staff-message-history-table th:nth-child(6),.staff-message-history-table td:nth-child(6) { width:8%; }
.staff-message-history-table th:nth-child(7),.staff-message-history-table td:nth-child(7) { width:5%; }
.staff-message-history-message { min-width:320px; white-space:pre-wrap; }
.staff-message-history-actions { min-width:72px; white-space:nowrap; text-align:center !important; }
body.light .staff-message-history-table { color:#17212b; }
body.light .staff-message-history-table th,body.light .staff-message-history-table td { border-bottom-color:rgba(23,33,43,.2); }
.account-modules { margin:0; }
.account-module { color:#fff; border:1px solid rgba(0,178,255,.65); border-radius:12px; padding:20px; background:rgba(3,12,18,.82); text-align:center; }
.account-module h2,.account-module p { color:#fff; }
.tribe-chat-module { display:grid; gap:12px; min-width:0; text-align:left; }
.tribe-chat-module label { color:var(--accent1); font-weight:700; }
.tribe-chat-selector { width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:9px 12px; color:rgba(255,255,255,.72); background:#0b151d; border:1px solid var(--accent1); border-radius:9px; font:inherit; }
.tribe-chat-selector:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.tribe-chat-selector--unread { color:#ff3eb5 !important; font-weight:700; }
.tribe-chat-selector option { color:rgba(255,255,255,.72); background:#101820; }
.tribe-chat-selector option.tribe-chat-option--unread { color:#ff3eb5; font-weight:700; }
.tribe-chat-status { min-height:1.35em; margin:0; color:rgba(255,255,255,.72); }
.tribe-chat-messages { display:grid; gap:9px; min-width:0; max-height:52vh; overflow-y:auto; padding:2px; }
.tribe-chat-message { min-width:0; padding:11px 13px; border:1px solid rgba(0,178,255,.35); border-radius:9px; background:rgba(255,255,255,.05); }
.tribe-chat-message__meta { margin:0 0 5px; color:var(--accent1); font:600 .86rem 'Rajdhani',sans-serif; overflow-wrap:anywhere; }
.tribe-chat-message__body { margin:0; color:#fff; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.tribe-chat-empty { margin:0; color:rgba(255,255,255,.72); }
.tribe-chat-more { justify-self:center; }
.tribe-chat-compose { display:grid; gap:10px; margin-top:4px; padding:14px; border:1px solid rgba(0,178,255,.38); border-radius:10px; background:rgba(0,0,0,.2); }
.tribe-chat-compose[hidden] { display:none; }
.tribe-chat-compose h3 { margin:0; color:var(--accent1); }
.tribe-chat-compose__hint { width:100%; max-width:none; margin:0; color:rgba(255,255,255,.72); white-space:nowrap; }
@media (max-width:680px) { .tribe-chat-compose__hint { white-space:normal; } }
.tribe-chat-send-form { display:grid; gap:8px; }
.tribe-chat-message-input { width:100%; min-width:0; box-sizing:border-box; padding:10px 12px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:9px; font:inherit; resize:vertical; }
.tribe-chat-message-input:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.tribe-chat-message-input:disabled { opacity:.6; }
.tribe-chat-send-form .btn { justify-self:end; min-height:42px; margin-top:4px; }
.tribe-chat-send-status { margin:0; }
.tribe-chat-table-scroll { max-width:100%; max-height:52vh; overflow:auto; }
.tribe-chat-table { width:100%; min-width:620px; border-collapse:collapse; }
.tribe-chat-table th, .tribe-chat-table td { padding:9px 10px; border:1px solid rgba(0,178,255,.28); vertical-align:top; overflow-wrap:anywhere; }
.tribe-chat-table th { color:var(--accent1); background:rgba(0,178,255,.1); text-align:left; }
.tribe-chat-table td { color:#fff; background:rgba(255,255,255,.035); }
.admin-supervision-table.tribe-chat-table { min-width:620px; }
.tribe-chat-table td:last-child, .ark-chat-table td:last-child { white-space:pre-wrap; }
.tribe-chat-pagination, .ark-chat-pagination { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.tribe-chat-pagination .btn:disabled, .ark-chat-pagination .btn:disabled { opacity:.5; cursor:not-allowed; }
.ark-chat-page-select-label { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.8); }
.ark-chat-page-select { min-height:40px; max-width:150px; box-sizing:border-box; padding:7px 10px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.ark-chat-page-select:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
body.light .ark-chat-page-select-label { color:rgba(23,33,43,.8); }
body.light .ark-chat-page-select { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
.ark-chat-filter-field { display:grid; gap:5px; min-width:min(100%, 220px); }
.ark-chat-filter-field input { width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.ark-chat-filter-field input:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.ark-chat-pagination-info { color:rgba(255,255,255,.72); }
.ark-chat-composer { display:grid; gap:8px; margin-top:18px; padding:16px; background:rgba(0,0,0,.22); border:1px solid rgba(0,191,255,.38); border-radius:10px; }
.ark-chat-composer[hidden] { display:none; }
.ark-chat-composer h3, .ark-chat-composer p { margin:0; }
.ark-chat-composer h3 { color:var(--accent1); font-size:1.05rem; }
.ark-chat-composer-target, .ark-chat-composer-status { color:rgba(255,255,255,.76); }
.ark-chat-composer-row { display:grid; grid-template-columns:minmax(165px, .28fr) minmax(0, 1fr) auto; align-items:end; gap:8px; }
.ark-chat-composer-mode { display:grid; gap:4px; min-width:0; color:var(--accent1); font-weight:700; }
.ark-chat-composer-row select { min-width:165px; min-height:42px; box-sizing:border-box; padding:9px 12px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.ark-chat-composer-row select:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.ark-chat-composer-row input { width:100%; min-width:0; height:42px; min-height:42px; box-sizing:border-box; padding:9px 12px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.ark-chat-composer-row input:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.ark-chat-composer-row .btn { height:42px; min-height:42px; }
.ark-chat-composer-row .btn:disabled { opacity:.55; cursor:not-allowed; }
body.light .ark-chat-composer { background:rgba(255,255,255,.78); border-color:rgba(0,116,159,.4); }
body.light .ark-chat-composer-target, body.light .ark-chat-composer-status { color:rgba(23,33,43,.76); }
body.light .ark-chat-composer-row select { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .ark-chat-composer-row input { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .tribe-chat-table th { background:rgba(0,116,159,.1); }
body.light .tribe-chat-table th, body.light .tribe-chat-table td { border-color:rgba(0,116,159,.28); }
body.light .tribe-chat-table td { color:#17212b; background:rgba(255,255,255,.78); }
body.light .ark-chat-filter-field input { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .ark-chat-filter-field input:focus { border-color:#fff; }
body.light .ark-chat-pagination-info { color:rgba(23,33,43,.72); }
body.light .tribe-chat-selector { color:rgba(23,33,43,.72); background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .tribe-chat-selector--unread { color:#b00072 !important; }
body.light .tribe-chat-selector option { color:rgba(23,33,43,.72); background:#fff; }
body.light .tribe-chat-selector option.tribe-chat-option--unread { color:#b00072; }
body.light .tribe-chat-status, body.light .tribe-chat-empty { color:rgba(23,33,43,.72); }
body.light .tribe-chat-message { background:rgba(255,255,255,.78); border-color:rgba(0,116,159,.32); }
body.light .tribe-chat-message__body { color:#17212b; }
body.light .tribe-chat-compose { background:rgba(255,255,255,.72); border-color:rgba(0,116,159,.35); }
body.light .tribe-chat-compose__hint { color:rgba(23,33,43,.72); }
body.light .tribe-chat-message-input { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
.admin-supervision { display:grid; gap:12px; min-width:0; text-align:left; }
.admin-supervision-toolbar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.admin-supervision-toolbar label { color:var(--accent1); font-weight:700; }
.admin-supervision-toolbar select { min-width:min(100%, 420px); min-height:40px; box-sizing:border-box; padding:8px 10px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.admin-supervision-toolbar select:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.admin-supervision-toolbar select option { color:#fff; background:#101820; }
.admin-supervision-status { min-height:1.3em; margin:0; color:rgba(255,255,255,.72); }
.admin-supervision-table-scroll { max-width:100%; overflow:auto; }
.admin-supervision-table { width:100%; min-width:760px; border-collapse:collapse; }
.admin-supervision-table th, .admin-supervision-table td { padding:9px 10px; border:1px solid rgba(0,178,255,.28); vertical-align:top; overflow-wrap:anywhere; }
.admin-supervision-table th { color:var(--accent1); background:rgba(0,178,255,.1); text-align:left; }
.admin-supervision-table td { color:#fff; background:rgba(255,255,255,.035); }
.connected-player-actions { display:flex; gap:6px; flex-wrap:wrap; min-width:130px; }
.connected-player-action { padding:6px 10px; }
.admin-action-kick { color:#ffd08a; border-color:rgba(255,180,83,.7); }
.admin-action-kick:hover:not(:disabled) { color:#111; background:#ffb453; }
.admin-action-ban { color:#ff9d9d; border-color:rgba(231,76,60,.75); }
.admin-action-ban:hover:not(:disabled) { color:#fff; background:#c0392b; }
.connected-player-action:disabled, .admin-supervision-toolbar .btn:disabled { opacity:.6; cursor:wait; }
body.light .admin-supervision-toolbar select { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .admin-supervision-toolbar select option { color:#17212b; background:#fff; }
body.light .admin-supervision-status { color:rgba(23,33,43,.72); }
body.light .admin-supervision-table th { background:rgba(0,116,159,.1); }
body.light .admin-supervision-table th, body.light .admin-supervision-table td { border-color:rgba(0,116,159,.28); }
body.light .admin-supervision-table td { color:#17212b; background:rgba(255,255,255,.78); }
body.light .admin-action-kick { color:#985400; border-color:rgba(152,84,0,.55); }
body.light .admin-action-ban { color:#a1261d; border-color:rgba(161,38,29,.55); }
@media (max-width:680px) {
  .admin-supervision-toolbar { align-items:stretch; flex-direction:column; }
  .admin-supervision-toolbar select, .ark-chat-filter-field input { width:100%; min-width:0; }
  .ark-chat-composer-row { display:flex; align-items:stretch; flex-direction:column; }
  .ark-chat-composer-mode, .ark-chat-composer-row select { width:100%; min-width:0; }
  .ark-chat-composer-row .btn { width:100%; }
  .admin-supervision-table { min-width:700px; }
  .admin-supervision-table.tribe-chat-table { min-width:620px; }
}
.tribe-status-card { width:280px; box-sizing:border-box; align-self:start; padding:14px; color:#fff; background:rgba(3,12,18,.82); border:1px solid rgba(0,178,255,.65); border-radius:14px; box-shadow:0 0 18px rgba(0,178,255,.2); }
.tribe-status-card h2 { margin:0 0 10px; color:var(--accent1); font-size:1.1rem; text-align:center; }
.tribe-status-module { display:grid; gap:9px; min-width:0; }
.tribe-status-module label { color:var(--accent1); font-size:.88rem; font-weight:700; }
.tribe-status-selector { width:100%; min-width:0; min-height:38px; box-sizing:border-box; padding:7px 9px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.tribe-status-selector option { color:#fff; background:#101820; }
.tribe-status-message { min-height:1.2em; margin:0; color:rgba(255,255,255,.7); font-size:.82rem; }
.tribe-member-list { display:grid; gap:7px; min-width:0; }
.tribe-member-row { display:flex; align-items:flex-start; gap:8px; min-width:0; padding:8px 7px; border:1px solid rgba(0,178,255,.3); border-radius:8px; background:rgba(255,255,255,.05); }
.tribe-member-status-dot { width:9px; height:9px; flex:0 0 9px; margin-top:5px; border-radius:50%; }
.tribe-member-status-dot.is-online { background:#35e879; box-shadow:0 0 7px #35e879; }
.tribe-member-status-dot.is-offline { background:#c7cdd2; box-shadow:0 0 4px rgba(255,255,255,.35); }
.tribe-member-details { display:grid; min-width:0; gap:2px; }
.tribe-member-details strong, .tribe-member-details small { overflow-wrap:anywhere; }
.tribe-member-details strong { color:#fff; font-size:.9rem; }
.tribe-member-details small { color:rgba(255,255,255,.72); font-size:.75rem; line-height:1.25; }
.tribe-kick-button { width:100%; justify-content:center; margin-top:3px; border:1px solid rgba(255,180,83,.7); color:#ffd08a; background:rgba(3,12,18,.82); text-align:center; }
.tribe-kick-button:hover:not(:disabled) { color:#111; background:#ffb453; }
.tribe-kick-button:disabled { opacity:.6; cursor:wait; }
body.light .account-page { color:#17212b; }
body.light .account-welcome { color:#17212b; text-shadow:0 0 3px rgba(255,255,255,.8); }
body.light .account-page .account-card,
body.light .account-page .account-module,
body.light .account-page .server-summary-card,
body.light .account-page .online-users-card {
  color:#17212b;
  background:rgba(255,255,255,.88);
  border-color:rgba(0,116,159,.38);
  box-shadow:0 0 16px rgba(0,58,87,.12);
}
body.light .account-page .account-card h1,
body.light .account-page .account-card h2,
body.light .account-page .account-card p,
body.light .account-page .account-card span,
body.light .account-page .account-card strong,
body.light .account-page .account-card th,
body.light .account-page .account-card td,
body.light .account-page .account-module h2,
body.light .account-page .account-module p { color:#17212b; }
body.light .account-page .server-summary-updated,
body.light .account-page .online-user-row small,
body.light .account-page .rcon-service-actions small { color:rgba(23,33,43,.7); }
body.light .account-page .server-summary-counts span,
body.light .account-page .online-user-row { border-color:rgba(23,33,43,.16); }
body.light .account-page .server-summary-problematic { border-top-color:rgba(23,33,43,.16); }
body.light .account-page .server-summary-problematic span { border-bottom-color:rgba(23,33,43,.1); }
body.light .account-page .service-row { background:rgba(23,33,43,.06); }
body.light .account-page .service-actions button { color:#17212b; background:rgba(255,255,255,.86); border-color:rgba(0,116,159,.55); }
body.light .account-page .service-actions button:hover:not(:disabled) { color:#fff; background:#00749f; }
body.light .account-page .identity-sync-panel { border-top-color:rgba(0,116,159,.35); }
body.light .account-page .identity-sync-panel span { color:rgba(23,33,43,.78); }
body.light .account-page #charons-table,
body.light .account-page #security-logs-table { color:#17212b; }
body.light .account-page #charons-table th,
body.light .account-page #security-logs-table th { color:#00749f; }
body.light .account-page #charons-table th,
body.light .account-page #charons-table td,
body.light .account-page #security-logs-table th,
body.light .account-page #security-logs-table td { border-bottom-color:rgba(23,33,43,.18); }
body.light .account-page .charon-summary strong { color:#b17a00; }
body.light .tribe-status-card { color:#17212b; background:rgba(255,255,255,.88); border-color:rgba(0,116,159,.38); box-shadow:0 0 16px rgba(0,58,87,.12); }
body.light .tribe-status-selector { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .tribe-status-selector option { color:#17212b; background:#fff; }
body.light .tribe-status-message { color:rgba(23,33,43,.7); }
body.light .tribe-member-row { background:rgba(255,255,255,.78); border-color:rgba(0,116,159,.3); }
body.light .tribe-member-details strong { color:#17212b; }
body.light .tribe-member-details small { color:rgba(23,33,43,.72); }
body.light .tribe-kick-button { color:#985400; background:rgba(255,255,255,.92); border-color:rgba(152,84,0,.55); }
body.light .tribe-kick-button:hover:not(:disabled) { color:#111; background:#ffb453; }
.service-list { display:grid; gap:12px; }
.service-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:12px; border-radius:8px; background:rgba(255,255,255,.06); }
.service-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.service-actions button { border:1px solid var(--accent1); border-radius:6px; padding:6px 10px; color:#fff; background:#101820; font:600 .95rem 'Rajdhani',sans-serif; cursor:pointer; }
.service-actions button:hover:not(:disabled) { color:#111; background:var(--accent1); }
.service-actions button:disabled { opacity:.6; cursor:wait; }
.service-state { color:#54df8f; font-weight:700; }
.service-state.is-down { color:#ff7878; }
.service-state.is-running { color:#ffd21a; }
.service-reason { flex-basis:100%; color:rgba(255,255,255,.72); font-size:.82rem; text-align:right; }
.service-row > .service-reason { width:100%; }
.rcon-service-actions { display:grid; width:min(330px,100%); grid-template-columns:63px 80px 1fr; align-items:center; gap:8px; }
.rcon-service-actions .service-state { width:auto; grid-column:1; grid-row:1; justify-self:end; text-align:right; white-space:nowrap; }
.rcon-service-actions > button { grid-column:2; grid-row:1; }
.rcon-service-actions small { display:block; width:100%; grid-column:1 / -1; grid-row:2; color:rgba(255,255,255,.7); text-align:right; font-size:.82rem; }
.identity-sync-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-top:16px; padding:14px; border-top:1px solid rgba(0,178,255,.45); text-align:left; }
.identity-sync-copy { display:grid; gap:4px; min-width:0; }
.identity-sync-panel span { color:rgba(255,255,255,.8); }
.identity-sync-panel small { color:rgba(255,255,255,.65); }
.identity-sync-panel button { white-space:nowrap; }
.identity-sync-panel button.is-sync-success { border-color:#39d98a; color:#39d98a; }
.profile-photo-drop { display:grid; place-items:center; min-height:76px; box-sizing:border-box; padding:12px; border:1px dashed var(--accent1); border-radius:8px; color:#fff; text-align:center; cursor:pointer; }
.profile-photo-drop.is-dragover { background:rgba(0,178,255,.18); border-style:solid; }
.profile-photo-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.profile-photo-preview-wrap { display:grid; justify-items:center; gap:8px; margin:12px 0; overflow:hidden; }
.profile-photo-crop { position:relative; width:220px; aspect-ratio:1; overflow:hidden; border-radius:50%; background:#080d12; }
.profile-photo-crop img { width:100%; height:100%; object-fit:cover; transition:transform .15s ease; }
.profile-photo-crop span { position:absolute; inset:0; border:2px solid var(--accent1); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); pointer-events:none; }
.profile-photo-preview-wrap input { width:180px; }

/* Éditeur des informations du site : panneau Markdown lisible et cohérent. */
.content-editor { display:grid; gap:14px; color:#fff; }
.content-editor > p { margin:0; color:rgba(255,255,255,.82); line-height:1.5; }
.content-editor label { color:var(--accent1); font-weight:700; }
.content-editor select { width:100%; min-height:44px; padding:0 12px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:9px; font:inherit; }
.content-editor textarea { width:100%; min-height:320px; box-sizing:border-box; resize:vertical; padding:15px; color:#f7fbff; background:#071018; border:1px solid rgba(0,208,255,.65); border-radius:10px; font:14px/1.55 ui-monospace,Consolas,monospace; }
.content-editor textarea:disabled { opacity:.55; cursor:not-allowed; }
.content-editor input:not([type="checkbox"]):not([type="radio"]), .content-editor select, #player-charons-form input, #player-charons-form select { box-sizing:border-box; min-height:44px; padding:9px 12px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:9px; font:inherit; }
.content-editor input::placeholder, #player-charons-form input::placeholder { color:rgba(255,255,255,.58); }
.content-editor input:focus, .content-editor select:focus, #player-charons-form input:focus, #player-charons-form select:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(0,191,255,.2); }
.rcon-config-editor { text-align:left; }
.rcon-config-table { width:100%; min-width:760px; border-collapse:collapse; color:#fff; }
.rcon-config-table th, .rcon-config-table td { padding:10px; border-bottom:1px solid rgba(255,255,255,.2); text-align:left; vertical-align:top; }
.rcon-config-table th { color:var(--accent1); white-space:nowrap; }
.rcon-config-table input { width:100%; min-width:120px; }
.rcon-config-table td:last-child { min-width:220px; }
.rcon-config-table small { display:block; margin-top:5px; color:rgba(255,255,255,.65); font-size:.8rem; }
.rcon-config-status { min-height:1.4em; margin:0; color:#54df8f; }
.rcon-config-status.is-error { color:#ff7878; }
body.light .rcon-config-editor { color:#17212b; }
body.light .rcon-config-editor > p { color:rgba(23,33,43,.78); }
body.light .rcon-config-table { color:#17212b; }
body.light .rcon-config-table th { color:#00749f; }
body.light .rcon-config-table th, body.light .rcon-config-table td { border-bottom-color:rgba(31,62,78,.2); }
body.light .rcon-config-table input { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .rcon-config-table input::placeholder { color:rgba(23,33,43,.55); }
body.light .rcon-config-table small { color:rgba(23,33,43,.62); }
#player-charons-form { display:grid; grid-template-columns:1fr; gap:9px; margin-top:24px; }
#player-charons-form label { display:block; margin:0; color:var(--accent1); font-weight:700; }
#player-charons-form .editor-actions { margin-top:14px; padding-top:6px; }
#accounting-form { display:grid; grid-template-columns:1fr; gap:9px; margin-top:18px; }
#accounting-form label { color:var(--accent1); font-weight:700; }
#accounting-form input, #accounting-form select { box-sizing:border-box; min-height:42px; padding:8px 11px; color:#fff; background:#0b151d; border:1px solid var(--accent1); border-radius:9px; font:inherit; }
.accounting-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 6px; }
.accounting-summary-card { min-width:0; padding:14px 16px; border:1px solid rgba(0,178,255,.42); border-radius:12px; background:linear-gradient(145deg,rgba(9,25,35,.95),rgba(3,12,18,.8)); box-shadow:0 6px 18px rgba(0,0,0,.16); text-align:center; }
.accounting-summary-label { display:block; margin-bottom:4px; color:rgba(255,255,255,.7); font:600 .82rem 'Rajdhani',sans-serif; letter-spacing:.55px; text-transform:uppercase; }
.accounting-summary-value { display:block; color:#f4f8ff; font:700 1.45rem 'Rajdhani',sans-serif; letter-spacing:.2px; }
.accounting-summary-card--credit { border-color:rgba(84,223,143,.55); }
.accounting-summary-card--credit .accounting-summary-value { color:#54df8f; }
.accounting-summary-card--debit { border-color:rgba(255,120,120,.55); }
.accounting-summary-card--debit .accounting-summary-value { color:#ff7878; }
.accounting-summary-card--balance { border-color:rgba(0,178,255,.62); }
.accounting-summary-card--balance .accounting-summary-value { color:var(--accent1); }
.accounting-summary-card--balance.accounting-summary-card--negative .accounting-summary-value { color:#ff7878; }
body.light .accounting-content { color:#17212b; }
body.light .accounting-content #security-logs-table { color:#17212b; }
body.light .accounting-content #security-logs-table th,
body.light .accounting-content #security-logs-table td { border-bottom-color:rgba(31,62,78,.2); }
body.light .accounting-content #security-logs-table th { color:#00749f; }
body.light .accounting-summary-card { background:rgba(255,255,255,.88); border-color:rgba(0,103,144,.24); box-shadow:0 5px 16px rgba(0,58,87,.1); }
body.light .accounting-summary-label { color:rgba(23,33,43,.68); }
body.light .accounting-summary-card--credit .accounting-summary-value { color:#0b8150; }
body.light .accounting-summary-card--debit .accounting-summary-value,
body.light .accounting-summary-card--balance.accounting-summary-card--negative .accounting-summary-value { color:#b42a38; }
body.light .accounting-summary-card--balance .accounting-summary-value { color:#006b8f; }
body.light .accounting-content #accounting-form input,
body.light .accounting-content #accounting-form select { color:#17212b; background:rgba(255,255,255,.94); border-color:rgba(0,116,159,.55); }
body.light .accounting-content #accounting-form input::placeholder { color:rgba(23,33,43,.55); }
@media (max-width:700px) { .accounting-summary { grid-template-columns:1fr; gap:9px; } .accounting-summary-card { padding:12px 14px; } .accounting-summary-value { font-size:1.3rem; } }
.icon-action { border:0; background:transparent; cursor:pointer; font-size:18px; margin:0 3px; }
.icon-action:hover { transform:scale(1.15); }
.charon-edit-modal { position:absolute; inset:0; z-index:20; display:grid; place-items:center; overflow-y:auto; padding:16px; box-sizing:border-box; background:rgba(0,0,0,.72); border-radius:10px; }
.charon-edit-dialog { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; width:min(430px,100%); min-width:0; max-height:90vh; overflow-y:auto; padding:22px; box-sizing:border-box; background:#101820; border:1px solid var(--accent1); border-radius:12px; box-shadow:0 0 22px rgba(0,208,255,.35); color:#fff; }
.charon-edit-dialog h2 { margin:0 0 5px; color:var(--accent1); text-align:center; }
.charon-edit-dialog label { color:var(--accent1); font-weight:700; }
.charon-edit-dialog input, .charon-edit-dialog select, .charon-edit-dialog > button:not(.modal-close) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.charon-edit-dialog input { min-height:40px; padding:8px 10px; color:#fff; background:#071018; border:1px solid var(--accent1); border-radius:8px; }
.charon-edit-dialog select { min-height:40px; }
.charon-edit-dialog .modal-close { position:sticky; top:-1px; z-index:20; justify-self:end; margin:-22px -22px 0 auto; padding:4px 8px; border:0; background:#101820; border-radius:0 0 0 10px; color:var(--accent1); font-size:26px; line-height:1; cursor:pointer; }
.staff-message-edit-modal { position:fixed; inset:0; z-index:10001; display:grid; place-items:center; overflow-y:auto; padding:18px; box-sizing:border-box; background:rgba(0,0,0,.72); }
.staff-message-edit-dialog { display:grid; gap:9px; width:min(560px,100%); max-height:90vh; overflow:auto; padding:22px; box-sizing:border-box; background:#101820; border:1px solid var(--accent1); border-radius:12px; box-shadow:0 0 22px rgba(0,208,255,.35); color:#fff; }
.staff-message-edit-header { position:sticky; top:-22px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-22px -22px 0; padding:15px 22px 10px; background:#101820; border-bottom:1px solid rgba(0,208,255,.28); }
.staff-message-edit-dialog h2 { margin:0; color:var(--accent1); text-align:left; }
.staff-message-edit-dialog label { color:var(--accent1); font-weight:700; }
.staff-message-edit-dialog textarea, .staff-message-edit-dialog input { width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; color:#fff; background:#071018; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.staff-message-edit-dialog textarea { min-height:150px; resize:vertical; }
.staff-message-edit-dialog .modal-close { position:static; flex:0 0 auto; border:0; background:transparent; color:var(--accent1); font-size:26px; line-height:1; cursor:pointer; }
.staff-message-edit-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:4px; }
.staff-message-edit-actions .btn { min-width:0; }
.staff-message-delete-from-edit { border:1px solid #ff6b78; color:#ff9aa3; background:transparent; }
.staff-message-delete-from-edit:hover { border-color:#ff9aa3; color:#fff; background:rgba(255,107,120,.16); }
body.light .staff-message-edit-dialog { background:#f8fbfd; color:#17212b; }
body.light .staff-message-edit-header { background:#f8fbfd; border-bottom-color:rgba(0,116,159,.25); }
body.light .staff-message-edit-dialog textarea, body.light .staff-message-edit-dialog input { color:#17212b; background:#fff; }
.user-actions { white-space:nowrap; }
.user-edit-modal { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:18px; box-sizing:border-box; background:rgba(0,0,0,.72); border-radius:10px; }
.user-edit-dialog { display:grid; gap:9px; width:min(560px,100%); max-height:90%; overflow:auto; padding:22px; box-sizing:border-box; background:#101820; border:1px solid var(--accent1); border-radius:12px; box-shadow:0 0 22px rgba(0,208,255,.35); color:#fff; }
.user-edit-dialog h2 { margin:0 0 5px; color:var(--accent1); text-align:center; }
.user-edit-dialog label { color:var(--accent1); font-weight:700; }
.user-edit-dialog input:not([type=checkbox]), .user-edit-dialog select { width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; color:#fff; background:#071018; border:1px solid var(--accent1); border-radius:8px; font:inherit; }
.user-edit-dialog select option { color:#fff; background:#101820; }
.user-edit-dialog .modal-close { position:sticky; top:-1px; z-index:20; justify-self:end; margin:-22px -22px 0 auto; padding:4px 8px; border:0; background:#101820; border-radius:0 0 0 10px; color:var(--accent1); font-size:26px; line-height:1; cursor:pointer; }
body.light .charon-edit-dialog .modal-close, body.light .user-edit-dialog .modal-close { background:#f8fbfd; }
.account-side-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; margin:0 auto 18px; align-items:start; }
.account-side-stack { display:grid; gap:18px; min-width:0; align-content:start; }
.account-main-column { display:grid; gap:18px; width:100%; min-width:0; align-content:start; }
.online-users-card { position:relative; z-index:2; top:auto; right:auto; left:auto; width:auto; max-height:390px; margin:0; padding:12px; box-sizing:border-box; color:#fff; background:rgba(3,12,18,.78); border:1px solid rgba(0,178,255,.65); border-radius:14px; box-shadow:0 0 22px rgba(0,178,255,.24); }
.online-users-card h2 { margin:0 0 5px; color:var(--accent1); font-size:16px; text-align:center; }
.online-users-card > strong { display:block; margin-bottom:9px; color:#ffd21a; font-size:25px; text-align:center; }
.online-users-card.has-scroll #online-users-list { max-height:270px; overflow-y:auto; padding-right:5px; }
.online-user-row { display:flex; align-items:center; gap:8px; min-height:30px; padding:4px 2px; border-bottom:1px solid rgba(255,255,255,.12); }
.online-user-row span:last-child { display:flex; min-width:0; flex-direction:column; gap:2px; }
.online-user-row strong { overflow-wrap:anywhere; }
.online-user-row small { color:rgba(255,255,255,.7); font-size:11px; }
.online-dot { width:9px; height:9px; flex:0 0 auto; background:#35e879; border-radius:50%; box-shadow:0 0 7px #35e879; }
.server-summary-card { position:relative; z-index:2; top:auto; right:auto; left:auto; width:auto; max-height:390px; margin:0; padding:12px; box-sizing:border-box; color:#fff; background:rgba(3,12,18,.78); border:1px solid rgba(0,178,255,.65); border-radius:14px; box-shadow:0 0 22px rgba(0,178,255,.24); }
.server-summary-card h2 { margin:0 0 7px; color:var(--accent1); font-size:16px; text-align:center; }
.server-summary-updated { margin:0 0 10px; color:rgba(255,255,255,.62); font-size:11px; text-align:center; }
.server-summary-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:12px; text-align:center; }
.server-summary-counts span { display:flex; min-width:0; flex-direction:column; gap:2px; padding:5px 2px; border-right:1px solid rgba(255,255,255,.14); }
.server-summary-counts span:last-child { border-right:0; }
.server-summary-counts strong { font-size:22px; line-height:1; }
.server-summary-counts span:nth-child(1) strong { color:#54df8f; }
.server-summary-counts span:nth-child(2) strong { color:#ff7878; }
.server-summary-counts span:nth-child(3) strong { color:#ffb35c; }
.server-summary-counts small { color:rgba(255,255,255,.75); font-size:10px; line-height:1.1; }
.server-summary-problematic { display:flex; max-height:215px; flex-direction:column; gap:4px; overflow-y:auto; padding-top:9px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; }
.server-summary-problematic strong { color:#ffb35c; font-size:12px; }
.server-summary-problematic span { padding:3px 0; color:#ff9b9b; border-bottom:1px solid rgba(255,255,255,.08); overflow-wrap:anywhere; }
.server-summary-problematic .server-summary-offline { color:#ff9b9b; }
.server-summary-problematic .server-summary-error { color:#ffb35c; }
.server-summary-problematic .server-summary-ok { color:#54df8f; border-bottom:0; }
/* À largeur intermédiaire, les trois panneaux supérieurs sont alignés et gardent la même hauteur. */
@media (min-width:681px) and (max-width:1727px) {
  .account-side-panels { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
  .account-side-stack { display:contents; }
  .account-side-stack > #server-summary-card,
  .account-side-stack > #tribe-status-card,
  .account-side-panels > #online-users-card { align-self:stretch; width:100%; max-height:none; min-width:0; }
}
/* Grand écran : les encarts retrouvent leurs colonnes latérales autour du contenu central. */
@media (min-width:1728px) {
  .account-page { display:grid; grid-template-columns:280px minmax(0,1100px) 280px; column-gap:18px; row-gap:18px; width:min(1716px,calc(100vw - 32px)); }
  .account-page > .account-welcome { grid-column:2; grid-row:1; }
  .account-page > .account-help-card { grid-column:2; grid-row:2; }
  .account-page > .account-main-column { grid-column:2; grid-row:3; }
  .account-page .account-side-stack { grid-column:1; grid-row:3; }
  .account-page #online-users-card { grid-column:3; grid-row:3; }
  .account-side-panels { display:contents; }
}
@media (max-width:680px) { .account-side-panels { grid-template-columns:1fr; gap:14px; } .account-side-stack, .account-main-column { gap:14px; } }
.editor-actions { display:flex; justify-content:flex-end; gap:10px; }
.editor-actions .btn { min-width:138px; }
.markdown-preview { max-height:280px; overflow:auto; padding:16px; border:1px solid rgba(0,208,255,.5); border-radius:10px; background:rgba(0,0,0,.28); color:#fff; }
.announcement-editor .field-help { color:rgba(255,255,255,.68); }
.announcement-select-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.announcement-select-row > div { min-width:0; }
#announcement-color.color-blue { color:#3498db; } #announcement-color.color-orange { color:#e67e22; } #announcement-color.color-red { color:#e74c3c; } #announcement-color.color-green { color:#2ecc71; } #announcement-color.color-purple { color:#9b59b6; }
.announcement-editor input[type="file"] { padding:10px; cursor:pointer; }
.announcement-image-name { margin:0; color:rgba(255,255,255,.72); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announcement-predefined-preview-wrap { display:flex; align-items:center; min-height:64px; }
.announcement-predefined-preview-wrap.hidden { display:none; }
.announcement-predefined-preview { width:64px; height:64px; object-fit:cover; border:1px solid rgba(0,208,255,.5); border-radius:8px; }
.announcement-status { margin:0; color:#8ff0c1; font-weight:700; }
.announcement-status.is-error { color:#ff9b9b; }
.announcement-preview { display:grid; gap:10px; max-height:360px; overflow:auto; padding:16px; border:1px solid rgba(0,208,255,.5); border-radius:10px; background:rgba(0,0,0,.28); color:#fff; }
.announcement-preview h3, .announcement-preview p { margin:0; }
.announcement-preview h3 { color:var(--accent1); }
.announcement-preview p { white-space:pre-wrap; line-height:1.5; }
.announcement-preview img { display:block; max-width:100%; max-height:260px; object-fit:contain; border-radius:8px; }
.discord-preview-message { display:grid; gap:8px; padding:12px; text-align:left; background:#313338; border-radius:8px; color:#dbdee1; }
.discord-preview-mention { color:#c9cdfb; font-size:.9rem; min-height:1.1em; }
.discord-preview-standalone-image { display:block; max-width:min(100%,520px); max-height:260px; object-fit:contain; border-radius:6px; }
.discord-preview-embed { position:relative; max-width:720px; padding:12px 14px; border-left:4px solid #3498db; border-radius:4px; background:#2b2d31; }
.discord-preview-embed-orange { border-left-color:#e67e22; } .discord-preview-embed-red { border-left-color:#e74c3c; } .discord-preview-embed-green { border-left-color:#2ecc71; } .discord-preview-embed-purple { border-left-color:#9b59b6; }
.discord-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.discord-preview-header h3 { margin:0; color:#fff; }
.discord-preview-embed p { margin:10px 0; white-space:pre-wrap; line-height:1.45; }
.discord-preview-embed small { color:#b5bac1; }
.discord-preview-thumbnail { width:64px; height:64px; flex:0 0 64px; object-fit:cover; border-radius:4px; }
@media (max-width:700px) { .content-editor textarea { min-height:240px; } .announcement-select-row { grid-template-columns:1fr; } .editor-actions { flex-direction:column; } .editor-actions .btn { width:100%; } }
.account-avatar { width:100%; height:100%; flex:0 0 100%; max-width:none; border-radius:50%; object-fit:cover; display:block; transform:scale(1.28); }
.staff-message-card { margin-bottom:22px; text-align:left; }
.staff-message-card h2 { margin:0 0 10px; color:var(--accent1); text-align:center; }
.staff-message-card .staff-message { margin:0; color:#fff; text-align:left; white-space:pre-wrap; }
.permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin:16px 0; text-align:left; }
.permission-grid label { color:#fff; }
.permission-tree { display:grid; gap:14px; margin:16px 0; text-align:left; }
.permission-tree fieldset { border:1px solid rgba(0,178,255,.45); border-radius:8px; padding:10px 14px; }
.permission-tree legend { color:var(--accent1); font:600 1rem 'Rajdhani',sans-serif; }
.permission-tree label { display:block; margin:6px 0; color:#fff; }
#group-form select,#group-form input:not([type=checkbox]),#user-form select,#user-form input:not([type=checkbox]) { width:100%; box-sizing:border-box; margin:6px 0; padding:10px 12px; border:1px solid var(--accent1); border-radius:7px; background:#101820; color:#fff; font:1rem 'Rajdhani',sans-serif; }
#group-form select option,#user-form select option { background:#101820; color:#fff; }
@media (max-width:680px) { .service-row { align-items:flex-start; flex-direction:column; } .service-actions { justify-content:flex-start; } .rcon-service-actions { display:flex; align-items:stretch; width:100%; flex-direction:column; } .rcon-service-actions .service-state { width:100%; justify-self:auto; } .rcon-service-actions > button { grid-column:auto; grid-row:auto; align-self:flex-start; } .rcon-service-actions small { grid-column:auto; grid-row:auto; text-align:left; } }
.account-feature-box { width:min(96vw,1100px); max-width:1100px; color:#fff; background:#101820; }
.account-feature-box h2,.account-feature-box p { color:#fff; }
#feature-modal .account-feature-box:has(#staff-message-history-table) { width:calc(100vw - 4cm); max-width:none; box-sizing:border-box; }
.server-status-module { width:100%; color:#fff; }
.server-status-updated { margin:0 0 18px; color:rgba(255,255,255,.78); }
.server-status-updated strong { color:#fff; font-weight:600; }
.server-cluster { margin-top:22px; padding-top:18px; border-top:1px solid rgba(0,178,255,.48); }
.server-cluster:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.server-cluster-heading { display:flex; align-items:center; justify-content:flex-start; gap:16px; margin-bottom:10px; }
.server-cluster h3 { margin:0; color:var(--accent1); font-size:1.15rem; letter-spacing:.04em; }
.cluster-maintenance-toggle { display:inline-flex; align-items:center; gap:8px; color:#ffd08a; font-size:.9rem; cursor:pointer; }
.cluster-maintenance-toggle input,.server-maintenance-cell input { width:18px; height:18px; accent-color:#e67e22; cursor:pointer; }
.cluster-maintenance-toggle input:disabled,.server-maintenance-cell input:disabled { cursor:not-allowed; opacity:.65; }
.server-status-table { width:100%; border-collapse:collapse; table-layout:fixed; color:#fff; }
.server-status-table th,.server-status-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.16); text-align:left; }
.server-status-table th { color:var(--accent1); font-weight:700; }
.server-status-table th:nth-child(1),.server-status-table td:nth-child(1) { width:58%; }
.server-status-table th:nth-child(2),.server-status-table td:nth-child(2) { width:24%; }
.server-status-table th:nth-child(3),.server-status-table td:nth-child(3) { width:18%; text-align:center; }
.server-status-table-maintenance { min-width:590px; }
.server-status-table-maintenance th:nth-child(1),.server-status-table-maintenance td:nth-child(1) { width:14%; text-align:center; }
.server-status-table-maintenance th:nth-child(2),.server-status-table-maintenance td:nth-child(2) { width:40%; }
.server-status-table-maintenance th:nth-child(3),.server-status-table-maintenance td:nth-child(3) { width:27%; text-align:left; }
.server-status-table-maintenance th:nth-child(4),.server-status-table-maintenance td:nth-child(4) { width:19%; text-align:center; }
.server-maintenance-cell { text-align:center !important; }
.server-maintenance-cell label { display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:30px; cursor:pointer; }
.server-name-cell { overflow-wrap:anywhere; }
.server-state-online { color:#54df8f !important; font-weight:700; }
.server-state-offline { color:#ff7878 !important; font-weight:700; }
.server-state-error { color:#ffb35c !important; font-weight:700; }
.server-state-maintenance { color:#ffd08a !important; font-weight:700; }
.users-overview { width:100%; min-width:0; color:#fff; }
.users-overview > p { margin:0 0 18px; color:rgba(255,255,255,.85); }
.users-overview > p strong { color:var(--gold); }
.users-overview table { width:100%; min-width:1500px; border-collapse:collapse; table-layout:fixed; color:#fff; }
.users-overview th,.users-overview td { padding:10px 9px; border-bottom:1px solid rgba(255,255,255,.16); text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.users-overview th { color:var(--accent1); font-weight:700; white-space:normal; }
.users-overview th:nth-child(1),.users-overview td:nth-child(1) { width:4%; }
.users-overview th:nth-child(2),.users-overview td:nth-child(2) { width:12%; }
.users-overview th:nth-child(3),.users-overview td:nth-child(3) { width:11%; }
.users-overview th:nth-child(4),.users-overview td:nth-child(4) { width:12%; }
.users-overview th:nth-child(5),.users-overview td:nth-child(5) { width:12%; }
.users-overview th:nth-child(6),.users-overview td:nth-child(6) { width:11%; }
.users-overview th:nth-child(7),.users-overview td:nth-child(7) { width:11%; }
.users-overview th:nth-child(8),.users-overview td:nth-child(8) { width:9%; }
.users-overview th:nth-child(9),.users-overview td:nth-child(9) { width:6%; }
.users-overview th:nth-child(10),.users-overview td:nth-child(10) { width:7%; }
.users-overview th:nth-child(11),.users-overview td:nth-child(11) { width:5%; }
@media (max-width:900px) { .users-overview table { min-width:900px; table-layout:auto; } .account-feature-box { width:96vw; max-width:1100px; } #feature-modal .account-feature-box:has(#staff-message-history-table) { width:calc(100vw - 24px); max-width:none; } }
@media (max-width:680px) { .server-cluster-heading { align-items:flex-start; flex-direction:column; gap:8px; } .cluster-maintenance-toggle { font-size:.84rem; } }

/* Correctifs mobiles de la page Compte : aucune colonne ne doit sortir de l'écran. */
@media (max-width:680px) {
  .site-header { padding:8px 10px; }
  .nav { width:100%; min-width:0; gap:6px; }
  .nav__brand { max-width:122px; min-width:0; gap:5px; }
  .nav__logo { width:40px; height:40px; }
  .nav__title { max-width:76px; font-size:12px; line-height:1; }
  .nav__right { min-width:0; gap:4px; }
  .nav__actions { gap:5px; margin-right:0; }
  .nav__actions > a, .btn-toggle-theme, .btn-account, .btn-account-help, .btn-tribe-chat-envelope { width:34px; height:34px; }
  .nav__actions a img, .nav__actions img { width:23px; height:23px; }
  .menu-toggle { margin-left:2px; padding:0; font-size:24px; }
  .nav__links { top:58px; right:10px; max-width:calc(100vw - 20px); }
  .account-page { width:calc(100% - 20px); max-width:none; padding:140px 0 180px; }
  .account-card, .account-module { padding-left:12px; padding-right:12px; min-width:0; }
  .tribe-status-card { width:100%; padding:12px; }
  .account-module { overflow:hidden; }
  .account-module h2 { font-size:1.25rem; }
  .service-row { width:100%; min-width:0; }
  .service-row > strong { max-width:100%; overflow-wrap:anywhere; }
  .service-actions, .rcon-service-actions { width:100%; min-width:0; align-items:stretch; }
  .rcon-service-actions .service-state { text-align:left; }
  .service-actions button { min-width:0; flex:1 1 auto; }
  .identity-sync-panel { grid-template-columns:1fr; gap:10px; text-align:center; }
  .identity-sync-copy strong, .identity-sync-copy span, .identity-sync-copy small { display:block; min-width:0; overflow-wrap:anywhere; }
  .identity-sync-panel button { width:100%; min-width:0; }
}

@media (max-width:380px) {
  .nav__title { display:none; }
  .nav__brand { max-width:44px; }
  .nav__actions { gap:3px; }
  .nav__actions > a, .btn-toggle-theme, .btn-account, .btn-account-help, .btn-tribe-chat-envelope { width:31px; height:31px; }
  .nav__actions a img, .nav__actions img { width:20px; height:20px; }
  .menu-toggle { font-size:22px; }
}

@media (max-width:520px) {
  .cluster-status-card { flex-basis:100%; }
  .cluster-status-card { min-height:96px; }
}
/* Bouton de remontée pour les vues dont la fenêtre défile réellement. */
.feature-scroll-top {
  position: fixed;
  z-index: 10002;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--accent1);
  border-radius: 50%;
  color: var(--accent1);
  background: rgba(3, 12, 18, .94);
  box-shadow: 0 0 12px rgba(0, 178, 255, .35);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.feature-scroll-top[hidden] { display: none !important; }
.feature-scroll-top:hover { filter: brightness(1.2); }
.feature-scroll-top:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.light .feature-scroll-top {
  color: #00749f;
  border-color: #00749f;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 12px rgba(0, 116, 159, .28);
}