/* ============================================================================
   Centre de contrôle GPS.

   Une console d'exploitation, pas un document : on la balaie du regard, on
   n'en lit pas le contenu de haut en bas. D'où le parti pris — la carte prend
   toute la place, l'information d'état est encodée dans la forme (barre de
   couleur, pastille) autant que dans le chiffre, et le détail n'apparaît que
   lorsqu'on le demande.

   Les couleurs d'état sont sémantiques et distinctes de l'accent applicatif :
   vert = roule, cyan = moteur tournant, ardoise = stationné, rouge = muet.
   ============================================================================ */

.cc {
  --cc-mvt:  #16a34a;
  --cc-idle: #0891b2;
  --cc-stop: #64748b;
  --cc-off:  #dc2626;
  --cc-none: #94a3b8;
  --cc-panel-w: 340px;

  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
}

/* ------------------------------------------------------------ Bandeau haut */

.cc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.cc__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Compteur-filtre : le chiffre porte l'information, le liseré porte l'état.
   Le même élément sert d'indicateur et de commande — c'est ce qui évite une
   rangée de filtres redondante sous les statistiques. */
.cck {
  --k: var(--cc-stop);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  min-width: 6.5rem;
  padding: .5rem .7rem .55rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 3px solid var(--k);
  border-radius: 9px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cck:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(15 23 42 / .08); }
.cck:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.cck.is-active {
  border-color: var(--k);
  box-shadow: inset 0 0 0 1px var(--k), 0 4px 14px rgb(15 23 42 / .06);
}

.cck__val {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.cck__val small { font-size: .6em; font-weight: 600; margin-left: .12em; opacity: .6; }
.cck__lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}

.cck.is-mvt  { --k: var(--cc-mvt);  }
.cck.is-idle { --k: var(--cc-idle); }
.cck.is-stop { --k: var(--cc-stop); }
.cck.is-off  { --k: var(--cc-off);  }
.cck.is-none { --k: var(--cc-none); }
.cck.is-mvt .cck__val  { color: var(--cc-mvt); }
.cck.is-off .cck__val  { color: var(--cc-off); }

.cck--info { cursor: default; --k: var(--color-primary, #2563eb); }
.cck--info:hover { transform: none; box-shadow: none; }

/* -------------------------------------------------------------- Outils */

.cc__tools { display: flex; align-items: center; gap: .5rem; }

.cc__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .65rem;
  height: 36px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #64748b);
}
.cc__search:focus-within { border-color: var(--color-primary, #2563eb); }
.cc__search input {
  border: 0; outline: 0; background: none; padding: 0;
  width: 12rem; height: 100%;
  font-size: .85rem; color: var(--color-text, #0f172a);
}
.cc__search input::-webkit-search-cancel-button { cursor: pointer; }

.cc__seg {
  display: flex;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface, #fff);
}
.cc__seg button {
  border: 0; background: none; cursor: pointer;
  padding: 0 .7rem; height: 36px;
  font-size: .78rem; font-weight: 600;
  color: var(--color-text-muted, #64748b);
}
.cc__seg button + button { border-left: 1px solid var(--color-border, #e2e8f0); }
.cc__seg button:hover { background: var(--color-surface-alt, #f8fafc); }
.cc__seg button.is-active {
  background: var(--color-primary, #2563eb);
  color: #fff;
}

.cc__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
}
.cc__icon:hover { color: var(--color-primary, #2563eb); border-color: currentColor; }

/* --------------------------------------------------------- Corps : carte */

.cc__body {
  display: grid;
  grid-template-columns: 1fr var(--cc-panel-w);
  gap: .75rem;
  min-height: 0;
}

.cc__map {
  height: clamp(420px, 62vh, 760px);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e2e8f0);
  overflow: hidden;
  background: #eef2f6;
  z-index: 0;              /* garde les popups Leaflet sous la barre latérale */
}
.cc__map.is-dark { background: #12181f; }

/* -------------------------------------------------------- Panneau latéral */

.cc__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: clamp(420px, 62vh, 760px);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  overflow: hidden;
}

.cc__list, .cc__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.cc__list[hidden], .cc__detail[hidden] { display: none; }

.cc__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted, #64748b);
}
.cc__live { display: inline-flex; align-items: center; gap: .35rem; text-transform: none; letter-spacing: 0; font-weight: 600; }

.ccl {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.ccl__i {
  --k: var(--cc-stop);
  display: flex;
  gap: .55rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
  cursor: pointer;
  transition: background .12s;
}
.ccl__i:hover { background: var(--color-surface-alt, #f8fafc); }
.ccl__i:focus-visible { outline: 2px solid var(--k); outline-offset: -2px; }
.ccl__i.is-sel { background: color-mix(in srgb, var(--k) 9%, transparent); }

.ccl__i.is-mvt  { --k: var(--cc-mvt);  }
.ccl__i.is-idle { --k: var(--cc-idle); }
.ccl__i.is-stop { --k: var(--cc-stop); }
.ccl__i.is-off  { --k: var(--cc-off);  }
.ccl__i.is-none { --k: var(--cc-none); }

/* Barre d'état verticale : lue avant le texte, elle donne la couleur de la
   ligne au balayage. Pour « en circulation » elle pulse doucement — c'est le
   seul mouvement de la liste, réservé au seul état qui change en continu. */
.ccl__mark {
  flex: 0 0 3px;
  border-radius: 2px;
  background: var(--k);
}
.ccl__i.is-mvt .ccl__mark { animation: cc-pulse 2.2s ease-in-out infinite; }
@keyframes cc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.ccl__body { flex: 1; min-width: 0; }
.ccl__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.ccl__plate {
  font-size: .86rem; font-weight: 700; color: var(--color-text, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccl__speed {
  font-size: .95rem; font-weight: 700; color: var(--cc-mvt);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ccl__speed small { font-size: .58em; font-weight: 600; margin-left: .1em; opacity: .7; }
.ccl__state {
  font-size: .68rem; font-weight: 600; color: var(--k); white-space: nowrap;
}
.ccl__meta {
  display: flex; flex-wrap: wrap; gap: .1rem .5rem;
  margin-top: .1rem;
  font-size: .72rem; color: var(--color-text-muted, #64748b);
}
.ccl__drv { font-weight: 600; color: var(--color-text, #0f172a); }
.ccl__drv.is-none { font-weight: 400; font-style: italic; opacity: .65; }
.ccl__km { font-variant-numeric: tabular-nums; }
.ccl__ago { margin-left: auto; opacity: .75; }

.cc__none {
  padding: 2rem 1rem; text-align: center;
  color: var(--color-text-muted, #64748b); font-size: .85rem;
}

/* ------------------------------------------------------------- La fiche */

.cc__detail { overflow-y: auto; }

.ccd__load {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 3rem 1rem; color: var(--color-text-muted, #64748b); font-size: .85rem;
}
.ccd__load.is-err { color: var(--color-danger, #dc2626); }

.ccf__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  position: sticky; top: 0; z-index: 2;
  background: var(--color-surface, #fff);
}
.ccf__back {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .2rem .35rem;
  color: var(--color-text-muted, #64748b); border-radius: 6px;
}
.ccf__back:hover { background: var(--color-surface-alt, #f8fafc); color: var(--color-text, #0f172a); }

.ccf__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ccf__id strong { font-size: .92rem; font-weight: 700; }
.ccf__id small { font-size: .72rem; color: var(--color-text-muted, #64748b); }

.ccf__badge {
  --k: var(--cc-stop);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .45rem; border-radius: 999px; white-space: nowrap;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent);
}
.ccf__badge.is-mvt  { --k: var(--cc-mvt);  }
.ccf__badge.is-idle { --k: var(--cc-idle); }
.ccf__badge.is-stop { --k: var(--cc-stop); }
.ccf__badge.is-off  { --k: var(--cc-off);  }
.ccf__badge.is-none { --k: var(--cc-none); }

/* Chiffre héros : la vitesse instantanée. C'est la première question posée
   à un logiciel de suivi — elle mérite le plus gros caractère de la fiche. */
.ccf__now {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .9rem .8rem;
  border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
  background: var(--color-surface-alt, #f8fafc);
}
.ccf__now.is-moving { background: color-mix(in srgb, var(--cc-mvt) 8%, transparent); }
.ccf__nv {
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--color-text, #0f172a);
}
.ccf__now.is-moving .ccf__nv { color: var(--cc-mvt); }
.ccf__nv small { font-size: .4em; font-weight: 600; margin-left: .15em; opacity: .6; }
.ccf__nl { font-size: .74rem; color: var(--color-text-muted, #64748b); }

.ccf__block { padding: .8rem; border-bottom: 1px solid var(--color-border-subtle, #f1f5f9); }
.ccf__h {
  margin: 0 0 .55rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted, #64748b);
}

.ccf__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ccf__kpi {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem .5rem;
  border-radius: 8px;
  background: var(--color-surface-alt, #f8fafc);
}
.ccf__kv {
  font-size: .92rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--color-text, #0f172a);
}
.ccf__kv small { font-size: .62em; font-weight: 600; margin-left: .1em; opacity: .6; }
.ccf__kl {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--color-text-muted, #64748b);
}

.ccf__warn {
  margin: .6rem 0 0; padding: .5rem .6rem;
  border-left: 3px solid var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: .74rem; line-height: 1.45; color: var(--color-text, #0f172a);
}

/* Déroulé : une vraie chronologie, l'ordre porte l'information. */
.ccf__evs { list-style: none; margin: 0; padding: 0; position: relative; }
.ccf__evs::before {
  content: ''; position: absolute; left: 3.05rem; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--color-border, #e2e8f0);
}
.ccf__ev {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .3rem 0;
  font-size: .78rem; line-height: 1.4;
  position: relative;
}
.ccf__ev time {
  flex: 0 0 2.6rem; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--color-text-muted, #64748b);
}
.ccf__ev span { flex: 1; color: var(--color-text, #0f172a); }
.ccf__ev::before {
  content: ''; position: absolute; left: 2.85rem; top: .62rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-surface, #fff);
  border: 2px solid var(--cc-stop);
  z-index: 1;
}
.ccf__ev--debut::before          { border-color: var(--color-primary, #2563eb); }
.ccf__ev--depart::before         { border-color: var(--cc-mvt); }
.ccf__ev--arret::before          { border-color: var(--cc-stop); }
.ccf__ev--arret_prolonge::before { border-color: var(--cc-idle); background: var(--cc-idle); }
.ccf__ev--exces::before          { border-color: var(--cc-off);  background: var(--cc-off);  }
.ccf__ev--exces span { color: var(--cc-off); font-weight: 600; }
.ccf__ev.is-clic { cursor: pointer; border-radius: 6px; }
.ccf__ev.is-clic:hover { background: var(--color-surface-alt, #f8fafc); }

.ccf__none { padding: 1.5rem .8rem; text-align: center; font-size: .82rem; color: var(--color-text-muted, #64748b); }
.ccf__foot { display: flex; gap: .5rem; padding: .8rem; }
.ccf__foot .btn { flex: 1; justify-content: center; }

/* ------------------------------------------------------- Popup proximité */

.ccp .leaflet-popup-content-wrapper { border-radius: 10px; }
.ccp .leaflet-popup-content { margin: .7rem .8rem; font-size: .8rem; }
.ccp__load { color: #64748b; }
.ccp__box h4 {
  margin: 0 0 .45rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: #64748b;
}
.ccp__box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ccp__box li { display: flex; align-items: center; gap: .45rem; }
.ccp__box li em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: #64748b; }
.ccp__d { width: 8px; height: 8px; border-radius: 50%; background: #64748b; flex: 0 0 auto; }
.ccp__d.is-mvt { background: #16a34a; } .ccp__d.is-idle { background: #0891b2; }
.ccp__d.is-off { background: #dc2626; } .ccp__d.is-none { background: #94a3b8; }
.ccp__note { margin: .5rem 0 0; font-size: .68rem; color: #94a3b8; }

/* ------------------------------------------------------------- Légende */

.cc__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  font-size: .72rem; color: var(--color-text-muted, #64748b);
}
.cc__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ccd { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-stop); }
.ccd.is-mvt { background: var(--cc-mvt); } .ccd.is-idle { background: var(--cc-idle); }
.ccd.is-stop { background: var(--cc-stop); } .ccd.is-off { background: var(--cc-off); }
/* La note passe à la ligne plutôt que d'être tronquée : `margin-left: auto`
   la poussait hors du cadre dès que la légende occupait toute la largeur. */
.cc__legend-note {
  margin-left: auto; font-style: italic; opacity: .8;
  flex: 1 1 16rem; min-width: 0; text-align: right;
}
@media (max-width: 1400px) {
  .cc__legend-note { flex-basis: 100%; margin-left: 0; text-align: left; }
}

/* ---------------------------------------------------------- Plein écran */

body.cc-full { overflow: hidden; }
.cc.is-full {
  position: fixed; inset: 0; z-index: 900;
  padding: .75rem;
  /* La marge de sécurité des écrans à encoche : sans elle, la barre de
     compteurs passe sous la caméra en orientation paysage. */
  padding-top: max(.75rem, env(safe-area-inset-top));
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  background: var(--color-bg, #f8fafc);

  /* Par flexbox, pas par soustraction — même raison qu'en bas de ce fichier :
     `calc(100vh - 190px)` supposait une barre de compteurs d'exactement
     190 px. Dès qu'elle passe sur deux rangées (fenêtre étroite, police
     agrandie, zoom navigateur), la carte débordait sous le bas de l'écran.
     Et `vh` ignore la barre d'adresse mobile là où `dvh` la suit. */
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100dvh;
  overflow: hidden;
}
.cc.is-full .cc__bar { flex: 0 0 auto; }
.cc.is-full .cc__body { flex: 1 1 auto; min-height: 0; }
.cc.is-full .cc__map,
.cc.is-full .cc__panel { height: 100%; }

/* ------------------------------------------------------------ Alertes */

.alrt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.alrt__item {
  --k: var(--color-text-muted, #64748b);
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem .8rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 3px solid var(--k);
  border-radius: 0 9px 9px 0;
  background: var(--color-surface, #fff);
}
.alrt--haute   { --k: #dc2626; }
.alrt--moyenne { --k: #d97706; }
.alrt--basse   { --k: #0891b2; }
.alrt__mark {
  flex: 0 0 8px; height: 8px; margin-top: .35rem;
  border-radius: 50%; background: var(--k);
}
.alrt__main { flex: 1; min-width: 0; }
.alrt__top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.alrt__title { font-size: .86rem; font-weight: 700; color: var(--k); }
.alrt__veh {
  font-size: .74rem; font-weight: 700; text-decoration: none;
  padding: .1rem .4rem; border-radius: 5px;
  background: var(--color-surface-alt, #f8fafc);
  color: var(--color-text, #0f172a);
}
.alrt__veh:hover { background: var(--color-primary, #2563eb); color: #fff; }
.alrt__detail { margin: .15rem 0 0; font-size: .78rem; color: var(--color-text-muted, #64748b); }
.alrt__when {
  font-size: .72rem; color: var(--color-text-muted, #64748b);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Onglet alertes */

.tabs__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; margin-left: .35rem; padding: 0 .3rem;
  border-radius: 999px;
  background: var(--color-danger, #dc2626); color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 1;
}

/* ------------------------------------------------------------ Adaptatif */

@media (max-width: 1100px) and (min-width: 901px) {
  .cc__body { grid-template-columns: 1fr; }
  .cc__map { height: 52vh; }
  .cc__panel { height: auto; max-height: 60vh; }
  .cc__tools { width: 100%; }
  .cc__search { flex: 1; }
  .cc__search input { width: 100%; }
}

/* ============================================================================
   Mobile : le centre de contrôle devient une carte plein écran surmontée
   d'une feuille coulissante.

   Empiler la carte puis la liste obligeait à faire défiler toute la hauteur
   d'une carte pour atteindre le premier véhicule — sur un écran de six pouces,
   on ne voit alors jamais les deux en même temps, ce qui est pourtant tout
   l'intérêt d'un centre de contrôle.

   La feuille repose au repos sur une poignée qui laisse voir l'en-tête et les
   deux premières lignes ; un appui la déploie. La carte reste visible dessous
   en permanence.
   ============================================================================ */

@media (max-width: 900px) {

  .cc { gap: .5rem; }

  /* Les compteurs défilent sur une seule ligne : repliés sur trois rangées,
     ils repoussaient la carte hors de l'écran. */
  .cc__kpis {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
  .cc__kpis::-webkit-scrollbar { display: none; }
  .cck { flex: 0 0 auto; min-width: 5.4rem; padding: .45rem .6rem; scroll-snap-align: start; }
  .cck__val { font-size: 1.2rem; }
  .cck__lbl { font-size: .62rem; }

  /* Les outils tiennent sur une ligne : recherche extensible, puis les
     commandes. Empilés en pleine largeur — ce que fait la règle générique
     des barres d'outils — ils mangeaient à eux seuls cent pixels de carte. */
  .cc__tools {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
  }
  .cc__search { flex: 1 1 auto; min-width: 0; }
  .cc__search input { width: 100%; min-width: 0; }
  .cc__seg { flex: 0 0 auto; }
  .cc__seg button { padding: 0 .55rem; font-size: .72rem; }
  .cc__icon { flex: 0 0 auto; }

  /* Le mode « Relief » passe à la trappe : trois fonds sur un écran de six
     pouces, c'est deux de trop, et Plan/Sombre couvrent le besoin réel. */
  .cc__seg button[data-cc-tile="relief"] { display: none; }

  /* ---- La carte prend ce qui reste de l'écran ----

     Par flexbox, pas par soustraction. Un `calc(100dvh - 250px)` suppose une
     hauteur d'en-tête connue ; or elle varie selon qu'il y a un filtre de
     groupe, une pastille d'alertes ou un bandeau d'usurpation. Réglé à la
     main, ce nombre est faux dès la première variation — c'est ce qui
     écrasait la carte à quatre-vingts pixels.

     `flex: 1` sur la carte lui donne exactement ce qui reste, quel que soit
     l'en-tête. */
  .cc {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--topbar-height) - var(--space-8));
  }
  .cc__bar { flex: 0 0 auto; }
  .cc__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }
  .cc__map {
    flex: 1 1 auto;
    height: auto;
    /* Sous ce seuil, la carte ne montre plus rien d'exploitable : mieux vaut
       laisser la page défiler que d'afficher un timbre-poste. */
    min-height: 260px;
    border-radius: var(--lf-r-md, 12px);
  }

  /* ---- La feuille ---- */
  .cc__panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    height: auto;
    max-height: 82dvh;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    box-shadow: 0 -8px 28px rgb(23 21 41 / .16);
    /* Au repos, seuls l'en-tête et deux lignes dépassent. */
    transform: translateY(calc(100% - 168px));
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.cc-feuille .cc__panel { transform: translateY(0); }

  /* Poignée : la zone d'appui couvre toute la largeur, pas seulement le trait. */
  .cc__poignee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 100%;
    padding: .55rem 0 .35rem;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .cc__poignee::before {
    content: '';
    width: 38px; height: 4px; border-radius: 999px;
    background: var(--color-border-strong);
  }
  .cc__poignee-txt {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-muted);
  }

  .ccl { max-height: none; }
  .cc__detail { max-height: 74dvh; }

  /* La légende n'a plus sa place : la feuille occupe le bas de l'écran. */
  .cc__legend { display: none; }
}

@media (max-width: 640px) {
  .ccf__kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Sur écran large, la poignée n'a aucun sens : le panneau est une colonne. */
@media (min-width: 901px) {
  .cc__poignee { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ccl__i.is-mvt .ccl__mark { animation: none; }
  .cck:hover { transform: none; }
}

/* ============================================================================
   Fiche de suivi d'un véhicule — journée, historique, compteur.
   ============================================================================ */

.jrn__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.jrn__kpi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border-subtle, #f1f5f9);
}
.jrn__kv {
  font-size: 1.35rem; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--color-text, #0f172a);
}
.jrn__kv small { font-size: .5em; font-weight: 600; margin-left: .15em; opacity: .55; }
.jrn__kl {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--color-text-muted, #64748b);
}

/* Répartition conduite / arrêt : une barre unique vaut mieux que deux
   pourcentages que le lecteur doit rapprocher lui-même. */
.jrn__ratio { margin-bottom: 1.25rem; }
.jrn__bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--color-surface-alt, #f8fafc);
}
.jrn__seg.is-drive { background: var(--cc-mvt, #16a34a); }
.jrn__seg.is-idle  { background: var(--cc-stop, #64748b); opacity: .35; }
.jrn__ratio-lbl {
  margin: .4rem 0 0; font-size: .78rem; color: var(--color-text-muted, #64748b);
}

.jrn__cols {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--color-border-subtle, #f1f5f9);
}
.jrn__h {
  margin: 0 0 .6rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted, #64748b);
}
.jrn__evs { max-height: 22rem; overflow-y: auto; }

.jrn__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.jrn__stop {
  --k: var(--cc-stop, #64748b);
  display: flex; align-items: baseline; gap: .6rem;
  padding: .4rem .6rem;
  border-left: 3px solid var(--k);
  border-radius: 0 7px 7px 0;
  background: var(--color-surface-alt, #f8fafc);
  font-size: .78rem;
}
.jrn__stop.is-long { --k: var(--cc-idle, #0891b2); }
.jrn__stop-h { font-weight: 700; font-variant-numeric: tabular-nums; }
.jrn__stop-d { color: var(--k); font-weight: 600; }
.jrn__stop-p {
  margin-left: auto; font-size: .72rem; font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #64748b); text-decoration: none;
}
.jrn__stop-p:hover { color: var(--color-primary, #2563eb); text-decoration: underline; }
.jrn__note {
  margin: .6rem 0 0; font-size: .72rem; line-height: 1.5;
  color: var(--color-text-muted, #64748b);
}

/* Barre de comparaison inline dans le tableau d'historique. */
.jrn__spark {
  display: block; width: 100%; min-width: 4rem; height: 6px;
  border-radius: 999px; background: var(--color-surface-alt, #f8fafc); overflow: hidden;
}
.jrn__spark i { display: block; height: 100%; background: var(--color-primary, #2563eb); border-radius: 999px; }
td.is-hot { color: var(--color-danger, #dc2626); font-weight: 600; }

.jrn__cmp { display: flex; flex-wrap: wrap; gap: .6rem; }
.jrn__cmp-i {
  flex: 1 1 9rem;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle, #f1f5f9);
  background: var(--color-surface-alt, #f8fafc);
}
.jrn__cmp-i.is-warn {
  border-color: var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, transparent);
}
.jrn__cmp-v {
  font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--color-text, #0f172a);
}
.jrn__cmp-v small { font-size: .52em; font-weight: 600; margin-left: .15em; opacity: .55; }
.jrn__cmp-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--color-text-muted, #64748b); }

@media (max-width: 900px) {
  .jrn__cols { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Le bouton d'aide flotte en bas à droite, à 850 en profondeur — donc
   par-dessus la feuille. Au repos on le remonte au-dessus d'elle ; déployée,
   on l'efface : il masquerait la liste des véhicules. */
@media (max-width: 900px) {
  body:has(.cc) .aide-trigger { bottom: calc(168px + var(--space-3)); }
  body.cc-feuille .aide-trigger { opacity: 0; pointer-events: none; }
  .aide-trigger { transition: bottom .26s cubic-bezier(.2,.8,.3,1), opacity .18s; }
}

/* ============================================================================
   Barre d'outils du centre de contrôle sur mobile.

   La règle générique empile `.toolbar-actions` en pleine largeur : très bien
   sur une page de liste, désastreux ici. Le filtre de groupe et le bouton
   « Brancher mes GPS » occupaient alors deux bandes de cinquante pixels
   au-dessus de la carte — laquelle est pourtant le contenu de la page.

   « Brancher mes GPS » est de surcroît une action d'installation, faite une
   fois : elle n'a pas à disputer sa place à la carte tous les jours. Elle
   reste accessible depuis le menu latéral.
   ============================================================================ */

@media (max-width: 900px) {
  body:has(.cc) .toolbar { gap: .45rem; margin-bottom: .5rem; }

  body:has(.cc) .toolbar-actions {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
  }
  body:has(.cc) .toolbar-actions .form-row-inline { flex: 1 1 auto; min-width: 0; width: auto; }
  body:has(.cc) .toolbar-actions select { width: 100%; min-width: 0; }

  /* Réduit à son intention : « configurer », pas un appel à l'action. */
  body:has(.cc) .toolbar-actions .btn--primary {
    flex: 0 0 auto;
    width: auto;
    padding-inline: .7rem;
    font-size: .78rem;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    box-shadow: none;
  }
}

/* Sur les écrans sans `:has()`, la page reste utilisable — la carte est
   simplement plus courte. Aucune régression, seulement moins de gain. */

/* ============================================================================
   Sélecteur de vue et plein écran.
   ============================================================================ */

/* Le sélecteur double la barre d'onglets : l'un ou l'autre, jamais les deux. */
.vues { display: none; }

@media (max-width: 900px) {
  .tabs { display: none; }

  .vues {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
  }
  .vues__lbl {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted);
  }
  .vues__sel {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--touch-min);
    padding: 0 .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .95rem;
    font-weight: 600;
  }
  .vues__sel:focus { outline: 0; border-color: var(--color-primary); box-shadow: var(--focus-ring); }

  /* Raccourci direct vers les alertes : la seule vue qui appelle une action
     immédiate mérite de rester visible sans ouvrir le sélecteur. */
  .vues__alerte {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    height: var(--touch-min);
    padding: 0 .7rem;
    border-radius: var(--radius);
    background: var(--color-danger);
    color: #fff;
    font-size: .78rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
  }
}

/* ---------------------------------------------------------- Plein écran */

.cc__icon--plein { width: auto; padding-inline: .6rem; gap: .4rem; }
.cc__icon-txt { display: none; }

@media (max-width: 900px) {
  /* Sur téléphone, la commande la plus utile de la page porte son nom. */
  .cc__icon-txt {
    display: inline;
    font-size: .78rem; font-weight: 600;
  }
}

/* Bouton de sortie : n'existe qu'en plein écran. */
.cc__sortie { display: none; }

.cc.is-full .cc__sortie {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: absolute;
  top: .75rem; right: .75rem;
  z-index: 20;
  height: var(--touch-min);
  padding: 0 .9rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .82rem; font-weight: 700;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.cc.is-full .cc__sortie:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 900px) {
  /* En plein écran, la carte occupe tout : plus de bandeau, plus de compteurs.
     C'est le sens même de la demande — voir la carte, pas ses accessoires.
     La feuille reste posée dessus pour atteindre un véhicule. */
  .cc.is-full {
    position: fixed; inset: 0; z-index: 900;
    padding: 0; min-height: 0;
    background: var(--color-bg);
  }
  .cc.is-full .cc__bar { display: none; }
  .cc.is-full .cc__body { height: 100dvh; }
  .cc.is-full .cc__map {
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .cc.is-full .cc__sortie { top: max(.75rem, env(safe-area-inset-top)); }
}