/*
 * anlv_buttons.css — Design System Boutons ANLV v4.0
 * Source unique de vérité pour tous les boutons du jeu.
 * Inclure après game_base.css dans toutes les pages.
 *
 * Variantes disponibles :
 *   .btn              → neutre (gris sombre)
 *   .btn.gold         → action principale (orange/doré)
 *   .btn.purple       → accent (violet)
 *   .btn.blue         → info/online (bleu)
 *   .btn.red          → destructif doux (rouge)
 *   .btn.danger       → destructif fort (rouge vif)
 *   .btn.green        → succès/validation (vert)
 *   .btn.ghost        → contour seul (transparent)
 *   .btn.full         → pleine largeur
 *   .btn.sm           → taille réduite
 *   .btn.lg           → grande taille
 *   .btn[disabled]    → état désactivé
 *
 * Boutons de navigation header :
 *   .btnHeader        → bouton standard header (← Retour, Déconnexion…)
 *   .btnHeader.back   → ← Retour (doré)
 *   .btnHeader.danger → Déconnexion / Abandonner (rouge)
 */


/* ── Layout header unifié ────────────────────────────────────────────────── */
/*
 * .hRow  → conteneur header standard (titre à gauche, boutons à droite)
 * .row   → override pour usage header (force space-between)
 * .headerActions → groupe de boutons côté droit
 */

header .hRow,
header .row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

header .hRow h1,
header .row h1 {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

.headerActions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Bouton seul dans le header → poussé à droite automatiquement */
header .hRow > .btn,
header .row > .btn {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Reset ciblé ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;

  /* Géométrie */
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);

  /* Couleur de base — neutre */
  background: rgba(255,255,255,.07);
  color: #eaf2ff;

  /* Transitions */
  transition: filter .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.95);
}

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Variantes couleur ───────────────────────────────────────────────────── */

/* Doré — action principale, retour */
.btn.gold {
  background: rgba(255,154,42,.18);
  border-color: rgba(255,154,42,.5);
  color: #ffd86a;
}
.btn.gold:hover:not(:disabled) {
  background: rgba(255,154,42,.26);
  border-color: rgba(255,154,42,.7);
}

/* Violet — coupe intercontinentale, accents */
.btn.purple {
  background: rgba(124,58,237,.22);
  border-color: rgba(124,58,237,.55);
  color: #c4b5fd;
}
.btn.purple:hover:not(:disabled) {
  background: rgba(124,58,237,.32);
  border-color: rgba(124,58,237,.75);
}

/* Bleu — online, info */
.btn.blue {
  background: rgba(10,79,175,.32);
  border-color: rgba(10,79,175,.58);
  color: #93c5fd;
}
.btn.blue:hover:not(:disabled) {
  background: rgba(10,79,175,.44);
  border-color: rgba(10,79,175,.75);
}

/* Vert — succès, validation */
.btn.green {
  background: rgba(53,208,127,.18);
  border-color: rgba(53,208,127,.5);
  color: #6ee7b7;
}
.btn.green:hover:not(:disabled) {
  background: rgba(53,208,127,.28);
  border-color: rgba(53,208,127,.7);
}

/* Rouge doux — actions secondaires destructives */
.btn.red {
  background: rgba(255,59,48,.18);
  border-color: rgba(255,59,48,.45);
  color: #fca5a5;
}
.btn.red:hover:not(:disabled) {
  background: rgba(255,59,48,.28);
  border-color: rgba(255,59,48,.65);
}

/* Rouge fort — danger, déconnexion, abandon */
.btn.danger {
  background: rgba(220,38,38,.22);
  border-color: rgba(255,59,48,.55);
  color: #fca5a5;
}
.btn.danger:hover:not(:disabled) {
  background: rgba(220,38,38,.34);
  border-color: rgba(255,59,48,.78);
}

/* Ghost — contour seul */
.btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
}
.btn.ghost:hover:not(:disabled) {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.42);
}

/* ── Tailles ─────────────────────────────────────────────────────────────── */
.btn.sm {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 10px;
}

.btn.lg {
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 16px;
}

.btn.full {
  width: 100%;
}

/* ── Boutons header (← Retour, Déconnexion, Abandonner) ─────────────────── */
/*
 * On réutilise .btn + variante, mais on garantit
 * une hauteur minimale et un look cohérent en header.
 */
header .btn,
.hRow .btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 12px;
}

/* ── Boutons segmentés (tabs) ────────────────────────────────────────────── */
.segBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-weight: 900;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.segBtn:hover:not(:disabled) {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.segBtn.isActive,
.segBtn.active {
  background: rgba(255,154,42,.18);
  border-color: rgba(255,154,42,.55);
  color: #ffd86a;
}

/* ── Boutons de filtre / tabs (rTab, tabBtn) ─────────────────────────────── */
.rTab, .tabBtn {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 900;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .15s ease;
}
.rTab.active, .tabBtn.active,
.rTab:hover, .tabBtn:hover {
  background: rgba(255,154,42,.15);
  border-color: rgba(255,154,42,.4);
  color: rgba(255,154,42,.9);
}

/* ── Compatibilité — anciennes classes non-migrées ───────────────────────── */
/* Ces règles maintiennent la compatibilité avec le HTML existant */
.btn.primary {
  background: rgba(10,79,175,.32);
  border-color: rgba(10,79,175,.58);
  color: #93c5fd;
}
.btn.secondary {
  background: rgba(255,154,42,.14);
  border-color: rgba(255,154,42,.4);
  color: #ffd86a;
}
.btn.btn-primary {
  background: rgba(10,79,175,.32);
  border-color: rgba(10,79,175,.58);
  color: #93c5fd;
}
.btn.btn-secondary {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
}