/* TicketAlarm — « Le billet à souche ». Tokens and components shared by every page. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
}

:root {
  /* Paper */
  --color-paper: #FFFFFF;
  --color-paper-raised: #FFFFFF;
  --color-paper-sunken: #F2F2F2;
  --color-wash: #E6E6E6;

  /* Rules: light for furniture, strong (≥3:1 on paper) for field boundaries */
  --color-rule: #DEDEDE;
  --color-rule-strong: #8A8A8A;

  /* Inks: type, actions and the focus ring are ink; ink lifts one step when pressed */
  --color-ink: #111111;
  --color-ink-pressed: #3D3D3D;
  --color-ink-soft: #595959;
  --color-ink-muted: #767676;
  --color-sheen: rgb(0 0 0 / 0.06);

  /* Signals: red is the only colour left, for COMPLET and errors; a follow's state wears two greys */
  --color-alert: #C8332F;
  --color-pending: #4D4D4D;
  --color-stopped: #6E6E6E;
  --color-on-signal: #FFFFFF;

  --font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --font-stretch-display: 74%;

  /* Type scale (fluid display, fixed reading sizes) */
  --text-display: clamp(2.375rem, 0.9rem + 5vw, 5.5rem);
  --text-title: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --text-heading: 1.375rem;
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-tag: 0.8125rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --radius: 2px;
  --radius-pill: 999px;
  /* Seule entorse au rayon de 2 px, demandée par le propriétaire pour les vignettes d'artistes. */
  --radius-media: 0.75rem;
  /* Liseré de papier autour d'un mot posé sur une photo : huit ombres dans la couleur du papier, rayon en em
     pour suivre la taille du texte. Une ombre passe derrière les lettres voisines, un trait les mangerait. */
  --halo-paper:
    0.07em 0 0 var(--color-paper),
    -0.07em 0 0 var(--color-paper),
    0 0.07em 0 var(--color-paper),
    0 -0.07em 0 var(--color-paper),
    0.05em 0.05em 0 var(--color-paper),
    -0.05em 0.05em 0 var(--color-paper),
    0.05em -0.05em 0 var(--color-paper),
    -0.05em -0.05em 0 var(--color-paper);
  --control-height: 3.25rem;
  --header-height: 4.5rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 4rem);
  /* Le filet imprimé vit dans la marge extérieure : aucun contenu ne le touche */
  --frame-inset: max(0.5rem, calc(var(--gutter) - var(--space-4)));
  /* L'en-tête prend un cran de plus que le contenu pour ne jamais frôler le filet */
  --header-inset: calc(var(--gutter) + var(--space-3));
  --measure: 68ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  accent-color: var(--color-ink);
}

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

/* A class that sets display (the cookie notice, a panel) would otherwise defeat the hidden attribute. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--color-rule-strong) var(--color-paper);
}

/* Controls answer the tap at once and never select their own label */
a, button, [role="button"], label { touch-action: manipulation; }
button, .btn, .site-nav__link, .nav-toggle { user-select: none; -webkit-user-select: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--color-ink); color: var(--color-paper); }

h1, h2, h3 { margin: 0; line-height: 1.02; text-wrap: balance; font-stretch: var(--font-stretch-display); }
h1 { font-size: var(--text-display); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: var(--text-title); font-weight: 850; letter-spacing: -0.02em; }
h3 { font-size: var(--text-heading); font-weight: 750; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); }

a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .concert-card:hover .concert-card__talon { transform: none; box-shadow: none; }
}

/* Wordmark */
.wordmark {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
}
.wordmark span { font-weight: 400; }

/* Skip link: hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 800;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* Page frame: the header floats over the page so a stage's beam enters from above the viewport */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: env(safe-area-inset-top, 0px) max(var(--header-inset), env(safe-area-inset-right, 0px)) 0 max(var(--header-inset), env(safe-area-inset-left, 0px));
}
.site-main { flex: 1; padding-top: var(--header-height); padding-bottom: var(--space-8); }
.site-main:focus { outline: none; }

/* Main navigation */
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: 700;
  font-stretch: 108%;
  text-decoration: none;
  color: var(--color-ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.site-nav__link:active { color: var(--color-ink); }
.site-nav__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* Pastille de l'icône : un carré de papier au filet d'encre, inversé au survol et sur la page courante. */
.nav-icon {
  flex: none;
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.3rem;
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) {
  .site-nav__link:hover .nav-icon { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
}
.site-nav__link:focus-visible .nav-icon,
.site-nav__link[aria-current="page"] .nav-icon { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* Les pastilles élargissent le menu : sous 72 rem, la pastille et les écarts se resserrent pour que les cinq
   entrées tiennent encore sur une ligne, comme avant. */
@media (max-width: 71.99rem) {
  .site-nav__list { column-gap: var(--space-2); }
  .site-nav__link { gap: 0.25rem; }
  .nav-icon { width: 1rem; height: 1rem; padding: 0.125rem; }
}

/* Mobile toggle: two bars drawn in CSS that become a cross when open */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle__bars { position: relative; width: 1.125rem; height: 0.75rem; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-out), top 200ms var(--ease-out);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: calc(100% - 2px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 47.99rem) {
  /* With JavaScript the list folds behind the toggle; without it, it stays visible and wraps. */
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--header-inset) var(--space-5);
    background: var(--color-paper-raised);
    border-bottom: 1px solid var(--color-rule-strong);
  }
  .js .site-nav:not([data-open="true"]) { display: none; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__link { width: 100%; min-height: 3rem; font-size: 1.25rem; border-bottom: 1px solid var(--color-rule); }
  .js .site-nav__link[aria-current="page"] { border-bottom-color: var(--color-rule); }
  .site-header:not(:has(.nav-toggle:not([hidden]))) { flex-wrap: wrap; }
}
@media (min-width: 48rem) {
  .nav-toggle { display: none; }
}

/* Footer: closes the page with a warm rule, links stay plain text */
.site-footer {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-rule-strong);
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}
.site-footer__brand { display: grid; gap: var(--space-3); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-ink); }
@media (min-width: 48rem) {
  .site-footer { grid-template-columns: 1fr auto; align-items: end; }
}

/* Cookie notice: a compact stage surface that stays clear of the future mobile chatbot launcher. */
.cookie-notice {
  position: fixed;
  z-index: 7;
  right: var(--gutter);
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  left: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}
.cookie-notice p { flex: 1 1 14rem; font-size: var(--text-small); }
.cookie-notice .btn { min-height: 2.75rem; padding-block: 0; }
@media (max-width: 47.99rem) {
  .cookie-notice { bottom: calc(5.5rem + var(--space-5) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 48rem) {
  .cookie-notice { right: auto; max-width: 30rem; }
}

/* Floating chatbot (TIC-45): bottom-right, clear of the home indicator.
   TIC-79 : le conteneur ne capte aucun clic. Son bouton remonte au-dessus du pied de page, mais la boîte
   elle-même reste dans le coin bas-droit et avalait le dernier lien du pied de page, celui des conditions. */
.chatbot-slot {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  display: grid;
  justify-items: end;
  pointer-events: none;
}
.chatbot-slot > * { pointer-events: auto; }
.chatbot-slot:empty { display: none; }

/* launcher-lift.js makes the button climb above .site-footer (inline transform). No transition: the lift is a
   continuous function of the scroll position, a duration would make the button trail behind the finger. */
.chatbot-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
  cursor: pointer;
}
.chatbot-toggle__mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-on-signal);
  font-weight: 900;
}
.chatbot-toggle:active { background: var(--color-wash); }
@media (hover: hover) and (pointer: fine) {
  .chatbot-toggle:hover { background: var(--color-ink); color: var(--color-paper); }
}
.chatbot-toggle:focus-visible,
.chatbot-panel__close:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }

.chatbot-panel {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(24rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(34rem, calc(100vh - 8rem));
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  overflow: hidden;
}
.chatbot-panel[hidden] { display: none; }

.chatbot-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.chatbot-panel__title { font-size: var(--text-heading); }
.chatbot-panel__meta { font-size: var(--text-tag); color: var(--color-ink-soft); }
.chatbot-panel__close {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.chatbot-log {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 8rem;
  padding: var(--space-4);
  overflow-y: auto;
}
.chatbot-hello { font-size: var(--text-small); color: var(--color-ink-soft); }
.chatbot-message {
  max-width: 92%;
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chatbot-message--user { justify-self: end; background: var(--color-wash); color: var(--color-ink); }
.chatbot-message--bot { justify-self: start; border: 1px solid var(--color-rule); background: var(--color-paper); }

.chatbot-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-rule);
}
.chatbot-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}
.chatbot-form__input { min-height: 4.5rem; resize: vertical; }
.chatbot-form__send { align-self: end; }
.chatbot-status { min-height: 1.25em; font-size: var(--text-small); color: var(--color-ink-soft); }
.chatbot-status--error { color: var(--color-alert); }

/* Full screen on phones: the conversation needs the room, and the panel clears the notch and the home bar. */
@media (max-width: 47.99rem) {
  .chatbot-panel {
    inset: 0;
    width: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.site-main > .stage:first-child { margin-top: calc(-1 * var(--header-height)); padding-top: calc(var(--header-height) + var(--space-6)); }
.container { padding-inline: var(--gutter); }

/* Le guichet : papier clair, un filet imprimé, aucune lumière artificielle */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule-strong);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0.75rem var(--frame-inset);
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--color-rule);
}

/* Error surfaces reuse the stage so missing pages feel like part of the application. */
.error-page {
  display: grid;
  min-height: min(32rem, calc(100svh - var(--header-height)));
  padding: var(--space-8) var(--gutter);
  place-items: center;
}
.error-page__content { display: grid; gap: var(--space-5); width: min(100%, var(--measure)); }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn--primary { background: var(--color-ink); color: var(--color-on-signal); }
.btn--primary:active { background: var(--color-ink-pressed); }
.btn--secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--secondary:active { background: var(--color-ink); color: var(--color-paper); }
/* Irreversible action: the only button allowed to wear the alert colour. */
.btn--danger { background: transparent; border-color: var(--color-alert); color: var(--color-alert); }
.btn--danger:active { background: var(--color-alert); color: var(--color-on-signal); }
@media (hover: hover) and (pointer: fine) {
  .btn--danger:hover { background: var(--color-alert); color: var(--color-on-signal); }
}
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-paper-raised);
  border-color: var(--color-rule-strong);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}
/* In progress: not clickable, a turning ring before the label */.btn[aria-busy="true"] { pointer-events: none; cursor: progress; background: var(--color-ink-pressed); border-color: transparent; color: var(--color-on-signal); }
.btn[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ta-turn 800ms linear infinite;
}
@keyframes ta-turn { to { transform: rotate(1turn); } }

/* Form fields */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: 700; font-size: var(--text-small); }
.field__hint { font-size: var(--text-small); color: var(--color-ink-soft); }
.field__input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  font: inherit;
  font-size: max(1rem, var(--text-body));
  caret-color: var(--color-ink);
}
.field__input::placeholder { color: var(--color-ink-soft); }
.field__input:focus-visible { border-color: var(--color-ink); }
.field__input--lit { background: var(--color-paper-raised); border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.field__input--lit::placeholder { color: var(--color-ink-muted); }
.field--error .field__input { border-color: var(--color-alert); }
.field__error { font-size: var(--text-small); font-weight: 700; color: var(--color-alert); }

/* Status tags */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
  font-size: var(--text-tag);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-signal);
  white-space: nowrap;
}
.tag--sold-out { background: var(--color-alert); }
.tag--active { background: var(--color-ink); }
.tag--pending { background: var(--color-pending); }
.tag--stopped { background: var(--color-stopped); }

/* Concert card: a paper ticket — the poster, the perforated stub, the date printed on it */
.concert-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--color-paper-raised);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 180ms var(--ease-out);
}
.concert-card:active { border-color: var(--color-ink); }
.concert-card__visual {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  padding: var(--space-4);
  background: var(--color-paper-sunken);
  border-bottom: 1px solid var(--color-rule-strong);
}
.concert-card__visual img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.concert-card__name {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(1.375rem, 0.8rem + 1.6vw, 1.875rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  /* Le nom peut passer sur une photo : le liseré de papier le tient lisible sur fond clair comme sur fond sombre. */
  text-shadow: var(--halo-paper);
}
/* One geometric motif per ticket, chosen by the concert id: shapes only, nothing figurative. A card that shows a
   photo drops the motif: the picture already fills the visual zone. */
.concert-card__visual::before,
.concert-card__visual::after { content: ""; position: absolute; z-index: 0; }
.concert-card__visual--1::before { width: 62%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 50%; right: -12%; top: 12%; }
.concert-card__visual--1::after { width: 40%; height: 2px; background: var(--color-ink); right: 0; top: 58%; transform: rotate(-28deg); }
.concert-card__visual--2::before { inset: auto -6% -18% auto; width: 70%; height: 46%; border: 2px solid var(--color-ink); transform: rotate(-14deg); }
.concert-card__visual--2::after { left: var(--space-4); right: var(--space-4); top: 42%; height: 1px; background: var(--color-rule-strong); }
.concert-card__visual--3::before { width: 1px; height: 130%; background: var(--color-ink); left: 38%; top: -15%; transform: rotate(9deg); }
.concert-card__visual--3::after { width: 52%; height: 52%; border: 2px solid var(--color-ink); left: 46%; top: 24%; }
.concert-card__visual--4::before { width: 46%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 50%; left: -8%; bottom: -18%; }
.concert-card__visual--4::after { right: 0; top: 0; width: 34%; height: 100%; border-left: 1px solid var(--color-rule-strong); }

/* The sticker only ever carries a real fact: a demonstration concert */
.sticker {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: 1px;
  background: var(--color-ink);
  color: var(--color-on-signal);
  font-size: var(--text-tag);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 3px var(--color-paper-raised), 0 3px 6px rgb(0 0 0 / 0.16);
}
.sticker--soft { background: var(--color-wash); color: var(--color-ink); box-shadow: 0 0 0 3px var(--color-paper-raised), 0 3px 6px rgb(0 0 0 / 0.10); }

.concert-card__body { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); align-content: start; }
.concert-card__artists { font-size: var(--text-heading); font-weight: 850; font-stretch: 92%; line-height: 1.1; overflow-wrap: anywhere; }
.concert-card__when { font-family: var(--font-mono); font-size: var(--text-tag); letter-spacing: 0.04em; text-transform: uppercase; }
.concert-card__where { font-size: var(--text-small); color: var(--color-ink-soft); overflow-wrap: anywhere; }

/* The stub: perforation, notches, and the printed date */
.concert-card__talon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper-sunken);
  border-top: 1px dashed var(--color-rule-strong);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.concert-card__talon::before,
.concert-card__talon::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
}
.concert-card__talon::before { left: -7px; }
.concert-card__talon::after { right: -7px; }
.concert-card__time { font-family: var(--font-mono); font-size: var(--text-tag); letter-spacing: 0.04em; color: var(--color-ink-soft); }

/* Placeholder visual for compact cards and the concert page: the monogram */
.concert-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: var(--color-paper-sunken);
}
.concert-card__monogram { font-weight: 900; font-stretch: 78%; font-size: 1.75rem; line-height: 1; color: var(--color-ink-soft); }

/* Compact card: one row, for lists and the dashboard */
.concert-card--compact { grid-template-rows: none; grid-template-columns: 5.5rem minmax(0, 1fr); }
.concert-card--compact .concert-card__visual { aspect-ratio: auto; min-height: 5.5rem; }
.concert-card--compact .concert-card__fallback { padding: var(--space-3); }
.concert-card--compact .concert-card__monogram { font-size: 1.75rem; }
.concert-card--compact .concert-card__body { gap: var(--space-1); padding: var(--space-3) var(--space-4); align-content: center; }
.concert-card--compact .concert-card__artists { font-size: 1.0625rem; }
.concert-card--compact .concert-card__when,
.concert-card--compact .concert-card__where { font-size: var(--text-small); }
.concert-card--compact .tag { justify-self: start; margin-top: var(--space-1); }

/* Hover only where a precise pointer can hover; touch gets :active feedback instead */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  .btn--primary:hover { background: var(--color-ink-pressed); }
  .btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
  .field__input:hover { border-color: var(--color-ink-soft); }
  .field__input--lit:hover { border-color: var(--color-ink); }
  .concert-card:hover { border-color: var(--color-ink); }
  .concert-card:hover .concert-card__talon { transform: translateY(3px); box-shadow: 0 -3px 6px rgb(0 0 0 / 0.10); }
  .site-nav__link:hover { color: var(--color-ink); }
  .nav-toggle:hover { border-color: var(--color-ink); }
}

/* Catalog page */
.catalog { display: grid; gap: var(--space-5); padding-top: var(--space-7); }
.catalog__title { font-size: var(--text-title); }
.catalog__lead { color: var(--color-ink-soft); }
.catalog__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
  align-items: end;
}
.catalog__search { grid-column: 1 / -1; }
.catalog__more { grid-column: 1 / -1; }
.catalog__more-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); grid-column: 1 / -1; gap: var(--space-4); align-items: end; }
.catalog__more-toggle { grid-column: 1 / -1; cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.catalog__more-toggle::after { content: "+"; margin-left: var(--space-2); }
.catalog__more[open] > .catalog__more-toggle::after { content: "‘2"; }
@media (max-width: 47.99rem) {
  .catalog__more-fields { display: grid; grid-template-columns: 1fr; margin-top: var(--space-3); }
}
@media (min-width: 48rem) {
  .js .catalog__more-toggle { display: none; }
}
.catalog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); grid-column: 1 / -1; }
.js .catalog__actions .btn--primary { display: none; }
.catalog__count { color: var(--color-ink-soft); font-size: var(--text-small); font-weight: 700; }
.catalog__grid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}
.catalog__grid > li { display: grid; min-width: 0; }
.catalog__grid .concert-card { height: 100%; }
.catalog__empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-6) 0; }
.catalog__error { color: var(--color-alert); font-weight: 700; }
.catalog [aria-busy="true"] { opacity: 0.6; }

/* Artistes : chaque artiste est un tirage portrait encadré, comme les vues des marges */
.artists { display: grid; gap: var(--space-5); padding-top: var(--space-7); }
.artists__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-5) var(--space-4);
}
.artists__grid > li { display: grid; min-width: 0; }
.artist-card {
  display: grid;
  gap: var(--space-1) var(--space-2);
  grid-template-rows: auto auto 1fr;
  color: var(--color-ink);
  text-decoration: none;
}
.artist-card__frame {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 340 / 420;
  padding: var(--space-3);
  overflow: hidden;
  background: var(--color-paper-sunken);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  transition: border-color 180ms var(--ease-out);
}
.artist-card:hover .artist-card__frame,
.artist-card:focus-visible .artist-card__frame { border-color: var(--color-ink); }
/* Le portrait occupe le cadre ; sans portrait, les initiales tiennent la place du dessin */
.artist-card__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.artist-card__monogram {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-stretch: 78%;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}
.artist-card__title { font-weight: 800; font-size: var(--text-small); line-height: 1.25; overflow-wrap: anywhere; }
.artist-card__name {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.artist-card__meta { display: grid; gap: 0.15rem; font-size: var(--text-tag); }
.artist-card__count { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); }
.artist-card__next { color: var(--color-ink-soft); }
.artist-card__frame::before,
.artist-card__frame::after { content: ""; position: absolute; z-index: 0; }
.artist-card__frame--1::before { width: 74%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 50%; right: -22%; top: -6%; }
.artist-card__frame--2::before { inset: auto -10% 18% auto; width: 82%; height: 34%; border: 2px solid var(--color-ink); transform: rotate(-12deg); }
.artist-card__frame--3::before { width: 1px; height: 130%; background: var(--color-rule-strong); left: 26%; top: -15%; transform: rotate(7deg); }
.artist-card__frame--4::before { width: 46%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 50%; left: -14%; bottom: 12%; }

/* Page artiste : le portrait à gauche, l'introduction à droite */
.artist { display: grid; gap: var(--space-6); padding-top: var(--space-6); }
.artist__back { justify-self: start; color: var(--color-ink-soft); }
.artist__head { display: grid; gap: var(--space-5); align-items: end; }
.artist__portrait { width: min(12rem, 46vw); align-content: end; place-items: stretch; }
.artist__portrait .artist-card__name { font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem); }
.artist__intro { display: grid; gap: var(--space-3); justify-items: start; }
.artist__section { display: grid; gap: var(--space-4); }
.artist__section-title {
  font-size: var(--text-heading);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule-strong);
}
@media (min-width: 48rem) {
  .artist__head { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); }
}

/* Home page — le guichet, la souche qui défile, les billets */
.home-hero { display: grid; padding-inline: var(--gutter); padding-bottom: 0; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-hero__inner { display: grid; justify-items: center; gap: var(--space-2) var(--space-6); text-align: center; }
.home-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.4rem, 0.8rem + 5.2vw, 4.1rem);
  text-transform: uppercase;
  text-wrap: balance;
}
.home-hero__lead { max-width: 48ch; color: var(--color-ink-soft); font-size: var(--text-small); }
.home-hero__lead strong { color: var(--color-ink); font-weight: 700; }

/* Le guichet : le champ et le bouton dans un même cadre imprimé */
.guichet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(44rem, 100%);
  margin-top: var(--space-3);
  text-align: left;
  border: 2px solid var(--color-ink);
  border-radius: 2px;
  background: var(--color-paper-raised);
  box-shadow: 0 2px 0 var(--color-wash);
}
.guichet__field { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.guichet__label {
  font-size: var(--text-tag);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.guichet__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: max(1rem, var(--text-body));
}
.guichet__input::placeholder { color: var(--color-ink-soft); }
.guichet__input:focus { outline: none; }
.guichet__field:focus-within { box-shadow: inset 0 -2px 0 var(--color-ink); }
.guichet .btn { border: 0; border-left: 2px solid var(--color-ink); border-radius: 0; }

/* Les marges : deux vues de chaque côté en desktop, rien en mobile */
.marge { display: none; }
.vue {
  margin: 0;
  padding: 6px;
  background: var(--color-paper-raised);
  border: 1px solid var(--color-rule-strong);
  border-radius: 1px;
}
.vue img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.vue__name {
  display: grid;
  align-content: end;
  min-height: 100%;
  padding: var(--space-2);
  font-weight: 900;
  font-stretch: 64%;
  font-size: 1.25rem;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
@media (min-width: 60rem) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr); align-items: center; }
  .home-hero__inner { grid-column: 2; }
  .marge { display: grid; gap: var(--space-4); align-content: center; }
  .marge--g { justify-items: end; }
  .marge--d { justify-items: start; }
  .vue { width: min(10.5rem, 100%); aspect-ratio: 4 / 5; }
  .marge--g .vue:first-child { transform: rotate(2deg); }
  .marge--g .vue:last-child { transform: rotate(-1.5deg); margin-left: -1rem; }
  .marge--d .vue:first-child { transform: rotate(-2deg); }
  .marge--d .vue:last-child { transform: rotate(1.5deg); }
}

/* La souche qui défile : elle s'arrête au survol et au focus */
.rail {
  position: relative;
  margin-top: var(--space-6);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.rail__track { display: flex; align-items: center; width: max-content; animation: ta-rail 52s linear infinite; }
.rail:hover .rail__track,
.rail:focus-within .rail__track { animation-play-state: paused; }
.rail__item {
  display: inline-flex;
  align-items: center;
  padding-inline: 0 var(--space-5);
  gap: var(--space-5);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-small);
  font-weight: 750;
  font-stretch: 80%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.rail__item::after { content: ""; flex: none; width: 6px; height: 6px; border: 1px solid var(--color-rule-strong); border-radius: 50%; }
.rail__item:hover { color: var(--color-ink); }
.rail__item:hover::after { border-color: var(--color-ink); }
@keyframes ta-rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rail { overflow-x: auto; }
  .rail__track { animation: none; }
}

.home { display: grid; gap: clamp(2.5rem, 2rem + 1.5vw, 4.5rem); padding-top: var(--space-7); }
.home__section { display: grid; gap: var(--space-5); }
.home__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.home__more { font-weight: 700; color: var(--color-ink); text-underline-offset: 0.25em; }

/* Évènements populaires : noms empilés, un seul mis en avant au défilement */
.featured {
  overflow-x: clip;
  /* Taille de la photo et largeur de la bande que le nom mord dessus. */
  --featured-media: 6rem;
  --featured-graze: 1.5rem;
}
.featured__list {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 var(--space-6);
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.5rem);
}
.featured__item { display: grid; justify-items: center; width: 100%; min-width: 0; }

/* La boîte du lien épouse le texte : la vignette et le badge se posent par rapport à lui. */
.featured__link {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: var(--space-2) 0;
  text-align: center;
  text-decoration: none;
}

.featured__name {
  margin: 0;
  font-size: 1.875rem;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
  /* Le nom passe sous la vignette : le liseré de papier le détache de la photo. */
  text-shadow: var(--halo-paper);
  transition: transform 300ms var(--ease-out);
}
/* Deux styles opposés, sur les deux axes d'Archivo : très large et noire, puis fine et étroite. */
.featured__item:nth-child(odd) .featured__name { font-weight: 900; font-stretch: 125%; }
.featured__item:nth-child(even) .featured__name { font-weight: 400; font-stretch: 74%; letter-spacing: 0; }
@media (min-width: 40rem) { .featured__name { font-size: 3rem; } }
@media (min-width: 48rem) { .featured__name { font-size: 3.75rem; } }
@media (min-width: 80rem) { .featured__name { font-size: 4.5rem; } }

/* Vignette : cachée à l'échelle 0, elle apparaît après la fin du texte, qui n'en mord qu'une bande. */
.featured__media {
  position: absolute;
  top: -0.75rem;
  /* Sur téléphone le texte occupe toute la ligne : la photo reste collée à sa fin. */
  right: -1.25rem;
  display: grid;
  place-items: center;
  width: var(--featured-media);
  height: var(--featured-media);
  overflow: hidden;
  background: var(--color-paper-sunken);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-media);
  transform: scale(0);
  transition: transform 500ms var(--ease-out);
}
.featured__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.featured__monogram { font-weight: 900; font-stretch: 78%; font-size: 2.5rem; line-height: 1; color: var(--color-ink-soft); }
/* Dès qu'il y a de la place, la photo sort du texte ; le plafond en vw l'empêche de quitter la page
   quand un nom très long remplit déjà la ligne. */
@media (min-width: 48rem) {
  .featured { --featured-media: 8rem; --featured-graze: 1.25rem; }
  .featured__media { right: max(calc(-1 * (var(--featured-media) - var(--featured-graze))), -6.5vw); }
}
@media (min-width: 64rem) {
  .featured { --featured-media: 10rem; }
  .featured__media { right: max(calc(-1 * (var(--featured-media) - var(--featured-graze))), -12vw); }
}
@media (min-width: 80rem) {
  .featured { --featured-media: 13rem; --featured-graze: 1.5rem; }
  .featured__media { right: max(calc(-1 * (var(--featured-media) - var(--featured-graze))), -18vw); }
}

/* Badge : la salle du prochain concert, en alerte, posée en bas à gauche sur le texte. */
.featured__badge {
  position: absolute;
  bottom: -0.15rem;
  left: 0;
  max-width: min(90vw, 26rem);
  padding: 0.2rem 0.55rem;
  overflow: hidden;
  background: var(--color-alert);
  color: var(--color-on-signal);
  border-radius: var(--radius);
  font-size: var(--text-tag);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: scale(0);
  transform-origin: left bottom;
  transition: transform 300ms var(--ease-out);
}

/* État mis en avant : un seul item à la fois, posé par le script au défilement. */
.featured__item.is-active .featured__name,
.featured__item:focus-within .featured__name { transform: scale(1.2); }
.featured__item.is-active .featured__media,
.featured__item:focus-within .featured__media { transform: scale(1); }
.featured__item.is-active .featured__badge,
.featured__item:focus-within .featured__badge { transform: scale(1); }

@media (hover: hover) and (pointer: fine) {
  .featured__link:hover .featured__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
  .featured__link:hover .featured__media { border-color: var(--color-ink); }
}

/* Bandes de tuiles (artistes, prochains concerts) : défilement horizontal mené par deux flèches */
.rail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.rail-nav { display: flex; gap: var(--space-2); }
.rail-nav__btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.rail-nav__btn svg { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) {
  .rail-nav__btn:hover:not(:disabled) { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
}
.rail-nav__btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.rail-nav__btn:disabled { color: var(--color-rule-strong); cursor: default; }
/* Sans JavaScript les flèches n'ont aucun effet : elles ne sont pas rendues. Sur téléphone, le doigt suffit. */
html:not(.js) .rail-nav { display: none; }
@media (max-width: 47.99rem) { .rail-nav { display: none; } }

.tile-rail {
  list-style: none;
  margin: 0;
  /* La marge verticale laisse respirer le survol ; aucune marge en ligne, pour que l'accroche tombe sur 0. */
  padding: var(--space-1) 0 var(--space-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* La bande se fait oublier : ni barre de défilement, ni halo bleu au doigt. */
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
}
.tile-rail::-webkit-scrollbar { display: none; }
.tile-rail:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.tile-rail__item { display: grid; min-width: 0; scroll-snap-align: start; }
@media (min-width: 48rem) { .tile-rail { grid-auto-columns: 17rem; } }

/* Le nombre de concerts tient la partie blanche, comme la salle sur une carte de concert */
.artist-ticket__count { font-size: var(--text-heading); font-weight: 850; font-stretch: 92%; line-height: 1.1; }
.artist-ticket__label {
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Comment ça marche : les quatre cases illustrées */
.how__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.how__card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-paper);
}
.how__art { aspect-ratio: 3 / 2; }
.how__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.how__index { margin: 0; font-family: var(--font-mono); font-size: var(--text-tag); letter-spacing: 0.08em; color: var(--color-ink-soft); }
.how__title { margin: 0; font-size: 1.0625rem; font-weight: 850; font-stretch: 76%; text-transform: uppercase; }
.how__text { margin: 0; color: var(--color-ink-soft); font-size: var(--text-small); }
.how__note { margin: 0; max-width: 62ch; color: var(--color-ink-soft); font-size: var(--text-small); }

@keyframes how-beat-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes how-shout { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
@keyframes how-arms {
  0%, 4% { transform: rotate(var(--a, 0deg)); }
  14%, 56% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(var(--a, 0deg)); }
}
@keyframes how-head {
  0%, 4% { transform: rotate(0deg); }
  14%, 56% { transform: rotate(-7deg); }
  70%, 100% { transform: rotate(0deg); }
}
@keyframes how-tear {
  0%, 10% { transform: translateY(0); opacity: 0; }
  16% { opacity: 1; }
  55% { transform: translateY(9px); opacity: 1; }
  64%, 100% { transform: translateY(12px); opacity: 0; }
}
@keyframes how-handoff {
  0%, 10% { transform: translateX(-34px); opacity: 1; }
  42%, 72% { transform: translateX(0); opacity: 1; }
  78% { transform: translateX(0); opacity: 0; }
  80% { transform: translateX(-34px); opacity: 0; }
  88%, 100% { transform: translateX(-34px); opacity: 1; }
}
@keyframes how-whoosh { 0%, 12% { opacity: 0; } 20%, 38% { opacity: 0.6; } 46%, 100% { opacity: 0; } }
@keyframes how-arm {
  0%, 46% { transform: rotate(0deg); }
  56%, 80% { transform: rotate(22deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes how-scan {
  0% { transform: translateY(0); opacity: 1; }
  30%, 80% { transform: translateY(-96px); opacity: 1; }
  86% { opacity: 0; }
  87% { transform: translateY(0); opacity: 0; }
  94% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes how-shake {
  0%, 30% { transform: rotate(0deg); }
  32% { transform: rotate(-2.4deg); }
  35% { transform: rotate(2.4deg); }
  38% { transform: rotate(-1.6deg); }
  41% { transform: rotate(1.6deg); }
  44%, 100% { transform: rotate(0deg); }
}
@keyframes how-found {
  0%, 29% { transform: scale(1); }
  32% { transform: scale(1.07); }
  38%, 100% { transform: scale(1); }
}
@keyframes how-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(4deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(-4deg); }
}
@keyframes how-sweep-l { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes how-sweep-r { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }
@keyframes how-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Sans JavaScript, aucune animation : les dessins restent visibles. */
.how.is-in .how__art > svg { animation: how-beat-in 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 130ms); }
.how.is-in .how-shout { animation: how-shout 1.7s ease-in-out infinite; animation-delay: calc(var(--i) * 130ms + 0.9s); }
.how.is-in .how-arms { animation: how-arms 6s cubic-bezier(0.3, 1.5, 0.55, 1) infinite backwards; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-head { animation: how-head 6s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-tear { animation: how-tear 2.6s ease-in infinite backwards; animation-delay: calc(var(--i) * 130ms + 1.8s); }
.how.is-in .how-handoff { animation: how-handoff 6s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how-whoosh { opacity: 0; }
.how.is-in .how-whoosh { animation: how-whoosh 6s linear infinite backwards; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-arm { animation: how-arm 6s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-scan { animation: how-scan 7s cubic-bezier(0.45, 0, 0.15, 1) infinite; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-shake { transform-box: fill-box; transform-origin: 50% 100%; animation: how-shake 7s linear infinite; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-found { transform-box: fill-box; transform-origin: 50% 50%; animation: how-found 7s linear infinite; animation-delay: calc(var(--i) * 130ms + 0.6s); }
.how.is-in .how-dance { transform-box: fill-box; transform-origin: 50% 100%; animation: how-dance 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 130ms + 0.9s); }
.how.is-in .how-dance--b { animation-delay: calc(var(--i) * 130ms + 1.8s); }
.how.is-in .how-beam-l { transform-origin: 35px 44px; animation: how-sweep-l 4.5s ease-in-out infinite alternate; }
.how.is-in .how-beam-r { transform-origin: 285px 44px; animation: how-sweep-r 4.5s ease-in-out infinite alternate; }
.how.is-in .how-twinkle { animation: how-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * 130ms + 1.1s); }

@media (prefers-reduced-motion: reduce) {
  .how.is-in .how__art > svg,
  .how.is-in .how-shout,
  .how.is-in .how-arms,
  .how.is-in .how-head,
  .how.is-in .how-tear,
  .how.is-in .how-handoff,
  .how.is-in .how-whoosh,
  .how.is-in .how-arm,
  .how.is-in .how-scan,
  .how.is-in .how-shake,
  .how.is-in .how-found,
  .how.is-in .how-dance,
  .how.is-in .how-beam-l,
  .how.is-in .how-beam-r,
  .how.is-in .how-twinkle {
    animation: none;
  }
}

@media (max-width: 60rem) {
  .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .how__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Feuille et panneaux : le vocabulaire commun des pages intérieures */
.sheet { display: grid; gap: var(--space-5); }
.sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-rule-strong); }
.sheet__intro { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-rule-strong); }
.page-title { font-size: var(--text-title); text-transform: uppercase; }
.page-lead { color: var(--color-ink-soft); max-width: 52ch; }
.panel { border: 1px solid var(--color-rule-strong); border-radius: var(--radius); background: var(--color-paper-raised); }
.panel__body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.panel__talon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper-sunken);
  border-top: 1px dashed var(--color-rule-strong);
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Concert page */
.concert { display: grid; gap: var(--space-7); padding-top: var(--space-6); }
.concert__back { justify-self: start; color: var(--color-ink-soft); }
.concert__layout { display: grid; gap: var(--space-6); align-items: start; }
.concert__visual { border: 1px solid var(--color-rule-strong); border-radius: var(--radius); aspect-ratio: 3 / 4; }
.concert__info { display: grid; gap: var(--space-3); min-width: 0; border: 1px solid var(--color-rule-strong); border-radius: var(--radius); background: var(--color-paper-raised); padding: var(--space-5); }
.concert__title { font-size: var(--text-title); text-transform: uppercase; overflow-wrap: anywhere; }
.concert__when { font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-rule-strong); }
.concert__where, .concert__countdown { color: var(--color-ink-soft); overflow-wrap: anywhere; }
.concert__countdown { font-family: var(--font-mono); font-size: var(--text-tag); letter-spacing: 0.04em; text-transform: uppercase; }
.concert__description { max-width: 40rem; margin-top: var(--space-3); overflow-wrap: anywhere; }
.concert__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.concert__section { display: grid; gap: var(--space-5); }
.concert__section h2 { text-transform: uppercase; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-rule-strong); }

/* Listes du bas de fiche : des lignes de guichet, sans photo, pour ne pas concurrencer la fiche elle-même */
.concert-lines { border: 1px solid var(--color-rule-strong); border-radius: var(--radius); background: var(--color-paper-raised); }
.concert-lines > li + li { border-top: 1px solid var(--color-rule); }
.concert-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  text-decoration: none;
}
.concert-line:hover, .concert-line:focus-visible { background: var(--color-sheen); color: var(--color-ink); }
.concert-line__date {
  display: grid;
  min-width: 7rem;
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.concert-line__time { color: var(--color-ink-soft); }
.concert-line__body { display: grid; gap: var(--space-1); min-width: 0; }
.concert-line__artists { font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.concert-line__where { font-size: var(--text-small); color: var(--color-ink-soft); overflow-wrap: anywhere; }
.concert-line__go { color: var(--color-ink-soft); }
@media (max-width: 32rem) {
  .concert-line { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .concert-line__date { grid-column: 1 / -1; display: flex; gap: var(--space-2); min-width: 0; }
}

@media (min-width: 48rem) {
  .concert__layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-7); }
}

/* Account pages */
.flash { margin: 0; padding: var(--space-3) var(--gutter); background: var(--color-paper-raised); border-bottom: 1px solid var(--color-rule-strong); font-weight: 700; }
.auth {
  display: grid;
  gap: var(--space-5);
  width: min(100% - 2 * var(--gutter), 34rem);
  margin-block: var(--space-7);
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}
.auth__title { font-size: var(--text-title); text-transform: uppercase; }
.auth__lead { color: var(--color-ink-soft); }
.auth__form { display: grid; gap: var(--space-4); justify-items: start; }
.auth__form .field { width: 100%; }
.auth__message { margin: 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-ink); background: var(--color-paper-raised); }
.auth__message--error { border-left-color: var(--color-alert); color: var(--color-ink); }
.auth__code { font-size: max(1.5rem, var(--text-body)); letter-spacing: 0.4em; font-variant-numeric: tabular-nums; max-width: 14rem; }
.auth__resend { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-5); }
.auth__other { color: var(--color-ink-soft); }
.auth__note { font-size: var(--text-small); color: var(--color-ink-soft); }

/* Alertes suspendues (TIC-80) : une carte de guichet, sans formulaire de paiement ni de suivi */
.alert-suspended__flag {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alert-suspended__action { display: grid; gap: var(--space-3); justify-items: start; }
.alert-suspended__note { font-size: var(--text-small); color: var(--color-ink-soft); max-width: 42ch; }
.alert-suspended__done {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-sunken);
  font-weight: 700;
}
.auth__section { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check input { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; flex: none; accent-color: var(--color-ink); }

/* Personal dashboard */
.dashboard { display: grid; gap: var(--space-7); padding-top: var(--space-7); }
.dashboard__section { display: grid; gap: var(--space-4); justify-items: start; padding-top: var(--space-5); border-top: 1px dashed var(--color-rule-strong); }
.dashboard__section h1,
.dashboard__section h2 { text-transform: uppercase; }
.dashboard__section > .catalog__grid, .dashboard__section > .history { justify-self: stretch; margin-top: 0; }
.subscription {
  justify-self: stretch;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule-strong);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  font-weight: 700;
}
.subscription--active { border-left-color: var(--color-ink); color: var(--color-ink); }
.subscription--active::before {
  content: "Abonnement actif · ";
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.follow { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.follow__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.follow__note { font-size: var(--text-small); color: var(--color-ink-soft); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.history li { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.history__artists { font-weight: 800; overflow-wrap: anywhere; }
.history__when { color: var(--color-ink-soft); font-size: var(--text-small); overflow-wrap: anywhere; }

/* Administration (Development + localhost only) */
.admin { display: grid; gap: var(--space-6); padding-block: var(--space-6); }
.admin__header { display: grid; gap: var(--space-2); }
.admin__note { font-size: var(--text-small); color: var(--color-ink-soft); }
.admin__block { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); }
.admin__import { display: grid; gap: var(--space-3); justify-items: start; }
.admin__status { min-height: 1.25em; font-size: var(--text-small); color: var(--color-ink-soft); }
.admin__status--error { color: var(--color-alert); }
.admin__warning { padding: var(--space-3); border: 1px solid var(--color-pending); border-radius: var(--radius); font-size: var(--text-small); }
.admin__soldout { font-size: var(--text-small); color: var(--color-ink-soft); }
.admin__sources { font-size: var(--text-small); overflow-wrap: anywhere; }
.admin__sheet { display: grid; gap: var(--space-4); max-width: 42rem; }
.admin__poster { display: grid; place-items: center; width: 8rem; min-height: 10rem; padding: var(--space-2); border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
.admin__poster img { width: 100%; height: auto; }
.admin__poster-fallback { font-size: var(--text-tag); color: var(--color-ink-soft); text-align: center; }
/* Le prompt part tel quel au modèle : il est montré dans un bloc monospace, au-dessus du dessin */
.admin__prompt { display: grid; gap: var(--space-1); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper-sunken); }
.admin__prompt-text {
  margin: 0;
  max-height: 9rem;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-ink);
}
.admin__check { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.admin__check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-ink); }
.admin__done,
.admin__errors { padding: var(--space-4); border: 1px solid var(--color-rule-strong); border-radius: var(--radius); }
.admin__errors { border-color: var(--color-alert); }
.admin__errors ul { margin: 0; padding-left: var(--space-5); }
.admin__filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.admin__row { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); }
.admin__row-main { display: grid; gap: var(--space-1); min-width: 0; }
.admin__row-title { font-weight: 800; overflow-wrap: anywhere; }
.admin__row-meta { font-size: var(--text-small); color: var(--color-ink-soft); }
.admin__row-issue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--color-ink); }
.admin__row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.field__hint { font-size: var(--text-small); color: var(--color-ink-soft); }
.field--error .field__hint { color: var(--color-alert); }

/* Long-form content pages */
.prose { display: grid; gap: var(--space-4); max-width: var(--measure); padding-block: var(--space-7); }
.prose h1 { font-size: var(--text-title); text-transform: uppercase; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-rule-strong); }
.prose h2 { margin-top: var(--space-5); font-size: var(--text-heading); text-transform: uppercase; }
.prose ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.prose a:not(.btn) { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.prose .btn { justify-self: start; }

/* Confirmation dialog (account deletion). Native <dialog>: focus trap, Escape and backdrop handled by the browser. */
.dialog {
  width: min(32rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--space-6));
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  overflow: auto;
}
.dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.dialog__body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.dialog__title { font-size: var(--text-heading); }
.dialog__text { font-size: var(--text-small); }
.dialog__text--center { text-align: center; }
.dialog--center .dialog__title { text-align: center; word-spacing: 0.15em; }
.dialog--center .dialog__actions { justify-content: center; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: end; }
@media (max-width: 30rem) {
  .dialog__actions { justify-content: stretch; }
  .dialog__actions .btn { flex: 1 1 100%; }
}