/* CIMAISE — système : grille 12 colonnes, gouttière fixe, échelle 4 pt, type fluide.
   Registre institutionnel : typographie, espace, couleur fonctionnelle. */

:root {
  /* échelle d'espacement (base 4 pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* grille */
  --gutter: clamp(16px, 2.5vw, 24px);
  --margin: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  /* type fluide */
  --t-xs: 10.5px;
  --t-s: 12.5px;
  --t-m: 14px;
  --t-base: 15px;
  --t-l: clamp(16px, 1.5vw, 18px);
  --t-xl: clamp(22px, 2.6vw, 28px);
  --t-xxl: clamp(26px, 3.2vw, 34px);

  --paper: #F7F6F3;
  --paper-2: #ECEAE5;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #595751;
  --rule: #1A1A1A;
  --rule-2: #D8D6CF;
  --ikb: #002FA7;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  --c-peinture: #C22A40;
  --c-photo: #6D3AAE;
  --c-art-contemporain: #D96400;
  --c-histoire: #7D5B3A;
  --c-sculpture: #0B7E81;
  --c-mode-design: #C23A82;
  --c-illustration-bd: #B28200;
  --c-sciences: #366F96;
  --c-theatre: #3A7D44;
  --c-stand-up: #C75B12;
  --c-seul-en-scene: #6B8F3A;
  --c-lecture: #55636F;
  --c-opera: #1F2A63;
  --c-comedie-musicale: #9640B8;
  --c-danse: #D81E5B;
  --c-cirque: #D79A17;
  --c-cabaret: #A01A6E;
  --c-transformisme: #E24FA5;
  --c-magie: #46309E;
  --c-marionnettes: #2FA68F;
  --c-autre: #6E7987;
  --wk: rgba(26,26,26,.045);
}
:root[data-theme="dark"] {
  --paper: #121316;
  --paper-2: #212327;
  --card: #1A1C20;
  --ink: #EDEBE5;
  --ink-2: #9C9AA1;
  --rule: #EDEBE5;
  --rule-2: #33353A;
  --ikb: #5B7FE8;
  --c-peinture: #F0546B;
  --c-photo: #A87BE8;
  --c-art-contemporain: #F58A33;
  --c-histoire: #C29468;
  --c-sculpture: #2FB8BB;
  --c-mode-design: #EF6FB0;
  --c-illustration-bd: #E0B23A;
  --c-sciences: #67A3CF;
  --c-theatre: #5FBF6E;
  --c-stand-up: #F0894A;
  --c-seul-en-scene: #9BC46A;
  --c-lecture: #93A6B5;
  --c-opera: #8C9BE8;
  --c-comedie-musicale: #C583E0;
  --c-danse: #F56E9B;
  --c-cirque: #E9BC55;
  --c-cabaret: #E060B4;
  --c-transformisme: #F58BD0;
  --c-magie: #9B85E8;
  --c-marionnettes: #5BC9B4;
  --c-autre: #97A2B0;
  --wk: rgba(255,255,255,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121316;
    --paper-2: #212327;
    --card: #1A1C20;
    --ink: #EDEBE5;
    --ink-2: #9C9AA1;
    --rule: #EDEBE5;
    --rule-2: #33353A;
    --ikb: #5B7FE8;
    --c-peinture: #F0546B;
    --c-photo: #A87BE8;
    --c-art-contemporain: #F58A33;
    --c-histoire: #C29468;
    --c-sculpture: #2FB8BB;
    --c-mode-design: #EF6FB0;
    --c-illustration-bd: #E0B23A;
    --c-sciences: #67A3CF;
    --c-theatre: #5FBF6E;
    --c-stand-up: #F0894A;
    --c-seul-en-scene: #9BC46A;
    --c-lecture: #93A6B5;
    --c-opera: #8C9BE8;
    --c-comedie-musicale: #C583E0;
    --c-danse: #F56E9B;
    --c-cirque: #E9BC55;
    --c-cabaret: #E060B4;
    --c-transformisme: #F58BD0;
    --c-magie: #9B85E8;
    --c-marionnettes: #5BC9B4;
    --c-autre: #97A2B0;
    --wk: rgba(255,255,255,.05);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.5;
  padding-bottom: calc(58px + var(--sab));
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; border-radius: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* conteneur : tout se cale sur la même grille */
.shell { width: min(100% - 2 * var(--margin), var(--maxw)); margin-inline: auto; }

.cat-peinture { --cc: var(--c-peinture); }
.cat-photo { --cc: var(--c-photo); }
.cat-art-contemporain { --cc: var(--c-art-contemporain); }
.cat-histoire { --cc: var(--c-histoire); }
.cat-sculpture { --cc: var(--c-sculpture); }
.cat-mode-design { --cc: var(--c-mode-design); }
.cat-illustration-bd { --cc: var(--c-illustration-bd); }
.cat-sciences { --cc: var(--c-sciences); }
.cat-theatre { --cc: var(--c-theatre); }
.cat-stand-up { --cc: var(--c-stand-up); }
.cat-seul-en-scene { --cc: var(--c-seul-en-scene); }
.cat-lecture { --cc: var(--c-lecture); }
.cat-comedie-musicale { --cc: var(--c-comedie-musicale); }
.cat-cirque { --cc: var(--c-cirque); }
.cat-cabaret { --cc: var(--c-cabaret); }
.cat-transformisme { --cc: var(--c-transformisme); }
.cat-magie { --cc: var(--c-magie); }
.cat-marionnettes { --cc: var(--c-marionnettes); }
.cat-opera { --cc: var(--c-opera); }
.cat-danse { --cc: var(--c-danse); }
.cat-autre { --cc: var(--c-autre); }

/* étiquette catégorie : carré de couleur + petites capitales */
.klabel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.klabel::before { content: ''; width: 9px; height: 9px; background: var(--cc, var(--ink)); flex: 0 0 auto; }

/* ---------- Barre haute ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--paper); padding-top: var(--sat); border-bottom: 1px solid var(--rule); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s3);
}
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: .18em; line-height: 1; text-transform: uppercase; }
.brand-rail { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--s4); }
.city-pill { font-size: var(--t-s); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: var(--s2) 0; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; }

/* ---------- Recherche ---------- */
.search-overlay { position: fixed; inset: 0; z-index: 60; background: var(--paper); padding-top: calc(var(--s3) + var(--sat)); overflow-y: auto; }
.search-box { display: flex; gap: var(--s3); margin-bottom: var(--s4); align-items: center; }
.search-box input {
  flex: 1; font: inherit; font-size: 17px;
  border: none; border-bottom: 2px solid var(--rule);
  padding: var(--s3) 2px; background: transparent; color: var(--ink); border-radius: 0;
}
.search-box input:focus { outline: none; border-bottom-color: var(--ikb); }

/* ---------- Vues ---------- */
.view { padding-block: var(--s5) var(--s6); }

.day-heading .date-line { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .14em; }
.day-heading h1 { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -.02em; margin-top: var(--s2); line-height: 1.15; }
.day-note { font-size: var(--t-m); color: var(--ink-2); margin-top: var(--s2); }

.alert-banner {
  margin-top: var(--s5); padding: var(--s4);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-m); font-weight: 500; cursor: pointer; width: 100%; text-align: left;
}
.alert-banner b { font-weight: 700; }

/* ---------- Rangées éditoriales ---------- */
.row { margin-top: var(--s7); }
.row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  border-bottom: 2px solid var(--rule); padding-bottom: var(--s2);
}
.row-head h2 { font-size: var(--t-base); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.row-head h2.h-cat { color: var(--cc); }
.row-head .row-more { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); white-space: nowrap; letter-spacing: .04em; }
.row-scroll {
  display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin);
  scrollbar-width: none;
}
.row-scroll::-webkit-scrollbar { display: none; }

/* Tuile éditoriale : l'espace sépare, la typographie hiérarchise */
.mini-card {
  flex: 0 0 224px; scroll-snap-align: start;
  padding-block: var(--s4); text-align: left;
  display: flex; flex-direction: column; gap: 6px; min-height: 132px;
}
.mini-card .k { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.mini-card .t { font-size: var(--t-base); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.01em; }
.mini-card .sub { font-size: var(--t-s); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mini-card .v { font-size: var(--t-s); color: var(--ink-2); margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card .d { font-size: var(--t-s); color: var(--ink-2); }
.mini-card .d b { color: var(--ink); font-weight: 700; }

.stars { display: inline-flex; letter-spacing: 1px; color: var(--ink-2); font-size: 10px; }
.stars .off { opacity: .3; }

/* ---------- La frise ---------- */
#view-frise {
  display: flex; flex-direction: column;
  height: calc(100dvh - 62px - 56px - var(--sat) - var(--sab));
  padding-block: var(--s3) var(--s2);
}
.frise-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.frise-side { display: none; }

.f-toolbar { display: flex; align-items: center; gap: var(--s5); padding-bottom: var(--s3); }
.f-btn { font-size: var(--t-m); font-weight: 700; letter-spacing: .02em; padding: var(--s2) 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.f-btn.is-quiet { font-weight: 500; text-decoration: none; color: var(--ink-2); }
.f-count { margin-left: auto; font-size: var(--t-s); color: var(--ink-2); }

.frise-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tl-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--card); }
.tl-canvas {
  position: relative; min-height: 100%; padding-bottom: var(--s3);
  background-image: repeating-linear-gradient(90deg, var(--wk) 0 calc(var(--dw)*2), transparent calc(var(--dw)*2) calc(var(--dw)*7));
  background-position: var(--wk-off, 0) 0;
}
.tl-ruler { position: sticky; top: 0; z-index: 4; height: 38px; background: var(--card); }
.tl-m { position: absolute; top: 6px; font-size: var(--t-xs); font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .1em; padding-left: 6px; }
.tl-d { position: absolute; top: 23px; font-size: 9px; font-weight: 600; color: var(--ink-2); padding-left: 2px; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ikb); z-index: 3; }
.tl-today span {
  position: sticky; top: var(--s1); display: inline-block;
  background: var(--ikb); color: #fff; font-size: 9.5px; font-weight: 700;
  padding: 2px 5px; margin-left: 3px; white-space: nowrap; letter-spacing: .06em; text-transform: uppercase;
}

.trow { display: block; position: relative; width: 100%; height: 48px; text-align: left; padding-top: var(--s1); }
.trow:hover { background: var(--paper-2); }
.trow-top {
  position: sticky; left: var(--s2); z-index: 2;
  display: flex; gap: 7px; align-items: baseline;
  width: fit-content; max-width: calc(100vw - 64px); padding-inline: var(--s1);
}
.trow-top .tt { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.trow-top .tv { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.trow-top .td { font-size: 11px; font-weight: 700; color: var(--cc); white-space: nowrap; }
.trow .tb { position: absolute; left: 0; bottom: 10px; height: 7px; background: color-mix(in srgb, var(--cc) 26%, var(--card)); }
.trow .tb .tb-left { position: absolute; top: 0; bottom: 0; right: 0; background: var(--cc); }

/* ---------- Facettes ---------- */
.facets { display: flex; flex-direction: column; gap: var(--s5); }
.f-group h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-bottom: var(--s2); }
.f-opt {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  padding: var(--s2) 0; font-size: var(--t-m); min-height: 40px;
}
.f-opt .box {
  width: 15px; height: 15px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
  display: grid; place-items: center; font-size: 11px; line-height: 1; color: transparent;
}
.f-opt.is-on .box { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--paper); }
.f-opt .sw { width: 11px; height: 11px; background: var(--cc); flex: 0 0 auto; }
.f-opt .f-n { margin-left: auto; font-size: var(--t-s); color: var(--ink-2); }
.f-opt.is-on { font-weight: 700; }

.facet-sheet {
  position: fixed; z-index: 75; left: 0; right: 0; bottom: 0;
  max-height: 84dvh; display: flex; flex-direction: column;
  background: var(--paper); box-shadow: 0 -2px 0 var(--rule);
  animation: up .2s ease-out;
}
.facet-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s4) var(--margin) var(--s2); }
.facet-head h3 { font-size: var(--t-base); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.facet-head button { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); padding: var(--s1); }
.facet-body { overflow-y: auto; padding: var(--s2) var(--margin) var(--s3); }
.facet-foot { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--margin) calc(var(--s4) + var(--sab)); background: var(--paper); }
.facet-foot .clear { flex: 0 0 auto; font-size: var(--t-m); font-weight: 600; color: var(--ink-2); padding: var(--s3) 0; }
.facet-foot .apply { flex: 1; background: var(--ink); color: var(--paper); font-size: var(--t-m); font-weight: 700; padding: var(--s3); text-align: center; }

/* ---------- Listes détaillées ---------- */
.expo-card { display: block; width: 100%; text-align: left; border-top: 1px solid var(--rule-2); padding-block: var(--s4) var(--s5); }
.expo-card .line1 { display: flex; gap: var(--s3); align-items: flex-start; }
.expo-card .meta { flex: 1; min-width: 0; }
.expo-card .cat { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s1); }
.expo-card .t { font-size: var(--t-l); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.expo-card .sub { font-size: var(--t-m); color: var(--ink-2); margin-top: 1px; }
.expo-card .v { font-size: var(--t-m); color: var(--ink-2); margin-top: var(--s1); }
.expo-card .badges { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); }
.badge { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.badge.is-last { color: var(--ikb); font-weight: 700; }
.badge.is-new { color: var(--ikb); }
.expo-card .save { flex: 0 0 30px; width: 30px; height: 34px; display: grid; place-items: center; color: var(--ink-2); }
.expo-card .save.is-on { color: var(--ikb); }
.bar-wrap { position: relative; height: 10px; margin-top: var(--s3); }
.bar { position: absolute; top: 2px; height: 6px; background: color-mix(in srgb, var(--cc, var(--ink)) 26%, var(--paper)); }
.bar .left { position: absolute; top: 0; bottom: 0; right: 0; background: var(--cc, var(--ink)); }
.bar-dates { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 11.5px; color: var(--ink-2); }
.bar-dates .left-days { color: var(--ink); font-weight: 700; }
.time-ruler { position: relative; height: 22px; overflow: hidden; }
.time-ruler .tick { position: absolute; top: 4px; font-size: 9.5px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; padding-left: 4px; }
.now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ikb); }

/* ---------- Ma liste ---------- */
.seg { display: flex; gap: var(--s5); margin-bottom: var(--s2); }
.seg button { padding: var(--s2) 0 var(--s3); font-size: var(--t-m); font-weight: 600; color: var(--ink-2); }
.seg button.is-on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px var(--ink); }
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-2); font-size: var(--t-m); }
.empty .big { font-size: var(--t-l); font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.stats-band { display: flex; gap: var(--s6); margin-block: var(--s5) var(--s3); }
.stat .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.share-app { margin-top: var(--s7); font-size: var(--t-s); color: var(--ink-2); }
.share-app .btns { display: flex; gap: var(--s5); margin-block: var(--s2) var(--s3); }
.share-app button { font-size: var(--t-m); font-weight: 700; padding: var(--s2) 0; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.share-app code { font-size: var(--t-s); user-select: all; -webkit-user-select: all; }

/* ---------- Fiche ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.5); }
.sheet {
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto;
  background: var(--paper); box-shadow: 0 -2px 0 var(--rule);
  max-width: 760px; margin-inline: auto;
  padding: var(--s5) var(--margin) calc(var(--s5) + var(--sab));
  animation: up .2s ease-out;
}
@keyframes up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet, .facet-sheet { animation: none !important; } }
.sheet .close { position: sticky; top: 0; float: right; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; background: var(--paper); }
.sheet .cat-line { display: flex; gap: var(--s4); align-items: baseline; margin-bottom: var(--s2); }
.sheet .cat-line .avis { font-size: 11px; color: var(--ink-2); letter-spacing: .04em; }
.sheet h2 { font-size: var(--t-xl); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; padding-right: 40px; }
.sheet .sub2 { font-size: var(--t-l); font-weight: 500; color: var(--ink-2); margin-top: 3px; }
.sheet .venue-line { font-size: var(--t-m); margin-top: var(--s2); }
.sheet .badges { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
.sheet .summary { margin-top: var(--s4); font-size: var(--t-m); line-height: 1.6; }
.sheet .bar-block { margin-top: var(--s5); }
.sheet .practical { margin-top: var(--s4); }
.sheet .practical .p-row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; font-size: var(--t-m); }
.sheet .practical .k { color: var(--ink-2); flex: 0 0 auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.sheet .practical .val { text-align: right; }
.sheet .practical .warn { color: var(--ikb); font-weight: 700; }
.sheet .practical a { color: inherit; }
.sheet .actions { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.sheet .actions .primary { flex: 1 1 100%; background: var(--ikb); color: #fff; padding: var(--s4); font-size: var(--t-base); font-weight: 700; text-align: center; }
.sheet .actions .primary.is-on { background: var(--ink); color: var(--paper); }
.sheet .actions .secondary {
  flex: 1; box-shadow: inset 0 0 0 1px var(--ink); padding: var(--s3) var(--s2); font-size: var(--t-m); font-weight: 600;
  text-align: center; color: var(--ink); text-decoration: none; background: transparent;
}
.sheet .links { margin-top: var(--s5); font-size: var(--t-m); display: flex; flex-direction: column; gap: var(--s2); }
.sheet .links a { color: var(--ikb); font-weight: 500; }
.sheet .nearby { margin-top: var(--s5); }
.sheet .nearby h3, .sheet .seen-block h3 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.sheet .nearby .nb { display: flex; justify-content: space-between; gap: var(--s3); width: 100%; text-align: left; padding: var(--s2) 0; font-size: var(--t-m); }
.sheet .nearby .nb .w { color: var(--ink-2); font-weight: 600; font-size: var(--t-s); flex: 0 0 auto; }
.seen-block { margin-top: var(--s5); }
.seen-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.seen-row .rate { display: flex; gap: var(--s1); }
.seen-row .rate button { font-size: 24px; color: var(--rule-2); line-height: 1; }
.seen-row .rate button.on { color: var(--ikb); }
.seen-row input[type="date"] { font: inherit; font-size: var(--t-s); box-shadow: inset 0 0 0 1px var(--rule-2); border: none; padding: var(--s2); background: transparent; color: var(--ink); border-radius: 0; }
.seen-toggle { font-size: var(--t-m); font-weight: 700; padding: var(--s2) 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.seen-toggle.is-on { color: var(--ikb); }

/* ---------- Navigation basse ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: var(--paper); box-shadow: 0 -1px 0 var(--rule);
  padding: var(--s2) 0 calc(var(--s2) + var(--sab));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: var(--s1) var(--s5); position: relative; }
.tab.is-active { color: var(--ink); }
.tab-badge {
  position: absolute; top: 0; right: var(--s2); min-width: 15px; height: 15px;
  background: var(--ikb); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 var(--s1);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + var(--sab)); z-index: 80;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5); font-size: var(--t-m); font-weight: 500;
  max-width: 86vw; text-align: center;
}

:focus-visible { outline: 2px solid var(--ikb); outline-offset: 2px; }

/* =========================================================
   DESKTOP — la même grille, plus large
   ========================================================= */
@media (min-width: 1000px) {
  body { padding-bottom: var(--s6); }

  .tabbar { bottom: auto; top: calc(var(--s2) + var(--sat)); left: 50%; right: auto; transform: translateX(-50%); background: none; box-shadow: none; padding: var(--s2) 0; gap: var(--s6); justify-content: center; }
  .tab { flex-direction: row; font-size: var(--t-s); padding: var(--s2) 2px; letter-spacing: .1em; }
  .tab svg { display: none; }
  .tab.is-active { box-shadow: inset 0 -2px var(--ink); }
  .tab.is-active .tab-badge { top: 0; right: -14px; }

  .day-heading h1 { font-size: var(--t-xxl); }
  .row-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 var(--gutter); overflow: visible; margin: 0; padding: 0; }
  .mini-card { flex-basis: auto; min-height: 140px; }

  #view-frise { height: calc(100dvh - 86px - var(--sat)); }
  #view-frise .shell, .frise-layout { height: 100%; }
  .frise-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gutter); min-height: 0; }
  .frise-side { display: block; overflow-y: auto; min-height: 0; padding-right: var(--s2); }
  .f-toolbar .f-filters { display: none; }
  .frise-main { min-height: 0; min-width: 0; }
  .trow { height: 46px; }
  .trow-top .tt { max-width: 30vw; }
  .trow-top .tv { max-width: 22vw; }

  .facet-sheet { display: none !important; }

  .sheet {
    left: auto; right: 0; top: 0; bottom: 0; margin: 0;
    width: 480px; max-width: 92vw; max-height: none;
    box-shadow: -2px 0 0 var(--rule);
    animation: slidein .18s ease-out;
  }
  @keyframes slidein { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* coque de la frise : pleine hauteur dans la vue */
.frise-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 1000px) { .frise-shell { display: block; height: 100%; } }

/* bascule Expositions / Spectacles : le split au premier niveau */
.univ-switch { display: flex; gap: var(--s5); margin-bottom: var(--s4); }
.univ-switch button { font-size: var(--t-l); font-weight: 700; letter-spacing: -.01em; color: var(--ink-2); padding: var(--s1) 0; }
.univ-switch button.is-on { color: var(--ink); box-shadow: inset 0 -3px var(--ikb); }

.press-block .nb { text-decoration: none; color: inherit; }
.press-block .nb .w .stars { color: var(--ikb); font-size: 11px; }

.sheet .actions .is-tickets { background: var(--ink); color: var(--paper); box-shadow: none; }

.wizard-cta {
  display: block; width: 100%; text-align: left;
  background: var(--ink); color: var(--paper);
  padding: var(--s4); font-size: var(--t-m); font-weight: 600; margin-bottom: var(--s5);
}
@media (min-width: 1000px) { .facet-sheet#wizardSheet { display: flex !important; position: fixed; left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 460px; max-height: 80vh; box-shadow: 0 0 0 2px var(--rule); } .facet-sheet#wizardSheet[hidden] { display: none !important; } }

.v-search { width: 100%; font: inherit; font-size: var(--t-m); padding: var(--s2) 0; margin-bottom: var(--s1); background: transparent; border: none; border-bottom: 2px solid var(--rule); color: var(--ink); border-radius: 0; }
.v-search:focus { outline: none; border-bottom-color: var(--ikb); }
.f-opt .vn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ascenseurs discrets dans le panneau de frise */
.tl-scroll, .frise-side, .facet-body { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.tl-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); }
.tl-scroll::-webkit-scrollbar-track { background: transparent; }