/* Hafila : styles propres à l'app (complète style.css, repris de Kitari) */

/* ----- barre au-dessus de la carte ----- */
.mbar { position: absolute; top: 12px; left: 12px; right: 64px; z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.mbar > * { pointer-events: auto; }
.mchips { display: flex; gap: 6px; }
.mchip { display: flex; align-items: center; gap: 6px; background: var(--card); color: var(--text); border-radius: 12px; padding: 8px 11px; font-weight: 700; font-size: calc(12.5px * var(--fs, 1)); box-shadow: 0 2px 8px #0E4D5440; opacity: .55; }
.mchip[aria-pressed="true"] { opacity: 1; box-shadow: 0 2px 8px #0E4D5440, inset 0 0 0 2px var(--amber); }
.mstatus { background: var(--surface); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; box-shadow: 0 2px 8px #0E4D5440; }
.mline { background: var(--amber); color: var(--navy); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: calc(12.5px * var(--fs, 1)); box-shadow: 0 2px 8px #0E4D5440; }
.mline[hidden] { display: none; }


/* ----- véhicules sur la carte ----- */
.veh-w { display: flex; align-items: center; justify-content: center; background: none; border: 0; transition: transform 1s linear; }
.leaflet-zoom-anim .veh-w { transition: transform .25s cubic-bezier(0, 0, .25, 1); }
.veh { min-width: 24px; height: 20px; padding: 0 6px 0 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 3px; background: var(--c); color: var(--t);
  font: 700 11px/1 'Space Grotesk', sans-serif; border: 2px solid #fff; border-radius: 7px; box-shadow: 0 1px 4px #0006; }
.veh::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.veh b { font-weight: 700; }
.veh.vlate { border-color: #F2B65C; } .veh.vlate2 { border-color: #D64545; }

/* ----- fenêtre d'un véhicule ----- */
.vpop { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 150px; }
.vpop-h { display: flex; align-items: center; gap: 8px; }
.vpop-h b { font-size: 13.5px; }
.vbadge { background: var(--c); color: var(--t); font: 700 12px 'Space Grotesk', sans-serif; padding: 3px 8px 3px 6px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.vbadge::before { content: ""; width: 1.05em; height: 1.05em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pop-btn { background: var(--amber); color: var(--navy); border-radius: 10px; padding: 7px 10px; font-weight: 700; font-size: 12px; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 12px 14px; color: #0E4D54; }

/* ----- écrans à venir ----- */
.soon { margin: auto; text-align: center; color: var(--sub); }
.soon b { display: block; font: 700 calc(18px * var(--fs, 1)) 'Space Grotesk', sans-serif; color: var(--text); margin-bottom: 6px; }

/* ----- écran Arrêts ----- */
.fchips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip { background: var(--card); color: var(--text); border-radius: 20px; padding: 7px 13px; font-weight: 700; font-size: calc(12.5px * var(--fs, 1)); box-shadow: 0 1px 3px var(--shadow); }
.fchip.active { background: var(--surface); color: #fff; }
.star svg { stroke: var(--amber); fill: none; width: 24px; height: 24px; }
.star.on svg { fill: var(--amber); }
.block { display: flex; flex-direction: column; gap: 12px; }
#mode-seg { align-self: flex-start; }
.card.pass { gap: 12px; }
.pass-d { flex: 1; min-width: 0; }
.pass .vbadge { min-width: 34px; text-align: center; flex-shrink: 0; }
.pass-t { font: 700 calc(17px * var(--fs, 1)) 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pass-t.now { color: var(--ok-fg); }
.sug-empty { color: var(--muted); }

/* ----- fiche d'une ligne ----- */
.line-h { display: flex; align-items: center; gap: 12px; }
.line-h .vbadge { font-size: calc(18px * var(--fs, 1)); padding: 6px 12px; flex-shrink: 0; }
#line-dirs { align-self: flex-start; flex-wrap: wrap; }
.pop-btn.alt { background: var(--surface); color: #fff; margin-right: 6px; }
.vpop .pop-btn { margin-top: 2px; }
#line-stops .stop { cursor: pointer; }
#line-stops .stop.here .body b { color: var(--amber); }
#line-stops .stop.here .rail i { background: var(--amber); width: 12px; height: 12px; margin-top: 2px; }
.rail i.veh-at { background: var(--c, var(--amber)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c, var(--amber)); }
.vrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vtag { font-size: calc(11px * var(--fs, 1)); font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--bg); color: var(--text); }
.vtag.late { background: var(--late-bg); color: var(--late-fg); } .vtag.ok { background: var(--ok-bg); color: var(--ok-fg); }
.vtr { margin: -10px 0 8px 28px; }

/* ----- alertes et favoris ----- */
#al-modes { align-self: flex-start; }
.fchip[aria-pressed="true"] { background: var(--surface); color: #fff; }
.alert { cursor: pointer; }
.alert.open p { -webkit-line-clamp: unset; display: block; }
.al-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.al-lines .vbadge { border: 0; font-size: calc(12px * var(--fs, 1)); }
.al-stops { font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-top: 8px; }
.line-t { flex: 1; min-width: 0; }
.favcard { cursor: pointer; }
.favcard .x { flex-shrink: 0; }
.mini { display: inline-flex; align-items: center; gap: 5px; margin: 6px 10px 0 0; font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.mini .vbadge { font-size: calc(11px * var(--fs, 1)); padding: 2px 6px; min-width: 0; }
.fchip .vbadge { margin-right: 4px; }

/* ----- icônes de mode (masques SVG : prennent la couleur du texte de la ligne) ----- */
.m-bus { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M7%203h10a3%203%200%200%201%203%203v9a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3V6a3%203%200%200%201%203-3zM6%206v5h12V6zM8%2013.2a1.3%201.3%200%201%200%200%202.6%201.3%201.3%200%200%200%200-2.6zM16%2013.2a1.3%201.3%200%201%200%200%202.6%201.3%201.3%200%200%200%200-2.6zM6%2019h3v2H6zM15%2019h3v2h-3z%22/%3E%3C/svg%3E"); }
.m-tram { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M8%206h8a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V9a3%203%200%200%201%203-3zM7%209v3.5h10V9zM8.7%2014a1.2%201.2%200%201%200%200%202.4%201.2%201.2%200%200%200%200-2.4zM15.3%2014a1.2%201.2%200%201%200%200%202.4%201.2%201.2%200%200%200%200-2.4zM7.5%202h9v1.5h-9zM11.2%203.5h1.6V6h-1.6zM6.3%2021.3l1.5-3.1%201.4.7-1.5%203.1zM17.7%2021.3l-1.5-3.1-1.4.7%201.5%203.1z%22/%3E%3C/svg%3E"); }
.m-metro { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M5%203h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2zM7%2017h2v-6l3%203.6%203-3.6v6h2V7h-2l-3%203.8L9%207H7z%22/%3E%3C/svg%3E"); }
.mdot { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; background: var(--text); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* zoom éloigné : seule l'icône du mode reste, sur fond de la couleur de la ligne */
#map.zs .veh { min-width: 0; width: 17px; height: 17px; padding: 0; gap: 0; border-width: 1.5px; border-radius: 5px; }
#map.zs .veh::before { width: 11px; height: 11px; }
#map.zs .veh b { display: none; }

/* ----- recherche d'adresse sur la carte ----- */
.msearch { position: relative; width: 100%; box-sizing: border-box; box-shadow: 0 2px 8px #0E4D5440; }
.msug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 600; margin: 0; padding: 4px; list-style: none; background: var(--card); color: var(--text); border-radius: 14px; box-shadow: 0 8px 24px #0E4D5455; max-height: 46vh; overflow-y: auto; }
.msug li { padding: 11px 12px; border-radius: 10px; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; }
.msug li:active, .msug li:hover { background: var(--bg); }
.msug li.info { color: var(--muted); font-weight: 400; }
.addr-pin { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--amber); border: 4px solid #0E4D54; box-shadow: 0 2px 6px #0007; }
.near { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; width: 100%; }
.near > small { color: #6B7280; font-weight: 700; letter-spacing: .03em; font-size: 11px; text-transform: uppercase; }
.near-b { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: #F6F7F9; color: #0E4D54; border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 12.5px; }
.near-b small { display: block; font-weight: 400; color: #6B7280; font-size: 11px; }
.near-b em { font-style: normal; color: #6B7280; font-weight: 600; flex-shrink: 0; }

/* ----- arrêt : actions, perturbations ----- */
.head-actions a.star { display: inline-flex; align-items: center; text-decoration: none; }
.head-actions .star svg { width: 22px; height: 22px; }
.head-actions .star[aria-pressed="true"]:not(#stop-star) { background: var(--card); border-radius: 10px; box-shadow: 0 1px 3px var(--shadow); }
.head-actions a.star:not([href]) { opacity: .4; pointer-events: none; }
.al-block { display: flex; flex-direction: column; gap: 8px; }
.al-tag { display: inline-block; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--late-bg); color: var(--late-fg); margin-bottom: 6px; }

/* La carte forme son propre empilement : ses boutons (z-index élevés) restent sous le menu tiroir */
.map-wrap, .dmap { position: relative; z-index: 0; isolation: isolate; }
.dmap.map-full { position: fixed !important; z-index: 70; }
.st-tip { background: var(--card); color: var(--text); border: 0; border-radius: 8px; box-shadow: 0 1px 4px #0006; font-weight: 700; font-size: 11px; padding: 2px 6px; }
.st-tip::before { display: none; }
.m-stop { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M12%202a7%207%200%200%200-7%207c0%205%207%2013%207%2013s7-8%207-13a7%207%200%200%200-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%22/%3E%3C/svg%3E"); }

/* ----- pastilles d'arrêt avec flèche de sens ----- */
.stp { position: relative; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: #0E4D54; border: 2.5px solid #fff; box-shadow: 0 1px 4px #0007; }
.stp.big { width: 26px; height: 26px; }
.stp i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -5px 0 0 -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 9px solid #fff; transform-origin: 50% 55%; }
.stp.big i { margin: -6px 0 0 -5px; border-left-width: 5px; border-right-width: 5px; border-bottom-width: 11px; }
.dirrow { width: 100%; margin-top: 2px; }
.dir { font-size: 12px; font-weight: 700; }
.vpop .al-lines { margin: 3px 0 4px; }
.side-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 12px; padding: 8px 10px 8px 14px; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; box-shadow: 0 1px 3px var(--shadow); }
.side-note[hidden] { display: none; }
.side-note .fchip { flex-shrink: 0; background: var(--surface); color: #fff; }

/* ----- départ / arrivée dans la liste d'arrêts d'une ligne ----- */
#line-stops .rail i.first { width: 14px; height: 14px; box-sizing: border-box; margin-top: 1px; background: var(--c, var(--text)); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--c, var(--text)); }
.rflag { display: block; width: 22px; height: 22px; flex-shrink: 0; margin-top: -1px; }
.rflag svg { width: 22px; height: 22px; stroke: none; }

/* ----- flèche de direction des véhicules ----- */
.vdir { position: absolute; left: calc(50% + var(--x, 0px)); top: calc(50% + var(--y, 0px)); width: 0; height: 0; margin: -5px 0 0 -4.5px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 10px solid #0E4D54;
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% 60%; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff); pointer-events: none; }
#map.zs .vdir { left: calc(50% + var(--zx, 0px)); top: calc(50% + var(--zy, 0px)); }

/* ----- itinéraire ----- */
.it-card { width: 100%; text-align: left; background: var(--card); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 4px var(--shadow); display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.it-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.it-times { font: 700 calc(19px * var(--fs, 1)) 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.it-dur { font-weight: 700; color: var(--sub); font-size: calc(14px * var(--fs, 1)); }
.it-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.it-walk { display: inline-flex; align-items: center; gap: 3px; font-size: calc(12px * var(--fs, 1)); color: var(--sub); font-weight: 700; }
.it-walk svg { width: 15px; height: 15px; stroke: var(--sub); }
.it-sep { color: var(--muted); font-size: 11px; }
.it-sub { display: flex; justify-content: space-between; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.it-sub b { color: var(--ok-fg); }
.it-note { font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); text-align: center; padding: 4px 8px; }
.it-note[hidden] { display: none; }
#it-list .empty, #it-status { text-align: center; }
.when { display: flex; align-items: center; gap: 8px; }
.when .field { flex: 1; padding: 10px 12px; }
.when input { color-scheme: dark; }

/* détail */
#trip-steps .stop .rail u.tr { width: 5px; border-radius: 3px; background: var(--c, var(--line)); }
#trip-steps .stop .rail u.wk { width: 0; border-left: 3px dotted var(--muted); background: none; }
#trip-steps .stop .rail i.tr { width: 12px; height: 12px; margin-top: 2px; background: var(--c); }
.walkic { width: 18px; height: 18px; display: block; margin-top: 0; color: var(--sub); }
.walkic svg { width: 18px; height: 18px; stroke: var(--sub); }
.tr-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tr-h .vbadge { font-size: 13px; }
.tr-h span.to { font-weight: 700; font-size: calc(13px * var(--fs, 1)); color: var(--text); }
.tr-st { font-size: calc(13px * var(--fs, 1)); color: var(--text) !important; font-weight: 600; margin-top: 2px !important; }
.tr-st time { font-variant-numeric: tabular-nums; font-weight: 700; margin-right: 6px; }
.via { margin: 6px 0; font-size: calc(12px * var(--fs, 1)); }
.via summary { color: var(--muted); cursor: pointer; font-weight: 600; }
.via ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.live-chip { display: inline-block; margin-top: 6px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-fg); }
.live-chip.late { background: var(--late-bg); color: var(--late-fg); }