/* WinoTrack — console technique (mobile-first) */
:root {
    --ink: #13232B;          /* texte principal */
    --petrol: #0F3D47;       /* barre de navigation */
    --signal: #2B8A6E;       /* en ligne */
    --idle: #8A98A0;         /* hors ligne */
    --amber: #D9922E;        /* trames sortantes */
    --paper: #F3F6F7;        /* fond */
    --line: #DCE3E6;
    --bs-body-font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-primary: #1F6475;
    --bs-primary-rgb: 31, 100, 117;
    --bs-link-color: #1F6475;
    --bs-link-color-rgb: 31, 100, 117;
    --bs-link-hover-color: #0F3D47;
}
body { background: var(--paper); color: var(--ink); font-size: .9375rem; }
.mono, .hexdump { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.btn-primary { --bs-btn-bg: #1F6475; --bs-btn-border-color: #1F6475; --bs-btn-hover-bg: #0F3D47; --bs-btn-hover-border-color: #0F3D47; --bs-btn-active-bg: #0F3D47; }
.btn-outline-primary { --bs-btn-color: #1F6475; --bs-btn-border-color: #1F6475; --bs-btn-hover-bg: #1F6475; --bs-btn-hover-border-color: #1F6475; }
.form-check-input:checked { background-color: #1F6475; border-color: #1F6475; }

/* Compteurs */
.stat { background: #fff; border-inline-start: 3px solid var(--petrol); padding: .75rem 1rem; height: 100%; }
.stat-value { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.stat-label { display: block; font-size: .8rem; color: #5B6B73; }
.text-online { color: var(--signal); }

.section-title { font-weight: 600; margin-bottom: .6rem; color: #33464F; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: .375rem; padding: 1rem; }
.empty { background: #fff; border: 1px dashed #B9C6CB; border-radius: .375rem; padding: 1rem; color: #4A5B63; }

/* Tableaux */
.app-table { background: #fff; margin-bottom: 0; }
.app-table thead th { font-size: .78rem; font-weight: 600; color: #5B6B73; background: #EAF0F2; white-space: nowrap; }
.table-responsive { border: 1px solid var(--line); border-radius: .375rem; }
.preview { max-width: 22rem; word-break: break-all; }

/* Statuts */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; }
.status-online { color: var(--signal); }
.status-online::before { background: var(--signal); }
.status-offline { color: var(--idle); }
.status-offline::before { background: var(--idle); }
.dir { font-size: .72rem; font-weight: 600; padding: .1rem .4rem; border-radius: .25rem; }
.dir-in { background: #E1F0EB; color: #1D6A53; }
.dir-out { background: #FBEEDB; color: #8A5A14; }

/* Détail trame */
.meta dt { font-size: .78rem; font-weight: 500; color: #5B6B73; }
.meta dd { margin-bottom: .6rem; word-break: break-all; }
.hexdump { background: #F7FAFB; border: 1px solid var(--line); border-radius: .25rem; padding: .75rem;
           font-size: .8rem; line-height: 1.5; white-space: pre; overflow-x: auto; }

/* Connexion */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-top: 4px solid var(--petrol); padding: 1.75rem; border-radius: .375rem; }

:focus-visible { outline: 2px solid #1F6475; outline-offset: 2px; }

@media (min-width: 992px) {
    body { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Étape 2 : espace client --- */
.device-card { background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--signal); border-radius: .375rem; padding: 1rem; height: 100%; }
.device-card.is-expired { border-inline-start-color: #B8483A; background: #FBF6F5; }
.device-meta { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; font-size: .875rem; }
.device-meta dt { font-weight: 500; color: #5B6B73; }
.device-meta dd { margin: 0; }

/* --- Menu (maquette validée) : barre latérale claire, réductible ; barre du bas sur mobile --- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; }            /* min-width:0 : indispensable pour les tableaux défilants */

.sidebar-col { background: #fff; border-inline-end: 1px solid var(--line); }
.sidebar { --bs-offcanvas-bg: #fff; --bs-offcanvas-color: var(--ink); --bs-offcanvas-width: 284px; }
.sidebar-col .sidebar .offcanvas-body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem .75rem; }
@media (min-width: 992px) {
    .sidebar-col { flex: 0 0 256px; width: 256px; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .15s, flex-basis .15s; }
    .sidebar-col .sidebar, .sidebar-col .sidebar .offcanvas-body { height: 100%; }
    .sidebar-col .sidebar .offcanvas-body { padding: 1rem .75rem; }
}

.sb-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .35rem .5rem; }
.sb-brand { display: inline-flex; align-items: center; color: #0F3D47; font-size: 1.12rem; font-weight: 600; text-decoration: none; }
.sb-brand:hover { color: #0F3D47; }
.sb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
               border-radius: .4rem; background: transparent; color: #5B6B73; }
.sb-icon-btn:hover, .sb-icon-btn:focus-visible { background: #EEF3F4; color: var(--ink); }

.sb-user { display: flex; align-items: center; gap: .65rem; background: #F3F6F7; border-radius: .5rem; padding: .55rem .65rem;
           color: var(--ink); text-decoration: none; min-width: 0; }
.sb-user:hover { background: #EAF0F2; color: var(--ink); }
.sb-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
             border-radius: 50%; background: #DCEBEF; color: #1F6475; font-weight: 600; font-size: .8rem; text-decoration: none; }
.sb-avatar-sm { width: 32px; height: 32px; font-size: .72rem; }
.sb-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user-name { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-meta { font-size: .74rem; color: #5B6B73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .1rem 0 .2rem; }
.sb-chip { background: #F3F6F7; border-radius: .4rem; padding: .35rem .2rem; text-align: center; font-size: .7rem; color: #5B6B73; text-decoration: none; }
.sb-chip:hover { background: #EAF0F2; color: #3B4C54; }
.sb-chip b { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); }
.sb-chip .c-moving { color: #2B8A6E; }
.sb-chip .c-stopped { color: #1F6475; }

.side-nav { display: flex; flex-direction: column; gap: .1rem; }
.side-group { font-size: .72rem; color: #8A98A0; padding: .85rem .75rem .25rem; }
.side-link { position: relative; display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .75rem;
             border: 0; border-radius: .45rem; background: transparent; color: #3B4C54; text-decoration: none;
             text-align: start; font-size: .92rem; }
.side-link i { color: #6B7C84; }
.side-link:hover, .side-link:focus-visible { background: #F0F4F5; color: var(--ink); }
.side-link.active { background: #E2EEF1; color: #0F3D47; font-weight: 600; }
.side-link.active i { color: #1F6475; }
.side-link:focus-visible { outline: 2px solid #1F6475; outline-offset: -2px; }
.side-badge { margin-inline-start: auto; background: #FBE3E0; color: #A3392E; font-size: .7rem; font-weight: 600;
              border-radius: 1rem; padding: .05rem .45rem; line-height: 1.4; }
.side-footer { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .1rem; }
.side-logout, .side-logout i { color: #A3392E; }
.side-logout:hover { background: #FBEDEB; color: #A3392E; }

/* Menu réduit (ordinateur) : icônes seules, libellé en infobulle */
@media (min-width: 992px) {
    html.sb-collapsed .sidebar-col { flex-basis: 76px; width: 76px; }
    html.sb-collapsed .sb-label { display: none !important; }
    html.sb-collapsed .sb-head { flex-direction: column; padding-inline: 0; }
    html.sb-collapsed .sb-head [data-sidebar-toggle] i { transform: rotate(180deg); }
    html.sb-collapsed[dir="rtl"] .sb-head [data-sidebar-toggle] i { transform: scaleX(-1) rotate(180deg); }
    html.sb-collapsed .sb-user { justify-content: center; padding: .45rem; background: transparent; }
    html.sb-collapsed .side-link { justify-content: center; padding: .6rem 0; }
    html.sb-collapsed .side-badge { position: absolute; top: 2px; inset-inline-end: 6px; font-size: .62rem; padding: 0 .3rem; }
}

/* Barre du haut (mobile) */
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
          background: #fff; border-bottom: 1px solid var(--line); padding: .55rem .9rem; }
.topbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
               color: #3B4C54; font-size: 1.1rem; text-decoration: none; }
.dot-badge { position: absolute; top: 0; inset-inline-end: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
             background: #B8483A; color: #fff; font-size: .65rem; font-weight: 600; line-height: 18px; text-align: center; }

/* Barre de navigation du bas (mobile) */
.bottom-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr);
              background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a, .bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
              padding: .45rem 0 .5rem; border: 0; background: transparent; color: #5B6B73; font-size: .68rem; text-decoration: none; }
.bottom-nav i { font-size: 1.15rem; }
.bottom-nav a.active { color: #1F6475; font-weight: 600; }
.bottom-nav a.active::before { content: ""; position: absolute; top: 0; inset-inline: 30%; height: 3px; border-radius: 0 0 3px 3px; background: #1F6475; }
.bottom-nav .dot-badge { top: 2px; inset-inline-end: calc(50% - 22px); }
@media (max-width: 991.98px) {
    .app-main > main { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

/* --- Lot A : suivi --- */
.st-moving  { --st: #2B8A6E; }
.st-stopped { --st: #1F6475; }
.st-offline { --st: #8A98A0; }
.st-nodata  { --st: #B9C6CB; }
.st-locked  { --st: #B8483A; }
.vl-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--st, #8A98A0); flex: 0 0 auto; }

.stat-moving  { border-inline-start-color: #2B8A6E; }
.stat-stopped { border-inline-start-color: #1F6475; }
.stat-offline { border-inline-start-color: #8A98A0; }

/* Tuiles véhicules du tableau de bord */
.vehicle-tile { display: block; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--st, #8A98A0);
                border-radius: .375rem; padding: .75rem 1rem; color: var(--ink); text-decoration: none; height: 100%; }
.vehicle-tile:hover, .vehicle-tile:focus-visible { border-color: #9FB4BA; border-inline-start-color: var(--st, #8A98A0); color: var(--ink); }
.vt-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.vt-name { font-weight: 600; }
.vt-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #4A5B63; white-space: nowrap; }
.vt-meta { display: block; font-size: .82rem; color: #5B6B73; margin-top: .2rem; }
.is-locked-panel { background: #FBF6F5; border-color: #E8C9C4; }

/* Carte temps réel */
.main-map { padding-top: .75rem !important; padding-bottom: .75rem !important; }
.map-layout { display: flex; flex-direction: column; gap: .75rem; }
.map-canvas { height: 62vh; min-height: 320px; border-radius: .375rem; border: 1px solid var(--line); z-index: 0; }
.map-panel { background: #fff; border: 1px solid var(--line); border-radius: .375rem; padding: .75rem; order: 2; }
.vehicle-list { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 40vh; overflow-y: auto; }
.vl-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .4rem; border: 0; border-radius: .3rem;
           background: transparent; text-align: start; color: var(--ink); }
.vl-item:hover, .vl-item:focus-visible { background: #EEF3F4; }
.vl-text { display: flex; flex-direction: column; min-width: 0; }
.vl-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-meta { font-size: .78rem; color: #5B6B73; }
.vl-empty { padding: .5rem .4rem; color: #5B6B73; font-size: .875rem; }
.map-legend { list-style: none; padding: .5rem 0 0; margin: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: #4A5B63; }
.map-legend li { display: inline-flex; align-items: center; gap: .35rem; }
@media (min-width: 992px) {
    .map-layout { flex-direction: row; height: calc(100vh - 1.5rem); }
    .map-panel { order: 0; flex: 0 0 300px; display: flex; flex-direction: column; overflow: hidden; }
    .vehicle-list { flex: 1 1 auto; max-height: none; }
    .map-canvas { flex: 1 1 auto; height: auto; }
}

/* Marqueurs Leaflet (CSS, sans image) */
.vm { background: transparent; border: 0; }
.vm-dot { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; background: var(--st, #8A98A0);
          box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.vm-arrow { position: absolute; left: 50%; top: -9px; width: 0; height: 0; margin-left: -6px;
            border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #13232B;
            transform-origin: 6px 19px; }
.pin { background: transparent; border: 0; }
.pin span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
            color: #fff; font-size: .72rem; font-weight: 600; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pin-start span { background: #2B8A6E; }
.pin-end span   { background: #B8483A; }
.pin-stop span  { background: #D9922E; }

/* Fiche véhicule & historique */
.mini-map { height: 320px; border-radius: .375rem; border: 1px solid var(--line); z-index: 0; }
.history-map { height: 60vh; min-height: 340px; border-radius: .375rem; border: 1px solid var(--line); z-index: 0; }
.day-summary { display: flex; flex-wrap: wrap; gap: .5rem; }
.hs { background: #fff; border: 1px solid var(--line); border-radius: .375rem; padding: .4rem .75rem; font-size: .78rem; color: #5B6B73; }
.hs span { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); }
.play-controls { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line);
                 border-radius: .375rem; padding: .5rem .75rem; margin-bottom: .5rem; }

/* Chronologie des trajets */
.timeline { list-style: none; padding: 0; margin: 0; }
.tl-item { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .7rem .9rem; background: #fff;
           border: 1px solid var(--line); border-inline-start: 4px solid; border-radius: .375rem; margin-bottom: .5rem; }
.tl-trip { border-inline-start-color: #2B8A6E; }
.tl-stop { border-inline-start-color: #D9922E; background: #FFFCF6; }
.tl-time { font-size: .82rem; font-weight: 600; color: #33464F; }
@media (min-width: 768px) {
    .tl-item { grid-template-columns: 9rem 1fr; align-items: start; }
}

/* --- Lot B : alertes et rapports --- */
.side-badge { margin-inline-start: auto; background: #B8483A; color: #fff; font-size: .7rem; font-weight: 600;
              border-radius: 1rem; padding: .05rem .45rem; line-height: 1.4; }
.alert-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.alert-item { display: flex; align-items: flex-start; gap: .75rem; background: #fff; border: 1px solid var(--line);
              border-radius: .375rem; padding: .65rem .8rem; margin-bottom: .5rem; }
.alert-item.is-unread { border-inline-start: 4px solid var(--ev, #1F6475); }
.alert-item:not(.is-unread) { opacity: .78; }
.ai-icon { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
           background: color-mix(in srgb, var(--ev, #1F6475) 14%, #fff); color: var(--ev, #1F6475); }
.ai-body { flex: 1 1 auto; min-width: 0; }
.ai-title { font-weight: 600; }
.ai-action { flex: 0 0 auto; }
.ev-danger  { --ev: #B8483A; }
.ev-warning { --ev: #C27C1A; }
.ev-info    { --ev: #1F6475; }
.app-table tfoot td { background: #EAF0F2; }
.app-table td.text-end, .app-table th.text-end { white-space: nowrap; }
.speed-input { max-width: 11rem; }

/* --- Lot C1 : arabe (droite à gauche) et espace société --- */
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
[dir="rtl"] .mono, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; unicode-bidi: plaintext; text-align: end; }
.account-box { border: 1px dashed #9FB4BA; border-radius: .375rem; padding: .9rem 1rem; background: #F7FAFB; }
.account-box legend { float: none; width: auto; padding: 0 .35rem; margin-bottom: .25rem; }
.ai-body .mono, .ai-body code { word-break: break-all; }

/* --- Lot D2 : partage, impression --- */
.share-page { max-width: 1100px; margin: 0 auto; }
.share-map { height: calc(100vh - 170px); min-height: 360px; border-radius: .375rem; border: 1px solid var(--line); z-index: 0; }
.share-new { border-color: #9FD2C0; background: #F2FAF7; }

.print-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 210mm; margin: 0 auto 1rem; }
.print-sheet { background: #fff; max-width: 210mm; margin: 0 auto; padding: 14mm 14mm 10mm; border: 1px solid var(--line); }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid #0F3D47; padding-bottom: .6rem; }
.ps-brand { display: flex; align-items: center; font-size: 1.25rem; font-weight: 600; color: #0F3D47; }
.ps-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: 1rem; }
.ps-kpis div { border: 1px solid var(--line); border-radius: .3rem; padding: .4rem .5rem; font-size: .75rem; color: #5B6B73; }
.ps-kpis b { display: block; font-size: 1rem; color: var(--ink); }
.ps-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ps-table th, .ps-table td { border: 1px solid #CCD6DA; padding: .3rem .45rem; text-align: start; }
.ps-table thead th { background: #EAF0F2; }
.ps-table tfoot td { background: #EAF0F2; font-weight: 600; }
.ps-foot { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: .4rem; text-align: center; }
@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff !important; }
    .no-print, .alert { display: none !important; }
    main { padding: 0 !important; }
    .print-sheet { border: 0; padding: 0; max-width: none; }
    .ps-table tr { break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Lot E : icône voiture, suivi en direct --- */
.vm-car { display: block; width: 30px; height: 46px; color: var(--st, #8A98A0); filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.vm-car-rot { display: block; width: 100%; height: 100%; transition: transform .6s ease; transform-origin: 50% 50%; }
.vm-car-svg { display: block; width: 100%; height: 100%; }
.vm-label { background: rgba(255,255,255,.92); border: 1px solid #CCD6DA; border-radius: .3rem; padding: 0 .35rem;
            font-size: .72rem; font-weight: 600; color: var(--ink); box-shadow: none; }
.vm-label::before { display: none; }

.track-layout { position: relative; height: calc(100vh - 1.5rem); }
.track-map { position: absolute; inset: 0; border-radius: .375rem; border: 1px solid var(--line); z-index: 0; }
.track-card { position: absolute; z-index: 500; inset-inline-start: .75rem; top: .75rem; width: min(340px, calc(100% - 1.5rem));
              background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: .75rem .9rem;
              box-shadow: 0 4px 16px rgba(19,35,43,.12); }
.min-w-0 { min-width: 0; }
.track-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: #B8483A; text-transform: none; }
.live-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: #B8483A; animation: wt-pulse 1.6s infinite; }
@keyframes wt-pulse { 0% { box-shadow: 0 0 0 0 rgba(184,72,58,.55); } 70% { box-shadow: 0 0 0 8px rgba(184,72,58,0); } 100% { box-shadow: 0 0 0 0 rgba(184,72,58,0); } }
.track-speed { text-align: center; line-height: 1; }
.track-speed span { display: block; font-size: 1.9rem; font-weight: 600; color: #0F3D47; }
.track-speed small { font-size: .7rem; color: #5B6B73; }
@media (max-width: 991.98px) {
    .track-layout { height: calc(100vh - 56px - 80px - 1.5rem); min-height: 380px; }
    .track-card { top: auto; bottom: .75rem; inset-inline-start: .5rem; width: calc(100% - 1rem); }
}
@media (prefers-reduced-motion: reduce) { .live-pulse { animation: none; } .vm-car-rot { transition: none; } }

/* =====================================================================
   Lot F — Menu « signature » WinoTrack : dégradé pétrole profond,
   accents émeraude, verre dépoli, bouton carte flottant sur mobile.
   ===================================================================== */
:root {
    --wt-deep: #071F25;  --wt-petrol: #0B2E36;  --wt-sea: #12505C;
    --wt-mint: #4FD1A5;  --wt-mint-soft: rgba(79,209,165,.16);
    --wt-amber: #F2B544; --wt-glass: rgba(255,255,255,.06); --wt-glass-line: rgba(255,255,255,.09);
}
body { background: radial-gradient(1200px 600px at 100% 0%, #EAF4F2 0%, var(--paper) 55%) fixed; }

/* Fond de la barre latérale (ordinateur : colonne ; mobile : panneau coulissant) */
.sidebar-col, .sidebar {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(79,209,165,.18), transparent 70%),
        radial-gradient(380px 300px at 100% 100%, rgba(242,181,68,.10), transparent 70%),
        linear-gradient(180deg, var(--wt-petrol) 0%, var(--wt-deep) 100%);
    border-inline-end: 0;
}
.sidebar { --bs-offcanvas-bg: var(--wt-petrol); --bs-offcanvas-color: #E6F1F0; }
@media (min-width: 992px) { .sidebar-col .sidebar { background: transparent; } }

.sb-brand, .sb-brand:hover { color: #fff; gap: .55rem; font-weight: 500; letter-spacing: .2px; }
.sb-brand b { font-weight: 700; color: var(--wt-mint); }
.sb-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
           background: linear-gradient(135deg, var(--wt-mint) 0%, #1F9C8A 55%, #146C7A 100%); color: #052126; font-size: .85rem;
           box-shadow: 0 6px 18px rgba(79,209,165,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.sb-logo i { transform: rotate(-12deg); }
.sb-icon-btn { color: #9FC3C2; }
.sb-icon-btn:hover, .sb-icon-btn:focus-visible { background: var(--wt-glass); color: #fff; }

/* Carte utilisateur en verre, avatar à anneau dégradé */
.sb-user { background: var(--wt-glass); border: 1px solid var(--wt-glass-line); color: #fff; backdrop-filter: blur(6px); }
.sb-user:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-user .sb-avatar { background: conic-gradient(from 200deg, var(--wt-mint), var(--wt-amber), #39A7C9, var(--wt-mint));
                      color: var(--wt-deep); padding: 2px; position: relative; font-weight: 700; }
.sb-user .sb-avatar { isolation: isolate; }
.sb-user .sb-avatar::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #E6F7F2; z-index: -1; }
.sb-user-meta { color: #9FC3C2; }

/* Résumé de la flotte : tuiles colorées */
.sb-chip { background: var(--wt-glass); border: 1px solid var(--wt-glass-line); color: #A9C6C6; border-radius: .6rem; padding: .45rem .2rem .4rem; }
.sb-chip:hover { background: rgba(255,255,255,.1); color: #E6F1F0; }
.sb-chip b { color: #fff; font-size: 1.15rem; line-height: 1.1; }
.sb-chip span { display: inline-flex; align-items: center; gap: .3rem; }
.chip-moving { background: linear-gradient(160deg, rgba(79,209,165,.28), rgba(79,209,165,.06)); border-color: rgba(79,209,165,.35); }
.chip-moving b { color: #7FF0C8; }
.chip-stopped b { color: #8FD3F0; }
.chip-offline b { color: #C3D0D3; }
.chip-live { width: .45rem; height: .45rem; border-radius: 50%; background: var(--wt-mint); animation: wt-pulse-mint 1.6s infinite; }
@keyframes wt-pulse-mint { 0% { box-shadow: 0 0 0 0 rgba(79,209,165,.7); } 70% { box-shadow: 0 0 0 7px rgba(79,209,165,0); } 100% { box-shadow: 0 0 0 0 rgba(79,209,165,0); } }

/* Liens du menu */
.side-group { color: #6E9C9C; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .side-group { letter-spacing: 0; text-transform: none; font-size: .75rem; }
.side-link { color: #C9DDDC; border-radius: .6rem; transition: background .15s, color .15s; }
.side-link i { color: #7FA8A8; transition: color .15s, transform .15s; }
.side-link:hover, .side-link:focus-visible { background: var(--wt-glass); color: #fff; }
.side-link:hover i { color: var(--wt-mint); transform: translateX(1px); }
.side-link.active { color: #fff; font-weight: 600;
                    background: linear-gradient(90deg, rgba(79,209,165,.30) 0%, rgba(79,209,165,.06) 100%);
                    box-shadow: inset 3px 0 0 var(--wt-mint), 0 6px 18px rgba(0,0,0,.18); }
[dir="rtl"] .side-link.active { background: linear-gradient(270deg, rgba(79,209,165,.30) 0%, rgba(79,209,165,.06) 100%);
                                box-shadow: inset -3px 0 0 var(--wt-mint), 0 6px 18px rgba(0,0,0,.18); }
.side-link.active i { color: var(--wt-mint); }
.side-link:focus-visible { outline: 2px solid var(--wt-mint); }
.side-badge { background: linear-gradient(135deg, #FF7A59, #E0483A); color: #fff; box-shadow: 0 2px 8px rgba(224,72,58,.45); }
.side-footer { border-top-color: var(--wt-glass-line); }
.side-logout, .side-logout i { color: #FF9C8A; }
.side-logout:hover { background: rgba(255,122,89,.12); color: #FFB4A6; }

/* Menu réduit : icônes centrées sur fond sombre */
@media (min-width: 992px) {
    html.sb-collapsed .sb-user { background: transparent; border-color: transparent; }
}

/* Barre du haut (mobile) */
.topbar { background: linear-gradient(90deg, var(--wt-petrol), var(--wt-sea)); border-bottom: 0; color: #fff; }
.topbar .sb-brand, .topbar .sb-brand:hover { color: #fff; }
.topbar .sb-logo { width: 28px; height: 28px; border-radius: 8px; font-size: .75rem; }
.topbar-icon { color: #DDF0EE; }
.topbar .sb-avatar { background: #E6F7F2; color: var(--wt-deep); font-weight: 700; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* Barre du bas : bouton Carte central flottant */
.bottom-nav { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 -6px 24px rgba(7,31,37,.08); border-top: 0; }
.bottom-nav a.active { color: #0F6E5E; }
.bottom-nav a.active::before { background: linear-gradient(90deg, var(--wt-mint), #1F9C8A); }
.bottom-nav a.bn-fab { color: #fff; }
.bottom-nav a.bn-fab i { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: -26px;
                         border-radius: 50%; font-size: 1.3rem; color: #fff; border: 4px solid #fff;
                         background: linear-gradient(135deg, var(--wt-mint) 0%, #1F9C8A 50%, var(--wt-sea) 100%);
                         box-shadow: 0 8px 20px rgba(31,156,138,.45); }
.bottom-nav a.bn-fab span { color: #0F6E5E; font-weight: 600; }
.bottom-nav a.bn-fab.active::before { display: none; }

/* Accents du contenu harmonisés */
.btn-primary { --bs-btn-bg: #146C7A; --bs-btn-border-color: #146C7A; --bs-btn-hover-bg: #0B4F5A; --bs-btn-hover-border-color: #0B4F5A; }
.stat { border-radius: .6rem; border-inline-start-width: 4px; box-shadow: 0 2px 10px rgba(11,46,54,.05); }
.panel, .vehicle-tile, .alert-item, .map-panel { border-radius: .6rem; }
@media (prefers-reduced-motion: reduce) { .chip-live { animation: none; } }
.side-badge.badge-amber { background: linear-gradient(135deg, #FFD36E, #F2A33A); color: #3A2600; box-shadow: 0 2px 8px rgba(242,163,58,.45); }
.stat-overdue { border-inline-start-color: #E0483A; }
.stat-soon { border-inline-start-color: #F2A33A; }
.maint-done { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.maint-done .form-control { width: auto; max-width: 9.5rem; }

/* =====================================================================
   Palette validée — bleu nuit / bleu électrique
   (bloc final : remplace les couleurs définies plus haut)
   ===================================================================== */
:root {
    --wt-night: #0B1220;  --wt-night-2: #111A2E;  --wt-blue: #2563EB;  --wt-blue-2: #3B82F6;
    --wt-card: #FFFFFF;   --wt-bg: #F5F7FA;       --wt-green: #22C55E; --wt-orange: #F59E0B; --wt-red: #EF4444;
    --wt-mint: var(--wt-blue-2); --wt-mint-soft: rgba(59,130,246,.18);
    --ink: #0F172A; --line: #E2E8F0; --paper: var(--wt-bg);
    --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563EB; --bs-link-color-rgb: 37, 99, 235; --bs-link-hover-color: #1D4ED8;
}
body { background: var(--wt-bg); color: var(--ink); }

/* États des véhicules (pastilles, tuiles, icône voiture) */
.st-moving  { --st: #22C55E; }
.st-stopped { --st: #EF4444; }
.st-offline { --st: #94A3B8; }
.st-nodata  { --st: #CBD5E1; }
.st-locked  { --st: #475569; }
.status-online { color: #16A34A; } .status-online::before { background: #22C55E; }
.status-offline { color: #64748B; } .status-offline::before { background: #94A3B8; }

/* Boutons et formulaires */
.btn-primary { --bs-btn-bg: #2563EB; --bs-btn-border-color: #2563EB; --bs-btn-hover-bg: #3B82F6; --bs-btn-hover-border-color: #3B82F6;
               --bs-btn-active-bg: #1D4ED8; --bs-btn-active-border-color: #1D4ED8; --bs-btn-disabled-bg: #2563EB; }
.btn-outline-primary { --bs-btn-color: #2563EB; --bs-btn-border-color: #2563EB; --bs-btn-hover-bg: #2563EB; --bs-btn-hover-border-color: #2563EB; --bs-btn-active-bg: #1D4ED8; }
.form-check-input:checked { background-color: #2563EB; border-color: #2563EB; }
.form-control:focus, .form-select:focus { border-color: #3B82F6; box-shadow: 0 0 0 .2rem rgba(59,130,246,.2); }
:focus-visible { outline-color: #3B82F6; }

/* Cartes et compteurs */
.panel, .stat, .vehicle-tile, .alert-item, .map-panel, .hs, .device-card, .empty { background: #FFFFFF; border-color: #E2E8F0; }
.stat { border-inline-start-color: #2563EB; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.stat-moving { border-inline-start-color: #22C55E; }  .stat-stopped { border-inline-start-color: #EF4444; }
.stat-offline { border-inline-start-color: #94A3B8; } .stat-soon { border-inline-start-color: #F59E0B; } .stat-overdue { border-inline-start-color: #EF4444; }
.app-table thead th, .app-table tfoot td { background: #F1F5F9; color: #475569; }
.ev-danger { --ev: #EF4444; } .ev-warning { --ev: #F59E0B; } .ev-info { --ev: #2563EB; }
.text-online { color: #16A34A; }
.section-title { color: #1E293B; }

/* Barre latérale bleu nuit */
.sidebar-col, .sidebar {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(37,99,235,.28), transparent 70%),
        radial-gradient(380px 300px at 100% 100%, rgba(59,130,246,.12), transparent 70%),
        linear-gradient(180deg, var(--wt-night-2) 0%, var(--wt-night) 100%);
}
.sidebar { --bs-offcanvas-bg: var(--wt-night); --bs-offcanvas-color: #E2E8F0; }
@media (min-width: 992px) { .sidebar-col .sidebar { background: transparent; } }
.sb-brand b { color: var(--wt-blue-2); }
.sb-logo { background: linear-gradient(135deg, #60A5FA 0%, #2563EB 55%, #1E40AF 100%); color: #fff;
           box-shadow: 0 6px 18px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.sb-icon-btn { color: #94A3B8; }
.sb-user-meta { color: #94A3B8; }
.sb-user .sb-avatar { background: conic-gradient(from 200deg, #3B82F6, #22C55E, #F59E0B, #3B82F6); color: var(--wt-night); }
.sb-user .sb-avatar::after { background: #EFF6FF; }
.sb-chip { color: #94A3B8; }
.chip-moving { background: linear-gradient(160deg, rgba(34,197,94,.26), rgba(34,197,94,.05)); border-color: rgba(34,197,94,.35); }
.chip-moving b { color: #4ADE80; }
.chip-stopped b { color: #F87171; }
.chip-offline b { color: #CBD5E1; }
.chip-live { background: #22C55E; animation-name: wt-pulse-green; }
@keyframes wt-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.side-group { color: #64748B; }
.side-link { color: #CBD5E1; }
.side-link i { color: #64748B; }
.side-link:hover i { color: #3B82F6; }
.side-link.active { background: linear-gradient(90deg, rgba(37,99,235,.55) 0%, rgba(37,99,235,.12) 100%);
                    box-shadow: inset 3px 0 0 #3B82F6, 0 6px 18px rgba(0,0,0,.25); }
[dir="rtl"] .side-link.active { background: linear-gradient(270deg, rgba(37,99,235,.55) 0%, rgba(37,99,235,.12) 100%);
                                box-shadow: inset -3px 0 0 #3B82F6, 0 6px 18px rgba(0,0,0,.25); }
.side-link.active i { color: #93C5FD; }
.side-link:focus-visible { outline-color: #3B82F6; }
.side-badge { background: linear-gradient(135deg, #F87171, #EF4444); box-shadow: 0 2px 8px rgba(239,68,68,.45); }
.side-badge.badge-amber { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #3A2600; box-shadow: 0 2px 8px rgba(245,158,11,.45); }
.side-logout, .side-logout i { color: #F87171; }
.side-logout:hover { background: rgba(239,68,68,.12); color: #FCA5A5; }

/* Mobile */
.topbar { background: linear-gradient(90deg, var(--wt-night), #172554); }
.topbar .sb-avatar { background: #EFF6FF; color: var(--wt-night); }
.dot-badge { background: #EF4444; }
.bottom-nav a.active { color: #2563EB; }
.bottom-nav a.active::before { background: linear-gradient(90deg, #3B82F6, #2563EB); }
.bottom-nav a.bn-fab i { background: linear-gradient(135deg, #60A5FA 0%, #2563EB 55%, #1E40AF 100%); box-shadow: 0 8px 20px rgba(37,99,235,.45); }
.bottom-nav a.bn-fab span { color: #2563EB; }

/* Carte, suivi en direct, impression */
.track-live { color: #EF4444; } .live-pulse { background: #EF4444; }
.track-speed span { color: var(--wt-night); }
.pin-start span { background: #22C55E; } .pin-end span { background: #EF4444; } .pin-stop span { background: #F59E0B; }
.tl-trip { border-inline-start-color: #22C55E; } .tl-stop { border-inline-start-color: #F59E0B; background: #FFFBEB; }
.ps-head { border-bottom-color: var(--wt-night); } .ps-brand { color: var(--wt-night); }
.login-card { border-top-color: #2563EB; }
.zones-map { height: 60vh; min-height: 340px; border-radius: .6rem; border: 1px solid #E2E8F0; z-index: 0; }
.zone-label { background: rgba(255,255,255,.9); border: 1px solid #BFDBFE; color: #1E3A8A; font-weight: 600; font-size: .72rem; box-shadow: none; }
.zone-label::before { display: none; }
.zone-pin { background: transparent; border: 0; }
.zone-pin span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #2563EB; border: 4px solid #fff;
                 box-shadow: 0 0 0 2px #2563EB, 0 4px 10px rgba(37,99,235,.45); cursor: grab; }

/* --- Lot I : outils cartographiques --- */
.wt-tools .wt-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #0F172A; font-size: .85rem; }
.wt-tools .wt-tool:hover { background: #EFF6FF; color: #2563EB; }
.wt-tools .wt-tool.active { background: #2563EB; color: #fff; }
.leaflet-control-layers { border-radius: .5rem !important; }
.leaflet-control-layers-expanded { padding: .5rem .75rem; font-size: .82rem; }
.wt-search { position: absolute; z-index: 1000; top: 10px; inset-inline-start: 56px; width: min(320px, calc(100% - 120px)); }
.wt-search .form-control { box-shadow: 0 4px 14px rgba(15,23,42,.18); border-color: #BFDBFE; }
.wt-results { list-style: none; margin: .25rem 0 0; padding: 0; background: #fff; border-radius: .4rem; box-shadow: 0 6px 18px rgba(15,23,42,.15); overflow: hidden; }
.wt-results li { font-size: .82rem; }
.wt-results li.text-secondary, .wt-results li.text-danger { padding: .45rem .6rem; }
.wt-results button { display: block; width: 100%; border: 0; background: #fff; text-align: start; padding: .45rem .6rem; }
.wt-results button:hover { background: #EFF6FF; }
.measure-tip { background: #0B1220; color: #fff; border: 0; font-weight: 600; font-size: .78rem; }
.measure-tip::before { border-right-color: #0B1220 !important; }
.measuring { cursor: crosshair !important; }
.wt-hint .leaflet-popup-content { font-size: .78rem; margin: .5rem .75rem; }
.map-fs { position: fixed !important; inset: 0 !important; z-index: 2000 !important; height: 100vh !important; width: 100vw !important; border-radius: 0 !important; }
body.has-map-fs { overflow: hidden; }
.map-dark .vm-label, .map-dark .zone-label { background: rgba(11,18,32,.85); color: #fff; border-color: #334155; }
.leaflet-popup-content a { margin-inline-end: .5rem; }
.speed-legend { display: inline-flex; gap: .75rem; color: #475569; }
.speed-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.sl { width: 18px; height: 4px; border-radius: 2px; display: inline-block; }
.sl-g { background: #22C55E; } .sl-o { background: #F59E0B; } .sl-r { background: #EF4444; }
.marker-cluster-small, .marker-cluster-small div { background-color: rgba(59,130,246,.35) !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { color: #fff; font-weight: 700; background-color: #2563EB !important; }
.marker-cluster-medium { background-color: rgba(245,158,11,.35) !important; }
.marker-cluster-large { background-color: rgba(239,68,68,.35) !important; }
/* Bouton des fonds de carte : icône vectorielle (pas d'image externe) */
.leaflet-control-layers-toggle { background-image: none !important; display: flex !important; align-items: center; justify-content: center; }
.leaflet-control-layers-toggle::before { content: "\f5fd"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.1rem; color: #2563EB; }

/* --- Lot J : carte avancée --- */
.state-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.state-chips button { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #E2E8F0; background: #fff; color: #334155;
                      border-radius: 999px; padding: .2rem .65rem; font-size: .76rem; }
.state-chips button:hover { border-color: #93C5FD; }
.state-chips button.active { background: #2563EB; border-color: #2563EB; color: #fff; }
.ev-pin { background: transparent; border: 0; }
.ev-pin span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff;
               font-size: .7rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,.35); background: var(--ev, #2563EB); }
.near-list { padding-inline-start: 1.1rem; margin: .4rem 0; }
.near-list li { margin-bottom: .25rem; }
.near-list li span { display: block; font-size: .75rem; color: #64748B; }
.icon-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.icon-picker .btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .25rem; font-size: .78rem; }
.icon-picker .btn i { font-size: 1.15rem; }
@media (min-width: 576px) { .icon-picker { grid-template-columns: repeat(6, 1fr); } }

/* =====================================================================
   Lot K — Tableau de bord riche
   ===================================================================== */
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
.kpi { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; border-radius: .9rem; color: #fff;
       text-decoration: none; overflow: hidden; box-shadow: 0 6px 18px rgba(15,23,42,.10); transition: transform .15s; }
.kpi:hover { color: #fff; transform: translateY(-2px); }
.kpi i { position: absolute; inset-inline-end: .8rem; top: .8rem; font-size: 1.6rem; opacity: .28; }
.kpi b { font-size: 1.8rem; line-height: 1.1; font-weight: 700; }
.kpi span { font-size: .8rem; opacity: .92; }
.kpi-green  { background: linear-gradient(135deg, #22C55E, #15803D); }
.kpi-red    { background: linear-gradient(135deg, #F87171, #DC2626); }
.kpi-gray   { background: linear-gradient(135deg, #94A3B8, #475569); }
.kpi-blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.kpi-orange { background: linear-gradient(135deg, #FB923C, #EA580C); }
.kpi-amber  { background: linear-gradient(135deg, #FBBF24, #D97706); }

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.dcard { grid-column: span 12; background: #fff; border: 1px solid #E2E8F0; border-radius: .9rem; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(15,23,42,.05); min-width: 0; }
@media (min-width: 992px) {
    .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
    .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .span-4, .span-5, .span-6, .span-7 { grid-column: span 6; } }
.dcard-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.dcard-h h2 { font-size: .95rem; font-weight: 600; margin: 0; color: #0F172A; display: flex; align-items: center; gap: .5rem; }
.dcard-h h2 i { color: #2563EB; width: 1.1rem; text-align: center; }
.dcard-sub { font-size: .85rem; font-weight: 600; margin: 1rem 0 .5rem; color: #334155; display: flex; gap: .45rem; align-items: center; }
.dcard-sub i { color: #EF4444; }
.dash-map { height: 340px; border-radius: .6rem; z-index: 0; }
.dash-empty { display: flex; align-items: center; gap: .5rem; color: #64748B; font-size: .88rem; padding: .75rem 0; }
.dash-empty i { color: #22C55E; }

.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.donut { width: 150px; height: 150px; }
.donut-n { font-size: 26px; font-weight: 700; fill: #0F172A; }
.donut-s { font-size: 10px; fill: #64748B; }
.donut-legend { list-style: none; padding: 0; margin: 0; min-width: 170px; }
.donut-legend li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .85rem; border-bottom: 1px dashed #E2E8F0; }
.donut-legend li b { margin-inline-start: auto; }

.alert-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 576px) { .alert-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .alert-tiles { grid-template-columns: repeat(4, 1fr); } }
.atile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem;
         padding: .6rem .7rem; border: 1px solid #E2E8F0; border-radius: .7rem; text-decoration: none; color: #0F172A; background: #F8FAFC; }
.atile:hover { border-color: var(--ev, #2563EB); background: #fff; color: #0F172A; }
.atile.has { background: #fff; border-color: var(--ev, #2563EB); box-shadow: inset 3px 0 0 var(--ev, #2563EB); }
[dir="rtl"] .atile.has { box-shadow: inset -3px 0 0 var(--ev, #2563EB); }
.atile-i { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: .55rem;
           background: var(--ev, #2563EB); color: #fff; font-size: .85rem; align-self: center; }
.atile:not(.has) .atile-i { opacity: .55; }
.atile-t { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.atile-n { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.atile-n b { font-size: 1.15rem; }
.atile-n small { font-size: .68rem; color: #64748B; }
.atile-badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
               background: #EF4444; color: #fff; font-size: .68rem; font-weight: 700; line-height: 20px; text-align: center; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #F1F5F9; }
.feed li:last-child { border-bottom: 0; }
.feed-i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
          background: color-mix(in srgb, var(--ev, #2563EB) 14%, #fff); color: var(--ev, #2563EB); font-size: .78rem; }
.feed li.unread .feed-t { font-weight: 600; }
.feed-t { font-size: .85rem; }
.feed-s { font-size: .75rem; color: #64748B; }
.feed-s a { color: #334155; }

.cols { width: 100%; height: auto; max-height: 220px; }
.col-v { font-size: 15px; font-weight: 700; fill: #0F172A; }
.col-l { font-size: 15px; fill: #64748B; }
.rank { list-style: none; padding: 0; margin: 0; }
.rank li { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; row-gap: .25rem; padding: .35rem 0; font-size: .84rem; }
.rank li a { color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li b { font-size: .8rem; color: #334155; }
.mini-bar { grid-column: 1 / -1; width: 100%; height: 7px; display: block; }

/* =====================================================================
   Lot L — Logo officiel et application installable (PWA)
   ===================================================================== */
.sb-logo { background: #fff !important; box-shadow: 0 6px 18px rgba(37,99,235,.35) !important; overflow: hidden; }
.sb-logo img { width: 78%; height: auto; display: block; }
.login-logo { width: 240px; max-width: 70vw; height: auto; display: block; }
.ps-brand img { width: 210px; height: auto; }
.share-logo { width: 150px; height: auto; }

.install-banner { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid #BFDBFE; border-radius: .9rem;
                  padding: .65rem .8rem; margin-bottom: 1rem; box-shadow: 0 6px 18px rgba(37,99,235,.12); }
.install-banner img { border-radius: .7rem; flex: 0 0 auto; }
.ib-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: .85rem; line-height: 1.3; }
.ib-text span { color: #64748B; font-size: .76rem; }
.ios-install { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: .9rem; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; }
.side-install, .side-install i { color: #93C5FD; }

/* Mode application (écran d'accueil) : respect de l'encoche et de la barre d'état */
@media (display-mode: standalone) {
    .topbar { padding-top: calc(.55rem + env(safe-area-inset-top)); }
    .sidebar-col .sidebar .offcanvas-body { padding-top: calc(1rem + env(safe-area-inset-top)); }
}

/* Page hors connexion (sans Bootstrap) */
.offline-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F5F7FA; font-family: system-ui, sans-serif; margin: 0; }
.offline-box { max-width: 420px; text-align: center; background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; box-shadow: 0 10px 30px rgba(15,23,42,.08); margin: 1rem; }
.offline-logo { width: 220px; max-width: 80%; height: auto; margin-bottom: 1rem; }
.offline-box h1 { font-size: 1.1rem; margin: 1rem 0 .3rem; color: #0F172A; }
.offline-box p { color: #64748B; font-size: .9rem; margin: 0; }
.offline-box .btn { display: inline-block; margin-top: 1.4rem; padding: .6rem 1.2rem; border-radius: .6rem; background: #2563EB; color: #fff; text-decoration: none; }
.listen-steps { padding-inline-start: 1.2rem; margin-bottom: .6rem; }
.listen-steps li { margin-bottom: .4rem; }
.listen-steps .btn { width: 100%; max-width: 320px; text-align: start; }

/* --- Lot N : bilan et score --- */
.state-chips a { display: inline-flex; align-items: center; border: 1px solid #E2E8F0; background: #fff; color: #334155;
                 border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; text-decoration: none; }
.state-chips a:hover { border-color: #93C5FD; color: #1D4ED8; }
.state-chips a.active { background: #2563EB; border-color: #2563EB; color: #fff; }
.grade { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
         font-size: 1.6rem; font-weight: 800; color: #fff; flex: 0 0 auto; }
.grade-sm { width: 30px; height: 30px; border-radius: 8px; font-size: .95rem; }
.grade-a { background: linear-gradient(135deg, #22C55E, #15803D); }
.grade-b { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.grade-c { background: linear-gradient(135deg, #FBBF24, #D97706); }
.grade-d { background: linear-gradient(135deg, #F87171, #DC2626); }
.best-card { border-color: #BBF7D0; } .worst-card { border-color: #FECACA; }
.best-card .dcard-h h2 i { color: #16A34A; } .worst-card .dcard-h h2 i { color: #DC2626; }
.score-help li { margin-bottom: .25rem; }
@media print {
    .sidebar-col, .topbar, .bottom-nav, .install-banner, .ios-install { display: none !important; }
    .app-main > main { padding: 0 !important; }
    .kpi { box-shadow: none; }
    .dcard { break-inside: avoid; box-shadow: none; }
}
.pin-park span { background: #2563EB; }

/* --- Lot O : dépenses --- */
.expense-picker { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 576px) { .expense-picker { grid-template-columns: repeat(5, 1fr); } }
.expense-i[data-color="carburant"] { --ev: #2563EB; } .expense-i[data-color="peage"] { --ev: #7C3AED; }
.expense-i[data-color="reparation"] { --ev: #EF4444; } .expense-i[data-color="entretien"] { --ev: #F59E0B; }
.expense-i[data-color="amende"] { --ev: #DC2626; } .expense-i[data-color="lavage"] { --ev: #06B6D4; }
.expense-i[data-color="parking"] { --ev: #64748B; } .expense-i[data-color="assurance"] { --ev: #22C55E; }
.expense-i[data-color="autre"] { --ev: #94A3B8; }

/* --- Suivre en ligne --- */
.btn-live { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; box-shadow: 0 4px 14px rgba(239,68,68,.35); }
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; animation: wt-pulse-white 1.4s infinite; }
@keyframes wt-pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.8); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.live-menu { max-height: 60vh; overflow-y: auto; min-width: 270px; }
.live-menu .dropdown-item { display: flex; align-items: center; }
.fleet-track .track-card { width: min(380px, calc(100% - 1.5rem)); }
.ft-chips { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 132px; overflow-y: auto; }
.ft-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #E2E8F0; background: #fff; color: #334155;
           border-radius: 999px; padding: .2rem .6rem; font-size: .76rem; }
.ft-chip small { color: #16A34A; font-weight: 600; }
.ft-chip:hover { border-color: #93C5FD; }
.ft-chip.active { background: #2563EB; border-color: #2563EB; color: #fff; }
.ft-chip.active small { color: #DCFCE7; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }