/* Habillage des pages qui accueillent un bloc Celestory. L'hôte doit se faire
   oublier : le bloc occupe tout, la page ne fournit que l'attente et la
   sortie de secours. Jetons NSL en dur, car cette feuille est chargée avant
   le bloc et ne doit dépendre de rien. */

html, body {
  margin: 0;
  height: 100%;
  background: #04070f;
  color: #e8f2ff;
  /* Mêmes polices que les blocs : sans elles, le sas et la page des démos
     tombaient sur la police système au milieu d'un site en Orbitron. */
  font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, .sas__t, .fiche__t {
  font-family: 'Orbitron', system-ui, sans-serif;
  letter-spacing: .01em;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- écran d'attente ---------- */
#attente {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #04070f;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}
#attente.parti {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
#attente .etat {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5f7897;
}
.halo {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(95, 212, 255, .22);
  border-top-color: #5fd4ff;
  border-radius: 50%;
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg) } }

#secours {
  display: none;
  max-width: 32rem;
  padding: 0 1.4rem;
  line-height: 1.65;
  color: #93aecb;
  font-size: .95rem;
}
#secours a { color: #5fd4ff }

/* ---------- retour vers la base ----------
   Posé par-dessus le bloc, en bas à droite : en haut il recouvrirait la barre
   du bloc, qui y tient déjà sa marque, sa navigation et sa connexion. */
.retour-base {
  position: fixed;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e8f2ff;
  background: rgba(8, 16, 32, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .3);
  transition: box-shadow .2s, translate .2s ease;
}
.retour-base:hover {
  box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .7);
  translate: 0 -2px;
}
.retour-base svg { width: 13px; height: 13px; flex: none }

@media (prefers-reduced-motion: reduce) {
  .halo { animation: none }
  .retour-base { transition: none }
  .retour-base:hover { translate: none }
}

/* ---------- barre des démonstrations du LMS ----------
   Posée en bas, hors du bloc : elle dit ce que la démo est, permet de
   passer d'un rôle à l'autre et de basculer l'apparence. Le bloc, lui,
   occupe tout le reste et ignore cette barre. */
.demo-barre {
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .5rem clamp(.8rem, 2vw, 1.4rem);
  font-size: .78rem;
  color: #93aecb;
  background: rgba(4, 7, 15, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 rgba(95, 212, 255, .22);
}
.demo-barre__t {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4c45a;
  flex: none;
}
.demo-barre__c { flex: 1 1 12rem; min-width: 0 }
.demo-barre a,
.demo-barre button {
  flex: none;
  font: inherit;
  font-weight: 700;
  padding: .34rem .7rem;
  color: #e8f2ff;
  text-decoration: none;
  background: rgba(20, 40, 75, .7);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .28);
  cursor: pointer;
  transition: box-shadow .2s;
}
.demo-barre a:hover,
.demo-barre button:hover { box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .7) }
.demo-barre a[aria-current="page"] {
  background: linear-gradient(120deg, #5fd4ff, #2b8fff);
  color: #04070f;
  box-shadow: none;
}
/* Le bloc ne doit pas passer sous la barre. */
#scene.avec-barre { height: calc(100% - 2.6rem) }
@media (max-width: 620px) {
  .demo-barre { font-size: .74rem; gap: .5rem }
  .demo-barre__c { flex-basis: 100% ; order: 3 }
  #scene.avec-barre { height: calc(100% - 4.6rem) }
}

/* ---------- sélecteur de rôle ----------
   Ouvert par l'hôte quand un bloc émet « demande_compte ». Le bloc ne sait
   pas ce que « se connecter » veut dire sur ce site : c'est l'hôte qui le
   décide, et ici cela veut dire choisir un espace de démonstration. */
.sas {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  background: rgba(4, 7, 15, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sas.is-on { opacity: 1; pointer-events: auto }
.sas__in {
  width: min(46rem, 100%);
  padding: clamp(1.3rem, 4vw, 2rem);
  background: linear-gradient(160deg, rgba(20, 40, 75, .96), rgba(8, 16, 32, .96));
  box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .34), 0 30px 90px -22px rgba(0, 0, 0, .8);
  translate: 0 14px;
  transition: translate .34s cubic-bezier(.22, 1, .36, 1);
}
.sas.is-on .sas__in { translate: 0 0 }
.sas__e {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5fd4ff;
  margin: 0 0 .5rem;
}
.sas__t { font-size: clamp(1.25rem, 3.4vw, 1.7rem); margin: 0 0 .5rem; color: #e8f2ff }
.sas__s { margin: 0 0 1.4rem; color: #93aecb; line-height: 1.6; font-size: .95rem }
.sas__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem }
.sas__o {
  display: block;
  text-align: left;
  padding: 1rem 1.1rem;
  font: inherit;
  color: #e8f2ff;
  text-decoration: none;
  background: rgba(8, 16, 32, .7);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .24);
  cursor: pointer;
  transition: box-shadow .2s, translate .2s ease;
}
.sas__o:hover { box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .7); translate: 0 -2px }
.sas__o--fort { box-shadow: inset 0 0 0 1px rgba(244, 196, 90, .5) }
.sas__o--fort:hover { box-shadow: inset 0 0 0 1px rgba(244, 196, 90, .9) }
.sas__ot { display: block; font-weight: 700; margin-bottom: .3rem }
.sas__od { display: block; font-size: .86rem; color: #93aecb; line-height: 1.5 }
.sas__p { margin: 1.2rem 0 0; font-size: .82rem; color: #889bb4; line-height: 1.6 }
/* Sans cette règle, le lien tombait sur le bleu par défaut du navigateur,
   illisible sur ce fond. */
.sas__p a { color: #5fd4ff }
.sas__x {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  color: #5fd4ff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .sas, .sas__in, .sas__o { transition: none }
  .sas__in { translate: none }
}