/* Jetons (spec §1.4, §1.6) et fondations. Aucune règle sur .jx-* (cadre des jeux). */
:root {
  --verre: rgba(22, 26, 64, .78);
  --surface: #1A1F4D;
  --panneau: #232A5E;
  --ligne: rgba(160, 170, 255, .28);
  --texte: #EEF1FF;
  --texte-2: #B9C0E8;
  --data: #9FE8FF;
  --or: #FFD166;
  --sur-or: #1A1633;
  --ok: #6FCF8E;
  --anomalie: #E8503A;
  --anomalie-texte: #FF8A76;
  --terminal: #0F1233;
  --terminal-2: #9AA3D6;
  --police-titre: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --h-barre: 56px;
  --haut: calc(var(--h-barre) + env(safe-area-inset-top, 0px));
  --bas: env(safe-area-inset-bottom, 0px);
  --ombre: 0 12px 40px rgba(8, 10, 40, .45);
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --acc: #FFD166;
}
@media (max-width: 480px) { :root { --h-barre: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--texte);
  font: 400 14px/1.5 var(--police-titre);
  -webkit-font-smoothing: antialiased;
  background: #232C66 linear-gradient(180deg, #26306B 0%, #6A5AA8 34%, #E98FA8 55%, #FFB38A 64%, #7C6BB4 66%, #3A3C7E 82%, #262A6A 100%) fixed;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut {
  position: fixed; left: 16px; top: -80px; z-index: 1100; padding: 10px 14px; border-radius: 8px;
  background: var(--or); color: var(--sur-or); font: 600 13px var(--police-mono); text-decoration: none;
}
.saut:focus { top: 8px; }

:focus-visible { outline: 2px solid #FFE08A; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(11, 14, 42, .9); }
:focus:not(:focus-visible) { outline: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px; border-radius: 8px;
  font: 600 12px/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte); background: rgba(35, 42, 94, .72); border: 1px solid rgba(160, 170, 255, .42);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:hover { background: rgba(62, 70, 150, .85); border-color: #C8BEFF; }
.btn:active { transform: translateY(1px); }
.btn.or { background: var(--or); color: var(--sur-or); border-color: var(--or); }
.btn.or:hover { background: #FFDD8A; border-color: #FFDD8A; }
.btn.petit { min-height: 32px; padding: 0 10px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: default; }
@media (pointer: coarse) { .btn, .btn.petit { min-height: 44px; } }

.baie-statique {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; z-index: 0;
  filter: blur(6px); pointer-events: none; transition: opacity .8s ease;
}
html.carte-prete .baie-statique { opacity: 0; }

#toast {
  position: fixed; top: calc(var(--haut) + 12px); left: 50%; transform: translateX(-50%); z-index: 1050;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre);
  font: 500 13px var(--police-mono); color: var(--texte);
}

.sans-js {
  position: fixed; inset: var(--haut) 16px auto; z-index: 950; margin: 40px auto; max-width: 560px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre);
}

/* Mouvement réduit : aucune transition ni animation CSS. `transition: none` et non une durée minuscule :
   avec transition-property à « all », visibility serait elle-même animée et bloquerait les focus(). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-anim="reduites"] *, html[data-anim="reduites"] *::before, html[data-anim="reduites"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}