/* ═══════════════════════════════════════════
   THYMOS — ENHANCEMENTS  (couche UI/UX additive)
   Chargée en DERNIER sur toutes les pages.
   Non destructive : améliore l'accessibilité clavier,
   le tactile, les micro-transitions et la finition,
   sans modifier la mise en page existante.
   Palette : var(--red,#C1121F) / var(--gold,#B8960C)
════════════════════════════════════════════ */

/* ── 1. Sélection de texte aux couleurs de la marque ── */
::selection      { background: var(--red, #C1121F); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--red, #C1121F); color: #fff; text-shadow: none; }

/* ── 2. Focus clavier accessible (n'affecte PAS le clic souris) ──
   Beaucoup d'éléments n'avaient aucun focus visible : barrière a11y. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.stab:focus-visible {
  outline: 2px solid var(--gold, #B8960C);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Ne pas afficher l'outline pour un focus à la souris (focus-visible gère le clavier) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.nav-item:focus:not(:focus-visible) { outline: none; }

/* ── 3. Tactile : supprime le délai de 300ms et fiabilise le tap ── */
a, button, .btn, .nav-item, .stab, [role="button"],
input, select, textarea, label {
  touch-action: manipulation;
}

/* ── 4. Cibles tactiles ≥ 44px (uniquement sur écrans tactiles, desktop intact) ── */
@media (pointer: coarse) {
  .btn, button, .nav-item, .stab, .salle-settings, .sidebar-toggle {
    min-height: 44px;
  }
  .nav-item { display: flex; align-items: center; }
}

/* ── 5. Micro-transitions cohérentes (éléments interactifs uniquement) ── */
a, .btn, button,
input, select, textarea,
.nav-item, .stab {
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease,
              transform .18s ease, opacity .18s ease;
}

/* ── 6. États désactivés cohérents ── */
button:disabled, .btn:disabled, [disabled] {
  opacity: .55;
  cursor: not-allowed;
}
button:disabled:hover, .btn:disabled:hover { transform: none; }

/* ── 7. Chiffres alignés (KPI, prix, badges, scores, compteurs) ──
   tabular-nums n'affecte que les chiffres : sans risque sur du texte. */
.nav-badge, .pay-price, .pay-total,
[class*="kpi"], [class*="score"], [class*="count"],
[class*="ring-val"], [class*="countdown"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 8. Barres de défilement cohérentes (thème sombre) ── */
* { scrollbar-width: thin; scrollbar-color: rgba(184,150,12,.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb {
  background: rgba(184,150,12,.5);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold, #B8960C); background-clip: padding-box; }

/* ── 9. Défilement doux pour les ancres internes ── */
html { scroll-behavior: smooth; }

/* ── 10. Marqueurs « fonctionnalité à venir » (honnêteté produit) ──
   Pour signaler clairement ce qui n'est pas encore livré, sans tromper. */
.badge-soon {
  display: inline-block;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 4px;
  background: rgba(184,150,12,.15);
  color: var(--gold, #B8960C);
  border: 1px solid rgba(184,150,12,.35);
  vertical-align: middle;
  margin-left: .45rem;
  white-space: nowrap;
}
.soon-locked {
  opacity: .5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(.3);
}
.soon-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  text-align: center;
  padding: .85rem 1.1rem;
  margin: 0 0 1.1rem;
  border-radius: 10px;
  background: rgba(184,150,12,.08);
  border: 1px dashed rgba(184,150,12,.35);
  color: var(--gold, #B8960C);
  font-size: .84rem;
  line-height: 1.4;
}

/* ── 12. Skip-link « Aller au contenu » (a11y clavier) ──
   Caché hors écran, visible uniquement au focus clavier. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  background: var(--red, #C1121F);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--r-md, 6px);
}

/* ── 13. Anneau de focus unifié (généralise le ring « premium » de la connexion) ── */
input:focus,
select:focus,
textarea:focus,
.field-input:focus,
.modal-field input:focus,
.sf-field input:focus {
  border-color: var(--red, #C1121F);
  box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.12);
  outline: none;
}

/* ── 14. État actif d'onglet renforcé (en plus du fond existant) ── */
.tab-btn.active,
.stab.active {
  color: var(--white, #F0EDE8);
  box-shadow: inset 0 -2px 0 var(--red, #C1121F);
}

/* ── 15. Densité de lecture côté app (n'affecte pas la landing) ── */
.dashboard-body { line-height: 1.45; }

/* ── 11. Respect de prefers-reduced-motion (accessibilité vestibulaire) ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}