/* ==========================================================================
   APP'IANARO — LE FOND COMMUN
   --------------------------------------------------------------------------
   Cette feuille est la source unique du fond de toute la plateforme. Les
   pages qui chargent theme.css la reçoivent automatiquement ; les modules
   autonomes la chargent directement.

   Le fond est uni. Le quadrillage « cahier » a été retiré le 24/10/2026 et
   ne doit pas revenir : ni lignes, ni carreaux, ni calque décoratif derrière
   la page (tests/interface-commune.test.mjs y veille).
   ========================================================================== */

:root {
  --cahier-fond: #fbfaf6;
}

:root[data-theme="dark"],
:root[data-theme="sombre"],
:root.dark {
  --cahier-fond: #07111f;
}

html { background: var(--cahier-fond) !important; }

body {
  background-color: transparent !important;
  background-image: none !important;
}

@media print {
  html, body { background: #fff !important; }
}

/* ==========================================================================
   APP'IANARO — NAVIGATION COMMUNE DES JEUX (JEUX / MODULES / ACCUEIL)
   --------------------------------------------------------------------------
   Permet à tout joueur de revenir à tout moment vers :
   1. L'espace Jeux (/jeux/)
   2. Le catalogue des Modules (/portail/formations.html)
   3. La page principale d'App'Ianaro (/portail/)
   Partagée entre tous les jeux présents et futurs.
   ========================================================================== */

.barre-jeu-sorties {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: .45rem;
  vertical-align: middle;
}

.barre-jeu-lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  padding: .25rem .55rem;
  border: 1px solid rgba(140, 140, 160, .28);
  border-radius: 11px;
  color: inherit;
  background: rgba(255, 255, 255, .65);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.2;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}

:root[data-theme="dark"] .barre-jeu-lien,
:root[data-theme="sombre"] .barre-jeu-lien,
:root.dark .barre-jeu-lien {
  background: rgba(18, 30, 48, .75);
  border-color: rgba(90, 120, 160, .32);
  color: #f1f5f9;
}

.barre-jeu-lien:hover {
  border-color: #1c5d4a;
  color: #1c5d4a;
  background: rgba(232, 245, 238, .9);
}

:root[data-theme="dark"] .barre-jeu-lien:hover,
:root[data-theme="sombre"] .barre-jeu-lien:hover,
:root.dark .barre-jeu-lien:hover {
  border-color: #6ee7b7;
  color: #6ee7b7;
  background: rgba(14, 50, 37, .9);
}

.barre-jeu-lien:active {
  transform: scale(.96);
}

.barre-jeu-logo {
  width: 22px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.barre-jeu-label {
  font-weight: 750;
}

.barre-jeu-flottante {
  position: sticky;
  top: .5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: .4rem .7rem;
  margin-bottom: .65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(140, 140, 160, .24);
}

:root[data-theme="dark"] .barre-jeu-flottante,
:root[data-theme="sombre"] .barre-jeu-flottante,
:root.dark .barre-jeu-flottante {
  background: rgba(14, 24, 38, .85);
  border-color: rgba(90, 120, 160, .3);
}

/* Quand le jeu est inséré dans l'hôte /jeux/, l'hôte fournit déjà la barre de navigation
   dans sa scène (.scene-tete). On masque la barre d'en-tête dupliquée dans l'iframe. */
html.dans-iframe .topbar .barre-jeu-sorties,
html.dans-iframe .entete .barre-jeu-sorties,
html.dans-iframe .topbar-gauche .barre-jeu-sorties,
html.dans-iframe .session-header .barre-jeu-sorties,
html.dans-iframe header > .barre-jeu-sorties,
html.dans-iframe .barre-jeu-flottante {
  display: none !important;
}

@media (max-width: 899px) {
  .barre-jeu-portail .barre-jeu-label {
    display: none;
  }
}

@media (max-width: 520px) {
  .barre-jeu-sorties {
    gap: .2rem;
  }
  .barre-jeu-lien {
    min-height: 44px;
    padding: .2rem .42rem;
    font-size: .7rem;
  }
}

@media (max-width: 420px) {
  .barre-jeu-modules,
  .barre-jeu-jeux {
    font-size: .67rem;
    padding-inline: .35rem;
  }
}