/*
 * base.css — la coquille du poste de contrôle d'accès.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * AUCUNE VALEUR N'EST ÉCRITE ICI
 * ─────────────────────────────────────────────────────────────────────────────
 * Pas une couleur, pas un rayon, pas une durée, pas un corps de texte : tout
 * passe par les variables de `styles/tokens.css`, engendré à chaque
 * construction depuis `packages/ui` (§4). `tokens-derives.test.ts` fait rougir
 * la suite au premier littéral, et vérifie en outre que **chaque** variable
 * référencée ici est bien définie par la feuille engendrée : un token mal
 * orthographié ne peut pas se contenter de rendre du transparent en silence.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CE QUE LA MISE EN PAGE DOIT AU §10 ET AU §6 M3.1
 * ─────────────────────────────────────────────────────────────────────────────
 * 1 500 scans à l'heure sur six postes : l'écran est tenu à bout de bras, en
 * portrait, souvent d'une seule main, l'autre tenant le badge. D'où une grille
 * en trois bandes fixes — bandeau, scène, pied —, une scène qui prend tout ce
 * qui reste, et des cibles jamais inférieures à `--smr9-touch-target` (44 px,
 * §4.3). Le verdict occupe la scène **entière** : à un mètre, c'est la surface
 * colorée qui se lit, pas le texte.
 *
 * Aucune requête de média de largeur : le kiosque n'a qu'une mise en page. Les
 * seules requêtes présentes portent sur les préférences de l'utilisateur —
 * mouvement réduit (§4.2) et contraste forcé —, qui ne s'expriment pas en
 * longueurs et n'introduisent donc aucun littéral.
 */

/* -------------------------------------------------------------------------- */
/* Remise à plat                                                              */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--smr9-background);
  color: var(--smr9-text);
  font-family: var(--smr9-font-family-text);
  font-size: var(--smr9-font-size-base);
  line-height: var(--smr9-leading-normal);
  font-weight: var(--smr9-weight-regular);
  -webkit-font-smoothing: antialiased;
  /* Le poste ne se navigue pas : ni sélection accidentelle, ni élastique. */
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

:where(h1, h2, h3, p, figure) {
  margin: 0;
}

:where(button) {
  font: inherit;
  color: inherit;
}

:where(:focus-visible) {
  outline: var(--smr9-space-0-5) solid var(--smr9-ring);
  outline-offset: var(--smr9-space-0-5);
  border-radius: var(--smr9-radius-xs);
}

/* -------------------------------------------------------------------------- */
/* Grille du poste                                                            */
/* -------------------------------------------------------------------------- */

.poste {
  display: grid;
  /* Quatre bandes : bandeau, bande d'alerte, scène, pied. La bande d'alerte
     s'efface quand il n'y a rien à dire (`poste.css`), et la scène prend alors
     tout ce que le bandeau et le pied lui laissent. */
  grid-template-rows: auto auto 1fr auto;
  min-height: 100dvh;
  /* Encoches et barre système du mode plein écran (§3.1, mode kiosque). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.poste__entete,
.poste__pied {
  display: flex;
  align-items: center;
  gap: var(--smr9-space-3);
  min-height: var(--smr9-touch-target);
  padding: var(--smr9-space-3) var(--smr9-space-4);
  background-color: var(--smr9-surface);
  color: var(--smr9-text-secondary);
  font-size: var(--smr9-font-size-base);
}

.poste__entete {
  border-bottom: var(--smr9-space-px) solid var(--smr9-border-subtle);
  /* Le bandeau d'environnement de test se pose sur sa propre ligne, au-dessus
     de l'identité et de la liaison (`poste.css`, `.bandeau-test`). Sans le
     retour à la ligne, il se serait comprimé entre deux blocs au lieu de
     barrer l'écran. Hors recette il n'y a rien à envelopper, et la règle ne
     change donc rien à la mise en page servie le jour du salon. */
  flex-wrap: wrap;
}

.poste__pied {
  border-top: var(--smr9-space-px) solid var(--smr9-border-subtle);
  justify-content: space-between;
}

.poste__scene {
  display: grid;
  place-items: center;
  padding: var(--smr9-space-4);
  /* La scène porte le verdict : elle doit pouvoir devenir un aplat entier. */
  min-height: 0;
  transition-property: background-color, color;
  transition-duration: var(--smr9-duration-fast);
  transition-timing-function: var(--smr9-ease-out);
}

/* -------------------------------------------------------------------------- */
/* État de la liaison réseau (§3.3 : hors ligne est un état normal)           */
/* -------------------------------------------------------------------------- */

/*
 * Le poste fonctionne hors ligne par conception : l'absence de réseau n'est ni
 * une erreur ni une alerte, c'est un régime de marche. Elle se signale donc au
 * bandeau, en information, et jamais en rouge — le rouge est réservé au refus
 * d'un badge.
 */
.poste[data-smr9-reseau='hors-ligne'] .poste__entete {
  background-color: var(--smr9-info-subtle);
  color: var(--smr9-on-info-subtle);
  border-bottom-color: var(--smr9-info-border);
}

.poste[data-smr9-reseau='inconnu'] .poste__entete {
  background-color: var(--smr9-surface-sunken);
}

/* -------------------------------------------------------------------------- */
/* Amorçage et incompatibilité                                                */
/* -------------------------------------------------------------------------- */

/*
 * Tant que `main.js` n'a pas pris la main, la scène affiche un squelette et
 * non une page blanche : un poste qui semble éteint est un poste qu'on
 * redémarre pendant la file d'attente.
 */
html[data-smr9-etat='amorcage'] .poste__scene {
  background-image: linear-gradient(
    to right,
    var(--smr9-skeleton),
    var(--smr9-skeleton-highlight),
    var(--smr9-skeleton)
  );
}

.poste__incompatible {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--smr9-space-6);
  background-color: var(--smr9-warning-subtle);
  color: var(--smr9-on-warning-subtle);
  font-size: var(--smr9-font-size-lg);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Préférences de l'utilisateur                                               */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--smr9-duration-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--smr9-duration-instant) !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  /*
   * En couleurs forcées, le système impose sa palette : le verdict ne peut
   * plus reposer sur l'aplat seul. La bordure devient porteuse de sens.
   */
  .poste__scene {
    border: var(--smr9-space-0-5) solid CanvasText;
  }
}