/* ════════════════════════════════════════════════════════════════════
   SGC — COUCHE DE POLISH « AAA » (02/06/2026)
   ────────────────────────────────────────────────────────────────────
   Objectif : élever toute l'UI au niveau « triple A » SANS toucher au
   markup ni au JS. Couche 100% additive, chargée EN DERNIER.

   Principe directeur : on PRÉSERVE l'identité visuelle de chaque section
   (alliance cyan, quêtes or, rapports color-codés, faction accent…) — on
   unifie le RESSENTI d'interaction, pas le look :
     1. Feedback de pression (:active) tactile sur TOUS les onglets/boutons
        — c'est le 1ᵉʳ différenciateur « bon → AAA » (juice). Personne ne
        l'avait avant cette couche.
     2. Courbe d'easing premium unique sur les transitions hover/active.
     3. Anneau de focus clavier renforcé (accessibilité).
     4. Système de boutons réutilisable .btn / .btn--* (net-new).

   Tout est gardé par prefers-reduced-motion + body.lowfx.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   GROUPE A — ONGLETS / MENUS / SOUS-MENUS
   (navigation principale + tous les strips d'onglets de section)
   ─────────────────────────────────────────────────────────────────── */
.lnav-item,
.bld-tab-main, .bld-tab,
.city-tab,
.al-tab-pill, .alhq-subtab-pill, .al-nt-pill, .war-sub-pill,
.ap-tab, .asc-tab,
.mkt-tab, .quest-tab, .chat-tab-pill,
.rep-tab, .msg-tab, .cdx-tab, .cmd-tab,
.rnk-tab-btn, .sim-mode-tab, .brd-tab {
  /* Easing premium appliqué en longhand → n'écrase QUE la courbe, pas la
     durée ni les propriétés transitionnées par les règles existantes. */
  transition-timing-function: var(--ease-out-premium);
  -webkit-tap-highlight-color: transparent;
}

/* Pression : léger enfoncement centré. Spécificité (0,2,0) + chargé en
   dernier → bat le transform de :hover des règles d'origine pendant le clic. */
.lnav-item:active,
.bld-tab-main:active, .bld-tab:active,
.city-tab:active,
.al-tab-pill:active, .alhq-subtab-pill:active, .al-nt-pill:active, .war-sub-pill:active,
.ap-tab:active, .asc-tab:active,
.mkt-tab:active, .quest-tab:active, .chat-tab-pill:active,
.rep-tab:active, .msg-tab:active, .cdx-tab:active, .cmd-tab:active,
.rnk-tab-btn:active, .sim-mode-tab:active, .brd-tab:active {
  transform: scale(var(--press-scale-tab));
  transform-origin: center;
  transition-duration: var(--press-dur);
  filter: brightness(1.06);
}
/* La nav rail (.lnav-item) glisse en X au hover → on garde le X au press. */
.lnav-item:active {
  transform: translateX(2px) scale(0.99);
}

/* ───────────────────────────────────────────────────────────────────
   GROUPE B — BOUTONS / CTA (toutes les actions cliquables du jeu)
   ─────────────────────────────────────────────────────────────────── */
.tc-btn, .pog-bld-btn, .bld-upgrade-btn, .uc-train, .sc-build,
.city-btn, .cityb-up-btn, .city-relique-btn, .lib-card-btn, .city-tech-btn,
.gbtn,
.mkt-accept-btn, .mkt-cancel-btn, .mkt-submit-btn,
.quest-claim-btn, .quest-claimall-btn,
.flo-btn, .fms-new-btn, .fms-loadout-btn, .fms-action-btn,
.fms-transport-btn, .fms-station-btn, .fleet-recall-btn,
.bdd-btn, .ops-card-btn,
.sim-npc-btn, .sim-pvp-btn, .sim-type-btn, .sim-max-btn, .sim-load-pvp-btn,
.auth-btn, .auth-social-btn, .auth-passkey-btn,
.event-popup-btn, .tut-btn-go, .tut-btn-locate, .tut-btn-skip,
.ach-pop-btn, .quest-pop-btn,
.pvp-spy-btn, .logout-btn, .infra-view-toggle {
  transition-timing-function: var(--ease-out-premium);
  -webkit-tap-highlight-color: transparent;
}

/* Pression boutons : enfoncement + écrasement + ombre interne « poussé ». */
.tc-btn:active, .pog-bld-btn:active, .bld-upgrade-btn:active, .uc-train:active, .sc-build:active,
.city-btn:active, .cityb-up-btn:active, .city-relique-btn:active, .lib-card-btn:active, .city-tech-btn:active,
.gbtn:active,
.mkt-accept-btn:active, .mkt-cancel-btn:active, .mkt-submit-btn:active,
.quest-claim-btn:active, .quest-claimall-btn:active,
.flo-btn:active, .fms-new-btn:active, .fms-loadout-btn:active, .fms-action-btn:active,
.fms-transport-btn:active, .fms-station-btn:active, .fleet-recall-btn:active,
.bdd-btn:active, .ops-card-btn:active,
.sim-npc-btn:active, .sim-pvp-btn:active, .sim-type-btn:active, .sim-max-btn:active, .sim-load-pvp-btn:active,
.auth-btn:active, .auth-social-btn:active, .auth-passkey-btn:active,
.event-popup-btn:active, .tut-btn-go:active, .tut-btn-locate:active, .tut-btn-skip:active,
.ach-pop-btn:active, .quest-pop-btn:active,
.pvp-spy-btn:active, .logout-btn:active, .infra-view-toggle:active {
  transform: translateY(1px) scale(var(--press-scale));
  transition-duration: var(--press-dur);
  box-shadow: var(--btn-press-shadow);
}

/* ───────────────────────────────────────────────────────────────────
   FOCUS CLAVIER — anneau premium (accessibilité AAA).
   Complète le :focus-visible global de sgc-variables.css avec un halo doux,
   sans écraser les box-shadow d'état actif (appliqué seulement au focus).
   ─────────────────────────────────────────────────────────────────── */
.lnav-item:focus-visible,
.bld-tab-main:focus-visible, .bld-tab:focus-visible, .city-tab:focus-visible,
.al-tab-pill:focus-visible, .alhq-subtab-pill:focus-visible, .war-sub-pill:focus-visible,
.ap-tab:focus-visible, .asc-tab:focus-visible, .mkt-tab:focus-visible,
.quest-tab:focus-visible, .chat-tab-pill:focus-visible, .rep-tab:focus-visible,
.msg-tab:focus-visible, .cdx-tab:focus-visible, .cmd-tab:focus-visible,
.rnk-tab-btn:focus-visible, .sim-mode-tab:focus-visible, .brd-tab:focus-visible,
.tc-btn:focus-visible, .pog-bld-btn:focus-visible, .bld-upgrade-btn:focus-visible,
.uc-train:focus-visible, .sc-build:focus-visible, .city-btn:focus-visible,
.gbtn:focus-visible, .mkt-accept-btn:focus-visible, .mkt-submit-btn:focus-visible,
.quest-claim-btn:focus-visible, .ops-card-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   SYSTÈME DE BOUTONS RÉUTILISABLE — .btn / .btn--*  (net-new)
   À adopter progressivement pour tout nouveau bouton. Respecte les tokens
   et la couleur de faction (var(--accent-rgb)).
   ════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size:var(--fs-md);
  letter-spacing: 1.2px; text-transform: uppercase; line-height: 1;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  color: var(--text); background: transparent;
  cursor: pointer; position: relative; overflow: hidden;
  white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease-out-premium),
              box-shadow 0.18s var(--ease-out-premium),
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(1px) scale(var(--press-scale));
  transition-duration: var(--press-dur);
  box-shadow: var(--btn-press-shadow);
}
.btn:disabled, .btn.is-disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: none;
}
/* Sheen qui balaie au hover (réservé aux variantes pleines) */
.btn--primary::after, .btn--danger::after, .btn--gold::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.16) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out-premium);
}
.btn--primary:hover::after, .btn--danger:hover::after, .btn--gold:hover::after {
  transform: translateX(120%);
}

/* Variantes sémantiques */
.btn--primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.55));
  border-color: rgba(var(--accent-rgb),0.65); color: #04140a;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),0.28), var(--inset);
}
.btn--primary:hover { box-shadow: var(--btn-shadow-hover); }

.btn--secondary {
  background: rgba(var(--accent-rgb),0.08);
  border-color: rgba(var(--accent-rgb),0.28); color: var(--textbright);
}
.btn--secondary:hover {
  background: rgba(var(--accent-rgb),0.16);
  border-color: rgba(var(--accent-rgb),0.5);
  box-shadow: 0 4px 16px var(--shade-3);
}

.btn--ghost {
  background: transparent; border-color: var(--tint-8); color: var(--textmid);
}
.btn--ghost:hover {
  color: var(--textbright); border-color: rgba(255,255,255,0.28);
  background: var(--tint-3);
}

.btn--danger {
  background: linear-gradient(135deg, rgba(255,95,95,0.92), rgba(200,50,50,0.6));
  border-color: rgba(255,105,105,0.6); color: #1a0606;
}
.btn--danger:hover { box-shadow: 0 6px 20px rgba(255,70,70,0.32); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-color: var(--gold); color: #2a1a00;
  box-shadow: 0 2px 10px var(--goldglow);
}
.btn--gold:hover { box-shadow: 0 6px 22px var(--goldglow); }

/* Tailles + modificateurs */
.btn--sm { padding: 6px 12px; font-size:var(--fs-sm); letter-spacing: 1px; border-radius: var(--btn-radius-sm); }
.btn--lg { padding: 14px 26px; font-size: 16px; letter-spacing: 1.6px; border-radius: var(--btn-radius-lg); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 40px; height: 40px; gap: 0; }

/* ───────────────────────────────────────────────────────────────────
   GARDE-FOUS MOTION — réduit/lowfx : on coupe TOUT transform de feedback.
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn::after, .btn--primary::after, .btn--danger::after, .btn--gold::after { display: none; }
  .lnav-item:active, .bld-tab-main:active, .bld-tab:active, .city-tab:active,
  .al-tab-pill:active, .alhq-subtab-pill:active, .al-nt-pill:active, .war-sub-pill:active,
  .ap-tab:active, .asc-tab:active, .mkt-tab:active, .quest-tab:active, .chat-tab-pill:active,
  .rep-tab:active, .msg-tab:active, .cdx-tab:active, .cmd-tab:active,
  .rnk-tab-btn:active, .sim-mode-tab:active, .brd-tab:active,
  .tc-btn:active, .pog-bld-btn:active, .bld-upgrade-btn:active, .uc-train:active, .sc-build:active,
  .city-btn:active, .cityb-up-btn:active, .gbtn:active, .mkt-accept-btn:active, .mkt-submit-btn:active,
  .quest-claim-btn:active, .ops-card-btn:active,
  .btn:hover, .btn:active {
    transform: none !important;
    filter: none !important;
  }
}
body.lowfx .btn::after,
body.lowfx .btn--primary::after,
body.lowfx .btn--danger::after,
body.lowfx .btn--gold::after { display: none; }