/* ══════════════════════════════════════════════════════
   REDESIGN — Panneaux sombres + écrans plein écran + filtre
   Chargé en DERNIER : surcharge panels/components/layout.
   La barre de recherche et la carte restent claires.
══════════════════════════════════════════════════════ */

:root {
  --dk-bg:      #16171c;
  --dk-card:    #1e2027;
  --dk-card-2:  #23252d;
  --dk-border:  #2b2e37;
  --dk-border-2:#3a3e4a;
  --dk-text:    #f4f5f7;
  --dk-muted:   #9aa1ae;
  --dk-muted-2: #6d7380;
  --dk-green:   #34d399;
  --dk-red:     #f87171;
}

/* ───────────────────────── PANNEAU (bottom sheet / latéral) ── */
#panel {
  background: var(--dk-bg);
  border-color: var(--dk-border);
}

#panel-handle {
  background: var(--dk-border-2);
}

.ph {
  background: transparent;
  border-bottom-color: var(--dk-border);
}

.ptitle {
  color: var(--dk-text);
}

.pclose {
  background: var(--dk-card);
  border-color: var(--dk-border);
  color: var(--dk-muted);
}

.pclose:hover {
  background: var(--dk-card-2);
  border-color: var(--dk-border-2);
  color: var(--dk-text);
}

.pscroll {
  scrollbar-color: var(--dk-border-2) transparent;
}

.muted {
  color: var(--dk-muted);
}

/* séparateurs de sections : sombres (étaient blancs via var(--border)) */
#panel .ps {
  border-bottom-color: var(--dk-border);
}

/* réglages : pas de séparateurs, les cartes suffisent (comme la maquette) */
#panel.settings-full .ps {
  border-bottom: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ── Panneau bus ── */
.bus-line-sub {
  color: var(--dk-muted);
  font-weight: 600;
}

.bus-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bus-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
}

.bus-status .st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: dkPulse 1.6s ease-in-out infinite;
}

.bus-status.is-ontime { color: var(--dk-green); }
.bus-status.is-delay  { color: var(--dk-red); }
.bus-status.is-early  { color: #60a5fa; }
.bus-status.is-unknown{ color: var(--dk-muted); }

@keyframes dkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.bus-star {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--dk-border-2);
  background: var(--dk-card);
  color: var(--dk-muted);
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}

.bus-star:hover { border-color: var(--primary); color: var(--primary); }
.bus-star.on { color: var(--primary); border-color: rgba(255, 204, 0, .5); background: rgba(255, 204, 0, .08); }

.bus-meta .bus-id {
  background: var(--dk-card);
  border: 1.5px solid var(--dk-border);
  color: var(--dk-muted);
}

.bus-state.is-ontime { background: rgba(52, 211, 153, .12); color: var(--dk-green); }
.bus-state.is-delay  { background: rgba(248, 113, 113, .12); color: var(--dk-red); }
.bus-state.is-early  { background: rgba(96, 165, 250, .12); color: #60a5fa; }

.bus-card {
  background: var(--dk-card);
  border-color: var(--dk-border);
}

.bus-card-k { color: var(--dk-muted-2); }
.bus-card-v { color: var(--dk-text); }

.bus-action {
  background: var(--dk-card);
  border-color: var(--dk-border-2);
  color: var(--dk-text);
  gap: 9px;
}

.bus-action:hover {
  background: var(--dk-card-2);
  border-color: var(--dk-muted-2);
}

.bus-action-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #171204;
}

.bus-action-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.bus-vid {
  text-align: center;
  font-size: 11.5px;
  color: var(--dk-muted-2);
}

/* ── Squelettes / états ── */
.skl { background: #262932; }
.plodr { color: var(--dk-muted); }
.spinner { border-color: var(--dk-border-2); border-top-color: var(--primary); }
.empty { color: var(--dk-muted); }
.empty svg { opacity: .45; }

/* ── Lignes d'arrêts (panneau arrêt + itinéraire) ── */
.arr-row {
  border-bottom-color: var(--dk-border);
}

.arr-row:hover { background: var(--dk-card); }
.arr-badge { background: var(--primary); color: #171204; }
.arr-dest { color: var(--dk-text); }
.arr-hms { color: var(--dk-muted); }
.arr-mins { color: var(--dk-green); }
.arr-mins.appr { color: var(--dk-green); }
.arr-mins.urg { color: var(--dk-green); }
.arr-row.cur { background: rgba(255, 204, 0, .07); }
.arr-row.past { opacity: .45; }

/* ── Départs théoriques (fiche arrêt, même coquille que l'horaire bus) ── */
.sched-badge.stop-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2f7fe0;
  color: #fff;
  padding: 8px 11px;
}

/* pas de ligne de liaison entre les départs (réservée aux séquences d'arrêts) */
.sched-rows .dep-row:not(:last-child)::after {
  display: none;
}

/* badges de lignes rectangulaires dans les cartes blanches (pas les cercles gris) */
.sched-rows .dep-row .arr-badge {
  width: auto;
  height: auto;
  min-width: 46px;
  border-radius: 10px;
  padding: 6px 9px;
  background: var(--primary);
  color: #171204;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
}

.sched-rows .arr-mins.live { color: #16a34a; }
.sched-rows .arr-mins.theo { color: #0e1118; }
.sched-rows .dep-live { color: #16a34a; }

.stop-none {
  padding: 46px 16px;
  text-align: center;
  color: #7c8292;
  font-size: 14px;
}

.stop-none svg {
  margin: 0 auto 10px;
  opacity: .55;
}

.dep-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dk-muted);
}

.dep-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dk-green);
  flex-shrink: 0;
  animation: dkPulse 1.6s ease-in-out infinite;
}

.arr-mins.live {
  color: var(--dk-green);
}

.arr-mins.theo {
  color: var(--dk-text);
}

.dep-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dk-green);
  font-weight: 700;
}

.itin-label {
  padding: 12px 20px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dk-muted-2);
}

/* ── Cartes réglages ── */
.scard {
  background: var(--dk-card);
  border-color: var(--dk-border);
}

.scard-h {
  border-bottom-color: var(--dk-border);
  color: var(--dk-muted-2);
}

.chk-row:hover { background: var(--dk-card-2); }
.chklbl { color: var(--dk-text); }
.chkb { background: var(--dk-card-2); border-color: var(--dk-border-2); }

.fav-row span { color: var(--dk-text) !important; }

.fsearch-inp {
  background: var(--dk-card-2) !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}

.fsearch-inp::placeholder { color: var(--dk-muted-2); }

.fsug-btn {
  background: var(--dk-card-2);
  color: var(--dk-text);
  border-color: var(--dk-border-2);
}

.frm-btn {
  background: var(--dk-card-2);
  border-color: var(--dk-border-2);
  color: var(--dk-muted);
}

.frm-btn:hover { color: var(--dk-text); border-color: var(--dk-muted-2); }

.seg-wrap { flex-wrap: wrap; }

.seg-opt {
  background: var(--dk-card-2);
  border-color: var(--dk-border-2);
  color: var(--dk-muted);
}

.seg-opt:hover { color: var(--dk-text); }
.seg-opt.on { background: transparent; border-color: var(--primary); color: var(--primary); }

/* ── Chips-cases (régions / types) ── */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 13px 16px;
}

.chip-check { position: relative; }

.chip-check input { display: none; }

.chip-check span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 7px 8px;
  text-align: center;
  border-radius: 12px;
  border: 1.5px solid var(--dk-border-2);
  background: var(--dk-card-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dk-muted);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.25;
}

.chip-check span::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 4.5px;
  border: 1.5px solid var(--dk-border-2);
  background: var(--dk-bg);
  flex-shrink: 0;
  transition: all .15s;
}

.chip-check input:checked + span {
  border-color: var(--primary);
  color: var(--dk-text);
  background: rgba(255, 204, 0, .06);
}

.chip-check input:checked + span::before {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23171204' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Interrupteurs (toggles) ── */
.sw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}

.sw-row:hover { background: var(--dk-card-2); }

.sw-lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--dk-text);
}

.sw-row input { display: none; }

.sw {
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: var(--dk-border-2);
  position: relative;
  flex-shrink: 0;
  transition: background .18s;
}

.sw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s var(--ease-spring);
}

.sw-row input:checked ~ .sw { background: var(--primary); }
.sw-row input:checked ~ .sw::after { transform: translateX(19px); }

/* ── Aide / contact ── */
.help-accordion {
  background: rgba(255, 204, 0, .06);
  border-color: rgba(255, 204, 0, .25);
}

.help-accordion h3 { color: var(--dk-text); }
.help-accordion-hd { color: var(--dk-text); }
.help-b p { color: var(--dk-muted); }

.chip {
  background: var(--dk-card-2);
  border-color: var(--dk-border-2);
  color: var(--dk-text);
}

/* ═══════════════════════ PLEIN ÉCRAN ═══════════════════════ */
@media (max-width: 640px) {
  #panel.panel-full {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-top: none;
  }

  #panel.panel-full #panel-handle {
    display: none;
  }
}

/* ═══════════════════════ HORAIRE PLEIN ÉCRAN ═══════════════ */
#panel.sched-full .ph { display: none; }

/* header sombre, corps clair (comme la maquette) */
#panel.sched-full .pscroll {
  background: #edeff2;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 4px;
  background: var(--dk-bg);
}

.sched-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--dk-border-2);
  background: var(--dk-card);
  color: var(--dk-text);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.sched-nav-btn:hover { background: var(--dk-card-2); }
.sched-nav-btn.on { color: var(--primary); border-color: rgba(255, 204, 0, .5); }

.sched-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 18px 16px;
  background: var(--dk-bg);
}

.sched-badge {
  min-width: 44px;
  padding: 7px 10px;
  text-align: center;
  background: var(--primary);
  color: #171204;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 15px;
  border-radius: 10px;
  flex-shrink: 0;
}

.sched-title h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--dk-text);
  line-height: 1.25;
}

.sched-title p {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dk-muted);
}

/* Tabs Temps réel / Théorique */
.sched-tabs {
  display: flex;
  background: var(--dk-card);
  border-top: 1.5px solid var(--dk-border);
  border-bottom: 1.5px solid var(--dk-border);
}

.sched-tab {
  flex: 1;
  padding: 13px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--dk-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}

.sched-tab.on {
  color: var(--dk-text);
  border-bottom-color: var(--primary);
}

.sched-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d4150;
}

.sched-note .st-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dk-green);
  flex-shrink: 0;
}

/* Rangées en cartes claires (comme la maquette) */
.sched-rows {
  padding: 12px 14px 18px;
  display: grid;
  gap: 12px;
  flex: 1;
}

.sched-rows .arr-row {
  position: relative;
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.sched-rows .arr-row:hover { background: #fff; }

/* ligne qui relie les numéros d'arrêts entre eux */
.sched-rows .arr-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 32px;
  top: 100%;
  height: 12px;
  width: 0;
  border-left: 2px dotted #bfc4cf;
  z-index: 1;
}

/* pas de débordement horizontal : les noms d'arrêts passent à la ligne */
.sched-rows .arr-info {
  min-width: 0;
}

.sched-rows .arr-dest {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}

.sched-rows .arr-time {
  flex-shrink: 0;
}

.sched-rows .arr-badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eaef;
  color: #3d4150;
  font-size: 13px;
}

.sched-rows .arr-row.cur {
  background: #fff7dc;
}

.sched-rows .arr-row.cur .arr-badge {
  background: var(--primary);
  color: #171204;
}

.sched-rows .arr-dest {
  color: #0e1118;
  font-weight: 700;
  font-size: 15.5px;
}

.sched-rows .arr-hms { color: #7c8292; font-size: 12.5px; margin-top: 2px; }

/* temps en noir partout… */
.sched-rows .arr-mins,
.sched-rows .arr-mins.appr,
.sched-rows .arr-mins.urg {
  color: #0e1118;
  font-size: 16px;
}

/* …sauf l'arrêt actuel : en vert */
.sched-rows .arr-row.cur .arr-mins {
  color: #16a34a;
}

.arr-delay {
  font-size: 12.5px;
  font-weight: 800;
  margin-top: 1px;
  text-align: right;
}

.arr-delay.neg { color: #16a34a; }
.arr-delay.pos { color: #dc2626; }

/* Arrêts déjà passés : cartes gris pâle discrètes sur le fond clair */
.sched-rows .arr-row.past {
  background: #e3e5ea;
  box-shadow: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sched-rows .arr-row.past:hover { background: #e3e5ea; }
.sched-rows .arr-row.past .arr-badge { background: #d1d4dc; color: #7c8292; }
.sched-rows .arr-row.past .arr-dest { color: #8a8f9c; font-weight: 600; }
.sched-rows .arr-row.past .arr-hms { color: #a5aab5; }
.sched-rows .arr-row.past .arr-mins { color: #a5aab5; font-size: 12.5px; font-weight: 600; }

/* Barre Liste / Carte : contrôle segmenté d'un seul bloc (comme la maquette) */
.sched-bottom {
  position: sticky;
  bottom: 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #edeff2 75%, transparent);
}

.sched-views {
  display: flex;
  background: #fff;
  border: 1.5px solid #e2e5ea;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.sched-view-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  border: none;
  background: transparent;
  color: #5c626e;
  font-size: 14.5px;
  font-weight: 800;
  transition: background .15s, color .15s;
}

.sched-view-btn + .sched-view-btn {
  border-left: 1.5px solid #e2e5ea;
}

.sched-view-btn:hover { color: #23262d; }

.sched-view-btn.on {
  color: #d19f00;
  background: #fdf9ec;
}

/* ── Header sticky des fiches horaire / arrêt : seule la liste défile ── */
.sched-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  flex-shrink: 0;
}

.sched-sticky .sched-note {
  background: #edeff2;
  padding-bottom: 11px;
}

/* ombre douce pour détacher le header quand la liste défile dessous */
.sched-sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: linear-gradient(to bottom, rgba(14, 17, 24, .10), transparent);
  pointer-events: none;
}

/* ── Fiche arrêt : lignes desservies (chips colorées cliquables) ── */
.stop-lines {
  padding: 12px 16px 0;
}

.stop-lines-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7c8292;
  margin-bottom: 8px;
}

.stop-lines-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.stop-line-chip {
  min-width: 42px;
  padding: 7px 12px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #171204;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
  transition: transform .12s, filter .15s;
}

.stop-line-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.stop-line-chip:active {
  transform: translateY(0);
}

/* ── Bouton "Fiche complète de l'arrêt" ── */
.stop-full-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--primary);
  border: none;
  border-radius: 16px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 4px 16px rgba(180, 140, 0, .35);
  transition: transform .12s, background .15s, box-shadow .15s;
}

.stop-full-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 140, 0, .42);
}

.stop-full-btn:active {
  transform: translateY(0);
}

.stop-full-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(23, 18, 4, .12);
  color: #171204;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.stop-full-txt {
  flex: 1;
  min-width: 0;
}

.stop-full-txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #171204;
}

.stop-full-txt span {
  display: block;
  font-size: 11.5px;
  color: rgba(23, 18, 4, .62);
  margin-top: 1px;
}

.stop-full-btn > svg {
  color: #171204;
  flex: none;
}

/* ═══════════════════ RÉGLAGES PLEIN ÉCRAN ══════════════════ */
#panel.settings-full .ph {
  border-bottom: none;
  padding-bottom: 6px;
}

#panel.settings-full .ptitle {
  font-size: 24px;
}

#panel.settings-full .pclose {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pref-lbl {
  padding: 12px 16px 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dk-muted-2);
}

/* ── Carte Favoris ── */
.fav-empty {
  padding: 12px 16px 2px;
  font-size: 13.5px;
}

.fav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}

.fav-row .rchip {
  font-size: 12px;
  min-width: 40px;
}

.fav-lbl {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rangée "ajouter une ligne" façon maquette (＋ à gauche, › à droite) */
.fav-add {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 10px 12px 12px;
  min-height: 52px;
  padding: 0 15px 0 13px;
  border: 1.5px solid var(--dk-border-2);
  border-radius: 14px;
  background: var(--dk-card-2);
  transition: border-color .15s;
}

.fav-add:focus-within {
  border-color: var(--primary);
}

.fav-add-ico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--dk-border-2);
  color: var(--dk-muted);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fav-add-inp {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--dk-text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
}

.fav-add-inp::placeholder {
  color: var(--dk-muted-2);
}

.fav-add-chev {
  color: var(--dk-muted-2);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.fav-sugs {
  padding: 0 12px 4px;
  display: grid;
  gap: 6px;
}

.fav-sugs:empty {
  padding: 0;
}

.fav-sugs .fsug-btn {
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--dk-border);
  font-size: 13px;
}

.fav-sugs .muted {
  padding: 4px 6px 8px;
}

/* ═══ Icônes SVG inlinées (couleurs officielles des lignes) ═══ */
.lf-bus-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ═══════════ DÉZOOM : bus réduits, sans numéros ═══════════ */
#map .lf-bus-wrap,
#map .lf-bus-wrap img {
  transition: width .25s ease, height .25s ease;
}

#map.bus-zoom-md .lf-bus-wrap,
#map.bus-zoom-md .lf-bus-wrap img {
  width: 27px;
  height: 27px;
}

#map.bus-zoom-md .lf-num {
  display: none;
}

#map.bus-zoom-sm .lf-bus-wrap,
#map.bus-zoom-sm .lf-bus-wrap img {
  width: 20px;
  height: 20px;
}

#map.bus-zoom-sm .lf-num {
  display: none;
}

/* ═══════════════════ TOPBAR : FILTRE ═══════════════════════ */
#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

#filterBtn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
  transition: all .15s;
}

#filterBtn svg { width: 19px; height: 19px; }

#filterBtn:hover { border-color: var(--border-dark); color: var(--ink); }

#filterBtn.active {
  border-color: var(--primary);
  color: var(--ink);
  background: var(--primary-soft);
}

#filterBtn .fdot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-dark);
  display: none;
}

#filterBtn.has-filter .fdot { display: block; }

#filterDrop {
  position: fixed;
  top: 84px;
  right: max(16px, calc(50vw - 330px));
  width: min(320px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-l);
  z-index: 750;
  padding: 14px;
  display: none;
}

#filterDrop.vis { display: block; }

.fd-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 2px 8px;
}

.fd-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.fd-chip {
  padding: 9px 4px;
  text-align: center;
  border-radius: 10px;
  border: 1.5px solid var(--border-dark);
  background: var(--bg-subtle);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  transition: all .15s;
}

.fd-chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ink);
}

.fd-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.fd-switch input { display: none; }

.fd-switch .sw { background: var(--border-dark); }
.fd-switch input:checked ~ .sw { background: var(--primary-dark); }

.fd-all {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
  transition: all .15s;
}

.fd-all:hover { background: var(--bg-hover); color: var(--ink); }

@media (max-width: 640px) {
  #filterBtn { width: 48px; height: 48px; }
  #filterDrop { top: 72px; right: 10px; }
}

/* ═══════════ FABS : boutons regroupés en docks ═══════════ */
#fabs {
  gap: 12px;
}

.fab-group {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

.fab-group .icon-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fab-group .icon-btn + .icon-btn {
  border-top: 1.5px solid var(--border);
}

.fab-group .icon-btn:hover {
  transform: none;
  background: var(--bg-hover);
}

.fab-group .icon-btn.active {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* ═══════════ PERTURBATIONS : coquille horaire (header sombre, corps clair) ═══════════ */
/* les cartes reprennent leur thème clair d'origine (disruptions.css) */
#panel.sched-full .skl {
  background: #dfe2e8; /* squelettes lisibles sur fond clair */
}

.disruption-headline-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #0e1118;
  line-height: 1.3;
}

.disruptions-empty,
.stops-empty,
#panel.sched-full .error-panel {
  padding: 46px 16px;
  text-align: center;
  color: #7c8292;
  font-size: 14px;
}