/* =====================================================================
   WinoTrack — habillage mobile (téléphone et tablette, < 992 px)
   Chargé avec media="(max-width: 991.98px)" : l'affichage PC n'est pas touché.
   Palette : bleu nuit #0B1220 · bleu électrique #2563EB · accent #3B82F6
   Propriétés logiques (inline-start / end) : compatible arabe (RTL).
   ===================================================================== */
:root {
    --m-bg: #F2F5FA;
    --m-card: #FFFFFF;
    --m-line: #E6EBF2;
    --m-ink: #0F172A;
    --m-muted: #64748B;
    --m-blue: #2563EB;
    --m-blue-2: #3B82F6;
    --m-blue-soft: #EAF1FF;
    --m-night: #0B1220;
    --m-radius: 18px;
    --m-radius-sm: 12px;
    --m-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --m-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
}
html { -webkit-tap-highlight-color: transparent; }
body { background: var(--m-bg); color: var(--m-ink); font-size: 15px; -webkit-font-smoothing: antialiased; }
a { -webkit-touch-callout: none; }

/* ------------------------------------------------------------- Barre du haut */
.topbar {
    position: sticky; top: 0; z-index: 1025;
    min-height: 58px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
    background: radial-gradient(120% 140% at 0% 0%, #1E3A8A 0%, #0B1220 55%) !important;
    box-shadow: 0 6px 18px rgba(11, 18, 32, .25);
    display: flex; align-items: center; gap: 12px;
}
.topbar .sb-brand { font-size: 1.08rem; letter-spacing: .2px; gap: 8px; }
.topbar .sb-brand b { color: #60A5FA; }
.topbar .sb-logo { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.topbar-icon { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
               border-radius: 12px; background: rgba(255, 255, 255, .08); color: #E2E8F0 !important; font-size: 1.05rem; }
.topbar .dot-badge { top: -4px; inset-inline-end: -6px; border: 2px solid #0B1220; }
.topbar .sb-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #60A5FA, #2563EB) !important;
                     color: #fff !important; font-weight: 700; font-size: .85rem; box-shadow: 0 4px 12px rgba(37, 99, 235, .4); }

/* ------------------------------------------------------------- Zone de contenu */
.app-main > main { padding: 14px 14px calc(104px + env(safe-area-inset-bottom)) !important; }
.app-main > main.main-map { padding: 0 0 calc(92px + env(safe-area-inset-bottom)) !important; }

/* Titres de page */
main h1.h4, main .h4:first-child { font-size: 1.45rem; font-weight: 700; letter-spacing: -.2px; color: var(--m-ink); }
main > .d-flex.justify-content-between:first-child,
main > .d-flex.flex-wrap:first-child,
.dash-head { margin-bottom: 14px !important; align-items: center !important; gap: 10px !important; }
.dash-head > div:first-child .small, main h1 + .small, main h1 + p.small { color: var(--m-muted) !important; font-size: .82rem; margin-top: 2px; }
nav[aria-label="breadcrumb"], .breadcrumb, main > .small:first-child { font-size: .8rem; }
.section-title { font-size: .98rem !important; font-weight: 700 !important; color: #1E293B !important; margin: 22px 2px 10px !important; display: flex; align-items: center; gap: 8px; }
.section-title i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
                   background: var(--m-blue-soft); color: var(--m-blue); font-size: .85rem; margin: 0 !important; }

/* ------------------------------------------------------------- Cartes */
.panel, .dcard, .card, .device-card, .vehicle-tile, .map-panel, .login-card {
    background: var(--m-card) !important; border: 0 !important; border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow);
}
.panel { padding: 16px !important; }
.dcard { padding: 16px !important; }
.dcard-h { margin-bottom: 12px !important; }
.dcard-h h2 { font-size: 1rem !important; font-weight: 700 !important; display: flex; align-items: center; gap: 8px; }
.dcard-h h2 i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
                background: var(--m-blue-soft); font-size: .85rem; }
.empty { border: 1.5px dashed #CBD5E1 !important; border-radius: var(--m-radius) !important; background: #FFFFFF !important;
         padding: 22px 18px !important; text-align: center; color: var(--m-muted) !important; }
.dash-grid, .row.g-2, .row.g-3 { --bs-gutter-y: 12px; }

/* Compteurs (statistiques) */
.stat { border: 0 !important; border-radius: 16px !important; box-shadow: var(--m-shadow); padding: 12px 14px !important; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0;
               background: var(--st-c, var(--m-blue)); }
.stat-moving { --st-c: #22C55E; } .stat-stopped, .stat-overdue { --st-c: #EF4444; } .stat-offline { --st-c: #94A3B8; } .stat-soon { --st-c: #F59E0B; }
.stat .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat .stat-label { font-size: .78rem; color: var(--m-muted); }
.kpis { gap: 10px !important; }
.kpi { border-radius: 18px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .10); padding: 14px !important; }
.kpi b { font-size: 1.45rem !important; letter-spacing: -.3px; }
.kpi span { font-size: .76rem !important; opacity: .95; }
.hs { border: 0 !important; border-radius: 14px !important; box-shadow: var(--m-shadow); padding: 8px 12px !important; }

/* ------------------------------------------------------------- Puces de période / filtres */
.state-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px !important; padding: 2px 2px 6px;
               margin-inline: -2px; scroll-snap-type: x proximity; max-width: 100%; }
.state-chips::-webkit-scrollbar { display: none; }
.state-chips a, .state-chips button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; border-radius: 999px !important;
                                      padding: 8px 14px !important; font-size: .82rem !important; font-weight: 600;
                                      background: #FFFFFF; border: 1px solid var(--m-line) !important; color: #334155 !important;
                                      text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.state-chips a.active, .state-chips button.active, .state-chips .active {
    background: linear-gradient(135deg, #3B82F6, #2563EB) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .35);
}
.dash-head > .d-flex { width: 100%; }
.dash-head { flex-wrap: wrap; }

/* ------------------------------------------------------------- Formulaires */
.form-label { font-size: .8rem !important; font-weight: 600; color: #475569; margin-bottom: 6px; }
.form-control, .form-select {
    min-height: 48px; border-radius: var(--m-radius-sm) !important; border: 1.5px solid var(--m-line) !important;
    background-color: #F8FAFC; font-size: 16px !important;   /* 16 px : évite le zoom automatique de l'iPhone */
    padding-inline: 14px; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control-sm, .form-select-sm { min-height: 42px; }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus { background-color: #FFFFFF; border-color: var(--m-blue-2) !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, .15) !important; }
.form-control[type="file"] { padding: 10px 12px; }
.form-text { font-size: .76rem; color: var(--m-muted); }
.form-check { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-inline-start: 0; }
.form-check > .form-text, .form-check > div.small { flex-basis: 100%; padding-inline-start: 32px; margin-top: 0; }
.form-check .form-check-input { float: none; margin: 0; width: 22px; height: 22px; flex: 0 0 auto; border: 1.5px solid #CBD5E1; }
.form-check .form-check-input[type="checkbox"] { border-radius: 7px; }
.form-switch .form-check-input { width: 46px; height: 26px; border-radius: 26px; }
.form-check-label { font-size: .92rem; flex: 1 1 0; min-width: 0; }
.form-switch > .form-text { padding-inline-start: 56px; }
.input-group > .form-control, .input-group > .form-select { border-radius: 0 !important; }
.input-group > :first-child { border-start-start-radius: var(--m-radius-sm) !important; border-end-start-radius: var(--m-radius-sm) !important; }
.input-group > :last-child { border-start-end-radius: var(--m-radius-sm) !important; border-end-end-radius: var(--m-radius-sm) !important; }
.input-group-text { background: #EEF2F7; border: 1.5px solid var(--m-line); font-size: .9rem; }
fieldset, .field { border-radius: var(--m-radius) !important; }

/* Boutons */
.btn { border-radius: var(--m-radius-sm); min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-sm { min-height: 38px; padding: 6px 12px; font-size: .84rem; border-radius: 11px; }
.btn-primary { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%); border: 0; box-shadow: 0 6px 16px rgba(37, 99, 235, .32); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(37, 99, 235, .3); }
.btn-success { border: 0; box-shadow: 0 6px 16px rgba(22, 163, 74, .28); }
.btn-danger { border: 0; box-shadow: 0 6px 16px rgba(239, 68, 68, .28); }
.btn-outline-secondary { border-color: #D7DEE8; color: #334155; background: #FFFFFF; }
.btn-outline-primary { background: #FFFFFF; border-width: 1.5px; }
.btn-link { min-height: 0; }
.btn-close { min-height: 0; }
/* Boutons d'enregistrement d'un formulaire : pleine largeur, faciles à toucher */
form > .btn-primary[type="submit"]:last-child,
form > div:last-child > .btn-primary[type="submit"]:only-child,
.form-actions .btn-primary { width: 100%; min-height: 50px; font-size: 1rem; }
form .d-flex.gap-2 > .btn-primary[type="submit"] { flex: 1 1 auto; min-height: 48px; }
/* Ligne d'en-tête « Titre + bouton Ajouter » : bouton compact en pilule */
main > .d-flex.justify-content-between:first-child > .btn,
main > .d-flex.justify-content-between:first-child > a.btn { border-radius: 999px; padding-inline: 14px; }

/* ------------------------------------------------------------- Tableaux → cartes
   Les en-têtes sont recopiés dans data-label par app.js ; chaque ligne devient une carte
   avec le premier champ en titre et les autres en grille de 2 colonnes. */
.table-responsive { overflow: visible; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.panel > .table-responsive, .dcard > .table-responsive { margin: 0 -4px; }
table.app-table.m-cards, table.app-table.m-cards > tbody, table.app-table.m-cards > tfoot { display: block; width: 100%; background: transparent !important; }
table.app-table.m-cards > thead { display: none; }
table.app-table.m-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; margin-bottom: 10px;
                             background: #FFFFFF; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
                             border: 1px solid #EEF2F7; }
.panel table.app-table.m-cards tr, .dcard table.app-table.m-cards tr { box-shadow: none; border-color: #E9EEF5; background: #FBFCFE; }
table.app-table.m-cards td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important;
                             text-align: start !important; white-space: normal !important; min-width: 0; font-size: .9rem; }
table.app-table.m-cards td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    color: #94A3B8; margin-bottom: 2px;
}
table.app-table.m-cards td:first-child { grid-column: 1 / -1; font-size: 1rem; font-weight: 600; padding-bottom: 8px !important;
                                         border-bottom: 1px dashed #E2E8F0 !important; }
table.app-table.m-cards td:first-child::before { display: none !important; }
table.app-table.m-cards td.m-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
table.app-table.m-cards td.m-actions::before { display: none !important; }
table.app-table.m-cards td.m-wide { grid-column: 1 / -1; }
table.app-table.m-cards td:empty { display: none; }
table.app-table.m-cards > tfoot tr { background: var(--m-blue-soft) !important; border-color: #D6E4FF; }
table.app-table.m-cards > tfoot td:first-child { border-bottom-color: #C7D7F8 !important; }

/* ------------------------------------------------------------- Listes d'alertes / flux */
.alert-list { gap: 10px; display: flex; flex-direction: column; }
.alert-item { border: 0 !important; border-radius: 16px !important; box-shadow: var(--m-shadow); padding: 12px 14px !important; margin: 0 !important; }
.alert-item .ai-icon { width: 40px; height: 40px; border-radius: 12px; }
.alert-item .ai-title { font-weight: 600; font-size: .95rem; }
.feed > * { border-radius: 12px; }

/* Messages flash */
main > .alert { border: 0; border-radius: 14px; box-shadow: var(--m-shadow); font-size: .9rem; }
.alert-success { background: #ECFDF3; color: #166534; }
.alert-warning { background: #FFF8E6; color: #92400E; }
.alert-danger { background: #FEF2F2; color: #991B1B; }
.alert-info { background: #EFF6FF; color: #1E40AF; }
.badge { border-radius: 999px; padding: .38em .7em; font-weight: 600; }

/* Tuiles véhicules */
.vehicle-tile { padding: 14px 16px !important; border-inline-start: 0 !important; position: relative; }
.vehicle-tile::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--st, #CBD5E1); }
.vehicle-tile .vt-name { font-size: 1.05rem; }
.vehicle-tile .vt-edit { border-radius: 10px; min-height: 36px; width: 36px; }

/* ------------------------------------------------------------- Barre de navigation du bas */
.bottom-nav {
    inset-inline: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 68px; border-radius: 24px; padding: 0 6px;
    background: rgba(255, 255, 255, .92) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16), 0 1px 0 rgba(255, 255, 255, .6) inset !important; border: 1px solid rgba(226, 232, 240, .8) !important;
}
.bottom-nav a, .bottom-nav button { color: #94A3B8; font-size: .68rem; font-weight: 600; justify-content: center; }
.bottom-nav i { font-size: 1.2rem; transition: transform .15s; }
.bottom-nav a.active:not(.bn-fab) { color: var(--m-blue) !important; }
.bottom-nav a.active:not(.bn-fab)::before { top: auto !important; bottom: 7px; inset-inline: calc(50% - 3px) !important; width: 6px; height: 6px;
                                            border-radius: 50% !important; background: var(--m-blue) !important; }
.bottom-nav a.active:not(.bn-fab) span { display: none; }
.bottom-nav a.active:not(.bn-fab) i { transform: translateY(-3px) scale(1.12); }
.bottom-nav a.bn-fab i { width: 58px !important; height: 58px !important; margin-top: -30px !important; border: 5px solid var(--m-bg) !important;
                         background: radial-gradient(120% 120% at 20% 10%, #60A5FA 0%, #2563EB 55%, #1E3A8A 100%) !important;
                         box-shadow: 0 10px 24px rgba(37, 99, 235, .5) !important; }
.bottom-nav a.bn-fab span { color: var(--m-blue) !important; }
.bottom-nav .dot-badge { top: 8px !important; border: 2px solid #fff; }

/* Menu « Plus » (panneau latéral) */
.offcanvas-lg.sidebar { border-start-end-radius: 26px; border-end-end-radius: 26px; box-shadow: var(--m-shadow-lg); }
.sidebar .side-link { border-radius: 12px; min-height: 46px; }

/* ------------------------------------------------------------- Bandeau d'installation */
.install-banner { border-radius: var(--m-radius) !important; border: 0 !important; box-shadow: var(--m-shadow-lg) !important; }
.ios-install { border-radius: var(--m-radius) !important; }

/* ------------------------------------------------------------- Connexion */
.login-wrap { min-height: 100vh; min-height: 100dvh; align-items: flex-end !important; padding: 0 !important; margin: -14px -14px 0;
              background: radial-gradient(130% 70% at 0% 0%, #1E3A8A 0%, #0B1220 60%) fixed; position: relative; }
.login-wrap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46vh;
                      background: url("brand/mark.png") no-repeat center 42% / 96px auto; opacity: .95; }
.login-card { max-width: none !important; border-radius: 28px 28px 0 0 !important; border-top: 0 !important; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)) !important;
              box-shadow: 0 -10px 40px rgba(0, 0, 0, .25) !important; position: relative; animation: m-sheet .45s cubic-bezier(.2, .8, .2, 1); }
.login-card .login-logo { max-width: 190px; height: auto; }
.login-card .btn-primary { width: 100%; min-height: 52px; font-size: 1.02rem; }
@keyframes m-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------- Cartes géographiques */
.map-panel, .leaflet-container { border-radius: var(--m-radius) !important; }
.main-map .leaflet-container, .main-map .map-panel { border-radius: 0 !important; }
.leaflet-bar { border: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .16) !important; }
.leaflet-bar a { width: 38px !important; height: 38px !important; line-height: 38px !important; }

/* Pied de tableau et éléments divers */
.pagination .page-link { border-radius: 10px !important; margin-inline: 2px; min-width: 40px; text-align: center; }
hr { opacity: .08; }

/* Animation d'apparition douce des cartes (désactivée si l'utilisateur limite les animations) */
@media (prefers-reduced-motion: no-preference) {
    /* « backwards » : une fois l'animation finie, plus aucun effet (pas de contexte d'empilement qui gênerait
       menus déroulants et fenêtres) */
    main > *, .dash-grid > *, .kpis > *, .alert-list > * { animation: m-in .35s ease-out backwards; }
    .kpis > *:nth-child(2), .dash-grid > *:nth-child(2) { animation-delay: .04s; }
    .kpis > *:nth-child(3), .dash-grid > *:nth-child(3) { animation-delay: .08s; }
    .kpis > *:nth-child(4), .dash-grid > *:nth-child(4) { animation-delay: .12s; }
    .kpis > *:nth-child(n+5), .dash-grid > *:nth-child(n+5) { animation-delay: .16s; }
}
@keyframes m-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Petits écrans (< 380 px) */
@media (max-width: 379.98px) {
    .app-main > main { padding-inline: 10px !important; }
    table.app-table.m-cards tr { grid-template-columns: 1fr; }
    .kpi b { font-size: 1.25rem !important; }
}
.row > [class*="col"] > .form-check { min-height: 48px; margin-bottom: 0; }
.form-check .form-check-label { margin: 0; }

/* =====================================================================
   Suivi en direct d'un véhicule (live.php?id=…) : carte plein écran
   ===================================================================== */
.lv-page .topbar, .lv-page .bottom-nav, .lv-page .install-banner, .lv-page .ios-install { display: none !important; }
.lv-page .app-main > main.main-map { padding: 0 !important; }
.lv-page .track-layout { position: fixed; inset: 0; height: auto; min-height: 0; z-index: 1; }
.lv-page .track-map { border: 0 !important; border-radius: 0 !important; }
.lv-page main > .alert { position: fixed; z-index: 1200; top: calc(env(safe-area-inset-top) + 74px); inset-inline: 12px; }

/* Barre flottante du haut */
.lv-top { position: absolute; z-index: 600; top: calc(env(safe-area-inset-top) + 12px); inset-inline: 12px;
          display: flex; align-items: center; gap: 10px; pointer-events: none; }
.lv-top > * { pointer-events: auto; }
.lv-round { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px;
            background: rgba(255, 255, 255, .94); color: #0F172A !important; border: 0; font-size: 1.05rem; text-decoration: none;
            box-shadow: 0 6px 18px rgba(15, 23, 42, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lv-round:active { transform: scale(.94); }
.lv-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; height: 46px; padding: 0 14px;
            border-radius: 15px; background: rgba(11, 18, 32, .86); color: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); line-height: 1.15; }
.lv-title strong { font-size: .95rem; display: block; }
.lv-title bdi { font-size: .72rem; color: #93C5FD; }
.lv-live { display: none; }

/* Boutons flottants à droite : recentrer, itinéraire */
.lv-fabs { position: absolute; z-index: 600; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 10px;
           bottom: calc(var(--lv-sheet, 260px) + 16px); transition: bottom .25s ease; }
.lv-recenter.active { background: linear-gradient(135deg, #3B82F6, #2563EB); color: #fff !important; box-shadow: 0 8px 20px rgba(37, 99, 235, .45); }

/* Commandes Leaflet : sous la barre du haut, zoom masqué (pincer pour zoomer) */
.lv-page .leaflet-top { top: calc(env(safe-area-inset-top) + 68px); }
.lv-page .leaflet-control-zoom { display: none; }
.lv-page .leaflet-bottom { bottom: calc(var(--lv-sheet, 260px) + 6px); transition: bottom .25s ease; }
.lv-page .leaflet-control-attribution { font-size: .6rem; opacity: .75; border-radius: 6px 0 0 0; }

/* Voiture plus grande, avec un halo de la couleur de son état */
.lv-page .vm-car { transform: scale(1.35); transform-origin: 50% 50%; }
.lv-page .vm { overflow: visible !important; }
.lv-page .vm::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
                       background: rgba(37, 99, 235, .28); border: 2px solid rgba(37, 99, 235, .45); z-index: -1;
                       animation: lv-halo 2s ease-out infinite; pointer-events: none; }
@keyframes lv-halo { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.lv-page .vm:has(.st-moving)::before { background: rgba(34, 197, 94, .28); border-color: rgba(34, 197, 94, .5); }
.lv-page .vm:has(.st-stopped)::before { background: rgba(239, 68, 68, .22); border-color: rgba(239, 68, 68, .45); animation-duration: 3s; }
.lv-page .vm:has(.st-offline)::before { background: rgba(148, 163, 184, .25); border-color: rgba(148, 163, 184, .4); animation: none; transform: scale(.8); }
/* Outils secondaires (plein écran, mesure, recherche…) masqués : la carte reste dégagée */
.lv-page .wt-tools { display: none; }

/* Panneau du bas (bottom sheet) */
.lv-sheet.track-card { position: absolute; z-index: 700; inset-inline: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important;
                       border-radius: 26px 26px 0 0 !important; padding: 6px 18px calc(16px + env(safe-area-inset-bottom)) !important;
                       box-shadow: 0 -10px 34px rgba(15, 23, 42, .18) !important; background: #FFFFFF !important; }
.lv-handle { display: flex; align-items: center; justify-content: center; width: 64px; height: 26px; padding: 0; margin: -2px auto 4px;
              border: 0; border-radius: 13px; background: #EEF2F7; color: #2563EB; font-size: .9rem; }
.lv-handle i { transition: transform .3s ease; }
.lv-sheet.is-collapsed .lv-handle i { animation: lv-bounce 1.4s ease-in-out infinite; }
.lv-sheet:not(.is-collapsed) .lv-handle i { transform: rotate(180deg); }
@keyframes lv-bounce { 0%, 100% { transform: translateY(2px); opacity: .7; } 50% { transform: translateY(-4px); opacity: 1; } }
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lv-head h1 { font-size: 1.12rem !important; font-weight: 700; }
.lv-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.lv-state .vt-state { font-weight: 600; font-size: .85rem; }

/* Compteur de vitesse rond, coloré selon l'état */
.lv-speed { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: conic-gradient(var(--lv-c, #94A3B8) 0 75%, #E2E8F0 75% 100%); position: relative; }
.lv-speed::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #FFFFFF; }
.lv-speed span, .lv-speed small { position: relative; }
.lv-speed span { font-size: 1.75rem !important; font-weight: 800; color: #0F172A !important; letter-spacing: -.5px; }
.lv-speed small { font-size: .66rem !important; color: #64748B; margin-top: -2px; }
.lv-sheet[data-state="moving"] { --lv-c: #22C55E; }
.lv-sheet[data-state="stopped"] { --lv-c: #EF4444; }
.lv-sheet[data-state="offline"] { --lv-c: #94A3B8; }

.lv-more { overflow: hidden; max-height: 420px; transition: max-height .25s ease, opacity .2s ease; }
.lv-sheet.is-collapsed .lv-more { max-height: 0; opacity: 0; }
/* Panneau réduit : uniquement la rue et la vitesse */
.lv-street { display: none; align-items: center; gap: 9px; min-width: 0; font-size: 1.02rem; font-weight: 700; color: #0F172A; }
.lv-street i { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
               background: #EAF1FF; color: #2563EB; font-size: .85rem; }
.lv-sheet.is-collapsed .lv-street { display: flex; }
.lv-sheet.is-collapsed .lv-head h1, .lv-sheet.is-collapsed .lv-state { display: none; }
.lv-sheet.is-collapsed { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; cursor: pointer; }
.lv-sheet.is-collapsed .lv-speed { width: 66px; height: 66px; }
.lv-sheet.is-collapsed .lv-speed::before { inset: 6px; }
.lv-sheet.is-collapsed .lv-speed span { font-size: 1.4rem !important; }
.lv-speed, .lv-speed::before { transition: width .25s ease, height .25s ease, inset .25s ease; }
.lv-addr, .lv-dir { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: #334155; }
.lv-dir { margin-top: 6px; }
.lv-addr i, .lv-dir i { color: #2563EB; margin-top: 3px; width: 14px; text-align: center; }
.lv-day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.lv-day > div { background: #F1F5F9; border-radius: 14px; padding: 9px 6px; text-align: center; }
.lv-day b { display: block; font-size: .95rem; font-weight: 700; color: #0F172A; line-height: 1.15; }
.lv-day span { display: block; font-size: .64rem; color: #64748B; margin-top: 2px; }
.lv-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.lv-actions form { display: contents; }
.lv-actions a, .lv-actions button { display: flex; min-height: 0; width: 100%; font: inherit; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 14px;
                text-decoration: none; color: #1E293B; font-size: .72rem; font-weight: 600; background: #FFFFFF; border: 1px solid #E2E8F0; }
.lv-actions a i, .lv-actions button i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
                  background: #EAF1FF; color: #2563EB; font-size: 1rem; }
.lv-actions a:active, .lv-actions button:active { background: #F1F5F9; }
.lv-actions .fa-whatsapp { background: #DCFCE7 !important; color: #16A34A !important; }
.lv-actions span { font-size: .72rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lv-page .vm::before, .lv-sheet.is-collapsed .lv-handle i { animation: none; } .lv-more, .lv-fabs, .lv-page .leaflet-bottom { transition: none; } }

/* Choix de l'application de navigation */
.lv-nav-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 18, 32, .5); display: flex; align-items: flex-end;
                   animation: lv-fade .2s ease-out; }
.lv-nav-sheet { width: 100%; background: #FFFFFF; border-radius: 26px 26px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
                box-shadow: 0 -10px 34px rgba(15, 23, 42, .25); animation: m-sheet .3s cubic-bezier(.2, .8, .2, 1); }
.lv-nav-title { font-weight: 700; font-size: 1rem; text-align: center; margin-bottom: 12px; color: #0F172A; }
.lv-nav-app { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px;
              border: 1px solid #E2E8F0; text-decoration: none; color: #0F172A; }
.lv-nav-app:active { background: #F1F5F9; }
.lv-nav-app b { display: block; font-size: 1rem; }
.lv-nav-app small { display: block; color: #64748B; font-size: .78rem; }
.lv-nav-app > .fa-chevron-right { color: #94A3B8; }
.lv-nav-ico { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px;
              font-size: 1.35rem; color: #fff; }
.lv-ico-google { background: linear-gradient(135deg, #34A853, #4285F4); }
.lv-ico-waze { background: #33CCFF; color: #0B1220; }
.lv-round:disabled { opacity: .5; }
@keyframes lv-fade { from { opacity: 0; } to { opacity: 1; } }

/* Barre du bas : colonnes qui ne s'élargissent jamais (libellés arabes plus longs) */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.bottom-nav a, .bottom-nav button { min-width: 0; }
.bottom-nav span:not(.dot-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }