/* =============================================================================
   XP WEB — le socle (14/10/2026). Ce qui vaut pour tous les modèles : la
   traversée de l'écran et le mot de la prise. Servi depuis public/ et lié
   par le gabarit racine SEULEMENT quand une opération est en cours ou
   commence dans les deux jours : hors des fêtes, pas un octet — et ce
   fichier n'entre jamais dans le compteur du garde-fou du poids (§8), qui
   additionne les paquets de /_next/static/chunks/.

   Les règles ne visent que des ATTRIBUTS (data-…) : les classes des modules
   CSS sont hachées, ce fichier doit vivre sans elles. Le décor, le coin et
   Barbotte de la une sont cachés par la feuille de la scène elle-même ; les
   modèles (cab.css, halloween.css…) les montrent sous `html[data-xp="…"]`.
   ============================================================================= */

/* ---- La traversée ----------------------------------------------------------
   Un élément fixe, par-dessus la page, sous les bandeaux (39), le lecteur
   (40) et les fenêtres : il ne recouvre jamais une commande. En « droite »
   il part de la gauche ; en « gauche » il part de la droite. */
[data-bfm="xp-traversee"] {
  position: fixed;
  left: 0;
  z-index: 34;
  width: 72px;
  height: 50px;
  pointer-events: none;
  will-change: transform;
  animation: xp-traverse-droite var(--xp-traversee-duree, 4.2s) linear both;
}
[data-bfm="xp-traversee"][data-sens="gauche"] {
  animation-name: xp-traverse-gauche;
}
[data-bfm="xp-traversee"] > * {
  display: block;
  width: 100%;
  height: 100%;
  animation: xp-rebond 0.7s ease-in-out infinite alternate;
}
/* Attrapable : un vrai bouton, qu'on peut viser (44 px au moins). */
[data-bfm="xp-traversee"] > button {
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}
[data-bfm="xp-traversee"] > button:focus-visible {
  outline: 3px solid #FF8756;
  outline-offset: 4px;
  border-radius: 50%;
}
[data-bfm="xp-traversee"] > * > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes xp-traverse-droite {
  from { transform: translateX(-110%) rotate(0deg); }
  to { transform: translateX(calc(100vw + 10%)) rotate(720deg); }
}
@keyframes xp-traverse-gauche {
  from { transform: translateX(calc(100vw + 10%)) rotate(0deg); }
  to { transform: translateX(-110%) rotate(-720deg); }
}
@keyframes xp-rebond {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

/* Le mot de la prise (« 1 sur 3 », « Barbotte débloquée ») : au-dessus du
   lecteur, fixe, retiré de lui-même. */
[data-bfm="xp-prise"] {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mini-player-h, 64px) + var(--nav-h, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 36;
  margin: 0;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #111A3A;
  color: #fff;
  font: 600 14px/1.4 var(--font-body, sans-serif);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
[data-bfm="xp-prise"] a {
  color: #FF8756;
  text-decoration: underline;
}

/* Sans mouvement : les décors restent, rien ne bouge, rien ne traverse. */
@media (prefers-reduced-motion: reduce) {
  [data-bfm="xp-traversee"] {
    display: none;
  }
  [data-xp-decor] *,
  [data-xp-coin] * {
    animation: none !important;
  }
}