/* Live in Paris — direction A "Programme": paper week planner (design/live-in-paris-directions.html);
   header: direction A "Barre unique" (design/header-directions.html, REM-26). */
:root {
  --paper: #f3efe6; --paper2: #ece2d4; --white: #fff;
  --ink: #17140f; --muted: #5f584c; --faint: #8a8273; --line: #c9c2b2; --rule: #17140f;
  --orange: #e0512f; --lime: #d8f56a; --gold: #b8862d; --blue: #2e6fd9;
  --plum: #171220; --plum2: #0d0a0f;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* liquid glass: translucent paper + a specular top highlight (REM-15) */
  --glass: rgba(243, 239, 230, .72); --glass2: rgba(255, 255, 255, .78);
  --gloss: rgba(255, 255, 255, .55); --gloss2: rgba(255, 255, 255, .75); --shade: rgba(23, 20, 15, .16);
  --spring: cubic-bezier(.2, .9, .25, 1.05); --ease-out: cubic-bezier(.2, .8, .2, 1); --hi: rgba(23, 20, 15, .07);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }   /* the sheet locks body scrolling: keep the page from jumping by a scrollbar width */
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--body); }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- header (REM-26, direction A "Barre unique"): small masthead, the search bar as the hero, pills ---------- */
.top { padding: 22px 32px 0; }
.mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; }
.mast h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: -.01em; }
.mast small { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 0; }
.link:hover { color: var(--ink); }
.hrow { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* Search bar: one glass pill. The chips of the active filters live inside it, before the text. */
.sbar { position: relative; flex: 1 1 620px; max-width: 620px; min-width: 0; }   /* 620 when the row allows it, shrinks on a 13" */
.srow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px 6px 18px; border-radius: 28px; border: 1.5px solid var(--ink); cursor: text;
  background: linear-gradient(180deg, var(--gloss), transparent 60%) var(--glass2);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 0 10px 26px -14px rgba(23, 20, 15, .45); transition: box-shadow .15s; }
.sbar:focus-within .srow { box-shadow: inset 0 1px 0 var(--gloss2), 0 0 0 3px rgba(216, 245, 106, .9), 0 10px 26px -14px rgba(23, 20, 15, .45); }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#chips { display: contents; }
#search { flex: 1 1 150px; min-width: 0; height: 32px; border: 0; background: none; padding: 0; font-size: 16px; color: var(--ink); outline: none; -webkit-appearance: none; border-radius: 0; }
#search::placeholder { color: var(--faint); opacity: 1; }
.chipin { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 100%; padding: 0 4px 0 11px; border-radius: 999px; background: var(--lime); color: #17140f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chipin.pop { animation: pop-in .18s var(--spring) backwards; }
.chipin > span { overflow: hidden; text-overflow: ellipsis; }
.chipin small { font-weight: 400; color: rgba(23, 20, 15, .6); font-size: 11px; }
.chipin .x { width: 20px; height: 20px; flex: none; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 10px; background: rgba(23, 20, 15, .12); color: #17140f; transition: background-color .15s, color .15s; }
.chipin .x:hover { background: #17140f; color: var(--lime); }
/* ★ of "Mes salles" inside a venue chip (REM-31): same size as the ✕, ink-on-lime, gold once favourite. */
.chipin .star { width: 20px; height: 20px; flex: none; border: 0; border-radius: 50%; padding: 0; margin-left: -2px; display: grid; place-items: center; font-size: 14px; line-height: 1; background: none; color: rgba(23, 20, 15, .55); transition: background-color .15s, color .15s; }
.chipin .star:hover { background: rgba(23, 20, 15, .12); color: #17140f; }
.chipin .star[aria-pressed="true"] { color: var(--gold); }
.chipin .star.pop { animation: star .45s var(--spring); }
.field .link { font-size: 12px; white-space: nowrap; margin: 0 6px 0 2px; }
.kbd { flex: none; font: 600 11px/1 var(--body); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: var(--white); white-space: nowrap; }
.back, #sclear { display: none; }
/* Pills: Genres ▾ next to the bar, the three toggles at the right. Lime = the one accent for any active state. */
.pills { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
#newonly { margin-left: auto; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap;
  background: linear-gradient(180deg, var(--gloss), transparent 70%) var(--glass2); box-shadow: inset 0 1px 0 var(--gloss2);
  transition: background-color .15s, box-shadow .15s, transform .12s; }
.pill:hover { background-color: var(--white); }
.pill:active { transform: scale(.96); }
.pill.on { background: var(--lime); color: #17140f; box-shadow: none; }
.pill small { font-weight: 400; color: var(--faint); font-size: 12px; }
.pill small:empty { display: none; }
.pill.on small { color: rgba(23, 20, 15, .6); }
.pill .car { font-size: 11px; color: var(--faint); margin-left: -2px; }
.pill.on .car, .pill[aria-expanded="true"] .car { color: inherit; }
.pill svg.i { width: 16px; height: 16px; margin-left: -3px; }
select.pill { padding: 0 12px; -webkit-appearance: none; appearance: none; }
select.pill[hidden] { display: none; }

/* Typeahead under the bar: grouped, typed rows (Artistes / Salles / Genres & styles), a footer of key hints. */
.ta { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 25; border-radius: 22px; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, var(--gloss), transparent 30%) var(--glass2); border: 1.5px solid var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 6px 6px 0 var(--line); transform-origin: 40px 0; animation: pop-in .18s var(--spring) backwards; }
.ta[hidden] { display: none; }
.ta.out { animation: pop-out .12s ease forwards; pointer-events: none; }
.ta .grp h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 16px 4px; display: flex; justify-content: space-between; gap: 8px; }
.ta .grp h4 small { font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--faint); }
.ta .grp + .grp { border-top: 1px dashed var(--line); }
.ta .row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.ta .row.hi { background: var(--lime); color: #17140f; }
.ta .row b { font-weight: 600; display: block; line-height: 1.2; overflow-wrap: anywhere; }
.ta .row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.ta .row .type { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; white-space: nowrap; }
.ta .row.hi small, .ta .row.hi .type { color: rgba(23, 20, 15, .65); }
.th { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font: 700 11px/1 var(--display); letter-spacing: .02em; color: #f2ecff; }
.th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th.av1 { background: radial-gradient(circle at 30% 25%, #7a5a9e, #171220 70%); }
.th.av2 { background: radial-gradient(circle at 70% 30%, #c98a3a, #3a2412 70%); }
.th.av3 { background: radial-gradient(circle at 30% 70%, #3f7a8a, #0d1a20 70%); }
.th.av4 { background: radial-gradient(circle at 50% 20%, #b0454f, #2a0d14 70%); }
.th.gl { background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); }
.th.gl svg.i { width: 14px; height: 14px; }
.th.gen { background: var(--ink); color: var(--paper); font-size: 14px; }
.th.sty { border: 1.5px dashed var(--ink); color: var(--ink); font-size: 14px; }
.ta .none { padding: 18px 16px; color: var(--faint); font-style: italic; font-size: 13px; }
.ta .foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-top: 1.5px solid var(--ink); font-size: 12px; color: var(--muted); background: var(--glass); }
.ta .foot kbd { font: 600 11px/1 var(--body); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; background: var(--white); margin-right: 3px; }
.ta .foot .free { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 12px; padding: 3px 8px; border-radius: 999px; text-align: left; transition: background-color .15s, color .15s; }
.ta .foot .free:hover, .ta .foot .free.hi { background: var(--lime); color: #17140f; }

/* Genres panel, anchored under the "Genres ▾" pill (app.js places it): the 19 genres, then the styles of the picked ones. */
.gpanel { position: absolute; z-index: 24; width: 720px; max-width: 100%; max-height: min(72vh, 680px); overflow-y: auto; color: var(--ink);
  background: linear-gradient(180deg, var(--gloss), transparent 30%) var(--glass2); border: 1.5px solid var(--ink); border-radius: 22px; padding: 18px 20px 20px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 6px 6px 0 var(--line); transform-origin: 40px 0; animation: pop-in .18s var(--spring) backwards; }
.gpanel[hidden] { display: none; }
.gpanel.out { animation: pop-out .12s ease forwards; pointer-events: none; }
.gpanel h4 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gpanel h4 .link { font-family: var(--body); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
.gpanel .gs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gpanel .g { height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; background: var(--white); color: var(--ink);
  transition: background-color .15s, border-color .15s, transform .12s; }
.gpanel .g:hover { border-color: var(--ink); }
.gpanel .g:active { transform: scale(.96); }
.gpanel .g small { color: var(--faint); font-size: 11.5px; font-weight: 400; }
.gpanel .g.zero { color: var(--faint); }
.gpanel .g.on { background: var(--lime); border-color: var(--ink); color: #17140f; }
.gpanel .g.on small { color: rgba(23, 20, 15, .6); }
.gpanel .sty { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.gpanel .sty[hidden] { display: none; }
.gpanel .sty .g { height: 28px; font-size: 12.5px; padding: 0 10px; border-style: dashed; }
.gpanel .sty .g.on { border-style: solid; }
.gpanel .sty input { border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: none; font: 400 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; padding: 4px 0; width: 200px; max-width: 45%; color: var(--ink); outline: none; }
.gpanel .sty input:focus { border-color: var(--ink); }
.gpanel .none { color: var(--faint); font-size: 13px; font-style: italic; }
.gpanel .gs .link { font-size: 12.5px; margin-left: 4px; }

/* ---------- month strip (REM-35) ---------- */
/* The one sticky glass band: the masthead and the bar scroll away, the strip stays over the grid — the month in view,
   the total, and a button per month that jumps to its heading. */
.weeknav { display: flex; align-items: center; gap: 14px; padding: 12px 32px 14px; margin-top: 22px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 15;
  background: linear-gradient(180deg, var(--gloss) 0, transparent 60%), var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 0 1px 0 var(--shade); }
.months { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.months button { height: 32px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--ink); background: none; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s, color .15s, transform .12s; }
.months button:hover { background: var(--hi); }
.months button:active { transform: scale(.96); }
.months button.on { background: var(--ink); color: var(--paper); }
.weeknav strong { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: .9; letter-spacing: -.01em; }
.weeknav em { font-style: normal; font-size: 13px; color: var(--muted); align-self: flex-end; padding-bottom: 3px; }
.weeknav .link { font-size: 13px; align-self: flex-end; padding-bottom: 3px; }

/* ---------- week grid ---------- */
.list { padding: 0 32px 40px; }
.list.swap { animation: fade-in .16s ease-out; }   /* the frame changed (week <-> every upcoming week) */
.monthhead { font-family: var(--display); font-size: 44px; font-weight: 900; line-height: .9; letter-spacing: -.01em; margin: 40px 0 6px; padding-bottom: 8px; border-bottom: 3px solid var(--rule);
  display: flex; align-items: baseline; gap: 10px; }
.monthhead:first-child { margin-top: 18px; }
.monthhead small { font-size: 18px; font-weight: 700; color: var(--muted); }
.monthhead em { font-style: normal; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); margin-left: auto; }
.weekhead { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 18px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.weekhead em { font-style: normal; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1.5px solid var(--rule); border-left: 1.5px solid var(--rule); background: var(--paper); }
.day { border-right: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); min-height: 320px; display: flex; flex-direction: column; min-width: 0; }
.day h2 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0; padding: 10px 12px; border-bottom: 1.5px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.day h2 em { font-style: normal; font-weight: 500; font-size: 13px; font-family: var(--body); color: var(--muted); white-space: nowrap; }
.day.today h2 { background: var(--ink); color: var(--paper); }
.day.today h2 em { color: var(--line); }
.day.past, .day.out { background: var(--paper2); min-height: 0; }
.day.past h2, .day.out h2 { color: var(--faint); }
.day .empty { padding: 24px 12px; font-size: 12px; color: var(--faint); font-style: italic; }
.day .empty .link { font-style: italic; color: var(--faint); font-size: 12px; }
.gig { padding: 10px 12px; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: start; cursor: pointer; }
.gig { transition: background-color .15s; }
.gig:hover { background: var(--white); }
.gig time { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; grid-row: span 3; min-width: 34px; }
.gig .who { font-weight: 700; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.gig .who span { display: block; font-weight: 400; margin-top: 1px; }
.gig .where { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.gig .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gig.cancelled .who { text-decoration: line-through; }
.tag { font-size: 11px; display: inline-block; padding: 1px 6px; border: 1px solid var(--ink); white-space: nowrap; line-height: 1.5; }
.tag.free { background: var(--lime); border-color: var(--lime); color: #17140f; }
.tag.new { background: var(--orange); border-color: var(--orange); color: #fff; }
.tag.sold { border-color: var(--line); color: var(--faint); text-decoration: line-through; }
.tag.cancel { background: var(--ink); color: var(--paper); }
.tag.status { background: var(--gold); border-color: var(--gold); color: #fff; padding: 1px 5px; font-weight: 700; }   /* ☆ intéressé (gold) · ✓ j'y vais (lime) */
.tag.status.going { background: var(--lime); border-color: var(--lime); color: #17140f; }
.tag.sub { font: inherit; font-size: 11px; line-height: 1.5; background: none; border: 1px dashed var(--line); color: var(--muted); cursor: pointer; }
.tag.sub:hover { border-color: var(--ink); color: var(--ink); }
.tag.sub.on { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); }
.list > .empty { color: var(--muted); padding: 60px 0; text-align: center; font-style: italic; }
.report { color: var(--muted); font-size: 12px; padding: 20px 0; }
.report summary { cursor: pointer; }
code { background: var(--paper2); padding: 1px 4px; }

/* ---------- detail sheet ---------- */
.detail { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; }
.detail::before { content: ""; position: absolute; inset: 0; background: rgba(23, 20, 15, .55); }   /* the veil, faded on its own */
.detail[hidden] { display: none; }
.sheet { position: relative; width: min(640px, 100%); height: 100%; overflow-y: auto; background: var(--paper); border-left: 2px solid var(--ink); }
/* Open: the veil fades in (opacity) while the sheet slides in from the right (transform only, soft ease-out, no
   overshoot); close reverses, faster. app.js keeps .closing until the veil's fade ends, and .moving on the sheet
   only while it slides, so the compositor layer exists just for the motion. */
.detail::before { animation: fade-in .22s ease backwards; }
.sheet { animation: sheet-in .32s var(--ease-out) backwards; }
.sheet.moving { will-change: transform; }
.detail.closing { pointer-events: none; }
.detail.closing::before { animation: fade-out .2s ease forwards; }
.detail.closing .sheet { animation: sheet-out .2s ease-in forwards; }
/* In the sheet's flow (sticky, zero footprint) so it travels with the sheet and stays put while the sheet scrolls. */
.close { position: sticky; top: 12px; z-index: 2; display: block; margin: 0 12px -36px auto; color: var(--ink); border: 1.5px solid var(--ink); width: 36px; height: 36px; font-size: 16px;
  background: linear-gradient(180deg, var(--gloss), transparent 60%) var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2); transition: background-color .15s, color .15s, transform .12s; }
.close:hover { background: var(--ink); color: var(--paper); }
.close:active { transform: scale(.94); }
.hero { position: relative; min-height: 210px; background: var(--plum) center/cover no-repeat; display: flex; align-items: flex-end; color: #f2ecff;
  will-change: transform; }   /* parallax: app.js translates it on sheet scroll, the body slides over it */
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,15,.1) 0%, rgba(13,10,15,.35) 45%, rgba(13,10,15,.92) 100%); }
.hero-text { position: relative; padding: 24px; width: 100%; }
.hero-text > * { animation: rise .42s var(--ease-out) backwards; }
.hero-text > :nth-child(1) { animation-delay: .12s; } .hero-text > :nth-child(2) { animation-delay: .17s; }
.hero-text > :nth-child(3) { animation-delay: .22s; } .hero-text > :nth-child(4) { animation-delay: .27s; }
.hero-text .when { color: var(--lime); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; width: fit-content; }
.hero-text h2 { margin: 6px 0 2px; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .95; letter-spacing: -.01em; }
/* The title is the link to the event page: dotted underline, a small ↗ (REM-13 folded into the lean sheet). */
.hero-text h2 a { color: inherit; text-decoration: underline dotted rgba(242, 236, 255, .55); text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color .15s; }
.hero-text h2 a:hover { text-decoration-color: var(--lime); }
.hero-text h2 .ext { font-family: var(--body); font-weight: 400; font-size: 14px; vertical-align: top; margin-left: 5px; opacity: .75; }
.hero-text .support { font-size: 15px; color: #d9d0e6; }
.body { padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; background: var(--paper); }
.body h3 { margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.body p { margin: 0; line-height: 1.5; }
/* Action row (A' V1 "Menu"): four equal tiles in one ruled box — Billets (filled, price in the display face),
   Intéressé ? (status menu), Agenda, WhatsApp — each a 24px line icon over a small Archivo label.
   Without a ticket link there is no Billets tile: the three others stretch (.three, REM-28). */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--paper); }
.actions.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions > * { min-width: 0; border-left: 1.5px solid var(--ink); }
.actions > :first-child { border-left: 0; }
.tile { display: grid; place-items: center; align-content: center; gap: 4px; width: 100%; height: 100%; min-height: 64px;
  margin: 0; padding: 8px 6px; border: 0; border-radius: 0; text-align: center; text-decoration: none; font-weight: 500; font-size: 12.5px; line-height: 1.15;
  background: none; color: var(--ink); transition: background-color .15s, color .15s; }
.tile:hover { background: var(--hi); }
.tile .i { width: 24px; height: 24px; display: block; }
.tile .lbl { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; white-space: nowrap; }
.tile .chev { width: 13px; height: 13px; flex: none; opacity: .7; }
.tile[aria-expanded="true"] { background: var(--paper2); }   /* while its menu is open */
.tile[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tile b { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; }
.tile small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 500; }
.tile.primary { background: var(--ink); color: var(--paper); }
.tile.primary:hover { background: var(--plum); }
.tile.off, .tile.off:hover { background: var(--paper2); color: var(--faint); cursor: default; }
.tile.on { background: var(--gold); color: #fff; }
.tile.on:hover { background: #a97a26; }
.tile.on.going { background: var(--lime); color: #17140f; }   /* J'y vais: the lime accent, ink text (REM-28) */
.tile.on.going:hover { background: #cbeb52; }
#statusbtn.pop { animation: pop .36s var(--ease-out); }
#statusbtn.pop .i { animation: star .45s var(--spring); }
/* Status menu (the mockup's inset): a white panel hanging under the tile, a small caret pointing up at it,
   one row per status (icon + label), "Retirer" once set. */
.status { position: relative; }
.statusmenu { position: absolute; top: calc(100% + 8px); left: -1.5px; z-index: 3; min-width: calc(100% + 3px); width: max-content;
  background: var(--white); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--paper2); color: var(--ink);
  transform-origin: 26px 0; animation: pop-in .18s var(--ease-out) backwards; }
.statusmenu::before { content: ""; position: absolute; left: 20px; top: -7.5px; width: 12px; height: 12px; background: var(--white);
  border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); transform: rotate(45deg); }
.statusmenu[hidden] { display: none; }
.statusmenu.out { animation: pop-out .12s ease forwards; pointer-events: none; }
.statusmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-radius: 0; background: none;
  text-align: left; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .12s, color .12s; }
.statusmenu button + button { border-top: 1px dashed var(--line); }
.statusmenu button:hover, .statusmenu button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.statusmenu button .i { width: 17px; height: 17px; flex: none; }
.statusmenu button[aria-checked="true"] { font-weight: 700; }
.statusmenu button[aria-checked="true"]::after { content: ""; width: 6px; height: 6px; margin-left: auto; background: currentColor; }   /* current */
.statusmenu button.rm { color: var(--muted); }
.statusmenu button.rm:hover, .statusmenu button.rm:focus-visible { color: var(--paper); }
/* Venue (the name filters the grid on the venue, ★ marks it as a favourite — REM-28), meta line, player block */
.venue { line-height: 1.45; }
.venue b { font-weight: 700; font-size: 15px; }
.venue .vname { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.venue .vname:hover { text-decoration: underline solid var(--ink); text-decoration-thickness: 1.5px; }
.venue .star { background: none; border: 0; padding: 0 2px; margin: 0 2px 0 6px; font-size: 19px; line-height: 1; color: var(--faint); vertical-align: -2px; cursor: pointer;
  transition: color .15s, transform .12s; }
.venue .star:hover { color: var(--gold); }
.venue .star[aria-pressed="true"] { color: var(--gold); }
.venue .star.pop { animation: star .45s var(--spring); }
.venue span { color: var(--muted); font-size: 13px; }
.venue a { color: var(--ink); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.player iframe { display: block; width: 100%; height: 300px; border: 1.5px solid var(--ink); background: var(--white); }
.player.bandcamp iframe { height: 120px; }   /* EmbeddedPlayer size=large, tracklist=false, artwork=small */
.player.spotify iframe { height: 352px; }
.player .via { margin-top: 4px; font-size: 11px; }
/* "En live" (REM-30): a 16:9 thumbnail tile with an ink play glyph and the title in the hero style; the iframe only
   replaces it on tap. Without a resolved video, a plain link to the YouTube search. */
.live { display: flex; flex-direction: column; gap: 6px; }
.live .yt { position: relative; display: block; aspect-ratio: 16 / 9; width: 100%; border: 1.5px solid var(--ink); background: var(--plum) center/cover no-repeat;
  padding: 0; margin: 0; overflow: hidden; cursor: pointer; color: #f2ecff; text-align: left; font: inherit; border-radius: 0; }
.live .yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.live .yt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,15,0) 40%, rgba(13,10,15,.88) 100%); }
.live .yt .play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); transition: transform .15s; }
.live .yt .play circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; }
.live .yt .play path { fill: var(--paper); }
.live .yt:hover .play, .live .yt:focus-visible .play { transform: translate(-50%, -50%) scale(1.08); }
.live .yt:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.live .yt .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; }
.live .yt .t { font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .yt .y { color: var(--lime); font-weight: 700; font-size: 12px; letter-spacing: .08em; flex: none; }
.live iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1.5px solid var(--ink); background: var(--plum); }
.live .via { margin-top: -2px; font-size: 11px; }
.live .ytsearch { color: var(--ink); font-size: 13px; }
#artist { display: flex; flex-direction: column; gap: 10px; }
#artist:empty { display: none; }
#artist h3 { margin: 0 0 -2px; }
#artist.swap { animation: xfade .24s ease-in-out; }   /* switching act: out, swap the content at mid-point, in */
/* Multi-artist show: one pill per act under the "Écouter" heading (headliner first), the active one filled ink. */
.listen { display: flex; flex-direction: column; gap: 8px; margin-bottom: -8px; }
.listen h3 { margin: 0; }
.artist-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.artist-pick button { border: 1.5px solid var(--line); background: none; padding: 5px 11px; font-size: 12px; font-weight: 500; border-radius: 0;
  transition: background-color .15s, border-color .15s, color .15s; }
.artist-pick button:hover { border-color: var(--ink); }
.artist-pick button.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.esprit:empty { display: none; }
.esprit a { color: var(--ink); }
.skel { height: 10px; width: 38%; background: linear-gradient(90deg, var(--paper2) 25%, var(--line) 50%, var(--paper2) 75%); background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite; }
.muted { color: var(--muted); font-size: 13px; }
.blurb .link, .blurb .muted { font-size: 13px; white-space: nowrap; }
.blurb .link { font-style: italic; }
.links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.links a { color: var(--muted); }

/* ---------- Spotify "Mes artistes" (REM-9): avatar button next to the pill, account menu, connect dialog ---------- */
.spme { width: 30px; height: 30px; flex: none; margin-left: -2px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); overflow: hidden;
  display: grid; place-items: center; background: var(--white); color: var(--ink); font-size: 14px; line-height: 1; transition: box-shadow .15s, transform .12s; }
.spme[hidden] { display: none; }
.spme img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spme:hover, .spme[aria-expanded="true"] { box-shadow: 0 0 0 2.5px var(--lime); }
.spme:active { transform: scale(.94); }
.spmenu { position: absolute; z-index: 24; width: max-content; min-width: 280px; max-width: 100%; color: var(--ink); padding: 14px 16px 16px;
  background: linear-gradient(180deg, var(--gloss), transparent 30%) var(--glass2); border: 1.5px solid var(--ink); border-radius: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 6px 6px 0 var(--line); transform-origin: 40px 0; animation: pop-in .18s var(--spring) backwards; }
.spmenu[hidden] { display: none; }
.spmenu.out { animation: pop-out .12s ease forwards; pointer-events: none; }
.spwho { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spwho img, .spwho .spav { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); object-fit: cover; display: grid; place-items: center; }
.spwho .spav svg.i { width: 20px; height: 20px; }
.spwho b { display: block; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.spwho small { display: block; color: var(--muted); font-size: 12px; }
.sprow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mi { height: 32px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 600;
  transition: background-color .15s, color .15s, transform .12s; }
.mi.sec { background: none; color: var(--ink); }
.mi:hover, .mi:focus-visible { background: var(--lime); color: #17140f; outline: none; }
.mi:active { transform: scale(.96); }
.mi:disabled { opacity: .5; cursor: default; }
.spnote { margin-top: 10px; font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.45; }
.spnote.err { color: var(--orange); font-style: normal; }
/* Connect dialog: a veil over the page, one glass box in the middle (full width with margins on a phone). */
.spveil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(23, 20, 15, .45); animation: fade-in .18s ease backwards; }
.spveil[hidden] { display: none; }
.spveil.out { animation: fade-out .12s ease forwards; pointer-events: none; }
.spbox { position: relative; width: min(440px, 100%); color: var(--ink); padding: 22px 24px 24px; border: 1.5px solid var(--ink); border-radius: 22px;
  background: linear-gradient(180deg, var(--gloss), transparent 30%) var(--glass2);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--gloss2), 6px 6px 0 var(--line); animation: pop-in .18s var(--spring) backwards; }
.spbox h4 { margin: 0 36px 12px 0; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.spbox h4 svg.i { width: 24px; height: 24px; }
.spbox p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.spbox p b { color: var(--ink); }
.spbox .x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: none; font-size: 13px;
  display: grid; place-items: center; transition: background-color .15s, color .15s; }
.spbox .x:hover { background: var(--ink); color: var(--paper); }
.spbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14px; transition: background-color .15s, color .15s, transform .12s; }
.spbtn:hover, .spbtn:focus-visible { background: var(--lime); color: #17140f; }
.spbtn:active { transform: scale(.97); }
.spbtn.sec { background: none; color: var(--ink); }
.spbtn svg.i { width: 18px; height: 18px; }
.spbox .spwho { margin-top: 4px; }
.spbox .sprow { margin-top: 16px; }
@media (max-width: 560px) {
  .spmenu { left: 0 !important; right: 0; width: auto; min-width: 0; border-radius: 16px; }
  .spbox { padding: 18px 18px 20px; border-radius: 18px; }
  .spbox h4 { font-size: 24px; }
  .spbtn { width: 100%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .spmenu, .spbox { background: var(--white); } }
@media (prefers-reduced-motion: reduce) {
  .spmenu, .spbox, .spveil { animation: fade-in .12s ease backwards; }
  .spmenu.out, .spveil.out { animation: fade-out .12s ease forwards; }
  .spme, .mi, .spbtn, .spbox .x { transition: none; }
  .spme:active, .mi:active, .spbtn:active { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .top, .weeknav, .list { padding-left: 16px; padding-right: 16px; }
  .sbar { flex-basis: 100%; max-width: none; }   /* the pills wrap under the bar */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 1.5px solid var(--rule); }
  .day:nth-child(2n) { border-right: 0; }
  .day { min-height: 0; }
}
@media (max-width: 560px) {
  .top { padding-top: 14px; }
  .mast { align-items: baseline; }
  .mast h1 { font-size: 30px; }
  #meta .d { display: none; }   /* only "N cette semaine" */
  .hrow { margin-top: 12px; gap: 10px; }
  .srow { min-height: 48px; padding: 4px 12px 4px 14px; border-radius: 24px; }
  #search { font-size: 15px; height: 30px; }
  .kbd { display: none; }
  /* the pills scroll in one row */
  .pills { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .pills::-webkit-scrollbar { display: none; }
  .pill { height: 34px; padding: 0 12px; font-size: 13px; flex: none; }
  #newonly { margin-left: 0; }
  .gpanel { left: 0 !important; right: 0; width: auto; border-radius: 18px; padding: 14px 14px 16px; }
  .weeknav { margin-top: 14px; padding: 8px 16px 10px; gap: 10px; }
  .weeknav strong { font-size: 34px; }
  /* the month buttons scroll in one row under the label */
  .months { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .months::-webkit-scrollbar { display: none; }
  .months button { height: 30px; padding: 0 11px; font-size: 12.5px; flex: none; }
  .monthhead { font-size: 32px; margin-top: 30px; }
  .monthhead small { font-size: 14px; }
  .grid { grid-template-columns: 1fr; }
  .day.past { display: none; }
  .hero-text h2 { font-size: 34px; }
  .hero { min-height: 180px; }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2 × 2 */
  .tile { min-height: 60px; }
  .actions > :nth-child(3) { border-left: 0; }
  .actions > :nth-child(n+3) { border-top: 1.5px solid var(--ink); }
  .actions.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three tiles stay on one row */
  .actions.three > :nth-child(3) { border-left: 1.5px solid var(--ink); border-top: 0; }
  /* Focusing the bar opens it as a full-screen sheet: the bar on top (‹ back), the results below, the hint at the bottom. */
  body.searching { overflow: hidden; }
  body.searching .sbar { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; max-width: none; background: var(--paper); }
  body.searching .srow, body.searching .sbar:focus-within .srow { flex: none; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 58px; padding: 8px 12px 8px 4px; }
  body.searching .back { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--ink); font-size: 24px; line-height: 1; padding: 0 0 3px; }
  body.searching .srow > svg.i { display: none; }
  body.searching #sclear { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; background: var(--paper2); color: var(--muted); font-size: 11px; }
  body.searching #sclear[hidden] { display: none; }
  body.searching .ta { position: static; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  body.searching .ta[hidden] { display: none; }
  body.searching .ta .row { padding: 9px 16px; }
  body.searching .ta .foot { position: sticky; bottom: 0; margin-top: auto; padding: 10px 16px; background: var(--paper); }
  body.searching .ta .foot span { display: none; }
  body.searching .ta .foot .free { margin-left: 0; padding-left: 0; }
}

/* ---------- motion ---------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateX(100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes pop { 35% { transform: scale(1.1); } 70% { transform: scale(.97); } }
@keyframes star { 40% { transform: rotate(-24deg) scale(1.55); } }
@keyframes xfade { 50% { opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
/* No backdrop-filter (old Safari/Firefox): the same surfaces, opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .weeknav, .close { background: var(--paper); }
  .srow, .ta, .gpanel, .statusmenu { background: var(--white); }
}
/* Reduced motion: no slides, no parallax (app.js skips it); 120ms opacity fades only. */
@media (prefers-reduced-motion: reduce) {
  .detail::before, .sheet, .ta, .gpanel, .statusmenu, .list.swap { animation: fade-in .12s ease backwards; }
  .detail.closing::before, .detail.closing .sheet, .ta.out, .gpanel.out, .statusmenu.out { animation: fade-out .12s ease forwards; }
  .hero-text > *, #statusbtn.pop, #statusbtn.pop .i, #statusbtn.pop .star, #artist.swap, .skel, .chipin.pop { animation: none; }
  .list, .pill, .months button, .gpanel .g, .chipin .x, .close, .tile, .artist-pick button, .statusmenu button, .live .yt .play { transition: none; }
  .pill:active, .months button:active, .gpanel .g:active, .tag.sub:active, .close:active, .tile:active { transform: none; }
  .hero, .sheet.moving { will-change: auto; }
}