@font-face {
  font-family: 'Bebas Neue Local';
  src: url('/fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --deep: #141414;
  --deeper: #0f0f0f;
  --surface: #1a1a1a;
  --card: #252525;
  --red: #ff3b3b;
  --red-soft: #ff6b6b;
  --gold: #ffd700;
  --amber: #ff9f1c;
  --rose: #ff7ab8;
  --cyan: #00ffff;
  --violet: #b3a1ff;
  --mint: #6fe3ad;
  --blue: #7cc4ff;
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.14);
  --txt: #fff;
  --txt-2: rgba(255,255,255,.75);
  --txt-3: rgba(255,255,255,.6);
  --txt-4: rgba(255,255,255,.45);
  --display: 'Bebas Neue Local', Impact, 'Haettenschweiler', sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'IBM Plex Mono', monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Un `display` d'auteur bat la feuille du navigateur : sans ce !important, tout
   élément mis en `display: flex` ici reste affiché malgré son attribut hidden.
   La modale vide couvrait l'écran d'un voile opaque qui captait tous les clics. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--txt);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.4;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
a { color: var(--red-soft); text-decoration: none; }
sup { font-size: .7em; }

/* Le design ne comporte aucun angle arrondi : c'est son caractère, pas un oubli. */

#app { display: flex; flex-direction: column; height: 100dvh; padding-top: var(--safe-top); max-width: 520px; margin: 0 auto; }
@media (min-width: 560px) { #app { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); } }
#view { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; outline: none; }
#view:focus-visible { outline: none; }

.boot { height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 0 24px; }
.boot-logo { width: min(260px, 62vw); height: auto; }
.boot-rule { width: 64px; height: 4px; background: var(--red); }
.boot-note { font-family: var(--mono); font-size: 11px; color: var(--txt-4); letter-spacing: .08em; text-transform: uppercase; }
.boot-fail { color: var(--red-soft); font-size: 14px; line-height: 1.5; max-width: 34ch; }

/* ─ Marque ─ */
.brand { flex: none; display: flex; align-items: center; gap: 9px; padding: 9px 20px 8px; border-bottom: 1px solid var(--line-soft); }
.brand-mark { width: 30px; height: auto; flex: none; }
.brand-name { font-family: var(--display); font-size: 23px; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.brand-when { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--txt-4); text-transform: uppercase; text-align: right; }

/* ─ Titrage ─ */
.h1 { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: .03em; }
.h1-xl { font-family: var(--display); font-size: 52px; line-height: .9; letter-spacing: .02em; }
.h1-xxl { font-family: var(--display); font-size: 62px; line-height: .88; letter-spacing: .02em; }
.h2 { font-family: var(--display); font-size: 32px; line-height: 1; letter-spacing: .04em; }
.h3 { font-family: var(--display); font-size: 24px; letter-spacing: .04em; }
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.kicker-lg { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.mono { font-family: var(--mono); }
.pad { padding: 0 20px; }

/* ─ Bandeaux d'annonce ─ */
.banner-slot { flex: none; }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; width: 100%; }
.banner-info { background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.banner-urgent { background: var(--red); }
.banner-mark { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 16px; }
.banner-info .banner-mark { border: 1.5px solid rgba(255,255,255,.55); color: rgba(255,255,255,.85); }
.banner-urgent .banner-mark { background: var(--bg); color: var(--red); font-size: 17px; }
.banner-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.banner-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.5); }
.banner-urgent .banner-meta { color: rgba(10,10,10,.75); font-weight: 600; }
.banner-text { font-size: 14px; font-weight: 600; line-height: 1.35; }
.banner-urgent .banner-text { font-weight: 700; }
.banner-close { flex: none; width: 44px; height: 44px; margin: -11px -12px -11px auto; display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(255,255,255,.6); }
.banner-urgent .banner-close { color: rgba(10,10,10,.7); }


/* ─ Barre d'onglets ─ */
.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--deep); border-top: 1px solid var(--line-strong); padding: 11px 0 calc(20px + var(--safe-bottom)); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; }
.tab[aria-current="page"] { color: var(--red); font-weight: 700; }

/* ─ En-têtes d'écran ─ */
.screen-head { flex: none; padding: 14px 20px 14px; }
.screen-head .h1 { display: block; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.backbar { display: flex; align-items: center; gap: 12px; padding: 4px 16px 10px; }
.backbtn { width: 48px; height: 48px; flex: none; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.backbar .kicker { letter-spacing: .12em; }

/* ─ Boutons ─ */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 16px; width: 100%; font-size: 15px; font-weight: 600; }
.btn-red { background: var(--red); color: #fff; font-family: var(--display); font-size: 24px; letter-spacing: .05em; font-weight: 400; }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); min-height: 50px; }
.btn-cyan { border: 1px solid rgba(0,255,255,.5); background: rgba(0,255,255,.06); color: var(--cyan); min-height: 50px; }
.btn-danger { border: 1px solid var(--red); color: var(--red-soft); font-weight: 700; min-height: 52px; }
.btn-dead { background: var(--surface); border: 1px solid var(--line); color: rgba(255,255,255,.35); font-family: var(--display); font-size: 23px; letter-spacing: .05em; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* ─ Badges de billet ─ */
/* Une couleur par billet, tenue d'un écran à l'autre : c'est elle qui permet de
   reconnaître sa passe dans une ligne qui en accepte quatre. */
.tk { display: inline-flex; padding: 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tk-gold { background: var(--gold); color: var(--bg); font-weight: 800; }
.tk-amber { background: var(--amber); color: var(--bg); font-weight: 800; }
.tk-red { background: var(--red); color: #fff; }
.tk-rose { background: var(--rose); color: var(--bg); font-weight: 800; }
.tk-cyan { background: var(--cyan); color: var(--bg); font-weight: 800; }
.tk-violet { background: var(--violet); color: var(--bg); font-weight: 800; }
.tk-mint { background: var(--mint); color: var(--bg); font-weight: 800; }
.tk-blue { background: var(--blue); color: var(--bg); font-weight: 800; }
.tk-outline { border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; }
.tk-free { border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 700; }
.tk-tbd { border: 1px solid rgba(255,215,0,.55); color: var(--gold); font-weight: 700; }
.tk-lg { padding: 6px 10px; font-size: 11px; }
/* Le talon est en portrait : sa hauteur cale sur celle des pastilles. */
.tk-icon { flex: none; align-self: center; display: block; color: rgba(255,255,255,.62); margin-right: 1px; }

/* ─ Lignes d'horaire ─ */
.row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); width: 100%; align-items: flex-start; }
.row-time { width: 52px; flex: none; font-family: var(--display); font-size: 26px; line-height: 1; }
.row-time small { display: block; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: .02em; }
.row-time small.past-midnight { color: var(--red-soft); letter-spacing: .06em; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 17px; font-weight: 700; }
.row-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 3px; }
.row-chev { font-size: 22px; color: rgba(255,255,255,.4); align-self: center; }

/* ─ Bloc « N en même temps » ─ */
.clash { margin: 10px 0 6px; border: 1px solid var(--red); background: #151010; }
.clash-head { background: var(--red); padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clash-head .l { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.clash-head .r { font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(10,10,10,.8); text-transform: uppercase; }
.clash-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.clash-item { background: var(--card); border: 1px solid var(--line); padding: 12px; width: 100%; }
.clash-item .head { display: flex; gap: 12px; }
.clash-item .row-time { width: 46px; font-size: 22px; line-height: 1.1; }
.clash-item .row-title { font-size: 17px; }
.clash-item .row-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ─ Activité imbriquée ─ */
.nested { margin-top: 12px; margin-left: 22px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; gap: 10px; align-items: flex-start; width: calc(100% - 22px); }
.nested-elbow { font-family: var(--mono); font-size: 14px; color: var(--red-soft); line-height: 1.2; }
.nested-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--red-soft); text-transform: uppercase; }
.nested-title { font-size: 15px; font-weight: 700; margin-top: 3px; }
.nested-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }


/* ─ Sélecteur de jour ─ */
.days { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px 20px 10px; }
.day { background: var(--surface); border: 1px solid var(--line-soft); padding: 8px 0; text-align: center; }
.day .dow { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5); }
.day .dom { font-family: var(--display); font-size: 26px; line-height: 1; color: rgba(255,255,255,.8); }
.day[aria-current="true"] { background: var(--red); border-color: var(--red); }
.day[aria-current="true"] .dow { color: rgba(10,10,10,.8); font-weight: 600; }
.day[aria-current="true"] .dom { color: #fff; }

/* ─ Accueil ─ */
.now-wrap { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.now-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.now-head .h1 { font-size: 44px; line-height: .95; }
.now-head .when { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.5); text-align: right; text-transform: uppercase; }
.live { background: var(--card); border: 1px solid var(--line-soft); padding: 18px; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.live-tag { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--red-soft); font-weight: 600; }
.dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.live-title { font-family: var(--display); font-size: 52px; line-height: .9; letter-spacing: .02em; }
.live-when { font-size: 15px; font-weight: 600; }
.live-left { font-family: var(--mono); font-size: 12px; color: var(--txt-3); }
.bar { height: 6px; background: rgba(255,255,255,.12); }
.bar > i { display: block; height: 6px; background: var(--red); }
.next { border: 1px solid var(--line-strong); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--deep); width: 100%; }
.next-count { font-family: var(--display); font-size: 60px; line-height: .85; letter-spacing: .06em; color: var(--red); font-variant-numeric: tabular-nums; }
.next-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.next-title { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .03em; }
.next-sub { font-size: 13px; color: var(--txt-2); margin-top: 2px; }
.next-room { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; text-transform: uppercase; }

/* ─ Fiches ─ */
.hero { flex: none; height: 150px; background: repeating-linear-gradient(135deg, #1a1a1a 0 12px, #141414 12px 24px); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; }
.hero span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.42); }
.detail { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.linkcard { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.linkcard .v { font-size: 17px; font-weight: 700; margin-top: 3px; }
.linkcard .a { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; }
.linkcard .chev { font-size: 22px; color: var(--red-soft); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .v { font-size: 15px; font-weight: 600; }
.prose { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.88); text-wrap: pretty; }
.prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.childline { border-top: 1px solid var(--line); padding-top: 12px; display: flex; gap: 10px; align-items: center; width: 100%; }
.childline span { font-size: 13px; color: var(--txt-2); }
.childline b { color: #fff; }
.sticky-actions { flex: none; background: var(--deep); border-top: 1px solid var(--line-strong); padding: 14px 20px calc(22px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }

/* ─ Lieux ─ */
.venue-row { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); align-items: center; width: 100%; }
.pin { width: 34px; height: 34px; flex: none; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 20px; color: #fff; }
.pin-unknown { background: none; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.6); }
.maptile { flex: none; width: 100%; height: 200px; position: relative; overflow: hidden; background: #0e0e0e;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; }
.maptile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.maptile .pin { position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(10,10,10,.85); }
.maptile .note { position: absolute; z-index: 1; bottom: 6px; left: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: rgba(255,255,255,.5); text-transform: uppercase; background: rgba(10,10,10,.72); padding: 3px 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--surface); border: 1px solid rgba(255,255,255,.14); padding: 7px 11px; font-size: 12px; font-weight: 600; }
.here-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); width: 100%; align-items: flex-start; }
.here-time { width: 78px; flex: none; font-family: var(--mono); font-size: 11px; color: var(--txt-3); text-transform: uppercase; }
.here-title { flex: 1; font-size: 15px; font-weight: 700; }
.here-title em { font-style: normal; font-weight: 400; color: var(--txt-3); }
.notepanel { border: 1px solid var(--gold); background: #1a1608; }
.notepanel-head { background: var(--gold); padding: 8px 14px; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--bg); text-transform: uppercase; }
.notepanel-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.notepanel-body .lead { font-size: 15px; font-weight: 700; line-height: 1.45; }
.notepanel-body .sub { font-size: 13px; color: var(--txt-2); line-height: 1.5; }
.syncnote { background: rgba(0,255,255,.06); border: 1px solid rgba(0,255,255,.45); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.syncnote .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--cyan); font-weight: 600; text-transform: uppercase; }
.syncnote .v { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5; }

/* ─ Carte ─ */
.map { flex: 1; position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); background: #0e0e0e; display: flex; align-items: center; justify-content: center; }
/* Ratio conservé : les pastilles sont positionnées en pourcentage de l'image,
   un recadrage les décalerait de leur adresse. Le cadre se contraint donc à la
   place disponible sans jamais déborder. */
.map-frame { position: relative; height: 100%; width: auto; max-width: 100%; max-height: 100%; }
.map-frame img { display: block; width: 100%; height: 100%; object-fit: fill; }
/* La feuille de Mapbox arrive après la nôtre et pose `.mapboxgl-map` en
   `position: relative` : sans un sélecteur plus précis, le conteneur se replie
   sur la taille de ses boutons. */
.map > .map-live { position: absolute; inset: 0; }
.map-live .mapboxgl-ctrl-group { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.map-live .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--line); }
.map-live .mapboxgl-ctrl-attrib { background: rgba(10,10,10,.72); font-family: var(--mono); font-size: 9px; }
.map-live .mapboxgl-ctrl-attrib a { color: rgba(255,255,255,.6); }
.map-credit { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 10px; background: rgba(10,10,10,.72); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.mapviews { flex: none; display: flex; gap: 2px; padding: 0 20px 12px; }
.mapviews button { flex: 1; min-height: 42px; background: var(--surface); border: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; }
.mapviews button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.map-pin { position: absolute; width: 34px; height: 34px; font-size: 19px; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; color: #fff; box-shadow: 0 0 0 3px var(--bg); transform: translate(-50%, -50%); }
.map-pin[aria-pressed="true"] { width: 46px; height: 46px; background: #fff; color: var(--red); font-size: 26px; z-index: 2; box-shadow: 0 0 0 3px var(--red); }
.map-sheet { flex: none; background: var(--surface); border-top: 1px solid var(--line-strong); padding: 16px 20px; }
.map-grab { width: 44px; height: 4px; background: rgba(255,255,255,.25); margin: 0 auto 14px; }
.map-sheet .t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.map-sheet .meta { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5); white-space: nowrap; }
.map-sheet .a { font-size: 14px; color: var(--txt-2); margin-bottom: 12px; }

/* ─ Planning ─ */
.daysep { background: var(--deep); border-top: 1px solid var(--red); padding: 8px 12px; margin: 0 -20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.daysep .h3 { font-size: 24px; letter-spacing: .05em; }
.daysep .meta { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.55); text-transform: uppercase; }
.plan-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.plan-row .row-time { width: 50px; font-size: 24px; }
.plan-row .t { flex: 1; min-width: 0; }
.plan-row .t b { font-size: 16px; font-weight: 700; display: block; }
/* Viser le sous-titre seul : un sélecteur sur `span` étirait aussi les pastilles. */
.plan-row .t .plan-sub { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 2px; display: block; }
.iconbtn { width: 44px; height: 44px; flex: none; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255,255,255,.7); }
.iconbtn-add { background: var(--card); font-size: 20px; color: #fff; }
.empty-wrap { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.empty-box { height: 96px; border: 1px dashed rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.empty-box span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.42); text-transform: uppercase; }
.empty-title { font-family: var(--display); font-size: 54px; line-height: .9; letter-spacing: .02em; }
.empty-lead { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); margin-top: 14px; text-wrap: pretty; }

/* ─ Infos ─ */
.info-row { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); align-items: flex-start; width: 100%; }
.info-row .t { flex: 1; }
.info-row .sub { font-size: 13px; color: var(--txt-2); margin-top: 3px; line-height: 1.5; }
.buildline { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.45); margin-top: 14px; line-height: 1.6; text-transform: uppercase; }

/* ─ Paramètres ─ */
.set-group { display: flex; flex-direction: column; gap: 10px; }
.set-card { background: var(--card); border: 1px solid var(--line-soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.set-card.flat { background: var(--surface); border-color: var(--line-soft); gap: 10px; }
.set-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.set-line .l { font-size: 15px; font-weight: 600; }
.set-line.baseline { align-items: baseline; }
.set-line.baseline .l { font-size: 14px; font-weight: 400; color: var(--txt-2); }
.set-line .v { font-family: var(--mono); font-size: 12px; }
.state-pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 6px 10px; text-transform: uppercase; }
.state-on { background: var(--cyan); color: var(--bg); }
.state-off { background: var(--red); color: #fff; }
.state-idle { border: 1px solid rgba(255,255,255,.3); color: var(--txt-2); }
.recipe { background: var(--deeper); border: 1px solid rgba(255,255,255,.14); padding: 11px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }
.lang { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 1px solid rgba(255,255,255,.18); }
.lang button { height: 52px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.lang button[aria-pressed="true"] { background: var(--red); color: #fff; }
.hint { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.45); line-height: 1.5; }
.hint-cyan { color: var(--cyan); }

/* ─ Modales ─ */
.modal { position: fixed; inset: 0; max-width: 520px; margin: 0 auto; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(10,10,10,.86); }
.sheet { background: var(--surface); border-top: 2px solid var(--red); padding: 22px 20px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 16px; max-height: 92dvh; overflow-y: auto; }
.sheet .h1-xl { font-size: 46px; line-height: .92; }
.sheet .lead { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.85); margin-top: 10px; }
.step { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); padding: 12px; }
.step-num { width: 34px; height: 34px; flex: none; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; color: #fff; }
.step-body { flex: 1; min-width: 0; }
.step-body .t { font-size: 15px; font-weight: 700; }
.safaribar { height: 44px; background: var(--deeper); border: 1px solid var(--line); margin-top: 8px; display: flex; align-items: center; justify-content: space-around; padding: 0 10px; color: rgba(255,255,255,.35); font-size: 16px; }
.safaribar .share { width: 30px; height: 30px; border: 2px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.sharesheet { margin-top: 8px; border: 1px solid var(--line); background: var(--deeper); }
.sharesheet div { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; font-size: 12px; color: rgba(255,255,255,.4); }
.sharesheet div + div { border-top: 1px solid rgba(255,255,255,.08); }
.sharesheet .pick { background: rgba(255,59,59,.14); border-left: 3px solid var(--red); font-size: 12.5px; font-weight: 700; color: #fff; }
.sharesheet .pick span:last-child { color: var(--red); }
.bullets { display: flex; flex-direction: column; gap: 1px; }
.bullet { background: var(--card); border: 1px solid var(--line); padding: 11px 14px; display: flex; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; }
.bullet .m { width: 26px; height: 26px; flex: none; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.bullet-no { background: var(--deep); font-weight: 400; color: var(--txt-2); }
.bullet-no .m { background: none; border: 1px solid rgba(255,255,255,.3); color: var(--txt-3); }
.warnbox { border: 1px solid rgba(0,255,255,.45); background: rgba(0,255,255,.06); padding: 12px 14px; }
.warnbox .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--cyan); font-weight: 600; text-transform: uppercase; }
.warnbox .v { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.9); margin-top: 4px; }
.sheet-dismiss { min-height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--txt-3); width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

/* Les écrans sont construits en <span> pour rester cliquables dans un <button> :
   il faut leur rendre le flux bloc que <div> aurait donné. */
.row-main, .row-title, .row-sub,
.live-title, .live-when, .live-left,
.next-count, .next-title, .next-sub, .next-room,
.banner-meta, .banner-text,
.nested-kicker, .nested-title, .nested-sub,
.here-title, .field .v, .step-body .t,
.linkcard .kicker, .linkcard .v, .linkcard .a,
.map-sheet .h3 { display: block; }

.live > span, .next > span, .clash-item .row-main > span, .step-body > span { display: block; }
.live-tag { display: flex; }
.next-foot { display: flex; }
/* Plusieurs pastilles par ligne quand l'activité accepte plusieurs passes. Les
   conteneurs ci-dessus remettent leurs <span> en bloc : il faut les reprendre un
   à un, sinon l'icône et les pastilles s'empilent. */
.row-badge { margin-top: 8px; }
.row-main > .row-badge,
.clash-item .row-main > .row-badge,
.live > .row-badge,
.plan-row .t > .row-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.live > .tk, .row-badge .tk, .clash-item .tk { display: inline-flex; align-self: flex-start; }
.live > .bar { display: block; }
.safaribar, .sharesheet { display: flex; }
.sharesheet { flex-direction: column; }

/* La carte occupe la hauteur restante : elle ne défile pas, la feuille du bas reste ancrée. */
#view.view-map { display: flex; flex-direction: column; overflow: hidden; }


/* Une pastille numérotée seule oblige à faire l'aller-retour avec la légende. */
.map-pin { flex-direction: column; }
.map-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff;
  white-space: nowrap; background: rgba(10,10,10,.8); padding: 2px 5px; }
.step-body > span.safaribar { display: flex; }
.next-count-far { font-size: 40px; letter-spacing: .04em; }

/* Fin de journée : la liste tombait dans le vide, sans rien pour continuer. */
.daynext { display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 8px 20px 0; width: calc(100% - 40px); padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); }
.daynext-title { flex: 1; font-family: var(--display); font-size: 26px; letter-spacing: .04em; }
.daynext .kicker { flex: none; }
.dayend { margin: 8px 20px 0; padding: 16px 0; font-size: 13px; color: var(--txt-3); border-top: 1px solid var(--line); }

/* La fin d'un créneau se lisait comme un second départ. */
.row-time small { letter-spacing: .04em; }
.row-time small::before { content: ''; }

/* ─ Accès et billets ─ */
.access { border: 1px solid var(--red); background: #151010; }
.access-free { border-color: rgba(255,255,255,.28); background: var(--deep); }
.access-tbd { border-color: var(--gold); background: #1a1608; }
.access-head { background: var(--red); padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.access-free .access-head { background: rgba(255,255,255,.12); }
.access-tbd .access-head { background: var(--gold); }
.access-head .l { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.access-head .r { font-family: var(--display); font-size: 20px; letter-spacing: .04em; color: #fff; text-align: right; }
.access-tbd .access-head .l, .access-tbd .access-head .r { color: var(--bg); }
.access-lead { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.access-lead + .access-lead { padding-top: 0; }
.access-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--txt-4); text-transform: uppercase; padding: 12px 14px 8px; }
.access-lead + .access-k { padding-top: 0; }
.access-foot { margin: 0; padding: 11px 14px 13px; border-top: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.5; color: var(--txt-4); }
.tkline { display: flex; gap: 11px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line-soft); color: inherit; }
.tkline .tk { flex: none; align-self: flex-start; margin-top: 1px; }
.tkline:first-of-type { border-top-color: var(--line); }
.tkline-t { flex: 1; min-width: 0; }
.tkline-n { display: block; font-size: 14px; font-weight: 700; }
.tkline-b { display: block; font-size: 12px; line-height: 1.45; color: var(--txt-3); margin-top: 2px; }
.tkline-p { flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 22px; letter-spacing: .03em; }
.tkline-c { font-family: var(--sans); font-size: 20px; color: var(--txt-4); }

/* ─ Signature de bas d'écran ─ */
.sign { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 20px 8px; border-top: 1px solid var(--line-soft); margin-top: 22px; }
.sign img { width: 132px; height: auto; opacity: .5; }
.sign span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--txt-4); text-transform: uppercase; }

/* ─ Candidat·es aux titres ─ */
/* La fiche est bordée de 20 px : les rangées reprennent cette marge en padding
   pour que le défilement horizontal aille bien jusqu'au bord de l'écran. */
.cands { margin: 4px -20px 0; border-top: 1px solid var(--line); padding-top: 16px; }
.cands-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 20px; }
.cand-row { margin-top: 20px; }
.cand-title { padding: 0 20px 9px; font-family: var(--display); font-size: 22px; letter-spacing: .05em; }
.cand-scroll { display: flex; align-items: stretch; gap: 10px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cand-scroll::-webkit-scrollbar { display: none; }
/* Trois par titre, donc trois qui tiennent dans la largeur : rogner la dernière
   de six pixels ferait croire à une quatrième. Le défilement reste là pour le
   jour où une catégorie en compte davantage. */
.cand { flex: none; width: calc((100% - 20px) / 3); min-width: 96px; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.cand img { display: block; width: 100%; height: 150px; object-fit: contain; object-position: bottom; background: linear-gradient(180deg, #241416 0%, var(--deep) 78%); }
.cand figcaption { flex: 1; padding: 8px 9px 9px; border-top: 1px solid var(--line); }
.cand figcaption b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: .03em; font-weight: 400; }
.cand figcaption span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--txt-4); text-transform: uppercase; margin-top: 2px; }