/* Be Fab Web — styles de l'accueil et du guidage (lot B) : .hud*, .mk-*, surcharges .maplibregl-*.
   Chargé après app.css : à spécificité égale, ces règles l'emportent. Jetons et composants : app.css (DESIGN_UI.md §1, §4, §8).
   Ce fichier PLACE les composants de app.css (roundButton, zoomCapsule, speedDial, vehiclePill, maneuverCard, etaBar, alertCard,
   bottomBar, sheet) à l'accueil et au guidage et dessine les marqueurs de carte ; il n'invente aucune couleur : jetons seulement.
   Variables : --hud-lift (hauteur mesurée des cartes visibles + 12), --banner-h (bannières au-dessus de la barre), --eta-h (barre
   d'arrivée du guidage, mesurée), --bar-h (64), --credits-h (44). */
:root { --eta-h: 92px; --hud-lift: 0px; --banner-h: 0px; }

/* ── Calque HUD : plein écran, transparent aux appuis sauf ses enfants ─────────────────────────────────────────────── */
/* `#screen > .hud` (1,1,0) : même si une règle `#screen > …` redonnait les appuis aux enfants de #screen, le calque plein écran les laisse à la carte. */
#screen > .hud, .hud { position: absolute; inset: 0; display: block; padding: 0; gap: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top, .hud-guide-top {
  position: absolute; top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
  left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 12px); right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none;
}
.hud-top > *, .hud-guide-top > * { pointer-events: auto; }
.hud-top .vpill { align-self: flex-start; max-width: 100%; }

/* Pilule de recherche : 56 px, rayon 28, icône d'accent ; inactive en conduite (aucune saisie au volant). */
.hud .search-pill {
  width: 100%; min-height: 56px; padding: 0 20px; border-radius: 28px; justify-content: flex-start; gap: 12px;
  background: var(--grad-panel, var(--panel)); border: 1px solid var(--edge-soft); color: var(--text);
  box-shadow: var(--sheen, none), var(--shadow-float, var(--shadow)); font: 700 16px/22px Manrope, -apple-system, "SF Pro Text", system-ui, sans-serif;
  text-align: left;
}
.hud .search-pill .ico { color: var(--accent); }
.hud .search-pill .btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .search-pill:disabled { opacity: 0.6; box-shadow: var(--shadow); }
.hud-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.hud-chips > *, .hud-chips .vis-slot > * { pointer-events: auto; }
.vis-slot { display: inline-flex; }
/* Compteurs « icône + nombre » (la phrase complète est le libellé vocal) : la pastille de visibilité et les deux compteurs tiennent sur une ligne. */
.hud-count { font: 700 14px/20px Manrope, -apple-system, system-ui, sans-serif; min-height: 32px; padding: 0 12px 0 10px; gap: 6px; display: inline-flex; align-items: center; }
.hud-count .ico { color: var(--muted); }

/* ── Colonne de droite : fond de carte, voix, ma position, zoom, Signaler (ancrée au-dessus de la barre) ─────────── */
.hud-right {
  position: absolute; right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px);
  bottom: calc(var(--bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px + var(--banner-h, 0px) + var(--hud-lift, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none;
}
.hud-right > *, .hud-right .hud-slot > .rbtn { pointer-events: auto; }
.hud-slot { position: relative; display: flex; justify-content: flex-end; pointer-events: none; }
.hud-right .rbtn-report { align-self: flex-end; }
.rbtn.is-muted { color: var(--red); border-color: var(--red); }
.rbtn.attention { color: var(--amber); border-color: var(--amber); box-shadow: var(--shadow-float), var(--glow-warn); }
/* Bulle de 1,2 s avec le nom du nouveau fond de carte, à gauche du bouton. */
.map-bubble {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 18px;
  background: var(--panel-raised); border: 1px solid var(--edge-soft); box-shadow: var(--shadow); color: var(--text); font: 700 14px/20px Manrope, system-ui, sans-serif;
}
/* Place comptée (home.js et guidance.js mesurent la hauteur libre) : sans la capsule + / − (le pincement suffit), puis sans voix ni position. */
.hud-tier-tight .hud-right .zoomcap, .hud-tier-min .hud-right .zoomcap, .hud-tier-min .hud-right .hud-voice, .hud-tier-min .hud-right .hud-gps { display: none; }
/* Place très comptée (applyRoom) : plus de cadran sous 170 px libres, Signaler seul sous 140 px. */
.hud-no-dial .hud-left { display: none; }
.hud-tier-fab .hud-right .hud-slot { display: none; }

/* ── Bas gauche : cadran de vitesse (au-dessus des crédits) ──────────────────────────────────────────────────────── */
.hud-left {
  position: absolute; left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 12px);
  bottom: calc(var(--bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--credits-h, 44px) + 38px + var(--banner-h, 0px) + var(--hud-lift, 0px));
  pointer-events: none;
}
.hud-left > * { pointer-events: auto; }

/* ── Cartes flottantes au-dessus de la barre : position, trajet préparé, fiche d'un marqueur ─────────────────────── */
.hud-cards {
  position: absolute; left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 12px); right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px);
  bottom: calc(var(--bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px + var(--banner-h, 0px));
  display: flex; flex-direction: column; gap: 12px; margin: 0; pointer-events: none; max-height: 52dvh; overflow: hidden;
}
.hud-cards > * { pointer-events: auto; }
.hud-card .actions { flex-direction: row; flex-wrap: wrap; }
.hud-card-row { display: flex; align-items: flex-start; gap: 12px; }
.hud-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.marker-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marker-line .sprite { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.marker-text { display: flex; flex-direction: column; min-width: 0; }
.marker-text > * { overflow: hidden; text-overflow: ellipsis; }

/* ── Barre du bas (Itinéraire / Carte / Plus) et feuille Plus : la barre reste visible sous la feuille ──────────── */
.hud .bbar, .screen-plus .bbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.plus-overlay {
  position: absolute; inset: 0 0 calc(var(--bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) 0; z-index: 20;
  display: flex; align-items: flex-end; background: var(--scrim);
}
/* La feuille laisse voir la carte voilée en haut (appui = fermer) : 92 % de la hauteur libre au plus (les neuf lignes et la version tiennent,
   la carte voilée garde 60 px au-dessus), au-delà les lignes défilent sous un fondu. */
.plus-overlay > .sheet { width: 100%; max-height: 92%; padding-bottom: 16px; display: flex; flex-direction: column; }
.plus-overlay .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Neuf lignes en 72 px sortaient de la feuille (Conditions, À propos et la version coupées sans indice) : 56 px, 60 avec un sous-titre. */
.plus-list { display: flex; flex-direction: column; gap: 2px; }
.plus-list .row { min-height: 56px; }
.plus-version { text-align: center; padding: 8px 0 0; }
.status-sheet .sheet-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; }
.status-sheet .actions { flex-direction: column; }

/* Carte de manœuvre : le panneau de direction reste dans la carte (lignes tronquées par « … »), jamais de débordement à droite. */
.mcard .mc-road, .mcard .mc-panel { min-width: 0; max-width: 100%; }
.mcard .dsign { display: block; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.mcard .dsign-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }

/* ── Guidage : carte de manœuvre en haut, alerte et barre d'arrivée en bas (pas de barre du bas pendant le guidage) ─ */
.guidance-notices { display: flex; flex-direction: column; gap: 8px; }
.voice-pill { align-self: flex-start; min-height: 48px; }
.hud-guidance .hud-right { bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--eta-h, 92px) + 20px + var(--hud-lift, 0px) + var(--banner-h, 0px)); }
.hud-guidance .hud-left { bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--eta-h, 92px) + var(--credits-h, 44px) + 46px + var(--hud-lift, 0px) + var(--banner-h, 0px)); }
.hud-alerts {
  position: absolute; left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 12px); right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px);
  bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--eta-h, 92px) + 16px); pointer-events: none;
}
.hud-alerts > * { pointer-events: auto; }
.hud-alerts .acard > .actions { margin-top: 8px; }
.hud-eta {
  position: absolute; left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 12px); right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 12px);
  bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px);
}

/* ── Crédits : bouton « i » compact de 44 px, toujours visible au-dessus de la barre (licences) ───────────────────── */
.maplibregl-ctrl-bottom-left {
  left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 8px);
  bottom: calc(var(--bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 4px + var(--banner-h, 0px) + var(--hud-lift, 0px));
}
body.guiding .maplibregl-ctrl-bottom-left { bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--eta-h, 92px) + 12px + var(--hud-lift, 0px) + var(--banner-h, 0px)); }
/* Écrans à feuille ancrée (trajet, signaler) : la feuille couvre le bas de la carte, le « i » des crédits passe en haut à gauche (jamais masqué). */
body.sheet-screen .maplibregl-ctrl-bottom-left { top: max(calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px), calc(var(--banners-h, 0px) + 4px)); bottom: auto; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact {
  margin: 0; padding: 0; min-height: 48px; min-width: 48px; box-sizing: border-box; border-radius: 24px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--edge-soft); box-shadow: var(--shadow); font: 600 12px/16px Manrope, -apple-system, system-ui, sans-serif;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 6px 14px 6px 52px; display: flex; align-items: center; max-width: calc(100vw - 24px); }
.maplibregl-ctrl-attrib a { color: var(--muted); }
.maplibregl-ctrl-attrib-button { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 24px; background-color: transparent; background-size: 22px; background-position: center; background-repeat: no-repeat; }
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { background-color: var(--edge-soft); }
:root:not([data-theme="day"]) .maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-canvas:focus { outline: none; }

/* ── Marqueurs de carte (jamais `position` sur la racine : MapLibre la place en absolu) ─────────────────────────── */
.maplibregl-marker { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
/* Moi : disque 56 (sprite 40) sur anneau de 3 px, halo, flèche de cap posée sur l'anneau. */
.mk-me { width: 56px; height: 56px; z-index: 6; pointer-events: none; }
.mk-me-halo { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(47, 125, 246, 0.25); }
.mk-me-halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(47, 125, 246, 0.3); animation: mk-pulse 2s ease-out infinite; }
.mk-me-body { position: absolute; inset: 0; border-radius: 50%; background: var(--panel-raised); border: 3px solid var(--ring); display: grid; place-items: center; box-shadow: var(--shadow-float); overflow: hidden; }
.mk-me-body .sprite { width: 40px; height: 40px; object-fit: contain; }
.mk-me-body .ico { color: var(--accent); }
.mk-me-wedge { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; color: var(--accent); transform-origin: 50% 50%; }
.mk-me-wedge .ico { margin-top: -12px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
@keyframes mk-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.65); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
body.driving .mk-me-halo::after, body:not(.map-visible) .mk-me-halo::after { animation: none; opacity: 0; }
/* Collègue : disque 44 (sprite 34), initiale du pseudo, libellé sous le disque (hors du cadre : le centre reste sur la position). */
.mk-driver { width: 44px; height: 44px; z-index: 4; cursor: pointer; }
.mk-driver-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--panel); border: 3px solid var(--ring); display: grid; place-items: center; box-shadow: var(--shadow); overflow: hidden; }
.mk-driver-disc .sprite { width: 34px; height: 34px; object-fit: contain; }
.mk-driver-disc .idisc, .mk-driver-disc .ico { color: var(--accent); }
.mk-initial { position: absolute; top: -4px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 11px/18px Manrope, system-ui, sans-serif; text-align: center; border: 1px solid var(--bg); }
.mk-label { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); max-width: 110px; padding: 0 6px; border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); font: 700 12px/16px Manrope, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stale { opacity: 0.6; }
.mk-stale .mk-driver-disc { border-color: var(--edge); }
/* Signalement : disque de 40 à la couleur du type (reportDisc), coche verte sur les miens. */
.mk-report { width: 40px; height: 40px; z-index: 3; cursor: pointer; }
/* Zone de toucher de 48 px autour des disques de 40 et 44 px (cibles de la carte : 48 px au moins). */
.mk-report::after, .mk-driver::after, .mk-dest::after, .mk-stop::after { content: ""; position: absolute; inset: -4px; }
.mk-report > .idisc, .mk-report > .sign-hgv { position: absolute; inset: 0; }
.mk-check { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: var(--on-ok); display: grid; place-items: center; border: 1px solid var(--bg); }
.mk-report:not(.mk-mine) .mk-check { display: none; }
.mk-mine > .idisc { border-color: var(--ok); }
/* Destination (drapeau sur rouge) et arrêt conseillé (P sur accent) : bord blanc de 2, pointe vers le bas, ancrés par le bas. */
.mk-dest, .mk-stop { cursor: pointer; z-index: 4; }
.mk-dest { width: 36px; height: 44px; }
.mk-stop { width: 40px; height: 48px; }
.mk-pin { position: absolute; top: 0; left: 0; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; box-shadow: var(--shadow-float); }
.mk-pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; background: inherit; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateX(-50%) rotate(45deg); z-index: -1; }
.mk-dest .mk-pin { width: 36px; height: 36px; background: var(--red); }
.mk-stop .mk-pin { width: 40px; height: 40px; background: var(--accent); }
.mk-dest .mk-pin .ico { color: #fff; }
.mk-stop .mk-pin .ico { color: #fff; }
/* Étiquette de durée d'une alternative : pilule de 28, active en accent ; zone d'appui élargie sans changer le rendu. */
.mk-tag {
  height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--edge); background: var(--panel); color: var(--text);
  font: 700 13px/26px Manrope, -apple-system, system-ui, sans-serif; box-shadow: var(--shadow); white-space: nowrap; z-index: 2; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.mk-tag::after { content: ""; position: absolute; inset: -10px -6px; }
.mk-tag-active { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: var(--shadow), var(--glow-accent); z-index: 3; }

/* ── Conduite : cibles de 56, pastilles lisibles, libellé Signaler masqué (disque seul) ──────────────────────────── */
body.driving .hud-chips .pill { min-height: 56px; }
body.driving .hud .search-pill { opacity: 0.55; }
body.driving .hud-right .rbtn-text { display: none; }
@media (prefers-reduced-motion: reduce) { .mk-me-halo::after { animation: none; opacity: 0; } }