@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
:root {
  --bg: #050506;
  --bg-panel: #0a0b0d;
  --bg-panel-2: #0f1113;
  --line: #23241f;
  --line-soft: #1a1b17;
  --text: #ede8dc;
  --text-dim: #8a8579;
  --text-faint: #4f4c43;
  --cyan: #52e0c4;
  --cyan-dim: #1f4a41;
  --amber: #ffb347;
  --amber-dim: #6b4a1c;
  --red: #ff6b57;
  --red-dim: #5c2e2e;
  --green: #7be08a;

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

  /* ── V3.59.3 — Harmonisation de la mise en page (toutes les pages) ──────
     Un seul écartement pour les 3 colonnes (menu / panneau / rail) et une
     hauteur de fil d'Ariane FIXE : c'est elle qui sert de décalage haut au
     menu et au rail, pour que les 3 colonnes démarrent exactement au même
     niveau, quel que soit l'onglet ouvert. */
  --layout-gap: 20px;
  /* V3.65.3 — décalage horizontal du menu latéral en disposition Cockpit.
     Valeur POSITIVE = le menu se décale vers la GAUCHE ; valeur NÉGATIVE = vers
     la DROITE ; 0 = alignement d'origine. Réglé à -22px : le menu est écarté de
     22 px vers la droite, position retenue à l'usage. */
  --cockpit-nav-shift: -22px;
  --crumb-line: 18px;
  --crumb-gap: 14px;
  --crumb-h: calc(var(--crumb-line) + var(--crumb-gap));
  --infobar-h: 48px;
  --topbar-h: 40px;
  /* V3.65.4 — hauteurs RÉELLEMENT mesurées de l'en-tête et de la barre d'état,
     posées par updateLayoutHeights() (app.js). Les deux valeurs ci-dessus ne
     sont plus que des minimums de repli : dès que le pilote agrandit la taille
     du texte, ces barres passent sur deux lignes et grandissent, et le décalage
     haut du contenu doit suivre — sinon la page passe DERRIÈRE elles, ce qui
     donnait l'impression que tout se chevauchait à 118 %. */
  --topbar-real-h: var(--topbar-h);
  --infobar-real-h: var(--infobar-h);
  --top-offset: calc(var(--topbar-real-h) + var(--infobar-real-h));
  /* Écartement unique entre deux cartes, partout (grille, rail, panneaux). */
  --card-gap: 16px;
}

/* ── Skins ────────────────────────────────────────────────────────────────
   Un "skin" pilote la STRUCTURE (rayons, ombres, décors, police des titres,
   quel accent — cyan ou amber — sert de couleur principale de l'UI).
   Un "thème" (voir themeConfig.js, injecté dans #theme-vars-style) pilote
   uniquement la PALETTE (valeurs de --bg/--cyan/--amber/etc.).
   Les deux se combinent librement : 5 thèmes × 2 skins = 10 ambiances.
   Le skin actif se lit sur <html data-skin="classique|scanner">. ────────── */
:root, [data-skin="scanner"] {
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 2px;
  --shadow-card: none;
  --accent: var(--amber);
  --accent-dim: var(--amber-dim);
  --head-font: var(--font-mono);
  --head-tracking: 0.14em;
  --head-transform: uppercase;
}
[data-skin="classique"] {
  --radius-sm: 5px;
  --radius: 9px;
  --radius-lg: 13px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 10px 26px -14px rgba(0,0,0,0.6);
  --accent: var(--cyan);
  --accent-dim: var(--cyan-dim);
  --head-font: var(--font-display);
  --head-tracking: 0.05em;
  --head-transform: none;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
}
html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: var(--font-mono);
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}
[data-skin="classique"] body::before { display: none; }
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  body::before { display: none; }
}

::selection { background: var(--cyan-dim); color: #fff; }
button, input, select { font-family: inherit; }

.btn-explore, .btn-poi, .btn-mine, .btn-depot, .btn-hangar-danger,
.btn-hangar-success, .btn-cargo-bulk, .shop-tab, .depot-tab,
.activity-btn {
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.btn-explore:hover:not(:disabled),
.btn-poi:hover:not(:disabled),
.btn-mine:hover:not(:disabled),
.btn-depot:hover:not(:disabled),
.btn-hangar-danger:hover:not(:disabled),
.btn-hangar-success:hover:not(:disabled),
.btn-cargo-bulk:hover:not(:disabled) {
  transform: translateY(-1px);
}
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── Fond étoilé ─────────────────────────────────────────────────────── */
.starfield {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1px 1px at 92% 10%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.28), transparent),
    var(--bg);
  background-attachment: fixed;
}

.starfield::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1000px 600px at 20% -10%, var(--amber-dim), transparent 62%),
    radial-gradient(ellipse 800px 600px at 100% 10%, var(--cyan-dim), transparent 62%),
    radial-gradient(ellipse 900px 700px at 50% 120%, rgba(60,45,25,0.5), transparent 68%);
  opacity: 0.28;
  animation: bg-drift 55s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(2%, -2%) scale(1.05); }
  100% { transform: translate(-2%, 2%) scale(1); }
}

/* ── Effet "Étoiles scintillantes" (module Effets — indépendant du thème) ──
   Couche entièrement neutre (couleur --text) et à très faible opacité, pour
   rester lisible et cohérente sur n'importe quel thème/palette du site. Ne
   s'affiche que si l'admin a activé l'effet (classe posée en JS). */
.twinkle-stars {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  display: none;
}
.twinkle-stars.active { display: block; }
.twinkle-star {
  position: absolute;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  animation: twinkle-fade ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes twinkle-fade {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: var(--twinkle-max, 0.85); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .twinkle-star { animation: none; opacity: 0.35; }
}

/* ── Pluie de météores (fond animé) ──────────────────────────────────── */
.meteor {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  animation: meteor-fall linear infinite;
  will-change: transform, opacity;
}
.meteor::before {
  content: "";
  position: absolute;
  top: -1px; right: 0;
  width: var(--trail, 90px); height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 75%, var(--amber) 100%);
  box-shadow: 0 0 6px 1px var(--amber);
}
.meteor.meteor-pale::before {
  background: linear-gradient(90deg, transparent, var(--text) 75%, var(--text) 100%);
  box-shadow: 0 0 6px 1px var(--text);
}

@keyframes meteor-fall {
  0%   { transform: rotate(var(--angle, 215deg)) translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: rotate(var(--angle, 215deg)) translateX(var(--dist, -1100px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meteor { animation: none; display: none; }
}

/* ── Écran d'accueil ─────────────────────────────────────────────────── */
.landing { min-height: 100vh; display: flex; flex-direction: column; }

.landing-nav, .portal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line-soft);
}
.landing-brand {
  font-family: var(--head-font); font-weight: 500; letter-spacing: 0.22em;
  font-size: 12px; display: flex; align-items: center; gap: 10px; color: var(--text-dim);
}
[data-skin="scanner"] .landing-brand::after {
  content: "ONLINE"; font-size: 9px; letter-spacing: 0.1em; color: var(--green);
  border: 1px solid var(--green); border-radius: 20px; padding: 2px 8px; margin-left: 6px;
  opacity: 0.85;
}
.brand-glyph { color: var(--accent); font-size: 15px; }
.landing-admin-link {
  font-size: 10.5px; color: var(--text-faint); text-decoration: none;
  border: 1px solid var(--line); padding: 6px 14px; border-radius: var(--radius-sm);
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono);
}
.landing-admin-link:hover { color: var(--accent); border-color: var(--accent-dim); }

.landing-hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; max-width: 680px; margin: 0 auto;
}
.landing-eyebrow {
  font-size: 10.5px; letter-spacing: 0.35em; color: var(--accent); margin-bottom: 24px;
  text-transform: uppercase; font-family: var(--font-mono);
  padding: 8px 0; display: inline-block;
}
[data-skin="scanner"] .landing-eyebrow {
  border-top: 1px solid var(--accent-dim); border-bottom: 1px solid var(--accent-dim);
}
.landing-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.16; margin: 0 0 24px; letter-spacing: -0.015em;
  color: var(--text);
}
.landing-title::after { content: none; }
.landing-desc {
  color: var(--text-dim); font-size: 13.5px; line-height: 1.8; max-width: 500px; margin: 0 0 36px;
  font-weight: 400;
}
.landing-desc code {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 6px; color: var(--cyan); font-size: 12px;
}
.landing-hint { margin-top: 14px; font-size: 11px; color: var(--text-faint); }

.discord-login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: #5865F2; color: #fff; text-decoration: none;
  padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  letter-spacing: 0.03em; box-shadow: 0 10px 26px -8px rgba(88, 101, 242, 0.4);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
  text-transform: uppercase;
}
.discord-login-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(88, 101, 242, 0.5); }

.landing-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; max-width: 932px; margin: 74px auto 60px; width: calc(100% - 48px);
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.feature-card {
  background: var(--bg-panel); border: none; border-radius: 0;
  padding: 26px 22px; text-align: left;
  transition: background-color 0.18s ease;
  border-top: 2px solid transparent;
}
.feature-card:hover { background: var(--bg-panel-2); border-top-color: var(--accent); }
.feature-icon { font-size: 18px; margin-bottom: 14px; opacity: 0.85; filter: grayscale(0.3); }
.feature-title {
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; margin-bottom: 8px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.feature-desc { font-size: 12px; color: var(--text-dim); line-height: 1.65; }

/* ── Échelle de police globale (accessibilité — réglable depuis Support) ─
   --ui-font-scale est lu/écrit en JS (app.js) et persisté en localStorage.
   1 = taille par défaut (déjà légèrement agrandie par rapport à V2.9.5). */
:root { --ui-font-scale: 1.08; }
body { zoom: var(--ui-font-scale); }

.font-scale-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.font-scale-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.font-scale-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-panel-2); color: var(--text); font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; cursor: var(--c3d-curseur-main, pointer); display: flex; align-items: center; justify-content: center;
}
.font-scale-btn:hover { border-color: var(--accent); color: var(--accent); }
.font-scale-btn.small { font-size: 10px; }
.font-scale-btn.big { font-size: 16px; }
.font-scale-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); min-width: 42px; text-align: center; }
.font-scale-reset { font-size: 10.5px; color: var(--text-faint); background: none; border: none; text-decoration: underline; cursor: var(--c3d-curseur-main, pointer); }
.font-scale-reset:hover { color: var(--accent); }

/* ── Portail joueur ───────────────────────────────────────────────────── */
.portal-user { display: flex; align-items: center; gap: 12px; }
.me-avatar {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  object-fit: cover; background: var(--bg-panel-2);
}
#me-username { font-size: 13px; color: var(--text-dim); }
.portal-logout {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 7px 12px; border-radius: 3px; font-size: 11px; cursor: var(--c3d-curseur-main, pointer);
}
.portal-logout:hover { color: var(--red); border-color: var(--red-dim); }

.portal-content { padding: 24px 28px 48px; max-width: 1100px; margin: 0 auto; }
.portal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap);
}
@media (max-width: 780px) { .portal-grid { grid-template-columns: 1fr; } }

.pcard {
  position: relative;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px 22px; box-shadow: var(--shadow-card);
}
[data-skin="scanner"] .pcard::before {
  content: "";
  position: absolute; top: -1px; left: -1px; width: 18px; height: 18px;
  border-top: 1px solid var(--accent-dim); border-left: 1px solid var(--accent-dim);
  opacity: 0.9;
}
[data-skin="scanner"] .pcard::after {
  content: "";
  position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px;
  border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim);
  opacity: 0.9;
}
.pcard-head {
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.pcard-title {
  font-family: var(--head-font); font-weight: 600; font-size: 11.5px;
  letter-spacing: var(--head-tracking); color: var(--accent); text-transform: var(--head-transform);
}
[data-skin="scanner"] .pcard-title::before { content: "// "; color: var(--text-faint); }

/* ── Densité : listes longues avec scroll interne au lieu de pousser
     la page en hauteur. S'applique à tous les panneaux qui réutilisent
     ces classes génériques (membres corpo, marché, classement, succès,
     tickets support, browse corpo...). ────────────────────────────── */
.depot-list, .inventory-list {
  max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.depot-list { scrollbar-width: thin; }
.depot-list::-webkit-scrollbar, .inventory-list::-webkit-scrollbar { width: 6px; }
.depot-list::-webkit-scrollbar-thumb, .inventory-list::-webkit-scrollbar-thumb {
  background: var(--line-soft, var(--line)); border-radius: 3px;
}

/* ── Densité : grilles 2 colonnes pour les listes/formulaires génériques
     au lieu d'un empilement plein-largeur sur 1 colonne. ─────────────── */
.depot-list, .colony-bonus-list, .industry-recipes-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 780px) {
  .depot-list, .colony-bonus-list, .industry-recipes-list { grid-template-columns: 1fr; }
}

.corp-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start;
}
.corp-form .corp-textarea, .corp-form textarea, .corp-form button, .corp-form .corp-label {
  grid-column: 1 / -1;
}
@media (max-width: 780px) { .corp-form { grid-template-columns: 1fr; } }

.pilot-card { grid-column: 1 / -1; }

/* ── Carte Pilote : colonne principale + colonne annonce (portrait) — V3.1.0 ── */
.pilot-card-body { display: flex; align-items: stretch; gap: 20px; }
.pilot-card-main { flex: 1 1 auto; min-width: 0; }

/* ── Bandeau "Annonce importante" (administrable, carte Pilote) ──────────
   Colonne verticale ("portrait") accolée à droite du contenu pilote,
   même hauteur que la colonne principale grâce à align-items:stretch. ── */
.announcement-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 260px; flex-shrink: 0;
  padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--bg-panel-2);
}
.announcement-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.announcement-banner-body { min-width: 0; }
.announcement-banner-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; color: var(--text); }
.announcement-banner-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.announcement-banner.color-amber { border-left-color: var(--amber, #d4af37); }
.announcement-banner.color-cyan  { border-left-color: var(--cyan, #37c6d4); }
.announcement-banner.color-red   { border-left-color: var(--red, #d44b37); }
.announcement-banner.color-green { border-left-color: var(--green, #3fbf6b); }

@media (max-width: 780px) {
  .pilot-card-body { flex-direction: column; }
  .announcement-banner { width: 100%; }
}

.pilot-card-head-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.pilot-avatar-wrap {
  position: relative; width: 56px; height: 56px; flex-shrink: 0; cursor: var(--c3d-curseur-main, pointer);
}
.pilot-avatar-img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); background: var(--bg-panel-2); display: block;
}
.pilot-avatar-edit {
  position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  color: var(--text-dim);
}
.pilot-avatar-wrap:hover .pilot-avatar-edit { color: var(--cyan); border-color: var(--cyan-dim); }
.pilot-avatar-reset {
  font-size: 10px; color: var(--text-dim); background: none; border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 6px; cursor: var(--c3d-curseur-main, pointer); margin-left: 8px;
}
.pilot-avatar-reset:hover { color: var(--red); border-color: var(--red-dim); }

/* ── Navigation latérale groupée par catégories ───────────────────────── */
.portal-layout { display: flex; gap: var(--layout-gap); margin: 28px 0 20px; align-items: flex-start; }

.portal-sidenav {
  width: 200px; flex-shrink: 0; position: sticky; top: 20px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 6px;
}
/* V3.45.4 — libellé de catégorie cliquable (accordéon) + compactage */
.sidenav-group-label {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: none; cursor: var(--c3d-curseur-main, pointer);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); padding: 5px 8px; font-family: var(--font-mono);
  transition: color 0.15s;
}
.sidenav-group-label:hover { color: var(--text-dim); }
.sidenav-group-label::before {
  content: "\25B8"; font-size: 8px; line-height: 1; transition: transform 0.15s;
}
.sidenav-group.open > .sidenav-group-label::before { transform: rotate(90deg); }
.sidenav-group-items { display: none; }
.sidenav-group.open > .sidenav-group-items { display: block; }
.portal-sidenav .portal-tab {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-left: 2px solid transparent; color: var(--text-dim);
  padding: 4px 8px; border-radius: 0; font-size: 11px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: 0.01em; cursor: var(--c3d-curseur-main, pointer);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.portal-sidenav .portal-tab:hover { color: var(--text); background: var(--bg-panel-2); }

/* Entrée de menu qui ouvre une fenêtre au lieu de changer d'onglet : même
   apparence que les onglets, sans état actif (V3.68.0). */
.portal-sidenav .sidenav-action {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-left: 2px solid transparent; color: var(--text-dim);
  padding: 4px 8px; border-radius: 0; font-size: 11px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: 0.01em; cursor: var(--c3d-curseur-main, pointer);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.portal-sidenav .sidenav-action:hover { color: var(--text); background: var(--bg-panel-2); }

/* V3.71.0 — sous-section « Option de commande » du menu Aide (spéc. v5 § 4).
   Un simple décrochement à gauche suffit à marquer la hiérarchie : les
   entrées restent des actions de menu, pas des onglets. */
.portal-sidenav .sidenav-subgroup { margin: 4px 0 2px; padding-left: 6px; border-left: 1px solid var(--border, rgba(255,255,255,0.08)); }
.portal-sidenav .sidenav-subgroup-label {
  padding: 3px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono);
}

/* Ligne de commande : libellé, touche, bouton de manche, effacement. */
.c3d-key-group { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.c3d-key-pad { min-width: 40px; }
.c3d-key-pad.capturing, .c3d-key-btn.capturing { color: var(--accent); }
.portal-sidenav .portal-tab.active {
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); border-left-color: var(--accent);
  font-weight: 600;
}

/* ── Sidenav "fixe" côté gauche de la fenêtre (bureau uniquement) ─────────
   Au-delà de 781px de large, le menu se détache du flux et reste épinglé
   au bord gauche de la fenêtre (position: fixed), quel que soit le défilement.
   Le corps de page (portal-main) récupère toute la largeur ainsi libérée
   au lieu de rester contraint par le max-width centré de .portal-content. */
@media (min-width: 781px) {
  .portal-content { max-width: none; padding-left: 280px; }
  .portal-layout { display: block; }
  .portal-sidenav {
    /* V3.59.3 — décalé de la hauteur du fil d'Ariane : le haut du menu
       s'aligne sur le haut du panneau de jeu, sur toutes les pages. */
    position: fixed; top: calc(var(--sidenav-top, 84px) + var(--crumb-h)); left: 24px; width: 200px;
    max-height: calc(100vh - var(--sidenav-top, 84px) - var(--crumb-h) - 24px);
    overflow-y: auto; z-index: 40;
  }
  .portal-main { width: 100%; }
}
@media (min-width: 1400px) {
  .portal-content { max-width: 1600px; margin: 0 auto; }
}

.sidenav-group:first-child > .sidenav-group-label { padding-top: 2px; }

/* V3.82.6 — entrée de menu de premier niveau (hors rubrique) : même style que
   les onglets, avec un léger décalage vertical pour la détacher des groupes. */
.portal-sidenav .portal-tab.sidenav-solo { margin: 3px 0; }

.sidenav-toggle { display: none; }
.portal-main { flex: 1; min-width: 0; }
.portal-breadcrumb {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan);
  /* Hauteur fixe (V3.59.3) : le menu et le rail s'alignent dessus. */
  line-height: var(--crumb-line); height: var(--crumb-line);
  margin-bottom: var(--crumb-gap);
  display: flex; align-items: center;
}
.portal-tabpanels .portal-panel { grid-column: 1 / -1; }

@media (max-width: 780px) {
  .portal-layout { flex-direction: column; }
  .portal-sidenav { width: 100%; position: static; padding: 0; border: none; background: none; }
  .sidenav-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text);
    padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    font-family: var(--font-display); cursor: var(--c3d-curseur-main, pointer);
  }
  .sidenav-toggle-caret { color: var(--text-faint); transition: transform 0.15s; }
  .sidenav-toggle[aria-expanded="true"] .sidenav-toggle-caret { transform: rotate(180deg); }
  .sidenav-groups {
    display: none; margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 10px 8px; max-height: 60vh; overflow-y: auto;
  }
  .sidenav-groups.open { display: block; }
}

/* ── Carte "Activités" (Minage / Combat / Explorer / Xénobiologie) ───────── */
.activities-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.activity-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: var(--radius); padding: 16px 10px; font-size: 20px; cursor: var(--c3d-curseur-main, pointer);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.activity-btn span {
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.activity-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.activity-btn.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent-dim); }
@media (max-width: 780px) {
  .portal-tabs { gap: 8px; }
  .portal-tab { flex: 1 1 calc(50% - 8px); text-align: center; padding: 10px 8px; }
}
.pilot-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 16px; }
/* ── Progression (niveau / XP / titres) — miroir de src/progression.js ── */
.pilot-progression { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.pilot-progression-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilot-level-badge {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid var(--amber-dim); border-radius: 14px; padding: 4px 12px;
}
.pilot-title-chip {
  font-size: 11px; font-weight: 600; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid var(--cyan-dim); border-radius: 14px; padding: 3px 10px;
}
.pilot-progression-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.pilot-title-select-row { margin-top: 2px; }

.pilot-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.pilot-stat { display: flex; flex-direction: column; gap: 4px; }
.pilot-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.pilot-stat-value { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.pilot-stat-value.amber { color: var(--amber); }
.pilot-stat-value.cyan { color: var(--cyan); }

.ship-card-body { display: flex; gap: 18px; align-items: flex-start; }
.ship-info { flex: 1; min-width: 0; }
.ship-image-box {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--bg-panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ship-image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ship-image-placeholder { font-size: 30px; opacity: 0.35; }
@media (max-width: 480px) { .ship-image-box { width: 72px; height: 72px; } }

.ship-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-label { font-size: 10px; color: var(--text-faint); width: 62px; flex-shrink: 0; }
.bar-track {
  flex: 1; height: 8px; border-radius: 4px; background: var(--bg-panel-2);
  border: 1px solid var(--line); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
/* 📏 UNE BARRE DANS UNE COLONNE GARDE SA HAUTEUR.
 *
 * `.bar-track` porte `flex: 1`, qui vaut `flex-basis: 0%`. Dans un conteneur
 * en LIGNE — le `.bar-row` pour lequel la règle a été écrite — la base
 * remplace la largeur, et la barre s'étire sur toute la place disponible :
 * c'est ce qu'on veut. Dans un conteneur en COLONNE, la base remplace la
 * HAUTEUR : `height: 8px` est purement ignorée et la barre grandit pour
 * remplir la carte.
 *
 * L'arbre de compétences pose ses barres dans `.depot-row-info`, qui est en
 * colonne. Mesuré : 192 px de haut au lieu de 8. Le défaut est ancien — il
 * est identique en V3.85.1 — et ne concerne QUE ce cas : les deux autres
 * barres du portail, celle des points de vie en combat et celle du réservoir
 * à la boutique, vivent dans un `.bar-row` et ne bougent pas. */
.depot-row-info > .bar-track { flex: 0 0 8px; }
.bar-fill.amber { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
.bar-fill.cyan { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.bar-value { font-size: 10px; color: var(--text-dim); width: 70px; text-align: right; flex-shrink: 0; }
/* V3.19.0 - etat "surcharge" du cargo (cargo utilise > capacite) */
.bar-fill.over { background: linear-gradient(90deg, var(--red-dim), var(--red)); }
.bar-value.over, .sticky-value.over, .cargo-used-label.over, #cargo-used-label.over { color: var(--red); font-weight: 600; }
.ship-system { margin-top: 10px; font-size: 11px; color: var(--text-faint); }

.explore-card { grid-column: 1 / -1; }
.explore-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.explore-visited { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.explore-current {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 14px; background: var(--bg-panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.explore-current-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.explore-current-sec { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.explore-docked { font-size: 11px; color: var(--cyan); }
.explore-section { margin-bottom: 6px; }
.explore-section-title { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.explore-map-toggle { display: flex; align-items: center; justify-content: space-between; cursor: var(--c3d-curseur-main, pointer); user-select: none; }
.explore-map-toggle:hover { color: var(--cyan-dim); }
.explore-map-toggle-caret { font-size: 13px; transition: transform 0.15s ease; }

/* V2.6.1 — Carte des Systèmes mise en avant en haut de l'onglet Explorer */
.explore-map-section-featured {
  border: 1px solid var(--cyan-dim, #2a5f6b);
  background: linear-gradient(180deg, rgba(64, 200, 220, 0.07), rgba(64, 200, 220, 0.015));
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: 0 0 18px rgba(64, 200, 220, 0.08);
}
.explore-map-featured-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan, #6fe3ff);
  text-transform: none;
  margin-bottom: 12px;
}
.explore-connections, .explore-pois { display: flex; gap: 12px; flex-wrap: wrap; }
.explore-minerdef-hint { font-size: 12px; color: var(--text-faint); margin: 4px 0 10px; }
.explore-minerdef-zones { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.minerdef-zone { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.minerdef-zone-head { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.minerdef-zone-list { display: flex; flex-direction: column; gap: 3px; }
.minerdef-zone-row { font-size: 11.5px; color: var(--text-faint); }
.minerdef-zone-more { font-style: italic; opacity: 0.7; }
.minerdef-zone-empty { font-size: 11.5px; color: var(--text-faint); font-style: italic; }
.btn-explore {
  min-width: 160px; flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line);
  color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); text-align: left;
  font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s;
}
.btn-explore:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); }
.btn-explore:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-explore .explore-dest-name { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.btn-explore .explore-dest-meta { display: block; font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.btn-explore .explore-dest-meta .fuel { color: var(--amber); }
.btn-explore.unknown .explore-dest-name { color: var(--text-dim); }

.btn-poi {
  min-width: 200px; flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line);
  color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); text-align: left;
  font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s;
}
.btn-poi:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); }
.btn-poi:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-poi .poi-name { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.btn-poi .poi-desc { display: block; font-size: 10px; color: var(--text-faint); line-height: 1.5; }
.btn-poi .poi-cd { display: block; margin-top: 6px; font-size: 10px; color: var(--red); font-family: var(--font-mono); }

.mine-card { grid-column: 1 / -1; }
.mine-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.6; }
.mine-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-mine {
  flex: 1; min-width: 140px; background: var(--bg-panel-2); border: 1px solid var(--line);
  color: var(--text); padding: 14px 16px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
}
.btn-mine span { font-size: 10px; color: var(--amber); font-weight: 500; font-family: var(--font-mono); }
.btn-mine:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); }
.btn-mine:disabled { opacity: 0.4; cursor: not-allowed; }

.mine-countdown {
  font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--cyan);
  letter-spacing: 0.05em;
}

/* Encart "vaisseau en expédition" (V3.1.5) — affiché à côté du timer pendant
   une Expédition Stellaire en cours.
   Correctif (VX.XX) — l'encart était plaqué en haut de la colonne de droite
   et trop petit. Il reste sur le côté droit (comme voulu), mais est
   maintenant centré verticalement sur toute la hauteur du bloc actif et
   agrandi (voir capture "ajustement.jpg"). */
.expedition-active-row { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.expedition-active-main { flex: 1; min-width: 220px; }
.expedition-ship-box {
  width: 260px; flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 20px;
  display: flex; flex-direction: column; justify-content: center;
  align-self: center;
}
.expedition-ship-image-box {
  /* V3.17.0 — le cadre s'adapte désormais à la largeur de la carte (ratio 16/9)
     au lieu d'une hauteur fixe de 130 px : combiné à `object-fit: contain`
     ci-dessous, l'illustration du vaisseau n'est plus rognée (le titre incrusté
     en bas des visuels était coupé). Même convention que les autres visuels
     fournis par l'administration sur le site (.npcpilot-card img). */
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.expedition-ship-image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.expedition-ship-image-placeholder { font-size: 38px; opacity: 0.35; }
.expedition-ship-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.expedition-ship-stats { display: flex; flex-direction: column; gap: 9px; }
.expedition-ship-stat { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.expedition-ship-stat-label { color: var(--text-faint); }
.expedition-ship-stat-value { font-family: var(--font-mono); color: var(--amber); font-weight: 600; }
@media (max-width: 560px) { .expedition-ship-box { width: 100%; align-self: stretch; } }

.btn-collect {
  background: var(--green); color: #06210f; border: none; padding: 14px 26px;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-display); transition: filter 0.15s;
  animation: btn-pulse 1.6s ease-out infinite;
}
.btn-collect:hover { filter: brightness(1.1); animation-play-state: paused; }

.mine-result {
  margin-top: 16px; padding: 14px 16px; background: rgba(95, 216, 143, 0.08);
  border: 1px solid var(--green); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.8;
}
.mine-error { margin-top: 10px; font-size: 12px; color: var(--red); min-height: 14px; }

/* PvP — Duels (V2.4) */
.depot-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm); font-size: 12px;
}
.depot-item span { flex: 1; }
.qty-input {
  padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.25); color: var(--text, #fff); font-size: 12px;
}

.inventory-card { grid-column: 1 / -1; }
.inventory-list { display: flex; flex-wrap: wrap; gap: 10px; }
.inv-item {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 11px; min-width: 120px;
}
.inv-item-name { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.inv-item-qty { color: var(--text-dim); }
.inv-item-val { color: var(--amber); font-size: 10px; margin-top: 2px; }
.inv-empty { color: var(--text-faint); font-size: 12px; }

/* ── Carte Dépôt-Vente ────────────────────────────────────────────────── */
.depot-card { grid-column: 1 / -1; }
.depot-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.depot-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-tab {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  font-family: var(--font-display); letter-spacing: 0.02em; cursor: var(--c3d-curseur-main, pointer);
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.shop-tab:hover { color: var(--text); border-color: var(--cyan-dim, var(--cyan)); }
.shop-tab:active { transform: translateY(1px); }
.shop-tab.active {
  background: var(--cyan); color: #04141a; border-color: var(--cyan);
}
@media (max-width: 780px) {
  .shop-tab { flex: 1 1 calc(50% - 8px); text-align: center; padding: 8px 6px; }
}
.depot-tab {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 12px;
  font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s;
}
.depot-tab:hover { color: var(--text); border-color: var(--cyan-dim); }
.depot-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); }

.depot-list { display: flex; flex-direction: column; gap: 8px; }
.depot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px;
}
/* V3.56.0 — largeur mini forcée sur le bloc info + le bloc actions toujours
   poussé/aligné à droite (et repassant sur sa propre ligne, toujours aligné
   à droite, dès que ça ne tient plus), quelle que soit la largeur de la
   fenêtre du joueur, pour garder tous les boutons "Acheter" alignés entre eux. */
.depot-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.depot-row-name { font-size: 12px; font-weight: 600; color: var(--text); }
.depot-row-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.depot-row-price { font-size: 12px; color: var(--amber); font-weight: 600; white-space: nowrap; }
.depot-row-desc { font-size: 10px; color: var(--text-faint); white-space: pre-line; }
.corp-assembled-row { align-items: flex-start; }
.depot-row-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex: 0 1 auto; margin-left: auto;
}
@media (max-width: 640px) {
  .depot-row-actions { flex-basis: 100%; }
}

/* ── V3.57.1 — Marché : alignement des boutons "Acheter" ────────────────────
   Les lignes du marché passent en grille 2 colonnes : la colonne de gauche
   (nom + description) se replie sur plusieurs lignes dans sa propre colonne,
   la colonne de droite (prix + bouton) garde une largeur réservée et reste
   collée au bord droit. Résultat : tous les boutons "Acheter" sont alignés
   entre eux quelle que soit la longueur du descriptif et la taille de la
   fenêtre du joueur. Sous 560px, tout s'empile proprement. */
.depot-row.shop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
}
.shop-row .depot-row-info { flex: initial; min-width: 0; overflow-wrap: anywhere; }
.shop-row .shop-row-stats, .shop-row .depot-row-name { overflow-wrap: anywhere; }
.shop-row .depot-row-actions {
  margin-left: 0; flex: initial; flex-wrap: nowrap;
  justify-content: flex-end; min-width: 180px;
}
.shop-row .depot-row-price { flex: 1 1 auto; text-align: right; }
.shop-row .btn-depot { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .depot-row.shop-row { grid-template-columns: minmax(0, 1fr); }
  .shop-row .depot-row-actions { min-width: 0; flex-basis: auto; }
}
.depot-qty-input {
  width: 56px; background: var(--bg-panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: var(--font-mono); text-align: center;
}
.btn-depot {
  background: var(--bg-panel); border: 1px solid var(--cyan-dim); color: var(--cyan);
  padding: 7px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 11px; font-weight: 600;
  font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s;
}
.btn-depot:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); }
.btn-depot:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-depot.danger { border-color: var(--red-dim); color: var(--red); }
.btn-depot.danger:hover:not(:disabled) { border-color: var(--red); }
.depot-empty { color: var(--text-faint); font-size: 12px; }

/* Joueurs présents dans le système (carte "Vaisseau actif" — V3.5.0) */
.players-in-system { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.players-in-system-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm); font-size: 12px;
}
.players-in-system-empty { color: var(--text-faint); font-size: 12px; }
/* V3.55.0 — deux actions par pilote : invitation d'escadrille puis défi. Sur
   mobile, elles passent à la ligne plutôt que de comprimer le nom du pilote. */
.players-in-system-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.players-in-system-item { flex-wrap: wrap; }
.players-in-system-name {
  cursor: var(--c3d-curseur-main, pointer); color: var(--cyan); text-decoration: none;
  border-bottom: 1px dashed transparent; transition: border-color 0.15s;
}
.players-in-system-name:hover, .players-in-system-name:focus { border-bottom-color: var(--cyan); outline: none; }

/* Carte Escadrille — composition du groupe (V3.6.0) */
#squadron-card .pcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.squadron-empty { margin-top: 8px; font-size: 0.92em; line-height: 1.4; }
.squadron-members { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.squadron-leader-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.squad-activity-log { margin-top: 10px; font-size: 0.85em; opacity: 0.85; line-height: 1.4; }
#squad-activity-actions, #squad-launch-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Hangar spatial (miroir du panneau Discord) ──────────────────────────── */
.hangar-card { grid-column: 1 / -1; }
.hangar-ships-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.hangar-ship-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
  cursor: var(--c3d-curseur-main, pointer); transition: border-color 0.15s, transform 0.1s;
}
.hangar-ship-row:hover { border-color: var(--amber-dim); transform: translateY(-1px); }
.hangar-ship-row.active { border-color: var(--green); background: rgba(95, 216, 143, 0.06); }
.hangar-ship-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hangar-ship-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-display); }
.hangar-ship-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.hangar-ship-badge {
  font-size: 10px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.hangar-ship-badge.active { border-color: var(--green); color: var(--green); }
.hangar-ship-badge.citeperdue { border-color: #d4af37; color: #d4af37; }
.hangar-ship-badge.combat { border-color: var(--red-dim); color: var(--red); }
.hangar-ship-badge.exploration { border-color: var(--cyan-dim); color: var(--cyan); }
.hangar-empty { color: var(--text-faint); font-size: 12px; }

.hangar-editor-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.hangar-editor-sub { font-size: 11px; color: var(--text-faint); margin-bottom: 14px; }
.hangar-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  margin-bottom: 18px;
}
.hangar-stat-box {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.hangar-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.hangar-stat-value { font-size: 15px; font-weight: 700; color: var(--cyan); font-family: var(--font-display); }
.hangar-stat-value .bonus { font-size: 10px; color: var(--green); font-weight: 500; margin-left: 4px; }

.hangar-slots-title { font-size: 12px; font-weight: 700; color: var(--text); margin: 4px 0 10px; }
.hangar-slots-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hangar-slot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 12px;
}
.hangar-slot-row.empty { color: var(--text-faint); font-style: italic; }
/* V3.96.4 — fit par slot : libelle fixe a gauche, liste deroulante extensible. */
.hangar-slot-label { flex-shrink: 0; font-weight: 700; color: var(--text-faint); font-family: var(--font-mono); }
.hangar-slot-row .hangar-slot-select { padding: 6px 8px; }
.hangar-slot-dur { font-size: 10px; color: var(--amber); font-family: var(--font-mono); }

.hangar-npc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.hangar-npc-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px;
}
.hangar-npc-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.hangar-npc-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bg-panel); }
.hangar-npc-info { flex: 1; min-width: 0; }
.hangar-npc-name { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hangar-npc-badge { font-size: 9px; font-weight: 500; color: var(--green); border: 1px solid var(--green-dim, var(--green)); border-radius: 999px; padding: 1px 8px; }
.hangar-npc-badge-off { color: var(--text-faint); border-color: var(--line); }
.hangar-npc-bonus { font-size: 11px; color: var(--cyan); margin-top: 2px; }
.hangar-npc-desc { font-size: 11px; color: var(--text-faint); margin-top: 3px; line-height: 1.4; }
.hangar-npc-expiry { font-size: 10px; color: var(--amber); font-family: var(--font-mono); margin-top: 4px; }

.hangar-select-row { display: flex; gap: 8px; margin-bottom: 12px; }
.hangar-select {
  flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 10px; font-size: 12px; font-family: var(--font-mono);
}

.hangar-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-hangar-danger {
  background: var(--bg-panel); border: 1px solid var(--red-dim); color: var(--red);
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 12px; font-weight: 600;
  font-family: var(--font-display);
}
.btn-hangar-danger:hover:not(:disabled) { border-color: var(--red); }
.btn-hangar-success {
  background: var(--bg-panel); border: 1px solid var(--green); color: var(--green);
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 12px; font-weight: 600;
  font-family: var(--font-display);
}
.btn-hangar-success:hover:not(:disabled) { filter: brightness(1.1); }
.btn-hangar-success:disabled, .btn-hangar-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Marché (boutique PNJ) ─────────────────────────────────────────────── */
.shop-row-stats { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.shop-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--cyan-dim); color: var(--cyan); white-space: nowrap; }
.shop-badge.owned { border-color: var(--text-faint); color: var(--text-faint); }

/* V2.6.1 — Nom personnalisé de vaisseau (affiché à gauche du nom de classe) */
.ship-custom-name { color: var(--amber); font-weight: 700; margin-right: 6px; }
.ship-custom-name::after { content: '·'; color: var(--text-faint); font-weight: 400; margin-left: 6px; }

.hangar-rename-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--cyan-dim, #2a5f6b); border-radius: 8px;
}
.hangar-rename-current { font-size: 14px; font-weight: 700; color: var(--text); }

/* V2.6.1 — Modale de nommage/renommage de vaisseau */
.shipname-modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 14, 0.82);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
  padding: 16px;
}
/* V3.45.5 — les modales sont déplacées en enfants directs de <body> au
   chargement (voir app.js). Sans cela, dans la disposition Cockpit, la
   grille et les colonnes collantes les recouvraient partiellement : seule
   une bande centrale du message restait lisible. */
.shipname-modal {
  background: var(--panel-bg, #0d1620); border: 1px solid var(--cyan-dim, #2a5f6b);
  border-radius: 10px; padding: 20px; width: 100%; max-width: 420px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.shipname-modal-title { font-size: 14px; font-weight: 700; color: var(--cyan, #6fe3ff); margin-bottom: 14px; }
.shipname-modal-label { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.shipname-modal-row { display: flex; align-items: center; gap: 8px; }
.shipname-modal-input {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--cyan-dim, #2a5f6b);
  border-radius: 6px; padding: 8px 10px; color: var(--text, #e6f4f8); font-size: 13px;
}
.shipname-modal-input:focus { outline: none; border-color: var(--cyan, #6fe3ff); }
.shipname-modal-info {
  cursor: help; font-size: 15px; opacity: 0.85; user-select: none; flex-shrink: 0;
}
.shipname-modal-info:hover { opacity: 1; }
.shipname-modal-count { text-align: right; font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.shipname-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.npcpilot-detail-modal { max-width: 420px; }
.npcpilot-detail-image {
  width: 100%; aspect-ratio: 3 / 4; max-height: 340px; object-fit: contain; object-position: center;
  background: var(--bg-panel-2); border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 12px;
}
.npcpilot-detail-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; white-space: pre-wrap; }
.npcpilot-detail-bonuses { font-size: 12px; color: var(--text); line-height: 1.7; margin-bottom: 8px; }
.npcpilot-detail-price { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.npcpilot-card { cursor: var(--c3d-curseur-main, pointer); }
.npcpilot-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain; object-position: center;
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.shop-category-title { font-size: 12px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.shop-category-title:first-child { margin-top: 0; }
.shop-fuel-bar-wrap { margin-bottom: 16px; }
.shop-fuel-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Carte Cargo & Dépôt Prime-A ─────────────────────────────────────────── */
.cargo-card { grid-column: 1 / -1; }
.cargo-section { margin-top: 12px; }
.cargo-section:first-of-type { margin-top: 4px; }
.cargo-section-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.cargo-section-title {
  font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cargo-bulk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-cargo-bulk {
  background: var(--bg-panel-2); border: 1px solid var(--amber-dim, var(--cyan-dim)); color: var(--amber, var(--cyan));
  padding: 7px 12px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 11px; font-weight: 700;
  font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s;
}
.btn-cargo-bulk:hover:not(:disabled) { border-color: var(--amber, var(--cyan)); transform: translateY(-1px); }
.btn-cargo-bulk:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Carte Combat ─────────────────────────────────────────────────────── */
.combat-card { grid-column: 1 / -1; }
.combat-ship-row { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.combat-streak { font-size: 11px; color: var(--amber); font-weight: 500; margin-left: 8px; }
.combat-stat-line { font-size: 11px; color: var(--text-dim); margin: 6px 0 10px; }
.combat-repair-btn { width: auto; padding: 8px 14px; font-size: 11px; }

.combat-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin: 4px 0 10px;
}
.combat-ship-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-btn {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 7px 12px; border-radius: 14px; font-size: 11px; cursor: var(--c3d-curseur-main, pointer);
}
.chip-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line-soft); }
.chip-btn.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.chip-btn:disabled { cursor: var(--c3d-curseur, default); }

.combat-enemy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.combat-enemy-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.combat-enemy-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.combat-enemy-type { font-size: 10px; color: var(--text-faint); font-weight: 400; }
.combat-enemy-stats { font-size: 11px; color: var(--text-dim); }

.combat-vs { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.combat-enemy-info { margin: -6px 0 10px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: var(--radius); }
.combat-enemy-info .combat-stat-line { margin: 2px 0; }
.combat-vs-side { flex: 1; }
.combat-vs-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.combat-vs-mid { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); }

.combat-log {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 11px; color: var(--text-dim); line-height: 1.7;
  max-height: 160px; overflow-y: auto; margin-bottom: 14px;
}

.combat-ability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.combat-ability-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.combat-ability-btn span { font-size: 10px; color: var(--text-faint); }
.combat-ability-btn:disabled { opacity: 0.4; cursor: var(--c3d-curseur, default); }

.combat-outcome { text-align: center; padding: 10px 0; }
.combat-outcome-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.combat-outcome-desc { font-size: 12px; color: var(--text-dim); line-height: 1.8; margin-bottom: 16px; }
.combat-outcome-warn { color: var(--red); }

/* ── Industrie & Production (miroir du panneau Discord — src/industry.js) ─ */
.industry-card { grid-column: 1 / -1; }
.industry-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.industry-slotbar-row { display: flex; align-items: center; }
.industry-slotbar {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px; color: var(--amber);
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px;
}
.industry-tab {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 12px;
  font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s;
}
.industry-tab:hover { color: var(--text); border-color: var(--cyan-dim); }
.industry-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); }

.industry-recipes-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.industry-recipe-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.industry-recipe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.industry-recipe-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-display); }
.industry-recipe-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }
.industry-recipe-desc { font-size: 11px; color: var(--text-dim); }
.industry-recipe-inputs { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; font-family: var(--font-mono); }
.industry-recipe-input.ok { color: var(--green); }
.industry-recipe-input.missing { color: var(--red); }
.industry-recipe-card .btn-depot { align-self: flex-start; }

/* ── Colonies & Territoire (miroir du panneau Discord — src/colonies.js) ─ */
.colony-card { grid-column: 1 / -1; }
.colony-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.colony-summary-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; cursor: var(--c3d-curseur-main, pointer); transition: border-color 0.15s, transform 0.15s;
}
.colony-summary-card:hover { border-color: var(--amber-dim); transform: translateY(-1px); }
.colony-summary-card.warn { border-color: var(--red-dim, var(--red)); }
.colony-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.colony-summary-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.colony-summary-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.colony-bar { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--cyan); }
/* 🧱 V3.90.8 — Barre segmentée (« aspect A »), en remplacement des `█░`.
   Dix crans dessinés : le cran est l'unité de lecture, on voit 7/10 sans lire
   le chiffre. Les crans allumés sont peints en `currentColor` : la barre prend
   donc la couleur de la ligne qui la porte (vert pour .pop, ambre pour
   .storage, cyan pour .repair) sans une seule variante de classe.
   `letter-spacing` est neutralisé : hérité de .colony-bar, il ajoutait 1 px
   fantôme après chaque cran et décalait le dernier hors de la barre. */
.seg-bar {
  display: inline-flex; gap: 3px; width: 108px; height: 9px;
  vertical-align: -1px; letter-spacing: 0;
}
.seg-cell {
  flex: 1; border-radius: 2px;
  background: var(--bg-panel-2); border: 1px solid var(--line);
}
.seg-cell.on { background: currentColor; border-color: transparent; }
/* Seul le dernier cran acquis respire : c'est là que se joue la progression,
   et une barre entière qui pulse serait un gyrophare. */
.seg-cell.seg-live { animation: seg-pulse 1.8s ease-in-out infinite; }
@keyframes seg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .seg-cell.seg-live { animation: none; }
}
.colony-bar.pop { color: var(--green); }
.colony-bar.storage { color: var(--amber); }
.colony-bar.repair { color: var(--cyan); }
.colony-stat-row { font-size: 11px; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; }
.colony-warn-text { font-size: 11px; color: var(--red); font-weight: 600; }
.colony-ok-text { font-size: 11px; color: var(--green); }

.colony-sub-tab {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer); font-size: 12px;
  font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s;
}
.colony-sub-tab:hover { color: var(--text); border-color: var(--cyan-dim); }
.colony-sub-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.colony-sub-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

.colony-section-title {
  font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px;
}
.colony-bonus-list { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); }
.colony-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.colony-select {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-mono); width: 100%;
}
.colony-npc-alert {
  background: rgba(220, 38, 38, 0.1); border: 1px solid var(--red-dim, var(--red)); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 11px; color: var(--red);
}

/* ── Corporations (miroir du panneau Discord — src/corporations.js) ────── */
.corp-card { grid-column: 1 / -1; }
.corp-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }

.corp-form { display: flex; flex-direction: column; gap: 8px; }
.corp-label { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.corp-input {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 10px; border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-mono); width: 100%;
  box-sizing: border-box;
}
.corp-input:focus { outline: none; border-color: var(--cyan-dim); }
.corp-textarea { resize: vertical; min-height: 56px; }

.corp-browse-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.corp-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.corp-browse-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.corp-browse-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.corp-browse-desc { font-size: 11px; color: var(--text-dim); }

.corp-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 12px; flex-wrap: wrap;
}
.corp-member-name { font-weight: 600; color: var(--text); }
.corp-member-role { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.corp-member-role-select {
  background: var(--bg-panel); border: 1px solid var(--line); color: var(--text);
  padding: 6px 8px; border-radius: var(--radius-sm); font-size: 11px; font-family: var(--font-mono);
}

/* ── Factions (miroir du panneau Discord — src/factions.js) ────────────── */
.faction-card { grid-column: 1 / -1; }
.faction-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.faction-intro { font-size: 11px; color: var(--text-dim); margin: -4px 0 4px; }

/* Panneau radar (vue liste) */
.faction-radar-panel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: radial-gradient(circle at 50% 40%, var(--bg-panel-2) 0%, var(--bg-panel) 100%);
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 10px 4px; margin-bottom: 14px;
}
.faction-radar-wrap { width: 100%; max-width: 260px; }
.faction-radar-svg { width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-axis { stroke: var(--line-soft); stroke-width: 1; }
.radar-data { fill: color-mix(in srgb, var(--cyan) 18%, transparent); stroke: var(--cyan); stroke-width: 1.5; }
.radar-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.02em; }
.faction-gauge-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-faint); margin-bottom: 6px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.legend-dot--rep { background: var(--cyan); }
.legend-dot--exp { background: var(--amber); }

/* Jauges circulaires SVG (double-anneau : réputation extérieur, expansion intérieur) */
.faction-gauge-svg { display: block; }
.fg-track { stroke: var(--line-soft); }
.fg-fill { stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.fg-fill--exp { stroke: var(--amber); }

.faction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.faction-summary-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-left: 3px solid var(--faction-color, var(--line));
  border-radius: var(--radius); padding: 10px 12px; display: flex; align-items: center; gap: 12px;
  cursor: var(--c3d-curseur-main, pointer); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.faction-summary-card:hover { border-color: var(--faction-color, var(--cyan-dim)); transform: translateY(-1px); box-shadow: 0 4px 16px -6px var(--faction-color, transparent); }
.faction-summary-gauge-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.faction-summary-gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.faction-summary-body { min-width: 0; flex: 1; }
.faction-summary-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.faction-summary-tier { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.faction-summary-desc { font-size: 10px; color: var(--text-faint); font-style: italic; margin-top: 3px; }
.faction-summary-treasury { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.faction-summary-treasury .dim { color: var(--text-faint); }

.faction-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.faction-detail-gauge { position: relative; width: 132px; height: 132px; flex: none; --faction-color: var(--cyan); }
.faction-detail-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.fdg-emoji { font-size: 28px; line-height: 1; }
.fdg-pct { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.faction-detail-head-text { flex: 1; min-width: 200px; }
.faction-detail-name { font-size: 16px; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.faction-detail-desc { font-size: 12px; color: var(--text-dim); font-style: italic; margin: 4px 0 8px; }
.faction-rep-tier { font-size: 13px; font-weight: 700; color: var(--text); }
.faction-rep-next { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.faction-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.faction-info-box { background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.faction-info-label { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.faction-info-value { font-size: 12px; color: var(--text); font-weight: 600; }

.faction-module-card {
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
}
.faction-module-name { font-size: 12px; font-weight: 700; color: var(--text); }
.faction-module-desc { font-size: 11px; color: var(--text-dim); }
.faction-module-status { font-size: 11px; }
.faction-module-status.ok { color: var(--green); }
.faction-module-status.locked { color: var(--text-faint); font-style: italic; }

/* ── Missions (miroir intégral du panneau Discord — src/missions.js + src/customMissions.js) ── */
.missions-card { grid-column: 1 / -1; }
.mission-row {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
}
.mission-row.completed { border-color: var(--green-dim, var(--green)); }
.mission-row.claimed { opacity: 0.55; }
.mission-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mission-row-title { font-size: 12px; font-weight: 700; color: var(--text); }
.mission-row-diff { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.mission-row-status { font-size: 11px; color: var(--text-dim); }
.mission-row-status.ready { color: var(--green); font-weight: 600; }
.mission-row-status.done { color: var(--text-faint); }
.mission-bar-track {
  width: 100%; height: 8px; background: var(--bg-panel); border: 1px solid var(--line-soft);
  border-radius: 4px; overflow: hidden;
}
.mission-bar-fill { height: 100%; background: var(--cyan); transition: width 0.2s; }
.mission-bar-fill.ready { background: var(--green); }
.mission-row-reward { font-size: 11px; color: var(--amber); font-weight: 600; }
.mission-row-desc { font-size: 11px; color: var(--text-dim); }
.mission-row-reset { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }

/* ── Compétences (miroir intégral du panneau Discord — src/skills.js) ────── */
.skills-points-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.skills-points-chip {
  font-size: 12px; color: var(--text-dim); background: var(--bg-panel-2);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
}
.skills-points-chip b { color: var(--cyan); }
.skills-group-card { flex-direction: column; align-items: stretch; gap: 8px; }
/* 📏 V3.90.7 — LA CARTE DE COMPÉTENCE NE FAIT PLUS 220 px DE HAUT.
 *
 * Exactement le même piège que `.bar-track` plus haut (voir le commentaire
 * « UNE BARRE DANS UNE COLONNE GARDE SA HAUTEUR »), un cran au-dessus.
 * `.depot-row-info` porte `flex: 1 1 220px`, écrit pour la rangée de dépôt
 * qui est en LIGNE : 220 px y sont une largeur minimale confortable.
 *
 * `.skills-group-card` bascule la rangée en COLONNE. La base de flex devient
 * alors une HAUTEUR : chaque groupe réservait 220 px + le rembourrage, d'où
 * l'immense vide sous « Technicien — Niv. 10/10 » et les cartes suivantes
 * repoussées hors du cadre déroulant.
 *
 * En colonne, la hauteur doit venir du contenu, et de lui seul. */
.skills-group-card > .depot-row-info { flex: 0 0 auto; }
/* 🧱 V3.90.8 — La barre de niveau de compétence passe elle aussi aux dix crans.
   Ici le cran a un sens littéral : un cran = un niveau, exactement comme le
   `██████░░░░` du panneau Discord. La barre occupe toute la largeur de la
   carte, et la couleur ambre est portée par la ligne — les crans la reprennent
   via `currentColor`. */
.seg-row { margin: 6px 0; line-height: 0; }
.seg-row.amber { color: var(--amber); }
.seg-row > .seg-bar { width: 100%; height: 10px; }
.skills-next-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-soft);
}
.skills-next-text { font-size: 11px; color: var(--text-dim); }
.skills-effects-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.skills-effect-chip {
  font-size: 11px; color: var(--green, var(--cyan)); background: color-mix(in srgb, var(--cyan) 9%, transparent);
  border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px;
}

/* ── Succès (miroir du panneau Discord — src/progression.js) ───────────── */
.achievement-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 10px 12px;
}
.achievement-card.unlocked { border-color: var(--green, var(--cyan-dim)); background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.achievement-card.locked { opacity: 0.6; }
.achievement-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.achievement-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.achievement-name { font-size: 12px; font-weight: 700; color: var(--text); }
.achievement-desc { font-size: 11px; color: var(--text-dim); }
.achievement-reward { font-size: 10px; color: var(--amber); font-family: var(--font-mono); }
.achievement-status { margin-left: auto; font-size: 16px; flex-shrink: 0; }

/* ── Carte des Systèmes (starmap style Star Citizen) ──────────────────────── */
.starmap-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.starmap-search-input {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); width: 200px; font-family: var(--font-mono);
}
.starmap-search-input:focus { outline: none; border-color: var(--cyan-dim); color: var(--cyan); }

.starmap-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.starmap-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.starmap-legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }

.starmap-viewport {
  position: relative; margin-top: 12px; width: 100%; height: 560px;
  background: radial-gradient(ellipse at 50% 40%, #0d1a2b 0%, #060a12 55%, #030509 100%);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: grab;
}
.starmap-viewport.dragging { cursor: grabbing; }
.starmap-viewport canvas { display: block; width: 100%; height: 100%; }

.starmap-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.5px;
  background: transparent; pointer-events: none;
}

.starmap-tooltip {
  position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%, -100%);
  background: rgba(10, 14, 22, 0.92); border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 11px; color: var(--cyan); white-space: nowrap;
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 28%, transparent);
}

.starmap-tooltip-hint { display: block; margin-top: 3px; font-size: 9px; color: var(--text-faint); letter-spacing: 0.3px; }

/* ── V3.9.12 — Menu contextuel (clic droit) sur un système ────────────────── */
.starmap-context {
  position: absolute; z-index: 20; min-width: 232px;
  background: rgba(10, 14, 22, 0.97); border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); padding: 5px; overflow: hidden;
}
.starmap-context-title {
  font-size: 11px; color: var(--cyan); font-family: var(--font-mono); padding: 6px 9px 8px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px; letter-spacing: 0.4px;
}
.starmap-context-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-dim); font-family: var(--font-mono); font-size: 12px;
  padding: 7px 9px; border-radius: var(--radius-sm); cursor: var(--c3d-curseur-main, pointer);
}
.starmap-context-item:hover:not(:disabled) { background: rgba(79, 214, 232, 0.12); color: var(--cyan); }
.starmap-context-item:disabled { opacity: 0.38; cursor: not-allowed; }

/* Bandeau de retour d'action (saut, scan, actualisation) */
.starmap-flash {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 15;
  background: rgba(10, 14, 22, 0.94); border: 1px solid var(--line); border-left: 3px solid var(--cyan-dim);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 11.5px; font-family: var(--font-mono);
  color: var(--text-dim); pointer-events: none; line-height: 1.5;
}
.starmap-flash.ok { border-left-color: #48e682; color: #d6f5e2; }
.starmap-flash.err { border-left-color: #e85c5c; color: #f6d7d7; }

.starmap-infopanel {
  position: relative; margin-top: 12px; background: var(--bg-panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.starmap-info-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-faint);
  font-size: 14px; cursor: var(--c3d-curseur-main, pointer);
}
.starmap-info-close:hover { color: var(--cyan); }
.starmap-info-name { font-size: 16px; color: var(--cyan); font-weight: 600; margin-bottom: 2px; }
.starmap-info-sec { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.starmap-info-row { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.starmap-info-row b { color: var(--text-dim); }
.starmap-info-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 10px; font-style: italic; }
.starmap-info-minerals, .starmap-info-pois { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.starmap-info-minerals span, .starmap-info-pois span {
  font-size: 10px; color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px 9px;
}

/* ── V2.2 — Barre d'infos sticky (Pilote / Vaisseau / Activités / Cargaison) ──
   Reste masquée jusqu'à ce que la carte "Cargaison" sorte du haut de la
   fenêtre (voir IntersectionObserver dans app.js), puis se fixe en en-tête. */
.sticky-infobar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(10, 13, 20, 0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sticky-infobar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-infobar-inner {
  max-width: 1600px; margin: 0 auto; padding: 6px 32px; min-height: var(--infobar-h);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px;
}
/* V3.59.3 — le contenu était optiquement collé en haut de la barre : les
   éléments sont désormais tous centrés sur la même ligne médiane. */
.sticky-infobar-inner > * { align-self: center; }
.sticky-item, .sticky-field { line-height: 1.2; }
.sticky-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
.sticky-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sticky-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg-panel-2); flex-shrink: 0; }
.sticky-label { opacity: 0.8; flex-shrink: 0; }
.sticky-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.sticky-value { color: var(--text-dim); white-space: nowrap; }
.sticky-value.amber { color: var(--amber); }
@media (max-width: 900px) {
  .sticky-item.sticky-activity, .sticky-sep:nth-of-type(2) { display: none; }
}
@media (max-width: 640px) {
  .sticky-infobar-inner { padding: 10px 16px; gap: 10px; }
  .sticky-name { max-width: 90px; }
}

/* ── V2.2 — Info-bulles génériques sur boutons désactivés ─────────────────
   Un survol d'1 seconde sur n'importe quel bouton grisé (disabled) portant
   un attribut data-tooltip affiche une bulle expliquant pourquoi l'action
   n'est pas possible actuellement (voir le petit moteur JS dans app.js). */
.web-tooltip {
  /* V3.18.0 — l'info-bulle passait DERRIÈRE certains modules (modales,
     barres collantes, superpositions) qui montent jusqu'à z-index 1000 :
     elle est désormais posée au sommet de toutes les couches. */
  position: fixed; z-index: 2147483000; max-width: 260px;
  background: var(--bg-panel-2); border: 1px solid var(--cyan-dim); color: var(--text);
  font-size: 11px; line-height: 1.5; padding: 8px 11px; border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.web-tooltip.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════
   Effets spécifiques aux thèmes "Arcade Néon" et "Rétro-Arcade Pixel Art"
   Scopés via [data-theme] (posé sur <html> par applyActiveTheme() dans
   app.js) pour ne jamais affecter les autres thèmes. ══════════════════ */
/* (V3.92.0) l'@import des polices Press Start 2P / VT323 a été déplacé en
   tête de fichier : placé ici, au milieu des règles, le navigateur l'ignorait. */

/* ── Menu latéral positionné à gauche comme les autres thèmes (non rétractable) ── */

/* ── Arcade Néon : scintillement du logo + halo pulsé sur le CTA ─────────── */
html[data-theme="arcade-neon"] .landing-brand,
html[data-theme="arcade-neon"] .portal-nav .landing-brand {
  text-shadow: 0 0 6px var(--amber), 0 0 16px var(--red);
  animation: arcade-flicker 3.2s infinite;
}
@keyframes arcade-flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 79% { opacity: 0.55; }
}
html[data-theme="arcade-neon"] .discord-login-btn,
html[data-theme="arcade-neon"] .sidenav-toggle {
  animation: arcade-pulse 1.6s ease-in-out infinite;
}
@keyframes arcade-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--cyan-dim); }
  50% { box-shadow: 0 0 22px var(--cyan), 0 0 34px var(--red); }
}
html[data-theme="arcade-neon"] .landing-title,
html[data-theme="arcade-neon"] .portal-breadcrumb {
  background: linear-gradient(90deg, var(--red), var(--cyan), var(--amber));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: arcade-hue-slide 6s linear infinite;
}
@keyframes arcade-hue-slide { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* ── Rétro-Arcade Pixel Art : police pixel + ombres franches ─────────────── */
html[data-theme="retro-arcade-pixel"] {
  --font-display: 'Press Start 2P', monospace !important;
  --font-mono: 'VT323', monospace !important;
}
html[data-theme="retro-arcade-pixel"] .landing-brand,
html[data-theme="retro-arcade-pixel"] .sidenav-toggle {
  text-shadow: 2px 2px 0 var(--red);
}
/* Le titre d'accueil est très grand : on limite sa taille avec cette police
   large et compacte pour éviter tout débordement visuel. */
html[data-theme="retro-arcade-pixel"] .landing-title {
  font-size: clamp(16px, 2.6vw, 26px) !important; line-height: 1.7 !important;
}
html[data-theme="retro-arcade-pixel"] .feature-card,
html[data-theme="retro-arcade-pixel"] .pcard,
html[data-theme="retro-arcade-pixel"] .discord-login-btn {
  border-width: 3px !important; box-shadow: 5px 5px 0 var(--line-soft) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
html[data-theme="retro-arcade-pixel"] .feature-card:hover,
html[data-theme="retro-arcade-pixel"] .pcard:hover {
  transform: translate(-3px, -3px) !important; box-shadow: 8px 8px 0 var(--cyan) !important;
}
html[data-theme="retro-arcade-pixel"] .discord-login-btn:active { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 var(--line-soft) !important; }

/* ── Famille "TRON" : halo néon animé au survol des cadres ────────────────
   [data-theme^="tron-"] cible toutes les variantes de couleur (tron-orange,
   tron-rouge, tron-cyan, tron-vert, tron-bleu-nuit, tron-violet, tron-blanc)
   sans avoir à les lister une par une : la couleur du halo vient de --line,
   qui est déjà la teinte néon propre à chaque variante. Au repos, seule la
   bordure fine et nette (déjà posée par .pcard/.feature-card via --line)
   marque le contour ; le halo lumineux + la pulsation n'apparaissent qu'au
   survol, pour rester sobre le reste du temps. ──────────────────────────── */
html[data-theme^="tron-"] .pcard,
html[data-theme^="tron-"] .feature-card {
  transition: box-shadow 0.25s ease;
}
html[data-theme^="tron-"] .pcard:hover,
html[data-theme^="tron-"] .feature-card:hover {
  box-shadow: 0 0 4px var(--line), 0 0 12px var(--line);
  animation: tron-pulse 1.4s ease-in-out infinite;
}
@keyframes tron-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--line), 0 0 12px var(--line); }
  50% { box-shadow: 0 0 6px var(--line), 0 0 18px var(--line); }
}
html[data-theme^="tron-"] .discord-login-btn,
html[data-theme^="tron-"] .landing-admin-link,
html[data-theme^="tron-"] .btn-explore,
html[data-theme^="tron-"] .btn-poi,
html[data-theme^="tron-"] .btn-mine,
html[data-theme^="tron-"] .btn-depot,
html[data-theme^="tron-"] .btn-hangar-danger,
html[data-theme^="tron-"] .btn-hangar-success,
html[data-theme^="tron-"] .btn-cargo-bulk {
  transition: box-shadow 0.2s ease, color 0.15s, border-color 0.15s;
}
html[data-theme^="tron-"] .discord-login-btn:hover,
html[data-theme^="tron-"] .landing-admin-link:hover,
html[data-theme^="tron-"] .btn-explore:hover:not(:disabled),
html[data-theme^="tron-"] .btn-poi:hover:not(:disabled),
html[data-theme^="tron-"] .btn-mine:hover:not(:disabled),
html[data-theme^="tron-"] .btn-depot:hover:not(:disabled),
html[data-theme^="tron-"] .btn-hangar-danger:hover:not(:disabled),
html[data-theme^="tron-"] .btn-hangar-success:hover:not(:disabled),
html[data-theme^="tron-"] .btn-cargo-bulk:hover:not(:disabled) {
  box-shadow: 0 0 5px var(--line), 0 0 14px var(--line);
}
/* Prévisualisation en mode réduit ("prefers-reduced-motion") : on garde le
   halo statique au survol mais on retire la pulsation animée. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme^="tron-"] .pcard:hover,
  html[data-theme^="tron-"] .feature-card:hover {
    animation: none;
  }
}
/* Mode "Cockpit" (voir [data-layout="cockpit"] plus bas) : .portal-rail et
   .portal-sidenav défilent en overflow-y:auto, ce qui rogne le halo des
   cartes collées au bord. On leur donne un peu plus de marge pour que le
   halo néon reste visible sans toucher à l'agencement des autres thèmes. */
html[data-theme^="tron-"][data-layout="cockpit"] .portal-rail,
html[data-theme^="tron-"][data-layout="cockpit"] .portal-sidenav {
  padding-right: 14px;
  padding-left: 6px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   📡 FLUX D'ACTIVITÉ (V3.9.16) — carte « console » du tableau de bord joueur
   ───────────────────────────────────────────────────────────────────────── */
.activity-status {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  opacity: .65; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.activity-status.is-live { color: var(--ok, #3ddc97); opacity: .9; }
.activity-status.is-down { color: var(--danger, #ff6b6b); opacity: .9; }

.activity-console {
  margin-top: 12px;
  height: 320px; overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.7;
  scrollbar-width: thin;
}
.activity-console::-webkit-scrollbar { width: 8px; }
.activity-console::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.activity-empty { opacity: .45; font-style: italic; }
/* V3.67.0 — dans le rail (colonne étroite), la console se contente d'une
   hauteur moyenne : la carte est de toute façon rétractable d'un clic. */
.portal-rail > #activity-card .activity-console { height: 260px; }

.activity-line { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.activity-line .a-time { opacity: .45; flex: 0 0 auto; }
.activity-line .a-icon { flex: 0 0 auto; }
.activity-line .a-text { flex: 1 1 auto; word-break: break-word; }
.activity-line .a-player { font-weight: 700; }

.activity-line.lvl-success .a-player { color: var(--ok, #3ddc97); }
.activity-line.lvl-danger  .a-player { color: var(--danger, #ff6b6b); }
.activity-line.lvl-warning .a-player { color: var(--warn, #ffcc66); }
.activity-line.lvl-info    .a-player { color: var(--accent, #59d0ff); }
.activity-line.lvl-special .a-player { color: #c792ea; }
.activity-line.lvl-default .a-player { opacity: .75; }

.activity-line.is-new { animation: activity-flash 1.2s ease-out; }
@keyframes activity-flash {
  from { background: rgba(89, 208, 255, 0.16); }
  to   { background: transparent; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3.10.0 — Signal d'état du serveur (🟢 / 🔴) à côté du logo PRIME ALPHA
   ══════════════════════════════════════════════════════════════════════════ */
.server-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  cursor: var(--c3d-curseur, default);
}
.server-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.server-status.online { border-color: rgba(51, 204, 102, 0.45); color: #6ee7a0; }
.server-status.online .server-status-dot {
  background: #33cc66;
  box-shadow: 0 0 8px rgba(51, 204, 102, 0.9);
  animation: server-pulse 2.4s ease-in-out infinite;
}
.server-status.offline { border-color: rgba(255, 68, 68, 0.45); color: #ff8a8a; }
.server-status.offline .server-status-dot {
  background: #ff4444;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.85);
}
@keyframes server-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (max-width: 640px) {
  .server-status .server-status-label { display: none; }
  .server-status { padding: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3.10.0 — Module Support : pièces jointes, fil de discussion, actions
   ══════════════════════════════════════════════════════════════════════════ */
.support-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.support-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  cursor: var(--c3d-curseur-main, pointer);
  transition: border-color .15s, background .15s;
}
.support-attach-btn:hover {
  border-color: rgba(120, 180, 255, 0.6);
  background: rgba(120, 180, 255, 0.08);
}
.support-attach-hint {
  font-size: 0.68rem;
  opacity: 0.5;
  font-family: 'IBM Plex Mono', monospace;
}
.support-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.support-thumb {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.support-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-thumb-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.62rem;
  line-height: 1;
  cursor: var(--c3d-curseur-main, pointer);
}
.support-ticket-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-mini {
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-size: 0.72rem;
  cursor: var(--c3d-curseur-main, pointer);
  transition: background .15s, border-color .15s;
}
.btn-mini:hover { background: rgba(255, 255, 255, 0.11); }
.btn-mini.danger { border-color: rgba(255, 68, 68, 0.4); color: #ff9a9a; }
.btn-mini.danger:hover { background: rgba(255, 68, 68, 0.14); }

.support-thread-view {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.support-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.support-thread-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.support-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.support-msg {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(120, 180, 255, 0.55);
}
.support-msg.staff {
  border-left-color: rgba(51, 204, 102, 0.75);
  background: rgba(51, 204, 102, 0.05);
}
.support-msg-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  opacity: 0.72;
  margin-bottom: 5px;
  font-family: 'IBM Plex Mono', monospace;
}
.support-msg-text { font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.support-msg-edited { opacity: 0.6; font-style: italic; }
.support-msg-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.support-msg-img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: block;
}
.support-msg-actions { margin-top: 8px; display: flex; gap: 6px; }
.support-thread-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cargo-section-sub { font-size: 0.68rem; opacity: 0.55; font-family: 'IBM Plex Mono', monospace; }

/* V3.21.0 — 🏛️ Cité Perdue : site connu mais sans vaisseau en orbite */
.poi-empty {
  grid-column: 1 / -1;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px dashed var(--border, #33406b);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim, #98a2c8);
  font-family: var(--font-mono);
}

/* V3.22.0 — cooldown par session de minage */
.mine-cooldown {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--border, #33406b);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-dim, #98a2c8);
}

/* ── 🧭 Campagne de mission (V3.25.0) — NPC missionnaires ────────────────── */
.mnpc-card { cursor: var(--c3d-curseur-main, pointer); display: flex; gap: 12px; align-items: center; }
.mnpc-card img {
  width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-panel-2); flex-shrink: 0;
}
.mnpc-card-placeholder {
  width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-panel-2); flex-shrink: 0;
}
.mnpc-card-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.mnpc-card-line { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.mnpc-modal-image {
  width: 100%; max-height: 300px; object-fit: contain; background: var(--bg-panel-2);
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px;
}
.mnpc-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px; }
.mnpc-mission-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-panel-2); padding: 12px; margin-top: 10px;
}
.mnpc-mission-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.mnpc-mission-row { font-size: 12.5px; color: var(--text); margin-top: 4px; }

/* Modale générique du portail joueur (réutilisée par la campagne de mission) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 14, 0.72);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.modal-overlay .modal {
  background: var(--bg-panel, #0d1620); border: 1px solid var(--line);
  border-radius: 12px; width: 100%; max-width: 460px; max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,0.55);
}
.modal-overlay .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.modal-overlay .modal-head h3 { margin: 0; font-size: 14px; color: var(--accent); }
.modal-overlay .modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: var(--c3d-curseur-main, pointer);
}
.modal-overlay .modal-body { padding: 16px; overflow-y: auto; }
.modal-overlay .modal-foot {
  display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line);
}
.modal-overlay .modal-foot-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-overlay .modal-status { font-size: 12px; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   🏁 Interface de course « So Fast » (V3.29.0)
   Overlay plein écran : canvas 3D, HUD de vol et panneau de résultat.
   ══════════════════════════════════════════════════════════════════════════ */
.race-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: #03060f;
}
.race-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Flash rouge au moment d'un impact (anneau ou astéroïde) */
.race-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 60, 60, 0) 35%, rgba(255, 40, 40, 0.55) 100%);
  opacity: 0; transition: opacity 90ms linear;
}

.race-panel {
  position: absolute; top: 16px; left: 16px;
  min-width: 250px; padding: 12px 14px;
  background: rgba(6, 10, 20, 0.82);
  border: 1px solid var(--cyan-dim); border-radius: var(--radius);
  color: var(--text); font-size: 13px;
}
.race-title { color: var(--cyan); font-weight: 700; margin-bottom: 8px; letter-spacing: .5px; }
.race-hud-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.race-hud-row span { color: var(--text-dim); }
.race-hud-row em { color: var(--text-faint); font-style: normal; font-size: 11px; }
.race-hud-hit { margin-top: 6px; color: #ff6a6a; font-weight: 700; }
.race-keys {
  margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: 11px; line-height: 1.5;
}

.race-result {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 320px; max-width: 480px; padding: 20px 22px; text-align: center;
  background: rgba(6, 10, 20, 0.94);
  border: 1px solid var(--cyan-dim); border-radius: var(--radius);
  color: var(--text); font-size: 14px; line-height: 1.6;
}
.race-result p { margin: 0 0 10px; }
.race-result button { margin-top: 6px; }

@media (max-width: 640px) {
  .race-panel { top: 8px; left: 8px; right: 8px; min-width: 0; font-size: 12px; }
  .race-result { min-width: 0; width: calc(100% - 32px); }
}

/* ⚙️ Fenêtre d'options de commandes « So Fast » (V3.31.0) */
.race-options-modal { max-width: 620px; width: min(620px, 94vw); }
.race-options-hint {
  margin: 4px 0 10px; padding: 8px 10px; font-size: 11px; line-height: 1.5;
  color: var(--text-dim); background: var(--bg-panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.race-options-list { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.race-options-group {
  margin: 10px 0 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--cyan); border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.race-options-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.race-options-label { flex: 1; font-size: 12px; color: var(--text); }
.race-key-btn, .race-axis-btn, .race-invert-btn, .race-clear-btn {
  background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 5px 10px; font-size: 11px; cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-mono);
}
.race-key-btn { min-width: 74px; text-align: center; }
.race-axis-btn { min-width: 168px; text-align: center; color: var(--text-dim); }
.race-key-btn:hover, .race-axis-btn:hover, .race-invert-btn:hover, .race-clear-btn:hover {
  border-color: var(--cyan); color: var(--cyan);
}
.race-key-btn.capturing, .race-axis-btn.capturing {
  border-color: var(--amber); color: var(--amber);
  animation: race-capture-pulse 1s ease-in-out infinite;
}
@keyframes race-capture-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

@media (max-width: 640px) {
  .race-options-row { flex-wrap: wrap; }
  .race-axis-btn { min-width: 0; flex: 1; }
}

/* 🎯 Réticule de pilotage souris (V3.32.0) */
.race-reticle {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none; z-index: 6;
  border: 1px solid var(--cyan); border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.race-reticle::before, .race-reticle::after {
  content: ''; position: absolute; background: var(--cyan);
}
.race-reticle::before { left: 50%; top: -7px; width: 1px; height: 6px; }
.race-reticle::after { left: 50%; bottom: -7px; width: 1px; height: 6px; }

/* Boutons d'intensité des effets visuels (V3.33.0) */
.race-fx-btn {
  background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 5px 10px; font-size: 11px; cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-mono);
}
.race-fx-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.race-fx-btn.capturing { border-color: var(--cyan); color: var(--cyan); animation: none; }

/* 🔫 Barre de capacités en course (V3.34.0) */
.race-ability-bar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 6; pointer-events: none;
}
.race-ab {
  min-width: 54px; padding: 6px 8px; text-align: center;
  background: rgba(6, 10, 20, 0.82); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--font-mono);
}
.race-ab-key { display: block; font-size: 10px; color: var(--text-faint); }
.race-ab-emoji { display: block; font-size: 17px; line-height: 1.3; }
.race-ab-sub { display: block; font-size: 10px; color: var(--text-dim); }
.race-ab.ready { border-color: var(--cyan-dim); }
.race-ab.ready .race-ab-sub { color: var(--cyan); }
.race-ab.active {
  border-color: var(--cyan); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 40%, transparent);
}
.race-ab.active .race-ab-sub { color: var(--cyan); }
.race-ab.cooling { opacity: .55; }
.race-ab.cooling .race-ab-sub { color: var(--amber); }
.race-ab.locked { opacity: .35; }
.race-ability-msg {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; padding: 5px 12px; font-size: 12px;
  color: var(--cyan); background: rgba(6, 10, 20, 0.86);
  border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   🖥️ HUD du pilote (V3.36.0)
   ══════════════════════════════════════════════════════════════════════════ */

/* PV et blindage — haut à gauche */
.race-vitals {
  position: absolute; top: 16px; left: 16px; z-index: 6; pointer-events: none;
  min-width: 230px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px;
  background: rgba(6, 10, 20, 0.78); border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
}
.rv-name { color: var(--cyan); font-weight: 700; margin-bottom: 6px; letter-spacing: .5px; }
.rv-row { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.rv-lbl { width: 26px; color: var(--text-dim); }
.rv-bar { flex: 1; height: 7px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.rv-bar i { display: block; height: 100%; transition: width .18s linear; }
.rv-val { min-width: 74px; text-align: right; color: var(--text); }
.rv-noarmor { color: var(--text-faint); }

/* Indicateur de vitesse en parenthèse — 30° à gauche du centre */
.race-speed { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }

/* Navigation : checkpoint, distance, assiette, écart */
.race-nav {
  position: absolute; top: 16px; right: 16px; z-index: 6; pointer-events: none;
  text-align: right; font-family: var(--font-mono);
  padding: 10px 12px; background: rgba(6, 10, 20, 0.78);
  border: 1px solid var(--cyan-dim); border-radius: var(--radius);
}
.rn-cp { font-size: 21px; color: var(--cyan); font-weight: 700; line-height: 1.1; }
.rn-dist { font-size: 13px; color: var(--text); }
.rn-att { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.rn-best { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.rn-delta { font-size: 15px; font-weight: 700; margin-top: 3px; }
.rn-delta.ahead { color: #3ddc84; }
.rn-delta.behind { color: #ff5c5c; }

/* Cible : losange sur l'anneau visible, flèche en bordure sinon */
.race-target {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  z-index: 6; pointer-events: none;
  border: 2px solid var(--amber); transform: rotate(45deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 45%, transparent);
}
.race-arrow {
  position: absolute; z-index: 6; pointer-events: none;
  color: var(--amber); font-size: 26px; line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent);
}

/* 🔺 Encadrés triangulaires des capacités — bas à droite, alternés */
.race-ability-bar {
  position: absolute; bottom: 24px; right: 24px; left: auto; transform: none;
  display: flex; align-items: flex-end; gap: 0; z-index: 6; pointer-events: none;
}
.race-tri {
  position: relative; width: 74px; height: 64px; margin-left: -12px;
}
.race-tri-shape, .race-tri-veil {
  position: absolute; inset: 0;
}
.race-tri.up .race-tri-shape, .race-tri.up .race-tri-veil {
  clip-path: polygon(50% 4%, 96% 94%, 4% 94%);
}
.race-tri.down .race-tri-shape, .race-tri.down .race-tri-veil {
  clip-path: polygon(4% 6%, 96% 6%, 50% 96%);
}
.race-tri-shape { background: rgba(6, 10, 20, 0.86); border: 0; }
.race-tri.ready .race-tri-shape { background: rgba(10, 26, 34, 0.9); }
.race-tri.active .race-tri-shape {
  background: rgba(16, 56, 62, 0.95);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 55%, transparent));
}
.race-tri.locked { opacity: .34; }
.race-tri-emoji {
  position: absolute; left: 0; right: 0; text-align: center; font-size: 20px;
}
.race-tri.up .race-tri-emoji { top: 46%; }
.race-tri.down .race-tri-emoji { top: 20%; }
.race-tri-key {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
}
.race-tri.up .race-tri-key { bottom: 6%; }
.race-tri.down .race-tri-key { top: 7%; }
.race-tri-cd {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--amber);
}
.race-tri.up .race-tri-cd { top: 44%; }
.race-tri.down .race-tri-cd { top: 18%; }

@media (max-width: 640px) {
  .race-vitals { min-width: 0; left: 8px; top: 8px; font-size: 10px; }
  .race-nav { right: 8px; top: 8px; padding: 7px 9px; }
  .race-tri { width: 56px; height: 50px; }
}


/* ══ Disposition « Cockpit » (module Dispositions, admin > Thèmes) ═══════════
   Principe : le portail devient une APPLICATION PLEIN ÉCRAN, pas une page qui
   défile. La fenêtre entière est découpée une fois pour toutes et chaque zone
   défile DANS SON PROPRE CADRE. Conséquence directe : le panneau de jeu est
   toujours en haut de l'écran, immédiatement visible à l'ouverture, et le
   joueur n'a jamais à faire défiler la page pour le retrouver.

     ┌──────────────────────────────────────────────────────────┐
     │ barre d'état (solde, niveau, vaisseau, cargaison…)        │
     ├────────┬────────────────────────────────────┬────────────┤
     │        │                                    │ Activités   │
     │  menu  │      PANNEAU DE JEU (défile)        │ Vaisseau    │
     │        │                                    │ Cargaison   │
     │        ├────────────────────────────────────┤ Escadrille  │
     │        │   flux d'activité (défile)          │ Pilote      │
     └────────┴────────────────────────────────────┴────────────┘

   Le panneau de jeu prend toute la hauteur restante : c'est la zone la plus
   grande de l'écran, ce qui équilibre la page quel que soit le module ouvert.
   Aucun vide ne peut réapparaître, puisque les hauteurs ne dépendent plus du
   contenu mais de la fenêtre. */

[data-layout="cockpit"] .sticky-infobar {
  position: fixed; top: 0; left: 0; right: 0;
  transform: none; opacity: 1; pointer-events: auto;
}
[data-layout="cockpit"] .sticky-infobar-inner {
  /* V3.65.4 — la barre n'est plus enfermée sur UNE ligne de hauteur fixe avec
     débordement horizontal : à 118 % de taille de texte, les blocs se
     chevauchaient et une partie devenait illisible. Elle se replie désormais
     naturellement sur DEUX lignes (ou plus) et sa hauteur suit son contenu. */
  max-width: none; padding: 5px 18px; gap: 8px 16px; flex-wrap: wrap;
  min-height: var(--infobar-h); height: auto;
  align-items: center;
  overflow: visible;
}
/* V3.65.5 — LA cause du chevauchement. Autoriser `flex-wrap: wrap` ne suffit
   pas : par défaut un élément flex est COMPRESSIBLE (flex-shrink: 1), et
   `.sticky-item` / `.sticky-field` portent en plus `min-width: 0`. Le navigateur
   préférait donc écraser chaque bloc en dessous de sa largeur naturelle plutôt
   que de passer à la ligne — et comme leur texte est en `white-space: nowrap`,
   il débordait de son bloc et venait se superposer au bloc suivant.
   En rendant les blocs INCOMPRESSIBLES, le retour à la ligne devient la seule
   issue possible : la barre se replie réellement sur deux lignes. */
[data-layout="cockpit"] .sticky-item,
[data-layout="cockpit"] .sticky-field {
  flex-shrink: 0;
  min-width: auto;
}
/* Le pseudo seul élément qui reste tronquable : le nom du pilote, déjà bridé
   par une largeur maximale et des points de suspension. */
[data-layout="cockpit"] .sticky-name { flex-shrink: 1; }
/* Les séparateurs verticaux n'ont plus de sens en bout de ligne quand la barre
   se replie : ils restent, mais ne créent jamais de retour à la ligne isolé. */
[data-layout="cockpit"] .sticky-sep { align-self: center; }
[data-layout="cockpit"] .sticky-infobar-inner::-webkit-scrollbar { display: none; }
[data-layout="cockpit"] .sticky-level { color: var(--cyan); }
[data-layout="cockpit"] .sticky-title { color: var(--amber); }

/* Chaque valeur de la barre est légendée (Solde, Carburant, Cargaison…) :
   la barre dispose de toute la largeur de la fenêtre, autant nommer les
   informations plutôt que de laisser des nombres nus. */
.sticky-field { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.sticky-key {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); flex-shrink: 0; white-space: nowrap;
}
.sticky-value.cyan { color: var(--cyan); }
/* Légendes, patrimoine, niveau, titre et total miné n'existent que dans cette
   disposition : ailleurs la barre reste le condensé historique. */
:root:not([data-layout="cockpit"]) .sticky-key,
:root:not([data-layout="cockpit"]) .sticky-level,
:root:not([data-layout="cockpit"]) .sticky-title,
:root:not([data-layout="cockpit"]) .sticky-item.sticky-mined,
:root:not([data-layout="cockpit"]) #sticky-networth { display: none; }

@media (min-width: 981px) {
  /* La page défile normalement : c'est le contenu qui commande la hauteur. */
  [data-layout="cockpit"] body { overflow-x: hidden; }
  /* En-tête compacté et fixé : il conserve l'accès admin et la déconnexion
     tout en ne consommant qu'une trentaine de pixels, au profit du jeu. */
  /* V3.58.1 — en-tête et barre d'état respirent davantage : le joueur
     trouvait l'ensemble écrasé. Hauteurs : en-tête 40px, barre d'état 46px. */
  [data-layout="cockpit"] #portal-screen > .portal-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 61;
    padding: 10px 18px; background: var(--bg-1);
    /* V3.65.4 — même traitement que la barre d'état : l'en-tête se replie au
       lieu de laisser ses éléments se recouvrir aux grandes tailles de texte. */
    flex-wrap: wrap; row-gap: 6px;
  }
  /* V3.65.5 — même raison que pour la barre d'état : sans cela les blocs de
     l'en-tête se compriment et se recouvrent au lieu de passer à la ligne. */
  [data-layout="cockpit"] #portal-screen > .portal-nav > * { flex-shrink: 0; }
  /* La barre d'état se place sous l'en-tête RÉEL, pas sous une hauteur
     supposée : c'est ce qui empêche le recouvrement quand l'en-tête grandit. */
  [data-layout="cockpit"] .sticky-infobar { top: var(--topbar-real-h); }

  /* Le cadre ne fige plus la hauteur : chaque page du panneau de jeu
     s'affiche INTÉGRALEMENT (plus d'ascenseur interne, plus de carte
     coupée en deux) et c'est la page entière qui défile. Les rangées
     sont en `auto` : elles prennent la hauteur réelle de leur contenu.
     L'en-tête et la barre d'infos restent en position: fixed, d'où la
     marge haute de 86px qui les dégage (V3.58.1). */
  [data-layout="cockpit"] .portal-content {
    margin: var(--top-offset) 0 0; max-width: none; padding: 12px;
    min-height: calc(100vh - var(--top-offset) - 12px);
    display: grid; gap: var(--card-gap) var(--layout-gap);
    grid-template-columns: 208px minmax(0, 1fr) 330px;
    /* V3.65.0 — une rangée « acts » est ajoutée EN TÊTE de la colonne centrale :
       la carte Activités y occupe toute la largeur du panneau de jeu, au-dessus
       de la page en cours. Elle occupait auparavant une case du rail de droite,
       où ses sept boutons se retrouvaient serrés sur deux colonnes. */
    /* V3.67.0 — la rangée « feed » a disparu : le flux d'activité est remonté
       dans le rail de droite, entre « Pilote » et « Escadrille ». */
    /* V3.90.1 — la rangée « main » est flexible (1fr) et non plus « auto ».
       Le menu et le rail occupent les DEUX rangées : quand la page en cours
       est plus courte qu'eux (Minage, So Fast…), le surplus de hauteur était
       réparti entre les deux rangées `auto`, ce qui repoussait la carte
       Activités vers le haut et laissait un grand vide sous elle. Avec une
       rangée flexible, tout le surplus va dans « main » et la bande Activités
       reste collée à son contenu. */
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    grid-template-areas: "nav acts rail" "nav main rail";
  }
  [data-layout="cockpit"] .portal-overview,
  [data-layout="cockpit"] .portal-layout { display: contents; }

  /* Menu et rail restent visibles pendant le défilement de la page : ils
     collent sous l'en-tête plutôt que de défiler avec le contenu. */
  [data-layout="cockpit"] .portal-sidenav {
    /* V3.65.1 — le menu remonte vers le bord gauche de la fenêtre : il annule
       la marge de la zone de contenu au lieu de flotter au milieu de sa
       colonne. Réglable par --cockpit-nav-shift (voir :root). */
    margin-left: calc(-1 * var(--cockpit-nav-shift));
    grid-area: nav; position: sticky; top: calc(var(--top-offset) + 12px); width: auto;
    min-height: 0; max-height: calc(100vh - var(--top-offset) - 24px); overflow-y: auto;
    /* V3.59.3 — aligné sur le haut du panneau de jeu (sous le fil d'Ariane). */
    margin-top: var(--crumb-h);
  }
  /* Aucune contrainte de hauteur ni d'ascenseur : le panneau de jeu se
     déploie sur toute la hauteur nécessaire, quelle que soit la page. */
  [data-layout="cockpit"] .portal-main {
    grid-area: main; width: auto; min-height: 0;
    max-height: none; overflow: visible;
  }
  /* V3.67.0 — carte du rail comme les autres : la console garde une hauteur
     raisonnable pour ne pas monopoliser la colonne de droite. */
  [data-layout="cockpit"] #activity-card .activity-console {
    height: auto; min-height: 150px; max-height: 30vh;
  }
  [data-layout="cockpit"] .portal-rail {
    grid-area: rail; position: sticky; top: calc(var(--top-offset) + 12px);
    max-height: calc(100vh - var(--top-offset) - 24px); overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--card-gap);
    /* V3.59.3 — plus de padding-right : l'écartement rail/panneau est
       strictement le même que menu/panneau (--layout-gap). */
    padding-right: 0; scrollbar-width: thin;
    margin-top: var(--crumb-h);
  }
  [data-layout="cockpit"] .portal-rail > .pcard { flex-shrink: 0; }

  /* Les modales sont en position: fixed : on les sort de la grille pour
     qu'elles n'occupent aucune cellule quand elles sont ouvertes. */
  [data-layout="cockpit"] .portal-overview > .shipname-modal-overlay { grid-area: main; }

  /* Le rail fait 330px : le bandeau d'annonce (260px, normalement accolé à
     droite du contenu pilote) passe EN DESSOUS pour ne pas déborder. */
  [data-layout="cockpit"] .pilot-card-body { flex-direction: column; }
  [data-layout="cockpit"] .announcement-banner { width: 100%; }
  [data-layout="cockpit"] .pilot-stats { flex-direction: column; gap: 8px; }
  /* V3.65.0 — la carte Activités quitte le rail pour la bande pleine largeur.
     Ses boutons se répartissent sur une seule rangée, et se replient d'eux-mêmes
     sur plusieurs lignes si la fenêtre devient étroite. */
  [data-layout="cockpit"] .portal-overview > .activities-card {
    grid-area: acts; margin-top: var(--crumb-h);
  }
  [data-layout="cockpit"] .activities-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }
}

/* Conteneur transparent par défaut : hors disposition Cockpit, ses cartes
   redeviennent des éléments directs de .portal-grid. Les propriétés order
   ci-dessous fixent l'ordre d'affichage (Pilote, Vaisseau, Escadrille,
   Activités, Flux, Cargaison), indépendamment du regroupement dans le HTML.
   La grille étant sur 2 colonnes, « Activités » occupe la colonne de gauche
   et le « Flux d'activité » celle de droite (V3.41.1). Le flux est un enfant
   direct de .portal-overview (et non du rail) : c'est ce qui lui permet de
   prendre la zone « feed » de la grille Cockpit. */
.portal-rail { display: contents; }
/* V3.67.0 — même ordre que le rail Cockpit : Activités, Annonce, Cargaison,
   Vaisseau actif, Pilote, Flux d'activité, Escadrille. Le flux est désormais
   une carte du rail (et non plus un enfant direct de .portal-overview). */
:root:not([data-layout="cockpit"]) .portal-overview > .activities-card { order: 1; }
:root:not([data-layout="cockpit"]) .portal-rail > .announcement-card { order: 2; }
:root:not([data-layout="cockpit"]) .portal-rail > .inventory-card { order: 3; }
:root:not([data-layout="cockpit"]) .portal-rail > .ship-card { order: 4; }
:root:not([data-layout="cockpit"]) .portal-rail > .pilot-card { order: 5; }
:root:not([data-layout="cockpit"]) .portal-rail > #activity-card { order: 6; }
:root:not([data-layout="cockpit"]) .portal-rail > #squadron-card { order: 7; }

/* Écrans étroits : retour à un défilement de page classique, tout s'empile. */
@media (max-width: 980px) {
  [data-layout="cockpit"] .portal-content { padding-left: 16px; padding-right: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🎨 THÈMES & EFFETS (V3.43.0) — boutique de cosmétiques du portail joueur
   ══════════════════════════════════════════════════════════════════════════ */
.cosmetics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cosmetic-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cosmetic-card.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-dim) inset;
}
.cosmetic-card.is-locked { opacity: .82; }

/* 🎰 V3.82.0 — Fonds de casino : l'aperçu de l'image EST l'argument de vente,
   il occupe donc le haut de la carte, en 16/10 comme le tapis en jeu. */
.felt-card .felt-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  background: #0d5c37;
}
.felt-card .felt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.felt-card.is-locked .felt-thumb img { filter: saturate(.55) brightness(.72); }
.felt-card.active .felt-thumb { border-color: var(--accent, #4fd6e8); }
.cosmetic-swatches { display: flex; gap: 4px; }
.cosmetic-swatches span {
  flex: 1;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
}
.cosmetic-name { font-weight: 600; color: var(--text); }
.cosmetic-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.cosmetic-tag { font-size: 11px; letter-spacing: .04em; }
.cosmetic-tag.owned { color: var(--green); }
.cosmetic-tag.price { color: var(--amber); }
.cosmetic-tag.locked { color: var(--text-faint); }
.cosmetic-reqs { display: flex; flex-direction: column; gap: 3px; }
.cosmetic-req { font-size: 11px; color: var(--text-faint); }
.cosmetic-req.met { color: var(--text-dim); }
.cosmetic-actions { margin-top: auto; }
.cosmetic-actions button {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text);
  cursor: var(--c3d-curseur-main, pointer);
  font-size: 12px;
}
.cosmetic-actions button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.cosmetic-actions button:disabled { opacity: .5; cursor: var(--c3d-curseur, default); }

/* ══════════════════════════════════════════════════════════════════════════
   💬 CHAT EN DIRECT (V3.44.0) — Territoire & social
   ═════════════════════════════════════════════════════════════════════════ */
.chat-card { position: relative; }

.chat-log {
  margin-top: 12px;
  height: 420px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}
.chat-msg:hover { background: rgba(255, 255, 255, 0.02); }
.chat-msg.chat-msg-own { border-left-color: var(--accent, var(--cyan)); }
.chat-msg.chat-msg-staff { border-left-color: var(--amber); }

.chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.chat-author {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--cyan);
  cursor: var(--c3d-curseur-main, pointer);
}
.chat-msg-staff .chat-author { color: var(--amber); }
.chat-author:hover { text-decoration: underline; }
.chat-staff-tag {
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid var(--amber-dim);
  border-radius: 999px;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chat-time { color: var(--text-faint); font-size: 10px; font-family: var(--font-mono); }

.chat-msg-actions { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-msg-actions, .chat-msg-actions:focus-within { opacity: 1; }
.chat-act {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  cursor: var(--c3d-curseur-main, pointer);
  padding: 0 2px;
}
.chat-act:hover { color: var(--red); }

.chat-body { font-size: 13px; line-height: 1.5; color: var(--text); word-break: break-word; }
.chat-body mark { background: var(--amber-dim); color: var(--text); padding: 0 3px; border-radius: 2px; }
.chat-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--cyan);
}
.chat-body a { color: var(--cyan); }

.chat-msg-blocked { opacity: .55; }
.chat-blocked-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-faint);
  cursor: var(--c3d-curseur-main, pointer);
}
.chat-blocked-note:hover { color: var(--text-dim); }

.chat-day-sep {
  text-align: center;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 6px 0 2px;
}

/* ── Zone de saisie ─────────────────────────────────────────────────────── */
.chat-composer { margin-top: 12px; }
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.chat-fmt-btn {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  font-size: 12px;
  background: var(--bg-panel-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-mono);
}
.chat-fmt-btn:hover { color: var(--text); border-color: var(--cyan-dim); }
.chat-fmt-mark { background: var(--amber-dim); padding: 0 3px; }
.chat-toolbar-spacer { flex: 1; }
.chat-blocked-btn { min-width: auto; }
.chat-blocked-btn.is-active { color: var(--amber); border-color: var(--amber-dim); }

.chat-input { resize: vertical; min-height: 52px; }
.chat-composer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.chat-hint { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.chat-count { font-size: 10px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
.chat-count.is-near { color: var(--amber); }

.chat-muted-banner {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--red-dim);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
}

/* ── Pilotes bloqués ────────────────────────────────────────────────────── */
.chat-blocked-panel { margin-top: 18px; }
.chat-blocked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.chat-blocked-row button { margin-left: auto; }

/* ── Signalement ────────────────────────────────────────────────────────── */
.chat-report-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 16px;
}
.chat-report-box {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.chat-report-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: var(--c3d-curseur-main, pointer);
  margin-left: auto;
}
.chat-report-quote {
  margin: 10px 0 14px;
  padding: 8px 10px;
  border-left: 2px solid var(--red-dim);
  background: var(--bg-panel-2);
  font-size: 12px;
  color: var(--text-dim);
}
.chat-report-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chat-report-alsoblock { background: transparent; border: 1px solid var(--red-dim); color: var(--red); }
.chat-report-hint { margin-top: 10px; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

@media (max-width: 640px) {
  .chat-log { height: 340px; }
  .chat-hint { display: none; }
}

/* 🔗 V3.49.0 — liens détectés automatiquement dans les descriptifs en jeu */
.ingame-link {
  color: var(--accent, #4ade80);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.ingame-link:hover { filter: brightness(1.25); }

/* V3.59.0 — Filtres de la Carte des Systèmes (encadré au-dessus de la carte).
   Un filtre actif est nettement marqué, pour que le joueur sache toujours
   quelle mise en surbrillance est appliquée aux bulles de système. */
.starmap-filter-btn { opacity: 0.72; }
.starmap-filter-btn.active {
  opacity: 1;
  border-color: #4fd6e8;
  box-shadow: 0 0 0 1px #4fd6e8 inset, 0 0 10px rgba(79, 214, 232, 0.35);
}

/* ══ ℹ️ À propos (V3.60.0) ═══════════════════════════════════════════════ */
.about-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.about-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 12px;
  color: var(--text-dim); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px;
  transition: color 0.15s, border-color 0.15s;
}
.about-link:hover { color: var(--accent); border-color: var(--accent-dim); }
.about-text {
  margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
  max-height: 320px; overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   🛍️ Boutique (V3.62.0) — vitrine de contenus déblocables
   ══════════════════════════════════════════════════════════════════════════ */
.boutique-intro {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.boutique-tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 12px;
  cursor: var(--c3d-curseur-main, pointer);
  border-radius: var(--radius-sm);
}
.boutique-tab.active {
  color: var(--amber);
  border-color: var(--amber-dim);
  background: rgba(255, 179, 71, 0.06);
}

.boutique-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.boutique-chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  cursor: var(--c3d-curseur-main, pointer);
  border-radius: var(--radius-sm);
}
.boutique-chip.active { color: var(--cyan); border-color: var(--cyan-dim); }

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

.boutique-card {
  border: 1px solid var(--line);
  background: var(--bg-panel-2);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
}
.boutique-card.is-owned { border-color: var(--cyan-dim); }

.boutique-cover {
  aspect-ratio: 16 / 9;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.boutique-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boutique-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  opacity: 0.35;
}

.boutique-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.boutique-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.boutique-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.boutique-price { font-family: var(--font-mono); font-size: 11px; color: var(--amber); white-space: nowrap; }
.boutique-author { font-size: 11px; color: var(--cyan); font-style: italic; }
.boutique-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

.boutique-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.boutique-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
}
.boutique-badge.owned { color: var(--green); border-color: var(--cyan-dim); }
.boutique-badge.featured { color: var(--amber); border-color: var(--amber-dim); }
.boutique-badge.soldout { color: var(--red); border-color: var(--red-dim); }

.boutique-buy {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: var(--c3d-curseur-main, pointer);
  border-radius: var(--radius-sm);
}
.boutique-buy:hover:not(:disabled) { background: rgba(255, 179, 71, 0.1); }
.boutique-buy:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); color: var(--text-faint); }

.boutique-content { display: flex; flex-direction: column; gap: 8px; }
.boutique-audio { width: 100%; height: 34px; }
.boutique-content-img { width: 100%; display: block; border: 1px solid var(--line-soft); }
.boutique-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  padding: 8px;
  margin: 0;
}
.boutique-link {
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid var(--cyan-dim);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-sm);
}
.boutique-link:hover { background: rgba(82, 224, 196, 0.08); }

.boutique-empty {
  color: var(--text-faint);
  font-size: 11px;
  font-style: italic;
  padding: 10px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   🔽 CARTES RÉTRACTABLES (V3.65.0)
   Les cartes du rail (Annonce, Cargaison, Vaisseau actif, Pilote, Escadrille,
   Activités) se replient d'un clic sur leur en-tête. L'état est mémorisé dans
   le navigateur — voir initCollapsibleCards() dans app.js.
   ══════════════════════════════════════════════════════════════════════════ */
.pcard[data-collapsible] > .pcard-head {
  cursor: var(--c3d-curseur-main, pointer);
  user-select: none;
  transition: color 0.15s;
}
.pcard[data-collapsible] > .pcard-head:hover .pcard-title { color: var(--text); }

/* Chevron ajouté par le JS, tourné vers le bas quand la carte est ouverte. */
.pcard-collapse-caret {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  color: var(--text-faint);
  transition: transform 0.22s ease, color 0.15s;
  transform: rotate(0deg);
}
.pcard[data-collapsible] > .pcard-head:hover .pcard-collapse-caret { color: var(--accent); }
.pcard.is-collapsed > .pcard-head .pcard-collapse-caret { transform: rotate(-90deg); }

/* Repli : tout ce qui suit l'en-tête disparaît, et la carte se resserre sur
   son seul titre. L'en-tête perd son trait de séparation, devenu inutile. */
.pcard.is-collapsed { padding-bottom: 0; }
.pcard.is-collapsed > *:not(.pcard-head) { display: none !important; }
.pcard.is-collapsed > .pcard-head {
  margin-bottom: 0; padding-bottom: 14px; border-bottom: 0;
}

/* Une carte repliée ne doit pas non plus afficher les boutons de son en-tête
   (ex. « Quitter escadrille »), qui n'auraient plus de contexte. */
.pcard.is-collapsed > .pcard-head button { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pcard-collapse-caret { transition: none; }
}


/* 📰 V3.90.7 — Pastille « NEWS » de la carte Annonce.
   Écriture calquée sur `.activity-status` (le « ● En direct » du Flux
   d'activité) : mêmes 11 px, même police à chasse fixe, même interlettrage,
   même capitalisation forcée. Seules la couleur (vert) et le clignotement
   changent. Le clignotement utilise `steps()` : une étoile respire, une
   alerte clignote — un fondu doux ferait « décoratif » au lieu de « nouveau ». */
.announcement-news {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--green, #7be08a);
  animation: announcement-news-blink 1.15s steps(1, end) infinite;
}
@keyframes announcement-news-blink {
  0%, 58% { opacity: 1; }
  59%, 100% { opacity: 0.18; }
}
/* Accessibilité : un texte qui clignote est un déclencheur connu. Réglage
   système « animations réduites » → la pastille reste allumée, fixe. */
@media (prefers-reduced-motion: reduce) {
  .announcement-news { animation: none; opacity: 1; }
}

/* 📣 V3.65.0 — le bandeau d'annonce a sa propre carte dans le rail : il en
   occupe toute la largeur, et perd le cadre qui doublerait celui de la carte. */
.announcement-card > .announcement-banner {
  width: 100%;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   🟣 CHAÎNES TWITCH OFFICIELLES (V3.67.0) — lecteur sous le menu latéral
   Le bloc est un enfant de .portal-sidenav : il suit donc le menu dans
   TOUTES les dispositions (fixe en Classique, collant en Cockpit, empilé
   sur mobile) sans qu'aucune règle de position ne soit à dupliquer.
   ══════════════════════════════════════════════════════════════════════════ */
.twitch-live-card {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-panel-2);
  padding: 8px;
  display: none; /* révélé par app.js une fois l'état des chaînes connu */
  flex-direction: column;
  gap: 6px;
}
.twitch-live-card.is-ready { display: flex; }

.twitch-live-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.twitch-live-title {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-mono); color: #a970ff;
}
.twitch-live-status {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-mono); color: var(--text-faint);
}
.twitch-live-status.is-live { color: var(--ok, #3ddc97); }

/* Onglets de chaîne (visibles uniquement si les deux sont en direct) */
.twitch-live-tabs { display: flex; gap: 4px; }
.twitch-live-tab {
  flex: 1; min-width: 0;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--text-dim); cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--font-mono); font-size: 9px; padding: 3px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twitch-live-tab:hover { color: var(--text); }
.twitch-live-tab.active { color: #a970ff; border-color: #a970ff; }

/* Scène : le lecteur en 16/9, ou le panneau « hors ligne » à sa place. */
.twitch-live-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: 6px;
  background: #000; overflow: hidden;
}
.twitch-live-player, .twitch-live-player iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
/* En plein écran, le conteneur occupe l'écran : le lecteur suit. */
.twitch-live-stage:fullscreen { aspect-ratio: auto; border-radius: 0; }

.twitch-live-offline {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 6px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint);
}
.twitch-live-offline-icon { font-size: 16px; opacity: .7; }
.twitch-live-offline-links { display: flex; flex-direction: column; gap: 2px; }
.twitch-live-offline-links a { color: #a970ff; text-decoration: none; font-size: 9px; }
.twitch-live-offline-links a:hover { text-decoration: underline; }

/* Commandes : muet, volume −, volume +, plein écran. */
.twitch-live-controls { display: flex; align-items: center; gap: 3px; }
.twitch-live-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--text-dim); cursor: var(--c3d-curseur-main, pointer); font-size: 11px;
  padding: 2px 5px; line-height: 1.4;
  transition: color 0.15s, border-color 0.15s;
}
.twitch-live-btn:hover:not(:disabled) { color: #a970ff; border-color: #a970ff; }
.twitch-live-btn:disabled { opacity: .35; cursor: var(--c3d-curseur, default); }
.twitch-live-btn.is-on { color: var(--amber, #ffb347); border-color: var(--amber, #ffb347); }
.twitch-live-vol {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 9px; color: var(--text-faint); min-width: 30px; text-align: right;
}

/* Sur mobile, le menu passe pleine largeur : on borne le lecteur pour qu'il
   ne dévore pas l'écran. */
@media (max-width: 780px) {
  .twitch-live-card { max-width: 340px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚔️ COMBAT 3D (V3.68.0)
   ══════════════════════════════════════════════════════════════════════════
   Interface plein écran de l'instance de combat 3D. Elle reprend le langage
   visuel de l'épreuve « So Fast » (slots triangulaires alternés, HUD sombre)
   pour que le pilote retrouve les mêmes repères d'un mode à l'autre. */

.combat-enemy-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.combat-enemy-actions .btn-mine { flex: 1 1 auto; }
.btn-combat3d {
  background: linear-gradient(180deg, #1d3550, #12233a);
  border-color: #2f6ea8;
  color: #bfe4ff;
}
.btn-combat3d:hover { border-color: #57b6ff; color: #eaf7ff; }

.combat3d-hint {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(20, 34, 52, 0.55); border: 1px solid rgba(80, 140, 200, 0.3);
  color: #9fb6cc; font-size: 0.86rem; line-height: 1.5;
}
.combat3d-hint .chip-btn { margin-left: 8px; }

.c3d-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: #02040a; overflow: hidden;
}
.c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 🎯 V4.0 — LE CURSEUR DU NAVIGATEUR DISPARAÎT EN VOL.
   Le rond du viseur EST le curseur : la flèche du système se superposait à
   lui et disait la vérité sur le pointage, mais pas sur la visée. On la
   retire de la vue 3D — et on la rend partout où il faut cliquer (fenêtres
   du HUD, repères, barre d'escadrille), sinon le joueur ne sait plus ce
   qu'il survole. */
.c3d-overlay, .c3d-canvas { cursor: none; }
/* 🩹 V4.1.16 — sur une fenêtre du HUD, le viseur s'efface (V4.1.15) : la flèche
   revient sur toute la fenêtre, pas seulement sur ses boutons. */
#c3d-vitals, #c3d-haut, #c3d-radar, #c3d-commande, #c3d-drones-cmd, #c3d-abilities, .c3d-squad-zone,
#c3d-nav, #c3d-minage, #c3d-invite, #c3d-station, #c3d-pilotes, #c3d-saut { cursor: var(--c3d-curseur); }
.c3d-overlay button,
.c3d-overlay a,
.c3d-overlay input,
.c3d-overlay select,
.c3d-overlay .c3d-marker,
.c3d-overlay [data-act],
.c3d-overlay [data-ok],
.c3d-overlay [data-qte],
.c3d-overlay [data-saut-dest],
.c3d-overlay [data-saut-liste] { cursor: var(--c3d-curseur-main); }
/* 🩹 V4.1.16 — pointeurs du HUD, bleu / rouge (flèche ; main = bleu et rouge inversés).
   Toutes les règles « pointer » / « default » du fichier lisent ces variables :
   hors de la vue 3D elles n'existent pas, et le curseur du système reste. */
.c3d-overlay {
  --c3d-curseur: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpolygon points=%223,3 3,25 9,19.5 13.5,29 17.5,27 13,17.5 21,17.5%22 fill=%22none%22 stroke=%22%237fd4ff%22 stroke-opacity=%220.35%22 stroke-width=%224%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%223,3 3,25 9,19.5 13.5,29 17.5,27 13,17.5 21,17.5%22 fill=%22%2306121f%22 fill-opacity=%220.9%22 stroke=%22%237fd4ff%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3Cpolyline points=%225.5,8 5.5,19.5 8.5,16.5%22 fill=%22none%22 stroke=%22%23ff3b5c%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%223%22 cy=%223%22 r=%221.6%22 fill=%22%23ff3b5c%22/%3E%3C/svg%3E") 3 3, default;
  --c3d-curseur-main: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpolygon points=%223,3 3,25 9,19.5 13.5,29 17.5,27 13,17.5 21,17.5%22 fill=%22none%22 stroke=%22%23ff3b5c%22 stroke-opacity=%220.35%22 stroke-width=%224%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%223,3 3,25 9,19.5 13.5,29 17.5,27 13,17.5 21,17.5%22 fill=%22%2306121f%22 fill-opacity=%220.9%22 stroke=%22%23ff3b5c%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3Cpolyline points=%225.5,8 5.5,19.5 8.5,16.5%22 fill=%22none%22 stroke=%22%237fd4ff%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%223%22 cy=%223%22 r=%221.6%22 fill=%22%237fd4ff%22/%3E%3C/svg%3E") 3 3, pointer;
}
/* ⛶ V3.79.2 — vrai plein écran. L'élément passé en plein écran devient la
   surface d'affichage : on le force à l'occuper entièrement, sinon certains
   navigateurs le centrent à sa taille d'origine sur un fond noir. */
.c3d-overlay:fullscreen { width: 100vw; height: 100vh; inset: 0; }
.c3d-overlay:-webkit-full-screen { width: 100vw; height: 100vh; inset: 0; }

/* Flash rouge à l'encaissement : retour immédiat, sans lire le journal. */
.c3d-hit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.16s ease-out;
  background: radial-gradient(ellipse at center, rgba(255, 40, 40, 0) 45%, rgba(255, 40, 40, 0.42) 100%);
}

.c3d-panel {
  position: absolute; top: 14px; left: 16px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  /* La fenêtre de cible occupe le haut du centre (150 px de chaque côté) :
     le titre passe à la ligne plutôt que de glisser dessous. */
  max-width: calc(50% - 176px);
}
.c3d-title {
  font-size: 1.05rem; font-weight: 700; color: #e8f3ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.c3d-keys { font-size: 0.76rem; color: #8fa6bd; }

.c3d-vitals {
  position: absolute; top: 14px; right: 16px; z-index: 3; width: 300px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(6, 12, 20, 0.72); border: 1px solid rgba(80, 140, 200, 0.28);
  color: #cfe0f0; font-size: 0.82rem;
}
.c3d-vital-row { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 2px; }
.c3d-fleet-count { color: #8fa6bd; font-size: 0.74rem; }
.c3d-thrust { color: #8fa6bd; font-size: 0.76rem; }
.c3d-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08); margin-bottom: 4px;
}
.c3d-bar span { display: block; height: 100%; transition: width 0.25s ease-out; }
.c3d-hp { background: linear-gradient(90deg, #2fa36b, #6fe3a8); }
.c3d-hp-enemy { background: linear-gradient(90deg, #a3312f, #ff7b6b); }

/* ⛏️ Affichage de minage — la place de l'ancien journal de combat. */
.c3d-minage {
  position: absolute; left: 16px; bottom: 132px; z-index: 3; width: 360px; max-height: 260px;
  overflow-y: auto; padding: 8px 10px; border-radius: 10px;
  background: rgba(6, 12, 20, 0.66); border: 1px solid rgba(214, 170, 70, 0.30);
  color: #e6d9b8; font-size: 0.8rem; line-height: 1.45;
}
.c3d-minage-titre { font-weight: 700; color: #ffd98a; margin-bottom: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ⚔️ V4.1.0 — PANNEAU DE COMMANDEMENT DE FLOTTE
   ═══════════════════════════════════════════════════════════════════════════
   Trois lignes : la posture (globale), les groupes (sélection), les ordres.
   Chaque case est un bouton — on commande toute la flotte à la souris. */
.c3d-commande {
  position: absolute; left: 16px; bottom: 132px; z-index: 4; width: 320px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(6, 12, 20, 0.72); border: 1px solid rgba(120, 180, 255, 0.28);
  color: #dbeaf8; font-size: 0.78rem; line-height: 1.4;
}
.c3d-commande .c3d-minage-titre { color: #9ccaff; }
.c3d-cmd-ligne { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.c3d-commande button {
  cursor: var(--c3d-curseur-main, pointer); padding: 4px 8px; border-radius: 6px; font-size: 0.76rem; line-height: 1.2;
  background: rgba(22, 38, 58, 0.85); border: 1px solid rgba(90, 150, 210, 0.4); color: #cfe2f5;
}
.c3d-commande button:hover { background: rgba(40, 72, 104, 0.95); color: #fff; }
.c3d-cmd-posture.actif { color: #fff; font-weight: 700; }
.c3d-cmd-defense.actif { background: rgba(90, 169, 255, 0.30); border-color: #5aa9ff; }
.c3d-cmd-riposte.actif { background: rgba(232, 197, 106, 0.30); border-color: #e8c56a; }
.c3d-cmd-agressif.actif { background: rgba(255, 90, 90, 0.30); border-color: #ff5a5a; }
.c3d-cmd-groupe b { color: #8dff9a; font-weight: 700; }
.c3d-cmd-groupe.actif { background: rgba(60, 105, 150, 0.95); border-color: rgba(150, 210, 255, 0.75); color: #fff; }
.c3d-cmd-groupe.solo { opacity: 0.72; }
.c3d-cmd-groupe.perdu { opacity: 0.4; text-decoration: line-through; }
.c3d-cmd-groupe.perdu b { color: #ff8a8a; }
.c3d-cmd-ordres button { flex-grow: 1; text-align: left; }
.c3d-cmd-point {
  display: flex; align-items: center; gap: 7px; margin-top: 6px; padding-top: 5px;
  border-top: 1px solid rgba(120, 180, 255, 0.2); color: #9fb0c4; font-size: 0.74rem;
}
.c3d-cmd-point span { flex: 1 1 auto; }
.c3d-minage-ligne { display: flex; justify-content: space-between; gap: 8px; }
.c3d-minage-ligne small { color: #b9a67c; }
.c3d-minage-on { color: #8dff9a; }
.c3d-minage-off { color: #9aa7b3; }
.c3d-minage-scan { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(214, 170, 70, 0.22); }
.c3d-minage-touche {
  display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 4px; text-align: center;
  background: rgba(255, 217, 138, 0.14); border: 1px solid rgba(255, 217, 138, 0.35); color: #ffe7b0; font-size: 0.72rem;
}

/* 🎯 En haut au centre : fenêtre de la cible. Le panneau de saut se range
   juste à sa droite, sans décaler la fenêtre de cible. */
.c3d-haut { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; }
.c3d-cible {
  width: 300px; padding: 8px 12px; border-radius: 10px;
  background: rgba(6, 12, 20, 0.72); border: 1px solid rgba(220, 90, 90, 0.32);
  color: #f0d4d4; font-size: 0.82rem;
}
/* 📏 V4.1.1 — « hors de portée » : le joueur doit le voir avant de vider son
   chargeur pour rien. */
.c3d-hors-portee { color: #ff8a8a; font-weight: 700; }
.c3d-cible-verrou { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 190, 90, 0.28); color: #ffe2b0; }
.c3d-cible-info { color: #d8b9b9; font-size: 0.76rem; margin-top: 2px; }
.c3d-cargo { background: linear-gradient(90deg, #c9962e, #ffd26a); }

/* Indicateur de cible hors champ : un capital de 300 m se perd de vue vite. */
.c3d-arrow {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  font-size: 2rem; color: rgba(255, 120, 100, 0.85); pointer-events: none;
  text-shadow: 0 0 12px rgba(255, 80, 60, 0.8);
}

.c3d-flash {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 8px 16px; border-radius: 8px; background: rgba(6, 12, 20, 0.82);
  border: 1px solid rgba(120, 180, 240, 0.4); color: #eaf4ff; font-size: 0.92rem;
}

/* ── Escadrille : formations et vol libre ── */
/* 🚩 Escadrille, avec la ligne du minier appelé au-dessus. */
.c3d-squad-zone {
  position: absolute; right: 16px; bottom: 118px; z-index: 3;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.c3d-invite {
  position: absolute; right: 14px; bottom: 210px; z-index: 6; max-width: 280px;
  background: rgba(8, 14, 22, 0.85); border: 1px solid rgba(120, 190, 255, 0.3);
  border-radius: 8px; padding: 9px 11px; font-size: 0.82rem;
  display: flex; flex-direction: column; gap: 6px;
}
.c3d-invite-titre { font-weight: 700; color: #bfe2ff; }
/* 🏆 V3.99.8 — bulles de récompense : 10 s, puis fondu. */
.c3d-gains {
  position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 6px; min-width: 240px; max-width: 340px; pointer-events: none;
}
.c3d-gain {
  background: rgba(8, 20, 12, 0.86); border: 1px solid rgba(143, 227, 154, 0.55); border-radius: 8px;
  padding: 7px 11px; font-size: 0.82rem; color: #dff7e2; transition: opacity 0.6s ease;
}
.c3d-gain.fin { opacity: 0; }
.c3d-gain-titre { font-weight: 700; }
.c3d-gain-ligne { color: #bfe8c6; font-size: 0.78rem; }
.c3d-invite-detail { color: #9fb3c6; font-size: 0.78rem; }
/* ⚔️ V3.99.8 (MAJ 6) — pilotes de l'instance, alerte de corporation, IEM, drones. */
.c3d-pilotes {
  position: absolute; right: 14px; bottom: 300px; z-index: 5; max-width: 300px;
  background: rgba(8, 14, 22, 0.82); border: 1px solid rgba(255, 150, 80, 0.3);
  border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; display: flex; flex-direction: column; gap: 3px;
}
.c3d-pilotes-titre { font-weight: 700; color: #ffd2ad; }
.c3d-pil small { color: #9fb3c6; }
.c3d-pil-hostile { color: #ff9a5c; }
.c3d-pil-allie { color: #7fe8ff; }
.c3d-pil-neutre { color: #a9c2da; }
.c3d-alerte {
  position: absolute; right: 14px; top: 260px; z-index: 7; max-width: 320px;
  background: rgba(30, 12, 8, 0.9); border: 1px solid rgba(255, 120, 80, 0.6);
  border-radius: 8px; padding: 9px 11px; font-size: 0.82rem; display: flex; flex-direction: column; gap: 6px;
}
.c3d-alerte-titre { font-weight: 700; color: #ffd0b8; }
.c3d-alerte-ligne { color: #f2d6c8; }
.c3d-alerte-refus { color: #ff9a8a; font-size: 0.78rem; }
.c3d-alerte-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.c3d-alerte-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }
.c3d-iem {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 8; pointer-events: none;
  background: rgba(10, 24, 44, 0.85); border: 1px solid rgba(80, 170, 255, 0.8); border-radius: 8px;
  padding: 7px 14px; color: #bfe2ff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.3px;
  box-shadow: 0 0 18px rgba(63, 169, 255, 0.45);
}
.c3d-slot-drones .c3d-drones-charges { display: block; font-size: 0.62rem; letter-spacing: 1px; color: #b8ffc4; line-height: 1; }
.c3d-marker-pilote-hostile i { border-color: #ff8a3d !important; }
.c3d-marker-pilote-hostile span { color: #ffb27a; }
.c3d-marker-pilote-allie i { border-color: #5ae6ff !important; }
.c3d-marker-pilote-allie span { color: #9ef0ff; }
.c3d-marker-pilote span { color: #c8dcef; }

.c3d-station {
  position: absolute; left: 12px; bottom: 210px; z-index: 6;
  background: rgba(8, 14, 22, 0.82); border: 1px solid rgba(214, 170, 70, 0.32);
  border-radius: 8px; padding: 8px 10px; min-width: 190px; font-size: 0.82rem;
  display: flex; flex-direction: column; gap: 6px;
}
.c3d-station-btn {
  background: rgba(30, 44, 60, 0.9); color: #e8f1ff; cursor: var(--c3d-curseur-main, pointer);
  border: 1px solid rgba(120, 170, 220, 0.35); border-radius: 6px;
  padding: 5px 8px; text-align: left; font-size: 0.8rem;
}
.c3d-station-btn:hover { background: rgba(48, 72, 98, 0.95); }

.c3d-minier {
  padding: 6px 10px; border-radius: 10px; font-size: 0.8rem; color: #d6f5d6;
  background: rgba(6, 12, 20, 0.66); border: 1px solid rgba(90, 220, 120, 0.35);
}
.c3d-minier .c3d-bar { margin-top: 3px; }
.c3d-minier-pv { background: linear-gradient(90deg, #2fae57, #7dffa0); }
.c3d-squad {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 10px; background: rgba(6, 12, 20, 0.66);
  border: 1px solid rgba(80, 140, 200, 0.26);
}
.c3d-squad-title { color: #9fb6cc; font-size: 0.76rem; margin-right: 4px; }
.c3d-squad-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 44px; padding: 5px 6px; border-radius: 8px; cursor: var(--c3d-curseur-main, pointer);
  background: rgba(30, 48, 70, 0.7); border: 1px solid rgba(90, 150, 210, 0.3);
  color: #d6e6f5; font-size: 1rem;
}
.c3d-squad-btn small { font-size: 0.62rem; color: #8fa6bd; }
.c3d-squad-btn.active { border-color: #6fd0ff; box-shadow: 0 0 12px rgba(80, 190, 255, 0.35); }

/* ── Barre de compétence : slots triangulaires alternés ── */
/* 🎛️ V4.0.2 — AU-DELÀ DE CINQ COMPÉTENCES, LA BARRE PASSE À LA LIGNE.
   Cinq cases de 66 px et quatre écarts de 4 px font 346 px : la largeur est
   bornée juste au-dessus, donc la sixième compétence commence une seconde
   ligne. La barre étant ancrée par le BAS, cette ligne pousse vers le haut —
   le réticule et le radar ne bougent pas d'un pixel. */
.c3d-ability-bar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: flex-end; gap: 4px;
  flex-wrap: wrap; justify-content: center; align-content: flex-end;
  max-width: 356px;   /* 5 cases de 68 px + 4 écarts de 4 px */
}
/* 🎛️ V4.1.2 — LA CASE DE COMPÉTENCE, TELLE QUE LA MAQUETTE LA DESSINE.
   Les cases étaient des TRIANGLES alternés pointe en haut / pointe en bas :
   à l'écran, une rangée de flèches où l'on ne lisait ni l'icône ni l'état.
   La maquette dessine des cases à coins coupés, de taille égale, avec :
     · l'icône au centre, grande et lisible ;
     · une JAUGE qui se vide par le bas pendant la recharge (`--jauge`) ;
     · les secondes à la place de la touche quand la compétence n'est pas prête ;
     · un halo et une case plus haute quand l'effet est actif. */
.c3d-slot {
  width: 68px; height: 62px; padding: 0; cursor: var(--c3d-curseur-main, pointer); background: none; border: none;
  display: flex; align-items: flex-end; justify-content: center;
  transition: height 0.12s ease;
}
.c3d-slot .c3d-slot-inner {
  position: relative; overflow: hidden;
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: rgba(22, 38, 58, 0.85); border: 1px solid rgba(90, 150, 210, 0.45);
  clip-path: polygon(0 9px, 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  color: #dbeaf8; font-size: 1.3rem;
}
/* La jauge : un fond qui monte depuis le bas de la case. */
.c3d-slot .c3d-slot-inner::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%;
  height: var(--jauge, 0%); background: rgba(255, 179, 71, 0.20);
  pointer-events: none; transition: height 0.2s linear;
}
.c3d-slot .c3d-slot-emoji, .c3d-slot .c3d-slot-key { position: relative; }
.c3d-slot:hover .c3d-slot-inner { border-color: #6fd0ff; background: rgba(30, 56, 84, 0.92); }
.c3d-slot.locked .c3d-slot-inner { opacity: 0.42; }
/* ⏱️ Effet en cours : case plus haute, bordure vive, halo — elle se distingue
   d'un coup d'œil au milieu des autres. */
.c3d-slot.c3d-slot-actif { height: 72px; }
.c3d-slot.c3d-slot-actif .c3d-slot-inner {
  border-color: #ffb347; background: rgba(255, 179, 71, 0.24);
  box-shadow: 0 0 14px rgba(255, 179, 71, 0.55);
}
.c3d-slot.c3d-slot-actif .c3d-slot-key { color: #ffce8a; font-weight: 700; }
.c3d-slot.c3d-slot-recharge .c3d-slot-inner { border-color: rgba(255, 179, 71, 0.28); background: rgba(255, 255, 255, 0.03); }
.c3d-slot.c3d-slot-recharge .c3d-slot-key { color: #ffcf7a; }
.c3d-slot-key { font-size: 0.62rem; color: #8fa6bd; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Bouton de FUITE : icône « danger » triangulaire, cohérente avec les slots
   de compétence existants, mais colorée en alerte pour rester distincte. */
.c3d-slot-flee .c3d-slot-inner {
  background: rgba(62, 26, 22, 0.9); border-color: rgba(240, 140, 90, 0.6);
}
.c3d-slot-flee:hover .c3d-slot-inner { border-color: #ffb26b; background: rgba(88, 34, 26, 0.95); }
.c3d-danger-icon { width: 22px; height: 20px; fill: #ffcf6b; }
.c3d-slot-flee .c3d-slot-key { color: #ffcf9b; }

.c3d-result {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
  min-width: 320px; max-width: 520px; padding: 22px 26px; text-align: center;
  border-radius: 14px; background: rgba(6, 12, 20, 0.94);
  border: 1px solid rgba(110, 180, 240, 0.45); color: #e6f1fb;
}
.c3d-result-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.c3d-result-desc { font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; color: #c5d7e7; }

/* ── Fenêtre des commandes d'escadrille ── */
.c3d-key-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c3d-key-label { flex: 1; color: #c5d7e7; font-size: 0.86rem; }
.c3d-key-btn {
  min-width: 180px; padding: 6px 10px; border-radius: 8px; cursor: var(--c3d-curseur-main, pointer);
  background: rgba(30, 48, 70, 0.7); border: 1px solid rgba(90, 150, 210, 0.3); color: #dbeaf8;
}
.c3d-key-btn.capturing { border-color: #ffcf6b; color: #ffcf6b; }
.c3d-key-clear {
  padding: 6px 9px; border-radius: 8px; cursor: var(--c3d-curseur-main, pointer);
  background: rgba(62, 26, 22, 0.7); border: 1px solid rgba(240, 140, 90, 0.35); color: #ffbfa0;
}

/* ── 🎯 Système de visée (V3.69.0) ──────────────────────────────────────── */
.c3d-brackets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.c3d-bracket { position: absolute; transform: translate(-50%, -50%); }
.c3d-bracket i {
  position: absolute; width: 12px; height: 12px; display: block;
  border: 2px solid var(--c3d-bracket, #ff4d4d);
}
.c3d-bracket i:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.c3d-bracket i:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.c3d-bracket i:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.c3d-bracket i:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
/* Cible verrouillée : coins pleins et halo, pour la distinguer d'un coup d'œil
   des hostiles simplement encadrés. */
.c3d-bracket.locked { --c3d-bracket: #ffcf6b; filter: drop-shadow(0 0 6px rgba(255, 190, 90, 0.8)); }
.c3d-bracket-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -18px; white-space: nowrap;
  font-family: var(--font-mono, monospace); font-size: 10px; color: #ffb9a8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.c3d-bracket.locked .c3d-bracket-label { color: #ffcf6b; }

/* 🎯 V3.84.5 — VISEUR MOBILE.
   Il suit la souris (position posée en pixels par le script) au lieu d'être
   cloué au centre. `transform` le garde centré sur le point visé. */
.c3d-crosshair {
  /* 🎯 Repère de la FENÊTRE : le script y pose directement clientX/clientY,
     donc aucune conversion ne peut diverger du curseur. */
  position: fixed; top: 50%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 3;
  border: 1px solid rgba(160, 210, 255, 0.55); border-radius: 50%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.c3d-crosshair::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px;
  transform: translate(-50%, -50%); background: rgba(200, 235, 255, 0.9);
}
/* Pilotage au clic droit : le curseur disparaît pour ne pas gêner la visée —
   le viseur le remplace, et s'allume pour dire que le vaisseau s'aligne. */
.c3d-overlay.steering { cursor: none; }
/* 🎥 Caméra libre : la vue n'est plus alignée sur le vaisseau, il faut que ça
   se sache — sinon le pilote croit que son vaisseau a tourné. */
.c3d-overlay.freecam { cursor: move; }
.c3d-overlay.freecam::after {
  content: '🎥 Caméra libre';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; z-index: 6; pointer-events: none;
  background: rgba(10, 16, 26, 0.8); border: 1px solid rgba(255, 207, 107, 0.5);
  color: #ffcf6b; font-size: 12px; letter-spacing: 0.04em;
}
/* Le viseur ne veut plus rien dire pendant l'orbite : la vue et le nez du
   vaisseau ne sont plus alignés. */
.c3d-overlay.freecam .c3d-crosshair { opacity: 0.25; }
.c3d-overlay.steering .c3d-crosshair {
  border-color: rgba(255, 207, 107, 0.95);
  box-shadow: 0 0 10px rgba(255, 190, 90, 0.45);
}
/* Repère fixe du NEZ du vaisseau : c'est vers lui que le viseur est ramené
   quand on s'aligne. Sans lui, on ne verrait pas l'écart qu'on est en train de
   refermer — donc pas ce que le pilotage est en train de faire. */
.c3d-nose {
  position: fixed; top: 50%; left: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 0.12s ease;
}
.c3d-overlay.steering .c3d-nose { opacity: 0.75; }
.c3d-nose::before, .c3d-nose::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: rgba(150, 200, 255, 0.75);
}
.c3d-nose::before { width: 26px; height: 1px; transform: translate(-50%, -50%); }
.c3d-nose::after { width: 1px; height: 26px; transform: translate(-50%, -50%); }
/* 🚀 Compétence Missile — premier slot de la barre, à gauche (V3.69.0). */
.c3d-slot-missile .c3d-slot-inner {
  background: rgba(26, 44, 62, 0.9); border-color: rgba(120, 190, 255, 0.55);
}
.c3d-slot-missile:hover .c3d-slot-inner { border-color: #8fdcff; }
/* ☄️ Compétence Canon anti-colonie — teinte chaude, pour qu'on ne la confonde
   pas avec le missile dans le feu de l'action (V3.84.3). */
.c3d-slot-anticolony .c3d-slot-inner {
  background: rgba(58, 30, 16, 0.9); border-color: rgba(255, 150, 80, 0.6);
}
.c3d-slot-anticolony:hover .c3d-slot-inner { border-color: #ffb271; }
.c3d-slot-anticolony.locked .c3d-slot-inner { opacity: 0.55; }


/* ⏳ V3.82.4 — écran de préparation de l'instance 3D. */
.c3d-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; z-index: 40;
  background: radial-gradient(circle at 50% 45%, #0b1522 0%, #05080d 70%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfe6ff;
}
.c3d-loading-title { font-size: 18px; letter-spacing: 0.08em; }
.c3d-loading-step { font-size: 13px; color: #7f9ec0; min-height: 18px; }
.c3d-loading-bar {
  width: min(420px, 60vw); height: 4px; border-radius: 3px;
  background: rgba(120, 170, 220, 0.18); overflow: hidden;
}
.c3d-loading-bar > i {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #39d4ff, #8ff0a8);
  transition: width 0.18s ease-out;
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚙️ SECTION OPTIONS (V3.84.0)
   ══════════════════════════════════════════════════════════════════════════ */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.opt-card {
  display: flex; flex-direction: column; gap: 4px; cursor: var(--c3d-curseur-main, pointer);
  border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  background: rgba(120, 170, 220, 0.04);
}
.opt-card.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan-dim); }
.opt-card input { display: none; }
.opt-card b { font-size: 14px; }
.opt-card span { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.opt-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.opt-field { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.opt-field > span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.opt-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font-size: 13px; }
/* 🔊 V4.1.9 — Options ▸ Son : un curseur par volume. */
.opt-volumes { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; max-width: 520px; }
.opt-volume { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgba(120, 170, 220, 0.04); }
.opt-volume > span { display: flex; justify-content: space-between; }
.opt-volume > span b { color: var(--accent); font-size: 12px; letter-spacing: 0; }
.opt-volume input[type="range"] { width: 100%; accent-color: var(--accent); cursor: var(--c3d-curseur-main, pointer); }
.opt-volume small { font-size: 12px; color: var(--text-dim); }

/* Liste des commandes : une ligne = une action, sa touche, sa liaison manche. */
.opt-keys { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.opt-key-row {
  /* Une colonne de plus pour l'inversion d'axe. Elle est TOUJOURS occupée —
     par le bouton ou par un vide — sans quoi les lignes sans axe
     décaleraient leur croix d'une colonne. */
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 150px 190px 34px 34px auto;
  gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px;
  border: 1px solid transparent;
}
.opt-key-row:hover { background: rgba(120, 170, 220, 0.05); }
.opt-key-row.conflict { border-color: #d9534f; background: rgba(217, 83, 79, 0.08); }
.opt-key-name { font-size: 13px; }
.opt-key-name i { font-style: normal; opacity: 0.5; cursor: help; }
.opt-conflict { font-size: 12px; color: #ff9d99; }
.opt-bind {
  background: var(--bg-input, #0b131c); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: var(--c3d-curseur-main, pointer);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opt-bind:hover { border-color: var(--cyan-dim); }
.opt-bind.capturing { border-color: var(--accent); color: var(--accent); }
.opt-bind.pad { opacity: 0.85; }
.opt-mini {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 6px; padding: 4px 6px; cursor: var(--c3d-curseur-main, pointer); font-size: 12px;
}
/* Axe inversé : l'état doit se lire sur la ligne sans ouvrir quoi que ce
   soit — c'est un réglage qu'on oublie avoir posé, et qu'on cherche ensuite. */
.opt-mini.active {
  border-color: var(--accent, #4aa3ff);
  color: var(--accent, #4aa3ff);
  background: rgba(74, 163, 255, 0.12);
}

/* Périphériques : testeur d'axes et de boutons en direct. */
.opt-device { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.opt-device-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.opt-axis-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.opt-axis { display: grid; grid-template-columns: 34px 1fr 48px; gap: 6px; align-items: center; font-size: 11px; }
.opt-axis > span { color: var(--text-dim); font-family: ui-monospace, monospace; }
.opt-axis > i {
  display: block; height: 8px; border-radius: 4px; position: relative;
  background: rgba(120, 170, 220, 0.18);
}
/* Le repère glisse le long de la barre : le centre est à 50 %, ce qui rend une
   dérive au repos immédiatement visible. */
.opt-axis > i::after {
  content: ''; position: absolute; top: -2px; left: var(--v); width: 4px; height: 12px;
  border-radius: 2px; background: var(--cyan); transform: translateX(-2px);
}
.opt-axis > b { font-family: ui-monospace, monospace; color: var(--text-dim); text-align: right; }
.opt-btn-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.opt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 5px; font-size: 11px;
  border: 1px solid var(--line); color: var(--text-dim);
  font-family: ui-monospace, monospace;
}
.opt-btn.on { border-color: var(--cyan); color: var(--cyan); background: rgba(79, 214, 232, 0.12); }
.opt-calib-readout { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* 📊 V3.84.0 — dégâts par seconde et part de l'escadrille, au tableau de bord. */
.c3d-vital-row.c3d-dps { color: #ffc08a; }
.c3d-vital-row.c3d-dps b { color: #8ff0a8; }

/* ══════════════════════════════════════════════════════════════════════════
   🎁 V3.87.0 — Récompense Quotidienne
   Bouton d'en-tête (à côté du signal 🟢/🔴 « En ligne ») + panneau du cycle
   de 7 jours. Vert = un lot est disponible, rouge = déjà réclamé aujourd'hui.
   ══════════════════════════════════════════════════════════════════════════ */
.daily-reward-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim, #8fa3b8);
  vertical-align: middle;
  cursor: var(--c3d-curseur-main, pointer);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.daily-reward-btn:hover { filter: brightness(1.25); transform: translateY(-1px); }
.daily-reward-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #666;
}
/* 🟢 Disponible */
.daily-reward-btn.available {
  border-color: rgba(51, 204, 102, 0.5);
  color: #6ee7a0;
  background: rgba(51, 204, 102, 0.08);
}
.daily-reward-btn.available .daily-reward-dot {
  background: #33cc66;
  box-shadow: 0 0 8px rgba(51, 204, 102, 0.9);
  animation: daily-reward-pulse 2s ease-in-out infinite;
}
/* 🔴 Déjà réclamée aujourd'hui */
.daily-reward-btn.claimed {
  border-color: rgba(255, 68, 68, 0.45);
  color: #ff8a8a;
  background: rgba(255, 68, 68, 0.06);
}
.daily-reward-btn.claimed .daily-reward-dot {
  background: #ff4444;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.8);
}
@keyframes daily-reward-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ── Panneau ─────────────────────────────────────────────────────────────── */
.daily-reward-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(3, 6, 10, 0.78);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(3px);
}
.daily-reward-panel {
  position: relative;
  width: 100%; max-width: 780px; max-height: 92vh; overflow-y: auto;
  padding: 22px 24px 18px;
  border-radius: 14px;
  border: 1px solid rgba(120, 220, 160, 0.18);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(30, 70, 48, 0.55), rgba(10, 16, 14, 0.98));
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.65);
}
.daily-reward-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--text-dim, #8fa3b8);
  font-size: 16px; cursor: var(--c3d-curseur-main, pointer);
}
.daily-reward-close:hover { color: #fff; }
.daily-reward-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(160, 200, 175, 0.75);
}
.daily-reward-title {
  margin-top: 4px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0.06em;
  color: #ffffff;
}
.daily-reward-rotation {
  margin-top: 4px; font-size: 0.72rem; color: rgba(180, 210, 195, 0.7);
}
.daily-reward-track {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 18px 2px 14px;
  scrollbar-width: thin;
}
.daily-card {
  flex: 0 0 108px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  position: relative;
  text-align: center;
}
.daily-card-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(200, 220, 210, 0.8);
}
.daily-card-icon { font-size: 1.9rem; line-height: 1.1; margin: 4px 0 2px; }
.daily-card-amount { font-size: 0.95rem; font-weight: 700; color: #fff; }
.daily-card-unit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.1em; color: rgba(190, 210, 200, 0.65);
}
.daily-card-check {
  position: absolute; top: 8px; right: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #33cc66; color: #06210f;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.daily-card.claimed { opacity: 0.5; }
.daily-card.current {
  border-color: rgba(80, 230, 140, 0.75);
  box-shadow: 0 0 16px rgba(60, 210, 120, 0.35);
  background: rgba(60, 200, 120, 0.1);
}
.daily-card.jackpot {
  border-color: rgba(255, 200, 90, 0.45);
  background: linear-gradient(180deg, rgba(120, 80, 20, 0.35), rgba(40, 26, 8, 0.5));
}
.daily-card.jackpot.current {
  border-color: rgba(255, 214, 110, 0.9);
  box-shadow: 0 0 18px rgba(255, 190, 70, 0.4);
}
.daily-reward-claim {
  width: 100%; margin-top: 6px; padding: 14px;
  border-radius: 10px; border: 1px solid rgba(80, 230, 140, 0.5);
  background: rgba(50, 190, 110, 0.16);
  color: #9ef2c0;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: var(--c3d-curseur-main, pointer);
  transition: filter 0.15s ease;
}
.daily-reward-claim:hover:not(:disabled) { filter: brightness(1.25); }
.daily-reward-claim:disabled {
  cursor: var(--c3d-curseur, default); opacity: 0.65;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(180, 200, 190, 0.7);
}
.daily-reward-result {
  margin-top: 12px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid rgba(80, 230, 140, 0.35);
  background: rgba(50, 190, 110, 0.1);
  font-size: 0.86rem; color: #d9f7e6; line-height: 1.6;
}
.daily-reward-result.error {
  border-color: rgba(255, 90, 90, 0.4);
  background: rgba(200, 60, 60, 0.1);
  color: #ffc9c9;
}
.daily-reward-rule {
  margin-top: 14px; font-size: 0.72rem; color: rgba(170, 190, 180, 0.5);
}
@media (max-width: 640px) {
  .daily-reward-btn .daily-reward-label { display: none; }
  .daily-reward-btn { padding: 4px; }
  .daily-reward-title { font-size: 1.15rem; }
  .daily-card { flex: 0 0 96px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   💬 V3.90.4 — CHAT ANCRÉ SOUS LE LECTEUR TWITCH, ET SA GRANDE FENÊTRE
   ──────────────────────────────────────────────────────────────────────────
   V3.90.2 ancrait le chat COMPLET dans le menu : compteur de messages,
   onglets de salon, fil et zone de saisie s'entassaient dans une colonne de
   200 px, avec des ascenseurs dans tous les sens et des messages coupés en
   plein milieu. Illisible.

   La carte ancrée se réduit donc à son EN-TÊTE : « 💬 Chat en direct » et le
   bouton ⛶. Tout le reste — salons, fil, mise en forme, saisie — n'apparaît
   que dans la grande fenêtre, seul endroit où la place ne manque pas. Le DOM
   est inchangé (aucun élément supprimé) : le JavaScript du chat continue de
   remplir des éléments simplement masqués, et la fenêtre affiche donc un fil
   déjà à jour à l'ouverture.
   ══════════════════════════════════════════════════════════════════════════ */
.chat-dock-wrap { margin-top: 10px; }
.chat-dock { padding: 10px 12px; }
.chat-dock .pcard-head { margin: 0; gap: 8px; align-items: center; }
.chat-dock .pcard-title { font-size: 12px; }

/* Carte ancrée = en-tête seul. Compteur de messages, onglets de salon, fil et
   saisie attendent la grande fenêtre. On masque des éléments NOMMÉS plutôt
   qu'un « tous sauf l'en-tête » : ainsi la fenêtre agrandie n'a aucune règle
   d'affichage à défaire, et le JavaScript du chat garde la main sur ce qui
   s'ouvre et se ferme (bannière de silence, liste des bloqués, signalement). */
body:not(.chat-expanded) .chat-dock #chat-status,
body:not(.chat-expanded) .chat-dock #chat-channel-tabs,
body:not(.chat-expanded) .chat-dock #chat-muted-banner,
body:not(.chat-expanded) .chat-dock #chat-log,
body:not(.chat-expanded) .chat-dock .chat-composer,
body:not(.chat-expanded) .chat-dock #chat-error,
body:not(.chat-expanded) .chat-dock #chat-blocked-panel,
body:not(.chat-expanded) .chat-dock #chat-report-modal { display: none !important; }

/* Bouton ⛶ / ✕ : discret, poussé à droite de l'en-tête. */
.chat-expand-btn {
  margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--text-dim); border-radius: 4px; cursor: var(--c3d-curseur-main, pointer);
  font-size: 12px; line-height: 1; padding: 3px 7px;
  transition: color 0.15s, border-color 0.15s;
}
.chat-expand-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Grande fenêtre ──────────────────────────────────────────────────────
   Le conteneur devient un voile plein écran et la carte se recentre. Le
   `position: fixed` la sort de la colonne du menu : ni le défilement du
   menu ni sa largeur ne la contraignent plus.
   V3.90.4 — la fenêtre était trop haute : son en-tête sortait par le haut de
   l'écran. Elle est ramenée à une taille qui tient TOUJOURS dans la fenêtre
   du navigateur, fil de discussion compris. */
body.chat-expanded .chat-dock-wrap {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, 0.66);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; margin-top: 0;
  /* V3.91.1 — la fenêtre démarre SOUS les barres du haut (menu + barre
     d'infos) : son en-tête n'est plus collé ni masqué par elles. */
  padding-top: calc(var(--top-offset, 0px) + 24px);
}
body.chat-expanded .chat-dock {
  width: min(1060px, 88vw);
  max-height: min(74vh, calc(100vh - var(--top-offset, 0px) - 48px));
  border-radius: var(--radius, 10px);
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
/* Le corps du chat réapparaît intégralement dans la fenêtre. */
body.chat-expanded .chat-dock .pcard-title { font-size: 15px; }
body.chat-expanded .chat-dock #chat-status { font-size: 11px; }
body.chat-expanded .chat-dock .chat-log {
  /* Le fil prend la hauteur restante de la fenêtre, jamais davantage. */
  flex: 1; height: auto; min-height: 180px; max-height: 42vh;
  padding: 12px 14px; font-size: 13px;
}
body.chat-expanded .chat-dock .chat-toolbar,
body.chat-expanded .chat-dock .chat-count { display: flex; }
body.chat-expanded .chat-dock .chat-hint { display: inline; }
body.chat-expanded .chat-dock .chat-input { font-size: 13px; }
body.chat-expanded .chat-dock .chat-composer-foot { justify-content: space-between; }

/* ── V3.90.4 — « Habillage du portail » aligné sur les rubriques du menu ──
   L'entrée était en minuscules, plus claire que les autres et sans puce :
   elle ressortait comme un corps étranger au milieu des rubriques. */
.portal-sidenav .portal-tab.sidenav-solo {
  margin: 3px 0; gap: 6px;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); padding: 5px 8px;
}
.portal-sidenav .portal-tab.sidenav-solo::before {
  content: "\25B8"; font-size: 8px; line-height: 1;
}
.portal-sidenav .portal-tab.sidenav-solo:hover { color: var(--text-dim); background: none; }
/* L'entrée reste mise en évidence quand sa page est ouverte. */
.portal-sidenav .portal-tab.sidenav-solo.active {
  color: var(--accent); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎁 CAISSES DE BUTIN (V3.91.0)
   ═══════════════════════════════════════════════════════════════════════════
   Les couleurs de rareté sont volontairement les mêmes du portail au Discord
   (voir RARITIES dans src/lootbox.js) : un lot « orange » est légendaire des
   deux côtés, sans que le pilote ait à réapprendre un code visuel. */
.boutique-card.is-lootbox { border-color: var(--amber-dim); }

.boutique-loot-preview {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.loot-preview-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.loot-rarity-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.loot-rarity-row:first-of-type { border-top: none; }
.loot-rarity-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}
.loot-rarity-items { color: var(--text-dim); }

/* Couleurs par rareté — partagées par l'aperçu et la révélation. */
.loot-commun     .loot-rarity-tag, .lootbox-reveal.loot-commun     { color: #9aa5b1; }
.loot-rare       .loot-rarity-tag, .lootbox-reveal.loot-rare       { color: #4a9eff; }
.loot-epique     .loot-rarity-tag, .lootbox-reveal.loot-epique     { color: #b46cff; }
.loot-legendaire .loot-rarity-tag, .lootbox-reveal.loot-legendaire { color: #ffa640; }
.loot-mythique   .loot-rarity-tag, .lootbox-reveal.loot-mythique   { color: #ff4d6d; }

.boutique-open-slot:empty { display: none; }

/* Défilement pendant l'ouverture (le lot est déjà décidé côté serveur). */
.lootbox-roll {
  margin: 8px 0;
  padding: 14px 8px;
  text-align: center;
  border: 1px dashed var(--amber-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lootbox-roll-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  animation: lootbox-flicker 0.11s steps(2) infinite;
}
@keyframes lootbox-flicker {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Révélation du lot obtenu. */
.lootbox-reveal {
  margin: 8px 0;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  animation: lootbox-pop 0.35s ease-out;
}
.lootbox-reveal-rarity {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lootbox-reveal-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text);
}
@keyframes lootbox-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Respect des préférences système : pas de clignotement imposé. */
@media (prefers-reduced-motion: reduce) {
  .lootbox-roll-label { animation: none; }
  .lootbox-reveal { animation: none; }
}

/* ── V3.91.1 — pastille des messages non lus du chat ────────────────────── */
.chat-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700;
  line-height: 1; box-shadow: 0 0 0 2px var(--bg-panel);
  animation: chatUnreadPulse 2s ease-in-out infinite;
}
@keyframes chatUnreadPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
body.chat-expanded .chat-unread-badge { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   🗺️ RELEVÉ STELLAIRE (V3.93.0) — carnet de bord cartographique
   ══════════════════════════════════════════════════════════════════════════ */
.survey-card { grid-column: 1 / -1; }
.survey-counter { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.survey-intro { font-size: 12px; color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; }
.survey-retro {
  font-size: 12px; line-height: 1.6; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}

.survey-bar { height: 5px; background: var(--bg-panel-2); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.survey-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }

.survey-sys-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.survey-sys-name { font-family: var(--head-font); font-size: 16px; color: var(--text); }
.survey-sys-meta { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.survey-sys-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.survey-sys-count.done { color: var(--green); font-weight: 700; }
.survey-complete { font-size: 12px; color: var(--green); margin: 6px 0 2px; }

.survey-lines { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.survey-line {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 2px; border-top: 1px solid var(--line-soft);
}
.survey-line:first-child { border-top: none; }
.survey-check { flex: none; width: 15px; color: var(--text-faint); }
.survey-line.done .survey-check { color: var(--green); }
.survey-line-body { min-width: 0; }
.survey-line-name { display: block; font-size: 12.5px; color: var(--text-dim); }
.survey-line.done .survey-line-name { color: var(--text); }
.survey-line-how { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.survey-pois { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.survey-poi {
  font-size: 10.5px; padding: 2px 8px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--text-faint); background: var(--bg-panel-2);
}
.survey-poi.done { border-color: var(--cyan-dim); color: var(--cyan); }

.survey-facts { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); }
.survey-bonus {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-dim); line-height: 1.6;
}

.survey-family { margin-bottom: 18px; }
.survey-family-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); font-family: var(--font-mono); margin-bottom: 8px;
}
.survey-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.survey-col {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-panel-2); padding: 10px 12px;
}
.survey-col.done { border-color: var(--green); }
.survey-col-head { display: flex; gap: 8px; align-items: baseline; }
.survey-col-name { font-size: 12px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survey-col-count { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); flex: none; }
.survey-col-foot { display: flex; gap: 8px; font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); }
.survey-col-title { margin-left: auto; color: var(--amber); }

.survey-grand {
  margin-top: 6px; padding: 12px 14px; font-size: 12px; line-height: 1.6;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--text-dim);
}
.survey-grand.done { border-style: solid; border-color: var(--green); color: var(--green); }

.survey-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.survey-sheet {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 11.5px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--bg-panel-2); color: var(--text-faint);
}
.survey-sheet.partial { border-left-color: var(--amber); color: var(--text-dim); }
.survey-sheet.done { border-left-color: var(--green); color: var(--text); }
.survey-sheet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survey-sheet-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.survey-sheet-count { margin-left: auto; font-family: var(--font-mono); flex: none; }

@media (max-width: 780px) {
  .survey-collections, .survey-sheets { grid-template-columns: 1fr; }
  .survey-sheets { max-height: 340px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🟩 THÈME « GW-BASIC » (V3.92.0)
   Terminal à phosphore vert façon GW-BASIC / MS-DOS : fond noir, texte vert,
   police écran VT323 pour les titres, cadres en pointillés, vidéo inversée
   pour l'élément actif, lignes de balayage et colonnes de code en fond.

   Tout est scopé par html[data-theme="gw-basic"] (posé par applyActiveTheme()
   dans app.js) : aucun autre thème n'hérite de ces règles, et le thème se
   combine avec les deux skins (Classique / Scanner) et les deux dispositions
   (Classique / Cockpit). Le corps de texte reste en IBM Plex Mono — déjà une
   police à chasse fixe — pour que les longs textes restent lisibles ; seule
   la « police d'affichage » (titres, boutons, onglets) passe en VT323.

   La police est hébergée par le jeu lui-même (web/public/fonts/vt323, licence
   SIL OFL) : pas de dépendance à Google Fonts, et le descripteur size-adjust
   la met à l'échelle des autres polices (VT323 est très petite à taille égale).
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'GW VT323';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/vt323/vt323-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 125%;
}
@font-face {
  font-family: 'GW VT323';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/vt323/vt323-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 125%;
}

/* ── Variables : structure carrée, titres en VT323, accent vert ──────────
   html[data-theme] (spécificité 0,1,1) l'emporte sur [data-skin] (0,1,0) :
   le thème impose ses angles nets et son accent quel que soit le skin. */
html[data-theme="gw-basic"] {
  --font-display: 'GW VT323', 'IBM Plex Mono', monospace;
  --head-font: var(--font-display);
  --head-tracking: 0.06em;
  --head-transform: uppercase;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow-card: none;
  --accent: var(--cyan);
  --accent-dim: var(--cyan-dim);
  --gw-glow: 0 0 6px color-mix(in srgb, var(--cyan) 35%, transparent);
}
html[data-theme="gw-basic"] ::selection { background: var(--cyan); color: var(--bg); }

/* VT323 n'existe qu'en graisse normale : on interdit au navigateur de
   fabriquer un faux gras (baveux) partout où la police d'affichage sert.
   IBM Plex Mono, elle, possède de vraies graisses et n'est pas concernée.
   La liste ci-dessous couvre en plus les navigateurs trop anciens pour
   font-synthesis-weight. */
html[data-theme="gw-basic"] { font-synthesis-weight: none; }
html[data-theme="gw-basic"] .pcard-title,
html[data-theme="gw-basic"] .landing-title,
html[data-theme="gw-basic"] .landing-brand,
html[data-theme="gw-basic"] .pilot-name,
html[data-theme="gw-basic"] .btn-collect,
html[data-theme="gw-basic"] .shop-tab,
html[data-theme="gw-basic"] .depot-tab,
html[data-theme="gw-basic"] .feature-title {
  font-weight: 400;
}

/* ── Fond : noir phosphore, sans étoiles ─────────────────────────────── */
html[data-theme="gw-basic"] .starfield { background: var(--bg); }
html[data-theme="gw-basic"] .starfield::after { opacity: 0.16; }

/* Lignes de balayage (le skin Classique les masque d'habitude). Statiques,
   donc sans effet sur « réduire les animations » ; masquées sur mobile
   comme pour le skin Scanner. */
html[data-theme="gw-basic"] body::before {
  display: block;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: normal; opacity: 1;
}
@media (max-width: 640px) {
  html[data-theme="gw-basic"] body::before { display: none; }
}

/* Colonnes de pseudo-code en arrière-plan (remplies par spawnGwCode() dans
   app.js). Derrière tout le reste, comme le fond étoilé. */
.gw-code { display: none; }
html[data-theme="gw-basic"] .gw-code {
  display: block;
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.gw-code-col {
  position: absolute; top: 72px; bottom: 0; width: 22vw; max-width: 380px; overflow: hidden;
  font-family: 'GW VT323', monospace; font-size: 13px; line-height: 1.25;
  color: var(--cyan-dim); opacity: 0.4; white-space: pre;
}
/* Fondu vers le centre de l'écran : le code s'efface avant d'atteindre le
   contenu, et ne gêne pas la lecture dans les interstices entre les cartes. */
.gw-code-col.left {
  left: 0; padding-left: 10px;
  -webkit-mask-image: linear-gradient(to right, #000 35%, transparent);
  mask-image: linear-gradient(to right, #000 35%, transparent);
}
.gw-code-col.right {
  right: 0; padding-right: 10px; text-align: right;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent);
  mask-image: linear-gradient(to left, #000 35%, transparent);
}
/* Le texte est doublé : défiler de -50 % boucle sans à-coup. */
.gw-code-scroll { animation: gw-code-scroll 240s linear infinite; }
.gw-code-col.right .gw-code-scroll { animation-duration: 300s; animation-direction: reverse; }
@keyframes gw-code-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .gw-code-scroll { animation: none; } }
@media (max-width: 780px) { html[data-theme="gw-basic"] .gw-code { display: none; } }

/* ── En-têtes : bande hachurée façon écran de démarrage ─────────────────── */
html[data-theme="gw-basic"] .landing-nav,
html[data-theme="gw-basic"] .portal-nav {
  background:
    repeating-linear-gradient(115deg, var(--cyan-dim) 0 2px, transparent 2px 8px)
    top left / 100% 6px no-repeat;
  border-bottom: 1px dashed var(--line);
}
html[data-theme="gw-basic"] .landing-brand { color: var(--cyan); font-size: 17px; letter-spacing: 0.18em; }
html[data-theme="gw-basic"] .brand-glyph { text-shadow: var(--gw-glow); }
@media (max-width: 640px) {
  html[data-theme="gw-basic"] .landing-brand { font-size: 13px; letter-spacing: 0.08em; }
}

/* Barre d'infos : fond opaque du thème (la couleur est codée en dur ailleurs). */
html[data-theme="gw-basic"] .sticky-infobar {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px dashed var(--line);
}

/* ── Cartes : cadres en pointillés, titres en VT323 ─────────────────────── */
html[data-theme="gw-basic"] .pcard,
html[data-theme="gw-basic"] .portal-sidenav {
  border-style: dashed;
}
html[data-theme="gw-basic"] .pcard-head { border-bottom-style: dashed; }
html[data-theme="gw-basic"] .pcard-title {
  font-size: 15px; letter-spacing: 0.06em; text-shadow: var(--gw-glow);
}
/* Carte du chat réduite (menu étroit) : titre un peu plus petit et en-tête
   sur une seule ligne, pour que la pastille des non-lus reste à côté. */
html[data-theme="gw-basic"] .chat-dock .pcard-title {
  font-size: 13px; letter-spacing: 0.01em; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Réduite, la carte n'a que ~160 px utiles : sans majuscules forcées, le titre
   tient en entier même avec une pastille « 99+ » (majuscules dans la fenêtre). */
html[data-theme="gw-basic"] body:not(.chat-expanded) .chat-dock .pcard-title { text-transform: none; }
html[data-theme="gw-basic"] body:not(.chat-expanded) .chat-dock .pcard-head { gap: 6px; position: relative; }
/* La pastille se pose en exposant sur le coin du bouton ⛶ (comme une
   notification sur une icône) au lieu de prendre de la place au titre. */
html[data-theme="gw-basic"] body:not(.chat-expanded) .chat-dock .chat-unread-badge {
  position: absolute; top: -8px; right: -8px; z-index: 1;
  min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
}
html[data-theme="gw-basic"] body:not(.chat-expanded) .chat-dock .pcard-title::before { content: none; }
html[data-theme="gw-basic"] .chat-unread-badge,
html[data-theme="gw-basic"] .chat-expand-btn { flex-shrink: 0; }
html[data-theme="gw-basic"] body:not(.chat-expanded) .chat-dock .pcard-head { flex-wrap: nowrap; }
html[data-theme="gw-basic"] body.chat-expanded .chat-dock .pcard-title { font-size: 19px; }
/* Le skin Scanner préfixe les titres par « // » : en BASIC, c'est « REM ». */
html[data-theme="gw-basic"][data-skin="scanner"] .pcard-title::before { content: "REM "; }
html[data-theme="gw-basic"] .pilot-name { font-size: 26px; letter-spacing: 0.04em; }
html[data-theme="gw-basic"] .portal-breadcrumb::before { content: "C:\\> "; color: var(--text-faint); white-space: pre; }

/* ── Accueil : grand titre + curseur clignotant ─────────────────────────── */
html[data-theme="gw-basic"] .landing-title {
  letter-spacing: 0.02em; line-height: 1.02; text-transform: uppercase;
  color: var(--cyan); text-shadow: var(--gw-glow);
}
html[data-theme="gw-basic"] .landing-title::after {
  content: "\2588"; margin-left: 0.12em; animation: gw-blink 1.06s steps(1) infinite;
}
@keyframes gw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="gw-basic"] .landing-title::after { animation: none; }
}
html[data-theme="gw-basic"] .landing-eyebrow {
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
html[data-theme="gw-basic"] .landing-features { border-style: dashed; }
html[data-theme="gw-basic"] .feature-title { font-size: 19px; color: var(--cyan); }
html[data-theme="gw-basic"] .discord-login-btn {
  background: var(--cyan); color: var(--bg); box-shadow: none;
  outline: 1px solid var(--cyan); outline-offset: -1px;
}
html[data-theme="gw-basic"] .discord-login-btn:hover {
  background: var(--bg); color: var(--cyan); filter: none; box-shadow: none;
}

/* ── Menu latéral : élément actif en vidéo inversée ──────────────────────── */
html[data-theme="gw-basic"] .portal-sidenav .portal-tab.active,
html[data-theme="gw-basic"] .portal-sidenav .portal-tab.sidenav-solo.active {
  background: var(--cyan); color: var(--bg); border-left-color: var(--cyan);
}
html[data-theme="gw-basic"] .portal-sidenav .portal-tab:not(.active):hover,
html[data-theme="gw-basic"] .portal-sidenav .sidenav-action:hover {
  background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--text);
}

/* ── Onglets et boutons : carrés, inversion au survol ────────────────────── */
html[data-theme="gw-basic"] .shop-tab,
html[data-theme="gw-basic"] .depot-tab { font-size: 15px; letter-spacing: 0.05em; }
html[data-theme="gw-basic"] .shop-tab.active,
html[data-theme="gw-basic"] .depot-tab.active {
  background: var(--cyan); color: var(--bg); border-color: var(--cyan);
}
html[data-theme="gw-basic"] .btn-collect {
  font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bg); outline: 1px solid var(--green); outline-offset: -1px;
}
html[data-theme="gw-basic"] .btn-collect:hover:not(:disabled) {
  background: var(--bg); color: var(--green); filter: none;
}
html[data-theme="gw-basic"] .landing-admin-link:hover,
html[data-theme="gw-basic"] .chat-expand-btn:hover {
  background: var(--cyan); color: var(--bg); border-color: var(--cyan);
}

/* Champs de saisie : curseur de saisie et contour de focus verts. */
html[data-theme="gw-basic"] input,
html[data-theme="gw-basic"] textarea { caret-color: var(--cyan); }
html[data-theme="gw-basic"] input:focus-visible,
html[data-theme="gw-basic"] textarea:focus-visible,
html[data-theme="gw-basic"] select:focus-visible {
  outline: 1px solid var(--cyan); outline-offset: 1px;
}
/* 🗺️ V3.93.0 — Relevé stellaire sous le thème GW-BASIC : cadres en pointillés
   et remplissage plein, cohérents avec le reste du terminal. */
html[data-theme="gw-basic"] .survey-col,
html[data-theme="gw-basic"] .survey-sheet,
html[data-theme="gw-basic"] .survey-poi,
html[data-theme="gw-basic"] .survey-retro { border-style: dashed; }
html[data-theme="gw-basic"] .survey-bar { border: 1px solid var(--line); height: 7px; border-radius: 0; }
html[data-theme="gw-basic"] .survey-sys-name { font-size: 21px; }
/* 🗺️ V3.93.0 — retour de relevé affiché sous une récolte ou un scan. */
.survey-feedback {
  margin-top: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.7;
  border-left: 2px solid var(--green); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--green) 7%, transparent); color: var(--text-dim);
}
/* 🥇 V3.94.0 — Première Découverte */
.survey-discovery {
  margin: 8px 0 2px; padding: 9px 11px; font-size: 11.5px; line-height: 1.6;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.survey-discovery.claimed { border-color: var(--amber-dim); color: var(--amber); background: color-mix(in srgb, var(--amber) 7%, transparent); }
.survey-discovery.free { border-style: dashed; color: var(--text-dim); }
.survey-disc-head { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.survey-lb, .survey-disc-list { display: flex; flex-direction: column; gap: 2px; }
.survey-lb-row, .survey-disc-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px;
  border-top: 1px solid var(--line-soft);
}
.survey-lb-row:first-child, .survey-disc-row:first-child { border-top: none; }
.survey-lb-rank { flex: none; width: 24px; text-align: center; color: var(--text-faint); font-family: var(--font-mono); }
.survey-lb-name, .survey-disc-sys { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.survey-lb-count, .survey-disc-at { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.survey-disc-by { font-size: 11px; color: var(--amber); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="gw-basic"] .survey-discovery { border-style: dashed; }
/* 🥇 V3.94.0 — correctif de débordement mobile : une carte est un élément de
   grille, dont la largeur minimale automatique vaut min-content. Sans
   min-width:0, une ligne du registre (nom de système + pseudo + date) élargit
   la grille entière et fait déborder la page sur petit écran. */
.survey-card { min-width: 0; }
.survey-lb-row, .survey-disc-row { min-width: 0; }
.survey-lb-name, .survey-disc-sys, .survey-disc-by { flex: 1 1 auto; }
/* 🔭 V3.95.0 — encart explicatif en tête d'un onglet de boutique. */
.shop-note {
  font-size: 11.5px; line-height: 1.7; color: var(--text-dim);
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-left-width: 2px; border-left-color: var(--accent);
  border-radius: var(--radius-sm); background: var(--bg-panel-2);
}
html[data-theme="gw-basic"] .shop-note { border-style: dashed; }

/* ═══════════════════════════════════════════════════════════════════════════
   🗺️ CARTE DES SYSTÈMES EN SURCOUCHE D'INSTANCE (touche « Carte »)
   ═══════════════════════════════════════════════════════════════════════════
   Le MÊME bloc de carte que l'onglet Explorer, sorti de son flux et posé
   par-dessus l'instance 3D. Rien n'est dupliqué : c'est le bloc d'origine qui
   change de place le temps qu'on le regarde, et qui retrouve la sienne après.
   Au-dessus de l'instance (z-index) mais SOUS ses boîtes de dialogue. */
.c3d-carte-surcouche {
  position: fixed;
  inset: 3vh 3vw;
  z-index: 10050;
  background: rgba(3, 6, 16, 0.94);
  border: 1px solid rgba(120, 180, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  overflow: auto;
  padding: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☢️ ALERTE DE RADIATION — bords de l'instance
   ═══════════════════════════════════════════════════════════════════════════
   Au centre de l'écran, rouge et orange, pulsée. Elle ne prend AUCUN clic :
   le pilote doit pouvoir manœuvrer pour sortir, pas seulement la regarder. */
.c3d-radiation {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10040;
  pointer-events: none;
  text-align: center;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: c3d-radiation-pulse 0.9s ease-in-out infinite;
}
.c3d-radiation span {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #ff3b1f;
  text-shadow: 0 0 18px rgba(255, 59, 31, 0.85), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.c3d-radiation b {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  color: #ffa726;
  text-shadow: 0 0 14px rgba(255, 167, 38, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9);
}
@keyframes c3d-radiation-pulse {
  0%, 100% { opacity: 1 }
  50%      { opacity: 0.45 }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌀 SAUT PRÉPARÉ — monde ouvert
   ═══════════════════════════════════════════════════════════════════════════
   En haut, centré, sous le titre : le compte à rebours se lit sans quitter le
   combat des yeux. Seuls les boutons prennent les clics. */
.c3d-saut {
  position: absolute; top: 0; left: calc(100% + 10px);
  /* Largeur de son contenu, plafonnée : un nom de système long passe à la
     ligne au lieu d'élargir le panneau jusque sous le cadre des PV. */
  width: max-content; max-width: 320px; box-sizing: border-box;
  z-index: 3; min-width: 220px; padding: 8px 12px; border-radius: 10px;
  background: rgba(6, 12, 20, 0.72); border: 1px solid rgba(140, 110, 255, 0.35);
  color: #d9d2ff; text-align: center; font-size: 0.85rem;
}
/* Écran de moins de 1 700 px (plein écran d'un portable, affichage agrandi
   à 125 %…) : à droite de la fenêtre de cible, le panneau de saut
   recouvrirait le cadre des PV. Il passe dessous.
   Le calcul : cible jusqu'à 50 % + 162 px, puis 10 px d'écart et 320 px de
   panneau au plus, contre un cadre des PV qui commence à 340 px du bord
   droit — la place manque sous 1 684 px. */
@media (max-width: 1700px) {
  .c3d-saut { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
}
.c3d-saut-titre b { color: #fff; }
.c3d-saut-etape { color: #b7a8ff; margin-top: 3px; }
.c3d-saut-compte { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 2px 0 4px; }
.c3d-saut-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.c3d-saut-btn {
  padding: 5px 10px; border-radius: 8px; cursor: var(--c3d-curseur-main, pointer);
  background: rgba(50, 36, 110, 0.75); border: 1px solid rgba(150, 120, 255, 0.4);
  color: #ece6ff; font-size: 0.82rem;
}
.c3d-saut-btn:hover { background: rgba(80, 60, 160, 0.85); }

/* ═══════════════════════════════════════════════════════════════════════════
   📍 MARQUEURS DE REPÈRE — stations et champs d'astéroïdes
   ═══════════════════════════════════════════════════════════════════════════
   Volontairement DISCRETS : ce sont des repères, pas des cibles. Un losange
   fin et une étiquette courte, jamais d'encadré — l'encadré est réservé aux
   hostiles, et confondre les deux serait dangereux en combat. */
.c3d-markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.c3d-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.c3d-marker i {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 6px;
  vertical-align: middle;
  transform: rotate(45deg);
  border: 1.5px solid currentColor;
  background: transparent;
}
.c3d-marker span { vertical-align: middle; text-shadow: 0 1px 4px rgba(0,0,0,0.95) }
/* 🔵 Stations : repère permanent, sans portée. */
.c3d-marker-station { color: #4db6ff }
.c3d-marker-station i { box-shadow: 0 0 8px rgba(77, 182, 255, 0.7) }
/* 🟡 Champs d'astéroïdes : visibles à 15 km. */
.c3d-marker-asteroides { color: #ffb347 }
.c3d-marker-asteroides i { box-shadow: 0 0 8px rgba(255, 179, 71, 0.6) }
/* 🔴 Patrouilles détectées au scanner, au-delà de la portée visuelle. */
.c3d-marker-hostile { color: #ff4d4d }
.c3d-marker-hostile i { box-shadow: 0 0 8px rgba(255, 77, 77, 0.7) }

/* ══════════════════════════════════════════════════════════════════════
   🧭 NAVIGATION EN VOL LIBRE (Final 3D — MAJ 2 § 8)
   ══════════════════════════════════════════════════════════════════════
   Les informations de navigation vivent en PÉRIPHÉRIE, jamais au centre :
   on pilote en regardant devant soi, et le § 8.4 en fait une règle. Le
   bandeau se pose en haut à gauche, le radar juste en dessous. */
.c3d-nav {
  /* ⚠️ SOUS le panneau de titre, jamais dessus : `.c3d-panel` occupe déjà le
     coin haut-gauche (titre, aides, boutons). Posé à 14 px, le bandeau se
     superposait à lui et les deux devenaient illisibles — relevé sur la
     capture du banc client. */
  position: absolute; left: 14px; top: 168px; z-index: 5; min-width: 210px;
  background: rgba(6, 12, 20, 0.62); border: 1px solid rgba(120, 190, 255, 0.24);
  border-radius: 10px; padding: 8px 11px; font-size: 0.8rem; line-height: 1.5;
  color: #cfe0f0; pointer-events: none;
}
.c3d-nav-systeme { font-weight: 700; color: #bfe2ff; font-size: 0.92rem; }
.c3d-nav-ligne { display: flex; justify-content: space-between; gap: 10px; }
.c3d-nav-ligne small { color: #8fa4b8; }
/* 🖥️ V4.1.5 — un libellé long (« 🎯 Munition Perforante ») montait sur sa
   valeur : le libellé se coupe, la valeur garde sa place. */
.c3d-nav-ligne > *:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-nav-ligne > *:last-child { flex: 0 0 auto; white-space: nowrap; }
.c3d-nav-cap { color: #ffd98a; font-variant-numeric: tabular-nums; }
/* Carburant bas : l'avertissement est visuel, pas textuel — on ne veut pas
   d'une ligne de plus à lire en plein vol. */
.c3d-nav-bas { color: #ff8b6b; font-weight: 700; }
/* 🖱️ V4.1.7 — TOUT CE QUI SE CLIQUE DANS LE BANDEAU REÇOIT LE CLIC.
   Le bandeau est en `pointer-events: none` pour ne pas barrer le vol, et
   seule la classe `.c3d-nav-carte` rétablissait le clic. Le bouton ⛶ ajouté
   en V4.1.5 ne l'avait pas : au centre de sa propre surface, c'est le CANEVAS
   qui répondait, et le plein écran était donc inatteignable depuis le HUD
   (mesuré au banc). La règle porte désormais sur la famille, pour que le
   prochain bouton posé là ne retombe pas dans le même trou. */
.c3d-nav button, .c3d-nav a, .c3d-nav [data-act] { pointer-events: auto; }
.c3d-nav-carte {
  margin-top: 5px; pointer-events: auto; width: 100%;
  background: rgba(20, 38, 58, 0.9); border: 1px solid rgba(120, 190, 255, 0.35);
  color: #d8ecff; border-radius: 6px; padding: 4px 8px; font-size: 0.76rem; cursor: var(--c3d-curseur-main, pointer);
}
.c3d-nav-carte:hover { background: rgba(32, 58, 86, 0.95); }

/* 📡 Radar de proximité : dessiné sur un canevas plutôt qu'en HTML — une
   trentaine de points redessinés à chaque image coûteraient trente nœuds
   déplacés dans le DOM, ce qui se voit à l'image près. */
.c3d-radar {
  /* 🖥️ V4.1.0 — LE RADAR EST AU CENTRE, EN BAS.
     Il vivait en haut à droite, sous les constantes, pendant que les
     compétences occupaient le bas au centre : le regard faisait l'aller-retour
     d'un coin à l'autre en plein combat. Il tient maintenant le milieu de la
     barre du bas, le commandement à sa gauche et les compétences à sa droite
     (voir `FENETRES` dans web/public/hud3d.js, qui les accroche à lui). */
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5;
  border-radius: 50%; background: rgba(4, 10, 16, 0.5);
  border: 1px solid rgba(120, 190, 255, 0.22); pointer-events: none;
}

/* 🔷 Marqueur d'ALLIÉ : un losange fin, jamais le cadre 4 coins réservé aux
   cibles verrouillables (§ 8.3 b). La forme dit « non verrouillable » avant
   même que le joueur essaie. */
.c3d-allie {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 1px solid rgba(141, 255, 154, 0.85); transform: rotate(45deg);
  pointer-events: none; z-index: 4;
}
/* 🧭 Le repère choisi comme DESTINATION se distingue des autres : même forme,
   teinte ambrée — on doit pouvoir le retrouver d'un coup d'œil parmi vingt. */
.c3d-marker-dest i { border-color: #ffc85a !important; }
.c3d-marker-dest span { color: #ffc85a !important; }
.c3d-allies { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* 🎖️ Objectif du moment (patrouille de l'heure) dans le bandeau de navigation. */
.c3d-nav-objectif { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(120, 190, 255, 0.18); }
.c3d-nav-grise { opacity: 0.55; }
/* 👥 MAJ 8 — le numéro d'instance, à côté du nom du système. */
.c3d-nav-instance { color: #8fb6dd; font-weight: 400; letter-spacing: 0.02em; }
/* 🚨 MAJ 7 — revendication NPC : la seule ligne rouge du bandeau. */
.c3d-nav-revendication { border-top-color: rgba(255, 90, 90, 0.45); }
.c3d-nav-revendication span { color: #ff9a9a; }
.c3d-nav-abandon { background: rgba(70, 24, 24, 0.9); border-color: rgba(255, 120, 120, 0.35); color: #ffd0d0; }
.c3d-marker-patrouille i { border-color: #ff9f43 !important; }
.c3d-marker-patrouille span { color: #ffc28a !important; }
/* 🏛️ La Cité perdue : émeraude, la couleur de sa classe. */
.c3d-marker-citeperdue i { border-color: #2fe39a !important; }
.c3d-marker-citeperdue span { color: #a8ffd8 !important; }
/* 🏛️ MAJ 7 — les colonies du système : ambre, la couleur d'un lieu habité. */
.c3d-marker-colonie i { border-color: #ffc45a !important; }
.c3d-marker-colonie span { color: #ffdf9e !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V3.99.6 — HUD PLACÉ PAR LE GESTIONNAIRE (web/public/hud3d.js)
   ═══════════════════════════════════════════════════════════════════════════
   Quand le gestionnaire est actif (`.c3d-hud-gere`), c'est lui qui pose les
   fenêtres : les positions de cette feuille ne servent plus que de repli.
   Le panneau de saut rentre dans le FLUX de la fenêtre de cible, sous elle :
   posé en absolu à sa droite, il débordait du rectangle que le gestionnaire
   mesure et pouvait recouvrir le cadre des PV. */
.c3d-overlay.c3d-hud-gere .c3d-haut {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.c3d-overlay.c3d-hud-gere .c3d-saut {
  position: static; left: auto; top: auto; transform: none;
}
/* ✥ Poignée de déplacement : visible au survol de sa fenêtre seulement. */
.c3d-hud-poignee {
  position: absolute; z-index: 8; box-sizing: border-box;
  border-radius: 50%; text-align: center; cursor: move; user-select: none;
  background: rgba(20, 38, 58, 0.92); border: 1px solid rgba(120, 190, 255, 0.55);
  color: #d8ecff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.c3d-hud-poignee:hover { background: rgba(40, 72, 104, 0.96); color: #fff; }
.c3d-overlay.c3d-hud-glisse, .c3d-overlay.c3d-hud-glisse * { cursor: move !important; user-select: none; }
/* ▸ Onglet d'une fenêtre repliée faute de place. */
.c3d-hud-onglet {
  position: absolute; z-index: 7; white-space: nowrap; cursor: var(--c3d-curseur-main, pointer);
  padding: 4px 10px; border-radius: 8px; font-size: 0.78rem;
  background: rgba(8, 14, 22, 0.88); border: 1px solid rgba(120, 190, 255, 0.4); color: #d8ecff;
}
.c3d-hud-onglet:hover { background: rgba(32, 58, 86, 0.95); }

/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V4.0.2 — HUD DÉVERROUILLÉ (Échap ▸ HUD)
   ═══════════════════════════════════════════════════════════════════════════
   Déverrouillé, chaque fenêtre montre ses deux prises EN PERMANENCE : la
   poignée ✥ pour la déplacer, l'angle ◢ pour la redimensionner. Verrouillé,
   on revient au comportement d'avant — la poignée au survol, pas d'angle. */
.c3d-hud-taille {
  position: absolute; z-index: 8; box-sizing: border-box;
  cursor: nwse-resize; user-select: none; text-align: center;
  background: rgba(20, 38, 58, 0.92); border: 1px solid rgba(120, 190, 255, 0.55);
  color: #d8ecff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.c3d-hud-taille:hover { background: rgba(40, 72, 104, 0.96); color: #fff; }
.c3d-overlay.c3d-hud-libre .c3d-hud-poignee,
.c3d-overlay.c3d-hud-libre .c3d-hud-taille { box-shadow: 0 0 10px rgba(120, 190, 255, 0.55); }
.c3d-overlay.c3d-hud-taille-glisse, .c3d-overlay.c3d-hud-taille-glisse * { cursor: nwse-resize !important; user-select: none; }
/* Le bandeau qui dit au joueur qu'il est en train de ranger son HUD. */
.c3d-hud-bandeau {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 10070;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px; border-radius: 10px; font-size: 0.86rem; color: #dbeaf8;
  background: rgba(8, 16, 26, 0.94); border: 1px solid rgba(120, 190, 255, 0.45);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⏸️ V4.0.2 — MENU ÉCHAP
   ═══════════════════════════════════════════════════════════════════════════ */
.c3d-menu {
  position: fixed; inset: 0; z-index: 10060;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 12, 0.72);
}
.c3d-menu-boite {
  min-width: 300px; padding: 20px 22px 18px; border-radius: 12px;
  background: rgba(8, 16, 26, 0.97); border: 1px solid rgba(120, 180, 255, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  display: flex; flex-direction: column; gap: 9px;
}
.c3d-menu-titre { font-size: 0.78rem; letter-spacing: 0.14em; color: #7f8ea3; margin-bottom: 4px; }
/* 🖥️ V4.1.2 — le titre de l'instance, repris de l'ancien panneau du coin. */
.c3d-menu-instance { font-size: 0.9rem; color: #dbeaf8; margin-bottom: 8px; line-height: 1.35; }
.c3d-menu-boite button {
  width: 100%; text-align: left; cursor: var(--c3d-curseur-main, pointer);
  padding: 11px 14px; border-radius: 8px; font-size: 0.95rem; color: #dbeaf8;
  background: rgba(22, 38, 58, 0.85); border: 1px solid rgba(90, 150, 210, 0.45);
}
.c3d-menu-boite button:hover { background: rgba(40, 72, 104, 0.95); color: #fff; }
.c3d-menu-boite button.c3d-menu-sortie { border-color: rgba(255, 120, 120, 0.45); color: #ffc4c4; }
.c3d-menu-boite button.c3d-menu-sortie:hover { background: rgba(92, 30, 30, 0.9); }
/* Le panneau ⚙️ Options du portail, posé par-dessus l'instance — même
   procédé que la carte des systèmes (`c3d-carte-surcouche`). */
.c3d-options-surcouche {
  position: fixed; inset: 4vh 8vw; z-index: 10065;
  background: rgba(3, 6, 16, 0.97); border: 1px solid rgba(120, 180, 255, 0.35);
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: auto; padding: 14px; display: block !important;
}
.c3d-options-fermer {
  position: fixed; right: calc(8vw + 14px); top: calc(4vh + 14px); z-index: 10066;
  cursor: var(--c3d-curseur-main, pointer); padding: 6px 12px; border-radius: 8px; font-size: 0.85rem;
  background: rgba(22, 38, 58, 0.95); border: 1px solid rgba(120, 190, 255, 0.5); color: #dbeaf8;
}
.c3d-options-fermer:hover { background: rgba(40, 72, 104, 0.98); color: #fff; }

/* 📡 V3.99.8 — SONAR : seconde ligne d'un repère trouvé, et l'écho. */
.c3d-marker .c3d-marker-l2 {
  display: block; margin: 2px 0 0 15px; font-style: normal; font-size: 10.5px;
  color: #7fe8d8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}
.c3d-marker-echo { animation: c3dEchoSonar 0.9s ease-out; }
@keyframes c3dEchoSonar {
  0% { filter: none; }
  25% { filter: drop-shadow(0 0 8px #7fe8d8) brightness(1.8); }
  100% { filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V4.1.3 — LE CADRE DU NOUVEAU HUD (maquette)
   ═══════════════════════════════════════════════════════════════════════════
   Les fenêtres gardaient l'habillage d'avant : coins très arrondis, bordures
   bleues diffuses, textes de tailles et de couleurs dissemblables d'une
   fenêtre à l'autre. La maquette dessine un SEUL cadre, répété partout :

     · fond très sombre, presque opaque, et non un voile bleuté ;
     · bordure fine et froide, angles à peine cassés (4 px, pas 10) ;
     · un LISERÉ cyan sur le bord gauche : c'est lui qui fait « poste de
       pilotage » plutôt que « boîte de dialogue » ;
     · les intitulés en petites capitales espacées, à la machine à écrire ;
     · les valeurs alignées à droite, toujours.

   Rien n'est déplacé ici : le gestionnaire (hud3d.js) garde la main sur les
   positions. On ne change que l'habillage. */
.c3d-overlay {
  --hud-fond: rgba(7, 11, 18, 0.90);
  --hud-bord: rgba(120, 180, 255, 0.22);
  --hud-liseré: rgba(90, 200, 255, 0.55);
  --hud-titre: #7f9bb5;
  --hud-texte: #cfe0f0;
  --hud-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.c3d-overlay .c3d-nav,
.c3d-overlay .c3d-vitals,
.c3d-overlay .c3d-minage,
.c3d-overlay .c3d-station,
.c3d-overlay .c3d-commande,
.c3d-overlay .c3d-squad,
.c3d-overlay .c3d-cible,
.c3d-overlay .c3d-invite,
.c3d-overlay .c3d-pilotes,
.c3d-overlay .c3d-alerte {
  background: var(--hud-fond);
  border: 1px solid var(--hud-bord);
  border-left: 2px solid var(--hud-liseré);
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  color: var(--hud-texte);
}
/* Les intitulés de chaque fenêtre parlent la même langue. */
.c3d-overlay .c3d-minage-titre,
.c3d-overlay .c3d-squad-title,
.c3d-overlay .c3d-nav-systeme {
  font-family: var(--hud-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hud-titre); font-weight: 600;
}
/* Une valeur se lit à droite, en chiffres à chasse fixe : on compare deux
   lignes d'un coup d'œil, sans que les chiffres dansent. */
.c3d-overlay .c3d-vital-row > span:last-child,
.c3d-overlay .c3d-fleet-count,
.c3d-overlay .c3d-nav-valeur {
  font-family: var(--hud-mono); font-variant-numeric: tabular-nums;
}
/* Les barres : plus fines, carrées, à la manière des jauges de bord. */
.c3d-overlay .c3d-bar { height: 6px; border-radius: 2px; }
/* La station et le minage sont des fenêtres d'action : liseré ambré, parce
   qu'elles proposent quelque chose à faire, pas un état à lire. */
.c3d-overlay .c3d-station, .c3d-overlay .c3d-minage { border-left-color: rgba(255, 190, 90, 0.6); }
.c3d-overlay .c3d-commande { border-left-color: rgba(255, 120, 120, 0.55); }
.c3d-overlay .c3d-station-btn, .c3d-overlay .c3d-commande button { border-radius: 4px; }
/* La barre d'escadrille (formation de vol) suit le même cadre. */
.c3d-overlay .c3d-squad-btn { border-radius: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V4.1.4 — L'ESTHÉTIQUE DE LA MAQUETTE, POUSSÉE DANS LE HUD
   ═══════════════════════════════════════════════════════════════════════════
   Le cadre commun était posé (V4.1.3) ; il manquait la MISE EN PAGE de la
   maquette : les constantes en jauges nommées, une ligne par constante, et un
   en-tête qui porte son état à droite. */

/* ── Les constantes : intitulé · jauge · valeur, sur une ligne ──────────── */
.c3d-overlay .c3d-vital-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(120, 180, 255, 0.16);
}
.c3d-overlay .c3d-vital-tete b { color: #dbeaf8; font-size: 0.86rem; font-weight: 600; }
.c3d-overlay .c3d-vital-tete span {
  font-family: var(--hud-mono); font-size: 0.72rem; color: #7fd8ff; font-variant-numeric: tabular-nums;
}
.c3d-jauge {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px;
  margin: 4px 0;
}
.c3d-jauge-nom {
  font-family: var(--hud-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--hud-titre); text-transform: uppercase;
}
.c3d-jauge-val {
  font-family: var(--hud-mono); font-size: 0.68rem; color: #b9cde0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.c3d-jauge .c3d-bar { display: block; height: 5px; border-radius: 2px; margin: 0; }
.c3d-fuel { background: linear-gradient(90deg, #ffb347, #ffd98a); display: block; height: 100%; }



/* ═══════════════════════════════════════════════════════════════════════════
   ⚔️ V4.1.5 — LE PANNEAU DE COMMANDEMENT DE LA MAQUETTE
   ═══════════════════════════════════════════════════════════════════════════
   Valeurs reprises telles quelles de la planche « HUD Prime AlphA — essai
   V4.1 » : cadre vert sombre à deux coins coupés, en-tête à gauche et
   postures à droite, une LIGNE par groupe (numéro, effectif, ordre en clair
   de la couleur de l'ordre, raccourci), puis quatre grands boutons d'ordre. */
.c3d-overlay .c3d-commande {
  /* 🖥️ V4.1.5 — plus LARGE et plus BASSE : l'ordre d'un groupe s'écrit en
     entier sans être coupé, et le panneau mange moins de hauteur d'écran. */
  width: 560px; padding: 10px 12px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(8, 16, 13, 0.86);
  border: 1px solid rgba(79, 209, 139, 0.28);
  border-left: 1px solid rgba(79, 209, 139, 0.28);   /* pas de liseré ici : le cadre est à coins coupés */
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  font-size: 13px; color: #c8d6e5;
}
.c3d-cmd-tete { display: flex; align-items: center; gap: 8px; }
.c3d-cmd-titre {
  font-family: var(--hud-mono); font-size: 11px; letter-spacing: 0.14em; color: #7f8ea3;
  white-space: nowrap;
}
.c3d-cmd-postures { margin-left: auto; display: flex; align-items: center; gap: 5px; }
/* Une posture : une pastille de couleur et trois lettres. */
.c3d-overlay .c3d-post {
  height: 24px; padding: 0 8px; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0; color: #7f8ea3; cursor: var(--c3d-curseur-main, pointer);
  font-family: var(--hud-mono); font-size: 10px; letter-spacing: 0.06em;
}
.c3d-overlay .c3d-post i { width: 9px; height: 9px; border-radius: 50%; background: #3a4450; }
.c3d-overlay .c3d-post-defense i { background: #5aa9ff; }
.c3d-overlay .c3d-post-riposte i { background: #e8c56a; }
.c3d-overlay .c3d-post-agressif i { background: #ff5a5a; }
.c3d-overlay .c3d-post-defense.actif { background: rgba(90, 169, 255, 0.16); border-color: rgba(90, 169, 255, 0.5); color: #9fccff; }
.c3d-overlay .c3d-post-riposte.actif { background: rgba(232, 197, 106, 0.16); border-color: rgba(232, 197, 106, 0.5); color: #ffe2a8; }
.c3d-overlay .c3d-post-agressif.actif { background: rgba(255, 90, 90, 0.16); border-color: rgba(255, 90, 90, 0.5); color: #ffb0b0; }
.c3d-overlay .c3d-post:hover { border-color: rgba(255, 255, 255, 0.28); }

/* Les lignes de groupe. */
.c3d-cmd-rangs { display: flex; flex-direction: column; gap: 2px; }
.c3d-overlay .c3d-rang {
  width: 100%; height: 30px; padding: 0 10px; cursor: var(--c3d-curseur-main, pointer);
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255, 255, 255, 0.03); border: 0; border-left: 3px solid #7f8ea3;
  border-radius: 0; color: #c8d6e5;
}
.c3d-overlay .c3d-rang.actif { background: rgba(79, 209, 139, 0.16); }
.c3d-overlay .c3d-rang.actif .c3d-rang-num { color: #ffffff; }
.c3d-overlay .c3d-rang:hover { background: rgba(255, 255, 255, 0.07); }
.c3d-overlay .c3d-rang.eteint { opacity: 0.45; }
.c3d-rang-num { font-family: var(--hud-mono); font-size: 13px; font-weight: 700; color: #9fb0c4; width: 34px; }
.c3d-rang-eff { font-family: var(--hud-mono); font-size: 11px; color: #7f8ea3; width: 34px; }
.c3d-rang-ordre { flex-grow: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-rang-touche { font-family: var(--hud-mono); font-size: 10px; color: #6d7d91; white-space: nowrap; }

/* Les quatre ordres. */
.c3d-cmd-actions { display: flex; gap: 6px; margin-top: 2px; }
.c3d-overlay .c3d-act {
  flex-grow: 1; height: 36px; cursor: var(--c3d-curseur-main, pointer); border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(79, 209, 139, 0.10); border: 1px solid rgba(79, 209, 139, 0.34); color: #bff0d5;
  font-size: 11px; letter-spacing: 0.06em; white-space: nowrap;
}
.c3d-overlay .c3d-act:hover { background: rgba(79, 209, 139, 0.20); border-color: rgba(79, 209, 139, 0.6); }
.c3d-act-touche { font-family: var(--hud-mono); font-size: 9px; color: #6d9d86; }

/* Le pied : regroupement, désignation, et le point retenu. */
.c3d-cmd-pied {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--hud-mono); font-size: 10px; color: #7f8ea3;
}
.c3d-overlay .c3d-cmd-pied button {
  padding: 4px 8px; border-radius: 0; cursor: var(--c3d-curseur-main, pointer);
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #9fb0c4; font-family: var(--hud-mono); font-size: 9px; letter-spacing: 0.06em;
}
.c3d-overlay .c3d-cmd-pied button:hover { border-color: rgba(79, 209, 139, 0.5); color: #bff0d5; }
.c3d-cmd-pied span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V4.1.5 — TOUT LE HUD À LA MAQUETTE
   ═══════════════════════════════════════════════════════════════════════════
   Le cadre commun de la planche : fond translucide très sombre, bordure fine
   de la couleur du panneau, DEUX COINS COUPÉS en biais (14 px) — jamais
   d'angles arrondis — et la typographie à chasse fixe pour tout ce qui est
   étiquette ou valeur. Les coins coupés partent du côté de l'écran où le
   panneau est posé : en haut-gauche pour les panneaux de gauche, en
   haut-droite pour ceux de droite. */
.c3d-overlay .c3d-nav,
.c3d-overlay .c3d-minage,
.c3d-overlay .c3d-station {
  border-radius: 0; border-left-width: 1px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.c3d-overlay .c3d-vitals,
.c3d-overlay .c3d-abilities,
.c3d-overlay .c3d-pilotes,
.c3d-overlay .c3d-invite {
  border-radius: 0; border-left-width: 1px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.c3d-overlay .c3d-nav { width: 300px; padding: 12px 15px; border-color: rgba(90, 169, 255, 0.30); background: rgba(8, 13, 22, 0.86); }
.c3d-overlay .c3d-vitals { width: 300px; padding: 12px 15px; border-color: rgba(255, 179, 71, 0.26); background: rgba(8, 13, 22, 0.86); }
.c3d-overlay .c3d-minage, .c3d-overlay .c3d-station { border-color: rgba(255, 190, 90, 0.26); }

/* ── Haut gauche : où je suis ──────────────────────────────────────────── */
.c3d-nav-tete { display: flex; align-items: baseline; gap: 9px; }
.c3d-overlay .c3d-nav-systeme {
  font-family: 'Oxanium', system-ui, sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; color: #e8f2ff; text-transform: none;
}
.c3d-overlay .c3d-nav-instance {
  font-family: var(--hud-mono); font-size: 10px; color: #7f8ea3; letter-spacing: 0.06em;
}
.c3d-nav-zone {
  margin-left: auto; font-family: var(--hud-mono); font-size: 10px; padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2); color: #9fb0c4;
}
.c3d-zone-highsec { color: #4fd18b; border-color: rgba(79, 209, 139, 0.45); }
.c3d-zone-lowsec { color: #e8c56a; border-color: rgba(232, 197, 106, 0.45); }
.c3d-zone-nullsec { color: #ff5a5a; border-color: rgba(255, 90, 90, 0.45); }
.c3d-overlay .c3d-nav-plein {
  padding: 0 6px; height: 20px; cursor: var(--c3d-curseur-main, pointer); border-radius: 0;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(144, 190, 255, 0.28);
  color: #9ccaff; font-size: 12px; line-height: 1;
}
.c3d-overlay .c3d-nav-plein:hover { background: rgba(90, 169, 255, 0.22); color: #fff; }
.c3d-nav-filet { height: 1px; background: rgba(90, 169, 255, 0.22); margin: 8px 0 6px; }

/* ── Haut droite : l'état du vaisseau, aux mesures de la planche ───────── */
.c3d-jauge { grid-template-columns: 52px 1fr 78px; gap: 10px; margin: 5px 0; }
.c3d-jauge-nom { font-size: 11px; letter-spacing: 0.10em; font-family: 'Oxanium', system-ui, sans-serif; }
.c3d-jauge-val { font-size: 12px; text-align: right; }
.c3d-jauge .c3d-bar { height: 6px; border-radius: 0; background: rgba(255, 255, 255, 0.07); }
.c3d-overlay .c3d-vital-tete b { font-size: 15px; font-weight: 600; color: #e8f2ff; }

/* ── Bas droite : les compétences ──────────────────────────────────────── */
.c3d-overlay .c3d-ability-bar {
  max-width: 392px; padding: 10px 12px; box-sizing: border-box;
  background: rgba(18, 12, 8, 0.86); border: 1px solid rgba(255, 179, 71, 0.26);
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.c3d-comp-tete { display: flex; align-items: center; gap: 10px; }
.c3d-comp-titre { font-family: 'Oxanium', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em; color: #7f8ea3; }
.c3d-comp-compte { margin-left: auto; font-family: var(--hud-mono); font-size: 10px; color: #6d7d91; }
.c3d-comp-cases { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; justify-content: flex-start; }
/* 🎛️ V4.1.6 — DES CASES TOUTES PAREILLES.
   Elles étaient posées dans un conteneur souple SANS interdire la compression :
   dès que la dernière rangée débordait d'un pixel, le navigateur rabotait
   toutes les cases pour les faire rentrer — 56 px de large au lieu des 62
   réglés, et une hauteur qui variait d'une rangée à l'autre. Une case a
   maintenant une taille FIXE, en largeur comme en hauteur : la grille reste
   régulière quel que soit le nombre de compétences équipées. */
.c3d-overlay .c3d-slot {
  width: 62px; height: 74px; flex: 0 0 62px;
  flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
}
.c3d-overlay .c3d-slot .c3d-slot-inner {
  height: 52px; flex: 0 0 52px;
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 179, 71, 0.28);
}
/* En cours d'effet, la case grandit vers le HAUT sans déranger ses voisines :
   la rangée garde sa hauteur, seule la pièce active dépasse. */
.c3d-overlay .c3d-slot.c3d-slot-actif { height: 74px; }
.c3d-overlay .c3d-slot.c3d-slot-actif .c3d-slot-inner { height: 60px; flex: 0 0 60px; }
.c3d-slot-etat { font-family: var(--hud-mono); font-size: 10px; color: #6d7d91; }
.c3d-overlay .c3d-slot.c3d-slot-actif .c3d-slot-etat { color: #ffce8a; }
.c3d-overlay .c3d-slot.c3d-slot-recharge .c3d-slot-etat { color: #ffcf7a; }
.c3d-overlay .c3d-slot .c3d-slot-key { font-size: 9px; color: #6d7d91; }


/* ── V4.1.5 — LA FORMATION ET LES BAIES SONT DU PANNEAU, PAS D'UNE BARRE ──
   La formation est un choix unique : elle emprunte la pastille de la posture
   (.c3d-post), témoin + code à chasse fixe + touche. La baie est un effectif
   dans un état : elle emprunte le rang du groupe (.c3d-rang), et la largeur du
   panneau en pose deux côte à côte pour ne coûter qu'une ligne. */
.c3d-cmd-vol {
  display: flex; align-items: center; gap: 4px;
  padding-top: 6px; border-top: 1px solid rgba(79, 209, 139, 0.14);
}
.c3d-cmd-vol-titre {
  font-family: var(--hud-mono); font-size: 9px; letter-spacing: 0.14em; color: #6d7d91;
  margin-right: 2px;
}
.c3d-cmd-vol-compte {
  margin-left: auto; font-family: var(--hud-mono); font-size: 9px; color: #6d9d86;
}
/* La pastille de formation : même gabarit que la posture, témoin vert à l'état
   actif, et la touche en plus petit à sa droite. */
.c3d-overlay .c3d-post-vol { gap: 5px; }
.c3d-overlay .c3d-post-vol small { font-size: 8px; color: #566577; letter-spacing: 0; }
.c3d-overlay .c3d-post-vol.actif {
  background: rgba(79, 209, 139, 0.16); border-color: rgba(79, 209, 139, 0.5); color: #bff0d5;
}
.c3d-overlay .c3d-post-vol.actif i { background: #4fd18b; }
.c3d-overlay .c3d-post-vol.actif small { color: #6d9d86; }
/* Les baies : deux rangs de groupe sur une seule ligne. */
.c3d-cmd-baies { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; }
.c3d-overlay .c3d-rang-baie.eteint { opacity: 0.72; }
.c3d-overlay .c3d-rang-baie .c3d-rang-num { width: 14px; }
.c3d-overlay .c3d-rang-baie .c3d-rang-eff { width: 28px; }

/* V4.1.10 — Commandement : la liste des groupes défile au lieu de sortir de l’écran. */
.c3d-overlay .c3d-cmd-rangs { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* V4.1.10 — Vue de commandement : le panneau Commandement passe en bas de
   l'écran, sur toute la largeur, et les groupes se rangent en colonnes. */
.c3d-rts #c3d-commande {
  position: fixed !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
  top: auto !important; width: auto !important; max-width: none !important; height: auto !important;
  transform: none !important; z-index: 40;
}
.c3d-rts #c3d-commande .c3d-cmd-rangs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 6px; max-height: 24vh;
}
.c3d-rts #c3d-commande { font-size: 10px; }
.c3d-rts #c3d-commande .c3d-rang { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 0 !important; font-size: 10px; }
.c3d-rts #c3d-commande .c3d-rang *, .c3d-rts #c3d-commande .c3d-act, .c3d-rts #c3d-commande .c3d-post { font-size: 10px !important; }
/* Vue de commandement : panneau compact (tout réduit d'un quart, liste plus basse). */
.c3d-rts #c3d-commande { max-height: 34vh !important; overflow-y: auto !important; font-size: 10px; }
.c3d-rts #c3d-commande .c3d-cmd-rangs { max-height: 17vh; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.c3d-rts #c3d-commande .c3d-act { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ V4.1.12 — REFONTE DU HUD (maquettes 1 et 2 validées)
   ═══════════════════════════════════════════════════════════════════════════
   En vol : le lieu et l'état du vaisseau sans boîte, lisibles sur le fond ;
   la flotte en une bande ; les compétences en une rangée ; poussée et coque
   en arcs autour du viseur ; le journal en trois lignes.
   En vue de commandement : groupes libres en haut à gauche, carte du secteur
   à droite, barre de commandement en trois blocs en bas. */
#c3d-overlay {
  --c3d-fond: rgba(6, 11, 19, 0.72);
  --c3d-bord: rgba(127, 212, 255, 0.20);
  --c3d-lisere: #7fd4ff;
  --c3d-texte: #d4e4f2;
  --c3d-doux: #7f97ad;
  --c3d-pale: #4c6175;
  --c3d-ami: #4fd18b;
  --c3d-hostile: #ff5a4a;
  --c3d-alerte: #ffd23f;
  --c3d-assaut: #ff5f7a;
  --c3d-coin: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
#c3d-overlay .c3d-touche {
  display: inline-block; min-width: 16px; padding: 0 4px; border: 1px solid var(--c3d-pale); border-radius: 3px;
  font: 400 10px/14px var(--hud-mono); color: var(--c3d-doux); text-align: center;
}
#c3d-overlay .barre { display: block; height: 4px; background: rgba(127, 151, 173, 0.18); border-radius: 2px; overflow: hidden; }
#c3d-overlay .barre > i { display: block; height: 100%; border-radius: 2px; }

/* ── Haut gauche : le lieu, sans boîte ─────────────────────────────────── */
#c3d-nav { width: auto; min-width: 0; max-width: 380px; padding: 0; background: none; border: 0; box-shadow: none;
  clip-path: none; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.6); }
#c3d-nav .c3d-nav-tete { align-items: baseline; gap: 10px; }
#c3d-nav .c3d-nav-systeme { font-family: var(--hud-mono); font-size: 18px; letter-spacing: 0.04em; color: var(--c3d-texte); text-transform: none; }
#c3d-nav .c3d-nav-zone { margin-left: 0; border-radius: 3px; text-transform: lowercase; }
#c3d-nav .c3d-nav-instance { background: none; border: 0; padding: 0; cursor: var(--c3d-curseur-main, pointer); font: 400 11px var(--hud-mono); color: var(--c3d-doux); letter-spacing: 0; }
#c3d-nav .c3d-nav-instance:hover { color: var(--c3d-texte); text-decoration: underline; }
#c3d-nav .c3d-nav-plein { margin-left: 4px; background: rgba(6, 11, 19, 0.5); }
#c3d-nav .c3d-nav-ligne { font-size: 11px; color: var(--c3d-doux); margin-top: 4px; gap: 12px; }
#c3d-nav .c3d-nav-ligne span:first-child { color: #a9bccd; }
#c3d-nav .c3d-nav-objectif { border: 0; padding: 0; margin-top: 4px; background: none; }

/* ── Haut droit : l'état du vaisseau, sans boîte ──────────────────────── */
#c3d-vitals { width: 340px; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.6); }
#c3d-vitals .c3d-vital-tete { border: 0; padding: 0; margin-bottom: 8px; }
#c3d-vitals .c3d-vital-tete b { font-size: 14px; color: var(--c3d-texte); }
#c3d-vitals .c3d-vital-vit { font: 400 22px var(--hud-mono); color: var(--c3d-lisere); }
#c3d-vitals .c3d-vital-vit small { font-size: 11px; color: var(--c3d-doux); }
#c3d-vitals .c3d-jauge { grid-template-columns: 74px 1fr 104px; gap: 8px; margin: 5px 0 0; }
#c3d-vitals .c3d-jauge-nom { font: 400 11px var(--hud-mono); letter-spacing: 0; text-transform: none; color: #a9bccd; }
#c3d-vitals .c3d-jauge-val { font-size: 11px; color: var(--c3d-texte); }
#c3d-vitals .c3d-jauge .c3d-bar { height: 4px; background: rgba(127, 151, 173, 0.18); }
#c3d-vitals .c3d-dps { font-size: 11px; color: var(--c3d-doux); margin-top: 6px; }

/* ── Haut centre : la cible, sans boîte ───────────────────────────────── */
#c3d-cible { background: none; border: 0; box-shadow: none; clip-path: none; text-align: center;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.6); }

/* ── Arcs du viseur : poussée à gauche, coque à droite ─────────────────── */
#c3d-crosshair .c3d-arcs { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none; }
.c3d-arcs path { fill: none; stroke-width: 3; stroke-linecap: round; }
.c3d-arcs .c3d-arc-fond { stroke: rgba(127, 212, 255, 0.16); }
.c3d-arcs .c3d-arc-fond-coque { stroke: rgba(79, 209, 139, 0.16); }
.c3d-arcs .c3d-arc-poussee { stroke: #7fd4ff; }
.c3d-arcs .c3d-arc-coque { stroke: #4fd18b; }
.c3d-arcs .c3d-arc-coque.touche { stroke: #ffd23f; }
.c3d-arcs .c3d-arc-coque.critique { stroke: #ff5a4a; }
.c3d-arcs text { fill: #7f97ad; font: 10px 'JetBrains Mono', monospace; }
.c3d-overlay.freecam .c3d-arcs { opacity: 0.4; }
/* ⚓ V4.1.23 — ancré au forage : le viseur 360° reste pleinement lisible même
   quand la vue tourne (c'est avec lui qu'on vise et qu'on verrouille). */
.c3d-overlay.ancre.freecam .c3d-crosshair, .c3d-overlay.ancre.freecam .c3d-arcs { opacity: 1; }
.c3d-overlay.ancre::after, .c3d-overlay.ancre.freecam::after {
  content: '⚓ Forage — viseur 360° · clic droit : tourner la vue · gaz : décrocher';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; z-index: 6; pointer-events: none;
  background: rgba(10, 16, 26, 0.8); border: 1px solid rgba(216, 255, 58, 0.5);
  color: #d8ff3a; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
}

/* ── Bas gauche : la bande Flotte ─────────────────────────────────────── */
#c3d-overlay:not(.c3d-rts) #c3d-commande, #c3d-overlay:not(.c3d-rts) #c3d-drones-cmd {
  width: auto; min-width: 640px; max-width: 780px; padding: 12px 16px; gap: 10px; box-sizing: border-box;
  background: var(--c3d-fond); border: 1px solid var(--c3d-bord); border-left: 2px solid var(--c3d-lisere);
  border-radius: 0; clip-path: var(--c3d-coin); box-shadow: none; font-size: 12px; color: var(--c3d-texte);
}
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-tete { display: flex; align-items: center; gap: 14px; font-size: 12px; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-tete b { font-size: 13px; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-compte { color: var(--c3d-ami); font-family: var(--hud-mono); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-doux { color: var(--c3d-doux); font-family: var(--hud-mono); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-post { display: flex; gap: 6px; margin-left: auto; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-pill { font: 400 10px var(--hud-mono); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--c3d-pale);
  color: var(--c3d-doux); background: none; cursor: var(--c3d-curseur-main, pointer); line-height: 1.4; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-pill:hover { color: var(--c3d-texte); border-color: var(--c3d-doux); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-pill.on.c3d-pill-defense { border-color: #5aa9ff; color: #cfe6ff; background: rgba(90, 169, 255, 0.16); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-pill.on.c3d-pill-riposte { border-color: #e8c56a; color: #fbeec4; background: rgba(232, 197, 106, 0.16); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-pill.on.c3d-pill-agressif { border-color: #ff6b5a; color: #ffd6cf; background: rgba(255, 90, 74, 0.16); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-flotte-rangee { display: flex; gap: 8px; align-items: stretch; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 8px; min-width: 58px; border: 1px solid var(--c3d-bord); border-radius: 4px; white-space: nowrap;
  background: rgba(127, 212, 255, 0.05); color: var(--c3d-texte); font: 400 11px var(--hud-mono); cursor: var(--c3d-curseur-main, pointer); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt:hover { border-color: var(--c3d-lisere); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt.on { border-color: var(--c3d-lisere); background: rgba(127, 212, 255, 0.16); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt .c3d-forme { width: 26px; height: 18px; fill: var(--c3d-doux); color: var(--c3d-doux); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt.on .c3d-forme { fill: var(--c3d-lisere); color: var(--c3d-lisere); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt-fort { min-width: 112px; flex-direction: row; gap: 8px; font-size: 12px; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt-dep { border-color: rgba(79, 209, 139, 0.55); background: rgba(79, 209, 139, 0.10); color: #c9f5dc; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt.eteint { opacity: 0.5; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt:disabled { opacity: 0.35; cursor: var(--c3d-curseur, default); }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-bt-rec { min-width: 48px; color: #ffd9a0; }
:is(#c3d-commande, #c3d-drones-cmd) .c3d-sep { width: 1px; background: var(--c3d-bord); margin: 2px 2px; }

/* 🛸 V4.1.12 — fenêtre Drones : même habillage que la bande Flotte, liseré orangé. */
#c3d-overlay:not(.c3d-rts) #c3d-drones-cmd { border-left-color: #ffb06a; display: flex; flex-direction: column; color: var(--c3d-texte); }
#c3d-drones-cmd .c3d-drones-types { display: flex; gap: 10px; font: 400 11px var(--hud-mono); color: var(--c3d-doux); }
#c3d-drones-cmd .c3d-drones-ordre { font: 400 11px var(--hud-mono); color: #ffd9a0; }
#c3d-drones-cmd .c3d-drones-ordre button { background: none; border: 0; color: var(--c3d-doux); cursor: var(--c3d-curseur-main, pointer); padding: 0 2px; }
#c3d-drones-cmd .c3d-pill-rep { margin-left: auto; }
#c3d-drones-cmd .c3d-pill-rep.on { border-color: var(--c3d-ami); color: #c9f5dc; background: rgba(79, 209, 139, 0.14); }
#c3d-drones-cmd .c3d-drones-touche { align-self: center; margin-left: 2px; }
#c3d-drones-cmd .c3d-bt:not(.c3d-bt-fort) { flex-direction: row; gap: 6px; }
#c3d-rts-rac .c3d-rac-drones b { font-size: 13px; }
/* ── Bas droit : les compétences en une rangée ────────────────────────── */
#c3d-abilities { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none; }
#c3d-abilities .c3d-comp-cases { flex-wrap: nowrap; gap: 6px; align-items: flex-end; }
#c3d-abilities .c3d-slot { position: relative; width: 46px; height: 52px; flex: 0 0 46px; gap: 0; justify-content: center; }
#c3d-abilities .c3d-slot .c3d-slot-inner { height: 52px; flex: 0 0 52px; width: 100%; font-size: 18px;
  background: var(--c3d-fond); border: 1px solid var(--c3d-bord); border-radius: 4px; clip-path: none; }
#c3d-abilities .c3d-slot .c3d-slot-inner::before { display: none; }
#c3d-abilities .c3d-slot .c3d-slot-inner::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(0, 0, 0, 0.65) 0 var(--jauge, 0%), transparent var(--jauge, 0%)); }
#c3d-abilities .c3d-slot.c3d-slot-actif .c3d-slot-inner::after { background: none; }
#c3d-abilities .c3d-slot.c3d-slot-actif { height: 52px; }
#c3d-abilities .c3d-slot.c3d-slot-actif .c3d-slot-inner { height: 52px; flex-basis: 52px; border-color: #ffb347; box-shadow: 0 0 12px rgba(255, 179, 71, 0.55); }
#c3d-abilities .c3d-slot-etat { display: none; }
#c3d-abilities .c3d-slot .c3d-slot-key { position: absolute; right: 4px; bottom: 2px; z-index: 1; font-size: 9px; color: var(--c3d-doux); }
#c3d-abilities .c3d-slot.c3d-slot-recharge .c3d-slot-key { color: #ffcf7a; }
#c3d-abilities .c3d-slot .c3d-slot-inner .c3d-slot-key { position: absolute; }
#c3d-abilities .c3d-slot-flee { width: 58px; flex-basis: 58px; }
#c3d-abilities .c3d-slot-flee .c3d-slot-inner { color: var(--c3d-alerte); }
#c3d-abilities .c3d-slot-flee .c3d-slot-key { position: static; color: var(--c3d-alerte); }
#c3d-abilities .c3d-slot:hover .c3d-slot-inner { border-color: var(--c3d-lisere); }

/* ── Journal de bord ──────────────────────────────────────────────────── */
#c3d-journal { pointer-events: none; font: 400 11px/1.6 var(--hud-mono); color: var(--c3d-texte); max-width: 560px;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.7); }
#c3d-journal p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c3d-journal p:nth-last-child(3) { opacity: 0.45; }
#c3d-journal p:nth-last-child(2) { opacity: 0.7; }

/* ═══ Vue de commandement ═══════════════════════════════════════════════ */
.c3d-rts-seul { display: none; }
#c3d-overlay.c3d-rts .c3d-rts-seul { display: block; }
#c3d-overlay.c3d-rts #c3d-nav, #c3d-overlay.c3d-rts #c3d-radar, #c3d-overlay.c3d-rts #c3d-abilities,
#c3d-overlay.c3d-rts .c3d-squad-zone, #c3d-overlay.c3d-rts #c3d-minage, #c3d-overlay.c3d-rts #c3d-invite,
#c3d-overlay.c3d-rts #c3d-pilotes, #c3d-overlay.c3d-rts #c3d-cible, #c3d-overlay.c3d-rts #c3d-journal, #c3d-overlay.c3d-rts #c3d-drones-cmd,
#c3d-overlay.c3d-rts #c3d-arrow, #c3d-overlay.c3d-rts #c3d-crosshair { display: none !important; }
/* Le mode s'écrit en haut au centre : la fenêtre du haut (saut) et les récompenses descendent d'autant. */
#c3d-overlay.c3d-rts #c3d-haut, #c3d-overlay.c3d-rts #c3d-gains { translate: 0 50px !important; }

/* Haut gauche : groupes libres. */
#c3d-rts-rac { position: fixed; left: 20px; top: 16px; z-index: 30; display: none; }
#c3d-overlay.c3d-rts #c3d-rts-rac { display: flex; gap: 6px; }
#c3d-rts-rac .c3d-rac { width: 92px; padding: 5px 7px; border: 1px solid var(--c3d-bord); border-radius: 4px; background: var(--c3d-fond);
  font: 400 10px var(--hud-mono); color: var(--c3d-doux); text-align: left; cursor: var(--c3d-curseur-main, pointer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c3d-rts-rac .c3d-rac b { display: block; font-size: 15px; color: var(--c3d-texte); }
#c3d-rts-rac .c3d-rac .barre { margin-top: 4px; height: 3px; }
#c3d-rts-rac .c3d-rac.vide { opacity: 0.4; }
#c3d-rts-rac .c3d-rac.on { border-color: var(--c3d-lisere); background: rgba(127, 212, 255, 0.14); }
#c3d-rts-rac .c3d-rac:hover { border-color: var(--c3d-doux); }

/* Haut centre : le mode. */
#c3d-rts-mode { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 30; text-align: center; pointer-events: none;
  text-shadow: 0 1px 3px #000; font-family: var(--hud-mono); }
#c3d-rts-mode b { font-size: 13px; color: var(--c3d-lisere); letter-spacing: 0.06em; }
#c3d-rts-mode div { font-size: 11px; color: var(--c3d-doux); margin-top: 3px; }

/* Droite : carte du secteur, au-dessus de la barre. */
#c3d-rts-carte { position: fixed; right: 20px; bottom: 196px; width: 236px; height: 236px; z-index: 30; cursor: crosshair;
  background: var(--c3d-fond); border: 1px solid var(--c3d-bord); border-left: 2px solid var(--c3d-lisere); clip-path: var(--c3d-coin); }

/* Infobulle de survol. */
#c3d-rts-bulle { position: fixed; z-index: 60; pointer-events: none; padding: 6px 10px; font: 400 11px/1.5 var(--hud-mono); color: var(--c3d-texte);
  background: var(--c3d-fond); border: 1px solid var(--c3d-bord); border-left: 2px solid var(--c3d-lisere); clip-path: var(--c3d-coin); max-width: 360px; }
#c3d-rts-bulle b { color: var(--c3d-lisere); }

/* Bas : la barre de commandement, trois blocs. */
#c3d-overlay.c3d-rts #c3d-commande {
  position: fixed !important; left: 20px !important; right: 20px !important; bottom: 16px !important; top: auto !important;
  width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important;
  transform: none !important; z-index: 40; display: grid !important; grid-template-columns: minmax(360px, 560px) minmax(420px, 1fr) minmax(340px, 470px);
  gap: 0; padding: 12px 14px; box-sizing: border-box; min-height: 164px;
  background: var(--c3d-fond); border: 1px solid var(--c3d-bord); border-left: 2px solid var(--c3d-lisere); border-radius: 0;
  clip-path: var(--c3d-coin); box-shadow: none; font-size: 12px; color: var(--c3d-texte);
}
#c3d-commande .c3d-bloc { padding: 0 14px; border-right: 1px solid var(--c3d-bord); min-width: 0; }
#c3d-commande .c3d-bloc:last-child { border-right: 0; }
#c3d-commande .c3d-bloc h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font: 400 11px var(--hud-mono);
  color: var(--c3d-doux); letter-spacing: 0; text-transform: none; white-space: nowrap; }
#c3d-commande .c3d-bloc h3 span:first-child { overflow: hidden; text-overflow: ellipsis; }
#c3d-commande .c3d-sel-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#c3d-commande .c3d-unite { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--c3d-bord); border-radius: 4px; background: rgba(127, 212, 255, 0.05); color: var(--c3d-texte);
  font: 400 12px var(--hud-mono); text-align: left; min-width: 0; }
#c3d-commande .c3d-unite-ico { grid-row: span 2; text-align: center; font-size: 16px; }
#c3d-commande .c3d-unite-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c3d-commande .c3d-unite-n b { color: var(--c3d-lisere); }
#c3d-commande .c3d-unite-perdus { opacity: 0.7; cursor: var(--c3d-curseur-main, pointer); }
#c3d-commande .c3d-unite-perdus small { font-size: 10px; color: var(--c3d-doux); }
#c3d-commande .c3d-sel-vide { grid-column: 1 / -1; font-size: 11px; color: var(--c3d-doux); padding: 8px 0; }
#c3d-commande .c3d-ordres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#c3d-commande .c3d-ordre { position: relative; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--c3d-bord); border-radius: 4px; background: rgba(127, 212, 255, 0.05); color: var(--c3d-texte);
  font: 400 11px var(--hud-mono); cursor: var(--c3d-curseur-main, pointer); padding: 0 2px; min-width: 0; }
#c3d-commande .c3d-ordre > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#c3d-commande .c3d-ordre .c3d-ordre-ico { font-size: 16px; line-height: 1; }
#c3d-commande .c3d-ordre .c3d-touche { position: absolute; top: 3px; right: 4px; font-size: 9px; min-width: 12px; padding: 0 3px; line-height: 12px; }
#c3d-commande .c3d-ordre:hover { border-color: var(--c3d-lisere); }
#c3d-commande .c3d-ordre.on { border-color: var(--c3d-ami); background: rgba(79, 209, 139, 0.12); }
#c3d-commande .c3d-ordre.arme { border-color: var(--c3d-assaut); background: rgba(255, 95, 122, 0.14); color: #ffd0d8; }
#c3d-commande .c3d-ordre:disabled { opacity: 0.35; cursor: var(--c3d-curseur, default); }
#c3d-commande .c3d-formes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#c3d-commande .c3d-forme-bt { height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--c3d-bord); border-radius: 4px; background: none; font: 400 10px var(--hud-mono); color: var(--c3d-doux); cursor: var(--c3d-curseur-main, pointer); min-width: 0; }
#c3d-commande .c3d-forme-bt svg { width: 34px; height: 18px; fill: var(--c3d-doux); color: var(--c3d-doux); }
#c3d-commande .c3d-forme-bt.on { border-color: var(--c3d-lisere); color: var(--c3d-texte); background: rgba(127, 212, 255, 0.14); }
#c3d-commande .c3d-forme-bt.on svg { fill: var(--c3d-lisere); color: var(--c3d-lisere); }
#c3d-commande .c3d-forme-bt:hover { border-color: var(--c3d-doux); }
#c3d-commande .c3d-postures, #c3d-commande .c3d-baies { display: flex; gap: 6px; margin-top: 10px; }
#c3d-commande .c3d-posture-bt, #c3d-commande .c3d-baie-bt { flex: 1; min-width: 0; padding: 5px 4px; border: 1px solid var(--c3d-bord); border-radius: 4px;
  background: none; font: 400 11px var(--hud-mono); color: var(--c3d-doux); cursor: var(--c3d-curseur-main, pointer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c3d-commande .c3d-posture-bt .c3d-touche { font-size: 9px; line-height: 12px; margin-left: 2px; }
#c3d-commande .c3d-posture-bt.on.c3d-pill-defense { border-color: #5aa9ff; color: #cfe6ff; background: rgba(90, 169, 255, 0.14); }
#c3d-commande .c3d-posture-bt.on.c3d-pill-riposte { border-color: #e8c56a; color: #fbeec4; background: rgba(232, 197, 106, 0.14); }
#c3d-commande .c3d-posture-bt.on.c3d-pill-agressif { border-color: #ff6b5a; color: #ffd6cf; background: rgba(255, 90, 74, 0.14); }
#c3d-commande .c3d-baie-bt { text-align: left; color: var(--c3d-texte); }
#c3d-commande .c3d-baie-bt.on { border-color: rgba(79, 209, 139, 0.5); }
#c3d-commande .c3d-baie-bt.on b { color: var(--c3d-ami); }
.c3d-drones-cmd { position: absolute; left: 16px; bottom: 300px; z-index: 4; }

/* ══════════════════════════════════════════════════════════════════════════
   📖 V4.1.17 — HISTOIRE (portail et fenêtre de dialogue du vol 3D)
   Un dialogue se lit comme un script : le nom en marge, la réplique à côté,
   les didascalies en retrait. Les décisions portent l'accent, rien d'autre.
   ══════════════════════════════════════════════════════════════════════════ */
.hist-root { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.hist-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hist-arc { font-size: 15px; font-weight: 700; color: var(--text); }
.hist-chapitre { font-size: 12.5px; color: var(--accent); }
.hist-mission { font-size: 12.5px; color: var(--text-dim); }
.hist-boite { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel-2); padding: 14px; }
.hist-ligne { display: grid; grid-template-columns: minmax(70px, 120px) 1fr; gap: 12px; margin: 6px 0; line-height: 1.6; }
.hist-qui { font-weight: 700; color: var(--accent); text-align: right; font-size: 13px; }
.hist-texte { color: var(--text); font-size: 13.5px; }
.hist-didascalie { color: var(--text-dim); font-style: italic; font-size: 13px; line-height: 1.6; border-left: 2px solid var(--line); padding-left: 12px; margin: 6px 0; }
.hist-reponse { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.hist-invite { color: var(--text-dim); font-size: 12.5px; margin: 4px 0 8px; }
.hist-options { display: flex; flex-direction: column; gap: 6px; }
.hist-option { text-align: left; background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
.hist-option:hover, .hist-option:focus-visible { border-color: var(--accent); outline: none; }
.hist-question.hist-vue { color: var(--text-dim); }
.hist-decision { border-color: var(--accent-dim); }
.hist-decision strong { color: var(--accent); }
.hist-prix { color: var(--amber); font-weight: 600; white-space: nowrap; }
.hist-note { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 6px; }
.hist-bascule-titre { font-weight: 700; color: var(--accent); font-size: 13px; margin-bottom: 6px; }
.hist-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.hist-objectifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist-objectifs li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; color: var(--text); }
.hist-objectifs.hist-suivi li .hist-barre { grid-column: 1 / -1; }
.hist-objectifs li small { color: var(--text-dim); }
.hist-objectifs li.hist-ok span:first-child::before { content: '✓ '; color: var(--green); }
.hist-barre { display: block; height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.hist-barre i { display: block; height: 100%; background: var(--accent); }
.hist-progression { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.hist-sec { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.hist-sec:first-of-type { border-top: 0; }
.hist-sec-titre { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.hist-inventaire { font-size: 12.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.hist-journal { font-size: 12px; color: var(--text-dim); }
.hist-journal summary { cursor: pointer; color: var(--text); }
.hist-journal div { padding: 2px 0; }
.hist-erreur { color: var(--red); font-size: 12.5px; }
@media (max-width: 560px) {
  .hist-ligne { grid-template-columns: 1fr; gap: 2px; }
  .hist-qui { text-align: left; }
}

/* 📖 Fenêtre de dialogue du vol 3D (combat3d.js) : la même interface, posée
   en bas de l'écran, sous le réticule, le temps d'une conversation. */
#c3d-histoire { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); max-height: 46vh; overflow: auto; z-index: 40; background: rgba(5, 6, 8, 0.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: none; cursor: var(--c3d-curseur, default); }
#c3d-histoire .hist-root { max-width: none; }
#c3d-histoire .hist-tete { justify-content: space-between; }
#c3d-histoire .hist-fermer { position: sticky; top: 0; float: right; background: none; border: 0; color: var(--text-dim); font-size: 16px; cursor: var(--c3d-curseur-main, pointer); }
#c3d-histoire button { cursor: var(--c3d-curseur-main, pointer); }

/* 📖 Étape de contact (Campagne de mission) au format récit. */
.mnpc-accueil { font-style: italic; color: var(--text-dim); font-size: 12.5px; margin: 6px 0 10px; }
.mnpc-replique { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 13px; line-height: 1.6; margin: 6px 0; }
.mnpc-replique b { color: var(--accent); }
.mnpc-rebond { color: var(--amber); font-size: 12px; font-weight: 600; }
.mnpc-choix { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.c3d-histoire-btn { position: absolute; left: 16px; top: 96px; z-index: 39; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(5, 6, 8, 0.85); color: var(--text); font-size: 18px; cursor: var(--c3d-curseur-main, pointer); }
.c3d-histoire-btn.c3d-histoire-attente { border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.c3d-marker-mission { color: #52e0c4 }
.c3d-marker-mission i { border-color: #52e0c4 !important; box-shadow: 0 0 8px rgba(82, 224, 196, 0.7) }
.c3d-marker-missioncible { color: #ff6b57 }
.c3d-marker-missioncible i { border-color: #ff6b57 !important; box-shadow: 0 0 8px rgba(255, 107, 87, 0.7) }

/* 🎯 V4.1.20 — compteur des slots d'arme / missile du modèle */
.hangar-slots-modele { font-size: 12px; color: var(--text-dim); margin: 2px 0 8px; }
/* 🛞 V4.1.24 — sous le viseur : postcombustion et aide au vol coupée. */
#c3d-crosshair .c3d-indic-vol { position: absolute; left: 50%; top: calc(50% + 92px); transform: translateX(-50%); white-space: nowrap;
  font: 10px 'JetBrains Mono', monospace; color: #ffb36b; letter-spacing: 0.04em; pointer-events: none; text-shadow: 0 0 4px #000; }