/* ═══════════════════════════════════════════════════════════════
   SPÉCIALISTES PORTE — feuille de l'écran (23/08/2026)
   ───────────────────────────────────────────────────────────────
   Cet écran était écrit à 100 % en styles en dur dans le JS : aucune
   classe, ~50 valeurs hors du système, et des teintes qui ne suivaient
   pas le thème de faction. Les styles sont sortis ici, sur les jetons.

   Ce qui NE change pas : toute la géométrie (tailles, espacements,
   rayons, graisses) est reprise telle quelle et vérifiée au pixel.
   Ce qui change, volontairement : les couleurs recopiées à la main
   passent aux jetons. Elles en étaient proches sans être identiques,
   au point qu'un même badge portait deux verts différents — texte en
   --success (#44ffaa) sur un fond rgba(46,204,136). Les fonds suivent
   désormais la teinte de leur propre texte, et le thème de faction.
   ═══════════════════════════════════════════════════════════════ */

/* Deux valeurs n'ont pas de jeton dans le système : le fond propre à ces
   modales et la taille de leur titre. Nommées ici une fois, plutôt que
   recopiées à dix endroits comme avant. */
:root {
  --gspec-surface: rgba(8,14,28,0.97);
  --gspec-fs-title: 20px;
  --gspec-pad-modal: 24px;   /* entre --sp-xl (20) et --sp-2xl (28) : aucun jeton ne colle */
  --gspec-fs-close: 24px;    /* entre --fs-2xl (22) et --fs-3xl (26) : idem */
}

/* ── Fond de modale (liste + fiche) ─────────────────────────── */
.gspec-ov,
.gspec-detail-ov {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-xl);
}
.gspec-ov { background: var(--shade-7); backdrop-filter: blur(5px); overflow-y: auto; }
.gspec-detail-ov { background: var(--shade-7); backdrop-filter: blur(6px); }

/* ── Modale « liste » ───────────────────────────────────────── */
.gspec-modal {
  background: var(--gspec-surface);
  border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 16px;
  padding: var(--gspec-pad-modal);
  max-width: 720px; width: 100%; max-height: 90vh;
  box-shadow: 0 12px 60px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
}
.gspec-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-md); flex-shrink: 0;
}
.gspec-title {
  font-family: var(--font-display); font-size: var(--gspec-fs-title); font-weight: 900;
  color: var(--textbright); letter-spacing: 2px;
}
.gspec-credits {
  font-family: var(--font-mono); font-size: var(--fs-base);
  color: var(--gold); margin-top: var(--sp-xs);
}
.gspec-close {
  background: none; border: none; color: var(--textsoft);
  font-size: var(--gspec-fs-close); cursor: pointer; padding: 0 var(--sp-sm);
}
.gspec-close:hover { color: var(--textbright); }
.gspec-scroll { overflow-y: auto; flex: 1; }

/* Bandeau d'avertissement (portée de la fonctionnalité) */
.gspec-note {
  background: rgba(var(--warn-rgb),0.06);
  border: 1px solid rgba(var(--warn-rgb),0.2);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-md);
  font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--warn); line-height: 1.4; flex-shrink: 0;
}
/* En page, ce meme bandeau avait 14px de marge basse contre 12 en modale. Aucune
   intention derriere cet ecart, mais on ne le corrige pas en douce : la passe ne
   devait rien deplacer. Variante explicite. */
.gspec-note--page { margin-bottom: 14px; }

/* Cadeau de bienvenue (rendu en page, pas en modale) */
.gspec-gift {
  background: rgba(var(--success-rgb),0.07);
  border: 1px solid rgba(var(--success-rgb),0.3);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: 14px;
  font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--success); line-height: 1.4;
}

/* ── Carte d'un Spécialiste dans la liste ───────────────────── */
.gspec-card {
  border: 2px solid var(--tint-7);
  background: var(--tint-1);
  border-radius: 12px;
  padding: 14px var(--sp-lg);
  margin-bottom: 10px;
}
.gspec-card--owned {
  border-color: rgba(var(--accent-rgb),0.4);
  background: rgba(var(--accent-rgb),0.04);
}
.gspec-card--active {
  border-color: var(--success);
  background: rgba(var(--success-rgb),0.08);
}
.gspec-card-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: var(--sp-md);
}
.gspec-card-main { flex: 1; min-width: 0; }
.gspec-name {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 900;
  color: var(--textbright); letter-spacing: 1px; margin-bottom: var(--sp-xs);
}
.gspec-tag {
  font-size: var(--fs-xs); color: var(--accent);
  background: rgba(var(--accent-rgb),0.18);
  padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 6px;
}
.gspec-tag--slot { color: var(--success); background: rgba(var(--success-rgb),0.18); }
.gspec-faction {
  font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--textsoft); letter-spacing: 0.5px; margin-bottom: 6px;
}
.gspec-ability {
  font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--gold); font-weight: 700; margin-bottom: var(--sp-xs);
}
.gspec-desc {
  font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--textmid); line-height: 1.45;
}

/* Colonne d'actions à droite de la carte */
.gspec-actions {
  display: flex; flex-direction: column;
  gap: 6px; align-items: flex-end;
}
.gspec-lvl-row { display: flex; gap: var(--sp-xs); align-items: center; }
.gspec-lvl {
  font-family: var(--font-display); font-size: var(--fs-base);
  color: var(--gold); letter-spacing: 1px;
}
.gspec-xp { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--textsoft); }
.gspec-xp--max { color: var(--gold); }
/* « dernière sortie il y a X » — information, pas compte à rebours */
.gspec-lastuse { font-size: var(--fs-xs); color: var(--textsoft); }
.gspec-slotbtns { display: flex; gap: var(--sp-xs); flex-wrap: wrap; justify-content: flex-end; }

.gspec-btn {
  padding: 6px 10px; font-size: var(--fs-xs);
  border: 1px solid rgba(var(--accent-rgb),0.5);
  color: var(--accent); background: rgba(var(--accent-rgb),0.08);
  border-radius: var(--radius-sm); cursor: pointer;
}
.gspec-btn:hover { background: rgba(var(--accent-rgb),0.16); }
.gspec-btn--remove {
  border-color: rgba(var(--danger-rgb),0.45);
  color: var(--danger); background: rgba(var(--danger-rgb),0.05);
}
.gspec-btn--remove:hover { background: rgba(var(--danger-rgb),0.12); }
.gspec-buy {
  padding: var(--sp-sm) 14px;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 1.5px;
  border: 1px solid rgba(var(--gold-rgb),0.5);
  color: var(--gold); background: rgba(var(--gold-rgb),0.08);
  border-radius: var(--radius-s); cursor: pointer; white-space: nowrap;
}
.gspec-buy:hover { background: rgba(var(--gold-rgb),0.16); }
.gspec-locked { font-size: var(--fs-xs); color: var(--textsoft); }

/* ── Fiche détaillée ────────────────────────────────────────── */
.gspec-detail {
  background: var(--gspec-surface);
  border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 16px;
  max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0,0,0,0.7);
}
.gspec-hero { height: 340px; background-size: cover; background-position: center top; border-radius: 16px 16px 0 0; position: relative; }
.gspec-hero-close {
  position: absolute; top: var(--sp-md); right: var(--sp-md); z-index: 2;
  background: var(--shade-5); border: 1px solid var(--tint-10);
  color: var(--textbright); font-size: var(--gspec-fs-title);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
}
.gspec-noimg-head { display: flex; justify-content: space-between; padding: var(--sp-lg) var(--sp-xl) 0; }
.gspec-noimg-icon { font-size: 64px; }
.gspec-noimg-close { background: none; border: none; color: var(--textsoft); font-size: var(--gspec-fs-close); cursor: pointer; }
.gspec-detail-body { padding: 14px 22px 22px; }
.gspec-detail-name {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900;
  color: var(--textbright); letter-spacing: 1.5px; margin-bottom: var(--sp-xs);
}
.gspec-detail-stars { color: var(--gold); margin-right: var(--sp-sm); }
.gspec-detail-faction {
  font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--textsoft); letter-spacing: 0.5px; margin-bottom: 14px;
}
.gspec-ability-box {
  background: rgba(var(--accent-rgb),0.06);
  box-shadow: inset 3px 0 0 0 var(--gold);
  padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 14px;
}
.gspec-ability-name {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700;
  color: var(--gold); letter-spacing: 1px; margin-bottom: 6px;
}
.gspec-ability-desc { font-family: var(--font-body); font-size: var(--fs-md); color: var(--textmid); line-height: 1.5; }

.gspec-prog { margin-bottom: 14px; }
.gspec-prog-lbl {
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--textsoft);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px;
}
.gspec-tiers { display: flex; gap: var(--sp-xs); align-items: flex-end; }
.gspec-tier { text-align: center; flex: 1; }
.gspec-tier-v { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--textmid); margin-bottom: 3px; }
.gspec-tier-mult { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--textmid); }
.gspec-tier.is-current .gspec-tier-mult { color: var(--success); text-shadow: 0 0 8px rgba(var(--success-rgb),0.6); }
.gspec-xp-bar { margin-top: 8px; height: 6px; }
.gspec-xp-lbl { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--textsoft); margin-top: var(--sp-xs); text-align: center; }
.gspec-xp-max { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--gold); margin-top: 6px; text-align: center; }

/* Encarts d'état de la fiche */
.gspec-box {
  border-radius: var(--radius-s); padding: var(--sp-sm) var(--sp-md);
  margin-bottom: 10px; font-family: var(--font-mono); font-size: var(--fs-base);
}
.gspec-box--conv { background: rgba(var(--danger-rgb),0.08); border: 1px solid rgba(var(--danger-rgb),0.3); color: var(--danger); }
.gspec-box--slot { background: rgba(var(--success-rgb),0.08); border: 1px solid rgba(var(--success-rgb),0.3); color: var(--success); margin-bottom: 14px; }

/* Série de victoires (Bra'tac) */
.gspec-streak {
  background: rgba(var(--gold-rgb),0.07); border: 1px solid rgba(var(--gold-rgb),0.28);
  border-radius: var(--radius-s); padding: var(--sp-sm) var(--sp-md); margin-bottom: 10px;
}
.gspec-streak-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gspec-streak-lbl,
.gspec-streak-val { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--gold); }
.gspec-streak-val.is-empty { color: var(--textsoft); }
.gspec-streak-hint { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); margin-top: var(--sp-xs); }
/* 3px = la moitie de la hauteur : c'est ce qui fait la capsule, pas un arrondi
   choisi au hasard. Aucun jeton de la rampe ne convient (2px casserait la forme). */
.gspec-pip { width: 22px; height: 6px; border-radius: 3px; background: var(--tint-9); display: inline-block; }
.gspec-pip.is-on { background: var(--gold); }

/* Actions de la fiche */
.gspec-detail-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.gspec-detail-actions .cmd-btn { flex: 1; }
.gspec-btn-wide { width: 100%; font-size: var(--fs-md); padding: 10px; }
/* Variante 13 px : le bouton du jeton et celui du transport medical etaient plus
   petits que celui du recrutement. Ecart releve par la mesure avant/apres. */
.gspec-btn-wide--sm { font-size: var(--fs-base); }
.gspec-btn-locked {
  flex: 1; cursor: default;
  border-color: rgba(var(--success-rgb),0.5);
  color: var(--success); background: rgba(var(--success-rgb),0.06);
}

/* Transport médical urgent (raccourcit la convalescence) */
.gspec-heal {
  margin-top: 14px; padding: 10px;
  background: rgba(var(--danger-rgb),0.06); border: 1px solid rgba(var(--danger-rgb),0.25);
  border-radius: var(--radius);
}
.gspec-heal-title {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--danger); letter-spacing: 1.5px; margin-bottom: 6px;
}
.gspec-heal-desc { font-family: var(--font-body); font-size: var(--fs-base); color: var(--textmid); line-height: 1.45; margin-bottom: var(--sp-sm); }

/* Réaffectation : jeton disponible, ou pack */
.gspec-reassign { margin-top: 14px; padding: var(--sp-md) 14px; border-radius: var(--radius); }
.gspec-reassign--token { background: rgba(var(--success-rgb),0.07); border: 1px solid rgba(var(--success-rgb),0.3); }
.gspec-reassign--pack  { background: rgba(var(--gold-rgb),0.06);    border: 1px solid rgba(var(--gold-rgb),0.25); }
.gspec-reassign-title {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 1.5px; margin-bottom: 6px;
}
.gspec-reassign--token .gspec-reassign-title { color: var(--success); }
.gspec-reassign--pack  .gspec-reassign-title { color: var(--gold); }
.gspec-reassign-desc { font-family: var(--font-body); font-size: var(--fs-base); color: var(--textmid); line-height: 1.45; margin-bottom: 10px; }
.gspec-reassign-cta {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--sp-sm);
  padding: 10px var(--sp-lg);
  background: rgba(var(--gold-rgb),0.18); border: 1px solid var(--gold);
  border-radius: var(--radius); color: var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  letter-spacing: 1px; cursor: pointer;
}
.gspec-reassign-price { background: var(--gold); color: var(--bg-deep); padding: 2px var(--sp-sm); border-radius: var(--radius-sm); }
.gspec-reassign-note { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--textsoft); line-height: 1.4; margin-top: var(--sp-sm); text-align: center; }

/* ── Rendu en page (onglet Spécialistes de la page Commandants) ── */
.gspec-tokens-credits { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.gspec-tokens-ico { font-size: var(--fs-2xl); }
.gspec-inline-hdr { color: var(--accent2); }
.gspec-state { padding: 32px; text-align: center; color: var(--textsoft); }
.gspec-state--loading { padding: var(--gspec-pad-modal); }
.gspec-state--error { color: var(--danger); }
.gspec-card-clickable { cursor: pointer; }
.gspec-badge-conv {
  background: rgba(var(--danger-rgb),0.15);
  border-color: rgba(var(--danger-rgb),0.5);
  color: var(--danger);
}
.gspec-grid-locked {
  border-color: rgba(var(--success-rgb),0.5);
  color: var(--success);
  background: rgba(var(--success-rgb),0.06);
  cursor: default;
}