/* Pages statiques générées par scraper/scrape.py (e/, i/, d/, s/, p/).
   Même charte que le site (DESIGN.md) : Newsreader pour les titres, Instrument Sans
   pour le reste, neutres zinc clair / sombre, filets plutôt qu'ombres, la couleur
   ne sert qu'à coder la discipline. Pas de JavaScript requis : il ne fait que
   filtrer la liste par discipline. */

:root {
  --background: 0 0% 100%; --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 40%;
  --accent: 240 4.8% 95.9%;
  --border: 240 5.9% 90%;
  --control: 240 3.8% 56%;              /* bordure des contrôles : 3:1 sur le fond */
  --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%;
  --ring: 240 5.9% 10%;
  --brand: 224 64% 42%;
  --radius: 6px; --radius-lg: 8px;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 3.9%; --foreground: 0 0% 98%;
    --card: 240 10% 5.5%;
    --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --border: 240 3.7% 15.9%; --control: 240 3.8% 40%;
    --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%;
    --ring: 240 4.9% 83.9%; --brand: 224 100% 78%;
  }
}
:root[data-theme="dark"] {
  --background: 240 10% 3.9%; --foreground: 0 0% 98%;
  --card: 240 10% 5.5%;
  --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --border: 240 3.7% 15.9%; --control: 240 3.8% 40%;
  --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%;
  --ring: 240 4.9% 83.9%; --brand: 224 100% 78%;
}

*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font: 400 1rem/1.55 var(--sans); color: hsl(var(--foreground)); background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: .75rem; top: -4rem; z-index: 50; background: hsl(var(--background)); border: 1px solid hsl(var(--control)); border-radius: var(--radius); padding: .5rem 1rem; font-weight: 500; }
.skip:focus { top: .75rem; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.wrap.narrow { max-width: 44rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }

/* ── En-tête ─────────────────────────────────────────────────────────── */
header.top { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
header.top .bar { max-width: 64rem; margin: 0 auto; padding: 0 1rem; height: 3.5rem; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 640px) { header.top .bar { padding: 0 1.5rem; } }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; flex-shrink: 0; }
.brand span { font: 500 1.5rem/1 var(--serif); }
.brand svg { display: block; }
.brand-dot { fill: hsl(var(--brand)); }
header.top nav { display: none; margin-left: .5rem; gap: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
header.top nav a { text-decoration: none; padding: .375rem .75rem; border-radius: var(--radius); }
header.top nav a:hover, header.top nav a[aria-current] { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
@media (min-width: 840px) { header.top nav { display: flex; } }
header.top .btn { margin-left: auto; }

/* ── Boutons, puces ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius); background: hsl(var(--background)); color: inherit; font: 500 .875rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: hsl(var(--accent)); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.btn-primary:hover { background: hsl(var(--primary) / .9); }
.btn-sm { min-height: 2.25rem; padding: 0 .75rem; }
@media (pointer: coarse) { .btn { min-height: 2.75rem; } }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }

.chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; padding: 0 .75rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius); background: hsl(var(--background)); color: inherit; font: 500 .875rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.chip:hover { background: hsl(var(--accent)); }
.chip[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.chip .n { font-weight: 400; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: inherit; opacity: .8; }
.chip i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dc, hsl(var(--muted-foreground))); }
@media (pointer: coarse) { .chip { min-height: 2.75rem; } }

/* ── Titres et entête de page ───────────────────────────────────────── */
.crumb { margin: 1.5rem 0 0; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.hero { padding: 1.25rem 0 1.5rem; }
.kind { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.kind .dot, .tags .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dc, hsl(var(--muted-foreground))); flex-shrink: 0; }
h1.display { margin: 0; font: 500 clamp(2.25rem, 6vw, 3.75rem)/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; max-width: 22ch; }
.wrap.narrow h1.display { font-size: clamp(2rem, 5vw, 3rem); max-width: none; }
.lede { margin: 1.25rem 0 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.count { margin: 1.25rem 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); }
.count b { color: hsl(var(--foreground)); font: 500 1.375rem/1 var(--serif); font-variant-numeric: tabular-nums; margin-right: .125rem; }
.subs { margin: 1rem 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; max-width: 40rem; }
.subs a { color: inherit; }
h2.sec { margin: 2.5rem 0 .75rem; font: 500 1.5rem/1.2 var(--serif); }
h2.sec small { font: 400 .875rem/1 var(--sans); color: hsl(var(--muted-foreground)); margin-left: .5rem; }

/* ── À la une ───────────────────────────────────────────────────────── */
.featured { display: flex; gap: 1rem; margin: 0 -1rem; padding: 0 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.featured::-webkit-scrollbar { display: none; }
.featured { scroll-padding-inline: 1rem; }
.featured .fcard { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 720px) { .featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; overflow: visible; } }
.fcard a { display: block; text-decoration: none; }
.fcard .im { display: block; aspect-ratio: 16 / 10; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--muted)); }
.fcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcard .m { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 .25rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.fcard .m .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dc); flex-shrink: 0; }
.fcard .t { display: block; font: 500 1.1875rem/1.3 var(--serif); text-wrap: balance; }
.fcard a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.fcard .o { display: block; margin-top: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }

/* ── Barre de filtres et jours ──────────────────────────────────────── */
.bar2 { position: sticky; top: 0; z-index: 20; background: hsl(var(--background) / .96); border-bottom: 1px solid hsl(var(--border)); margin: 2rem -1rem 0; padding: .75rem 1rem; }
@media (min-width: 640px) { .bar2 { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
@supports (backdrop-filter: blur(1px)) { .bar2 { background: hsl(var(--background) / .85); backdrop-filter: blur(8px); } }
.scroller { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent); }
.scroller::-webkit-scrollbar { display: none; }
.scroller + .scroller { margin-top: .5rem; }
.daynav a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.25rem; min-height: 3rem; padding: .25rem .5rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius); text-decoration: none; font-size: .75rem; line-height: 1.2; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.daynav a b { font: 500 1.0625rem/1.1 var(--serif); color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.daynav a:hover { background: hsl(var(--accent)); }
.status { margin: .5rem 0 0; font-size: .875rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.empty { margin: 2rem 0; padding: 2rem 1rem; border: 1px dashed hsl(var(--control)); border-radius: var(--radius-lg); text-align: center; color: hsl(var(--muted-foreground)); }

/* ── Programme : un jour, une liste ─────────────────────────────────── */
.day { scroll-margin-top: 9rem; margin-top: 2.5rem; }
.day > h2 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .5rem; font: 500 1.5rem/1.2 var(--serif); }
.day > h2 .rel { font: 500 .75rem/1 var(--sans); padding: .25rem .5rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius); }
.day > h2 .n { margin-left: auto; font: 400 .875rem/1 var(--sans); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.prog { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border)); }
.ev { border-bottom: 1px solid hsl(var(--border)); }
.ev > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: start; padding: 1rem .25rem; text-decoration: none; }
.ev > a:hover { background: hsl(var(--accent)); }
.ev .tm { font-size: .9375rem; font-variant-numeric: tabular-nums; padding-top: .125rem; }
.ev .su b { font-weight: 600; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.ev .tt { display: block; font: 500 1.1875rem/1.3 var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
.ev .su { display: block; margin-top: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; margin-top: .375rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.tags .tag { padding: 0 .375rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); font-size: .75rem; line-height: 1.5; color: hsl(var(--foreground)); }
.ev img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
@media (max-width: 420px) { .ev > a { grid-template-columns: minmax(0, 1fr) auto; } .ev img { width: 3.5rem; height: 3.5rem; } .prog.plain .ev > a { grid-template-columns: 5rem minmax(0, 1fr); } }
.prog.plain .ev > a { grid-template-columns: 6.5rem minmax(0, 1fr); padding: .75rem .25rem; }
.prog.plain .ev .tm { color: hsl(var(--muted-foreground)); }
.prog.plain .ev .tt { font-size: 1.0625rem; }
.more { margin: 1.5rem 0 0; }

/* ── Blocs de liens : organisateurs, voir aussi ─────────────────────── */
.orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border)); }
.orgs li { border-bottom: 1px solid hsl(var(--border)); }
.orgs a, .orgs span.i { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .25rem; text-decoration: none; }
.orgs a:hover { background: hsl(var(--accent)); }
.orgs .c { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Annuaire des intervenants ──────────────────────────────────────── */
.az { margin: 2rem 0 0; }
.finder { display: block; width: 100%; max-width: 24rem; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius); background: hsl(var(--background)); color: inherit; font: 400 1rem/1 var(--sans); }
.finder::placeholder { color: hsl(var(--muted-foreground)); }
.letters a { min-width: 2.25rem; justify-content: center; padding: 0; }
.az h2 { margin: 2rem 0 .5rem; font: 500 1.5rem/1 var(--serif); scroll-margin-top: 9rem; }

/* ── Page événement ─────────────────────────────────────────────────── */
.cover { margin: 1.5rem 0 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--muted)); aspect-ratio: 16 / 9; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.when { margin: 1.5rem 0 0; padding: 1rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.when .d { font: 500 1.5rem/1.2 var(--serif); }
.when .d::first-letter { text-transform: uppercase; }
.when p { margin: .25rem 0 0; color: hsl(var(--muted-foreground)); }
dl.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.5rem; margin: 1.25rem 0 0; font-size: .9375rem; }
dl.facts dt { color: hsl(var(--muted-foreground)); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.prose { margin: 1.5rem 0 0; max-width: 40rem; color: hsl(var(--muted-foreground)); line-height: 1.65; }
.prose.main { color: hsl(var(--foreground)); }
.notice { margin: 1.5rem 0 0; padding: .75rem 1rem; border: 1px solid hsl(var(--control)); border-radius: var(--radius-lg); font-size: .9375rem; }
.hero > .notice { margin: 0 0 1rem; }
.fine { margin: 1rem 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.fine a { font-weight: 500; }

/* Boutons d'action d'une page événement : sous la date, bien visibles ; sur téléphone,
   ils restent collés au bas de l'écran pendant qu'on lit la fiche. */
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.cta .btn { flex: 1 1 14rem; min-height: 3.25rem; font-size: 1rem; }
.cta .ext { border-width: 2px; border-color: hsl(var(--foreground)); }
@media (max-width: 720px) { .cta .btn { flex: 1 1 100%; } }
.cta.stuck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; gap: .5rem; flex-wrap: nowrap;
             padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
             background: hsl(var(--background)); border-top: 1px solid hsl(var(--border)); }
.cta.stuck .btn { flex: 1 1 0; min-width: 0; min-height: 3rem; padding: 0 .5rem; font-size: .9375rem; white-space: normal; text-align: center; line-height: 1.2; }

/* ── Pied de page ───────────────────────────────────────────────────── */
footer.site { margin-top: 4rem; border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0 3rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
footer.site .wrap { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { footer.site .wrap { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
footer.site h2 { margin: 0 0 .75rem; font: 600 .875rem/1.2 var(--sans); color: hsl(var(--foreground)); }
footer.site ul { margin: 0; padding: 0; list-style: none; }
footer.site li + li { margin-top: .25rem; }
footer.site a { display: inline-block; padding: .125rem 0; text-decoration: none; }
footer.site a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
footer.site .about { max-width: 20rem; margin: .5rem 0 0; }
@media (pointer: coarse) { footer.site a { padding: .5rem 0; } }