/* ============================================================
   Concordia — Design system « Minecraft moderne »
   Sombre, glassmorphism, accents herbe/or/diamant, pixel accents
   ============================================================ */

/* Un élément portant l'attribut [hidden] doit TOUJOURS être masqué : sans !important, une
   règle d'auteur qui définit un « display » (ex. .ma-classe{display:inline-flex}) écrase
   la règle [hidden]{display:none} du navigateur et l'élément reste visible. */
[hidden] { display: none !important; }

@font-face {
  font-family: "Minecraft";
  src: url("../fonts/Minecraft.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Minecraft";
  src: url("../fonts/Minecraft-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b0e14;
  --bg-2: #0f141d;
  --panel: #121826;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --grass: #7ac74f;
  --grass-2: #5aa832;
  --grass-glow: rgba(122, 199, 79, 0.22);
  --gold: #f5c542;
  --gold-2: #d9a621;
  --diamond: #57d3ff;
  --red: #ff5c5c;

  --text: #eef3f8;
  --muted: #94a3b8;
  --muted-2: #64748b;

  --radius: 12px;
  --radius-sm: 8px;

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-mono: "VT323", "Courier New", monospace;
  --font-body: "Outfit", system-ui, -apple-system, sans-serif;
  --font-mc: "Minecraft", "VT323", "Courier New", monospace;

  /* Couleurs texte Minecraft exactes (16 couleurs) */
  --mc-black: #000000;     --mc-darkblue: #0000AA;   --mc-darkgreen: #00AA00;
  --mc-darkaqua: #00AAAA;  --mc-darkred: #AA0000;    --mc-darkpurple: #AA00AA;
  --mc-gold: #FFAA00;      --mc-gray: #AAAAAA;       --mc-darkgray: #555555;
  --mc-blue: #5555FF;      --mc-green: #55FF55;      --mc-aqua: #55FFFF;
  --mc-red: #FF5555;       --mc-lightpurple: #FF55FF; --mc-yellow: #FFFF55;
  --mc-white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(87, 211, 255, 0.07), transparent 60%),
    radial-gradient(900px 520px at 10% -10%, rgba(122, 199, 79, 0.10), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  /* `clip` (et non `hidden`) : coupe le débordement latéral SANS créer de conteneur
     de défilement, sinon `position:sticky` (barres d'onglets Codex/Shops) ne colle plus. */
  overflow-x: clip;
}

/* Le contenu pousse le footer vers le bas (footer collant). */
main.container { flex: 1 0 auto; width: 100%; }

/* Grille de pixels subtile en fond */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 0;
  position: relative;
}

/* ============================ Header ============================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 14, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Grille à trois colonnes de largeurs égales de part et d'autre : c'est ce qui
     place le bouton Aria au centre EXACT de la page. En simple flex, le logo
     (plus large que les actions) décalait le centre de 38 px vers la gauche. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}
.header-inner > .brand { grid-column: 1; justify-self: start; min-width: 0; }
.header-inner > .main-nav { grid-column: 2; }
.header-inner > .header-actions { grid-column: 3; justify-self: end; }

/* Largeur DONNÉE à la barre de navigation (et non déduite de son contenu) : c'est ce qui
   rend les deux zones latérales réellement égales. Sans cela, chaque zone se dimensionnait
   sur son propre contenu (299 px à gauche contre 196 px à droite) et Aria se retrouvait
   décalée de 51 px, alors même que la barre était bien centrée. */
/* La colonne du milieu se dimensionne sur le CONTENU réel de la navigation, au lieu
   d'une largeur fixe de 700 px. Les deux colonnes latérales restent des `1fr` égaux,
   donc Aria reste au centre exact ; mais l'espace rendu par une navigation plus
   étroite (hors thème de Noël, par exemple) revient aux côtés — assez pour que la
   barre d'actions (langues + statut + profil, jusqu'à 244 px) tienne sans déborder
   sur la navigation. */
@media (min-width: 1001px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo { height: 36px; width: auto; display: block; }
.brand .block {
  width: 34px; height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass) 52%, #7a5230 52%, #5e3c20 100%);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.4);
  image-rendering: pixelated;
}
.brand .name {
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.1;
}
.brand .name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: auto;
}
nav.main-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
nav.main-nav a:hover { color: var(--text); background: var(--surface-2); }
nav.main-nav a.active { color: var(--grass); background: var(--grass-glow); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.server-status {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap;
}
.server-status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  transition: background .3s, box-shadow .3s;
}
.server-status .dot.on { background: var(--grass); box-shadow: 0 0 8px var(--grass); }
.server-status .dot.maint { background: #ff9800; box-shadow: 0 0 8px #ff9800; }
.server-status .count { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text); line-height: 1; }

.account-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s;
}
.account-link:hover { color: var(--grass); }

.lang-switch {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-switch button {
  background: transparent;
  color: var(--muted);
  border: 0;
  /* 6px et non 10 : avec deux drapeaux, la paire économise 16 px — nécessaires pour
     que .header-actions (langues + statut + profil) tienne dans sa colonne de 214 px
     sans déborder sur la navigation. */
  padding: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.lang-switch button.active { background: var(--surface-2); color: var(--text); }

/* Bouton hamburger (mobile) */
.nav-toggle {
  display: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 40px; height: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
}

/* ============================ Boutons ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .06s, filter .15s, box-shadow .15s;
  user-select: none;
}
.btn-primary {
  background: linear-gradient(180deg, var(--grass), var(--grass-2));
  color: #0b1a05;
  border-bottom: 3px solid #3c701f;
  box-shadow: 0 4px 14px rgba(122, 199, 79, 0.25);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(122, 199, 79, 0.35); }
.btn-primary:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #2a1c00;
  border-bottom: 3px solid #a87c12;
  box-shadow: 0 4px 14px rgba(245, 197, 66, 0.22);
}
.btn-gold:hover { filter: brightness(1.06); }

.btn-warning {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #201300;
  border-bottom: 3px solid #92400e;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}
.btn-warning:hover { filter: brightness(1.06); }
.btn-warning:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); filter: brightness(1.2); }

.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* ============================ Hero ============================ */
.hero {
  position: relative;
  text-align: center;
  padding: 64px 20px 48px;
}
.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.hero .badge .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grass);
  box-shadow: 0 0 10px var(--grass);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.hero h1 {
  font-family: var(--font-pixel);
  font-size: clamp(1.6rem, 6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: 1px;
  margin-bottom: 16px;
  text-shadow: 0 4px 30px rgba(122, 199, 79, 0.35);
}
.hero h1 .accent { color: var(--grass); }
.hero h1 .accent-2 { color: var(--gold); }
.hero .tagline {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.08rem;
}

/* Bloc IP copiable */
.ip-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 12px 12px 18px;
  margin-bottom: 26px;
  max-width: 100%;
}
.ip-block .ip-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.ip-block .ip-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--diamond);
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}
.ip-block .copy-btn {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}
.ip-block .copy-btn:hover { background: var(--surface-2); filter: brightness(1.3); }
.ip-block .copy-btn.copied { color: var(--grass); }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================ Bouton Play + IP ============================ */
.hero-play { margin-bottom: 24px; }
.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 42px;
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  letter-spacing: 1px;
  color: #0b1a05;
  background: linear-gradient(180deg, var(--grass), var(--grass-2));
  border: 1px solid rgba(0,0,0,0.35);
  border-bottom: 4px solid #3c701f;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(122,199,79,0.3);
  transition: transform .06s, filter .15s;
}
.play-btn:hover { filter: brightness(1.06); }
.play-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.hero-ip {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--diamond);
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

/* ============================ Boîtes de version ============================ */
.version-boxes {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.version-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  min-width: 160px;
}
.version-box .vico { font-size: 1.4rem; }
.version-box .vname { font-weight: 700; font-size: 0.92rem; }
.version-box .vver { font-family: var(--font-mono); font-size: 1.05rem; color: var(--muted); overflow-wrap: anywhere; }
.version-box .vdot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-left: auto; flex-shrink: 0; }
.version-box .vdot.on { background: var(--grass); box-shadow: 0 0 8px var(--grass); }
.version-box .vdot.maint { background: #ff9800; box-shadow: 0 0 8px #ff9800; }

/* ============================ Liste des joueurs ============================ */
.player-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.player-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px 4px 4px;
  font-size: 0.88rem;
  font-weight: 600;
}
.player-pill .head { width: 26px; height: 26px; border-radius: 5px; image-rendering: pixelated; }
.player-pill .pname { overflow-wrap: anywhere; }

/* ============================ Tête dans le chat ============================ */
.chat-feed .msg .head {
  width: 22px; height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: center;
  margin-right: 2px;
  image-rendering: pixelated;
}

.badge .pulse.off { background: var(--red); box-shadow: 0 0 10px var(--red); animation: none; }

/* ============================ Status bar ============================ */
.status-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 8px 0 12px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  min-width: 0;
  backdrop-filter: blur(6px);
}
.stat .ico { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.stat .label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }
.stat .value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  color: var(--text);
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stat .value.green { color: var(--grass); }
.stat .value.gold { color: var(--gold); }

/* ============================ Sections ============================ */
.section-head { margin: 52px 0 22px; text-align: center; }
.section-head h2 {
  font-family: var(--font-pixel);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.section-head h2 .ico { margin-right: 8px; }
.section-head p { color: var(--muted); font-size: 0.98rem; }

/* ============================ Cards ============================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .18s, border-color .18s, background .18s;
  min-width: 0;
  backdrop-filter: blur(6px);
}
.card:hover { transform: translateY(-4px); border-color: var(--grass); background: var(--surface-2); }
.card .ico { font-size: 1.8rem; margin-bottom: 10px; }
.card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.93rem; }

/* Cartes métiers */
.job-card { display: flex; flex-direction: column; gap: 8px; }
.job-card .job-name { display: flex; align-items: center; gap: 10px; }
.job-card .job-name .ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
}
.job-card .job-name h3 { font-size: 1.05rem; }
.job-card .job-name .pt { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.job-card .job-desc { color: var(--muted); font-size: 0.88rem; flex: 1; }

/* ============================ Chat ============================ */
.chat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-header .title { font-weight: 700; font-size: 0.95rem; }
.chat-header .hint { color: var(--muted); font-size: 0.8rem; }
.chat-feed {
  height: 320px;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.chat-feed .msg { display: flex; gap: 8px; align-items: baseline; font-size: 0.92rem; }
.chat-feed .msg .ts { color: var(--muted-2); font-family: var(--font-mono); font-size: 0.85rem; flex-shrink: 0; }
.chat-feed .msg .who { font-weight: 700; flex-shrink: 0; }
.chat-feed .msg .who.game { color: var(--grass); }
.chat-feed .msg .who.web { color: var(--diamond); }
.chat-feed .msg .tag {
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase;
}
.chat-feed .msg .tag.web { background: rgba(87, 211, 255, 0.18); color: var(--diamond); }
.chat-feed .msg .text { color: var(--text); overflow-wrap: anywhere; }
.chat-feed .empty { color: var(--muted-2); text-align: center; margin: auto; font-size: 0.9rem; }

.chat-input-row {
  display: flex; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-input-row input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  min-width: 0;
}
.chat-input-row input:focus { outline: none; border-color: var(--grass); }

/* ============================ Forms ============================ */
.auth-wrap {
  max-width: 460px;
  margin: 40px auto 60px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  backdrop-filter: blur(8px);
}
.auth-card h1 {
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.auth-card .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .15s;
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--grass); }
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.form-group input[type="file"] {
  padding: 9px 12px;
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
}
.form-group input[type="file"]::file-selector-button {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  margin-right: 10px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
}
.form-group textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 18px;
  height: 18px;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--grass);
  cursor: pointer;
}
.form-group .code-input {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
}
.form-group .help { font-size: 0.78rem; color: var(--muted-2); margin-top: 5px; }

.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.alert.error { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.35); color: #ffb3b3; }
.alert.info { background: rgba(87, 211, 255, 0.1); border: 1px solid rgba(87, 211, 255, 0.3); color: #b8e9ff; }

/* Bandeaux d'administration (confirmation / erreur) : verre dépoli et liseré d'accent. */
.adm-alert {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 18px; margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
  font-size: 0.92rem; line-height: 1.55;
}
.adm-alert::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--muted);
}
.adm-alert .ico { font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.adm-alert strong {
  display: block; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.8; margin-bottom: 3px; font-weight: 700;
}
.adm-alert.success {
  border-color: rgba(0, 212, 170, 0.32);
  background: linear-gradient(120deg, rgba(0, 212, 170, 0.16), rgba(0, 212, 170, 0.03));
  color: #d9fff7;
}
.adm-alert.success::before { background: #00d4aa; box-shadow: 0 0 14px rgba(0, 212, 170, 0.65); }
.adm-alert.error {
  border-color: rgba(233, 69, 96, 0.35);
  background: linear-gradient(120deg, rgba(233, 69, 96, 0.16), rgba(233, 69, 96, 0.03));
  color: #ffd7de;
}
.adm-alert.error::before { background: #e94560; box-shadow: 0 0 14px rgba(233, 69, 96, 0.6); }

.auth-foot { text-align: center; margin-top: 18px; font-size: 0.88rem; color: var(--muted); }
.auth-foot a { color: var(--grass); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

/* ============================ Compte ============================ */
.account-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}
.account-side, .account-main { min-width: 0; }
.account-side .card, .account-main .card { margin-bottom: 16px; }
.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--grass), var(--grass-2));
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.account-row:last-of-type { border-bottom: 0; }
.account-row .ico { font-size: 1.4rem; }
.account-row .uname { font-weight: 700; }
.account-row .ptag { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.account-row .badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: var(--grass-glow); color: var(--grass); }

/* ============================ Footer ============================ */
footer.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  background: var(--bg-2);
  padding: 36px 20px;
}
.footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
}
.footer-inner .links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-inner .links a { color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.footer-inner .links a:hover { color: var(--grass); }
.footer-inner .copy { color: var(--muted-2); font-size: 0.82rem; }

/* ============================ Animations ============================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp .5s ease both; }

/* ============================ Responsive ============================ */
@media (max-width: 900px) {
  .status-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(11, 14, 20, 0.97);
    border-bottom: 1px solid var(--border-strong);
    padding: 10px 16px 16px;
    z-index: 99;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav a { padding: 13px 10px; font-size: 1rem; }
  .header-actions { margin-left: auto; }
  .account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .account-link .alabel { display: none; }
  /* Sur téléphone, le header doit tenir dans la largeur : on resserre les espacements.
     Sans cela il dépassait de ~15 px, et une marge automatique le faisait déborder
     sur la droite au lieu de se replier — d'où un défilement horizontal. */
  .header-inner { gap: 8px; padding: 8px 12px; }
  .header-actions { gap: 8px; margin-left: 0; min-width: 0; }
  .server-status { padding: 4px 8px; }
  .server-status .count { font-size: 1rem; }
  .play-btn { padding: 14px 28px; font-size: 0.82rem; }
}

@media (max-width: 380px) {
  /* Tout en bas de la plage : on sacrifie l'état du serveur (il est sur l'accueil),
     plutôt que de laisser le header déborder. */
  .server-status { display: none; }
}

@media (max-width: 480px) {
  .status-bar { grid-template-columns: 1fr; gap: 10px; }
  .stat { padding: 14px 12px; }
  .stat .value { font-size: 1.2rem; }
  .hero { padding: 44px 14px 36px; }
  .ip-block { flex-wrap: wrap; justify-content: center; }
  .brand .name small { display: none; }
}

/* ============================ Widgets flottants ============================ */
.fw-chatbar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
}
.fw-chat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--grass), var(--grass-2));
  color: #0b1a05;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transition: transform .12s, filter .15s;
}
.fw-chat-toggle:hover { filter: brightness(1.06); transform: translateY(-2px); }
.fw-chat-toggle.active { background: var(--surface-2); color: var(--text); border-color: var(--grass); }
.fw-chat-count {
  background: rgba(0,0,0,0.22);
  color: inherit;
  border-radius: 100px;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-width: 22px;
  text-align: center;
}

.fw-panel {
  position: absolute;
  bottom: 66px;
  right: 0;
  width: 340px;
  max-height: 440px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}
.fw-panel.open { display: flex; }
.fw-panel-chat { width: 820px; height: 520px; max-height: 520px; }
.fw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.95rem;
}
.fw-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.fw-close:hover { color: var(--text); }
.fw-body { padding: 10px 14px; overflow-y: auto; max-height: 380px; }
.fw-empty { color: var(--muted-2); font-size: 0.85rem; text-align: center; padding: 20px 0; }

.fw-layout { display: flex; flex: 1; min-height: 0; }
.fw-side {
  width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  display: flex; flex-direction: column;
}
.fw-side-head { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); }
.fw-side-body { flex: 1; overflow-y: auto; padding: 8px; }
.fw-side-sep { height: 1px; background: var(--border); margin: 6px 10px; }
.fw-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fw-feed { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fw-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }
.fw-form input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text);
  font-family: var(--font-body); font-size: 0.9rem; min-width: 0;
}
.fw-form input:focus { outline: none; border-color: var(--grass); }
.fw-form button { background: var(--grass-2); border: 0; color: #fff; border-radius: var(--radius-sm); padding: 0 14px; cursor: pointer; font-size: 1rem; }

.fw-player {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); font-size: 0.88rem;
  text-decoration: none; color: inherit;
}
.fw-player:hover { background: var(--surface-2); }
.fw-player img { width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; }
.fw-player .pname { overflow-wrap: anywhere; }
.fw-player .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grass); margin-left: auto; flex-shrink: 0; }
.fw-player.web .dot { background: var(--diamond); }

.fw-feed .msg { display: flex; gap: 7px; align-items: baseline; font-size: 0.88rem; }
.fw-feed .msg .head { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; align-self: center; image-rendering: pixelated; }
.fw-feed .msg .ts { color: var(--muted-2); font-family: var(--font-mono); font-size: 0.8rem; flex-shrink: 0; }
.fw-feed .msg .who { font-weight: 700; flex-shrink: 0; }
.fw-feed .msg .who.game { color: var(--grass); }
.fw-feed .msg .who.web { color: var(--diamond); }
.fw-feed .msg .tag { font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; }
.fw-feed .msg .tag.web { background: rgba(87,211,255,0.18); color: var(--diamond); }
.fw-feed .msg .text { color: var(--text); overflow-wrap: anywhere; }
.fw-feed .msg.pm .mc-msg { border-left: 2px solid #00d4aa; padding-left: 6px; }
.fw-feed .aria-typing .dots span { display: inline-block; animation: ariaBlink 1.4s infinite both; color: #00d4aa; font-weight: bold; }
.fw-feed .aria-typing .dots span:nth-child(2) { animation-delay: .2s; }
.fw-feed .aria-typing .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ariaBlink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ---- Chat Minecraft (format strictement identique au jeu) ---- */
.msg .mc-msg {
  font-family: var(--font-mc);
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.2px;
  min-width: 0;
}
.mc-msg .mc { font-family: inherit; }
.mc-msg .mc.badge { font-weight: bold; }
.mc-msg .mc.name { font-weight: bold; }
.mc-msg .mc.text { overflow-wrap: anywhere; }
.msg.sys {
  font-family: var(--font-mc);
  color: var(--mc-yellow);
  font-size: 0.82rem;
  white-space: pre-wrap;
  padding: 4px 0;
}

/* Drapeaux SVG */
.lang-switch svg { display: block; border-radius: 2px; }

/* ============================ i18n (bascule FR / pt-BR) ============================ */
.i18n-pt { display: none; }
html[lang="pt-BR"] .i18n-pt { display: inline; }
html[lang="pt-BR"] .i18n-fr { display: none; }

@media (max-width: 640px) {
  .fw-chatbar { right: 14px; bottom: 14px; }
  .fw-panel, .fw-panel-chat {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .fw-layout { flex-direction: column; }
  .fw-side { width: 100%; max-height: 180px; border-right: 0; border-bottom: 1px solid var(--border); }
  .fw-feed { min-height: 160px; }
}

/* ============================ Recettes (crafting grids) ============================ */
.recipes-legend {
  font-size: 0.8rem;
  color: var(--muted-2);
  margin-top: 6px;
}

.recipe-group { margin-bottom: 40px; }
.recipe-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.recipe-group-head .rg-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.recipe-group-head h3 { font-size: 1.1rem; font-weight: 700; }
.recipe-group-head .rg-line { flex: 1; height: 1px; opacity: 0.6; }

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
}

.recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .18s, border-color .18s, background .18s;
  min-width: 0;
}
.recipe-card:hover { transform: translateY(-4px); border-color: var(--grass); background: var(--surface-2); }

.recipe-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  gap: 3px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px;
  flex-shrink: 0;
}
.craft-cell {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.craft-cell.empty { background: rgba(255, 255, 255, 0.015); border-color: rgba(255, 255, 255, 0.04); }
.craft-cell img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}

.craft-arrow {
  color: var(--muted-2);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.recipe-result {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.recipe-result img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.recipe-count {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--gold-2);
  color: #2a1c00;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.3);
}

.recipe-name { font-size: 0.92rem; font-weight: 700; text-align: center; }

.recipe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.recipe-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.recipe-badges .badge-shop {
  color: var(--grass);
  border-color: rgba(122, 199, 79, 0.45) !important;
  background: rgba(122, 199, 79, 0.12);
}
.recipe-badges .badge-craft { color: var(--muted-2); }
.recipe-badges .badge-type { color: var(--gold); border-color: rgba(245, 197, 66, 0.4) !important; }

/* Badges specs (armes custom, modal codex) */
.modal-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}
.modal-specs .badge-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  white-space: nowrap;
}
.modal-specs .badge-spec strong { color: var(--gold); font-weight: 700; }

/* Tableau des specs par matériau (armes custom) — aligné + lisible */
.spec-table-wrap {
  margin: 14px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.spec-table thead th {
  padding: 10px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.045);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.spec-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.spec-table .col-mat { text-align: left; font-weight: 600; }
.spec-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.spec-table th.col-num { text-align: right; }
.spec-table .mat-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mat-color, #999);
  margin-right: 9px;
  vertical-align: -1px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.spec-table tr.row-best td { background: rgba(245, 197, 66, 0.07); }
.spec-table tr.row-best td.col-mat, .spec-table tr.row-best td.col-num { color: var(--gold); font-weight: 700; }
.spec-table tr.mat-row:hover td { background: rgba(255, 255, 255, 0.05); }
.spec-table tr.mat-row.active td { background: rgba(87, 211, 255, 0.13); }
.spec-table tr.mat-row.active td.col-mat { color: var(--text); font-weight: 700; }

/* Liste des capacités d'une arme */
.modal-ability-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.modal-ability-list li::marker { color: var(--gold); }

@media (max-width: 480px) {
  .craft-grid { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); }
  .craft-cell { width: 34px; height: 34px; }
  .craft-cell img { width: 26px; height: 26px; }
}

/* ---- Éléments produits par Aria dans le chat (marqueurs [[recette:…]], [[item:…]], …) ---- */
/* La réponse d'Aria occupe sa propre ligne : le message du chat est en flex sans retour à la
   ligne, donc la grille de fabrication se placerait à côté du nom au lieu d'en dessous. */
.fw-feed .msg.aria-msg { flex-wrap: wrap; }
.fw-feed .msg.aria-msg .aria-corps { flex: 1 1 100%; min-width: 0; }
.aria-item { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .5rem; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); vertical-align: middle; }
.aria-item img { width: 26px; height: 26px; image-rendering: pixelated; }
.aria-lien { color: #00d4aa; text-decoration: none; border-bottom: 1px dashed rgba(0,212,170,.5); cursor: pointer; }
.aria-lien:hover { color: #5fffd8; border-bottom-style: solid; }
.aria-cmd { background: rgba(0,212,170,.12); border: 1px solid rgba(0,212,170,.35); border-radius: 6px;
  padding: .1rem .45rem; font-family: var(--font-mono); color: #7dffe0; font-size: .92em; }
.aria-recette { margin: .5rem 0; padding: .55rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: background .2s; }
.aria-recette:hover { background: rgba(255,255,255,.09); }
.aria-recette-tete { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.aria-recette-tete img { width: 32px; height: 32px; image-rendering: pixelated; }
.aria-recette-nom { font-weight: 600; }
.aria-recette-note { opacity: .75; font-size: .9em; }
.aria-recette .modal-recipe-gui { max-width: 260px; }

/* ============================================================================
   Navigation refondue — Aria au centre, menus déroulants, icônes unifiées
   ============================================================================
   Objectif : 10 onglets serrés → 6 entrées respirantes, toutes avec une icône
   de la même famille (SVG au trait, couleur héritée), et Aria placée au centre
   géométrique du header, mise en avant.
   Les deux zones latérales font la même largeur (flex:1) : c'est ce qui centre
   réellement le bouton Aria, quelle que soit la largeur des menus à côté. */
/* Grille [zone gauche 1fr | Aria auto | zone droite 1fr] : les deux colonnes
   latérales sont STRICTEMENT égales (`minmax(0,1fr)` ignore la largeur de leur
   contenu), donc Aria tombe exactement au centre de la barre même quand la zone
   gauche (3 entrées) est plus fournie que la droite (2 entrées + événement).
   En simple flex:1, la zone gauche poussait Aria vers la droite. */
nav.main-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  margin-left: 0; margin-right: 0;
}
.nav-zone { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-zone--left  { justify-content: flex-end; }
.nav-zone--right { justify-content: flex-start; }

nav.main-nav a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none;
  padding: 8px 11px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 500; font-family: var(--font-body);
  background: none; border: 0; cursor: pointer;
  transition: color .15s, background .15s; white-space: nowrap;
}
nav.main-nav a:hover, .nav-drop > button:hover { color: var(--text); background: var(--surface-2); }
nav.main-nav a.active { color: var(--grass); background: var(--grass-glow); }
.nav-ico { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-caret { width: 11px; height: 11px; transition: transform .2s; opacity: .7; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }

/* Menu déroulant */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px; padding: 6px; border-radius: 14px;
  background: rgba(18, 24, 38, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
.nav-drop.open .nav-drop-menu,
.nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 9px; font-size: .87rem; box-sizing: border-box;
}
.nav-drop-menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-drop-menu a.active { color: var(--grass); background: var(--grass-glow); }
.nav-drop-menu .nav-sep { height: 1px; margin: 5px 8px; background: var(--border); }

/* ---------------------------------------------------------------------------
   Le bouton Aria — pivot central, glassmorphism / liquid glass (§D)
   ---------------------------------------------------------------------------
   Fond translucide + backdrop-blur, dégradé cyan/diamant subtil, bordure claire,
   reflet interne (inset) et halo doux au survol. Plus grand que les autres
   entrées, géométriquement centré (grille ci-dessus). Pas d'animation en boucle :
   seulement une élévation/lueur au survol, neutralisée si l'utilisateur demande
   moins de mouvement. */
nav.main-nav a.nav-aria {
  position: relative;
  padding: 11px 26px;
  border-radius: 999px;
  margin: 0 10px;
  font-weight: 700; letter-spacing: .3px;
  color: var(--text);
  background: linear-gradient(135deg,
      rgba(87, 211, 255, .30) 0%,
      rgba(122, 199, 79, .20) 55%,
      rgba(87, 211, 255, .16) 100%);
  border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 6px 18px rgba(87, 211, 255, .18);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  overflow: hidden;
}
/* Reflet interne (liquid glass) */
nav.main-nav a.nav-aria::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 56%);
  pointer-events: none;
}
nav.main-nav a.nav-aria > * { position: relative; z-index: 1; }
nav.main-nav a.nav-aria:hover {
  color: #fff;
  background: linear-gradient(135deg,
      rgba(87, 211, 255, .46) 0%,
      rgba(122, 199, 79, .32) 60%,
      rgba(87, 211, 255, .34) 100%);
  border-color: rgba(255, 255, 255, .62);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px rgba(87, 211, 255, .28),
    0 10px 26px rgba(87, 211, 255, .42);
}
nav.main-nav a.nav-aria.active {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 2px rgba(87, 211, 255, .55),
    0 10px 26px rgba(87, 211, 255, .45);
}
nav.main-nav a.nav-aria .nav-ico { width: 18px; height: 18px; stroke-width: 2.2; }
nav.main-nav a.nav-aria span { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  nav.main-nav a.nav-aria { transition: none; }
  nav.main-nav a.nav-aria:hover { transform: none; }
}

/* Barre horizontale un peu serrée (1001–1180 px) : on retire les libellés, les icônes
   restent — toutes, ou aucune. Hors de cette plage, la barre garde ses libellés. */
@media (min-width: 1001px) and (max-width: 1180px) {
  /* On masque les libellés des entrées de PREMIER NIVEAU uniquement : les libellés
     des menus déroulants (Économie / Monde / Vote) restent visibles, sinon les
     menus s'ouvraient vides dans cette plage. */
  nav.main-nav > a > span,
  nav.main-nav .nav-zone > a > span,
  nav.main-nav .nav-drop > button > span { display: none; }
  nav.main-nav a, .nav-drop > button { padding: 8px 10px; }
  nav.main-nav a.nav-aria { padding: 10px 16px; }
  nav.main-nav a.nav-aria > span { display: inline; }
}

/* ============================================================================
   Tiroir mobile (≤ 1000 px)
   ============================================================================
   Le tiroir reprend TOUS les libellés — c'est ce qui manquait : la barre
   horizontale les masquait, et le menu ouvert n'affichait plus que des icônes
   orphelines, donnant l'impression d'un menu vide. Les groupes (Économie,
   Monde, Vote) y sont dépliés sous forme de sections : sur un écran tactile,
   un sous-menu qui s'ouvre au survol ne sert à rien. */
@media (max-width: 1000px) {
  nav.main-nav {
    /* `display:none` maintenu ici (et non simplement à la ligne ~827) car la règle
       de base `nav.main-nav{display:grid}` de la refonte vient plus BAS dans le
       fichier : sans ce rappel, elle rouvrirait la barre en permanence sur mobile. */
    display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - 68px); overflow-y: auto;
    padding: 12px 16px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  }
  /* ⚠️ Ne JAMAIS remettre les libellés avec une règle large sur les <span> : elle
     réafficherait aussi les deux versions de _i18n() en même temps (« Shop du serveur
     Loja do servidor »). Les libellés n'ont pas besoin d'être rétablis ici : seule la
     plage 1001–1180 px les masque. */
  nav.main-nav a, .nav-drop > button {
    display: flex; width: 100%; box-sizing: border-box;
    padding: 13px 12px; font-size: 1rem; gap: 12px;
  }
  nav.main-nav .nav-ico { width: 18px; height: 18px; }

  /* Aria en tête du tiroir, pleine largeur : c'est l'entrée principale */
  nav.main-nav a.nav-aria {
    order: -1;                       /* …et bien la PREMIÈRE, avant Accueil */
    justify-content: center; margin: 0 0 12px; padding: 15px;
    font-size: 1.02rem; letter-spacing: .5px;
  }
  /* Le tiroir ouvert couvre tout l'écran : sans cela, la page restait visible en dessous
     et le menu semblait flotter au-dessus d'un texte illisible. */
  nav.main-nav.open { min-height: calc(100dvh - 62px); }

  .nav-zone { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-zone--left, .nav-zone--right { justify-content: flex-start; }
  .nav-zone--right { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

  /* Un groupe = un intitulé de section, suivi de ses entrées */
  .nav-drop { position: static; }
  .nav-drop > button {
    color: var(--muted-2); font-size: .72rem; font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase; gap: 8px;
    padding: 15px 12px 6px; cursor: default;
  }
  .nav-drop > button .nav-caret { display: none; }
  .nav-drop > button:hover { background: none; color: var(--muted-2); }
  .nav-drop > button .nav-ico { width: 14px; height: 14px; }
  .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-drop-menu a { padding: 12px 12px 12px 24px; font-size: .96rem; }
  .nav-drop-menu .nav-sep { display: none; }
}

/* ============================================================================
   Menu du profil (avatar) — bouton Admin déplacé là (§E)
   et états du menu Vote (grisés + phases d'élection, §C)
   ============================================================================ */

/* Déclencheur : garde l'allure discrète de l'ancien .account-link, mais c'est un
   vrai bouton qui ouvre un menu (même mécanisme .nav-drop que la nav). */
.header-actions .account-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  padding: 6px 9px; border-radius: 100px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; max-width: 190px;
  transition: color .15s, background .15s, border-color .15s;
}
.header-actions .account-btn:hover { color: var(--text); border-color: var(--diamond); }
.header-actions .account-btn.active { color: var(--grass); border-color: rgba(122, 199, 79, .5); }
.header-actions .account-btn .nav-ico { width: 15px; height: 15px; }
.header-actions .account-btn .alabel { overflow: hidden; text-overflow: ellipsis; }
.header-actions .account-btn .nav-caret { width: 10px; height: 10px; }

/* --- Contention d'espace dans l'en-tête (≥1001 px) ---------------------------------
   La barre d'actions (langues + statut serveur + profil) atteint 244 px alors que la
   colonne latérale n'en offre que ~214. On resserre légèrement les trois blocs : la
   barre redescend autour de 220 px et ne mord plus sur la navigation. Le pseudo est
   borné pour qu'un nom très long ne puisse jamais faire déborder l'en-tête. */
@media (min-width: 1001px) {
  .header-inner .lang-switch button { padding: 5px 6px; }
  .header-actions .server-status { padding: 4px 7px; }
  .header-actions .account-btn { padding: 5px 8px; gap: 5px; }
  .header-actions .account-btn .alabel { max-width: 68px; }
}

/* --- Densité de la barre de navigation (≥1181 px) ----------------------------------
   Sans thème, la navigation réclame 744 px et ne laisse que 192 px par côté, alors
   que la barre d'actions en demande 228 : elle recouvrait la fin de la navigation.
   On adopte la densité déjà utilisée par le thème de Noël (entrées plus compactes,
   écarts nuls) — le rendu est aussi plus actuel — ce qui ramène la barre autour de
   650 px et libère la marge nécessaire de chaque côté. */
@media (min-width: 1181px) {
  nav.main-nav > a,
  nav.main-nav .nav-zone > a,
  nav.main-nav .nav-drop > button { padding: 8px 9px; }
  nav.main-nav a.nav-aria { padding: 10px 16px; margin: 0 6px; }
  .nav-zone { gap: 0; }
}

/* Menu du profil aligné à DROITE : centré (règle générique .nav-drop-menu) il
   sortirait de l'écran, le bouton étant collé au bord droit du header. */
.header-actions .profile-menu {
  left: auto; right: 0;
  transform: translateY(-6px);
  min-width: 210px;
}
.header-actions .profile-drop.open .profile-menu,
.header-actions .profile-drop:hover .profile-menu { transform: translateY(0); }
.profile-menu .nav-item-danger { color: #ff8a8a; }
.profile-menu .nav-item-danger:hover { background: rgba(255, 92, 92, .12); color: #ffb3b3; }
.profile-menu .nav-item-danger .nav-ico { stroke: currentColor; }

/* --- Menu Vote : entrées grisées (déjà voté, élection hors période) (§C) --- */
.nav-drop-item.is-off {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 9px; box-sizing: border-box;
  color: var(--muted-2); font-size: .87rem;
  cursor: not-allowed; opacity: .55; user-select: none;
}
.nav-drop-item.is-off .nav-ico { opacity: .85; }

/* --- Entrée Élection : titre + temps restant en plus petit (§C) --- */
.nav-elec-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; }
.nav-elec-title { white-space: nowrap; }
.nav-elec-sub { font-size: .72rem; color: var(--muted-2); line-height: 1.25; }
.nav-drop-menu a.nav-elec-item { align-items: center; }

/* Mobile : le menu du profil ne doit PAS adopter le dépliage « en ligne » du
   tiroir de navigation (règle .nav-drop{position:static}) — il reste un vrai menu
   flottant, aligné sous le bouton. */
@media (max-width: 1000px) {
  .profile-drop { position: relative; }
  /* Sur mobile, la règle .nav-drop > button (intitulé de section du tiroir) ne
     doit pas transformer le bouton profil en libellé : on lui rend son aspect. */
  .header-actions .nav-drop > button.account-btn {
    width: auto; display: inline-flex; align-items: center; gap: 7px;
    color: var(--muted); font-size: .88rem; font-weight: 600;
    letter-spacing: normal; text-transform: none; padding: 6px 12px; cursor: pointer;
  }
  .header-actions .profile-menu {
    position: absolute; left: auto; right: 0; top: calc(100% + 10px);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    min-width: 220px; padding: 6px;
    background: rgba(18, 24, 38, .97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--border-strong);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  }
  .header-actions .profile-drop.open .profile-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav-drop-item.is-off { padding: 12px 12px 12px 24px; font-size: .96rem; }
}

@media (max-width: 640px) {
  .header-actions .account-btn .alabel,
  .header-actions .account-btn .nav-caret { display: none; }
  .header-actions .account-btn { padding: 6px 10px; }
}