/* ==========================================================================
   FlotteConvois - feuille de style (complète Bootstrap 5.3)
   ========================================================================== */
:root {
  --ink: #14213d;
  --ink-2: #1f3160;
  --accent: #fca311;
  --bs-primary: #2547a8;
  --bs-primary-rgb: 37, 71, 168;
  --bs-body-bg: #f4f6fb;
  --bs-border-radius: .6rem;
}
.btn-primary { --bs-btn-bg: #2547a8; --bs-btn-border-color: #2547a8; --bs-btn-hover-bg: #1d3a8c; --bs-btn-hover-border-color: #1d3a8c; --bs-btn-active-bg: #182f73; }
.btn-outline-primary { --bs-btn-color: #2547a8; --bs-btn-border-color: #2547a8; --bs-btn-hover-bg: #2547a8; --bs-btn-hover-border-color: #2547a8; --bs-btn-active-bg: #2547a8; }
.nav-pills { --bs-nav-pills-link-active-bg: #2547a8; }
a { color: #2547a8; }
.bg-ink { background: var(--ink) !important; }
.min-w-0 { min-width: 0; }

/* ---------- Barre latérale ---------- */
.sidebar { width: 250px; flex-shrink: 0; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar .brand { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand i { color: var(--accent); }
.sidebar .nav-link { color: rgba(255,255,255,.75); border-radius: .5rem; padding: .55rem .75rem; margin-bottom: 2px; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--ink-2); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); padding: 1rem .75rem .35rem; }

/* ---------- Cartes & KPI ---------- */
.card { border: 1px solid #e3e7f0; box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.card-header { background: #fff; font-weight: 600; border-bottom-color: #eef1f6; }
.kpi { transition: transform .15s, box-shadow .15s; color: inherit; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,33,61,.08); }
.kpi-icone { width: 48px; height: 48px; border-radius: .75rem; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.kpi-valeur { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kpi-libelle { font-size: .82rem; color: #6c757d; }
.alertes-liste { max-height: 360px; overflow-y: auto; }

.vignette { width: 64px; height: 64px; object-fit: cover; border-radius: .4rem; border: 1px solid #dee2e6; }
.ligne-cliquable { cursor: pointer; }
.synthese dt { font-weight: 500; }
.synthese dd { margin-bottom: .35rem; }

/* Itinéraire */
.timeline-itineraire { position: relative; padding-left: .25rem; }
.timeline-itineraire .etape { display: flex; gap: .9rem; position: relative; padding-bottom: 1.1rem; }
.timeline-itineraire .etape:last-child { padding-bottom: 0; }
.timeline-itineraire .etape:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; border-left: 2px dashed #c5cde0; }
.timeline-itineraire .point { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #2547a8; background: #fff; margin-top: 4px; flex-shrink: 0; }
.timeline-itineraire .point.fin { border-color: #dc3545; background: #dc3545; }

/* ---------- Tableaux → cartes sur mobile ---------- */
@media (max-width: 767.98px) {
  .table-cartes thead { display: none; }
  .table-cartes, .table-cartes tbody, .table-cartes tr, .table-cartes td, .table-cartes tfoot, .table-cartes th { display: block; width: 100%; }
  .table-cartes tr { border-bottom: 1px solid #e3e7f0; padding: .6rem .9rem; }
  .table-cartes td { border: 0; padding: .2rem 0; text-align: left !important; }
  .table-cartes td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8a94a6; }
  .table-cartes td:not([data-label]) { padding-top: .5rem; }
  .table-cartes td[colspan] { text-align: center !important; }
}

/* ---------- Connexion ---------- */
.login-page { background: radial-gradient(circle at 20% 20%, #2547a8 0, var(--ink) 55%); }
.login-card { max-width: 420px; border-radius: 1rem; }
.login-logo { width: 64px; height: 64px; border-radius: 1rem; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 2rem; }

/* ---------- Impression ---------- */
@media print {
  .sidebar, .navbar, .nav-tabs, .btn, form, .modal { display: none !important; }
  .tab-pane { display: block !important; opacity: 1 !important; }
  body { background: #fff; }
}

/* ==========================================================================
   PORTAIL CHAUFFEUR (mobile d'abord)
   ========================================================================== */
.portail { background: #eef1f7; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.portail-entete { background: linear-gradient(135deg, var(--ink), var(--ink-2)); color: #fff; padding: 1rem 1rem 2.4rem; padding-top: calc(1rem + env(safe-area-inset-top)); }
.portail-contenu { max-width: 560px; margin: -1.6rem auto 0; padding: 0 .85rem; }
.portail .card { border: 0; border-radius: 1rem; box-shadow: 0 2px 10px rgba(20,33,61,.06); }
.carte-vide { background: #fff; border-radius: 1rem; padding: 2rem 1.25rem; }
.carte-convoi .trajet .trait { border-left: 2px dashed #c5cde0; height: 18px; margin: 2px 0 2px 7px; }

.btn-action { background: #fff; border: 0; border-radius: 1rem; padding: .9rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; box-shadow: 0 2px 10px rgba(20,33,61,.06); color: #2547a8; font-weight: 600; font-size: .85rem; }
.btn-action i { font-size: 1.6rem; }
.btn-action:active { transform: scale(.97); }
.btn-action-danger { color: #dc3545; }
.btn-action-success { color: #198754; }

.formulaire-mobile { background: #fff; border-radius: 1rem; padding: 1.1rem; box-shadow: 0 2px 10px rgba(20,33,61,.06); }
.formulaire-mobile .form-control, .formulaire-mobile .form-select { min-height: 46px; font-size: 16px; } /* 16px : évite le zoom iOS */
.montant-geant { font-size: 1.8rem !important; font-weight: 700; text-align: center; }

.grille-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.grille-choix label { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .2rem; font-size: .75rem; line-height: 1.1; border-radius: .75rem; }
.grille-choix label i { font-size: 1.35rem; }

.zone-signature { position: relative; border: 2px dashed #b8c2d8; border-radius: .75rem; background: #fafbfe; height: 200px; touch-action: none; }
.zone-signature canvas { width: 100%; height: 100%; display: block; border-radius: .75rem; }
.zone-signature .indice { position: absolute; inset: auto 0 .5rem 0; text-align: center; color: #b8c2d8; font-size: .8rem; pointer-events: none; }
.zone-signature.signee .indice { display: none; }

.apercu-photo { width: 72px; height: 72px; object-fit: cover; border-radius: .5rem; border: 1px solid #dee2e6; }

.portail-nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; border-top: 1px solid #e3e7f0; padding-bottom: env(safe-area-inset-bottom); z-index: 1030; }
.portail-nav a { flex: 1; text-align: center; padding: .5rem 0 .45rem; color: #8a94a6; text-decoration: none; font-size: .7rem; display: flex; flex-direction: column; align-items: center; }
.portail-nav a i { font-size: 1.3rem; }
.portail-nav a.actif { color: #2547a8; font-weight: 600; }
.btn-envoi[disabled] { opacity: .7; }

/* ==========================================================================
   Assistant d'installation & logo
   ========================================================================== */
.install-page { background: radial-gradient(circle at 15% 10%, #2547a8 0, var(--ink) 60%) fixed; min-height: 100vh; }
.etapes-install { list-style: none; padding: 0; display: flex; justify-content: space-between; counter-reset: e; position: relative; }
.etapes-install::before { content: ""; position: absolute; top: 17px; left: 6%; right: 6%; height: 2px; background: rgba(255,255,255,.2); }
.etapes-install li { position: relative; flex: 1; text-align: center; color: rgba(255,255,255,.55); font-size: .78rem; }
.etapes-install li a { color: inherit; text-decoration: none; }
.etapes-install .pastille { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .35rem; background: var(--ink); border: 2px solid rgba(255,255,255,.3); font-weight: 700; }
.etapes-install li.faite { color: #fff; }
.etapes-install li.faite .pastille { background: #198754; border-color: #198754; }
.etapes-install li.courante { color: #fff; font-weight: 600; }
.etapes-install li.courante .pastille { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (max-width: 575.98px) { .etapes-install .libelle { display: none; } .etapes-install li.courante .libelle { display: block; } }
.recap { border: 1px solid #e3e7f0; border-radius: .75rem; padding: 1rem; background: #fafbfe; }
.apercu-logo { max-height: 48px; max-width: 120px; object-fit: contain; }
.logo-app { max-height: 34px; max-width: 150px; object-fit: contain; background: #fff; border-radius: .35rem; padding: 2px; }
.login-logo-img { max-height: 72px; max-width: 220px; object-fit: contain; }
.entete-impression { display: none; }
@media print {
  .entete-impression { display: flex !important; align-items: center; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: 1rem; }
  .entete-impression img { max-height: 60px; }
}

/* Sauvegardes & mises à jour */
.voile-attente { position: fixed; inset: 0; background: rgba(20,33,61,.85); color: #fff; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.notes-version { background: #f6f8fc; border-left: 3px solid var(--bs-primary); padding: .6rem .8rem; border-radius: .4rem; max-height: 220px; overflow: auto; }

/* Notifications */
.cloche .bi { line-height: 1; }
.cloche-compteur { position: absolute; top: -6px; right: -10px; font-size: .62rem; padding: .25em .45em; }
.notif-item { border-left: 3px solid transparent; }
.notif-item.non-lue { background: #f0f4ff; border-left-color: var(--bs-primary); }
.notif-icone { font-size: 1.15rem; width: 1.6rem; text-align: center; flex-shrink: 0; }
.notif-danger { color: #dc3545; } .notif-alerte { color: #d97706; } .notif-succes { color: #198754; } .notif-info { color: var(--bs-primary); }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table-prefs td, .table-prefs th { vertical-align: middle; }
.table-prefs .form-switch { display: inline-block; padding-left: 2.5em; margin: 0; min-height: 0; }
.portail-entete .cloche-compteur { right: -8px; }

/* Navigation fluide */
.barre-navigation { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 3000; opacity: 0; pointer-events: none; box-shadow: 0 0 8px var(--accent); }
.barre-navigation.active { opacity: 1; width: 85%; transition: width 8s cubic-bezier(.08,.7,.2,1), opacity .1s; }
.barre-navigation.fin { opacity: 0; width: 100%; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .barre-navigation.active { transition: none; width: 60%; } }

/* Portail : choix du véhicule (accompagnants) */
.choix-vehicule { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.choix-vehicule label { border-radius: .75rem; padding: .6rem .75rem; line-height: 1.2; }
.form-justifier label { cursor: pointer; }

/* Portail hors ligne */
.etat-reseau { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .9rem; font-size: .82rem; background: #fff3cd; color: #664d03; max-width: 560px; margin: -1.2rem auto .8rem; border-radius: .75rem; position: relative; z-index: 2; box-shadow: 0 2px 8px rgba(20,33,61,.08); }
.etat-reseau.hors-ligne { background: #343a40; color: #fff; }
.etat-reseau.refus { background: #f8d7da; color: #842029; }
.etat-reseau + .portail-contenu { margin-top: 0; }
.panneau-envois { height: auto !important; max-height: 75vh; border-radius: 1rem 1rem 0 0; }
.toast-terrain { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); width: min(92vw, 480px); padding: .75rem 1rem; border-radius: .75rem; color: #fff; background: #343a40; font-size: .9rem; z-index: 2100; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast-terrain.visible { opacity: 1; transform: translate(-50%, 0); }
.toast-terrain.toast-succes { background: #198754; }
.toast-terrain.toast-erreur { background: #b02a37; }

/* ---------- 1.6 : rapports, rentabilité, fiches ---------- */
tr[data-href], tr.cliquable { cursor: pointer; }
.kpi-icone-sm { width: 2rem; height: 2rem; font-size: 1rem; flex: 0 0 auto; }
.table-rapport { font-size: .85rem; }
.table-rapport td, .table-rapport th { white-space: nowrap; }
.table-rapport td:nth-child(2), .table-rapport td:nth-child(3), .table-rapport td:nth-child(4) { white-space: normal; }
.carte-rentabilite { border-left: 4px solid var(--bs-primary); }
.legende { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-right: .2rem; }
.graphe-barres { display: flex; align-items: stretch; gap: .35rem; height: 220px; overflow-x: auto; padding-bottom: .2rem; }
.graphe-barres .colonne { flex: 1 0 2.6rem; display: flex; flex-direction: column; min-width: 2.6rem; }
.graphe-barres .barres { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid #cfd6e4; }
.graphe-barres .barre { width: 40%; max-width: 1.4rem; border-radius: 3px 3px 0 0; min-height: 1px; }
.graphe-barres .barre.ca { background: var(--bs-primary); }
.graphe-barres .barre.couts { background: #e8a33a; }
.graphe-barres .etiquette { font-size: .7rem; text-align: center; color: #6c757d; margin-top: .2rem; white-space: nowrap; }
.graphe-barres .marge { font-size: .68rem; text-align: center; font-weight: 600; white-space: nowrap; }

/* ---------- Tableau de bord décisionnel ---------- */
.tableau-bord {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --seq-250: #86b6ef; --seq-400: #3987e5; --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;
  --div-positif: #2a78d6; --div-negatif: #e34948;
  --statut-bon: #0ca30c; --statut-attention: #fab219; --statut-serieux: #ec835a; --statut-critique: #d03b3b;
  --encre: #0b0b0b; --encre-secondaire: #52514e; --encre-attenuee: #898781;
  --grille: #e1e0d9; --base-axe: #c3c2b7; --surface: #fff;
}
.tableau-bord .card-header { background: transparent; }
.tb-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .tb-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tb-tuiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tb-decisions { max-height: 380px; overflow-y: auto; }
.tb-tuile { background: var(--surface); border: 1px solid rgba(11,11,11,.08); border-radius: .75rem; padding: .85rem 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; color: var(--encre); text-decoration: none; min-width: 0; }
a.tb-tuile:hover { box-shadow: 0 2px 10px rgba(20,33,61,.08); color: var(--encre); }
.tb-tuile-lib { font-size: .8rem; color: var(--encre-secondaire); }
.tb-tuile-lib .bi { font-size: .7rem; color: var(--encre-attenuee); }
.tb-tuile-val { font-size: 1.45rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-tuile-pied { font-size: .75rem; color: var(--encre-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tendance { width: 72px; height: 22px; flex: 0 0 auto; }
.tb-var { font-weight: 600; }
.tb-var-bon { color: #006300; } .tb-var-mauvais { color: #b42318; } .tb-var-neutre { color: var(--encre-secondaire); }
.tb-decision { display: flex; align-items: center; gap: .75rem; border-left: 3px solid transparent; }
.tb-decision-icone { font-size: 1.2rem; width: 1.6rem; text-align: center; flex: 0 0 auto; }
.tb-niveau-critique { border-left-color: var(--statut-critique); } .tb-niveau-critique .tb-decision-icone { color: var(--statut-critique); }
.tb-niveau-serieux { border-left-color: var(--statut-serieux); } .tb-niveau-serieux .tb-decision-icone { color: #c4572d; }
.tb-niveau-attention { border-left-color: var(--statut-attention); } .tb-niveau-attention .tb-decision-icone { color: #b07800; }
.tb-pastille { display: inline-block; font-size: .7rem; font-weight: 600; padding: .15rem .45rem; border-radius: 1rem; white-space: nowrap; border: 1px solid; }
.tb-pastille-critique { color: #a32424; border-color: rgba(208,59,59,.35); background: rgba(208,59,59,.08); }
.tb-pastille-serieux { color: #a8471f; border-color: rgba(236,131,90,.45); background: rgba(236,131,90,.1); }
.tb-pastille-attention { color: #7a5300; border-color: rgba(250,178,25,.55); background: rgba(250,178,25,.12); }
.tb-pastille-info { color: var(--encre-secondaire); border-color: var(--base-axe); }
.tb-statut-bon { color: var(--statut-bon); } .tb-statut-critique { color: var(--statut-critique); } .tb-statut-serieux { color: #c4572d; }
/* Courbes */
.tb-graphe { width: 100%; height: auto; display: block; font-family: inherit; }
.tb-graphe .grille { stroke: var(--grille); stroke-width: 1; }
.tb-graphe .base { stroke: var(--base-axe); stroke-width: 1; }
.tb-graphe .axe { fill: var(--encre-attenuee); font-size: 11px; font-variant-numeric: tabular-nums; }
.tb-graphe .point { stroke: var(--surface); stroke-width: 2; }
.tb-graphe .zone { fill: transparent; cursor: crosshair; outline: none; }
.tb-graphe .reticule { stroke: var(--encre-attenuee); stroke-width: 1; }
.tb-chiffres td, .tb-chiffres th { font-variant-numeric: tabular-nums; }
/* Légende */
.tb-legende { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .78rem; color: var(--encre-secondaire); margin-top: .5rem; }
.tb-legende i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.tb-legende i.ligne { height: 2px; width: .9rem; border-radius: 1px; vertical-align: 3px; }
/* Barres horizontales */
.tb-barres { display: flex; flex-direction: column; gap: .55rem; }
.tb-barre { outline: none; }
.tb-barre-lib { font-size: .78rem; color: var(--encre-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-barre-lib a { color: inherit; }
.tb-barre-piste { display: flex; align-items: center; gap: .5rem; }
.tb-barre-fill { height: 14px; border-radius: 0 4px 4px 0; flex: 0 0 auto; max-width: calc(100% - 6.5rem); }
.tb-barre:hover .tb-barre-fill, .tb-barre:focus .tb-barre-fill { filter: brightness(1.12); }
.tb-barre-val { font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--encre); }
/* Barre empilée */
.tb-empile { display: flex; gap: 2px; height: 16px; margin-top: .35rem; }
.tb-empile-part { min-width: 4px; outline: none; }
.tb-empile-part:first-child { border-radius: 4px 0 0 4px; } .tb-empile-part:last-child { border-radius: 0 4px 4px 0; } .tb-empile-part:only-child { border-radius: 4px; }
.tb-empile-part:hover, .tb-empile-part:focus { filter: brightness(1.12); }
/* Avancement des convois */
.tb-avancement { height: 6px; border-radius: 3px; background: #e7edf8; overflow: hidden; }
.tb-avancement > div { height: 100%; border-radius: 3px; background: var(--serie-1); }
.tb-avancement-attention { background: rgba(250,178,25,.2); } .tb-avancement-attention > div { background: var(--statut-attention); }
.tb-avancement-critique { background: rgba(208,59,59,.15); } .tb-avancement-critique > div { background: var(--statut-critique); width: 100% !important; }
/* Barres divergentes (marge par véhicule) */
.tb-divergent { display: flex; flex-direction: column; gap: .35rem; }
.tb-divergent-ligne { display: grid; grid-template-columns: 6.5rem 1fr 4.2rem; align-items: center; gap: .5rem; color: var(--encre); text-decoration: none; font-size: .8rem; }
.tb-divergent-ligne:hover { color: var(--encre); background: #f6f8fc; border-radius: 4px; }
.tb-divergent-lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tb-divergent-piste { position: relative; height: 14px; }
.tb-divergent-piste::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--base-axe); }
.tb-divergent-fill { position: absolute; top: 0; bottom: 0; }
.tb-divergent-fill.positif { left: 50%; background: var(--div-positif); border-radius: 0 4px 4px 0; }
.tb-divergent-fill.negatif { right: 50%; background: var(--div-negatif); border-radius: 4px 0 0 4px; }
.tb-divergent-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-divergent-sep { text-align: center; line-height: 1; }
/* Info-bulle */
.tb-infobulle { position: fixed; z-index: 1080; pointer-events: none; background: #fff; border: 1px solid rgba(11,11,11,.12); border-radius: .5rem; box-shadow: 0 6px 20px rgba(20,33,61,.15); padding: .5rem .65rem; font-size: .78rem; min-width: 9rem; max-width: 18rem; }
.tb-infobulle .titre { color: var(--encre-secondaire); margin-bottom: .2rem; }
.tb-infobulle .ligne { display: flex; align-items: center; gap: .4rem; }
.tb-infobulle .ligne i { width: .8rem; height: 2px; border-radius: 1px; flex: 0 0 auto; }
.tb-infobulle .ligne strong { margin-left: auto; padding-left: .75rem; color: var(--encre); }
.tb-infobulle .ligne span { color: var(--encre-secondaire); }
@media (max-width: 575.98px) {
  .tb-tuile-val { font-size: 1.2rem; }
  .tb-tendance { display: none; }
  .tb-graphe .axe { font-size: 15px; }
}
.avert-inactivite { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; background: #fff; border: 1px solid rgba(11,11,11,.12); border-radius: .75rem; padding: .9rem 1rem; width: 17rem; }
.qr-totp { width: 168px; height: 168px; background: #fff; border: 1px solid #e3e7f0; border-radius: .5rem; display: grid; place-items: center; }
.qr-totp svg { width: 100%; height: 100%; }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 10rem)); gap: .4rem; }
.codes-secours code { font-size: 1rem; background: #f3f5fa; padding: .3rem .5rem; border-radius: .3rem; text-align: center; }
.note-vocale { display: inline-flex; align-items: center; gap: .3rem; background: #f3f5fa; border-radius: 2rem; padding: .15rem .5rem .15rem .6rem; }
.note-vocale audio { height: 32px; max-width: 230px; }
.note-vocale .bi { color: #d03b3b; }
[data-enregistrer].enregistre { animation: pulsation 1.2s infinite; }
@keyframes pulsation { 50% { box-shadow: 0 0 0 .5rem rgba(208,59,59,.15); } }

/* ---------- 1.8 : suivi GPS, lien client, planning ---------- */
.gps-etat { display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: #fff; border-radius: .6rem; padding: .45rem .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.gps-etat[hidden] { display: none; }
.carte-suivi { height: 320px; border-radius: .6rem .6rem 0 0; z-index: 0; }
.carte-bureau { border-radius: 0; height: 340px; }
.carte-flotte { height: calc(100vh - 190px); min-height: 380px; border-radius: .6rem; z-index: 0; }
.liste-carte { max-height: calc(100vh - 190px); overflow: auto; }
.pastille-carte { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: #1baf7a; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc; vertical-align: -1px; }
.pastille-carte.mission { background: #2a78d6; }
.pastille-carte.vieux { background: #9aa4b2; }
.etiquette-carte { font-weight: 600; font-size: .72rem; padding: 0 .3rem; }
.page-suivi { background: var(--bs-body-bg); }
.page-suivi .portail-entete { padding-bottom: 1rem; }
.suivi-etapes { list-style: none; display: flex; padding: 0; margin: 0; counter-reset: e; }
.suivi-etapes li { flex: 1; text-align: center; position: relative; color: #9aa4b2; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.suivi-etapes li i { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: #e9ecf3; font-size: 1rem; position: relative; z-index: 1; }
.suivi-etapes li::before { content: ''; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 3px; background: #e9ecf3; }
.suivi-etapes li:first-child::before { display: none; }
.suivi-etapes li.fait, .suivi-etapes li.actuel { color: var(--bs-primary); }
.suivi-etapes li.fait i { background: var(--bs-primary); color: #fff; }
.suivi-etapes li.fait::before, .suivi-etapes li.actuel::before { background: var(--bs-primary); }
.suivi-etapes li.actuel i { background: #fff; color: var(--bs-primary); box-shadow: 0 0 0 3px var(--bs-primary); animation: pulsation 1.6s infinite; }
.suivi-etapes li span { font-weight: 600; }
.suivi-etapes small { color: #6c757d; font-size: .7rem; }

.planning-defile { overflow-x: auto; }
.planning, .planning-legende { --serie-1: #2a78d6; --serie-3: #1baf7a; }
.planning { min-width: 900px; --nom: 190px; }
.planning-entete, .planning-ligne { display: grid; grid-template-columns: var(--nom) 1fr; }
.planning-entete { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid #dee2e6; }
.planning-nom { padding: .4rem .75rem; border-right: 1px solid #dee2e6; position: sticky; left: 0; background: #fff; z-index: 2; min-width: 0; padding-right: 1.4rem; }
.planning-piste { position: relative; display: grid; grid-template-columns: repeat(var(--jours), 1fr); min-height: 3.1rem; }
.planning-jours { min-height: 0; }
.planning-jour { text-align: center; font-size: .7rem; color: #6c757d; padding: .25rem 0; border-left: 1px solid #f0f1f5; line-height: 1.15; display: flex; flex-direction: column; }
.planning-jour strong { font-size: .9rem; color: #212529; }
.planning-jour.we { background: #f7f8fb; }
.planning-jour.aujourdhui strong { color: #fff; background: var(--bs-primary); border-radius: 50%; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; margin: 0 auto; }
.planning-ligne { border-bottom: 1px solid #f0f1f5; }
.planning-ligne:hover .planning-nom, .planning-ligne:hover .planning-case { background-color: #fafbff; }
.planning-case { border-left: 1px solid #f0f1f5; }
.planning-case.we { background: #f7f8fb; }
.planning-groupe { background: #f1f3f8; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; padding: .25rem .75rem; position: sticky; left: 0; }
.planning-etat { position: absolute; right: .55rem; top: 50%; width: .6rem; height: .6rem; border-radius: 50%; transform: translateY(-50%); background: #0ca30c; }
.planning-legende .planning-etat { position: static; display: inline-block; transform: none; vertical-align: 0; }
.planning-etat.occupe { background: var(--serie-1); }
.planning-etat.indispo { background: #d03b3b; }
.planning-maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: #d03b3b; z-index: 2; pointer-events: none; }
.planning-barre { position: absolute; top: .55rem; height: 2rem; border-radius: .4rem; color: #fff; font-size: .72rem; font-weight: 600; text-decoration: none; display: flex; align-items: center;
  padding: 0 .4rem; overflow: hidden; white-space: nowrap; z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.15); background: var(--serie-1); }
.planning-barre span { overflow: hidden; text-overflow: ellipsis; }
.planning-barre:hover { color: #fff; filter: brightness(1.08); z-index: 4; }
.planning-barre.planifie { background: #fff; color: var(--serie-1); border: 2px dashed var(--serie-1); box-shadow: none; }
.planning-barre.planifie:hover { color: var(--serie-1); }
.planning-barre.en-cours { background: var(--serie-1); }
.planning-barre.arrive { background: var(--serie-3); }
.planning-barre.termine { background: #9aa4b2; }
.planning-barre.retard { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.25) 6px 12px); background-color: #d03b3b; }
.planning-barre.planifie.retard { background: #fff5f5; color: #d03b3b; border-color: #d03b3b; }
.planning-barre.coupe-g { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.planning-barre.coupe-d { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.planning-barre.demo { position: static; display: inline-block; width: 1.6rem; height: .8rem; vertical-align: -1px; padding: 0; }
.planning-indispo { position: absolute; top: .3rem; bottom: .3rem; right: 0; background: repeating-linear-gradient(135deg, #fde8e8 0 8px, #fbd5d5 8px 16px); border-radius: .3rem; font-size: .7rem; color: #a12a2a; display: flex; align-items: flex-end; padding: 0 .4rem; overflow: hidden; white-space: nowrap; }
.planning-repere { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .8rem; z-index: 3; line-height: 1; cursor: help; }
@media (max-width: 575.98px) { .planning { --nom: 130px; } }

/* ---------- 1.9 : écran de connexion ---------- */
.ecran-connexion { --cx-encre: #14213d; --cx-asphalte: #1c2b50; --cx-marquage: #fca311; --cx-papier: #f5f6fa; --cx-brume: #aeb8cf; --cx-signal: #ff6b6b;
  background: var(--cx-papier); min-height: 100vh; }
.cx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); min-height: 100vh; }
.cx-panneau { background: var(--cx-encre); color: #e9edf7; padding: 2.5rem clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; gap: 2rem;
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%); }
.cx-marque { display: flex; align-items: center; gap: .9rem; }
.cx-logo { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: .8rem; background: #fff; display: grid; place-items: center; overflow: hidden; }
.cx-logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.cx-logo-icone { background: var(--cx-asphalte); color: var(--cx-marquage); font-size: 1.6rem; }
.cx-entreprise { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.cx-appli { color: var(--cx-brume); font-size: .85rem; }
.cx-heure { font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-date { font-size: 1.15rem; margin-top: .5rem; color: #fff; }
.cx-ferie { margin-top: .6rem; color: var(--cx-brume); }
.cx-ferie span { opacity: .8; }
.cx-ferie.aujourdhui { color: var(--cx-marquage); font-weight: 600; }
.cx-titre { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 .8rem; }
.cx-titre .cx-source { font-weight: 400; }
.cx-source { color: var(--cx-brume); font-size: .78rem; margin: .5rem 0 0; }
/* La météo des villes comme les étapes d'une route : ligne centrale en pointillés */
.cx-route { list-style: none; margin: 0; padding: 0 0 0 1.6rem; position: relative; }
.cx-route::before { content: ''; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 3px;
  background: repeating-linear-gradient(180deg, var(--cx-marquage) 0 10px, transparent 10px 20px); }
.cx-route li { position: relative; display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; column-gap: 1rem; padding: .45rem 0; }
.cx-route li::before { content: ''; position: absolute; left: -1.6rem; top: .8rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--cx-encre); border: 3px solid var(--cx-marquage); }
.cx-ville { font-weight: 600; }
.cx-temps b { font-size: 1.15rem; color: #fff; }
.cx-temps i { color: var(--cx-marquage); }
.cx-details { grid-column: 2; color: var(--cx-brume); font-size: .82rem; }
.cx-alerte { grid-column: 1 / -1; color: var(--cx-signal); font-size: .85rem; margin-top: .15rem; }
.cx-route li.alerte::before { border-color: var(--cx-signal); }
.cx-annonces { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cx-annonces li { border-left: 3px solid var(--cx-brume); padding: .1rem 0 .1rem .8rem; }
.cx-annonces li.niveau-important { border-color: var(--cx-marquage); }
.cx-annonces li.niveau-urgent { border-color: var(--cx-signal); }
.cx-annonces li.niveau-urgent strong { color: var(--cx-signal); }
.cx-annonces strong { display: block; color: #fff; }
.cx-annonces span { color: #d3d9e8; font-size: .9rem; }
.cx-pratique { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; }
.cx-prix { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cx-prix span { display: flex; flex-direction: column; color: var(--cx-brume); font-size: .85rem; }
.cx-prix b { font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.cx-prix small { color: var(--cx-marquage); font-size: .78rem; }
.cx-conseil { margin: 0; color: #e9edf7; line-height: 1.5; }
.cx-actus ul { list-style: none; margin: 0; padding: 0; }
.cx-actus li { padding: .45rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.cx-actus a { color: #e9edf7; text-decoration: none; }
.cx-actus a:hover, .cx-actus a:focus-visible { color: var(--cx-marquage); text-decoration: underline; }
.cx-formulaire { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1.25rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cx-carte { width: 100%; max-width: 400px; }
.cx-h1 { font-size: 1.75rem; font-weight: 800; color: var(--cx-encre); margin-bottom: .35rem; }
.cx-aide { color: #5b6478; margin-bottom: 1.5rem; }
.cx-champ { position: relative; }
.cx-champ > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8a93a8; pointer-events: none; }
.cx-champ .form-control { padding-left: 2.75rem; padding-right: 3rem; border-radius: .7rem; }
.cx-oeil { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #5b6478; font-size: 1.2rem; padding: .4rem .6rem; border-radius: .5rem; }
.cx-oeil:focus-visible { outline: 2px solid var(--bs-primary); }
.cx-maj { color: #b45309; margin-top: .4rem; }
.cx-code { text-align: center; font-weight: 700; letter-spacing: .4em; font-size: 1.6rem; border-radius: .7rem; }
.cx-formulaire .btn-lg { border-radius: .7rem; font-weight: 600; }
.cx-entete-mobile { display: none; }
.cx-pied { color: #8a93a8; font-size: .8rem; margin: 2rem 0 0; text-align: center; }
@media (max-width: 991.98px) {
  .cx { grid-template-columns: 1fr; }
  .cx-formulaire { order: -1; padding: 1.25rem 1rem 2rem; justify-content: flex-start; position: static; height: auto; }
  .cx-entete-mobile { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
  .cx-entete-mobile .cx-entreprise { color: var(--cx-encre); }
  .cx-entete-mobile .cx-appli { color: #5b6478; }
  .cx-panneau { padding: 2rem 1.25rem; gap: 1.75rem; }
  .cx-panneau .cx-marque { display: none; }
  .cx-heure { font-size: 3rem; }
  .cx-route li { grid-template-columns: 1fr; }
  .cx-details { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .ecran-connexion * { transition: none !important; } }