/* css/base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0B0B0E;
  --bg2:         #13131A;
  --bg3:         #1C1C27;
  --text:        #EDEDED;
  --text2:       #A6A6B0;
  --accent:      #37E6B6;
  --cyan:        #7AE1FF;
  --gold:        #FFCB5B;
  --danger:      #FF5A67;
  --border:      #242432;
  --radius:      12px;
  --radius-sm:   8px;
  --transition:  150ms ease;
  --nav-h:       64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  height: 100vh;
  height: 100dvh; /* barre d'outils mobile : se réduit quand la barre apparaît */
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Boutons généraux */
button { font-family: inherit; cursor: pointer; border: none; outline: none; }

/* ── Focus clavier ──────────────────────────────────────────────────────────────
   Anneau cyan UNIQUEMENT pour la navigation au clavier (:focus-visible) : un tap ou un clic ne
   l'affiche jamais (le `outline: none` ci-dessus reste la règle par défaut, y compris pour les
   navigateurs sans :focus-visible). Les champs de saisie gardent leur propre style de focus
   (login, pseudo, code…) ; les conteneurs à tabindex="-1" (boîtes de dialogue) ne reçoivent le
   focus que par script et n'ont jamais d'anneau. `:where()` garde la spécificité minimale : tout
   style de focus propre à un composant (ex. .rules-sheet) l'emporte. */
[tabindex] { outline: none; }   /* éléments cliquables non natifs (div role="button"…) : même défaut que <button> */
:focus-visible:where(:not(input, textarea, select)) { outline: 2px solid var(--cyan); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
/* Dernière interaction = pointeur (a11y.js : classe fj-pointer sur <html>) : jamais d'anneau, même si un
   script déplace le focus (ex. retour au déclencheur à la fermeture d'une boîte de dialogue). */
html.fj-pointer :focus-visible:where(:not(input, textarea, select)) { outline: none; }

/* Texte réservé aux technologies d'assistance (zone d'annonces, libellés) : hors écran, pas de
   rendu, mais lu par les lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity var(--transition), transform var(--transition);
  user-select: none;
}
.btn:active  { transform: scale(.97); opacity: .85; }
.btn:disabled { opacity: .35; pointer-events: none; }

.btn--primary   { background: var(--accent);  color: #0B0B0E; }
.btn--secondary { background: var(--bg3);     color: var(--text); border: 1px solid var(--border); }
.btn--danger    { background: var(--danger);  color: #fff; }
.btn--accent    { background: var(--bg3);     color: var(--cyan); border: 1px solid var(--cyan); }
.btn--ghost     { background: transparent;    color: var(--text2); }
.btn--sm        { padding: 8px 14px; font-size: 12px; }
.btn-icon       { background: transparent; color: var(--text); font-size: 20px; padding: 8px; }

/* Typographie */
.page-title { font-size: 22px; font-weight: 700; padding: 20px 16px 12px; }
.empty-state { color: var(--text2); text-align: center; padding: 40px 20px; line-height: 1.6; }

/* Utilitaires */
[hidden] { display: none !important; }

/* ── Mouvement réduit ───────────────────────────────────────────────────────────
   Appliqué UNIQUEMENT quand le système le demande (prefers-reduced-motion: reduce) : sans cette
   demande, aucune durée ni animation ne change. 0,01 ms (et non 0) pour que `transitionend` /
   `animationend` se déclenchent encore (ex. retrait des toasts) ; les états finaux sont conservés
   (animation-fill-mode inchangé). Les animations GSAP sont accélérées par js/ui/motion.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}