/* ═══ Styles repris de la V1 : notes, gestion, GPS, garages, plans ═══ */
/* Notes épinglées */
.note-banner { margin: 0 16px 10px; border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(var(--act-rgb),0.35); }
.note-banner-body { background: rgba(var(--act-rgb),0.08); padding: 11px 14px; }
.note-banner-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.note-banner-pin { font-size: 15px; }
.note-banner-author { font-size: 11px; color: var(--text2); flex: 1; }
.note-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.note-badge.temp { background: rgba(52,152,219,0.2); color: #3498db; }
.note-badge.perm { background: rgba(39,174,96,0.2); color: #27ae60; }
.note-banner-text { font-size: 13px; color: var(--text); line-height: 1.45; white-space: pre-wrap; }
.note-banner-actions { display: flex; border-top: 1px solid rgba(var(--act-rgb),0.2); }
.note-action-btn { flex: 1; padding: 7px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text2); display: flex; align-items: center; justify-content: center; gap: 5px; }
.note-action-btn:first-child { border-right: 1px solid rgba(var(--act-rgb),0.2); }
.note-action-btn:hover { background: rgba(var(--act-rgb),0.08); }
.note-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 0 0 10px; border-radius: 12px; border: 1.5px dashed var(--border); background: none; color: var(--text2); font-size: 14px; font-weight: 700; }
.wrap .note-add-btn { margin: 0 0 10px; }
.note-add-btn:active { border-color: var(--accent); color: var(--accent); }
.note-form-card { margin: 0 16px 10px; background: var(--bg2); border: 1.5px solid var(--accent); border-radius: 12px; padding: 14px; }
.note-form-card textarea { width: 100%; background: var(--bg3); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; padding: 10px 12px; outline: none; resize: vertical; min-height: 80px; box-sizing: border-box; font-family: inherit; }
.note-form-card textarea:focus { border-color: var(--accent); }
.note-type-row { display: flex; gap: 8px; margin: 10px 0; }
.note-type-btn { flex: 1; padding: 8px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg3); color: var(--text2); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all .15s; }
.note-type-btn.sel { border-color: var(--accent); color: var(--accent); background: rgba(var(--act-rgb),0.1); }
.note-form-btns { display: flex; gap: 8px; }
.note-save-btn { flex: 1; padding: 10px; background: var(--accent); color: #000; border: none; border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer; }
.note-cancel-btn { padding: 10px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text2); cursor: pointer; }
.btn-pin-note { background: rgba(var(--act-rgb),0.1); color: var(--accent); border: 1.5px solid rgba(var(--act-rgb),0.3); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; }

.btn-parking { background: #2e3350; color: var(--text2); border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-parking:active { background: #3e4565; }

.header-user { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.user-chip { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 10px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon { background: var(--bg3); border: 1.5px solid var(--border); color: var(--text2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-icon:active { background: var(--border); }

/* Page admin */
#admin-page { display:none; min-height:100vh; background:var(--bg); padding-bottom:80px; }
.ap-header { background:var(--bg2); border-bottom:2px solid var(--accent); padding:11px 16px; position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:10px; }
.ap-back { background:none; border:none; color:var(--text2); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; }
.ap-back:active { background:var(--bg3); }
.ap-back img { width:22px; height:22px; border-radius:6px; object-fit:cover; }
.ap-title { font-size:15px; font-weight:800; color:var(--accent); margin-left:auto; }
.ap-layout { display:flex; min-height:calc(100vh - 50px); }
.ap-sidebar { width:190px; flex-shrink:0; position:sticky; top:50px; height:calc(100vh - 50px); overflow-y:auto; background:var(--bg2); border-right:1px solid var(--border); padding:10px 0; scrollbar-width:none; }
.ap-sidebar::-webkit-scrollbar { display:none; }
.ap-sidebar-item { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; border-left:3px solid transparent; transition:all .15s; user-select:none; }
.ap-sidebar-item:hover { background:var(--bg3); color:var(--text); }
.ap-sidebar-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(var(--act-rgb),0.08); }
.ap-sidebar-icon { font-size:17px; flex-shrink:0; width:22px; text-align:center; }
.ap-sidebar-group-label { font-size:10px; font-weight:800; color:var(--text2); opacity:.6; text-transform:uppercase; letter-spacing:1.2px; padding:14px 16px 6px; }
.ap-sidebar-group-label:first-child { padding-top:4px; }
.ap-content { flex:1; min-width:0; }
.ap-body { padding:16px; max-width:760px; display:flex; flex-direction:column; gap:20px; }
.ap-section { display:flex; flex-direction:column; gap:12px; scroll-margin-top:70px; }
.ap-section-hdr { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.ap-section-icon { font-size:15px; }
.ap-section-title { font-size:15px; font-weight:800; color:var(--text); }
.ap-section-desc { font-size:12px; color:var(--text2); margin-top:-6px; }
@media (max-width:699px) {
  .ap-layout { flex-direction:column; }
  .ap-sidebar { width:100%; height:auto; position:sticky; top:50px; border-right:none; border-bottom:1px solid var(--border); display:flex; flex-direction:row; overflow-x:auto; padding:6px 8px; gap:4px; z-index:50; }
  .ap-sidebar-item { flex-shrink:0; padding:7px 12px; border-left:none; border-radius:20px; border:1.5px solid var(--border); background:var(--bg3); white-space:nowrap; font-size:12px; }
  .ap-sidebar-item.active { border-color:var(--accent); }
  .ap-sidebar-icon { display:none; }
  .ap-sidebar-group-label { display:none; }
}
.ap-section-label { font-size:10px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.ap-user-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.ap-user-hdr { display:flex; align-items:center; padding:13px 16px; gap:12px; cursor:pointer; user-select:none; }
.ap-user-hdr:active { background:var(--bg3); }
.ap-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ap-avatar.driver { background:rgba(var(--act-rgb),0.15); }
.ap-avatar.coordinator { background:rgba(52,152,219,0.15); }
.ap-user-meta { flex:1; min-width:0; }
.ap-user-name { font-size:14px; font-weight:700; color:var(--text); }
.ap-user-role { font-size:11px; color:var(--text2); margin-top:1px; }
.ap-chevron { color:var(--text2); font-size:12px; transition:transform .2s; flex-shrink:0; }
.ap-chevron.open { transform:rotate(180deg); }
.ap-del { background:rgba(231,76,60,0.12); border:1px solid rgba(231,76,60,0.25); color:var(--red); padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; flex-shrink:0; }
.ap-user-body { border-top:1px solid var(--border); padding:14px 16px; display:none; }
.ap-user-body.open { display:block; }
.ap-pass-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); margin-bottom:12px; }
.ap-pass-btn { background:none; border:none; color:var(--text2); cursor:pointer; font-size:14px; padding:2px 4px; }
.ap-circuits-label { font-size:10px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.ap-circuits-grid { display:flex; flex-wrap:wrap; gap:7px; }
.ap-circuit-btn { padding:7px 14px; border-radius:20px; border:2px solid var(--border); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; -webkit-tap-highlight-color:transparent; }
.ap-circuit-btn.on { border-color:var(--accent); color:var(--accent); background:rgba(var(--act-rgb),0.12); }
.ap-changelog { font-size:11px; color:var(--text2); margin-top:10px; font-style:italic; }
.ap-add-form { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:16px; }
.ap-add-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
.ap-input { width:100%; padding:11px 14px; background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; color:var(--text); font-size:14px; outline:none; margin-bottom:10px; box-sizing:border-box; }
.ap-input:focus { border-color:var(--accent); }
.ap-submit { width:100%; padding:12px; background:var(--accent); color:#000; border:none; border-radius:10px; font-size:14px; font-weight:800; cursor:pointer; }
.ap-err { color:var(--red); font-size:12px; margin-top:6px; display:none; }
.ap-sep { height:1px; background:var(--border); }
/* Notes admin */
.ap-note-row { background:var(--bg2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ap-note-row-top { display:flex; align-items:center; padding:12px 14px; gap:10px; }
.ap-note-circuit { font-size:13px; font-weight:800; color:var(--accent); min-width:70px; }
.ap-note-preview { flex:1; font-size:12px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-note-btns { display:flex; gap:6px; flex-shrink:0; }
.ap-note-edit-btn { padding:5px 10px; border:1.5px solid var(--border); border-radius:7px; background:none; color:var(--text2); font-size:11px; font-weight:700; cursor:pointer; }
.ap-note-del-btn  { padding:5px 10px; border:1.5px solid rgba(231,76,60,.3); border-radius:7px; background:none; color:var(--red); font-size:11px; font-weight:700; cursor:pointer; }
.ap-note-form { border-top:1px solid var(--border); padding:12px 14px; background:var(--bg3); }
/* Plans admin */
.ap-plan-row { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.ap-plan-thumb { width:56px; height:40px; border-radius:6px; object-fit:cover; border:1px solid var(--border); background:var(--bg3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.ap-plan-thumb img { width:56px; height:40px; border-radius:6px; object-fit:cover; }
.ap-plan-meta { flex:1; min-width:0; }
.ap-plan-key { font-size:12px; font-weight:700; color:var(--text); }
.ap-plan-by { font-size:11px; color:var(--text2); }
.ap-plan-upload-label { padding:6px 12px; border:1.5px solid var(--accent); color:var(--accent); border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.ap-plan-del { padding:6px 10px; border:1.5px solid rgba(231,76,60,.3); color:var(--red); border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; background:none; flex-shrink:0; }
/* Archives */
.ap-archive-row { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.ap-archive-badge { background:var(--bg3); color:var(--text2); font-size:12px; font-weight:800; padding:4px 10px; border-radius:8px; letter-spacing:.5px; flex-shrink:0; min-width:58px; text-align:center; }
.ap-archive-meta { flex:1; min-width:0; }
.ap-archive-name { font-size:13px; font-weight:600; color:var(--text); }
.ap-archive-date { font-size:11px; color:var(--text2); margin-top:2px; }
.ap-archive-btn { padding:7px 14px; border-radius:8px; border:1.5px solid; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.ap-archive-btn.archive { border-color:rgba(231,76,60,.35); color:var(--red); background:rgba(231,76,60,.08); }
.ap-archive-btn.restore { border-color:rgba(39,174,96,.4); color:#27ae60; background:rgba(39,174,96,.1); }

#last-update { text-align:center; font-size:11px; color:var(--text2); opacity:.6; padding:14px 16px 24px; }

.offline-banner { display:none; position:sticky; top:0; z-index:200; background:#c0392b; color:#fff; text-align:center; font-size:12px; font-weight:700; padding:8px 12px; }

#gps-toggle-btn { padding:8px 14px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
#gps-toggle-btn.active { border-color:#27ae60; color:#27ae60; background:rgba(39,174,96,.1); }

#gps-page { display:none; position:fixed; inset:0; background:var(--bg); z-index:500; flex-direction:column; }
#gps-page-header { display:flex; align-items:center; gap:12px; padding:12px 16px; padding-top:calc(env(safe-area-inset-top) + 18px); border-bottom:1px solid var(--border); background:var(--bg2); }
#gps-page-header h2 { font-size:15px; font-weight:800; color:var(--text); }
#gps-map { flex:1; min-height:260px; }
#gps-driver-list { max-height:38vh; overflow-y:auto; padding:10px 14px; }
.gps-driver-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.gps-driver-dot { width:10px; height:10px; border-radius:50%; background:#27ae60; flex-shrink:0; }
.gps-driver-meta { flex:1; min-width:0; }
.gps-driver-name { font-size:13px; font-weight:700; color:var(--text); }
.gps-driver-sub { font-size:11px; color:var(--text2); }
.gps-empty { text-align:center; color:var(--text2); font-size:13px; padding:24px; }


#garage-page { display:none; position:fixed; inset:0; background:var(--bg); z-index:500; flex-direction:column; }
#garage-page-header { display:flex; align-items:center; justify-content:flex-end; padding:14px 16px; }
#garage-page-body { flex:1; overflow-y:auto; padding:16px; }
.garage-card { display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:2px solid var(--border); background:var(--bg2); cursor:pointer; width:100%; text-align:left; margin-bottom:12px; text-decoration:none; color:inherit; }
.garage-card:hover, .garage-card:active { border-color:#3498db; }
.garage-meta { flex:1; min-width:0; }
/* Un toucher sur la fiche d'un garage lance l'itinéraire dans le GPS de l'app. */
button.garage-card { font: inherit; color: inherit; }
.garage-go { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #0f7a4a; color: #fff; font-size: 20px; }
.garage-go small { font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.link-btn { display: inline; padding: 0; border: none; background: none; font: inherit; cursor: pointer; text-align: left; }
.garage-name { font-size:19px; font-weight:800; color:var(--text); }
.garage-addr { font-size:12px; color:var(--text2); margin-top:2px; }
.garage-svc-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.garage-svc-chip { font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:8px; background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
.garage-empty { text-align:center; color:var(--text2); font-size:13px; padding:40px 20px; }

.history-row { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:6px; font-size:12.5px; }
.history-row .h-action { font-weight:700; color:var(--accent); }
.history-row .h-meta { color:var(--text2); font-size:11px; margin-top:2px; }

/* Vue attribution par circuit */
.ap-circ-row { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ap-circ-badge { background:var(--accent); color:#000; font-size:12px; font-weight:800; padding:4px 10px; border-radius:8px; letter-spacing:.5px; flex-shrink:0; min-width:58px; text-align:center; }
.ap-circ-drivers { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.ap-driver-chip { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; background:rgba(var(--act-rgb),0.1); border:1.5px solid rgba(var(--act-rgb),0.3); font-size:12px; font-weight:600; color:var(--accent); }
.ap-driver-chip-del { background:none; border:none; cursor:pointer; color:var(--text2); font-size:13px; line-height:1; padding:0; margin-left:2px; }
.ap-driver-chip-del:hover { color:var(--red); }
.ap-circ-none { font-size:12px; color:var(--text2); font-style:italic; }
@media (min-width:700px) {
  .ap-users-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}

#plan-modal { display: none; position: fixed; inset: 0; background: #000; z-index: 9999; flex-direction: column; }
.plan-modal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; padding-top: calc(env(safe-area-inset-top) + 14px); background: rgba(20,20,20,.92); backdrop-filter: blur(6px); position: relative; z-index: 2; flex-shrink: 0; }
.plan-modal-titles { min-width: 0; }
.plan-modal-titles h3, .plan-modal-titles p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-modal-hint { flex-shrink: 0; padding: 8px 16px calc(env(safe-area-inset-bottom) + 10px); text-align: center; font-size: 12px; color: #999; background: rgba(20,20,20,.92); }
.plan-modal-note { margin: auto; padding: 24px; text-align: center; font-size: 16px; font-weight: 700; color: #cfd6e6; }
.plan-modal-topbar h3 { font-size: 13px; font-weight: 800; color: var(--accent); }
.plan-modal-topbar p { font-size: 11px; color: #aaa; margin-top: 2px; }
.plan-modal-close { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 16px; font-weight: 800; min-height: 48px; padding: 0 18px; border-radius: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap; }
.plan-modal-close:active { background: rgba(255,255,255,.3); }
.plan-modal-content { flex: 1; min-height: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; }
.plan-modal-content img { display: block; width: 100%; height: auto; margin: auto; transform-origin: 0 0; will-change: transform; }


/* ═══ BusPilot V2 — écran de conduite ═══ */
/* ═══ Direction visuelle « tableau d'affichage » (3 novembre 2026) : mêmes jetons que BusPilot Gestion (docs/DESIGN.md de BusPilot-Web).
   Surfaces plates, traits fins, le jaune des autobus pour l'action, le cyan pour les données et l'état actif, la plaque jaune (verte si le circuit est certifié) pour les circuits.
   Polices embarquées (licence OFL, public/fonts/). Les anciens noms de variables de NAV (--bg2, --accent, --text…) sont rattachés aux jetons : tout le code existant suit.
   L'écran GPS (#map-page) garde ses anciennes valeurs : voir « GPS » plus bas. ═══ */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/barlow-semi-condensed-700.woff2) format("woff2"); }
:root {
  --bg: #061322; --tx: #f1f5fa; --mut: #a3b3c8; --sub: #7a8ea8;
  --edge: 160,190,225; --inset: 4,14,27; --pa: 13,30,53; --toast: 20,43,71; --scrim: 2,6,14;
  --line: rgba(var(--edge),.16); --line2: rgba(var(--edge),.32);
  --cy: #33e2fe; --vi: #8b7bff; --am: #fec811; --ok: #3fd68f; --bad: #ff6178;
  --cy-rgb: 51,226,254; --am-rgb: 254,200,17; --ok-rgb: 63,214,143; --bad-rgb: 255,97,120;
  --act: #fec811; --act-rgb: 254,200,17; --act-tx: #1a1400;      /* action (boutons principaux) et plaques de circuit : le jaune des autobus */
  --bad-tx: #ff9aab;
  --r-panel: 8px; --r-ctl: 6px; --r-tag: 4px;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* noms historiques de NAV */
  --bg2: rgb(var(--pa)); --bg3: rgb(var(--toast)); --bg4: #1c3858; --border: var(--line);
  --accent: var(--act); --accent-ink: var(--act-tx); --green: var(--ok); --green-d: #1f8f5f; --red: var(--bad); --blue: var(--cy); --nav: var(--cy);
  --text: var(--tx); --text2: var(--mut); --text3: var(--sub); --radius: var(--r-panel);
}
/* thème « noir » (écrans OLED) : même palette, fonds plus profonds */
:root[data-theme="black"] { --bg: #000; --pa: 8,17,30; --toast: 15,29,48; --inset: 2,8,16; --bg4: #14273f; }
/* thème clair : cyan, jaune de texte et vert assombris pour rester lisibles sur fond blanc ; le jaune d'action reste celui des autobus */
:root[data-theme="light"] {
  --bg: #edf1f6; --tx: #0f1b2d; --mut: #4f6078; --sub: #6b7b91;
  --edge: 20,50,95; --inset: 244,247,251; --pa: 255,255,255; --toast: 255,255,255; --scrim: 20,30,50;
  --line: rgba(var(--edge),.16); --line2: rgba(var(--edge),.34);
  --cy: #0a7a96; --vi: #6366f1; --am: #9a6700; --ok: #0f8a57; --bad: #d4163f;
  --cy-rgb: 10,122,150; --am-rgb: 154,103,0; --ok-rgb: 15,138,87; --bad-rgb: 212,22,63; --bad-tx: #be123c;
  --bg3: #e9eef5; --bg4: #dde4ee; --green-d: #0f8a57;
}
/* GPS : l'écran de navigation (#map-page) garde EXACTEMENT ses anciennes valeurs (couleurs, police) : la refonte ne le touche pas. */
#map-page {
  --bg: #0c0e14; --bg2: #161a24; --bg3: #1f2433; --bg4: #2a3045;
  --accent: #f5a623; --accent-ink: #1a1204; --green: #2ecc71; --green-d: #1f9d55; --red: #e74c3c; --blue: #4a9eff; --nav: #1a73e8;
  --text: #f1f3f8; --text2: #a3a9bf; --text3: #6f7690; --border: #2a3046; --radius: 16px; --act-rgb: 245,166,35;
  --cert: #22c55e; --cert-bg: rgba(34,197,94,.14); --cert-redo: #f5a623;
  color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: normal; -webkit-font-smoothing: auto;
}
:root[data-theme="black"] #map-page { --bg: #000; --bg2: #0b0b0d; --bg3: #151518; --bg4: #202025; --border: #222228; --text: #f5f5f5; --text2: #9a9aa2; --text3: #66666e; }
:root[data-theme="light"] #map-page {
  --bg: #f3f4f8; --bg2: #ffffff; --bg3: #eceef4; --bg4: #e0e3ec; --border: #d9dce6;
  --accent: #d9820a; --accent-ink: #fff; --green: #1e8449; --green-d: #1e8449; --red: #c0392b; --blue: #1f6fd1; --nav: #1a73e8;
  --text: #15171f; --text2: #5c6275; --text3: #8a90a3;
  --cert: #15803d; --cert-bg: rgba(21,128,61,.12); --cert-redo: #a15c00;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; min-height: 100vh; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
.muted { color: var(--text2); }
.small { font-size: 12px; }
.accent { color: var(--accent); }
.good { color: var(--green); }
.link { color: var(--blue); text-decoration: none; font-weight: 700; }
.warn-txt { color: #e67e22; }
.empty { padding: 36px 16px; text-align: center; color: var(--text2); font-size: 15px; line-height: 1.5; }

/* ── Connexion ── */
#login-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; gap: 18px; padding: 32px; }
#login-screen .login-logo { width: min(260px, 70vw); height: auto; aspect-ratio: 1; border-radius: 28px; object-fit: cover; }
#login-screen .login-version { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text2); margin-top: -6px; }
#login-screen h2 { font-size: 24px; font-weight: 900; color: var(--accent); }
#login-screen p { font-size: 14px; color: var(--text2); margin-top: -10px; }
#login-screen input { width: 100%; max-width: 320px; height: 56px; padding: 0 16px; background: var(--bg2); border: 2px solid var(--border); border-radius: 14px; color: var(--text); font-size: 18px; text-align: center; outline: none; }
#login-screen input:focus { border-color: var(--accent); }
#login-screen button { width: 100%; max-width: 320px; height: 56px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 14px; font-size: 18px; font-weight: 900; }
#login-screen .error { color: var(--red); font-size: 14px; display: none; text-align: center; }
.tb-wake { flex-shrink: 0; font-size: 15px; line-height: 1; opacity: .85; }
.tb-wake[hidden] { display: none; }

/* ── En-tête ── */
#main-app { display: none; }
.topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(env(safe-area-inset-top) + 18px); background: var(--bg2); border-bottom: 1px solid var(--border); }
.tb-circuit { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; background: none; border: none; color: inherit; text-align: left; padding: 4px; border-radius: 12px; }
.tb-circuit:active { background: var(--bg3); }
.tb-badge { background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 22px; padding: 6px 12px; border-radius: 11px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-badge.long { font-size: 17px; padding: 8px 10px; }
.tb-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tb-meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-meta span { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-caret { color: var(--text2); font-size: 13px; flex-shrink: 0; }
.tb-clock { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tb-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 22px; display: flex; align-items: center; justify-content: center; }

/* ── Contenu ── */
.wrap { max-width: 680px; margin: 0 auto; padding: 12px 12px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.wrap .note-banner, .wrap .note-form-card { margin: 0; }
.note-banner-text { font-size: 15px; }

.seg { display: flex; background: var(--bg3); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; height: 50px; border: none; border-radius: 11px; font-size: 16px; font-weight: 800; background: none; color: var(--text2); }
.seg button.on.am { background: var(--green-d); color: #fff; }
.seg button.on.pm { background: #c0392b; color: #fff; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg2); color: var(--text); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
.chip .c1 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.chip .c2 { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.chip.on { border-color: var(--accent); background: rgba(var(--act-rgb),.12); }
.tag { font-size: 10.5px; font-weight: 900; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; }
.tag.live { background: var(--green-d); color: #fff; }
.tag.next { background: rgba(74,158,255,.18); color: var(--blue); }
.now-link { align-self: stretch; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px dashed var(--blue); background: rgba(74,158,255,.08); color: var(--blue); font-size: 14px; font-weight: 800; text-align: left; }

/* Carte « prochain arrêt » */
.hero { background: var(--bg2); border: 2px solid var(--accent); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hero.done { border-color: var(--border); }
.hero-kicker { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.hero.done .hero-kicker { color: var(--text2); }
.hero-eta { color: var(--text); font-size: 15px; letter-spacing: 0; text-transform: none; }
.hero-stop { display: flex; gap: 14px; align-items: flex-start; }
.hero-time { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05; }
.hero-name { font-size: 21px; font-weight: 800; line-height: 1.25; }
.hero-sub { font-size: 14px; color: var(--text2); margin-top: 4px; }
.btn-nav { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 16px; background: var(--nav); color: #fff; font-size: 19px; font-weight: 900; text-decoration: none; }
.btn-nav:active { filter: brightness(.9); }
.btn-sec { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 8px 12px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; text-align: center; }
.btn-sec:active { background: var(--bg4); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2.one { grid-template-columns: 1fr; }

/* Détails */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card.pad { padding: 14px; }
.card-kicker { font-size: 11px; font-weight: 900; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.kv-list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.details-toggle { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: none; border: none; color: var(--text); text-align: left; font-size: 15px; font-weight: 700; }
.details-sum { flex: 1; min-width: 0; line-height: 1.4; }
.details-sum .dot { color: var(--text3); margin: 0 6px; }
.caret { color: var(--text2); font-size: 12px; }
.details-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14.5px; border-top: 1px solid var(--border); padding-top: 12px; }
.kv .k { color: var(--text2); font-weight: 600; }
.kv .v { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }

/* Arrêts */
.stops-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 0; }
.stops-head h3 { font-size: 14px; font-weight: 900; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.icon-btn { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 19px; }
.search-box input { width: 100%; height: 52px; padding: 0 14px; background: var(--bg2); border: 2px solid var(--accent); border-radius: 14px; color: var(--text); font-size: 16px; outline: none; }
.stops { display: flex; flex-direction: column; gap: 8px; }
.past-toggle { min-height: 48px; border: 1.5px dashed var(--border); border-radius: 14px; background: none; color: var(--text2); font-size: 14px; font-weight: 800; }
.stop { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.stop-line { display: flex; align-items: stretch; }
.stop-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 66px; background: none; border: none; color: inherit; text-align: left; }
.stop-time { font-size: 18px; font-weight: 900; min-width: 52px; font-variant-numeric: tabular-nums; color: var(--accent); }
.stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stop-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.stop-sub { font-size: 12.5px; color: var(--text2); }
.stop-kids { flex-shrink: 0; font-size: 14px; font-weight: 800; padding: 5px 9px; border-radius: 10px; background: rgba(var(--act-rgb),.14); color: var(--accent); white-space: nowrap; }
.stop-nav { width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,115,232,.14); color: var(--blue); font-size: 24px; text-decoration: none; border-left: 1px solid var(--border); }
.stop-nav:active { background: rgba(26,115,232,.3); }
.stop.school { border-color: rgba(46,204,113,.55); background: rgba(46,204,113,.06); }
.stop.school .stop-time { color: var(--green); }
.stop.school .stop-kids { background: rgba(46,204,113,.15); color: var(--green); }
.stop.dom .stop-time { color: var(--blue); }
.stop.past { opacity: .45; }
.stop.next { border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(var(--act-rgb),.16); }
.stop-extra { border-top: 1px solid var(--border); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg3); }
.students { display: flex; flex-direction: column; }
.student { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
.student:last-child { border-bottom: none; }
.extra-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-mini { flex: 1; min-width: 130px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; }
.stop-via { display: flex; gap: 12px; align-items: center; padding: 2px 14px; font-size: 13px; color: var(--text3); }
.stop-via .t { min-width: 52px; font-variant-numeric: tabular-nums; }
.stop-via.past { opacity: .5; }

/* ── Sélecteur de circuit ── */
.sheet { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: none; flex-direction: column; }
.sheet.open { display: flex; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: calc(env(safe-area-inset-top) + 18px); border-bottom: 1px solid var(--border); background: var(--bg2); }
.sheet-head img { width: 40px; height: 40px; border-radius: 10px; }
.sheet-head h2 { flex: 1; font-size: 20px; font-weight: 900; }
.sheet-search { padding: 12px 16px 0; max-width: 760px; width: 100%; margin: 0 auto; }
.sheet-search input { width: 100%; height: 54px; padding: 0 16px; background: var(--bg2); border: 2px solid var(--border); border-radius: 14px; color: var(--text); font-size: 18px; outline: none; }
.sheet-search input:focus { border-color: var(--accent); }
/* Sélecteur de circuit : « Certifiés seulement » */
.pk-filter { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg2); color: var(--text2); font-size: 14px; font-weight: 700; }
.pk-filter .ic { width: 18px; height: 18px; font-size: 18px; }
.pk-filter .pk-n { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--bg3); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.pk-filter.on { border-color: var(--cert); color: var(--cert); background: var(--cert-bg); }
.pk-filter.on .pk-n { background: var(--cert); color: #04210f; }
.pk-hidden { margin: 16px 2px 0; font-size: 13.5px; color: var(--text2); text-align: center; }
.pk-hidden button { padding: 6px 4px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; cursor: pointer; }
.sheet-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
/* Tuile seule sur sa ligne : toute la largeur (seule du groupe, ou dernière d'un groupe sur 3 colonnes au téléphone). */
.pgrid > .ptile:only-child { grid-column: 1 / -1; }
.pgrid + .pgrid { margin-top: 10px; } /* (Garages, puis Spéciaux : deux tuiles pleine largeur l'une sous l'autre) */
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .pgrid > .ptile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
.ptile { position: relative; min-height: 88px; border-radius: 16px; background: var(--bg2); border: 2px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; cursor: pointer; text-align: center; }
.ptile:active { border-color: var(--accent); }
.ptile.on { border-color: var(--accent); background: rgba(var(--act-rgb),.1); }
.ptile.garage { border-color: rgba(74,158,255,.5); }
.ptile-num { font-size: 24px; font-weight: 900; line-height: 1.1; }
.ptile-num.long { font-size: 18px; }
.ptile { padding-top: 14px; }
.ptile-sub { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.ptile-sub.live { color: var(--green); font-weight: 900; }
.ptile-pin { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; background: none; border: none; font-size: 18px; color: var(--text3); }
.ptile-pin.on { color: var(--accent); }
.psec { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); margin: 20px 2px 10px; display: flex; align-items: center; gap: 8px; }
.psec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#last-update { text-align: center; font-size: 12px; color: var(--text2); opacity: .7; padding: 18px 16px 8px; }
.circuit-info { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 18px 0 8px; font-size: 13px; line-height: 1.45; color: var(--text2); text-align: center; }
/* ── Certification d'un circuit (posée dans l'app Mac, affichée aux gestionnaires) : vert = certifié valide ── */
:root { --cert: var(--ok); --cert-bg: rgba(var(--ok-rgb),.14); --cert-redo: var(--am); }
.ptile.cert-ok { border-color: var(--cert); }
.ptile.cert-ok .ptile-num { color: var(--cert); }
.ptile.cert-ok.on { background: var(--cert-bg); }
.ptile.cert-stale::after { content: attr(data-cert); position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; color: var(--cert-redo); }
.ptile.cert-stale { padding-bottom: 16px; }
.tb-badge.cert-ok { background: var(--cert); color: #04210f; }
.ap-circ-badge.cert-ok, .ap-archive-badge.cert-ok { background: var(--cert); color: #04210f; }
.ap-note-circuit.cert-ok, .adm-year.cert-ok { color: var(--cert); }
.ap-circuit-btn.cert-ok { color: var(--cert); border-color: var(--cert); }
.ap-circuit-btn.cert-ok.on { background: var(--cert-bg); }
.cert-redo { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--cert-redo); white-space: nowrap; }
.cert-line { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 700; }
.cert-line.ok { color: var(--cert); } .cert-line.redo { color: var(--cert-redo); }
.credit { text-align: center; font-size: 12px; line-height: 1.6; color: var(--text2); padding: 4px 16px calc(env(safe-area-inset-bottom) + 16px); }
.credit a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ── Menu ── */
.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 950; display: none; }
.menu-backdrop.open { display: block; }
.menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 951; background: var(--bg2); border-radius: 22px 22px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; transform: translateY(110%); transition: transform .2s ease; max-height: 85vh; overflow-y: auto; }
.menu.open { transform: none; }
.menu-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 10px; }
.menu-user { font-size: 13px; color: var(--text2); padding: 2px 12px 8px; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 12px; border: none; background: none; color: var(--text); font-size: 17px; font-weight: 700; border-radius: 12px; text-align: left; }
.menu-item span { width: 28px; text-align: center; font-size: 20px; }
.menu-item:active { background: var(--bg3); }
.menu-item.on { color: var(--green); }
.menu-item.danger { color: var(--red); }

/* Tablette / écran partagé à côté de Google Maps */
@media (min-width: 700px) {
  .ap-users-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ── BusPilot : navigation (MapLibre) ── */
.btn-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 76px; margin-bottom: 10px; border-radius: 18px; border: none; background: var(--green-d); color: #fff; font-size: 30px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 6px 18px rgba(31,157,85,.35); }
.btn-go:active { filter: brightness(.92); transform: scale(.99); }
.offline-map-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px 0 12px; font-size: 13px; font-weight: 600; color: var(--text2); }
.offline-map-status[hidden] { display: none; }
.gm-section { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 12px; padding: 10px 12px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); }
.gm-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.gm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border-radius: 11px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.gm-btn:active { border-color: var(--nav); }
body.map-open { overflow: hidden; }
#map-page { position: fixed; inset: 0; z-index: 600; background: #1a2130; }
#map-page[hidden] { display: none; }
#route-map { position: absolute; inset: 0; }
/* Bandeau de manœuvre (haut) */
.nav-banner { position: absolute; z-index: 5; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 10px); display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 16px; border-radius: 20px; background: #0f7a4a; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.nav-banner.off { background: #c0392b; }
.nav-banner.muted { background: #2b3445; }
.nav-banner.done { background: #1a73e8; }
.nav-turn { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.nav-banner-txt { min-width: 0; flex: 1; }
.nav-dist { font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.nav-instr { font-size: 17px; font-weight: 700; line-height: 1.25; opacity: .95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Carte « Prochain arrêt » (bas) */
.nav-sheet { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); padding: 14px 16px 12px; border-radius: 22px; background: rgba(18,23,33,.96); color: #f1f3f8; box-shadow: 0 -4px 28px rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root[data-theme="light"] .nav-sheet { background: rgba(255,255,255,.97); color: #15171f; }
.nav-kicker { font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #f5a623; }
.nav-stop-name { font-size: 23px; font-weight: 900; line-height: 1.2; margin-top: 3px; }
.nav-dest-addr { margin-top: 2px; font-size: 15.5px; font-weight: 600; opacity: .7; }
.nav-stop-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 18px; font-weight: 800; opacity: 1; } /* (agrandi le 27 oct. : lisible en roulant) */
.nav-remain { color: #4ade80; font-weight: 900; }
/* Dernière ligne de la fiche : distance + heure d'arrivée (vert) et pastille d'avance / retard ensemble, sous « Prévu » et les élèves (portrait comme paysage) */
/* (la ligne verte et la pastille sont dans .nav-last : une seule ligne, répartie sur toute la largeur de la bulle ; « Prévu » et élèves au-dessus, inchangés) */
.nav-last { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 6px; margin-top: 6px; font-weight: 900; font-size: clamp(17px, calc((100vw - 52px) * .062), 30px); }
.nav-last .nav-remain { display: contents; }
.nav-last .nav-remain > b { font-weight: 900; white-space: nowrap; }
.nav-last .nav-sched { font-size: .82em; white-space: nowrap; }
.nav-stop-ic { display: inline-flex; vertical-align: -3px; color: #f5a623; font-size: .95em; }
.nav-sched { padding: 2px 11px; border-radius: 12px; font-size: 17px; font-weight: 900; }
.nav-sched.ok { background: rgba(74,222,128,.16); color: #4ade80; }
.nav-sched.early { background: rgba(var(--act-rgb),.18); color: #f5a623; }
.nav-sched.late { background: rgba(239,68,68,.18); color: #f87171; }
:root[data-theme="light"] .nav-sched.ok { color: #0f7a4a; }
:root[data-theme="light"] .nav-sched.early { color: #a15c00; }
:root[data-theme="light"] .nav-sched.late { color: #c0392b; }
.nav-dwell { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; padding: 10px 12px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.nav-dwell .dw-txt { flex: 1; min-width: 0; }
.nav-dwell .ic { font-size: 22px; }
.nav-dwell b { font-size: 22px; font-variant-numeric: tabular-nums; }
.nav-dwell.wait { background: #f5a623; color: #1a1300; }
.nav-dwell.ok { background: rgba(74,222,128,.16); color: #4ade80; }
.nav-dwell.leave { background: #c0392b; color: #fff; }
:root[data-theme="light"] .nav-dwell.ok { color: #0f7a4a; }
.nav-alert { position: absolute; z-index: 5; left: 10px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 12px; border-radius: 16px; background: #fff; color: #15171f; border: 3px solid #c0392b; font-size: 18px; font-weight: 900; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.nav-alert[hidden] { display: none; }
/* Limite de vitesse (panneau canadien) au-dessus du compteur, en colonne à gauche, comme les pastilles à droite */
.nav-speed { position: absolute; z-index: 5; left: 12px; bottom: 240px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.nav-speed[hidden] { display: none; }
.spd-now { width: 66px; height: 66px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: #fff; color: #15171f; box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: background .25s, color .25s; }
.spd-val { font-size: 27px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.spd-now small { margin-top: 2px; font-size: 10.5px; font-weight: 800; opacity: .6; }
/* Panneau « vitesse maximale » canadien/québécois : rectangle blanc aux coins arrondis, filet noir, chiffre noir, « km/h » dessous */
.spd-limit { min-width: 50px; box-sizing: border-box; padding: 7px 6px 6px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; line-height: 1; background: #fff; color: #111;
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 4.5px #111, 0 4px 16px rgba(0,0,0,.35); }
.spd-limit[hidden] { display: none; }
.spd-limit b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.spd-limit.long b { font-size: 22px; }
.spd-limit small { margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.nav-speed.over .spd-now { background: #d62c1f; color: #fff; animation: spd-pulse 1.2s ease-in-out infinite; }
.nav-speed.over .spd-now small { opacity: .85; }
@keyframes spd-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .nav-speed.over .spd-now { animation: none; } }
#map-page.nav-dark .spd-now { background: #1b2230; color: #f1f3f8; box-shadow: 0 4px 16px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.12); }
#map-page.nav-dark .nav-speed.over .spd-now { background: #d62c1f; color: #fff; }
/* Sélecteur d'arrêt de la carte « Prochain arrêt » : ‹ Arrêt 3/12 › */
.nav-kick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -6px 0 0; }
.nav-kick-row .nav-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pager { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.nav-pg { width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: rgba(255,255,255,.1); color: inherit; }
.nav-pg:disabled { opacity: .25; }
.nav-pg:active:not(:disabled) { background: #f5a623; color: #1a1204; }
.nav-pg-txt { min-width: 74px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: .85; }
#map-page.nav-light .nav-pg { background: #eceef4; }
.nav-skipped { margin-top: 4px; font-size: 13px; font-weight: 700; color: #f5a623; }
.nav-pin.skipped { text-decoration: line-through; opacity: .55; }
.nav-popup .sp-goto { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 12px; border: none; border-radius: 12px; background: #f5a623; color: #1a1204; font: inherit; font-weight: 900; }
.nav-popup .sp-goto:focus:not(:focus-visible) { outline: none; }
.nav-alert b { color: #c0392b; }
.nav-rail { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.nav-kids-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: -6px 0; padding: 0 12px; border: none; border-radius: 18px; background: rgba(255,255,255,.12); color: inherit; font: inherit; }
.nav-kids-btn .chev { font-size: 12px; transition: transform .2s; }
.nav-kids-btn.open .chev { transform: rotate(180deg); }
:root[data-theme="light"] .nav-kids-btn { background: rgba(0,0,0,.07); }
.nav-kids { max-height: 32vh; overflow-y: auto; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); -webkit-overflow-scrolling: touch; }
:root[data-theme="light"] .nav-kids { border-top-color: rgba(0,0,0,.1); }
.nav-kid { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; font-size: 17px; font-weight: 700; }
.nav-kid .lvl { opacity: .6; font-weight: 600; white-space: nowrap; }
.nav-popup .sp-kids { margin: 2px 0 6px; max-height: 180px; overflow-y: auto; }
.nav-popup .sp-kids .nav-kid { padding: 4px 0; font-size: 15px; border-top: 1px solid #eee; }
:root[data-theme="light"] .nav-remain { color: #0f7a4a; }
.nav-note { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #f5a623; }
.nav-recenter { position: absolute; z-index: 6; left: calc(50% + 38px); transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 230px); min-height: 48px; padding: 0 16px; white-space: nowrap; border-radius: 28px; border: none; background: #fff; color: #1a73e8; font-size: 17px; font-weight: 900; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.nav-recenter[hidden] { display: none; }
/* Arrêts et bus sur la carte */
.nav-pin { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #111; border: 3px solid #1a2130; font-size: 15px; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer; }
.nav-pin.next { background: #f5a623; color: #1a1204; border-color: #fff; width: 42px; height: 42px; font-size: 18px; z-index: 2; }
.nav-pin.passed { opacity: .45; background: #8a93a6; }
.nav-pin.approx { border-style: dashed; }
/* Bulles des changements de rue : bleues le jour, jaunes la nuit (map.js › drawBubbles) : la queue touche le point de la manœuvre ; .l = bulle à gauche du point */
.nav-tb-anchor { width: 0; height: 0; pointer-events: none; }
.nav-tb { position: absolute; left: -14px; bottom: 9px; max-width: 190px; padding: 5px 11px 6px; border-radius: 13px; background: #2457e6; color: #fff; border: 2.5px solid #fff; font-size: 14px; font-weight: 800; line-height: 1.15; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.nav-tb span { display: block; overflow: hidden; text-overflow: ellipsis; }
.nav-tb::after { content: ''; position: absolute; left: 7px; bottom: -8px; width: 11px; height: 11px; background: #2457e6; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg) skew(12deg, 12deg); border-radius: 0 0 3px 0; }
.nav-tb.l { left: auto; right: -14px; }
.nav-dark .nav-tb { background: #ffc21a; color: #1a1204; }
.nav-dark .nav-tb::after { background: #ffc21a; }
.nav-tb.l::after { left: auto; right: 7px; transform: rotate(45deg) skew(-12deg, -12deg); }
/* Curseur du bus : Blue Bird « All American » à toit arrondi, vu de dessus (dessin : map.js › updateBus). Réagit comme les feux de l'écran :
   .amber (approche) et .red (dans le rayon de l'arrêt) font clignoter les feux de toit en alternance gauche / droite, comme #nav-lights ;
   .red sort aussi le bras d'arrêt ; .still (compteur à 0) allume les feux de freinage ; les phares s'allument avec .nav-dark (la nuit). */
.nav-bus { width: 40px; height: 95px; }
.nav-bus svg { display: block; overflow: visible; }
.nav-bus .bb-hull { filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.nav-bus .bb-beam { position: absolute; left: -10px; bottom: 92px; opacity: 0; transition: opacity .6s; pointer-events: none; }
.nav-dark .nav-bus .bb-beam { opacity: 1; }
.nav-bus .bl { --on: #fff1a6; --off: #a8741a; --hl: #ff9400; }
.nav-bus .bl.rd { --on: #ff5a4d; --off: #7d1a14; --hl: #ff3b30; }
.nav-bus .lc { fill: var(--off); stroke: #4a2c00; stroke-width: .55; }
.nav-bus .lh { fill: var(--hl); opacity: 0; }
@keyframes bus-lc { 0%, 49.99% { fill: var(--on); } 50%, 100% { fill: var(--off); } }
@keyframes bus-lh { 0%, 49.99% { opacity: .8; } 50%, 100% { opacity: 0; } }
.nav-bus.amber .bl.am .lc, .nav-bus.red .bl.rd .lc { animation: bus-lc 1s step-end infinite; }
.nav-bus.amber .bl.am .lh, .nav-bus.red .bl.rd .lh { animation: bus-lh 1s step-end infinite; }
.nav-bus.amber .bl.am.g2 .lc, .nav-bus.amber .bl.am.g2 .lh, .nav-bus.red .bl.rd.g2 .lc, .nav-bus.red .bl.rd.g2 .lh { animation-delay: -.5s; }
.nav-bus .bb-arm { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.nav-bus.red .bb-arm { opacity: 1; transform: none; }
.nav-bus .bb-brake { fill: #d6352b; }
.nav-bus .bb-bg { fill: #ff3b30; opacity: 0; transition: opacity .2s; }
.nav-bus.still .bb-brake { fill: #ff3b30; }
.nav-bus.still .bb-bg { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .nav-bus.amber .bl.am .lc, .nav-bus.red .bl.rd .lc { animation: none; fill: var(--on); }
  .nav-bus.amber .bl.am .lh, .nav-bus.red .bl.rd .lh { animation: none; opacity: .8; }
  .nav-bus .bb-arm, .nav-bus .bb-beam, .nav-bus .bb-bg { transition: none; }
}
.nav-popup .maplibregl-popup-content { padding: 14px 16px; border-radius: 16px; font-size: 16px; line-height: 1.4; color: #15171f; }
.nav-popup .sp-name { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.nav-popup .sp-meta { font-weight: 700; margin-bottom: 4px; }
.nav-popup .sp-addr { color: #555; margin-bottom: 6px; }
.nav-popup .sp-approx { color: #b36b00; font-weight: 700; font-size: 14px; }
.nav-popup .sp-gmaps { display: block; margin-top: 10px; padding: 12px; border-radius: 12px; background: #1a73e8; color: #fff; text-align: center; font-weight: 900; text-decoration: none; }
.maplibregl-ctrl-attrib { font-size: 10px; }
#map-page .maplibregl-ctrl-bottom-right, #map-page .maplibregl-ctrl-bottom-left { bottom: calc(env(safe-area-inset-bottom) + 215px); }

/* ── BusPilot : Gestion › Trajets ── */
.rt-summary-card { display: flex; flex-direction: column; gap: 12px; }
.rt-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text2); }
.rt-counts b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.rt-job { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.rt-err { margin-top: 6px; color: var(--red); font-weight: 600; font-size: 12.5px; }
.rt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border); }
.rt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rt-name { font-size: 15px; font-weight: 800; }
.rt-time { color: var(--text2); font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rt-chip { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.rt-chip.ok { background: rgba(46,204,113,.14); color: var(--green); }
.rt-chip.stale { background: rgba(var(--act-rgb),.16); color: var(--accent); }
.rt-chip.none { background: var(--bg3); color: var(--text2); }
.rt-meta { font-size: 12.5px; color: var(--text2); }
.rt-settings { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rt-settings label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rt-settings input { width: 72px; min-height: 40px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg3); color: var(--text); font-size: 15px; text-align: center; }

/* ── BusPilot : icônes Phosphor (icons.js) ── */
.ic { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; display: block; }
.adm-tile-icon .ic { width: 1em; height: 1em; color: var(--accent); }
.ap-title .ic, .adm-year .ic { color: var(--accent); }
.ptile.garage .ptile-num .ic { width: 1.1em; height: 1.1em; color: var(--accent); }
.psec .ic { color: var(--accent); }
.menu-item > span:first-child .ic { color: var(--accent); }
.seg .ic { width: 1.05em; height: 1.05em; }
.tb-wake .ic { color: var(--accent); }
.live-bus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 20px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer; filter: none; }
.menu-item.danger > span:first-child .ic { color: var(--red); }

/* ── Page Garages : bouton Retour (comme la V2), sous la barre d'état iOS ── */
#garage-page-header { justify-content: flex-start; gap: 12px; padding: 12px 16px; padding-top: calc(env(safe-area-inset-top) + 18px); background: var(--bg2); border-bottom: 1px solid var(--border); }
#garage-page-title { font-size: 18px; font-weight: 900; line-height: 1.15; min-width: 0; text-wrap: balance; }
.back-btn { min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 16px; font-weight: 800; flex-shrink: 0; }
.back-btn:active { background: var(--bg4); }

/* ─── Messagerie ─────────────────────────────────────────────────────────── */
.tb-msg { position: relative; flex-shrink: 0; margin-right: auto; width: 54px; height: 48px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 27px; display: flex; align-items: center; justify-content: center; }
.tb-msg:active { background: var(--bg4); }
.tb-msg .ic { width: 1em; height: 1em; }
.tb-dot { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #e5322d; color: #fff; border: 2px solid var(--bg2); font-size: 13px; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.tb-dot[hidden] { display: none; }

#msg-page { display: none; position: fixed; left: 0; right: 0; top: 0; height: 100%; background: var(--bg); z-index: 500; flex-direction: column; }
#msg-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: calc(env(safe-area-inset-top) + 18px); background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#msg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 17px; font-weight: 800; line-height: 1.2; }
#msg-title span, #msg-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#msg-title small { font-size: 12px; font-weight: 600; color: var(--text2); }
.msg-new-btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: none; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 900; flex-shrink: 0; }
.msg-new-btn[hidden] { display: none; }
#msg-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.msg-rows, .msg-new { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(env(safe-area-inset-bottom) + 16px); }
.msg-row, .msg-target { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); color: inherit; text-align: left; }
.msg-row:active, .msg-target:active { background: var(--bg3); }
.msg-row.unread { border-color: var(--accent); }
.msg-target[hidden] { display: none; }
.msg-target:disabled { opacity: .5; }
.msg-target.group { border-color: rgba(74,158,255,.45); }
.msg-target .ic { font-size: 26px; color: var(--accent); flex-shrink: 0; }
.msg-avatar.staff { background: #4a9eff; color: #fff; }
.msg-tag { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: rgba(74,158,255,.18); color: #4a9eff; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.msg-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-main, .msg-target > span:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-main b, .msg-target b { font-size: 16px; }
.msg-prev, .msg-target small { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row.unread .msg-prev { color: var(--text); font-weight: 700; }
.msg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.msg-meta time { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.msg-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e5322d; color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.msg-sec { margin: 10px 2px 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.msg-search { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 16px; }
.msg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 28px; text-align: center; color: var(--text2); }
.msg-empty .ic { font-size: 44px; color: var(--accent); }
.msg-empty p { margin: 0; font-size: 15px; }
.msg-empty .muted { font-size: 13px; }
.msg-toast { margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px; background: rgba(39,174,96,.18); color: var(--green); font-weight: 700; }
.msg-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.msg-day { align-self: center; margin: 10px 0 4px; padding: 3px 12px; border-radius: 10px; background: var(--bg3); color: var(--text2); font-size: 12px; font-weight: 700; }
.msg-b { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.msg-b.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.msg-b.other { align-self: flex-start; background: var(--bg2); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg-text { font-size: 16px; line-height: 1.4; white-space: pre-wrap; }
.msg-b time { align-self: flex-end; font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.msg-from { font-size: 12px; font-weight: 800; color: var(--accent); }
.msg-group { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; opacity: .8; }
#msg-compose { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px); background: var(--bg2); border-top: 1px solid var(--border); flex-shrink: 0; }
#msg-compose[hidden] { display: none; }
#msg-input { flex: 1; min-width: 0; max-height: 140px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; resize: none; }
#msg-send { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-ink); font-size: 24px; display: flex; align-items: center; justify-content: center; }
#msg-send .ic { width: 1em; height: 1em; }

/* Confirmation et messages dans l'app (à la place de confirm() / alert() du navigateur) */
.app-dialog { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.6); }
.app-dialog-card { width: 100%; max-width: 380px; padding: 20px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.app-dialog-card p { margin: 0 0 18px; font-size: 17px; line-height: 1.45; font-weight: 600; }
.app-dialog-btns { display: flex; gap: 10px; }
.app-dialog-btns button { flex: 1; min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 16px; font-weight: 800; }
.app-dialog-btns .app-dialog-yes { background: #c0392b; border-color: #c0392b; color: #fff; }
.app-toast { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 2100; padding: 14px 16px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.4; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.app-toast.err { background: #c0392b; border-color: #c0392b; color: #fff; }
.menu-credit { margin-top: 6px; padding: 10px 6px 2px; font-size: 11.5px; line-height: 1.5; color: var(--text2); text-align: center; }
.menu-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.menu-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg3); color: var(--text2); font-size: 13px; line-height: 1.45; }

/* Écran de navigation : mode jour / nuit propre à la carte (voir map.js), indépendant du thème de l'application */
#map-page.nav-dark .nav-sheet { background: rgba(18,23,33,.96); color: #f1f3f8; }
#map-page.nav-dark .nav-remain { color: #4ade80; }
#map-page.nav-dark .nav-sched.ok { color: #4ade80; }
#map-page.nav-dark .nav-sched.early { color: #f5a623; }
#map-page.nav-dark .nav-sched.late { color: #f87171; }
#map-page.nav-dark .nav-dwell.ok { color: #4ade80; }
#map-page.nav-dark .nav-kids-btn { background: rgba(255,255,255,.12); }
#map-page.nav-dark .nav-kids { border-top-color: rgba(255,255,255,.12); }
#map-page.nav-light .nav-sheet { background: rgba(255,255,255,.97); color: #15171f; }
#map-page.nav-light .nav-remain { color: #0f7a4a; }
#map-page.nav-light .nav-sched.ok { color: #0f7a4a; }
#map-page.nav-light .nav-sched.early { color: #a15c00; }
#map-page.nav-light .nav-sched.late { color: #c0392b; }
#map-page.nav-light .nav-dwell.ok { color: #0f7a4a; }
#map-page.nav-light .nav-kids-btn { background: rgba(0,0,0,.07); }
#map-page.nav-light .nav-kids { border-top-color: rgba(0,0,0,.1); }
.tb-theme { width: 46px; height: 48px; font-size: 24px; }
.tb-theme .ic { width: 1em; height: 1em; }

/* Écran de navigation : le bouton « i » des crédits est retiré (plein écran de conduite). Les crédits restent
   au bas du menu de l'application et sur la carte du suivi en direct. */
#route-map .maplibregl-ctrl-attrib { display: none !important; }

/* Crédits de la carte sur l'écran de navigation : une ligne minuscule, tout en bas à droite, sous la fiche. */
.nav-credit { position: absolute; z-index: 4; right: 12px; bottom: calc(env(safe-area-inset-bottom) * .35 + 1px); font-size: 8px; line-height: 1; letter-spacing: .01em; pointer-events: none; white-space: nowrap; color: rgba(255,255,255,.6); text-shadow: 0 0 2px rgba(0,0,0,.8); }
#map-page.nav-light .nav-credit { color: rgba(0,0,0,.55); text-shadow: 0 0 2px rgba(255,255,255,.9); }

/* ── GPS en paysage : la carte occupe tout l'écran, les infos sont deux bulles arrondies à droite (comme en portrait) ──
   En portrait .nav-panel n'existe pas pour la mise en page (display: contents) : bandeau et fiche restent posés sur la carte.
   En paysage c'est une colonne transparente qui ne reçoit pas les touchers (la carte reste manipulable autour des bulles) ;
   le bandeau est en haut, la fiche en bas, la carte passe entre les deux. Sa largeur (--nav-side) sert aussi de repère aux autres éléments. */
.nav-panel { display: contents; }
@media (orientation: landscape) {
  #map-page { --nav-r: env(safe-area-inset-right, 0px); --nav-side: calc(clamp(290px, 40vw, 400px) + 20px + var(--nav-r)); } /* (+20 px : les deux marges autour des bulles ; la bulle garde la largeur de l'ancien panneau) */
  #route-map { right: 0; }
  .nav-panel { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: var(--nav-side); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
    padding: calc(env(safe-area-inset-top) + 10px) calc(var(--nav-r) + 10px) calc(env(safe-area-inset-bottom) + 10px) 10px; pointer-events: none; }
  .nav-panel > * { pointer-events: auto; }
  .nav-panel .nav-banner { position: static; flex-shrink: 0; min-height: 70px; gap: 12px; padding: 10px 14px; }
  .nav-panel .nav-turn { width: 42px; height: 42px; } .nav-panel .nav-turn svg { width: 38px; height: 38px; }
  .nav-panel .nav-dist { font-size: 25px; } .nav-panel .nav-instr { font-size: 15.5px; }
  .nav-panel .nav-alert { position: static; flex-shrink: 0; min-height: 44px; margin: 0; padding: 5px 12px 5px 8px; font-size: 16px; }
  /* La fiche est collée en bas et prend la hauteur de son contenu : si l'écran est trop bas, le prochain arrêt défile (liste d'élèves), les boutons restent visibles. */
  .nav-panel .nav-sheet { position: static; flex: 0 1 auto; min-height: 0; margin-top: auto; display: flex; flex-direction: column; padding: 12px 14px 12px; }
  .nav-panel #nav-next { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-panel .nav-kick-row { margin: 0; }
  .nav-panel .nav-stop-name { font-size: 21px; }
  .nav-panel .nav-stop-meta { font-size: 17px; row-gap: 8px; }
  .nav-panel .nav-last { font-size: 19px; }
  .nav-panel .nav-kids-btn { margin: 0; }
  .nav-panel .nav-kids { max-height: none; overflow: visible; }
  .nav-panel .nav-dwell { margin: 0 0 8px; padding: 7px 10px; font-size: 15px; }
  /* Sur la carte (à gauche du panneau) : compteur en bas à gauche, pastilles en bas à droite, rue et « Recentrer » en bas au centre. */
  .nav-speed { left: max(12px, calc(env(safe-area-inset-left) + 4px)); bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .nav-recenter { left: calc((100% - var(--nav-side)) / 2); bottom: calc(env(safe-area-inset-bottom) + 12px); min-height: 46px; }
  .nav-credit { right: calc(var(--nav-side) + 8px); }
  #map-page .maplibregl-ctrl-bottom-right, #map-page .maplibregl-ctrl-bottom-left { bottom: calc(env(safe-area-inset-bottom) + 8px); }
  #map-page .maplibregl-ctrl-bottom-right { right: var(--nav-side); } /* (la carte passe sous les bulles : les mentions restent à leur gauche) */
}

/* ─── Tableau de bord de l'administrateur ─────────────────────────────────── */
.dash-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--bg2); }
.dash-sum > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-sum b { font-size: 17px; } .dash-sum small { font-size: 12.5px; color: var(--text2); }
.dash-sum-ic { font-size: 30px; display: flex; } .dash-sum-ic .ic { width: 1em; height: 1em; }
.dash-sum.ok { border-color: rgba(39,174,96,.6); } .dash-sum.ok .dash-sum-ic { color: #27ae60; }
.dash-sum.warn { border-color: rgba(var(--act-rgb),.7); } .dash-sum.warn .dash-sum-ic { color: #f5a623; }
.dash-sum.fail { border-color: rgba(229,72,77,.75); } .dash-sum.fail .dash-sum-ic { color: #e5484d; }
.dash-alert { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(229,72,77,.14); color: #e5484d; font-weight: 700; font-size: 14px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.dash-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg2); min-width: 0; text-align: center; }
.dash-card-h { font-size: 15px; font-weight: 800; display: flex; flex-direction: column; } .dash-card-h small { font-size: 12px; font-weight: 600; color: var(--text2); }
.dash-gauge { width: 100%; max-width: 190px; margin: 4px 0 0; }
.dash-gauge .dg-track { stroke: var(--bg4, var(--border)); }
.dash-gauge.ok .dg-val { stroke: #27ae60; } .dash-gauge.warn .dg-val { stroke: #f5a623; } .dash-gauge.fail .dg-val { stroke: #e5484d; }
.dash-gauge .dg-pct { font-size: 21px; font-weight: 900; fill: var(--text); font-variant-numeric: tabular-nums; }
.dash-gauge .dg-lbl { font-size: 8px; fill: var(--text2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dash-nums { font-size: 13.5px; } .dash-nums b { font-variant-numeric: tabular-nums; }
.dash-sub { font-size: 12px; color: var(--text2); }
.dash-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text2); }
.dash-na { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; color: var(--text2); font-weight: 700; }
.dash-rows { display: flex; flex-direction: column; padding: 4px 14px; }
.dash-row { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-row:last-child { border-bottom: none; }
.dash-row b { font-variant-numeric: tabular-nums; font-size: 16px; }
.dash-row small { grid-column: 1 / -1; font-size: 12px; color: var(--text2); }
.dash-row .bad { color: #e5484d; font-weight: 700; }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.dash-bars { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); min-width: 0; }
.dash-bars-h { font-size: 12.5px; font-weight: 800; color: var(--text2); margin-bottom: 8px; }
.dash-bars-row { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.dash-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.dash-bar-fill { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: var(--bg4, #56607a); } .dash-bar-fill.today { background: var(--accent); }
.dash-bar-n { font-size: 9.5px; color: var(--text2); font-variant-numeric: tabular-nums; } .dash-bar-d { font-size: 10px; color: var(--text2); text-transform: capitalize; }
.dash-chks { padding: 4px 14px; }
.dash-chk { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-chk:last-child { border-bottom: none; }
.dash-chk > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-chk b { font-size: 14.5px; } .dash-chk small { font-size: 12.5px; color: var(--text2); line-height: 1.4; word-break: break-word; }
.dash-chk em { font-style: normal; font-size: 11.5px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-chk-ic { font-size: 22px; display: flex; margin-top: 1px; } .dash-chk-ic .ic { width: 1em; height: 1em; }
.dash-chk.ok .dash-chk-ic { color: #27ae60; } .dash-chk.warn .dash-chk-ic { color: #f5a623; } .dash-chk.fail .dash-chk-ic { color: #e5484d; } .dash-chk.na .dash-chk-ic { color: var(--text2); }
.dash-data { margin: 10px 2px 0; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
/* Parcours modifié récemment (import du soir) */
.route-chg { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 14px; border: 1.5px solid rgba(74,158,255,.6); background: rgba(74,158,255,.1); }
.route-chg .ic { font-size: 22px; color: var(--blue); margin-top: 1px; }
.route-chg > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.route-chg b { font-size: 15px; } .route-chg span { font-size: 13.5px; line-height: 1.4; color: var(--text2); }
/* Fenêtre « Signaler un problème » */
.report-card h3 { margin: 0 0 12px; font-size: 19px; }
.report-card textarea { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.report-card small { display: block; margin: 8px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.report-card .report-send { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dash-setup { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); }
.dash-setup summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.dash-setup-body { padding: 0 14px 12px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.dash-setup-body p { margin: 8px 0; } .dash-setup-body pre { margin: 6px 0; padding: 10px; border-radius: 10px; background: var(--bg); overflow-x: auto; font-size: 12px; color: var(--text); }
.dash-setup-body code { font-size: 12px; word-break: break-all; }

/* ── Voyages spéciaux : écran du contrat (specials.js) ── */
.sp-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 20px; letter-spacing: .3px; white-space: nowrap; background: var(--bg3); color: var(--text2); }
.sp-pill.soon { background: rgba(74,158,255,.16); color: var(--blue); }
.sp-pill.today { background: rgba(var(--act-rgb),.18); color: var(--accent); }
.sp-pill.live { background: var(--green-d); color: #fff; }
.sp-pill.done, .sp-pill.muted { background: var(--bg3); color: var(--text2); }
.sp-chips .chip { min-width: 200px; }
.sp-hero { background: var(--bg2); border: 2px solid var(--border); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.sp-hero.today, .sp-hero.live { border-color: var(--accent); }
.sp-hero.soon { border-color: rgba(74,158,255,.45); }
.sp-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.sp-date { font-size: 26px; font-weight: 900; line-height: 1.15; margin-top: 4px; }
.sp-year { font-size: 16px; color: var(--text2); font-weight: 700; }
.sp-client { font-size: 17px; font-weight: 800; }
.sp-trip { font-size: 14px; color: var(--text2); }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.sp-fact { background: var(--bg3); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; min-width: 0; }
.sp-fact-k { font-size: 11px; font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.sp-fact-t { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sp-fact-w { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13.5px; color: var(--text2); font-weight: 700; }
.sp-info span { display: inline-flex; align-items: center; gap: 5px; }
.sp-live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--act-rgb),.12); color: var(--text); font-weight: 700; font-size: 14.5px; }
.sp-live b { color: var(--accent); margin-left: auto; }
.sp-live.done { background: var(--bg3); color: var(--text2); }
.sp-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.sp-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 800; text-decoration: none; }
.sp-act .ic { font-size: 22px; color: var(--accent); }
.sp-act.urgent .ic { color: var(--red); }
.sp-act:active { background: var(--bg3); }
.sp-remarks { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(var(--act-rgb),.08); border: 1.5px solid rgba(var(--act-rgb),.35); font-size: 14px; line-height: 1.45; }
.sp-remarks > .ic { color: var(--accent); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.sp-remarks b { display: block; margin-bottom: 2px; }
.sp-tl { display: flex; flex-direction: column; }
.sp-step { display: flex; align-items: stretch; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sp-step.next { border: 2px solid var(--accent); }
.sp-step.past { opacity: .5; }
.sp-step.garage { background: var(--bg); border-style: dashed; }
.sp-step-time { width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sp-step-dot { width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 20px; }
.sp-step.garage .sp-step-dot { color: var(--text2); }
.sp-step-body { flex: 1; min-width: 0; padding: 10px 8px 10px 0; display: flex; flex-direction: column; gap: 2px; }
.sp-step-kind { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-step-name { font-size: 16px; font-weight: 800; line-height: 1.25; }
.sp-step-addr { background: none; border: none; padding: 0; text-align: left; color: var(--text2); font-size: 13px; line-height: 1.35; cursor: pointer; }
.sp-step-meta { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.sp-step-nav { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,115,232,.14); color: var(--blue); font-size: 20px; text-decoration: none; border-left: 1px solid var(--border); }
.sp-gap { align-self: flex-start; margin: 0 0 0 78px; padding: 6px 0 6px 14px; border-left: 2px dotted var(--border); font-size: 12.5px; color: var(--text2); font-weight: 700; }
.sp-pause { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg3); font-size: 13px; color: var(--text2); }
.sp-pause > .ic { font-size: 18px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.sp-pause b { color: var(--text); display: block; font-size: 14px; }
.sp-pause span { display: block; }
.sp-card .card-kicker { display: flex; align-items: center; gap: 6px; }
.sp-contact-name { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.sp-rows { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--bg3); color: var(--text); text-decoration: none; font-weight: 800; font-size: 15px; }
.sp-row .ic { color: var(--accent); font-size: 20px; }
.sp-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sp-row span.nowrap, .sp-row.tel span { white-space: nowrap; }
.sp-row em { font-style: normal; font-size: 12px; color: var(--text2); font-weight: 700; max-width: 42%; text-align: right; line-height: 1.2; }
.sp-client-block { margin-top: 12px; font-size: 14px; line-height: 1.45; }

/* ── Gestion › Contrats spéciaux : import et attribution ── */
.sp-kv { border-top: none; padding-top: 0; }
.sp-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: sp-spin .8s linear infinite; flex-shrink: 0; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-imp-off { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; margin-bottom: 4px; border-radius: 12px; border: 1px dashed var(--border); }
.sp-adm-row { padding: 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sp-adm-row.archived { opacity: .65; }
.sp-adm-top { display: flex; align-items: center; gap: 10px; }
.sp-adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-adm-main b { font-size: 15px; }
.sp-adm-main span { font-size: 12.5px; color: var(--text2); }
.sp-adm-drivers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-drv { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 20px; border: 1.5px solid var(--accent); background: rgba(var(--act-rgb),.1); color: var(--text); font-weight: 800; font-size: 13px; cursor: pointer; }
.sp-drv span { color: var(--text2); }
.sp-drv-add { min-height: 34px; border-radius: 20px; border: 1.5px dashed var(--border); background: var(--bg3); color: var(--text2); font-weight: 700; font-size: 13px; padding: 0 10px; }
.sp-adm-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Démarrage avec une session enregistrée : pas de formulaire pendant la restauration */
.login-restoring { display: none; align-items: center; gap: 10px; color: var(--text2); font-weight: 700; font-size: 15px; }
html.bp-restoring .login-restoring { display: flex; }
html.bp-restoring #login-screen > p, html.bp-restoring #login-screen > input, html.bp-restoring #login-screen > button, html.bp-restoring #login-screen > .error { display: none; }

/* Écrans étroits (≤ 400 px, iPhone SE / mini) : barre un peu resserrée pour que le badge tienne en entier */
@media (max-width: 400px) {
  .topbar { gap: 7px; }
  .tb-circuit { gap: 6px; }
  .tb-badge { padding: 6px 9px; }
  .tb-clock { font-size: 20px; }
}
/* Très petits écrans (≤ 350 px) : barre du haut resserrée, le badge du circuit garde sa place */
@media (max-width: 350px) {
  .topbar { gap: 7px; padding-left: 8px; padding-right: 8px; }
  .tb-msg { width: 46px; }
  .tb-icon, .tb-theme { width: 42px; }
  .tb-clock { font-size: 18px; }
  .tb-badge { font-size: 17px; padding: 6px 7px; }
}

/* Gestion › comptes : champs côte à côte (prénom / nom ; courriel ou mot de passe + bouton) */
.ap-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-row2.pass { grid-template-columns: 1fr auto; align-items: start; }
.ap-row2.pass .adm-btn { min-height: 44px; }
@media (max-width: 360px) { .ap-row2 { grid-template-columns: 1fr; gap: 0; } .ap-row2.pass { grid-template-columns: 1fr; } .ap-row2.pass .adm-btn { margin-bottom: 10px; } }

/* Connexion : mot de passe oublié */
#login-screen .login-forgot { width: auto; min-height: 0; height: auto; margin: 0; background: none; border: none; box-shadow: none; color: var(--text2); font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.login-help { max-width: 320px; padding: 12px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-size: 14px; line-height: 1.45; text-align: center; }
.login-help[hidden] { display: none; }
html.bp-restoring #login-screen > .login-forgot, html.bp-restoring #login-screen > .login-help { display: none; }

/* Note d'un élève (consigne du transporteur : « L'asseoir en avant », « PM vendredi seulement ») */
.student-note { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 1px; }

/* ── Fond d'écran du tableau de bord (dashmap.js) : carte des arrêts, bleu nuit, points lumineux, sans interaction ── */
.dm-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #02050c; }
/* (la bibliothèque de cartes impose « position: relative » à son conteneur : règle plus précise ici) */
.dm-bg .dm-map.maplibregl-map, .dm-bg .dm-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dm-fx i { position: absolute; display: block; }
.dm-grid { inset: 0; background-image: linear-gradient(rgba(39,211,245,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(39,211,245,.06) 1px, transparent 1px); background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); }
.dm-sweep { left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(180deg, transparent, rgba(39,211,245,.05) 60%, rgba(140,245,255,.14)); border-bottom: 1px solid rgba(160,248,255,.32); animation: dm-sweep 10s linear infinite; }
@keyframes dm-sweep { to { top: 100%; } }
/* (voile : le texte posé sur le fond reste lisible, davantage vers le bas où la page est dense) */
.dm-vig { inset: 0; background: linear-gradient(180deg, rgba(2,5,12,.1), rgba(2,5,12,.5) 55%, rgba(2,5,12,.62)); box-shadow: inset 0 0 120px 20px rgba(2,5,12,.8); }
@media (prefers-reduced-motion: reduce) { .dm-sweep { display: none; } }

/* Tableau de bord posé sur le fond : palette sombre quel que soit le thème, cartes translucides */
#admin-page.dash-bg { --bg: #050a14; --bg2: rgba(8,16,30,.86); --bg3: rgba(24,36,58,.9); --bg4: #33435f; --border: rgba(39,211,245,.24);
  --text: #eef7ff; --text2: #a9bdd4; --text3: #7489a3; --accent: #f5a623; --accent-ink: #1a1204; --red: #ff6b5e; --blue: #4a9eff;
  background: #02050c; color: var(--text); }
#admin-page.dash-bg .ap-header { background: rgba(4,12,24,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: rgba(39,211,245,.55); }
#admin-page.dash-bg .ap-layout { position: relative; z-index: 1; }
#admin-page.dash-bg .adm-section-title, #admin-page.dash-bg .dash-data { color: #b9eefb; text-shadow: 0 1px 6px #02050c, 0 0 14px #02050c; }
#admin-page.dash-bg .dash-setup-body pre { background: rgba(2,5,12,.7); }
.dash-hero { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 190px; padding: 6px 2px 2px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
@media (min-width: 720px) { .dash-hero { min-height: 250px; } }
.dm-head { display: flex; flex-direction: column; gap: 3px; }
.dm-head b { font-size: 13px; letter-spacing: .26em; color: #8ff1ff; text-shadow: 0 0 12px rgba(39,211,245,.9); }
.dm-head span { font-size: 10.5px; letter-spacing: .05em; color: rgba(216,251,255,.7); text-shadow: 0 1px 6px #02050c; }
.dm-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-stat { min-width: 58px; padding: 6px 9px; display: flex; flex-direction: column; border-radius: 10px; border: 1px solid rgba(39,211,245,.25); background: rgba(4,14,28,.68); color: #d8fbff; }
.dm-stat b { font-size: 19px; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; }
.dm-stat span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(216,251,255,.62); }
.dash-credit { margin: 14px 2px 0; font-size: 11.5px; color: rgba(216,251,255,.6); text-shadow: 0 1px 6px #02050c; }
.dash-credit a { color: #8ff1ff; }
/* ── Avis sur les renseignements personnels (notice.js) : première connexion du chauffeur, puis menu ── */
.notice-screen { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(0,0,0,.72); }
.notice-card { display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 100%; border-radius: 18px; background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden; }
.notice-card > header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.notice-card h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.25; font-weight: 800; }
.notice-card > header small { color: var(--text2); font-size: 12.5px; }
.notice-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 20px; font-size: 14.5px; line-height: 1.5; outline: none; }
.notice-body p { margin: 0 0 12px; }
.notice-lede { color: var(--text2); }
.notice-body h3 { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; font-size: 15.5px; font-weight: 800; }
.notice-body h3 span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; }
.notice-body ul { margin: 0; padding-left: 20px; }
.notice-body li { margin-bottom: 6px; }
.notice-box { margin: 16px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent); background: rgba(var(--act-rgb),.1); font-size: 14px; }
.notice-card > footer { padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.notice-check { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg3); font-size: 16.5px; font-weight: 700; cursor: pointer; }
.notice-check input { width: 26px; height: 26px; flex-shrink: 0; accent-color: var(--accent); }
.notice-err { min-height: 18px; margin: 6px 2px; color: var(--red); font-size: 13.5px; font-weight: 600; }
.notice-btns { display: flex; gap: 10px; }
.notice-btns button { flex: 1; min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 16px; font-weight: 800; }
.notice-btns .notice-out { flex: 0 1 auto; padding: 0 16px; color: var(--text2); font-size: 14.5px; font-weight: 700; }
.notice-btns .notice-go { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.notice-btns .notice-go:disabled { opacity: .45; }
.notice-done { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 10px; color: var(--green); font-size: 14px; font-weight: 700; }
.ok-txt { color: var(--green); }
/* Écran bas (téléphone couché) : titre sur une ligne, case et boutons côte à côte, pour laisser la place au texte. */
@media (max-height: 480px) {
  .notice-card { max-width: 780px; }
  .notice-card > header { padding: 9px 16px 8px; }
  .notice-card h2 { display: inline; margin: 0 8px 0 0; font-size: 16px; }
  .notice-body { padding: 10px 16px; }
  .notice-card > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px 10px; }
  .notice-check { flex: 1 1 190px; min-height: 46px; }
  .notice-btns { flex: 1 1 280px; }
  .notice-btns button { min-height: 46px; }
  .notice-err { order: 3; flex-basis: 100%; min-height: 0; margin: 0; }
  .notice-done { flex: 1 1 240px; margin: 0; }
}
/* ── Collègues chauffeurs (friends.js) : dans l'écran des messages ── */
.msg-empty.short { padding: 22px 28px 6px; }
.msg-empty.short .ic { font-size: 32px; }
.fr-block { padding-top: 4px; }
.fr-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.fr-sec button { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.fr-hint { margin: 4px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
.fr-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--accent); background: rgba(var(--act-rgb),.08); }
.fr-ask-txt { flex: 1 1 160px; min-width: 0; font-size: 15px; line-height: 1.35; }
.fr-ask-btns { display: flex; gap: 8px; flex: 1 1 100%; }
.fr-ask-btns button, .fr-btn, .fr-tools button { flex: 1; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 14.5px; font-weight: 800; }
.fr-ask-btns .fr-yes, .fr-btn.go { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.fr-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); }
.fr-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
.fr-code { font: 800 40px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; color: var(--accent); padding: 6px 0; }
.fr-add { display: flex; gap: 10px; }
.fr-add input { flex: 1; min-width: 0; font-size: 20px; letter-spacing: .2em; text-align: center; }
.fr-add .fr-btn { flex: 0 0 auto; min-height: 48px; padding: 0 18px; }
.fr-btn { flex: none; align-self: flex-start; }
.fr-tools { display: flex; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fr-tools button { min-height: 38px; font-size: 13.5px; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.msg-b.other.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fr-add input::placeholder { letter-spacing: 0; font-size: 15px; }
/* ── Guidage : pastilles rondes à droite de la carte (jour/nuit, 2D/3D, voix, quitter) et bulle de la rue en cours ── */
.nav-tools { position: absolute; z-index: 6; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 240px); display: flex; flex-direction: column; gap: 10px; transition: bottom .2s; }
.nav-fab { width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; color: #15171f; font-size: 15px; font-weight: 900; line-height: 1; box-shadow: 0 3px 12px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; }
.nav-fab:active { transform: scale(.94); }
.nav-fab .ic { width: 22px; height: 22px; font-size: 22px; }
.nav-fab small { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .65; }
.nav-fab.exit { color: #d93025; font-size: 19px; }
#map-page.nav-dark .nav-fab { background: rgba(26,32,45,.97); color: #f1f3f8; }
#map-page.nav-dark .nav-fab.exit { color: #ff6b5b; }
.nav-speed { transition: bottom .2s; }
.nav-street { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 232px); max-width: calc(100% - 32px); padding: 7px 16px; border-radius: 20px; background: #fff; color: #17306b; font-size: 16.5px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 12px rgba(0,0,0,.35); pointer-events: none; }
.nav-street[hidden] { display: none; }
#map-page.nav-dark .nav-street { background: rgba(26,32,45,.97); color: #dbe6ff; }
/* Paysage : pastilles en bas à droite de la carte (à gauche du panneau), rue en bas au centre de la carte ; quand la bulle
   de la rue est là, compteur, pastilles et « Recentrer » montent d'une rangée. (Après les règles de base : même poids.) */
@media (orientation: landscape) {
  .nav-street { left: calc((100% - var(--nav-side)) / 2); bottom: calc(env(safe-area-inset-bottom) + 12px); max-width: calc(100% - var(--nav-side) - 32px); }
  .nav-tools { right: calc(var(--nav-side) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px); gap: 8px; }
  .nav-fab { width: 44px; height: 44px; }
  #map-page.has-street .nav-speed, #map-page.has-street .nav-tools, #map-page.has-street .nav-recenter { bottom: calc(env(safe-area-inset-bottom) + 56px); }
}

/* ── Guidage : feux d'approche et panneau d'arrêt (comme un autobus scolaire) ─────────────────────────────────────────
   Sur toute la largeur de l'écran, comme le bandeau vert, juste dessous : à gauche un bloc (feu ROUGE, feu JAUNE), au milieu le panneau
   « ARRÊT » avec ses deux feux rouges intégrés (au-dessus et en dessous du mot), à droite un bloc (feu JAUNE, feu ROUGE). Approche (70 m) :
   les feux jaunes clignotent en alternance ; dans un rayon de 20 m de l'arrêt : les feux rouges (blocs et panneau) et le panneau. Le centre de la carte reste
   libre (intersection et curseur de position). Sans animation si l'appareil la réduit. */
.nav-lights { position: absolute; z-index: 6; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 102px); min-height: 100px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nav-lights[hidden] { display: none; }
.lt-block { display: flex; gap: 10px; padding: 9px 14px; border-radius: 999px; background: #0c0e13; box-shadow: 0 6px 20px rgba(0,0,0,.5), inset 0 0 0 2px #2a2f3a; }
.lt-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-lights:not(.red) .lt-center { visibility: hidden; } /* (la place du panneau est gardée : les feux ne bougent pas quand il apparaît) */
.nav-lights .lamp { --off-hi: #5a4310; --off: #33260a; --on-hi: #fff0b8; --on: #ffb400; --on-lo: #d98200; --glow: rgba(255,176,0,.8);
  width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle at 36% 30%, var(--off-hi), var(--off) 70%); box-shadow: inset 0 -3px 5px rgba(0,0,0,.55), 0 0 0 3px #1a1d25; }
.nav-lights .lamp { position: relative; }
.nav-lights .lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 28% 17% at 34% 26%, rgba(255,255,255,.55), transparent 100%), repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,.12) 4px 5.5px); }
.nav-lights .lamp.red { --off-hi: #5a1a1f; --off: #330b0e; --on-hi: #ffb3b3; --on: #ff2a2a; --on-lo: #c40f0f; --glow: rgba(255,42,42,.85); }
@keyframes lamp-blink {
  0%, 49.99% { background: radial-gradient(circle at 36% 30%, var(--on-hi), var(--on) 58%, var(--on-lo)); box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 0 0 3px #1a1d25, 0 0 20px 7px var(--glow); }
  50%, 100% { background: radial-gradient(circle at 36% 30%, var(--off-hi), var(--off) 70%); box-shadow: inset 0 -3px 5px rgba(0,0,0,.55), 0 0 0 3px #1a1d25; }
}
/* Deux groupes en alternance : g1 (rouge et jaune de gauche, feu du haut du panneau) puis g2 (jaune et rouge de droite, feu du bas) */
.nav-lights.amber .lamp.amber.g1, .nav-lights.red .lamp.red.g1 { animation: lamp-blink 1s step-end infinite; }
.nav-lights.amber .lamp.amber.g2, .nav-lights.red .lamp.red.g2 { animation: lamp-blink 1s step-end infinite -.5s; }
.nav-stopsign { width: 100px; height: 100px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.nav-stopsign svg { width: 100%; height: 100%; display: block; }
.nav-stopsign .sl { opacity: 0; }
.nav-stopsign .sh { fill: #ff4a3a; opacity: 0; }
@keyframes sl-blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sh-blink { 0%, 49.99% { opacity: .5; } 50%, 100% { opacity: 0; } }
.nav-lights.red .sl.g1 { animation: sl-blink 1s step-end infinite; } .nav-lights.red .sh.g1 { animation: sh-blink 1s step-end infinite; }
.nav-lights.red .sl.g2 { animation: sl-blink 1s step-end infinite -.5s; } .nav-lights.red .sh.g2 { animation: sh-blink 1s step-end infinite -.5s; }
.nav-lights.red .nav-stopsign { animation: sign-pop .18s ease-out; }
@keyframes sign-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .nav-lights.amber .lamp.amber.g1, .nav-lights.amber .lamp.amber.g2, .nav-lights.red .lamp.red.g1, .nav-lights.red .lamp.red.g2 { animation: none; background: radial-gradient(circle at 36% 30%, var(--on-hi), var(--on) 58%, var(--on-lo)); box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 0 0 3px #1a1d25, 0 0 20px 7px var(--glow); }
  .nav-lights.red .sl.g1, .nav-lights.red .sl.g2 { animation: none; opacity: 1; } .nav-lights.red .sh.g1, .nav-lights.red .sh.g2 { animation: none; opacity: .5; }
  .nav-lights.red .nav-stopsign { animation: none; }
}
@media (orientation: landscape) {
  /* Paysage : sur toute la largeur de la carte (à gauche du panneau), en haut */
  .nav-lights { right: calc(var(--nav-side) + 10px); top: calc(env(safe-area-inset-top) + 10px); min-height: 78px; }
  .nav-lights .lamp { width: 30px; height: 30px; } .lt-block { padding: 7px 11px; gap: 8px; }
  .nav-stopsign { width: 78px; height: 78px; }
}

/* ── Lien de circuit (public/link.js) : le chauffeur n'a que son circuit. Le formulaire de connexion ne s'affiche jamais. ─────────────── */
html.bp-link #login-screen { display: none !important; }
#link-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9990; gap: 18px; padding: 32px; text-align: center; }
#link-screen[hidden] { display: none; }
#link-screen .login-logo { width: min(220px, 60vw); height: auto; aspect-ratio: 1; border-radius: 28px; object-fit: cover; }
#link-screen .login-version { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text2); margin-top: -6px; }
#link-screen p { font-size: 16px; color: var(--text); max-width: 320px; line-height: 1.4; }
#link-screen button { width: 100%; max-width: 320px; height: 56px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 14px; font-size: 18px; font-weight: 900; }
body.link-mode .tb-msg { display: none !important; }
body.link-mode .tb-circuit { pointer-events: none; }
body.link-mode .tb-caret { display: none; }

/* Dernière ligne de la fiche (distance, heure d'arrivée, avance / retard) : sa taille suit la largeur de la bulle (6,2 % de sa largeur, entre 16 et 30 px),
   donc elle remplit la bulle sans jamais déborder, en portrait comme en paysage, sur un petit comme sur un grand écran. */
.nav-sheet { container-type: inline-size; }
@supports (width: 1cqw) { .nav-last, .nav-panel .nav-last { font-size: clamp(16px, 6.2cqw, 30px); } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   REFONTE DES MENUS (3 novembre 2026) : surfaces plates, traits fins d'1 px, le jaune veut dire « agis ici », le cyan « tu es ici »,
   rayons 8 / 6 / 4 px, aucune lueur ni ombre sur les panneaux, phrases en minuscules (plus de majuscules espacées), cibles de 48 px au moins.
   Ne touche NI à l'écran GPS (#map-page, classes nav-*), NI au panneau de gestion (ap-*, dash-*) qui sort de NAV.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.accent { color: var(--am); }
.good { color: var(--ok); }
.link { color: var(--cy); font-weight: 600; }
.warn-txt { color: var(--am); }
.ic:not(#map-page *) { vertical-align: -.22em; }
/* icônes Phosphor au trait : la seconde teinte (20 %) disparaît (sauf sur l'écran de guidage, qui reste tel quel) */
.ic:not(#map-page *) path[opacity] { display: none; }

/* — Plaque de circuit (élément signature) : jaune, verte si le circuit est certifié valide — */
.plate, .tb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 40px; padding: 0 12px; background: var(--act); color: var(--act-tx); font: 700 26px/1 var(--cond); letter-spacing: .02em; white-space: nowrap; border-radius: var(--r-tag); box-shadow: inset 0 0 0 1.5px rgba(26,20,0,.82); }
.plate.cert, .tb-badge.cert-ok { background: var(--ok); color: #04150c; box-shadow: inset 0 0 0 1.5px rgba(4,21,12,.7); }
.tb-badge.long { font-size: 20px; padding: 0 10px; }

/* — Barre du haut — */
.topbar { gap: 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.tb-circuit { gap: 6px; padding: 4px 8px 4px 0; border-radius: var(--r-ctl); }
.tb-circuit:active { background: rgba(var(--edge),.10); }
.tb-caret { color: var(--sub); }
.tb-clock { font: 700 26px/1 var(--cond); }
.tb-icon, .tb-msg { width: 48px; height: 48px; border-radius: var(--r-ctl); background: none; border: 1px solid var(--line2); color: var(--mut); }
.tb-icon:active, .tb-msg:active { background: rgba(var(--edge),.10); }
.tb-dot { background: var(--act); color: var(--act-tx); border: 2px solid var(--bg); }

/* — Onglets matin / après-midi : segments plats, l'actif a une barre cyan sous lui — */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: none; border: 1px solid var(--line2); border-radius: var(--r-ctl); overflow: hidden; }
.seg button { height: 52px; border-radius: 0; font-size: 17px; font-weight: 600; color: var(--mut); display: flex; align-items: center; justify-content: center; gap: 9px; }
.seg button.on, .seg button.on.am, .seg button.on.pm { background: var(--bg3); color: var(--tx); box-shadow: inset 0 -3px 0 var(--cy); }

/* — Choix du parcours (puces), étiquettes, retour au parcours en cours — */
.chip { border: 1px solid var(--line2); border-radius: var(--r-ctl); background: none; }
.chip.on { border-color: var(--cy); background: rgba(var(--cy-rgb),.10); }
.chip .c1 { font-weight: 600; }
.tag { padding: 2px 7px; border: 1px solid var(--line2); border-radius: var(--r-tag); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; background: none; color: var(--mut); }
.tag.live { background: none; color: var(--ok); border-color: rgba(var(--ok-rgb),.55); }
.tag.next { background: none; color: var(--cy); border-color: rgba(var(--cy-rgb),.5); }
.now-link { border: 1px solid var(--line2); border-radius: var(--r-ctl); background: none; color: var(--cy); font-weight: 600; }

/* — Carte « prochain arrêt » : panneau plat, barre cyan à gauche (l'actif) — */
.hero { position: relative; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px 16px 16px 19px; gap: 8px; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cy); }
.hero.done { border-color: var(--line); }
.hero.done::before { background: var(--line2); }
.hero-kicker { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mut); }
.hero.done .hero-kicker { color: var(--mut); }
.hero-eta { color: var(--cy); font-size: 15px; font-weight: 600; }
.hero-time { font: 700 46px/1 var(--cond); }
.hero-name { font: 600 21px/1.2 var(--sans); padding-top: 1px; }
.hero-sub { color: var(--mut); }

/* — Boutons : principal plein jaune ; secondaire à contour fin — */
.btn-go { min-height: 60px; margin-bottom: 4px; border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); font: 700 28px/1 var(--cond); letter-spacing: .02em; box-shadow: none; gap: 10px; }
.btn-go:active { filter: brightness(.94); transform: none; }
.btn-go .ic { font-size: 28px; }
.btn-nav { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); min-height: 56px; font-weight: 700; }
.btn-sec, .btn-mini, .gm-btn, .icon-btn, .back-btn { border: 1px solid var(--line2); border-radius: var(--r-ctl); background: none; color: var(--tx); font-weight: 600; }
.btn-sec:active, .btn-mini:active, .gm-btn:active, .icon-btn:active, .back-btn:active { background: rgba(var(--edge),.10); border-color: var(--line2); }
.icon-btn { color: var(--mut); }
.offline-map-status { color: var(--mut); }

/* — Détails, fiches, Google Maps (secours) — */
.card, .gm-section { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-panel); }
.details-toggle { font-weight: 600; }
.details-sum .dot { color: var(--sub); }
.kv { border-top-color: var(--line); }
.kv .k { color: var(--mut); font-weight: 500; }
.kv .v { font-weight: 600; }
.card-kicker, .gm-title { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mut); }
.circuit-info { color: var(--mut); }
.cert-line.ok { color: var(--ok); }
.cert-line.redo, .cert-redo { color: var(--am); }
.route-chg { border-radius: var(--r-panel); }

/* — Notes épinglées — */
.note-banner, .note-form-card { border-radius: var(--r-panel); border: 1px solid rgba(var(--act-rgb),.4); }
.note-form-card { background: var(--bg2); }
.note-banner-body { background: rgba(var(--act-rgb),.06); }
.note-badge.temp { background: none; border: 1px solid rgba(var(--cy-rgb),.5); color: var(--cy); border-radius: var(--r-tag); }
.note-badge.perm { background: none; border: 1px solid rgba(var(--ok-rgb),.55); color: var(--ok); border-radius: var(--r-tag); }
.note-add-btn, .note-type-btn, .note-cancel-btn, .btn-pin-note { border-radius: var(--r-ctl); }
.note-save-btn { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); }
.note-form-card textarea, .search-box input { background: rgb(var(--inset)); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.note-form-card textarea:focus, .search-box input:focus { border-color: var(--cy); box-shadow: 0 0 0 2px rgba(var(--cy-rgb),.45); outline: none; }

/* — Liste des arrêts : lignes séparées par un trait fin, sans carte — */
.stops-head h3 { font: 600 19px/1.2 var(--cond); letter-spacing: 0; text-transform: none; color: var(--tx); }
.stops-head h3 .muted { color: var(--sub); font-weight: 500; }
.stops { gap: 0; border-top: 1px solid var(--line); }
.past-toggle { min-height: 52px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--mut); font-size: 16px; font-weight: 500; }
.stop { position: relative; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; }
.stop-main { gap: 12px; padding: 8px 6px 8px 16px; min-height: 74px; }
.stop-time { font: 700 25px/1 var(--cond); min-width: 66px; color: var(--tx); }
.stop-name { font-weight: 600; font-size: 17px; }
.stop-sub { color: var(--mut); font-size: 14.5px; }
.stop-kids { padding: 4px 9px; border: 1px solid var(--line2); border-radius: var(--r-tag); background: none; color: var(--mut); font-size: 15px; font-weight: 600; }
.stop-nav { width: 56px; background: none; border-left: 1px solid var(--line); color: var(--cy); font-size: 24px; }
.stop-nav:active { background: rgba(var(--cy-rgb),.12); }
.stop.school, .stop.dom { border-color: var(--line); background: none; }
.stop.school .stop-time, .stop.dom .stop-time { color: var(--tx); }
.stop.school .stop-kids { background: none; color: var(--ok); border-color: rgba(var(--ok-rgb),.5); }
.stop.next { border: 0; border-bottom: 1px solid var(--line); box-shadow: none; background: rgba(var(--edge),.10); }
.stop.next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cy); }
.stop.next .stop-time { color: var(--cy); }
.stop.next .stop-kids { color: var(--cy); border-color: rgba(var(--cy-rgb),.5); }
.stop-extra { background: rgba(var(--edge),.05); border-top: 1px solid var(--line); }
.student { border-bottom-color: var(--line); }
.stop-via { color: var(--sub); }

/* — Choix du circuit — */
.sheet { background: var(--bg); }
.sheet-head { background: var(--bg); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font: 700 30px/1.1 var(--cond); }
.sheet-search input { height: 56px; background: rgb(var(--inset)); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 17px; }
.sheet-search input:focus { border-color: var(--cy); box-shadow: 0 0 0 2px rgba(var(--cy-rgb),.45); }
.pk-filter { min-height: 44px; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: none; color: var(--mut); font-weight: 500; font-size: 16px; }
.pk-filter .pk-n { border-radius: var(--r-tag); background: rgba(var(--edge),.10); color: var(--tx); font-weight: 600; }
.pk-filter.on { border-color: var(--ok); color: var(--ok); background: rgba(var(--ok-rgb),.10); }
.pk-filter.on .pk-n { background: var(--ok); color: #04150c; }
.pk-hidden { color: var(--mut); }
.pk-hidden button { color: var(--cy); font-weight: 600; text-decoration: none; }
.sheet-body { padding: 8px 14px 24px; }
.psec { margin: 18px 2px 4px; font: 600 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mut); }
.psec::after { display: none; }
.psec i { font-style: normal; color: var(--sub); font-weight: 500; margin-left: 8px; }
.pgrid { grid-template-columns: repeat(3, 1fr); gap: 4px 6px; }
.pgrid > .ptile:only-child, .pgrid > .ptile:last-child:nth-child(3n+1) { grid-column: auto; }
/* case = la plaque (cliquable) et l'étoile à côté ; pas de contour de tuile */
.ptile { min-height: 88px; padding: 6px 0 0 2px; border: 0; border-radius: 0; background: none; display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; justify-items: start; row-gap: 6px; gap: 6px 0; text-align: left; position: relative; }
.ptile:active, .ptile.on { background: none; border: 0; }
.ptile:active .plate { filter: brightness(.9); }
.ptile.on .plate { outline: 2px solid var(--cy); outline-offset: 2px; }
.ptile .plate { min-width: 70px; height: 46px; padding: 0 9px; font-size: 28px; }
.ptile-pin { position: static; width: 38px; height: 46px; justify-self: start; display: grid; place-items: center; font-size: 0; color: var(--sub); }
.ptile-pin .ic { font-size: 22px; }
.ptile-pin.on { color: var(--act); }
.ptile-state { grid-column: 1 / span 2; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 7px; border: 1px solid rgba(var(--ok-rgb),.55); border-radius: var(--r-tag); color: var(--ok); font: 600 13.5px/1 var(--sans); white-space: nowrap; }
.ptile-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ptile-state.redo { border-color: rgba(var(--am-rgb),.55); color: var(--am); }
.ptile.cert-ok, .ptile.cert-ok.on { border: 0; background: none; }
.ptile.cert-stale::after { content: none; }
.ptile.cert-stale { padding-bottom: 0; }
/* lignes pleine largeur : garages, voyages spéciaux */
.prow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 60px; padding: 0 6px 0 4px; border-bottom: 1px solid var(--line); font: 600 18px/1.2 var(--sans); cursor: pointer; }
.prow:active { background: rgba(var(--edge),.07); }
.prow .ic:first-child { font-size: 26px; color: var(--cy); }
.prow .caret-r { color: var(--sub); padding-right: 6px; }
.prow.on { box-shadow: inset 3px 0 0 var(--cy); background: rgba(var(--edge),.10); }
#last-update { color: var(--sub); opacity: 1; font-size: 13.5px; }
.credit { color: var(--sub); }
.credit a { color: var(--cy); font-weight: 600; }

/* — Menu : feuille plate, lignes de 58 px, interrupteurs — */
.menu-backdrop { background: rgba(var(--scrim),.62); }
.menu { background: var(--bg3); border-radius: 12px 12px 0 0; padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px rgba(0,0,0,.5); transition: transform .12s ease; }
.menu-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 4px auto 10px; }
.menu-user { padding: 2px 20px 12px; border-bottom: 1px solid var(--line); color: var(--mut); font-size: 14.5px; }
.menu-user strong { color: var(--tx); font-weight: 600; }
.menu-item { min-height: 58px; padding: 0 20px; gap: 16px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.menu-item:active { background: rgba(var(--edge),.10); }
.menu-item > span:first-child { width: auto; font-size: 24px; color: var(--mut); }
.menu-item > span:first-child .ic { color: var(--mut); }
.menu-item.on { color: var(--tx); }
.menu-item.danger { color: var(--bad-tx); border-bottom: 0; }
.menu-item.danger > span:first-child .ic { color: var(--bad-tx); }
.menu-item small { display: block; color: var(--mut); font-weight: 400; font-size: 14px; margin-top: 1px; }
.menu-item .menu-val { margin-left: auto; color: var(--mut); font-weight: 400; }
.menu-note { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--mut); font-size: 14.5px; }
.sw { margin-left: auto; flex: none; width: 46px; height: 28px; border-radius: var(--r-tag); border: 1px solid var(--line2); position: relative; background: rgb(var(--inset)); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 2px; background: var(--sub); }
.sw.on { background: rgba(var(--cy-rgb),.22); border-color: var(--cy); }
.sw.on::after { left: 21px; background: var(--cy); }

/* — Connexion et lien de circuit — */
#login-screen input, #link-screen input { text-align: left; height: 56px; padding: 0 16px; background: rgb(var(--inset)); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 17px; }
#login-screen input:focus { border-color: var(--cy); box-shadow: 0 0 0 2px rgba(var(--cy-rgb),.45); }
#login-screen button, #link-screen button { height: 56px; border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); font: 700 22px/1 var(--cond); letter-spacing: .02em; }
#login-screen .login-logo, #link-screen .login-logo { border-radius: 26px; width: min(180px, 52vw); }
#login-screen .login-version, #link-screen .login-version { font-size: 15px; font-weight: 500; color: var(--mut); }
#login-screen h2 { color: var(--tx); font: 700 26px/1.1 var(--cond); }
#login-screen p { color: var(--mut); font-size: 16px; }
#login-screen .error { color: var(--bad-tx); }

/* — Messages et collègues — */
#msg-header, #garage-page-header { background: var(--bg); border-bottom: 1px solid var(--line); }
#msg-title { font: 700 25px/1.05 var(--cond); }
#msg-title small { font: 400 14px var(--sans); color: var(--mut); }
.msg-new-btn { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); font-weight: 700; }
.msg-row, .msg-target { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 10px 6px; }
.msg-rows, .msg-new { gap: 0; }
.msg-row:active, .msg-target:active { background: rgba(var(--edge),.07); }
.msg-row.unread { border-color: var(--line); box-shadow: inset 3px 0 0 var(--act); padding-left: 14px; }
.msg-target.group { border-color: var(--line); }
.msg-target .ic { color: var(--cy); }
.msg-avatar { background: rgba(var(--edge),.14); color: var(--tx); font-family: var(--cond); font-weight: 700; }
.msg-avatar.staff { background: rgba(var(--vi),.2); background: rgba(139,123,255,.2); color: var(--vi-tx, #b4a9ff); }
.msg-tag { border-radius: var(--r-tag); background: none; border: 1px solid rgba(139,123,255,.5); color: #b4a9ff; }
.msg-badge { background: var(--act); color: var(--act-tx); border-radius: var(--r-tag); }
.msg-sec { font: 600 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--mut); }
.msg-b { border-radius: var(--r-panel); }
.msg-b.other { background: var(--bg2); border: 1px solid var(--line); color: var(--tx); }
.msg-b.me { background: rgba(var(--cy-rgb),.13); border: 1px solid rgba(var(--cy-rgb),.4); color: var(--tx); }
.msg-day { border: 1px solid var(--line); border-radius: var(--r-tag); background: none; color: var(--sub); }
#msg-compose { border-top: 1px solid var(--line); background: var(--bg); }
#msg-input { background: rgb(var(--inset)); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--tx); }
#msg-input:focus { border-color: var(--cy); box-shadow: 0 0 0 2px rgba(var(--cy-rgb),.45); outline: none; }
#msg-send { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); }
.fr-card, .fr-ask, .fr-block { border-radius: var(--r-panel); }
.fr-btn, .fr-ask-btns button, .fr-tools button, .fr-add input, .fr-add .fr-btn { border-radius: var(--r-ctl); }
.fr-ask-btns .fr-yes, .fr-btn.go { background: var(--act); color: var(--act-tx); }
.fr-sec { font-family: var(--sans); letter-spacing: 0; text-transform: none; }

/* — Garages, plans, signalement, avis, messages à l'écran — */
.garage-card { border: 1px solid var(--line); border-radius: var(--r-panel); }
.garage-card:hover, .garage-card:active { border-color: var(--cy); }
.garage-go { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); }
.garage-name { font: 700 21px/1.15 var(--cond); }
.garage-svc-chip { border-radius: var(--r-tag); font-weight: 600; }
.report-card, .notice-card, .notice-box { border-radius: var(--r-panel); }
.report-card textarea { background: rgb(var(--inset)); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.report-card .report-send, .notice-btns .notice-go { border-radius: var(--r-ctl); background: var(--act); color: var(--act-tx); font-weight: 700; }
.notice-btns button { border-radius: var(--r-ctl); }
.app-toast { background: var(--toast); border: 1px solid var(--line2); border-radius: var(--r-ctl); color: var(--tx); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.app-toast.err { border-color: var(--bad); }
.plan-modal-topbar { border-bottom: 1px solid var(--line); }
.plan-modal-close { border-radius: var(--r-ctl); }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

input, textarea, select { font-family: inherit; }
.caret { display: inline-flex; color: var(--sub); }
.details-toggle[aria-expanded="true"] .caret .ic, .past-toggle.open .ic { transform: rotate(180deg); }
.past-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.now-link { display: flex; align-items: center; gap: 8px; }
.menu-item .menu-val { width: auto; font-size: 17px; text-align: right; }
.app-toast.err { background: var(--toast); border-color: var(--bad); color: var(--bad-tx); }

/* — Voyages spéciaux — */
.sp-pill { padding: 2px 8px; border: 1px solid var(--line2); border-radius: var(--r-tag); background: none; color: var(--mut); font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.sp-pill.soon { background: none; color: var(--cy); border-color: rgba(var(--cy-rgb),.5); }
.sp-pill.today { background: none; color: var(--am); border-color: rgba(var(--am-rgb),.55); }
.sp-pill.live { background: none; color: var(--ok); border-color: rgba(var(--ok-rgb),.55); }
.sp-pill.done, .sp-pill.muted { background: none; color: var(--mut); }
.sp-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px 16px 16px 19px; }
.sp-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line2); }
.sp-hero.today::before, .sp-hero.live::before { background: var(--cy); }
.sp-hero.today, .sp-hero.live, .sp-hero.soon { border-color: var(--line); }
.sp-kicker { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mut); }
.sp-date { font-family: var(--cond); }
.sp-fact { background: rgba(var(--edge),.07); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.sp-fact-k { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mut); }
.sp-fact-t { font: 700 26px/1.15 var(--cond); }
.sp-info { color: var(--mut); font-weight: 600; }
.sp-live { border-radius: var(--r-ctl); background: rgba(var(--cy-rgb),.10); }
.sp-live b { color: var(--cy); }
.sp-live.done { background: rgba(var(--edge),.07); color: var(--mut); }
.sp-act { border-radius: var(--r-ctl); background: none; border: 1px solid var(--line2); font-weight: 600; }
.sp-act .ic { color: var(--cy); }
.sp-act.urgent .ic { color: var(--bad-tx); }
.sp-act:active { background: rgba(var(--edge),.10); }
.sp-remarks { border-radius: var(--r-panel); border: 1px solid rgba(var(--act-rgb),.4); background: rgba(var(--act-rgb),.06); }
.sp-remarks > .ic { color: var(--am); }
.sp-step { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; position: relative; }
.sp-step.next { border: 0; border-bottom: 1px solid var(--line); background: rgba(var(--edge),.10); }
.sp-step.next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cy); }
.sp-step.garage { background: none; border-style: solid; }
.sp-step-time { font: 700 22px/1 var(--cond); }
.sp-step-dot { color: var(--cy); }
.sp-step-kind { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sp-step-name { font-weight: 600; font-size: 17px; }
.sp-step-nav { background: none; color: var(--cy); }
.sp-gap { border-left-color: var(--line2); }
.sp-pause { border-radius: var(--r-ctl); background: rgba(var(--edge),.07); }
.sp-pause > .ic { color: var(--cy); }
.msg-sec, .fr-sec { font-size: 15px; }
.menu { box-shadow: none; }
.menu.open { box-shadow: 0 -18px 50px rgba(0,0,0,.5); }
:root[data-theme="light"] .menu.open { box-shadow: 0 -18px 50px rgba(15,27,45,.28); }
/* Clavier : anneau cyan de 2 px sur tout ce qui prend le focus (jamais retiré) ; l'écran de guidage garde ses propres réglages. */
:focus-visible:not(#map-page *):not(input):not(textarea) { outline: 2px solid var(--cy); outline-offset: 2px; } /* (champs de saisie : leur propre liseré cyan) */

/* ═══ Mode Capsule (réglage du menu, éteint par défaut) ═══════════════════════════════════════════════════════════════════════
   Même écran, mêmes données, mais la carte garde tout l'écran : un bandeau de manœuvre fin en haut, une capsule d'arrêt en bas (touchée, elle
   déplie le détail : heure prévue, élèves, attente), vitesse et limite qui flottent. Tout est sous #map-page.capsule : sans cette classe
   (mode classique), rien de ce bloc ne s'applique. */
#map-page.capsule {
  --cp-pa: 13,30,53; --cp-inset: 4,14,27; --cp-tx: #f1f5fa; --cp-mut: #a3b3c8; --cp-sub: #7a8ea8;
  --cp-line: rgba(160,190,225,.16); --cp-line2: rgba(160,190,225,.32);
  --cp-cy: #33e2fe; --cp-cy-rgb: 51,226,254; --cp-ok: #3fd68f; --cp-ok-rgb: 63,214,143; --cp-bad: #ff6178; --cp-bad-rgb: 255,97,120; --cp-badtx: #ff9aab; --cp-am: #fec811; --cp-am-rgb: 254,200,17;
  --cp-sans: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cp-cond: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--cp-sans); font-variant-numeric: tabular-nums;
}
#map-page.capsule.nav-light {
  --cp-pa: 255,255,255; --cp-inset: 244,247,251; --cp-tx: #0f1b2d; --cp-mut: #4f6078; --cp-sub: #6b7b91;
  --cp-line: rgba(20,50,95,.16); --cp-line2: rgba(20,50,95,.34);
  --cp-cy: #0a7a96; --cp-cy-rgb: 10,122,150; --cp-ok: #0f8a57; --cp-ok-rgb: 15,138,87; --cp-bad: #d4163f; --cp-bad-rgb: 212,22,63; --cp-badtx: #be123c; --cp-am: #9a6700; --cp-am-rgb: 154,103,0;
}
/* haut : un bandeau de manœuvre fin (flèche, distance, consigne sur une ligne) */
#map-page.capsule .nav-banner { min-height: 72px; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--cp-line2); border-radius: 8px; background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; }
#map-page.capsule .nav-turn { width: 52px; height: 52px; border: 1px solid rgba(var(--cp-cy-rgb),.5); border-radius: 6px; color: var(--cp-cy); background: rgba(var(--cp-cy-rgb),.12); }
#map-page.capsule .nav-turn svg { width: 38px; height: 38px; }
#map-page.capsule .nav-banner.off .nav-turn { border-color: rgba(var(--cp-bad-rgb),.6); color: var(--cp-badtx); background: rgba(var(--cp-bad-rgb),.1); }
#map-page.capsule .nav-banner.off .nav-dist { color: var(--cp-badtx); }
#map-page.capsule .nav-banner.muted .nav-turn { border-color: var(--cp-line2); color: var(--cp-mut); background: transparent; }
#map-page.capsule .nav-banner.done .nav-turn { border-color: rgba(var(--cp-ok-rgb),.5); color: var(--cp-ok); background: rgba(var(--cp-ok-rgb),.1); }
#map-page.capsule .nav-banner-txt { display: flex; align-items: center; gap: 10px; }
#map-page.capsule .nav-dist { flex: none; font: 700 50px/.9 var(--cp-cond); letter-spacing: .2px; white-space: nowrap; }
#map-page.capsule .nav-dist small { margin-left: 3px; font-size: 25px; font-weight: 600; color: var(--cp-mut); }
#map-page.capsule .nav-dist[data-n="w"] { max-width: 46%; font-size: 24px; line-height: 1.05; white-space: normal; }
#map-page.capsule .nav-instr { flex: 1; min-width: 0; font: 600 18.5px/1.14 var(--cp-sans); opacity: 1; -webkit-line-clamp: 3; }
/* bas : la capsule d'arrêt ; touchée, elle déplie le détail (la fiche habituelle) */
#map-page.capsule .nav-sheet { padding: 0; border: 1px solid var(--cp-line2); border-radius: 8px; background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-cap { display: none; }
#map-page.capsule .nav-cap { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
#map-page.capsule .nav-cap:active { background: rgba(var(--cp-cy-rgb),.1); }
#map-page.capsule .cap-tc { flex: none; display: flex; flex-direction: column; gap: 3px; }
#map-page.capsule .cap-tc b { font: 700 34px/.9 var(--cp-cond); }
#map-page.capsule .cap-tc i { font: 600 12.5px/1 var(--cp-sans); font-style: normal; letter-spacing: .2px; color: var(--cp-mut); }
#map-page.capsule .cap-name { flex: 1; min-width: 0; font: 600 16.5px/1.15 var(--cp-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#map-page.capsule .cap-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid; border-radius: 4px; font: 600 15px/1.05 var(--cp-sans); white-space: nowrap; }
#map-page.capsule .cap-tag .ic { font-size: 17px; }
#map-page.capsule .cap-tag.ok { color: var(--cp-ok); border-color: rgba(var(--cp-ok-rgb),.5); background: rgba(var(--cp-ok-rgb),.12); }
#map-page.capsule .cap-tag.early, #map-page.capsule .cap-tag.wait { color: var(--cp-am); border-color: rgba(var(--cp-am-rgb),.55); background: rgba(var(--cp-am-rgb),.12); }
#map-page.capsule .cap-tag.late { color: var(--cp-badtx); border-color: rgba(var(--cp-bad-rgb),.5); background: rgba(var(--cp-bad-rgb),.12); }
#map-page.capsule .cap-chev { flex: none; display: flex; color: var(--cp-sub); }
#map-page.capsule .cap-chev svg { width: 18px; height: 18px; }
.nav-det { position: relative; }
#map-page.capsule .nav-det { display: none; padding: 20px 14px 12px; }
#map-page.capsule .nav-sheet.open .nav-cap { display: none; }
#map-page.capsule .nav-sheet.open .nav-det { display: block; }
#map-page.capsule .nav-grip { position: absolute; left: 50%; top: 0; width: 96px; height: 28px; padding: 0; transform: translateX(-50%); border: 0; background: none; -webkit-tap-highlight-color: transparent; }
#map-page.capsule .nav-grip i { display: block; width: 38px; height: 4px; margin: 7px auto 0; border-radius: 2px; background: var(--cp-line2); }
#map-page.capsule .nav-kicker { font: 500 16px/1.2 var(--cp-sans); letter-spacing: 0; text-transform: none; color: var(--cp-mut); }
#map-page.capsule .nav-pg { width: 52px; height: 46px; border: 1px solid var(--cp-line2); border-radius: 6px; background: rgba(var(--cp-inset),.6); color: var(--cp-tx); }
#map-page.capsule .nav-pg:active:not(:disabled) { background: var(--cp-cy); color: #04141a; }
#map-page.capsule .nav-pg-txt { font: 600 17px var(--cp-sans); letter-spacing: 0; text-transform: none; color: var(--cp-mut); }
#map-page.capsule .nav-stop-name { margin-top: 10px; font: 600 24px/1.12 var(--cp-sans); }
#map-page.capsule .nav-stop-ic { color: var(--cp-am); }
#map-page.capsule .nav-dest-addr { color: var(--cp-mut); opacity: 1; }
#map-page.capsule .nav-stop-meta { gap: 8px; margin-top: 9px; font: 600 16px/1 var(--cp-sans); opacity: 1; }
#map-page.capsule .nav-stop-meta > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--cp-line2); border-radius: 4px; color: var(--cp-mut); }
#map-page.capsule .nav-kids-btn { min-height: 30px; height: 30px; margin: 0; padding: 0 10px; border: 1px solid rgba(var(--cp-cy-rgb),.5); border-radius: 4px; background: rgba(var(--cp-cy-rgb),.1); color: var(--cp-cy); font: 600 16px/1 var(--cp-sans); }
#map-page.capsule .nav-last { justify-content: flex-start; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cp-line); font: 600 24px/1 var(--cp-cond); }
#map-page.capsule .nav-last .nav-remain > b { color: var(--cp-tx); }
#map-page.capsule .nav-last .nav-sched { margin-left: auto; padding: 5px 10px; border: 1px solid; border-radius: 4px; font: 600 15px/1 var(--cp-sans); }
#map-page.capsule .nav-sched.ok { color: var(--cp-ok); border-color: rgba(var(--cp-ok-rgb),.5); background: rgba(var(--cp-ok-rgb),.12); }
#map-page.capsule .nav-sched.early { color: var(--cp-am); border-color: rgba(var(--cp-am-rgb),.55); background: rgba(var(--cp-am-rgb),.12); }
#map-page.capsule .nav-sched.late { color: var(--cp-badtx); border-color: rgba(var(--cp-bad-rgb),.5); background: rgba(var(--cp-bad-rgb),.12); }
#map-page.capsule .nav-dwell { margin: -2px 0 10px; padding: 9px 12px; border-radius: 6px; font: 600 16px/1.15 var(--cp-sans); }
#map-page.capsule .nav-dwell b { font: 700 26px/1 var(--cp-cond); white-space: nowrap; }
#map-page.capsule .nav-dwell.wait { border: 1px solid rgba(var(--cp-am-rgb),.55); background: rgba(var(--cp-am-rgb),.12); color: var(--cp-am); }
#map-page.capsule .nav-dwell.ok { border: 1px solid rgba(var(--cp-ok-rgb),.5); background: rgba(var(--cp-ok-rgb),.12); color: var(--cp-ok); }
#map-page.capsule .nav-dwell.leave { border: 1px solid rgba(var(--cp-bad-rgb),.55); background: rgba(var(--cp-bad-rgb),.14); color: var(--cp-badtx); }
#map-page.capsule .nav-kids { margin-top: 10px; padding-top: 6px; border-top-color: var(--cp-line); }
#map-page.capsule .nav-kid { font-weight: 500; border-top: 1px solid var(--cp-line); }
#map-page.capsule .nav-kid:first-child { border-top: 0; }
#map-page.capsule .nav-kid .lvl { color: var(--cp-mut); opacity: 1; }
#map-page.capsule .nav-note, #map-page.capsule .nav-skipped { padding: 0 14px 8px; color: var(--cp-am); }
#map-page.capsule .nav-sheet:not(.open) .nav-note { padding-top: 0; margin-top: -2px; }
/* sur la carte : vitesse (compteur rond, limite à côté), boutons, rue, avertissement, recentrage */
#map-page.capsule .nav-speed { flex-direction: row-reverse; align-items: flex-end; gap: 8px; }
#map-page.capsule .spd-now { width: 74px; height: 74px; border: 3px solid var(--cp-line2); background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; }
#map-page.capsule .spd-val { font: 700 40px/.9 var(--cp-cond); letter-spacing: 0; }
#map-page.capsule .spd-now small { margin-top: 3px; font: 500 11px/1 var(--cp-sans); color: var(--cp-mut); opacity: 1; }
#map-page.capsule .nav-speed.over .spd-now { border-color: var(--cp-bad); background: var(--cp-bad); color: #fff; }
#map-page.capsule .nav-speed.over .spd-now small { color: #fff; opacity: .85; }
#map-page.capsule .nav-tools { gap: 6px; }
#map-page.capsule .nav-tools.cp-grid { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width: 94px; }
#map-page.capsule .nav-fab { width: 44px; height: 44px; border: 1px solid var(--cp-line2); border-radius: 6px; background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; font: 700 15px/1 var(--cp-sans); }
#map-page.capsule .nav-fab.exit { color: var(--cp-badtx); }
#map-page.capsule .nav-street { padding: 6px 12px; border: 1px solid var(--cp-line2); border-radius: 6px; background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; font: 600 16px/1.15 var(--cp-sans); }
#map-page.capsule .nav-alert { left: 10px; right: 10px; min-height: 42px; padding: 0 14px; border: 1px solid rgba(var(--cp-am-rgb),.55); border-radius: 6px; background: rgba(var(--cp-pa),.96); color: var(--cp-am); box-shadow: none; font: 600 18px var(--cp-sans); }
#map-page.capsule .nav-alert b { margin-left: auto; color: var(--cp-tx); font: 700 20px var(--cp-cond); }
#map-page.capsule .nav-recenter { border: 1px solid var(--cp-line2); border-radius: 6px; background: rgba(var(--cp-pa),.96); color: var(--cp-tx); box-shadow: none; font-family: var(--cp-sans); }
@media (orientation: portrait) {
  #map-page.capsule .nav-street { left: 156px; right: auto; transform: none; max-width: calc(100% - 168px); } /* (à droite du compteur et de la limite, sur la même rangée) */
}
@media (orientation: portrait) and (max-height: 720px) { /* petits écrans : un peu plus serré */
  #map-page.capsule .nav-banner { min-height: 64px; padding: 8px 12px 8px 8px; }
  #map-page.capsule .nav-turn { width: 46px; height: 46px; }
  #map-page.capsule .nav-turn svg { width: 34px; height: 34px; }
  #map-page.capsule .nav-dist { font-size: 44px; }
  #map-page.capsule .nav-dist small { font-size: 22px; }
  #map-page.capsule .nav-instr { font-size: 17px; }
  #map-page.capsule .nav-cap { min-height: 58px; }
  #map-page.capsule .cap-tc b { font-size: 30px; }
  #map-page.capsule .nav-stop-name { margin-top: 6px; font-size: 22px; }
}
@media (orientation: landscape) {
  /* paysage : la colonne de droite garde sa place (bandeau, avertissement, capsule) ; la carte occupe tout le reste */
  #map-page.capsule .nav-panel .nav-banner { min-height: 66px; padding: 8px 12px 8px 8px; }
  #map-page.capsule .nav-panel .nav-turn { width: 44px; height: 44px; }
  #map-page.capsule .nav-panel .nav-turn svg { width: 32px; height: 32px; }
  #map-page.capsule .nav-panel .nav-banner-txt { display: block; }
  #map-page.capsule .nav-panel .nav-dist { font-size: 40px; }
  #map-page.capsule .nav-panel .nav-dist small { font-size: 20px; }
  #map-page.capsule .nav-panel .nav-dist[data-n="w"] { max-width: none; font-size: 22px; }
  #map-page.capsule .nav-panel .nav-instr { margin-top: 2px; font-size: 16px; -webkit-line-clamp: 2; }
  #map-page.capsule .nav-panel .nav-alert { margin: 0; }
  #map-page.capsule .nav-panel .nav-cap { min-height: 58px; gap: 10px; }
  #map-page.capsule .nav-panel .cap-tc b { font-size: 30px; }
  #map-page.capsule .nav-panel .nav-det { padding: 18px 12px 10px; }
  #map-page.capsule .nav-panel .nav-stop-name { font-size: 20px; margin-top: 6px; }
  #map-page.capsule .nav-panel .nav-stop-meta { margin-top: 7px; }
  #map-page.capsule .nav-panel .nav-pg { width: 44px; height: 40px; }
  #map-page.capsule .nav-panel .nav-last { margin-top: 8px; padding-top: 8px; font-size: 20px; }
}

/* Journal de conduite : pastille d'enregistrement (visible seulement quand le drapeau du compte est actif, pendant le guidage). Petite étiquette à cheval sur le bord haut du bandeau. */
.nav-rec { position: absolute; z-index: 7; left: 18px; top: calc(env(safe-area-inset-top) + 1px); display: flex; align-items: center; gap: 6px; height: 17px; padding: 0 9px 0 7px; border-radius: 9px; background: rgba(20, 24, 34, .92); color: #fff; font: 600 11px/1 var(--font, system-ui, sans-serif); letter-spacing: .01em; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.nav-rec[hidden] { display: none; }
.nav-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4a3a; animation: nav-rec-blink 1.6s ease-in-out infinite; }
@keyframes nav-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .nav-rec i { animation: none; } }