/*
 * poste.css — les écrans du poste de contrôle d'accès (§6 M3, §4).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * 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 que chaque variable référencée ici
 * existe — un token mal orthographié ne rend pas une erreur CSS, il rend un
 * écran incolore.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LE VERDICT EST UN APLAT, ET C'EST LA FEUILLE QUI LE DÉCIDE
 * ─────────────────────────────────────────────────────────────────────────────
 * Le liant DOM écrit `data-smr9-verdict="<tonalité>"` sur la scène — la valeur
 * que `poste/verdict.ts` a composée — et **rien d'autre**. Les quatre tonalités
 * tirent ici leur aplat et leur couleur de texte des rôles sémantiques du design
 * system : succès, danger, avertissement, et une surface neutre pour le re-scan
 * ignoré, que RG-M3-03 veut « silencieux ».
 *
 * À un mètre, dans un hall bruyant, c'est la **surface colorée** qui se lit, pas
 * le texte : l'aplat occupe la scène entière.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CIBLES TACTILES ET CORPS DE LECTURE (§4.3)
 * ─────────────────────────────────────────────────────────────────────────────
 * Toute commande porte `min-height: var(--smr9-touch-target)` — la valeur vient
 * de `MIN_TOUCH_TARGET_PX` de `@smr9/ui`, et `tokens-derives.test.ts` la lit sur
 * le token dérivé pour vérifier qu'elle vaut au moins 44 px. Aucun texte ne
 * descend sous `--smr9-font-size-base` : les deux échelons inférieurs ne sont
 * pas du corps de lecture et la feuille ne les emploie nulle part.
 */

/* -------------------------------------------------------------------------- */
/* Blocs communs                                                              */
/* -------------------------------------------------------------------------- */

.bloc {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-3);
  width: var(--smr9-width-full);
  max-width: var(--smr9-width-narrow);
}

.bloc__titre {
  font-family: var(--smr9-font-family-display);
  font-size: var(--smr9-font-size-2xl);
  font-weight: var(--smr9-weight-semibold);
  line-height: var(--smr9-leading-tight);
  letter-spacing: var(--smr9-tracking-tight);
}

.bloc__corps {
  font-size: var(--smr9-font-size-base);
  line-height: var(--smr9-leading-relaxed);
  color: var(--smr9-text-secondary);
}

.bloc__etiquette {
  font-size: var(--smr9-font-size-base);
  font-weight: var(--smr9-weight-medium);
  color: var(--smr9-text-muted);
}

.bloc__valeur {
  font-size: var(--smr9-font-size-lg);
  font-weight: var(--smr9-weight-semibold);
  color: var(--smr9-text);
}

.liste {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-2);
  list-style: none;
  padding: var(--smr9-space-0);
  margin: var(--smr9-space-0);
}

.liste__ligne {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-1);
  padding: var(--smr9-space-3);
  background-color: var(--smr9-surface-raised);
  border: var(--smr9-space-px) solid var(--smr9-border-subtle);
  border-radius: var(--smr9-radius-md);
}

/* -------------------------------------------------------------------------- */
/* Commandes — jamais sous la cible tactile du §4.3                           */
/* -------------------------------------------------------------------------- */

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--smr9-touch-target);
  min-width: var(--smr9-touch-target);
  padding: var(--smr9-space-3) var(--smr9-space-5);
  gap: var(--smr9-space-2);
  font-size: var(--smr9-font-size-base);
  font-weight: var(--smr9-weight-semibold);
  color: var(--smr9-text);
  background-color: var(--smr9-surface-raised);
  border: var(--smr9-space-px) solid var(--smr9-border-control);
  border-radius: var(--smr9-radius-md);
  transition-property: background-color, border-color;
  transition-duration: var(--smr9-duration-fast);
  transition-timing-function: var(--smr9-ease-out);
}

.action--principale {
  color: var(--smr9-on-accent);
  background-color: var(--smr9-accent);
  border-color: var(--smr9-accent-border);
}

.action--principale:active {
  background-color: var(--smr9-accent-active);
}

.action--discrete {
  color: var(--smr9-text-secondary);
  background-color: transparent;
  border-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Champs de saisie                                                           */
/* -------------------------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-1);
}

.champ__label {
  font-size: var(--smr9-font-size-base);
  font-weight: var(--smr9-weight-medium);
  color: var(--smr9-text-secondary);
}

.champ__saisie {
  min-height: var(--smr9-touch-target);
  padding: var(--smr9-space-3);
  /* Jamais moins que le corps de lecture : sous 16 px, iOS zoome au focus et
     le poste sort de son cadre kiosque. */
  font-size: var(--smr9-font-size-base);
  font-family: var(--smr9-font-family-text);
  color: var(--smr9-text);
  background-color: var(--smr9-surface);
  border: var(--smr9-space-px) solid var(--smr9-border-control);
  border-radius: var(--smr9-radius-md);
}

/* -------------------------------------------------------------------------- */
/* Le verdict : quatre tonalités, quatre aplats                               */
/* -------------------------------------------------------------------------- */

.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--smr9-space-4);
  width: var(--smr9-width-full);
  text-align: center;
  color: inherit;
}

.verdict__titre {
  font-family: var(--smr9-font-family-display);
  font-size: var(--smr9-font-size-4xl);
  font-weight: var(--smr9-weight-bold);
  line-height: var(--smr9-leading-tight);
  letter-spacing: var(--smr9-tracking-tighter);
  color: inherit;
}

.verdict__motif {
  font-size: var(--smr9-font-size-2xl);
  font-weight: var(--smr9-weight-semibold);
  color: inherit;
}

.verdict__detail,
.verdict__duree {
  font-size: var(--smr9-font-size-base);
  color: inherit;
}

/*
 * L'annonce de la région `aria-live` est **lue et non vue** : elle répète le
 * verdict et son motif pour un lecteur d'écran, et l'afficher une seconde fois
 * à l'œil encombrerait un écran qui doit se lire à un mètre. `clip-path` plutôt
 * que `display: none`, qui la retirerait aussi de l'arbre d'accessibilité.
 */
[data-smr9-annonce='oui'] {
  position: absolute;
  width: var(--smr9-space-px);
  height: var(--smr9-space-px);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.identite {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-1);
  color: inherit;
}

.identite__nom {
  font-family: var(--smr9-font-family-display);
  font-size: var(--smr9-font-size-3xl);
  font-weight: var(--smr9-weight-semibold);
  color: inherit;
}

.identite__categorie {
  font-size: var(--smr9-font-size-lg);
  color: inherit;
}

/*
 * Les quatre aplats. Ils sont posés sur la **scène**, pas sur le bloc : c'est
 * la surface entière qui porte le verdict.
 */
.poste__scene[data-smr9-verdict='accepte'] {
  background-color: var(--smr9-success-solid);
  color: var(--smr9-on-success);
}

.poste__scene[data-smr9-verdict='refuse'] {
  background-color: var(--smr9-danger-solid);
  color: var(--smr9-on-danger);
}

.poste__scene[data-smr9-verdict='alerte'] {
  background-color: var(--smr9-warning-solid);
  color: var(--smr9-on-warning);
}

/*
 * Le re-scan ignoré (RG-M3-03, DD-391) : une surface **neutre**, ni verte ni
 * ambre. Le confondre avec l'acceptation ferait compter deux fois la même
 * personne au tableau de bord ; le confondre avec l'alerte ferait clignoter un
 * écran d'avertissement dans le dos d'une file de trente personnes pour un agent
 * qui a simplement rescanné.
 */
.poste__scene[data-smr9-verdict='ignore'] {
  background-color: var(--smr9-surface-sunken);
  color: var(--smr9-text-secondary);
}

/* -------------------------------------------------------------------------- */
/* Avis (synchronisation divergente, série manuelle, caméra)                  */
/* -------------------------------------------------------------------------- */

.avis {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-2);
  padding: var(--smr9-space-4);
  background-color: var(--smr9-warning-subtle);
  color: var(--smr9-on-warning-subtle);
  border: var(--smr9-space-px) solid var(--smr9-warning-border);
  border-radius: var(--smr9-radius-lg);
}

.avis__titre {
  font-size: var(--smr9-font-size-lg);
  font-weight: var(--smr9-weight-semibold);
  color: inherit;
}

.avis__corps {
  font-size: var(--smr9-font-size-base);
  line-height: var(--smr9-leading-relaxed);
  color: inherit;
}

/* La bande d'avis du poste : masquée tant qu'il n'y a rien à dire. */
.poste__avis {
  padding: var(--smr9-space-3) var(--smr9-space-4);
}

.poste__avis[data-smr9-avis='non'] {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Le bandeau d'environnement de test — ni un avis, ni un verdict             */
/* -------------------------------------------------------------------------- */

/*
 * Il ne peut pas ressembler à une alerte du produit, et la feuille est
 * l'endroit où cela se décide.
 *
 * `.avis` est ambre (`--smr9-warning-subtle`) et les quatre aplats de verdict
 * occupent la scène : un bandeau qui emprunterait l'un ou l'autre dirait à
 * l'agent qu'il a un problème, ou à la personne en face que son badge vient
 * d'être jugé. Il prend donc la **surface inversée** — la seule tonalité du
 * système que le poste n'emploie nulle part pour dire quelque chose de
 * l'exploitation ou d'un porteur (`.viseur` s'en sert comme fond d'image, pas
 * comme message). Une bande sombre en haut de l'écran ne se confond avec rien,
 * et se lit à un mètre.
 *
 * Il occupe toute la largeur de l'entête (`flex-basis: 100%`, avec le
 * `flex-wrap` posé par `base.css`) : à moitié large, il aurait ressemblé à une
 * étiquette de plus dans une ligne d'étiquettes.
 */
.bandeau-test {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--smr9-space-1);
  padding: var(--smr9-space-2) var(--smr9-space-4);
  background-color: var(--smr9-surface-inverted);
  color: var(--smr9-on-surface-inverted);
  border-radius: var(--smr9-radius-sm);
  text-align: center;
}

.bandeau-test__titre {
  font-family: var(--smr9-font-family-display);
  font-size: var(--smr9-font-size-base);
  font-weight: var(--smr9-weight-bold);
  line-height: var(--smr9-leading-tight);
  letter-spacing: var(--smr9-tracking-wider);
  text-transform: uppercase;
  color: inherit;
}

.bandeau-test__corps {
  font-size: var(--smr9-font-size-base);
  line-height: var(--smr9-leading-snug);
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/* Viseur de scan                                                             */
/* -------------------------------------------------------------------------- */

.viseur {
  /* Couche de composition propre : sur iPhone, un cadre arrondi qui rogne une vidéo peut la rendre invisible. */
  isolation: isolate;
  transform: translateZ(0);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--smr9-width-full);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--smr9-surface-inverted);
  border: var(--smr9-space-0-5) solid var(--smr9-accent-border);
  border-radius: var(--smr9-radius-xl);
}

/* Rempli en position absolue : sur iPhone, un pourcentage de hauteur dans une grille à ratio fixe peut valoir 0 (vidéo invisible). */
.viseur video {
  position: absolute;
  inset: 0;
  width: var(--smr9-width-full);
  height: var(--smr9-width-full);
  object-fit: cover;
}

/* La copie de la trame, peinte par-dessus la vidéo : visible même quand la vidéo, elle, ne se peint pas. */
.viseur__image {
  position: absolute;
  inset: 0;
  width: var(--smr9-width-full);
  height: var(--smr9-width-full);
  object-fit: cover;
  pointer-events: none;
}

/* Détail technique, seulement quand l'image n'est pas arrivée : une capture d'écran le transmet. */
[data-smr9-etat-camera][data-diag]::after {
  content: ' (' attr(data-diag) ')';
  font-size: var(--smr9-font-size-base);
  opacity: 0.85;
}

/* Témoin de l'image : seulement quand la caméra est accordée, et un seul des deux textes à la fois. */
[data-smr9-etat-camera],
[data-smr9-etat-camera] [data-etat] {
  display: none;
}

.viseur[data-smr9-camera='accordee'] ~ [data-smr9-etat-camera] {
  display: block;
}

.viseur[data-image='oui'] ~ [data-smr9-etat-camera] [data-etat='oui'],
.viseur:not([data-image='oui']) ~ [data-smr9-etat-camera] [data-etat='attente'] {
  display: inline;
}

/* Bouton de secours : seulement quand l'image de la caméra n'est pas arrivée. */
.viseur [data-smr9-relance] {
  display: none;
  position: absolute;
  inset-inline: var(--smr9-space-4);
  bottom: var(--smr9-space-4);
  z-index: 1;
}

.viseur[data-image='absente'] [data-smr9-relance] {
  display: block;
}

/* Sans caméra, le viseur n'a rien à montrer : il cède la place au reste. */
.viseur[data-smr9-camera='absente'],
.viseur[data-smr9-camera='refusee'] {
  display: none;
}

.barre {
  display: flex;
  flex-direction: column;
  gap: var(--smr9-space-1);
  text-align: right;
}