/* GLiTCH Museum — jetons de design.
   Trois voix typographiques, comme dans un vrai musée :
   - l'inscription (Bodoni Moda) : la grandeur, les titres d'œuvres, le nom de l'institution ;
   - la signalétique (Archivo) : l'interface, les panneaux, le texte courant ;
   - l'administration (IBM Plex Mono) : billets, cartels, main courante, constats.
   Le décalage GLiTCH est dans l'écart entre les deux premières et la troisième. */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* Repli d'Archivo en attendant son chargement : Arial ramené à la chasse d'Archivo étroit, pour que le
   bandeau et l'en-tête ne changent pas de hauteur à l'arrivée de la police. Rien n'est téléchargé. */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 82%; }

:root {
  /* Matières du bâtiment */
  --plaster: #e9e6df;        /* enduit des couloirs, fond du site */
  --plaster-2: #dcd8cf;      /* enduit dans l'ombre, filets */
  --paper: #f7f5ef;          /* papier des cartels et billets */
  --ink: #1b1a18;            /* encre */
  --ink-2: #57544e;          /* encre secondaire */
  --ink-3: #85817a;          /* mentions */
  --rule: #c9c4ba;
  --night: #121110;          /* fond du bandeau, de la Salle F */

  /* Couleurs de fonction : une couleur = un rôle */
  --bordeaux: #6d1f2a;       /* cordon, actions principales */
  --bordeaux-2: #8a2a38;
  --brass: #b08d57;          /* potelets, filets dorés */
  --exit: #0e7a45;           /* signalétique de sortie uniquement */
  --notice: #f2d24b;         /* avis au public uniquement */
  --hazard: #e0b13a;         /* chantier (prochaine version) : bandes de signalisation */
  --stamp: #c0392b;          /* tampons administratifs uniquement */

  /* Sous-titrage (convention télévisuelle française) */
  --sub-voice: #6fe3ea;      /* voix hors champ : la Conservation */
  --sub-guard: #ffffff;      /* Didier */
  --sub-sfx: #ff5b4a;        /* bruitages */

  /* L'objet de la salle : le « i » du logo prend sa couleur */
  --obj: var(--bordeaux);

  /* Typographie */
  --f-inscription: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-sign: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --f-admin: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.33rem + 0.8vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --step-5: clamp(3.2rem, 2rem + 6vw, 8rem);

  /* Espacements */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 7rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --wrap: 1240px;
  --measure: 62ch;

  --radius: 2px;
  --shadow-card: 0 1px 0 rgba(27, 26, 24, 0.05), 0 18px 34px -24px rgba(27, 26, 24, 0.55);
  --ease-camera: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}