/*
 * CIBLE DE COMPATIBILITÉ : CHROMIUM 69
 * ====================================
 * Le matériel est un BrightSign XD1035. Le moteur HTML de ces players dépend
 * du firmware installé, et l'écart est considérable :
 *
 *     firmware 8.0.x            Chromium 65
 *     firmware 8.1.x à 8.4.x    Chromium 69
 *     firmware 8.5.x et 9.0.x   Chromium 87
 *     firmware 9.0.145.1 et +   Chromium 87, montable en 110 ou 120
 *
 * Tant que le firmware du player n'est pas connu, tout le CSS vise le plancher
 * Chromium 69. Ce n'est pas de la prudence gratuite : une propriété non
 * reconnue est ignorée EN SILENCE, sans message et sans erreur. La borne
 * affiche alors un écran vide, et le défaut passe pour une panne matérielle.
 *
 * INTERDITS TANT QUE LE FIRMWARE N'EST PAS CONFIRMÉ
 *   inset              Chrome 87   écrire les quatre côtés séparément
 *   gap en flex        Chrome 84   poser des marges sur les enfants
 *   clamp() min() max() Chrome 79  déclarer une valeur simple AVANT la fluide
 *   aspect-ratio       Chrome 88   toujours doubler d'un bloc @supports not
 *   :focus-visible     Chrome 86   :focus suffit sur une borne tactile
 *   :is() :where()     Chrome 88   écrire les sélecteurs en entier
 *   position: sticky   Chrome 91 sur certains moteurs, à éviter
 *
 * La technique du repli en cascade est la règle : on déclare d'abord la
 * valeur comprise partout, puis la moderne. Un moteur ancien ignore la
 * seconde, un moteur récent la préfère. Rien n'est perdu des deux côtés.
 *
 * Socle commun aux prototypes ARI Musée Players.
 *
 * Parti pris : une borne en libre accès dans un musée n'est pas un site web.
 * Le visiteur est debout, il regarde de loin, il touche sans lire de mode
 * d'emploi et il ne reviendra jamais. D'ou les trois règles qui gouvernent
 * tout ce fichier :
 *   1. Le contenu du client occupe l'écran, l'interface se fait oublier.
 *   2. Aucune cible tactile en dessous de 72 px : une dalle de borne est
 *      imprécise et souvent sale, un bouton de 44 px se rate.
 *   3. Une seule ambiance, un seul accent, un seul rayon de coin. Une borne
 *      qui change de style d'un écran à l'autre passe pour un bug.
 *
 * Contrainte technique qui explique les choix de police : la borne peut etre
 * hors ligne. Aucune police distante n'est chargee, on reste sur la pile
 * systeme. C'est aussi ce qui garantit un affichage instantane.
 */

/*
 * Aucune couleur ici : l'identite visuelle vit dans charte-generations-cinema.css,
 * charge AVANT ce fichier. Ce socle ne connait que des roles abstraits, ce qui
 * permet de le reprendre tel quel sur une autre borne et un autre client.
 */

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* une borne ne défile jamais */
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * Verrous tactiles côté CSS. Le pendant JavaScript est dans verrous-kiosque.js.
 * touch-action: none coupe le défilement et le zoom du navigateur, c'est ce qui
 * rend le glissement du carrousel net au lieu de se battre avec la page.
 */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

img,
video {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;             /* le geste appartient au conteneur, pas au media */
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  min-width: var(--cible-minimale);
  min-height: var(--cible-minimale);
  border-radius: var(--rayon);
  transition: transform 140ms var(--courbe), background-color 140ms var(--courbe);
}

/* Retour tactile immediat : sans lui, le visiteur appuie deux fois. */
button:active {
  transform: scale(0.96);
}

/* :focus et non :focus-visible, qui date de Chrome 86. Sur une borne tactile
   sans clavier la nuance entre les deux n'a aucun effet visible, alors que la
   pseudo-classe recente serait purement et simplement ignoree par le moteur
   HTML des players les plus anciens. */
button:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.plein-ecran {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.invisible {
  display: none !important;
}

/*
 * Les animations ne servent qu'à deux choses ici : montrer qu'un glissement a
 * été pris en compte, et relier l'image touchée à la vidéo qui s'ouvre. Toute
 * autre animation serait du bruit sur une borne.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}