/* ════════════════════════════════════════════════════════════════════════════
   Café-Bar Zénob — feuille de style unique, sans dépendance.

   Une salle de spectacle alternative ne se vend pas avec une mise en page de
   cabinet-conseil. Le parti pris est celui de l'affiche de concert sérigraphiée :
   papier journal, encre orange, encre bleue, capitales condensées, dates en
   chasse fixe. L'agenda n'est pas une section du site, c'est le site.
   Titres Big Shoulders Display, texte Archivo, dates IBM Plex Mono.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────────────────────────
   :root nu = palette claire complète. Les blocs sombres ne redéfinissent QUE
   des jetons : une couleur qui n'existerait que sous @media ne s'appliquerait
   pas en mode « système ».
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --ink: #101014;
  --ink-2: #1A1A21;
  --paper: #EDE7DC;             /* papier journal */
  --card: #F7F3EC;
  --line: #D5CDBE;
  --text: #16161A;
  --muted: #6A6458;
  --riso: #FF4B26;              /* l'encre orange — l'accent, unique et bruyant */
  --riso-soft: #FFE1D8;
  --riso2: #2B4BE0;             /* l'encre bleue — seconde passe */
  --on-dark: #EDE7DC;
  --on-dark-dim: rgba(237, 231, 220, .62);
  --shadow: 0 2px 0 var(--line);
  --r: 4px;                      /* presque pas d'arrondi : c'est une affiche */
  --wrap: 1180px;
  --pad: clamp(18px, 5vw, 44px);
  --display: "Big Shoulders Display", "Haettenschweiler", Impact, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101014; --card: #18181F; --line: #2B2B34; --text: #EDE7DC;
    --muted: #918B7E; --riso-soft: #33170F; --on-dark: #EDE7DC;
    --shadow: 0 2px 0 var(--line);
  }
}
:root[data-theme="dark"] {
  --paper: #101014; --card: #18181F; --line: #2B2B34; --text: #EDE7DC;
  --muted: #918B7E; --riso-soft: #33170F; --on-dark: #EDE7DC;
  --shadow: 0 2px 0 var(--line);
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--riso); outline-offset: 2px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--riso); color: #fff; padding: 10px 16px; }

h1, h2 { font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 .32em; text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 10vw, 8rem); }
h2 { font-size: clamp(2.3rem, 6vw, 4.4rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.06rem; line-height: 1.25; margin: 0 0 .5em; }
h1 em, h2 em { font-style: normal; color: var(--riso); }

.eyebrow { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1em; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.58; }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head__note { color: var(--muted); font-size: .98rem; margin: 0; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px; max-width: none; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 13px 24px; border: 2px solid transparent; border-radius: var(--r); font: 700 .86rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .14s, background-color .14s, color .14s, border-color .14s; }
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: translate(0, 0); }
.btn--ink2 { background: var(--riso); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn--ink2:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--on-dark); }
.btn--ghost:hover { background: var(--on-dark); color: var(--ink); }
.btn--sm { padding: 10px 17px; font-size: .78rem; }
.lnk { background: none; border: 0; padding: 0; font: 500 .82rem/1.4 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lnk:hover { color: var(--riso); }
.chip { display: inline-block; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 999px; font: 500 .72rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ── Bandeau d'annonce ─────────────────────────────────────────────────── */
.announce { background: var(--riso); color: #fff; font-size: .92rem; font-weight: 500; padding: 10px 0; text-align: center; }
.announce a { font-weight: 700; }
.announce[hidden] { display: none; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid transparent; transition: border-color .2s; }
.top.is-scrolled { border-bottom-color: var(--ink); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: grid; text-decoration: none; line-height: 1; }
.brand__name { font-family: var(--display); font-weight: 900; font-size: 1.9rem; letter-spacing: .01em; text-transform: uppercase; }
.brand__sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav a { text-decoration: none; font-size: .88rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); transition: color .14s; }
.nav a:hover { color: var(--riso); }
.nav__cta { padding: 10px 18px; background: var(--ink); color: var(--paper) !important; border-radius: var(--r); }
.nav__cta:hover { background: var(--riso); color: #fff !important; }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2.5px; background: var(--text); transition: transform .24s, opacity .2s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .nav { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 22px; background: var(--paper); border-bottom: 2px solid var(--ink); }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__cta { margin-top: 14px; text-align: center; border-bottom: 0 !important; }
}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; background: var(--ink); color: var(--on-dark); overflow: hidden; }
/* Deux passes d'encre qui se recouvrent, comme une sérigraphie mal calée. */
.hero__ink { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.hero__ink::before, .hero__ink::after { content: ""; position: absolute; border-radius: 50%; filter: blur(4px); mix-blend-mode: screen; }
.hero__ink::before { width: 640px; height: 640px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(255, 75, 38, .55), transparent 66%); }
.hero__ink::after { width: 560px; height: 560px; right: 60px; top: -190px; background: radial-gradient(circle, rgba(43, 75, 224, .5), transparent 66%); }
.hero__inner { position: relative; padding: clamp(72px, 12vh, 124px) 0 clamp(52px, 8vh, 86px); max-width: 940px; }
.hero h1 { color: #fff; }
.hero h1 em { color: var(--riso); }
.hero .eyebrow { color: var(--on-dark-dim); }
.hero .lede { color: var(--on-dark-dim); max-width: 60ch; }
.hero__status { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 6px 14px 6px 11px; border: 1.5px solid rgba(237, 231, 220, .28); font: 600 .8rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark); }
.hero__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--riso); }
.hero__status:not(.is-closed) .dot { animation: dot-pulse 2.4s ease-out infinite; }
.hero__status.is-closed .dot { background: #8A8578; animation: none; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 75, 38, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 75, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 75, 38, 0); } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Bandeau défilant des noms déjà passés — la mémoire de la salle. */
.ticker { position: relative; border-top: 2px solid rgba(237, 231, 220, .18); overflow: hidden; background: var(--ink); }
.ticker__row { display: flex; gap: 34px; white-space: nowrap; padding: 13px 0; font: 500 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-dim); will-change: transform; }
.ticker__row span { flex: none; }
.ticker__row i { flex: none; font-style: normal; color: var(--riso); }

/* ── Compteurs ─────────────────────────────────────────────────────────── */
.counts { background: var(--riso); color: #fff; }
.counts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin-block: 0; }
.counts__grid div { padding: 26px 22px 28px; border-left: 1.5px solid rgba(255, 255, 255, .28); }
.counts__grid div:first-child { border-left: 0; padding-left: 0; }
.counts dt { font: 500 .68rem/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; opacity: .82; margin-bottom: .8em; }
.counts dd { margin: 0; display: flex; align-items: baseline; gap: .5em; }
.counts b { font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: .9; font-variant-numeric: tabular-nums; }
.counts span { font-size: .8rem; opacity: .85; }

/* ── Promo ─────────────────────────────────────────────────────────────── */
.promo { background: var(--card); border-bottom: 2px solid var(--ink); }
.promo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 0; }
.promo h2 { font-size: 1.9rem; margin-bottom: .2em; }
.promo p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ── À l'affiche : le bloc signature ───────────────────────────────────── */
.affiche { padding: clamp(60px, 8vw, 104px) 0; }
.affiche__note { max-width: 44ch; font-size: .92rem; color: var(--muted); margin: 0; }
.shows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.show { display: grid; grid-template-columns: 116px 1fr auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding: 26px 0; border-bottom: 2px solid var(--ink); transition: background-color .18s; }
.show:hover { background: var(--riso-soft); }
.show__when { font-family: var(--mono); line-height: 1; text-align: center; }
.show__d { display: block; font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: .82; font-variant-numeric: tabular-nums; }
.show__m { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.show__y { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.show__what h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: .95; text-transform: uppercase; margin: 0 0 .12em; }
.show__sup { margin: 0 0 .5em; font-size: .98rem; color: var(--muted); }
.show__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.show__time { font: 500 .8rem/1 var(--mono); color: var(--muted); }
.show__do { display: grid; justify-items: end; gap: 9px; }
.shows__empty { margin-top: 26px; color: var(--muted); }

.recur { margin-top: clamp(38px, 5vw, 58px); border: 2px solid var(--ink); padding: 26px 24px; background: var(--card); }
.recur h3 { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .01em; }
.recur ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.recur li { display: grid; gap: 3px; }
.recur b { font-size: 1rem; }
.recur span { font-size: .92rem; color: var(--muted); }

/* ── Archives ──────────────────────────────────────────────────────────── */
.archives { background: var(--ink); color: var(--on-dark); padding: clamp(60px, 8vw, 104px) 0; }
.archives .eyebrow { color: var(--on-dark-dim); }
.archives h2 { color: #fff; }
.archives .section-head__note { color: var(--on-dark-dim); }
.past { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.past li { break-inside: avoid; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(237, 231, 220, .16); }
.past time { font: 500 .8rem/1.5 var(--mono); color: var(--riso); }
.past span { font-size: .95rem; }
.past__note { margin: 26px 0 0; font-size: .88rem; color: var(--on-dark-dim); }
.past__note a { color: var(--riso); font-weight: 600; }

/* ── Le lieu ───────────────────────────────────────────────────────────── */
.lieu { padding: clamp(60px, 8vw, 104px) 0; }
.lieu__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: start; }
.lieu__text p { color: var(--muted); max-width: 56ch; }
.tags { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 7px 14px; border: 1.5px solid var(--ink); font: 600 .78rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.lieu__card { border: 2px solid var(--ink); background: var(--card); padding: 26px 24px; }
.lieu__card h3 { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.lieu__card ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.lieu__card li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px dotted var(--line); }
.lieu__card li:last-child { border-bottom: 0; }
.lieu__fine { margin: 0; font-size: .86rem; color: var(--muted); }

/* ── Nous suivre ───────────────────────────────────────────────────────── */
.suivre { background: var(--card); border-block: 2px solid var(--ink); padding: clamp(60px, 8vw, 104px) 0; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lk { display: grid; gap: 6px; padding: 22px 22px 24px; border: 2px solid var(--ink); background: var(--paper); text-decoration: none; transition: transform .14s, background-color .14s, box-shadow .14s; }
.lk:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--riso); background: var(--riso-soft); }
.lk b { font-family: var(--display); font-weight: 800; font-size: 1.55rem; text-transform: uppercase; line-height: 1; }
.lk span { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.suivre__fine { margin: 26px 0 0; font-size: .9rem; color: var(--muted); max-width: 70ch; }

/* ── Nous trouver ──────────────────────────────────────────────────────── */
.contact { background: var(--ink); color: var(--on-dark); padding: clamp(60px, 8vw, 104px) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.contact .eyebrow { color: var(--on-dark-dim); }
.contact h2 { color: #fff; }
.contact__lede { color: var(--on-dark-dim); max-width: 46ch; }
.contact__list { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 15px; }
.contact__list li { display: grid; gap: 3px; }
.contact__list b { font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-dim); }
.contact__list a { color: var(--on-dark); text-decoration: none; border-bottom: 1.5px solid rgba(237, 231, 220, .3); justify-self: start; transition: color .14s, border-color .14s; }
.contact__list a:hover { color: var(--riso); border-bottom-color: var(--riso); }

.hours { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .94rem; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid rgba(237, 231, 220, .14); text-align: left; }
.hours th { font-weight: 500; color: var(--on-dark-dim); }
.hours td { text-align: right; font-family: var(--mono); font-size: .86rem; }
.hours .closed { color: rgba(237, 231, 220, .4); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--riso); font-weight: 700; }
.hours__exc { list-style: none; margin: 14px 0 0; padding: 0; font-size: .86rem; color: var(--on-dark-dim); display: grid; gap: 6px; }
.hours__fine { margin: 14px 0 0; font-size: .84rem; color: var(--on-dark-dim); }

.contact__map { border: 2px solid rgba(237, 231, 220, .22); min-height: 440px; }
.contact__map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border-top: 2px solid var(--ink); padding: clamp(44px, 6vw, 68px) 0 26px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.foot__brand p { font-size: .9rem; color: var(--muted); max-width: 34ch; margin-top: 12px; }
.foot h3 { font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.3em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
.foot a { text-decoration: none; color: var(--text); transition: color .14s; }
.foot a:hover { color: var(--riso); }
.foot li { color: var(--muted); }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.foot__credit a { color: var(--riso); font-weight: 600; }

/* ── Adaptation ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .lieu__grid, .contact__grid { grid-template-columns: 1fr; }
  .contact__map, .contact__map iframe { min-height: 300px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .past { columns: 1; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .show { grid-template-columns: 78px 1fr; }
  .show__d { font-size: 2.5rem; }
  .show__do { grid-column: 1 / -1; justify-items: start; margin-top: 4px; }
  .counts__grid div { border-left: 0; border-top: 1.5px solid rgba(255, 255, 255, .28); padding-left: 0; }
  .counts__grid div:first-child { border-top: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__actions .btn, .show__do .btn { width: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mouvement — voir anim.js. Sans JavaScript, en impression, ou si
   l'utilisateur préfère réduire les animations : js-anim n'est jamais posée
   et rien n'est masqué.
   ════════════════════════════════════════════════════════════════════════ */
.js-anim [data-reveal]:not([data-revealed]) { opacity: 0; }
.js-anim [data-reveal-group]:not([data-revealed]) > :not([hidden]) { opacity: 0; }
.js-anim [data-reveal="media"]:not([data-revealed]) img { transition: none; }

.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; will-change: transform; }

@media print {
  .top, .burger, .hero__actions, .contact__map, .ticker, .links { display: none !important; }
  .hero, .archives, .contact, .counts { background: none; color: #000; }
  .hero__ink { display: none; }
  body { background: #fff; color: #000; }
}