/* Be Fab Web — système de design « cockpit » (DESIGN_UI.md §1 et §4), nuit par défaut, jour sous [data-theme="day"], noir pur AMOLED sous
   [data-tone="amoled"]. Les jetons sont ceux de DesignTokens.kt (palette Cabine d'Android) ; aucune couleur en dur hors des jetons et des
   signaux routiers (--sign-*). Pas de backdrop-filter (coût GPU sous WebGL), pas de :has(), color-mix() ni @container (Safari 15).
   Sections : 1 jetons · 2 base · 3 coque et démarrage · 4 panneaux et en-têtes · 5 composants · 6 feuilles et barre du bas ·
   7 cockpit de guidage · 8 consentements, bandeaux, toasts, dialogues, pages de texte · 9 conduite et mouvement réduit.
   Le placement à l'accueil et au guidage est dans app-home.css, celui des écrans dans app-screens.css (chargés après ce fichier). */

/* ═══ 1. Jetons ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* NUIT = TnColors.Dark, valeurs exactes. Défaut, posé par applyTheme (data-theme="night"). */
  --bg: #0B111B; --panel: #151E2A; --panel-raised: #202D3D; --text: #F5F8FD; --muted: #B4C1D2; --edge: #667A96; --accent: #5B9CFF; --on-accent: #061220;
  --amber: #FFBA57; --on-amber: #1A0B00; --red: #FF6B7C; --on-danger: #1A0408; --ok: #4ADE80; --on-ok: #04200E; --report: #FF8A3D; --on-report: #1A0B00;
  --live: #FF6F96; --ring: #2F7DF6; --scrim: rgba(0, 0, 0, 0.55);
  /* ajouts web : décoratifs, jamais seuls porteurs d'un texte */
  --edge-soft: rgba(102, 122, 150, 0.42); --panel-hi: #1B2736; --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --grad-panel: linear-gradient(180deg, var(--panel-hi), var(--panel) 62%);
  --grad-cta: linear-gradient(180deg, #7BB0FF, #5B9CFF 55%, #3F86F0);
  --grad-report: linear-gradient(180deg, #FFA463, #FF8A3D 55%, #F0701F);
  --grad-danger: linear-gradient(180deg, #FF8795, #FF6B7C 55%, #F04A5E);
  --glow-accent: 0 0 0 1px rgba(91, 156, 255, 0.55), 0 0 20px rgba(47, 125, 246, 0.40);
  --glow-danger: 0 0 0 1px rgba(255, 107, 124, 0.6), 0 0 18px rgba(255, 107, 124, 0.30);
  --glow-warn: 0 0 0 1px rgba(255, 186, 87, 0.55), 0 0 16px rgba(255, 186, 87, 0.25);
  --glow-ok: 0 0 0 1px rgba(74, 222, 128, 0.5), 0 0 16px rgba(74, 222, 128, 0.22);
  --accent-soft: rgba(91, 156, 255, 0.16); --ok-soft: rgba(74, 222, 128, 0.14); --amber-soft: rgba(255, 186, 87, 0.14);
  --red-soft: rgba(255, 107, 124, 0.14); --report-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-float: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
  --shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.5);
  /* signaux routiers : FrSign (SignBanner.kt) et disque du limiteur */
  --sign-blue: #1F4E9E; --sign-green: #00875A; --sign-red: #D3221E; --sign-yellow: #F7B500; --sign-cyan: #009AD0; --sign-white: #FFFFFF;
  --sign-black: #1A1A1A; --sign-rim: #A5A8A6; --sign-grey: #C9CED6;
  --r-badge: 8px; --r-control: 12px; --r-card: 16px; --r-sheet: 24px; --touch: 48px; --bar-h: 64px; --credits-h: 48px; --hud-lift: 0px;
  --t-fast: 150ms; --t-std: 200ms; --t-slow: 250ms; --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --splash: #041C48;
  --font: Manrope, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
:root[data-theme="day"] {
  /* JOUR = TnColors.Light */
  --bg: #F3F6FA; --panel: #FFFFFF; --panel-raised: #E8EEF5; --text: #0E1C2B; --muted: #4A5D72; --edge: #6F8296; --accent: #1F5FD1; --on-accent: #FFFFFF;
  --amber: #8F5300; --on-amber: #FFFFFF; --red: #B4233A; --on-danger: #FFFFFF; --ok: #187538; --on-ok: #FFFFFF; --report: #B83C0A; --on-report: #FFFFFF;
  --live: #B91C55; --ring: #2F7DF6; --scrim: rgba(14, 28, 43, 0.40);
  --edge-soft: rgba(111, 130, 150, 0.35); --panel-hi: #FFFFFF; --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --grad-panel: linear-gradient(180deg, #FFFFFF, #F5F8FC);
  --grad-cta: linear-gradient(180deg, #2F6EDB, #1F5FD1 60%, #1A52B8);
  --grad-report: linear-gradient(180deg, #C84A12, #B83C0A 60%, #A33208);
  --grad-danger: linear-gradient(180deg, #C23048, #B4233A 60%, #9F1D32);
  --glow-accent: 0 0 0 2px rgba(31, 95, 209, 0.35); --glow-danger: 0 0 0 2px rgba(180, 35, 58, 0.30); --glow-warn: 0 0 0 2px rgba(143, 83, 0, 0.30);
  --glow-ok: 0 0 0 2px rgba(24, 117, 56, 0.30);
  --accent-soft: rgba(31, 95, 209, 0.10); --ok-soft: rgba(24, 117, 56, 0.10); --amber-soft: rgba(143, 83, 0, 0.10);
  --red-soft: rgba(180, 35, 58, 0.10); --report-soft: rgba(184, 60, 10, 0.10);
  --shadow: 0 4px 14px rgba(14, 28, 43, 0.14); --shadow-float: 0 6px 16px rgba(14, 28, 43, 0.18); --shadow-sheet: 0 -8px 24px rgba(14, 28, 43, 0.16);
  color-scheme: light;
}
:root[data-tone="amoled"] {
  /* AMOLED = TnColors.Amoled ; posé EN PLUS de data-theme="night" par applyTheme */
  --bg: #000000; --panel: #0A0F16; --panel-raised: #161F2B; --muted: #AEBBCC; --edge: #5E7290; --scrim: rgba(0, 0, 0, 0.65); --panel-hi: #10161F;
}

/* ═══ 2. Base ═════════════════════════════════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--bg, #0B111B); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 22px; font-weight: 400; -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Saisie : Safari ne laisse pas taper dans un champ sous user-select:none. Texte copiable : .selectable. */
input, textarea, [contenteditable="true"], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; text-align: inherit; }
a, [role="button"] { touch-action: manipulation; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; }
img { -webkit-user-drag: none; }
a.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; min-height: 48px; display: inline-flex; align-items: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Typographie : Manrope 400 / 600 / 700 seulement (jamais 800), tailles et graisses d'Android (TnType). Chiffres tabulaires : .num. */
.t-maneuver { font-size: 34px; line-height: 40px; font-weight: 700; }
.t-street { font-size: 22px; line-height: 28px; font-weight: 600; }
.t-title { font-size: 22px; line-height: 28px; font-weight: 700; }
.t-card { font-size: 18px; line-height: 24px; font-weight: 700; }
.t-body, .body { font-size: 16px; line-height: 22px; font-weight: 400; }
.t-button { font-size: 16px; line-height: 20px; font-weight: 600; }
.t-sec, .secondary { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); }
.t-cap { font-size: 13px; line-height: 18px; font-weight: 600; }
.t-badge { font-size: 12px; line-height: 16px; font-weight: 700; }
.muted { color: var(--muted); font-size: 14px; line-height: 20px; }
.small { font-size: 13px; line-height: 18px; }
.accent { color: var(--accent); }

/* ═══ 3. Coque et démarrage ═══════════════════════════════════════════════════════════════════════════════════════════ */
#app { position: fixed; inset: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
/* Clavier ouvert (viewport.js) : la coque et le dialogue du mot de passe (fixe, hors de #app) suivent la fenêtre visuelle ; la barre du bas et les bandeaux s'effacent. */
html.kb-open #app, html.kb-open .dialog-overlay { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100dvh); }
html.kb-open .bbar, html.kb-open .banners { display: none; }
/* Barre d'état translucide (apple-mobile-web-app-status-bar-style=black-translucent) : l'heure et la batterie sont blanches ; en thème jour elles
   tombent sur une carte ou un en-tête clairs (1,0:1). Un voile sombre dégradé les rend lisibles ; hauteur = zone sûre (nulle dans Safari). */
:root[data-theme="day"] body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-top); z-index: 70; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 17, 27, 0.8), rgba(11, 17, 27, 0));
}
#map { position: absolute; inset: 0; background: var(--bg); z-index: 0; isolation: isolate; }
body:not(.map-visible) #map { visibility: hidden; }
#screen { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* Les enfants de #screen reçoivent les appuis, SAUF le calque .hud (plein écran, transparent) : `#screen > *` (spécificité 1,0,0) l'emportait
   sur `.hud { pointer-events: none }` (0,1,0) et le HUD couvrait la carte entière (déplacement, pincement, appui sur un marqueur, « Crédits »).
   Seuls les enfants du HUD (boutons, cartes) sont actifs. test/css.test.mjs garde cette règle. */
#screen > :not(.hud) { pointer-events: auto; }

.boot {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; overflow: hidden; color: #F5F8FD;
  padding: calc(var(--safe-top) + 12vh) 24px calc(var(--safe-bottom) + 24px);
  background: linear-gradient(180deg, var(--splash) 0%, #0B111B 100%);
  transition: opacity var(--t-std) var(--ease);
}
.boot.is-done { opacity: 0; pointer-events: none; }
.boot-glow {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 12vh + 48px); width: 440px; height: 440px; margin: -220px 0 0 -220px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 125, 246, 0.25), rgba(47, 125, 246, 0)); animation: boot-glow 2.4s ease-in-out infinite alternate;
}
@keyframes boot-glow { from { opacity: 0.55; } to { opacity: 1; } }
.boot-logo { position: relative; width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(91, 156, 255, 0.55), 0 0 28px rgba(47, 125, 246, 0.5); }
.boot-title { position: relative; margin-top: 16px; font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.01em; color: #F5F8FD; }
.boot-title .wm-be { color: #F5F8FD; }
.boot-title .wm-fab { color: #5B9CFF; }
.boot-tagline { position: relative; margin-top: 8px; max-width: 320px; text-align: center; font-size: 14px; line-height: 20px; color: #B4C1D2; }
.boot-road {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 96px); width: 100%; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%);
}
.boot-progress { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 28px); width: min(240px, 62%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.boot-loading { font-size: 14px; line-height: 20px; color: #B4C1D2; }
/* Démarrage qui n'aboutit pas (boot-watchdog.js, après 8 s sans app-ready) : le chargement est remplacé par le message et « Recharger ». */
.boot-failed { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 28px); width: min(300px, 80%); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 12px; }
.boot-failed p { margin: 0; max-width: 300px; text-align: center; font-size: 16px; line-height: 22px; color: #F5F8FD; }
.boot-failed button {
  min-height: 48px; padding: 0 24px; border-radius: 12px; font-size: 16px; line-height: 20px; font-weight: 600; color: #061220; border: 0;
  background: linear-gradient(180deg, #7BB0FF, #5B9CFF 55%, #3F86F0);
}
.boot.is-failed .boot-failed { display: flex; }
.boot.is-failed .boot-progress { display: none; }
.noscript { padding: 24px; font-family: var(--font); font-size: 16px; line-height: 22px; color: var(--text); }

/* Logotype « Be Fab » : « Be » couleur du texte, « Fab » accent. Taille : --wm (px). */
.wordmark { display: inline-block; font-size: var(--wm, 38px); line-height: calc(var(--wm, 38px) * 1.16); font-weight: 700; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.wm-be { color: var(--text); }
.wm-fab { color: var(--accent); }

/* Barre de progression indéterminée (va-et-vient 1,4 s) ou déterminée (--p). */
.pbar { position: relative; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(47, 125, 246, 0.18); box-shadow: inset 0 0 0 1px var(--ring); }
.pbar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--accent), #7BB0FF); box-shadow: 0 0 10px rgba(91, 156, 255, 0.7); transition: width var(--t-std) var(--ease); }
.pbar-indeterminate .pbar-fill { width: 40%; transition: none; animation: pbar-slide 1.4s var(--ease) infinite alternate; }
@keyframes pbar-slide { from { transform: translateX(0); } to { transform: translateX(150%); } }

/* ═══ 4. Panneaux et en-têtes ═════════════════════════════════════════════════════════════════════════════════════════ */
.panel-scroll, .panel-chat {
  --px: 16px; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; background: var(--bg);
  padding: 0 calc(var(--safe-right) + var(--px)) calc(var(--safe-bottom) + 32px) calc(var(--safe-left) + var(--px));
}
.panel-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.panel-scroll > * { flex-shrink: 0; }
.panel-scroll > :first-child:not(.screen-header), .panel-chat > :first-child:not(.screen-header) { margin-top: calc(var(--safe-top) + 8px); }
.panel-chat { padding-bottom: calc(var(--safe-bottom) + 12px); gap: 8px; }

/* En-tête d'écran de 64 px : retour 48 · titre 22/28 · action ; pleine largeur et collant, filet bas. */
.screen-header {
  position: sticky; top: 0; z-index: 3; flex: 0 0 auto; display: grid; grid-template-columns: minmax(48px, auto) 1fr minmax(48px, auto); align-items: center; gap: 8px;
  height: calc(64px + var(--safe-top)); padding: var(--safe-top) calc(var(--safe-right) + 8px) 0 calc(var(--safe-left) + 8px);
  margin: 0 calc(-1 * (var(--safe-right) + var(--px))) 4px calc(-1 * (var(--safe-left) + var(--px)));
  background: var(--panel); border-bottom: 1px solid var(--edge-soft); box-shadow: var(--sheen);
}
.screen-title { font-size: 22px; line-height: 28px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-header .screen-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.panel-scroll > .screen-title, .panel-chat > .screen-title { text-align: left; white-space: normal; }
.header-spacer { display: block; width: 48px; height: 48px; }
.brand { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.brand-logo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; box-shadow: var(--glow-accent); }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 8px; text-align: center; }
.about-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: var(--glow-accent); margin-bottom: 8px; }
.about-hero p { max-width: 36ch; }

/* ═══ 5. Composants ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Icônes Material (masque CSS ; les règles par nom sont dans icons.css, chargé avant) */
.ico {
  display: inline-block; flex: 0 0 auto; width: var(--s, 24px); height: var(--s, 24px); vertical-align: middle; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
.mglyph { display: inline-flex; align-items: center; justify-content: center; width: var(--s, 48px); height: var(--s, 48px); }
.sprite { display: block; flex: 0 0 auto; width: var(--s, 40px); height: var(--s, 40px); object-fit: contain; pointer-events: none; }
.sprite-fallback { color: var(--muted); }

/* Disque d'icône : fond --panel-raised, anneau de 2 px de la couleur du ton (--d : diamètre) */
.idisc {
  --idc: var(--edge); flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--d, 40px); height: var(--d, 40px); border-radius: 50%;
  background: var(--panel-raised); border: 2px solid var(--idc); color: var(--idc);
}
.idisc-neutral { color: var(--text); }
.idisc-accent { --idc: var(--accent); }
.idisc-ok { --idc: var(--ok); }
.idisc-warn, .idisc-amber { --idc: var(--amber); }
.idisc-danger, .idisc-red { --idc: var(--red); }
.idisc-report { --idc: var(--report); }
.idisc-cyan { --idc: var(--sign-cyan); }
/* Panneau « interdit aux poids lourds » en CSS pur : disque blanc, anneau rouge de 4 px, camion noir, barre rouge */
.sign-hgv {
  position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--d, 48px); height: var(--d, 48px); overflow: hidden; border-radius: 50%;
  background: var(--sign-white); border: calc(var(--d, 48px) * 0.085) solid var(--sign-red); color: var(--sign-black);
}
.sign-hgv .sign-bar { position: absolute; left: 6%; right: 6%; top: 50%; height: calc(var(--d, 48px) * 0.085); margin-top: calc(var(--d, 48px) * -0.0425); background: var(--sign-red); transform: rotate(45deg); }

/* Cartes : dégradé vertical léger, liseré de lumière en haut, ombre ; bande de priorité de 6 px (TnPriorityCard) */
.card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-card);
  background: var(--grad-panel); border: 1px solid var(--edge-soft); box-shadow: var(--sheen), var(--shadow);
}
.card-title { font-size: 18px; line-height: 24px; font-weight: 700; }
.card-tap { cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.card-tap:active { transform: scale(0.99); }
.card-danger, .card-warn, .card-accent, .card-ok { overflow: hidden; padding-left: 22px; }
.card-danger::before, .card-warn::before, .card-accent::before, .card-ok::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--red); }
.card-warn::before { background: var(--amber); }
.card-accent::before { background: var(--accent); }
.card-ok::before { background: var(--ok); }
.card-accent { box-shadow: var(--sheen), var(--shadow), var(--glow-accent); }

/* Listes et lignes : 56 px, 72 px avec sous-titre ou élément de tête */
.list { display: flex; flex-direction: column; gap: 4px; }
.list-heading { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.list-cards { gap: 8px; }
.list-cards > .row { padding: 8px 16px; background: var(--grad-panel); border: 1px solid var(--edge-soft); border-radius: var(--r-card); box-shadow: var(--sheen), var(--shadow); }
.row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text); text-align: left; transition: background-color var(--t-fast) var(--ease);
}
.row-tall { min-height: 72px; }
button.row:active { background: var(--panel-raised); }
.row-active { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); box-shadow: inset 0 0 0 1px var(--accent); }
.row-unread .row-title { font-weight: 700; }
.row-leading { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--muted); }
.row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.row-subtitle { font-size: 14px; line-height: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-trailing { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.row-trailing-col { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.links { display: flex; flex-direction: column; }
.chips { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form .input { flex: 1 1 auto; }
.status-zone, .flags { display: flex; flex-direction: column; gap: 8px; }
.editor { display: flex; flex-direction: column; gap: 12px; }
.found { min-height: 8px; }
.uid { font-family: var(--mono); font-size: 14px; line-height: 20px; word-break: break-all; -webkit-user-select: all; user-select: all; background: var(--panel-raised); padding: 8px 10px; border-radius: 8px; }

/* Boutons : 48 px, 56 px en conduite ; appui = échelle .97 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 0 16px; border-radius: var(--r-control);
  border: 1px solid var(--edge); background: var(--grad-panel); color: var(--text); font-size: 16px; line-height: 20px; font-weight: 600; text-align: center;
  box-shadow: var(--sheen); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:active, .rbtn:active { transform: scale(0.97); }
/* Inactif : aplat neutre au texte atténué (≥ 4,5:1), jamais le dégradé coloré passé à 45 % d'opacité (un bouton « Envoyer » orange devenait brun). */
.btn:disabled { opacity: 1; cursor: default; transform: none; background: var(--panel-raised); color: var(--muted); border-color: var(--edge-soft); box-shadow: none; }
.btn-big { min-height: 56px; font-size: 17px; padding: 0 20px; }
.btn-icon { width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; }
.screen-header .btn-icon { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--grad-cta); color: var(--on-accent); border-color: transparent; box-shadow: var(--sheen), 0 6px 16px rgba(47, 125, 246, 0.35); }
.btn-secondary { background: var(--grad-panel); color: var(--text); border-color: var(--edge); }
.btn-quiet { background: transparent; color: var(--accent); border-color: transparent; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: transparent; box-shadow: none; }
.btn-danger { background: var(--grad-danger); color: var(--on-danger); border-color: transparent; box-shadow: var(--sheen), 0 6px 16px rgba(255, 107, 124, 0.3); }
.btn-report { background: var(--grad-report); color: var(--on-report); border-color: transparent; box-shadow: 0 8px 22px rgba(255, 138, 61, 0.35); }
.btn-amber { background: var(--amber); color: var(--on-amber); border-color: transparent; }
.btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn .ico { margin-left: -2px; }
.btn-icon .ico, .btn-ghost .ico { margin-left: 0; }

/* Boutons ronds (commandes de carte, fermer, actions) : 56 px (48 en feuille, 64 pour Signaler) */
.rbtn {
  position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; align-content: center; width: 56px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%;
  background: var(--grad-panel); color: var(--text); border: 1px solid var(--edge); box-shadow: var(--shadow-float);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rbtn-48 { width: 48px; height: 48px; min-width: 48px; }
.rbtn-64 { width: 64px; height: 64px; min-width: 64px; }
.rbtn-ico { display: grid; place-items: center; }
.rbtn-cap { margin-top: -1px; font-size: 12px; line-height: 14px; font-weight: 700; }
.rbtn.is-active { color: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-float), var(--glow-accent); }
.rbtn-accent { background: var(--grad-cta); color: var(--on-accent); border-color: transparent; }
.rbtn-report { background: var(--grad-report); color: var(--on-report); border-color: transparent; box-shadow: 0 8px 22px rgba(255, 138, 61, 0.4); }
.rbtn-danger { background: var(--grad-danger); color: var(--on-danger); border-color: transparent; }
.rbtn-plain { background: transparent; border-color: transparent; box-shadow: none; }
.rbtn-has-text { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 0 20px 0 16px; border-radius: 32px; }
.rbtn-text { font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.rbtn-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.zoomcap { flex: 0 0 auto; display: flex; flex-direction: column; width: 56px; height: 112px; overflow: hidden; border-radius: 28px; background: var(--grad-panel); border: 1px solid var(--edge); box-shadow: var(--shadow-float); }
.zoomcap .rbtn { width: 56px; min-width: 56px; height: 56px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.zoomcap-in { border-bottom: 1px solid var(--edge-soft); }

/* Puces : 40 px visibles dans une zone de 48 */
.chip {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 0 14px; border-radius: 20px;
  border: 1px solid var(--edge); background: var(--grad-panel); color: var(--text); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sheen); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip::after { content: ""; position: absolute; inset: -4px -2px; }
.chip:active { transform: scale(0.97); }
.chip-on { color: var(--accent); border-color: var(--accent); box-shadow: var(--sheen), var(--glow-accent); }
.chip-label { overflow: hidden; text-overflow: ellipsis; }
.chip-icon { display: inline-flex; }
.chip-link { color: var(--accent); }
.chip .ico { transition: transform var(--t-fast) var(--ease); }
.chip[aria-expanded="true"] .ico-expand_more, .banner-expander[aria-expanded="true"] .ico-expand_more { transform: rotate(180deg); }

/* Pastilles : 36 px (zone de 48 si bouton) */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 12px; border-radius: 18px;
  background: var(--panel); color: var(--text); border: 1px solid var(--edge-soft); box-shadow: var(--shadow); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
button.pill::after { content: ""; position: absolute; inset: -6px 0; }
.pill-lead { display: inline-flex; align-items: center; }
.pill-text { overflow: hidden; text-overflow: ellipsis; }
.pill-ok { background-image: linear-gradient(var(--ok-soft), var(--ok-soft)); border-color: var(--ok); color: var(--ok); }
.pill-warn { background-image: linear-gradient(var(--amber-soft), var(--amber-soft)); border-color: var(--amber); color: var(--amber); }
.pill-danger { background-image: linear-gradient(var(--red-soft), var(--red-soft)); border-color: var(--red); color: var(--red); }
.pill-accent { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); border-color: var(--accent); color: var(--accent); }
.dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--edge); }
.dot-ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot-warn { background: var(--amber); }
.dot-danger { background: var(--red); }
.dot-live { background: var(--live); box-shadow: 0 0 8px var(--live); }
.dot-muted { background: var(--edge); }

/* Champs : 16 px (Safari ne zoome pas), 48 px minimum */
.input {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; line-height: 22px; border-radius: var(--r-control); border: 1px solid var(--edge);
  background: var(--panel-raised); color: var(--text); -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--glow-accent); }
.input:disabled { opacity: 0.6; }
.textarea { min-height: 56px; resize: none; }
select.input {
  padding-right: 40px; text-overflow: ellipsis; white-space: nowrap; background-repeat: no-repeat; background-position: right 12px center; background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23B4C1D2' d='M480-345 240-585l56-56 184 184 184-184 56 56z'/%3E%3C/svg%3E");
}
:root[data-theme="day"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%234A5D72' d='M480-345 240-585l56-56 184 184 184-184 56 56z'/%3E%3C/svg%3E");
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 600; }
.field-hint { font-size: 13px; line-height: 18px; color: var(--muted); min-height: 18px; }
.hint-error { color: var(--red); } .hint-ok { color: var(--ok); } .hint-warn { color: var(--amber); }
.search-box { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 4px; }
.search-box .input { min-height: 56px; font-size: 17px; }

/* Interrupteur (piste 52×32, verte quand actif), segments, pastilles de texte, avis */
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); text-align: left; }
.switch { position: relative; flex: 0 0 auto; width: 52px; height: 32px; border-radius: 16px; background: var(--edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); transition: background-color var(--t-fast) var(--ease); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform var(--t-fast) var(--ease); }
.toggle[aria-checked="true"] .switch { background: var(--ok); }
.toggle[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented-col { flex-direction: column; flex-wrap: nowrap; }
.segmented-col .seg { flex: 0 0 auto; text-align: left; padding: 0 16px; }
.seg { flex: 1 1 auto; min-height: 48px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--edge); background: var(--grad-panel); color: var(--text); font-size: 15px; line-height: 20px; font-weight: 600; box-shadow: var(--sheen); }
.seg-on { background: var(--grad-cta); color: var(--on-accent); border-color: transparent; box-shadow: var(--sheen), 0 4px 12px rgba(47, 125, 246, 0.3); }
.badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: var(--r-badge); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.badge-neutral { background: var(--panel-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--edge-soft); }
.badge-accent { background: var(--accent); color: var(--on-accent); }
.badge-ok { background: var(--ok); color: var(--on-ok); }
.badge-red, .badge-danger { background: var(--red); color: var(--on-danger); }
.badge-amber, .badge-warn { background: var(--amber); color: var(--on-amber); }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.notice {
  position: relative; padding: 12px 14px 12px 46px; border-radius: var(--r-control); border: 1px solid var(--edge-soft); background: var(--panel-raised); color: var(--text);
  font-size: 15px; line-height: 21px;
}
.notice::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; background-color: var(--muted);
  -webkit-mask: url(icons/ui/info.svg) center / contain no-repeat; mask: url(icons/ui/info.svg) center / contain no-repeat;
}
.notice-warn { border-color: var(--amber); }
.notice-warn::before { background-color: var(--amber); -webkit-mask-image: url(icons/ui/warning.svg); mask-image: url(icons/ui/warning.svg); }
.notice-error { border-color: var(--red); }
.notice-error::before { background-color: var(--red); -webkit-mask-image: url(icons/ui/block.svg); mask-image: url(icons/ui/block.svg); }
.notice-ok { border-color: var(--ok); }
.notice-ok::before { background-color: var(--ok); -webkit-mask-image: url(icons/ui/check_circle.svg); mask-image: url(icons/ui/check_circle.svg); }
.spinner-row { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--muted); }
.spinner { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--edge); border-top-color: var(--accent); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Avatars : anneau de 3 px, initiale 18/24 ; sm 40 · md 56 · lg 96 ; avec sprite : 75 % du disque, 64 pt au plus */
.avatar {
  position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel-raised);
  border: 3px solid var(--ring); color: var(--text); font-size: 18px; line-height: 24px; font-weight: 700;
}
.avatar-md { width: 56px; height: 56px; }
.avatar-lg { width: 96px; height: 96px; font-size: 34px; line-height: 40px; box-shadow: var(--glow-accent); }
.ring-speaking { border-color: var(--ok); }
.ring-stale { border-color: var(--edge); opacity: 0.6; }
.avatar-init {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}

/* ═══ 6. Feuilles et barre du bas ═════════════════════════════════════════════════════════════════════════════════════ */
.sheet-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); }
.sheet {
  position: relative; width: 100%; max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column; background: var(--grad-panel); border: 1px solid var(--edge-soft); border-bottom: 0;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet);
  padding: 0 calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 16px);
  animation: sheet-in var(--t-slow) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 62vh; max-height: 62dvh; }
.sheet-handle { flex: 0 0 auto; height: 48px; display: grid; place-items: center; cursor: pointer; }
.sheet-handle::after { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--edge); }
.sheet-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: -8px; }
.sheet-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sheet-title { font-size: 22px; line-height: 28px; font-weight: 700; }
.sheet-subtitle { font-size: 14px; line-height: 20px; color: var(--muted); }
.sheet-close { margin-right: -8px; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.sheet-foot { flex: 0 0 auto; padding: 8px 0 0; }
.sheet-foot:empty { display: none; }
.sheet-head + .sheet-body { margin-top: 4px; }
/* Fondu en haut et en bas d'une feuille qui défile (dom.js watchScrollFade) : le contenu coupé par le pied collant ne laisse plus de tranche nette. */
.sheet-body.fade-bottom { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); }
.sheet-body.fade-top { -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px); mask-image: linear-gradient(180deg, transparent, #000 20px); }
.sheet-body.fade-top.fade-bottom {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20px, #000 calc(100% - 24px), transparent);
}
/* En-tête d'écran dans une feuille (trajet) : simple ligne, ni collant ni pleine largeur */
.sheet .screen-header { position: static; height: 56px; margin: 0 0 4px; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* Barre du bas : Itinéraire · Carte · Plus (64 px + zone sûre) ; l'élément courant est souligné d'un trait lumineux */
.bbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; height: calc(var(--bar-h) + var(--safe-bottom));
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-top: 1px solid var(--edge-soft);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3);
}
.bbar-item {
  position: relative; flex: 1 1 0; min-width: 48px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; color: var(--muted);
  font-size: 14px; line-height: 20px; font-weight: 600; transition: color var(--t-fast) var(--ease);
}
.bbar-item[aria-current] { color: var(--accent); font-weight: 700; }
.bbar-item[aria-current]::after { content: ""; position: absolute; bottom: 4px; width: 40px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bbar-icon { position: relative; display: grid; place-items: center; }
.bbar-badge {
  position: absolute; top: -4px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--panel);
}

/* ═══ 7. Cockpit de guidage ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* Écussons de route (SignBannerLogic.kt) : A blanc sur bleu (maquette), N rouge, D jaune, E vert, M cyan, C blanc à liseré */
.shield {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 15px; line-height: 1;
  font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.shield-sm { min-width: 26px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 12px; }
.shield-A { background: var(--sign-blue); color: var(--sign-white); box-shadow: inset 0 0 0 1.5px var(--sign-white); }
.shield-N { background: var(--sign-red); color: var(--sign-white); }
.shield-D { background: var(--sign-yellow); color: var(--sign-black); }
.shield-E { background: var(--sign-green); color: var(--sign-white); }
.shield-M { background: var(--sign-cyan); color: var(--sign-black); }
.shield-C { background: var(--sign-white); color: var(--sign-black); box-shadow: inset 0 0 0 1.5px var(--sign-rim); }
/* Panneau de direction : bleu autoroute, vert nationale ou européenne, blanc ailleurs ; première ligne en capitales */
.dsign { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
/* Deux lignes de texte au plus par ligne du panneau (« Bordeaux · Poitiers · Nantes - Nord » ne se coupait plus qu'en « … ») */
.dsign-line { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dsign-line:first-child { text-transform: uppercase; font-weight: 700; }
.dsign-blue { background: var(--sign-blue); color: var(--sign-white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.dsign-green { background: var(--sign-green); color: var(--sign-white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.dsign-white { background: var(--sign-white); color: var(--sign-black); box-shadow: inset 0 0 0 2px var(--sign-rim); }

/* Carte de manœuvre : bord de 2 px accent + halo ; glyphe de 64 px lumineux (le filtre est sur le parent : sur l'élément masqué il serait coupé) */
.mcard {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; color: var(--text); border: 2px solid var(--accent); border-radius: var(--r-card);
  background: var(--grad-panel); box-shadow: var(--sheen), var(--shadow), var(--glow-accent);
}
.mcard[data-state="offroute"] { border-color: var(--amber); box-shadow: var(--sheen), var(--shadow), var(--glow-warn); }
.mc-main { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.mc-glyph { display: grid; place-items: center; width: 64px; height: 64px; color: #EAF3FF; filter: drop-shadow(0 0 10px rgba(91, 156, 255, 0.7)); }
:root[data-theme="day"] .mc-glyph { color: var(--accent); filter: none; }
.mc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mc-dist { font-size: 34px; line-height: 40px; font-weight: 700; }
.mc-dist-text { font-size: 22px; line-height: 28px; }
.mc-road { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-shields { display: inline-flex; gap: 6px; }
.mc-street { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-instruction { font-size: 16px; line-height: 22px; color: var(--muted); overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mc-next { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--edge-soft); font-size: 14px; line-height: 20px; color: var(--muted); }
.mc-next-glyph { display: inline-flex; color: var(--text); }
.mc-next-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-next-dist { flex: 0 0 auto; font-weight: 700; color: var(--text); }

/* Barre d'arrivée : durée 28/34, « distance · heure », pastille de verdict, Arrêter 56 px */
.etabar {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--r-card);
  background: var(--grad-panel); border: 1px solid var(--edge-soft); box-shadow: var(--sheen), var(--shadow);
}
.eta-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.eta-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eta-dur { flex: 0 0 auto; font-size: 28px; line-height: 34px; font-weight: 700; white-space: nowrap; }
.eta-sub { font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eta-chip { flex: 0 1 auto; min-width: 0; display: inline-flex; }
/* Arrêter : 48 px, bord et croix rouges ; le premier appui l'arme (plein rouge « Confirmer l'arrêt » pendant 3 s), le second arrête (dom.js). */
.eta-stop { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border-color: var(--red); }
.eta-stop .ico { color: var(--red); }
.eta-stop.is-armed { border-color: transparent; }
.eta-stop.is-armed .ico { color: inherit; }
/* Armé, le libellé « Confirmer l'arrêt » est plus long : la pastille de verdict s'efface le temps de la confirmation (3 s) au lieu d'être écrasée. */
.etabar.is-stopping .eta-chip { display: none; }

/* Carte d'alerte : bande de priorité à gauche, une seule à l'écran ; danger = fond teinté de rouge et halo */
.acard { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 12px 8px 12px 22px; }
.acard.card-danger { background-image: linear-gradient(var(--red-soft), var(--red-soft)), var(--grad-panel); border-color: var(--red); box-shadow: var(--sheen), var(--shadow), var(--glow-danger); }
.acard.card-warn { background-image: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--grad-panel); border-color: var(--amber); box-shadow: var(--sheen), var(--shadow), var(--glow-warn); }
.acard.card-ok { background-image: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--grad-panel); }
.acard-lead { flex: 0 0 auto; }
.acard-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acard-title { font-size: 18px; line-height: 24px; font-weight: 700; }
.acard-shields { display: inline-flex; gap: 6px; }
.acard-detail { font-size: 14px; line-height: 20px; color: var(--muted); }
.acard-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.acard-close { margin: -4px -2px 0 0; }
.acard-action { border-color: var(--red); color: var(--text); }
.acard.card-warn .acard-action { border-color: var(--amber); }
.acard.card-accent .acard-action { border-color: var(--accent); }
.acard.card-ok .acard-action { border-color: var(--ok); }
.acard-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.acard-actions .btn { flex: 1 1 auto; }

/* Cadran de vitesse : disque de 80 px, disque gris du maximum du véhicule (jamais la limite de la route), légende dessous */
.sdial {
  position: relative; display: grid; place-items: center; align-content: center; width: 80px; height: 80px; border-radius: 50%;
  background: var(--panel); color: var(--text); border: 3px solid var(--edge); box-shadow: var(--shadow-float);
}
.sdial.is-over { border-color: var(--red); box-shadow: var(--shadow-float), var(--glow-danger); }
.sdial.is-over .sdial-val { color: var(--red); }
.sdial-val { font-size: 30px; line-height: 32px; font-weight: 700; }
.sdial-unit { font-size: 14px; line-height: 16px; font-weight: 600; color: var(--muted); }
.sdial-sign {
  position: absolute; right: -30px; bottom: 2px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sign-grey);
  border: 4px solid var(--sign-rim); color: var(--sign-black); font-size: 18px; line-height: 20px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.sdial-cap {
  position: absolute; left: 0; top: calc(100% + 8px); padding: 0 8px; border-radius: 9px; background: var(--panel); border: 1px solid var(--edge-soft);
  font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; color: var(--text);
}

/* Pastille du véhicule actif : sprite, « titre · gabarit », flèche */
.vpill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 48px; padding: 0 10px 0 6px; border-radius: 24px; color: var(--text);
  background: var(--grad-panel); border: 1px solid var(--accent); box-shadow: var(--shadow-float), var(--glow-accent);
  transition: transform var(--t-fast) var(--ease);
}
.vpill:active { transform: scale(0.98); }
.vpill-art { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--panel-raised); }
.vpill-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; overflow: hidden; white-space: nowrap; }
.vpill-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 20px; font-weight: 700; }
.vpill-sep, .vpill-size { flex: 0 0 auto; font-size: 14px; line-height: 20px; color: var(--muted); }
.vpill-sep { margin: 0 6px; }
.vpill > .ico { color: var(--muted); }

/* ═══ 8. Consentements, bandeaux, toasts, dialogues, pages de texte ═══════════════════════════════════════════════════ */
.consent-head { display: flex; align-items: center; gap: 12px; }
.consent-head .card-title { flex: 1 1 auto; min-width: 0; }
.consent-more { display: flex; }
.collapsible { display: flex; flex-direction: column; gap: 8px; }
.collapsible.is-collapsed { display: none; }
.consent-choice { padding-top: 4px; border-top: 1px solid var(--edge-soft); }
.consent-age { display: flex; flex-direction: column; gap: 8px; }
.consent-sub { font-size: 16px; line-height: 22px; font-weight: 700; }
/* Barre d'actions collante en bas d'un écran défilant : fond plein, fondu au-dessus par un masque (pas de dégradé vers « transparent » :
   Safari l'interpole parfois en gris). Le décalage négatif de `bottom` compense le bas du panneau (les offsets collants suivent son contenu). */
.sticky-foot {
  position: sticky; bottom: calc(-1 * (var(--safe-bottom) + 32px)); z-index: 2; background: var(--bg);
  margin: 4px calc(-1 * (var(--safe-right) + var(--px))) calc(-1 * (var(--safe-bottom) + 32px)) calc(-1 * (var(--safe-left) + var(--px)));
  padding: 8px calc(var(--safe-right) + var(--px)) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + var(--px));
}
.sticky-foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none; background: var(--bg);
  -webkit-mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, 0)); mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, 0));
}

/* Bandeaux : hors ligne, mise à jour, installation compacte (au-dessus de la barre sur la carte, en haut ailleurs) */
.banners {
  position: absolute; left: 0; right: 0; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  padding: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 12px) 0 calc(var(--safe-left) + 12px);
}
.banners > * { pointer-events: auto; }
/* Pile du bas, du bas vers le haut : barre, bannières, cartes flottantes, boutons et cadran (app-home.css les soulève de --banner-h puis --hud-lift),
   crédits « i » tout en haut de la pile : jamais masqués. Pendant le guidage : barre d'arrivée, alerte, bannières. */
body.map-visible .banners { top: auto; padding-top: 0; bottom: calc(var(--safe-bottom) + var(--bar-h) + 8px); }
body.guiding .banners { bottom: calc(var(--safe-bottom) + var(--eta-h, 92px) + var(--hud-lift, 0px) + 12px); }
body.sheet-screen .banners { top: 0; bottom: auto; padding-top: calc(var(--safe-top) + 8px); }
/* Écrans pleins (compte, véhicule, messages…) : les bandeaux occupent le haut et l'écran est repoussé dessous (main.js : --banners-h) au lieu
   de recouvrir l'en-tête et le bouton Retour. La zone sûre est déjà prise par le bandeau : à l'intérieur, --safe-top vaut 0. */
body.banners-top .banners { padding-bottom: 8px; }
body.banners-top #screen { top: var(--banners-h, 0px); --safe-top: 0px; }
/* Feuille modale ouverte (Plus, « pourquoi invisible ? ») : les bandeaux passent sous elle. */
body.modal-open .banners { z-index: 0; }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--grad-panel);
  border: 1px solid var(--edge-soft); box-shadow: var(--shadow-float), var(--sheen); font-size: 15px; line-height: 21px;
}
.banner-msg { flex: 1 1 0; min-width: 0; }
.banner-offline { border-color: var(--amber); }
.banner-offline > .ico { color: var(--amber); }
.banner-update { border-color: var(--accent); }
.banner-update > .ico { color: var(--accent); }
.banner-install { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 4px 4px 12px 12px; }
.banner-install > .banner-warning, .banner-install > .banner-note, .banner-install > .collapsible { margin-right: 8px; }
.banner-head { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.banner-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; }
.banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.banner-text strong { font-size: 16px; line-height: 22px; font-weight: 700; }
.banner-text span { font-size: 13px; line-height: 18px; color: var(--muted); }
.banner-warning { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-control); border: 1px solid var(--amber); background-image: linear-gradient(var(--amber-soft), var(--amber-soft)); font-size: 14px; line-height: 20px; }
.banner-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.banner-title { font-size: 15px; line-height: 21px; font-weight: 700; }
.banner-body { font-size: 14px; line-height: 20px; color: var(--muted); }
.banner-steps { padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Toasts : pilule de 48 px, icône du type, deux au plus */
.toasts {
  position: absolute; left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + var(--bar-h) + 12px); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
/* Guidage : pas de barre du bas, la barre d'arrivée et l'alerte occupent le bas (un toast les recouvrait). Feuilles ancrées (trajet,
   signaler) : en haut, sous le « i » des crédits, pour ne pas tomber sur le pied de la feuille. */
body.guiding .toasts { bottom: calc(var(--safe-bottom) + var(--eta-h, 92px) + var(--hud-lift, 0px) + var(--banner-h, 0px) + 16px); }
body.sheet-screen .toasts { bottom: auto; top: max(calc(var(--safe-top) + 64px), calc(var(--banners-h, 0px) + 8px)); }
.toast {
  position: relative; display: flex; align-items: center; max-width: min(520px, 100%); min-height: 48px; padding: 10px 18px 10px 46px; border-radius: 24px; background: var(--panel-raised); color: var(--text);
  border: 1px solid var(--edge-soft); box-shadow: var(--shadow); font-size: 15px; line-height: 21px; animation: toast-in var(--t-std) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background-color: var(--accent);
  -webkit-mask: url(icons/ui/info.svg) center / contain no-repeat; mask: url(icons/ui/info.svg) center / contain no-repeat;
}
.toast-error { border-color: var(--red); }
.toast-error::before { background-color: var(--red); -webkit-mask-image: url(icons/ui/error.svg); mask-image: url(icons/ui/error.svg); }
.toast-warn { border-color: var(--amber); }
.toast-warn::before { background-color: var(--amber); -webkit-mask-image: url(icons/ui/warning.svg); mask-image: url(icons/ui/warning.svg); }
.toast-ok { border-color: var(--ok); }
.toast-ok::before { background-color: var(--ok); -webkit-mask-image: url(icons/ui/check_circle.svg); mask-image: url(icons/ui/check_circle.svg); }

/* Dialogue de confirmation : rayon 24, titre 22/28, boutons de 56 px */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--scrim);
  padding: 16px calc(var(--safe-right) + 16px) 16px calc(var(--safe-left) + 16px);
}
.dialog {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px;
  background: var(--grad-panel); border: 1px solid var(--edge-soft); border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet);
}
.dialog-title { font-size: 22px; line-height: 28px; font-weight: 700; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn { flex: 1 1 0; }

/* Pages de texte statiques (licences.html) : défilement du body, colonne de 720 px */
body.doc-page { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.doc { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding: calc(var(--safe-top) + 24px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 32px) calc(var(--safe-left) + 16px); }
.doc-head { display: flex; align-items: center; gap: 14px; }
.doc-logo { border-radius: 14px; box-shadow: var(--glow-accent); }
.doc-wordmark { --wm: 38px; }
.doc-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.doc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--grad-panel); border: 1px solid var(--edge-soft); box-shadow: var(--sheen), var(--shadow); }
.doc-list { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--muted); }
.doc .link { display: inline; min-height: 0; }
.doc .doc-links .link { display: inline-flex; min-height: 48px; }
.doc-pre { margin: 0; padding: 12px; max-height: 320px; overflow: auto; border-radius: var(--r-control); background: var(--panel-raised); color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; word-break: break-word; -webkit-overflow-scrolling: touch; }

/* Colonne de contenu centrée sur écran large (tablette, hors conception) */
@media (min-width: 420px) {
  .mc-dist { font-size: 39px; line-height: 44px; }
}
@media (max-width: 370px) {
  .eta-chip .pill-text { display: none; }
}
@media (min-width: 700px) {
  .panel-scroll, .panel-chat { --px: max(16px, calc(50% - 330px)); }
  .screen-header { margin-left: 0; margin-right: 0; border: 1px solid var(--edge-soft); border-radius: var(--r-control); height: 64px; margin-top: calc(var(--safe-top) + 8px); padding-top: 0; }
  .sheet { max-width: 520px; border-radius: var(--r-sheet); border-bottom: 1px solid var(--edge-soft); }
  .sheet-dock { left: auto; right: 16px; bottom: 16px; }
  .sheet-overlay { align-items: center; }
  .sticky-foot { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* Chiffres tabulaires pour l'heure, la distance et la vitesse (déclaré en dernier : il l'emporte sur les raccourcis font) */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ═══ 9. Conduite et mouvement réduit ═════════════════════════════════════════════════════════════════════════════════ */
/* body.driving (posé par main.js d'après isDriving) : cibles de 56 px, aucune animation décorative, libellé du FAB masqué (disque seul) */
body.driving { --t-fast: 0ms; --t-std: 0ms; --t-slow: 0ms; }
body.driving .btn, body.driving .chip, body.driving .row, body.driving .seg, body.driving .toggle { min-height: 56px; }
body.driving .rbtn-has-text { width: 64px; padding: 0; border-radius: 50%; }
body.driving .rbtn-text { display: none; }
body.driving .boot-glow, body.driving .pbar-indeterminate .pbar-fill, body.driving .toast, body.driving .sheet { animation: none; }
body.driving .input { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-std: 0ms; --t-slow: 0ms; }
  .boot-glow, .pbar-indeterminate .pbar-fill, .toast, .sheet { animation: none; }
  .spinner { animation-duration: 2s; }
}