/* GLiTCH Museum — base commune à toutes les pages. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--f-sign);
  font-size: var(--step-0);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--bordeaux); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
main:focus { outline: none; }
[hidden] { display: none !important; }

/* Même bord que l'en-tête et le pied de page : contenu de var(--wrap), gouttières en plus. */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Voix typographiques */
.inscription { font-family: var(--f-inscription); font-weight: 500; letter-spacing: 0.01em; }
.caps { text-transform: uppercase; letter-spacing: 0.16em; }
.sign { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.admin { font-family: var(--f-admin); font-size: 0.92em; letter-spacing: 0; }
.eyebrow { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2); }
.obj-i { color: var(--obj); transition: color 0.8s ease; }
.wm-caps { text-transform: uppercase; }
/* Le logo (logo() dans layout.js) : « GLiTCH » au-dessus de « MUSEUM », à la même largeur ; un filet ; « .org » à la
   verticale, lu de bas en haut. Le corps suit la taille du parent. */
.logo { display: inline-block; vertical-align: middle; font-family: var(--f-inscription); font-weight: 500; font-style: normal; line-height: 0.92; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.logo__mark { display: inline-flex; align-items: stretch; }
.logo__words { display: inline-grid; row-gap: 0.08em; }
.logo__top { display: flex; justify-content: space-between; }
.logo__bottom { letter-spacing: 0.1em; margin-right: -0.1em; }
.logo__tld {
  display: flex; align-items: center; justify-content: center;
  margin-left: 0.3em; padding-right: 0.28em; border-right: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-admin); font-weight: 500; font-size: 0.6em; line-height: 1; letter-spacing: 0.1em;
}

/* Accès rapide au contenu */
.skip { position: absolute; left: var(--s-3); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-3); }
.skip:focus { top: var(--s-3); }

/* Bandeau d'horaires : pastille d'état, horloge (heure du visiteur, à la seconde), un ou deux messages.
   Écran d'information d'un vrai musée : pas d'animation, seule l'horloge avance. Script : src/templates/ribbon-script.js. */
.ribbon { background: var(--night); color: #e9e6df; font-family: var(--f-sign); font-stretch: 85%; font-size: var(--step--1); letter-spacing: 0.03em; line-height: 1.45; padding: 0.45rem var(--gutter); padding-top: calc(0.45rem + env(safe-area-inset-top, 0px)); }
.ribbon__line { max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.85rem; row-gap: 0.1rem; text-align: center; }
.ribbon__status { display: inline-flex; align-items: center; gap: 0.45em; font-stretch: 78%; font-weight: 700; font-size: 0.92em; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.ribbon__status::before { content: ''; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0.18em color-mix(in srgb, currentColor 22%, transparent); }
.ribbon__status[data-state='open'] { color: #8fe3a8; }
.ribbon__status[data-state='closing'] { color: #f4c95d; }
.ribbon__status[data-state='closed'] { color: #ff9a8b; }
.ribbon__clock { white-space: nowrap; color: #bdb7ab; }
.ribbon__time { font-family: var(--f-admin); font-size: 1.02em; font-variant-numeric: tabular-nums; letter-spacing: 0; color: #fff; }
.ribbon__msg--2 { color: #b9b3a7; }
/* Filets entre les éléments, sur une même ligne (bureau) */
.ribbon__msg::before { content: ''; display: inline-block; width: 1px; height: 0.85em; margin-right: 0.85rem; vertical-align: -0.08em; background: rgba(233, 230, 223, 0.28); }
.ribbon__round { color: inherit; text-decoration: none; }
.ribbon__round:hover { text-decoration: underline; }
.ribbon__round-label { font-family: var(--f-admin); font-size: 0.95em; letter-spacing: 0; color: #f4c95d; margin-right: 0.2em; }
.ribbon :focus-visible { outline-color: #e9e6df; }
/* Sans JavaScript : ni pastille ni horloge, seulement les horaires de la semaine. */
.ribbon:not([data-live]) :is(.ribbon__status, .ribbon__clock) { display: none; }
.ribbon:not([data-live]) .ribbon__msg::before { display: none; }
@media (max-width: 699px) {
  .ribbon__line { column-gap: 0.6rem; }
  .ribbon__now, .ribbon__line .ribbon__msg--2, .ribbon__msg::before { display: none; }
  /* Sur téléphone, le message passe sous l'horloge ; deux lignes au plus (la main courante complète est à un clic). */
  .ribbon__msg { flex-basis: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* En-tête */
.masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
.masthead__brand { display: flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 1; }
.masthead__name { display: block; font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem); }
.masthead__nav ul { list-style: none; display: flex; justify-content: center; gap: clamp(var(--s-3), 2vw, var(--s-5)); }
.masthead__nav a { font-family: var(--f-sign); font-stretch: 85%; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding-block: 0.4rem; border-bottom: 1.5px solid transparent; }
.masthead__nav a:hover, .masthead__nav a[aria-current] { border-bottom-color: currentColor; }
.masthead__tools { display: flex; align-items: center; gap: var(--s-2); }
.lang, .sound-toggle, .menu-button {
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid currentColor; border-radius: var(--radius); padding: 0.5rem 0.7rem; min-height: 44px; min-width: 44px; justify-content: center; text-decoration: none; display: inline-flex; align-items: center;
}
.menu-button { display: none; }
/* Bouton de son : l'état est dans le libellé et dans data-state (pas d'aria-pressed). */
.sound-toggle[data-state='on'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Pendant la visite : bouton clair sur fond sombre (le pictogramme des écrans étroits est dans visit.css). */
.page-visit[data-tone='dark'] .sound-toggle[data-state='on'] { background: #f1ece2; color: var(--ink); border-color: #f1ece2; }
@media (max-width: 860px) {
  /* Les outils restent toujours dans l'écran ; la marque prend la place restante et passe à la ligne s'il le faut. */
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .masthead__brand { min-width: 0; }
  .masthead__nav { display: none; }
  .menu-button { display: inline-flex; }
  .sound-toggle { display: none; }
  .masthead--visit .sound-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .ribbon { font-size: 0.72rem; padding-block: 0.35rem; padding-top: calc(0.35rem + env(safe-area-inset-top, 0px)); }
  .masthead { gap: var(--s-2); padding-block: var(--s-2); }
  .masthead__name { font-size: 1.1rem; }
  .masthead__tools { gap: 0.4rem; }
  .menu-button { padding-inline: 0.55rem; letter-spacing: 0.06em; }
}

/* Plan du musée (menu) */
.plan { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--plaster); color: var(--ink); }
.plan::backdrop { background: rgba(18, 17, 16, 0.6); }
.plan__inner { max-width: 640px; margin-inline: auto; padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s-6); }
.plan__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.plan__title { font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.04em; }
.plan__close { background: none; border: 1px solid currentColor; border-radius: var(--radius); padding: 0.5rem 0.8rem; font-family: var(--f-sign); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; min-height: 44px; }
.plan__list { list-style: none; }
.plan__list a { display: flex; align-items: baseline; gap: var(--s-3); padding: 0.85rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--f-inscription); font-size: var(--step-1); }
.plan__n { font-family: var(--f-admin); font-size: 0.8rem; color: var(--ink-2); width: 1.5em; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 48px; padding: 0.8rem 1.3rem; border-radius: var(--radius); border: 1.5px solid var(--bordeaux); background: var(--bordeaux); color: #f7f1ea; text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.btn:hover { background: var(--bordeaux-2); border-color: var(--bordeaux-2); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: #fff; border-color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Panneau de sortie (vert de sécurité) */
.exit-sign { display: inline-flex; align-items: center; gap: 0.6em; background: var(--exit); color: #fff; font-family: var(--f-sign); font-stretch: 80%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.8rem; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* Tampon administratif */
.stamp { display: inline-block; font-family: var(--f-sign); font-stretch: 80%; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stamp); border: 3px solid currentColor; border-radius: 4px; padding: 0.2em 0.5em; transform: rotate(-6deg); opacity: 0.85; mix-blend-mode: multiply; }

/* Avis au public (jaune, scotché de travers) */
.avis { position: relative; background: var(--notice); color: var(--ink); padding: var(--s-4) var(--s-4) var(--s-3); max-width: 30rem; transform: rotate(-1.2deg); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
.avis::before, .avis::after { content: ''; position: absolute; top: -12px; width: 78px; height: 24px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.avis::before { left: 18px; transform: rotate(-4deg); }
.avis::after { right: 18px; transform: rotate(5deg); }
.avis__title { font-family: var(--f-sign); font-stretch: 75%; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step-1); margin-bottom: var(--s-2); }
.avis__sign { font-family: var(--f-admin); font-size: 0.85rem; margin-top: var(--s-3); text-align: right; }

/* Cartel (papier) */
.cartel { background: var(--paper); color: var(--ink); padding: var(--s-4); box-shadow: var(--shadow-card); }
.cartel__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: var(--step-2); line-height: 1.1; }
.cartel__meta { font-family: var(--f-admin); font-size: 0.8rem; color: var(--ink-2); }

/* Pied de page */
.site-footer { background: var(--night); color: #d9d5cc; margin-top: var(--s-8); padding: var(--s-7) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
.site-footer a { color: #f1ede5; }
.site-footer :focus-visible { outline-color: #f1ede5; }
.site-footer__grid { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5); }
/* La colonne de la marque, à la largeur du logo : le logo, le slogan dessous, calé sur sa largeur exacte, puis le récit
   du musée en un paragraphe, entre guillemets et en italique (une citation). Le slogan et le récit n'élargissent pas la
   colonne (container-type) : ils prennent la largeur du logo, et leur corps la suit (cqi). Le logo garde la même
   taille partout, pour que le slogan reste lisible sur téléphone. */
.site-footer__brand { display: grid; width: max-content; max-width: 100%; font-family: var(--f-inscription); }
.site-footer__name { font-size: 2.6rem; color: #f7f3ea; --obj: #c9a86a; }
.site-footer__tagline, .site-footer__quote { container-type: inline-size; }
/* Corps réglé sur la phrase française, la plus longue ; justifiée, l'anglaise s'étire d'un rien entre les mots. */
.site-footer__tagline { margin-top: 0.6rem; }
.site-footer__tagline span { display: block; font-weight: 500; font-size: 5.55cqi; line-height: 1.2; white-space: nowrap; text-align: justify; text-align-last: justify; color: #e9e4d8; }
/* Quatre lignes dans les deux langues. */
.site-footer__quote { margin-top: var(--s-4); }
.site-footer__quote p { font-style: italic; font-size: 6.3cqi; line-height: 1.45; text-wrap: balance; color: #bdb7ab; }
.site-footer__h { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: #9d978b; margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; display: grid; gap: 0.45rem; }
.site-footer ul a { text-decoration: none; font-size: 0.95rem; }
.site-footer ul a:hover { text-decoration: underline; }
/* Ligne du bas, en petits caractères : copyright et adresse à gauche, confidentialité à droite. */
.site-footer__legal { max-width: var(--wrap); margin: var(--s-6) auto 0; padding-top: var(--s-3); /* liens dans le texte : pas de cible agrandie (exception « en ligne » des cibles tactiles) */ border-top: 1px solid #2f2d2a; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem var(--s-5); font-size: 0.8rem; line-height: 1.5; color: #8f897d; }
.site-footer__legal a { color: #c9c3b7; text-decoration-color: #5d5850; }
.site-footer__legal a:hover { color: #f1ede5; text-decoration-color: currentColor; }
.site-footer__copy { font-family: var(--f-admin); font-size: 0.95em; }
.site-footer__picto { display: inline-block; width: 1.35em; height: 1.35em; margin-right: 0.45em; vertical-align: -0.34em; color: #aaa497; }

/* La colonne de la marque : le logo, son slogan, puis le récit du musée. */
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 860px), (pointer: coarse) {
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Message éphémère */
.toast { position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--ink); color: var(--paper); font-family: var(--f-admin); font-size: 0.85rem; padding: 0.75rem 1rem; max-width: min(92vw, 30rem); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); }
/* Toujours rendu (région live présente dans l'arbre d'accessibilité), invisible quand il est vide. */
.toast:empty { opacity: 0; pointer-events: none; }

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