/* Design system Drivo — palette officielle (primaire #e6485c, police DM Sans). */
:root {
  --primary: #e6485c;
  --primary-hover: #d7192d;
  --primary-pressed: #a01323;
  --primary-50: #ffefec;
  --primary-100: #fde0da;
  --primary-200: #f8c2b8;
  --primary-ink: #841c05;
  --primary-text: #d7192d;
  --onb-street: rgba(255, 255, 255, 0.8);

  --ink: #292b2e;
  --ink-2: #56575a;
  --muted: #56575a;
  --muted-2: #8a9099;

  --surface: #ffffff;
  --bg: #f8f8fb;
  --line: #e4e6ea;
  --line-strong: #ccd0d7;
  --track: #eef0f3;

  --success: #1db77a;
  --success-bright: #48ec86;
  --success-50: #e8fbef;
  --warning: #f5a524;
  --warning-50: #fff5e3;
  --warning-ink: #8a5a00;
  --danger: #d7192d;
  --danger-50: #ffefec;
  --info: #002968;
  --info-50: #ebf3ff;
  --info-100: #ddecfc;
  --gradient-hero: linear-gradient(156deg, #bfebff -21.92%, #f9eef8 53.4%, #ffccb0 131.92%);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(41, 43, 46, 0.04);
  --shadow: 0 4px 16px rgba(41, 43, 46, 0.06);
  --shadow-lg: 0 20px 60px rgba(41, 43, 46, 0.18);
  --shadow-primary: none;

  --gutter: 20px;
  --topbar-h: 60px;
  --tabbar-h: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Alias utilisés par les composants existants */
  --brand: var(--primary);
  --brand-press: var(--primary-hover);
  --brand-dark: var(--primary-pressed);
  --brand-light: var(--primary-50);
  --on-brand: #ffffff;
  --ink-3: var(--muted-2);
  --bg-2: var(--bg);
  --bg-3: var(--track);
  --border: var(--line);
  --accent: var(--info);

  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 380px) { :root { --gutter: 16px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1f2f5; --ink-2: #b4b8bf; --muted: #b4b8bf; --muted-2: #8a9099;
    --surface: #1d1e21; --bg: #25272b; --track: #303238; --line: #34363c; --line-strong: #4a4d55;
    --primary-50: #3a1a20; --primary-100: #4a1f27; --success-50: #0f2e22; --warning-50: #33260d;
    --danger-50: #3a1a1c; --info-50: #14203a; --warning-ink: #ffc46b;
    --gradient-hero: linear-gradient(156deg, #16324a -21.92%, #2a1d2c 53.4%, #4a2a1f 131.92%);
    --primary-text: #ff8a73; --onb-street: rgba(255, 255, 255, 0.1);
    --primary-ink: #ffb3a3; /* étiquettes (.tag « Nouveau chauffeur », « Votre prix ») lisibles sur fond sombre */
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--track); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

.app {
  position: relative; max-width: 480px; height: 100dvh; margin: 0 auto;
  background: var(--surface); overflow: hidden;
}
#map { position: absolute; inset: 0; z-index: 0; }
.maplibregl-map { font-family: inherit; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-bottom-right { bottom: auto; top: 64px; }
.app .maplibregl-ctrl-bottom-right { top: calc(64px + env(safe-area-inset-top)); right: 4px; }

/* ---------- barre du haut ---------- */
.topbar {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 500;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.round-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 10px rgba(41, 43, 46, 0.08); display: grid; place-items: center; font-size: 18px;
}
.pill {
  background: var(--surface); border-radius: 999px; padding: 10px 14px; font-weight: 600; font-size: 14px;
  box-shadow: 0 2px 10px rgba(41, 43, 46, 0.08); display: inline-flex; align-items: center; gap: 8px;
}
.spacer { flex: 1; }

/* ---------- feuille du bas ---------- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 600;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 78dvh; overflow-y: auto;
}
.sheet::before {
  content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--bg-3);
  margin: 0 auto 12px;
}
.sheet h2 { font-size: 22px; line-height: 1.2; margin: 4px 0 12px; font-weight: 800; letter-spacing: -0.02em; }
.sheet h3 { font-size: 16px; margin: 16px 0 8px; font-weight: 700; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- champs ---------- */
.field {
  display: flex; align-items: center; gap: 12px; background: var(--bg-2); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 8px; border: 2px solid transparent; width: 100%; text-align: left;
}
.field.active { border-color: var(--primary); }
.field input, .field select { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; min-width: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* Départ = rouge de marque (personne qui hèle), arrivée = encre (drapeaux à damier) : mêmes codes que les pins. */
.dot.a { background: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
.dot.b { background: var(--ink); }
.dot.glyph { width: 26px; height: 26px; border-radius: 9px; box-shadow: none; display: grid; place-items: center; color: #fff; --ic-on: var(--primary); }
.dot.glyph.b { color: var(--surface); --ic-on: var(--ink); }
.field .label { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .placeholder { color: var(--ink-3); }
.suggestions { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin: -4px 0 8px; overflow: hidden; }
.suggestions button { display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.suggestions button:last-child { border-bottom: 0; }
.suggestions button:hover { background: var(--bg-2); }

/* ---------- catégories ---------- */
.classes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.classes::-webkit-scrollbar { display: none; }
.class-chip {
  flex: none; min-width: 92px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2);
  text-align: left; border: 2px solid transparent;
}
.class-chip.active { background: var(--primary-50); border-color: var(--primary); }
.class-chip .ico { font-size: 22px; line-height: 1; position: relative; display: inline-block; }
/* Catégorie climatisée : pastille flocon en haut à droite du pictogramme (remplace la ligne « Climatisé »). */
.class-chip .ac-badge { position: absolute; top: -6px; right: -7px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: #1a73e8; color: #fff; border: 2px solid var(--bg-2); box-sizing: content-box; }
.class-chip.active .ac-badge { border-color: var(--primary-50); }
.class-chip .ac-badge svg.ic { vertical-align: 0; }
.class-chip .name { font-weight: 700; font-size: 14px; margin-top: 4px; }
.class-chip .price { font-size: 13px; color: var(--ink-2); }
.class-chip .range { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-range { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- prix négocié ---------- */
.price-box { background: var(--bg-2); border-radius: var(--radius); padding: 14px; margin: 6px 0 10px; text-align: center; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-step {
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface); font-size: 26px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(41, 43, 46, 0.08);
}
.price-step:disabled { opacity: .35; cursor: default; }
.price-value { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; border: 0; background: transparent; text-align: center; width: 100%; outline: none; }
.price-hint { font-size: 13px; color: var(--ink-2); margin-top: 4px; min-height: 18px; }
.price-hint.good { color: var(--success); }
.price-hint.warn { color: var(--warning-ink); }
.price-reco { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.price-reco button { text-decoration: underline; font-weight: 600; }

.options { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.opt {
  background: var(--bg-2); border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
}
.opt.on { background: var(--primary); color: var(--on-brand); }

/* ---------- boutons ---------- */
.btn {
  display: block; width: 100%; padding: 16px; border-radius: 14px; font-weight: 700; font-size: 17px; text-align: center;
  transition: transform .06s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-brand { background: var(--primary); color: var(--on-brand); }
.btn-brand:active:not(:disabled) { background: var(--primary-pressed); }
.btn-brand:hover:not(:disabled) { background: var(--brand-press); }
.btn-dark { background: var(--ink); color: var(--surface); }
.btn-ghost { background: var(--bg-2); }
.btn-danger { background: transparent; color: var(--danger); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }
.btn-sm { padding: 10px 12px; font-size: 14px; border-radius: 12px; }

/* ---------- radar ---------- */
.radar-status { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.radar-spinner { width: 36px; height: 36px; flex: none; position: relative; }
.radar-spinner::before, .radar-spinner::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand);
  animation: pulse 1.8s ease-out infinite;
}
.radar-spinner::after { animation-delay: .9s; }
@keyframes pulse { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.radar-status .t { font-weight: 800; font-size: 18px; }
.radar-status .s { font-size: 13px; color: var(--ink-2); }
.offer-panel { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.offer-panel .v { font-size: 22px; font-weight: 800; }
.raise-row { display: flex; gap: 8px; margin-bottom: 12px; }
.raise-row button { flex: 1; background: var(--bg-2); border-radius: 12px; padding: 10px 6px; font-weight: 700; font-size: 14px; }
.raise-row button:disabled { opacity: .4; }

.map-pulse { border-radius: 50%; background: rgba(230, 72, 92, .14); border: 2px solid rgba(230, 72, 92, .6); animation: mapPulse 2s ease-out infinite; }
@keyframes mapPulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* ---------- cartes (offres / demandes) ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin-bottom: 10px; position: relative; overflow: hidden; animation: slideIn .25s ease-out; }
@keyframes slideIn { from { transform: translateY(12px); opacity: 0; } }
.card-head { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-weight: 800; flex: none; }
.card .name { font-weight: 700; }
.card .meta { font-size: 13px; color: var(--ink-2); }
.card .price { margin-left: auto; text-align: right; }
.card .price .v { font-size: 20px; font-weight: 800; }
.card .price .d { font-size: 12px; color: var(--ink-2); }
.card .actions { display: flex; gap: 8px; margin-top: 12px; }
.card .actions .btn { padding: 12px; font-size: 15px; }
.countdown { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--brand); transition: width 1s linear; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-50); color: var(--primary-ink); }
.tag.up { background: var(--warning-50); color: var(--warning-ink); }
.route-line { font-size: 14px; margin-top: 10px; }
.route-line div { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.counter-row { display: flex; gap: 6px; margin-top: 8px; }
.counter-row button { flex: 1; background: var(--bg-2); border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: 14px; }
.counter-row button:hover { background: var(--bg-3); }

/* ---------- divers ---------- */
.empty { text-align: center; padding: 24px 8px; color: var(--ink-2); }
.empty .big { font-size: 40px; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 700; }
.stars { display: flex; justify-content: center; gap: 6px; margin: 12px 0; }
.stars button { font-size: 38px; color: var(--bg-3); line-height: 1; }
.stars button.on { color: var(--warning); }
.banner { background: var(--brand-light); border-radius: 14px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.banner button { margin-left: auto; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.toast {
  position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 2000; background: var(--ink); color: var(--surface);
  padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; max-width: 90vw; box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease-out;
}
.toast.error { background: var(--danger); color: #fff; }
/* Logo « Trajet » : départ plein, route, arrivée cerclée */
.logo { font-weight: 900; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: center; }
.logo::before { content: ''; width: 1em; height: 1em; margin-right: 0.18em; flex: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='18 14 70 70'><path d='M30 72C30 54 70 60 70 44' fill='none' stroke='%23e6485c' stroke-width='9' stroke-linecap='round'/><circle cx='30' cy='72' r='9' fill='%23e6485c'/><circle cx='70' cy='30' r='11' fill='none' stroke='%23e6485c' stroke-width='6'/></svg>") center / contain no-repeat; }
.logo span { background: var(--primary); color: var(--on-brand); padding: 0 0.22em 0.04em; border-radius: 0.28em; margin-left: 0.12em; }
.login { position: absolute; inset: 0; z-index: 1000; background: var(--surface); padding: calc(48px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; }
.login .tagline { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 28px 0 8px; letter-spacing: -0.02em; }
.login .grow { flex: 1; }
.tabs { display: flex; gap: 6px; background: var(--bg-2); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.tabs button { flex: 1; padding: 9px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(41, 43, 46, 0.08); }
.switch { width: 52px; height: 30px; border-radius: 999px; background: var(--bg-3); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(22px); }
/* Pins façon leader du marché : tête ronde + tige + point au sol ; l'élément = le point au sol (ancre centrée). */
.pin { --pin: var(--primary); position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--pin); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pin.b { --pin: #292b2e; }
.pin-stem { position: absolute; left: 50%; bottom: 100%; width: 3px; height: 22px; margin-left: -1.5px; background: var(--pin); border-radius: 2px 2px 0 0; }
.pin-head {
  position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%);
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; background: var(--pin); color: #fff;
  display: grid; place-items: center; align-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); white-space: nowrap;
  animation: pinDrop .35s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.pin-head i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
/* Sans ETA : tête carrée arrondie avec le pictogramme (départ / arrivée). */
.pin-head.glyph { width: 36px; min-width: 0; height: 36px; padding: 0; border-radius: 12px; --ic-on: var(--pin); border: 2px solid #fff; box-sizing: border-box; }
.pin.has-label .pin-head { min-width: 44px; height: 44px; border-radius: 22px; }
.pin-head b { font-size: 17px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.pin-head small { font-size: 10px; line-height: 1; font-weight: 600; opacity: .9; margin-top: 1px; }
@keyframes pinDrop { from { transform: translate(-50%, -14px); opacity: 0; } }
/* Arrêts intermédiaires numérotés (Drivo.stopPinEl) : à venir (contour), en cours (plein + halo), fait (gris, coche). */
.pin.stop-pin { --pin: #5b5f66; }
.pin.stop-pin .pin-head { width: 30px; min-width: 0; height: 30px; padding: 0; border-radius: 50%; bottom: calc(100% + 14px); border: 2px solid #fff; box-sizing: border-box; --ic-on: #fff; }
.pin.stop-pin .pin-stem { height: 18px; }
.pin.stop-pin .pin-head b { font-size: 14px; }
.pin.stop-upcoming .pin-head { background: #fff; color: #292b2e; border: 2.5px solid #292b2e; }
.pin.stop-upcoming { --pin: #292b2e; }
.pin.stop-current { --pin: var(--primary); }
.pin.stop-current .pin-head { box-shadow: 0 0 0 5px rgba(230, 72, 92, .28), 0 4px 10px rgba(0, 0, 0, .25); }
.pin.stop-done { --pin: #9aa0a8; opacity: .9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pin.stop-upcoming .pin-head { background: #1d1e21; color: #f1f2f5; border-color: #f1f2f5; }
  :root:not([data-theme="light"]) .pin.stop-upcoming { --pin: #f1f2f5; }
}
/* Approche d'un arrêt (app chauffeur) : bandeau « Vous arrivez à l'arrêt N » en haut de l'écran (stops-ui.js). */
.stop-approach { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 2600; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #292b2e; color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-weight: 700; animation: stopIn .25s ease-out; }
.stop-approach .sa-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.stop-approach .sa-t { display: flex; flex-direction: column; min-width: 0; }
.stop-approach .sa-t small { font-weight: 500; opacity: .8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.navigating .stop-approach { top: calc(130px + env(safe-area-inset-top)); } /* sous la carte de guidage */
@keyframes stopIn { from { transform: translateY(-12px); opacity: 0; } }
/* Ma position : point rouge bordé de blanc, halo de précision discret */
.me-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.me-dot span { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(32, 32, 32, .06); border: 1px solid rgba(0, 0, 0, .08); z-index: -1; pointer-events: none; }

.fare-details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; margin: -2px 0 10px; font-size: 14px; }
.fare-details .kv { font-size: 14px; padding: 7px 0; }
.fare-details .note { font-size: 12px; color: var(--ink-2); padding: 8px 0; line-height: 1.45; }
.link-btn { font-size: 13px; font-weight: 700; text-decoration: underline; color: var(--ink-2); }

.rating-label { text-align: center; font-weight: 700; margin: -4px 0 10px; }
.rating-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.rating-tags .small { width: 100%; text-align: center; }
.rating-comment { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg); font-size: 15px; resize: none; margin-bottom: 10px; }
.rating-warn { text-align: center; }

.overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(20, 20, 22, .5); display: flex; align-items: flex-end; justify-content: center; animation: dmFade .18s ease-out; }
.overlay-card { background: var(--surface); width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto; border-radius: 28px 28px 0 0;
  padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom)); animation: dmUp .26s cubic-bezier(.2, .9, .3, 1); box-shadow: var(--shadow-lg); }
.overlay-card::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 14px; }
.overlay-card > h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 700px) { .overlay { align-items: center; } .overlay-card { border-radius: 24px; max-width: 440px; } .overlay-card::before { display: none; } }
.dist { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; margin: 3px 0; }
.dist div { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.dist i { display: block; height: 100%; background: var(--brand); }
.rating-state { border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rating-state.good, .rating-state.new { background: var(--brand-light); }
.rating-state.warning { background: var(--warning-50); color: var(--warning-ink); }
.rating-state.critical { background: var(--danger-50); color: var(--danger); }

.choice-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 14px 12px; margin: 0 -12px; width: calc(100% + 24px); border-radius: 14px; border-bottom: 0; font-size: 16px; font-weight: 600; transition: background .15s; }
.choice-row:hover:not(:disabled) { background: var(--bg); }
.choice-row + .choice-row { box-shadow: 0 -1px 0 var(--line); }
.choice-row .small { font-weight: 400; }
.choice-row:disabled { opacity: .4; }
.choice-row b { white-space: nowrap; }
.momo-box { background: var(--bg-2); border-radius: 14px; padding: 10px 12px; margin: -4px 0 12px; display: grid; gap: 8px; }
.momo-box .row { display: flex; gap: 8px; }
.momo-box select, .momo-box input { flex: 1; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px; background: var(--bg); font-size: 15px; min-width: 0; }
.pay-status { border-radius: 14px; padding: 12px 14px; margin: 10px 0; font-size: 14px; }
.pay-status.pending { background: #fff1db; color: #a45a00; }
.pay-status.success { background: var(--brand-light); }
.pay-status.failed { background: #fde8e8; color: #b42318; }
.wait-timer { font-variant-numeric: tabular-nums; font-weight: 700; }

.vehicle-marker { line-height: 0; }
.fleet-car { position: relative; }
.fleet-car::after { content: ''; position: absolute; inset: -5px; border-radius: 14px; border: 2.5px solid transparent; }
.fleet-car[data-state="online"]::after { border-color: var(--success); }
.fleet-car[data-state="trip"]::after { border-color: var(--primary); }
.fleet-car[data-state="offline"] { opacity: .5; filter: grayscale(1); }
.nav-card { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 550;
  background: var(--ink); color: var(--bg); border-radius: 18px; padding: 12px 14px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.nav-card .arrow { font-size: 30px; width: 40px; text-align: center; }
.nav-card .nav-dist { font-size: 22px; font-weight: 800; white-space: nowrap; }
.nav-card .nav-instr { font-size: 15px; opacity: .9; }
body.navigating .toast { top: calc(130px + env(safe-area-inset-top)); }
.eta-strip { display: flex; justify-content: space-between; background: var(--bg-2); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; font-weight: 700; }
.eta-strip span { font-weight: 500; color: var(--ink-2); font-size: 13px; display: block; }
.safety-card { background: var(--bg-2); border-radius: 14px; padding: 10px 12px; margin: 0 0 10px; font-size: 14px; display: grid; gap: 4px; }
.safety-card .row { display: flex; gap: 8px; align-items: center; }
.plate { font-family: ui-monospace, Menlo, monospace; font-weight: 800; background: #fff; color: #141414; border: 2px solid #141414; border-radius: 6px; padding: 1px 6px; letter-spacing: .06em; white-space: nowrap; }
a.btn { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.sound-btn { font-size: 18px; }

/* ================= Onboarding (public/js/onboarding.js) ================= */
.onb { position: absolute; inset: 0; z-index: 1000; background: var(--surface); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.onb-screen {
  min-height: 100%; display: flex; flex-direction: column; margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) calc(16px + env(safe-area-inset-bottom));
}
.onb-body { flex: 1; display: flex; flex-direction: column; padding-top: 20px; }
.onb-title { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.onb-sub { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 10px 0 24px; }
.onb-foot {
  position: sticky; bottom: 0; display: grid; gap: 10px; padding-top: 20px; margin-top: 16px;
  background: linear-gradient(to bottom, transparent, var(--surface) 20px);
}
.onb-foot .btn { text-decoration: none; }
.onb-alt, .onb-legal { margin: 2px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.nowrap { white-space: nowrap; }

/* barre du haut : retour + progression */
.onb-top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.onb-back {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; flex: none;
  transition: background .15s;
}
.onb-back:hover { background: var(--track); }
.onb-back svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.onb-screen[data-form="profile"] .onb-back { visibility: hidden; }
.onb-progress { flex: 1; display: flex; gap: 6px; }
.onb-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--track); transition: background .3s; }
.onb-progress span.on { background: var(--primary); }
.onb-top-sp { width: 44px; flex: none; }

/* accueil */
.onb-welcome { padding-top: 0; }
.onb-hero {
  position: relative; overflow: hidden; margin: 0 calc(-1 * var(--gutter));
  height: clamp(230px, 40dvh, 330px); background: var(--gradient-hero); border-radius: 0 0 28px 28px;
}
.onb-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.onb-streets path { stroke: var(--onb-street); stroke-width: 14; }
.onb-streets path.thin { stroke-width: 7; opacity: .75; }
.onb-route { stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: onbDraw 1.4s .2s cubic-bezier(.6, 0, .3, 1) backwards; }
.onb-start { fill: var(--primary); }
.onb-end { fill: #fff; stroke: var(--primary); stroke-width: 6; animation: onbPop .35s 1.5s backwards; }
@keyframes onbDraw { from { stroke-dashoffset: 1; } }
@keyframes onbPop { from { transform: scale(0); } }
.onb-end { transform-box: fill-box; transform-origin: center; }
.onb-chip {
  position: absolute; display: grid; gap: 1px; padding: 9px 13px; border-radius: 14px; background: #fff; color: #292b2e;
  box-shadow: 0 8px 24px rgba(41, 43, 46, 0.14); animation: onbChip .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.onb-chip small { font-size: 11px; color: #56575a; font-weight: 500; }
.onb-chip b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.onb-chip-a { right: 6%; bottom: 12%; animation-delay: 1.2s; }
.onb-chip-a b { color: var(--primary-hover); }
.onb-chip-b { left: 6%; top: calc(14% + env(safe-area-inset-top)); animation-delay: 1.7s; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.onb-chip-b small, .onb-chip-b b { grid-column: 2; }
.onb-dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(29, 183, 122, 0.18); }
@keyframes onbChip { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.onb-welcome .onb-body { padding-top: 24px; }
.onb-welcome .logo { font-size: 26px; margin-bottom: 14px; }
.onb-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; }
.onb-points li { display: flex; gap: 14px; align-items: flex-start; }
.onb-points b { display: block; font-size: 15px; font-weight: 700; }
.onb-points span:not(.onb-ico) { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 1px; }
.onb-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-50); display: grid; place-items: center; flex: none; }
.onb-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* numéro */
.onb-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.onb-phone {
  display: flex; align-items: stretch; height: 60px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.onb-phone:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.onb-phone.err { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(215, 25, 45, 0.12); }
.onb-cc { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--line); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.onb-flag {
  width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: linear-gradient(90deg, #007a5e 0 33.3%, #ce1126 33.3% 66.6%, #fcd116 66.6%);
}
.onb-phone input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 0 14px;
  font-size: 20px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.onb-phone input::placeholder { color: var(--muted-2); font-weight: 500; }
.onb-msg { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.onb-msg.bad { color: var(--danger); }
.onb-demo {
  align-self: flex-start; margin-top: 12px; padding: 8px 12px; border-radius: 999px;
  background: var(--primary-50); color: var(--primary-text); font-size: 13px; font-weight: 700;
}
.onb-demo:hover { background: var(--primary-100); }
.onb-link { color: var(--primary-text); font-weight: 700; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; }

/* code SMS */
.onb-otp { position: relative; width: 100%; max-width: 336px; }
.onb-otp input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px;
  color: transparent; caret-color: transparent; z-index: 1; cursor: pointer;
}
.onb-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.onb-cells span {
  height: 68px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.onb-cells span.cur { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.onb-otp.err .onb-cells span { border-color: var(--danger); }
.onb-otp.err .onb-cells { animation: onbShake .35s; }
@keyframes onbShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.onb-resend { margin: 0; text-align: center; font-size: 14px; color: var(--ink-2); min-height: 22px; font-variant-numeric: tabular-nums; }

/* profil */
.onb-fields { display: grid; gap: 14px; }
.onb-f label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.onb-f label em { font-style: normal; font-weight: 500; color: var(--muted-2); }
.onb-f input {
  width: 100%; height: 54px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line-strong);
  background: var(--surface); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.onb-f input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.onb-f.err input { border-color: var(--danger); }
.onb-ref summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--primary-text); list-style: none; padding: 4px 0; }
.onb-ref summary::-webkit-details-marker { display: none; }
.onb-ref summary::before { content: '+ '; }
.onb-ref[open] summary::before { content: '− '; }
.onb-ref[open] summary { margin-bottom: 10px; }
.onb-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.onb-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--primary); }
.onb-check.err span { color: var(--danger); }
.onb-status { background: var(--bg); border-radius: 16px; padding: 4px 16px; }
.onb .badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--track); color: var(--ink-2); }
.onb .badge.amber { background: var(--warning-50); color: var(--warning-ink); }
.onb .badge.green { background: var(--success-50); color: var(--success); }
.onb .badge.red { background: var(--danger-50); color: var(--primary-text); }

/* bouton en cours */
.btn.is-busy { opacity: .85; }
.btn.is-busy span::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px;
  border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: onbSpin .7s linear infinite;
}
@keyframes onbSpin { to { transform: rotate(360deg); } }
.onb :focus-visible { outline: 3px solid rgba(230, 72, 92, 0.45); outline-offset: 2px; }
/* les champs ont déjà leur propre anneau de focus */
.onb-otp input:focus-visible, .onb-phone input:focus-visible, .onb-f input:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .onb-route, .onb-end, .onb-chip, .onb-otp.err .onb-cells { animation: none; }
}
@media (max-height: 640px) {
  .onb-hero { height: 200px; }
  .onb-points { gap: 12px; margin-top: 16px; }
  .onb-title { font-size: 24px; }
}

/* accueil : scènes animées, une par point (onboarding.js, SCENES). Seuls transform et opacity sont animés ;
   l'état de repos de chaque élément est l'image fixe affichée avec « réduire les animations ». */
.onb-hero {
  --ob-road: #a3aab4; --ob-lane: #fff; --ob-ink: #292b2e; --ob-card: #fff; --ob-line: #292b2e; --ob-line2: #d5d9df;
  --ob-hill: rgba(255, 255, 255, .55); --ob-leaf: #a8d8b9; --ob-trunk: #c4a489; --ob-glass: #d7ecf8; --ob-rain: #6f9fd0;
  --ob-gold: #f2b441; --ob-gold2: #f9d88c; --ob-bill: #fff6e3; --ob-billt: #3f7d52; --ob-walkway: rgba(255, 255, 255, .5);
  --ob-bldg: rgba(41, 43, 46, .1); --ob-cloud: #fff; --ob-fig: #56575a; --ob-fig2: #8a9099;
}
@media (prefers-color-scheme: dark) {
  .onb-hero {
    --ob-road: #3a3d44; --ob-lane: rgba(255, 255, 255, .55); --ob-ink: #0f1012; --ob-card: #2a2c31; --ob-line: #b4b8bf; --ob-line2: #4a4d55;
    --ob-hill: rgba(255, 255, 255, .06); --ob-leaf: #2f5a45; --ob-trunk: #5a4a3c; --ob-glass: #51687b; --ob-gold2: #c98e1f;
    --ob-bill: #3b3629; --ob-billt: #9fd3b4; --ob-walkway: rgba(255, 255, 255, .06); --ob-bldg: rgba(255, 255, 255, .08);
    --ob-cloud: #5a5e67; --ob-fig: #c9ccd2; --ob-fig2: #8a9099;
  }
}
.onb-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.onb-scene.on { opacity: 1; visibility: visible; transition: opacity .45s; }
.onb-scene-art { position: absolute; inset: 0; }
.onb-scene:not(.on) * { animation-play-state: paused; }
.onb-scene .onb-chip-a { bottom: auto; top: calc(36% + env(safe-area-inset-top)); }
.onb-map .ob-road { fill: var(--ob-road); }
.ob-lane { fill: none; stroke: var(--ob-lane); stroke-width: 4; stroke-dasharray: 18 14; stroke-linecap: round; }
.ob-lanes { animation: obLane .45s linear infinite; }
.ob-far { animation: obFar 14s linear infinite; }
.ob-hill { fill: var(--ob-hill); }
.ob-leaf { fill: var(--ob-leaf); }
.ob-trunk { fill: var(--ob-trunk); }
.ob-body { fill: var(--primary); }
.ob-glass { fill: var(--ob-glass); }
.ob-lamp { fill: #ffd98a; }
.ob-tyre { fill: var(--ob-ink); }
.ob-hub { fill: #d9dce2; }
.ob-spoke { stroke: #8a9099; stroke-width: 2; }
.ob-spin, .ob-shield, .ob-badge, .ob-tap { transform-box: fill-box; transform-origin: center; }
.ob-drive .ob-spin, .ob-moto .ob-spin { animation: obSpin .45s linear infinite; }
.ob-bob { animation: obBob .6s ease-in-out infinite alternate; }
.ob-wind { fill: none; stroke: var(--ob-lane); stroke-width: 3; stroke-linecap: round; }
.ob-speed { opacity: .8; animation: obWind .5s linear infinite; }
.ob-moto { animation: obZip 4.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.ob-motof { fill: none; stroke: var(--ob-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ob-helmet { fill: var(--primary); }
.ob-cloud { fill: var(--ob-cloud); }
.ob-drop { stroke: var(--ob-rain); stroke-width: 3; stroke-linecap: round; animation: obRain .9s linear infinite; }
.ob-phone { fill: var(--ob-ink); }
.ob-screen, .ob-bubw { fill: var(--ob-card); }
.ob-line { fill: var(--ob-line); }
.ob-line2, .ob-key { fill: var(--ob-line2); }
.ob-linew { fill: rgba(255, 255, 255, .9); }
.ob-keyg { stroke: var(--ob-line); stroke-width: 2.5; stroke-linecap: round; }
.ob-price { font: 800 14px var(--font); fill: var(--ob-line); text-anchor: middle; }
.ob-pa { animation: obPa 4s infinite; }
.ob-pb { opacity: 0; fill: var(--primary); animation: obPb 4s infinite; }
.ob-tap { fill: none; stroke: var(--primary); stroke-width: 3; opacity: 0; animation: obTap 4s infinite; }
.ob-pill, .ob-pinb, .ob-bubr, .ob-shieldb { fill: var(--primary); }
.ob-pillt { font: 800 13px var(--font); fill: #fff; text-anchor: middle; }
.ob-float { animation: obBounce 1.8s ease-in-out infinite; }
.ob-walkway { fill: var(--ob-walkway); }
.ob-bldg { fill: var(--ob-bldg); }
.ob-fig { fill: var(--ob-fig); }
.ob-fig2 { fill: var(--ob-fig2); }
.ob-leg { stroke: var(--ob-fig); stroke-width: 3; stroke-linecap: round; }
.ob-you { fill: var(--primary-pressed); }
.ob-step { animation: obBob .3s ease-in-out infinite alternate; }
.ob-join { animation: obJoin 4.4s ease-in-out infinite; }
.ob-join2 { animation: obJoin2 4.4s ease-in-out 1.5s infinite backwards; }
.ob-pin { animation: obBounce 1.6s ease-in-out infinite; }
.ob-pinc { fill: #fff; }
.ob-badge, .ob-shield { animation: obPulse 1.8s ease-in-out infinite; }
.ob-bub { transform-box: fill-box; }
.ob-bub1 { transform-origin: 0 100%; animation: obBub1 6s infinite; }
.ob-bub2 { transform-origin: 100% 100%; animation: obBub2 6s infinite; }
.ob-note { animation: obNote 6s ease-in-out infinite; }
.ob-bill { fill: var(--ob-bill); stroke: #7bb38a; stroke-width: 2; }
.ob-billc { fill: none; stroke: #7bb38a; stroke-width: 1.2; stroke-dasharray: 3 3; }
.ob-billt { font: 800 12px var(--font); fill: var(--ob-billt); text-anchor: middle; }
.ob-gold { fill: var(--ob-gold); }
.ob-gold2 { fill: var(--ob-gold2); }
.ob-coin { animation: obCoin 6s ease-in-out infinite; }
.ob-cash .ob-note { animation-duration: 4s; }
.ob-cash .ob-coin { animation-duration: 4s; }
.ob-route { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ob-car2 { transform: translate(200px, 160px); animation: obPath 6s linear infinite; }
.ob-carc { fill: var(--primary); stroke: #fff; stroke-width: 3; }
.ob-card2 { fill: #fff; }
.ob-drop-pin { animation: obPinDrop 6s ease-out infinite; }
.ob-check { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ob-ring { fill: none; stroke: var(--primary); stroke-width: 3; opacity: .3; transform-box: fill-box; transform-origin: center; animation: obRing 1.8s ease-out infinite; }
@keyframes obLane { to { transform: translateX(-32px); } }
@keyframes obFar { to { transform: translateX(-360px); } }
@keyframes obSpin { to { transform: rotate(360deg); } }
@keyframes obBob { to { transform: translateY(-1.5px); } }
@keyframes obWind { from { transform: translateX(8px); opacity: 1; } to { transform: translateX(-22px); opacity: 0; } }
@keyframes obZip { 0% { transform: translateX(-140px); } 55%, 100% { transform: translateX(440px); } }
@keyframes obRain { 0% { transform: translate(0, -10px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-5px, 26px); opacity: 0; } }
@keyframes obPa { 0%, 40%, 100% { opacity: 1; } 48%, 92% { opacity: 0; } }
@keyframes obPb { 0%, 40%, 100% { opacity: 0; } 48%, 92% { opacity: 1; } }
@keyframes obTap { 0%, 32% { opacity: 0; transform: scale(.8); } 38% { opacity: 1; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes obBounce { 50% { transform: translateY(-6px); } }
@keyframes obPulse { 50% { transform: scale(1.08); } }
@keyframes obJoin {
  0% { transform: translateX(-130px); opacity: 0; } 10% { opacity: 1; } 62% { transform: translateX(62px); opacity: 1; }
  72% { transform: translate(80px, -12px); opacity: 1; } 80%, 100% { transform: translate(90px, -4px); opacity: 0; }
}
@keyframes obJoin2 {
  0% { transform: translateX(-98px); opacity: 0; } 10% { opacity: 1; } 62% { transform: translateX(94px); opacity: 1; }
  72% { transform: translate(112px, -12px); opacity: 1; } 80%, 100% { transform: translate(122px, -4px); opacity: 0; }
}
@keyframes obBub1 { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.08); opacity: 1; } 10%, 88% { transform: scale(1); opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes obBub2 { 0%, 16% { transform: scale(0); opacity: 0; } 22% { transform: scale(1.08); opacity: 1; } 26%, 88% { transform: scale(1); opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes obNote { 0%, 34% { transform: translateX(-70px); opacity: 0; } 40% { transform: translateX(-60px); opacity: 1; } 56% { transform: translateX(80px); opacity: 1; } 62%, 100% { transform: translateX(90px); opacity: 0; } }
@keyframes obCoin { 0%, 58% { transform: translate(90px, 0); opacity: 0; } 62% { transform: translate(84px, 0); opacity: 1; } 72% { transform: translate(20px, -22px); } 82% { transform: translate(-50px, 0); opacity: 1; } 90%, 100% { transform: translate(-56px, 0); opacity: 0; } }
@keyframes obPath {
  0% { transform: translate(70px, 215px); } 13.3% { transform: translate(70px, 160px); } 44.8% { transform: translate(200px, 160px); }
  58.2% { transform: translate(200px, 105px); } 80%, 100% { transform: translate(272px, 105px); }
}
@keyframes obPinDrop { 0% { transform: translateY(-60px); opacity: 0; } 8% { transform: translateY(0); opacity: 1; } 12% { transform: translateY(-10px); } 16% { transform: translateY(0); } 19% { transform: translateY(-3px); } 22%, 100% { transform: translateY(0); } }
@keyframes obRing { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
/* points de l'accueil : un seul visible à la fois (celui de la scène), points de navigation dessous */
.onb-caps { grid-template-areas: 'cap'; margin-top: 18px; }
.onb-caps li { grid-area: cap; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.onb-caps li.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.onb-dots { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.onb-dots button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 14px; }
.onb-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: width .25s, background .25s; }
.onb-dots [aria-current] i { width: 22px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .onb-hero .onb-map *, .onb-scene, .onb-caps li, .onb-dots i { animation: none !important; transition: none !important; }
}

/* ================= Première utilisation (public/js/firstrun.js) ================= */
.onb-promo {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(230, 72, 92, 0.35); animation: onbChip .45s 2s cubic-bezier(.2, .8, .2, 1) backwards;
}
.onb-check-opt { margin-top: 12px; }
.onb-check em { font-style: normal; color: var(--muted-2); }

/* écran de lancement */
.fr-splash { position: absolute; inset: 0; z-index: 3000; background: var(--surface); display: grid; place-items: center; padding: 24px var(--gutter); transition: opacity .25s; }
.fr-splash.out { opacity: 0; pointer-events: none; }
.fr-splash-in { display: grid; justify-items: center; gap: 22px; text-align: center; max-width: 340px; }
.fr-splash .logo { font-size: 38px; }
.fr-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--primary); animation: onbSpin .8s linear infinite; }
.fr-offline { gap: 10px; }
.fr-offline .btn { margin-top: 12px; min-width: 220px; }
.fr-offline-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--primary-50); color: var(--primary-text); display: grid; place-items: center; }

/* écrans plein cadre (localisation, préparation chauffeur) */
.fr-screen { z-index: 1600; }
.fr-center { align-items: center; text-align: center; justify-content: center; }
.fr-center .onb-sub { max-width: 34ch; }
.fr-art { width: 100%; max-width: 320px; height: auto; margin-bottom: 22px; }
.fr-art-bg { fill: var(--primary-50); }
.fr-art-streets path { stroke: var(--surface); stroke-width: 12; opacity: .9; }
.fr-art-halo { fill: rgba(230, 72, 92, 0.14); animation: frHalo 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.fr-art-pin { fill: var(--primary); }
.fr-art-shadow { fill: rgba(0, 0, 0, 0.14); }
.fr-art-card { fill: var(--surface); }
.fr-art-line { fill: var(--ink); opacity: .75; }
.fr-art-line2 { fill: var(--muted-2); opacity: .6; }
@keyframes frHalo { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.fr-note { margin: -8px 0 0; font-size: 14px; color: var(--ink-2); background: var(--bg); border-radius: 12px; padding: 10px 14px; }

/* feuilles du bas */
.fr-sheet .overlay-card { background: var(--surface); padding: 22px var(--gutter) calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.fr-sheet .fr-art { max-width: 100%; margin: 0 0 6px; }
.fr-h { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.fr-p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.fr-help { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.fr-close { justify-self: center; margin-top: 4px; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.fr-chip { padding: 9px 14px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line); font-weight: 600; font-size: 14px; }
.fr-chip.on { border-color: var(--primary); background: var(--primary-50); color: var(--primary-text); }

/* bandeau « position non disponible » */
.fr-locbar {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 10px;
  padding: 11px 14px; border-radius: 14px; background: var(--warning-50); color: var(--warning-ink); font-size: 14px;
}
.fr-locbar svg { flex: none; }
.fr-locbar b { font-weight: 700; }

/* infobulles de découverte */
.fr-coach { position: absolute; inset: 0; z-index: 1700; }
.fr-spot {
  position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(20, 20, 22, 0.62);
  transition: left .3s, top .3s, width .3s, height .3s; pointer-events: none;
}
.fr-tip {
  position: absolute; left: var(--gutter); right: var(--gutter); background: var(--surface); border-radius: 18px;
  padding: 14px 16px 12px; box-shadow: var(--shadow-lg); animation: onbChip .3s cubic-bezier(.2, .8, .2, 1);
}
.fr-tip-count { font-size: 12px; font-weight: 700; color: var(--muted-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.fr-tip b { display: block; font-size: 17px; font-weight: 800; }
.fr-tip p { margin: 4px 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.fr-tip-actions { display: flex; justify-content: space-between; align-items: center; }
.fr-tip-actions .btn { width: auto; padding: 10px 18px; }
.fr-tip-actions .link-btn:empty { visibility: hidden; }
/* Espace admin (page qui défile) : couche fixe sur l'écran, bulle étroite placée près de la cible (firstrun.js). */
.fr-coach-fixed { position: fixed; z-index: 3000; }
.fr-tip.narrow { right: auto; width: 360px; max-width: calc(100vw - 32px); }
/* Bouton « ? » discret : rejouer les explications de l'écran (public/js/steps.js). */
.st-help { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg); color: var(--ink-2); font-size: 15px; font-weight: 800; line-height: 1; }
.st-help:hover { color: var(--ink); }
.st-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* conseils de prix */
.fr-tips { text-align: left; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.fr-tips { padding: 6px 6px 6px 12px; }
.fr-tips.open { padding-bottom: 12px; }
.fr-tips-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.fr-tips.open .fr-tips-head { margin-bottom: 4px; }
.fr-tips-toggle { flex: 1; min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 6px; text-align: left; color: var(--ink-2); }
.fr-tips-toggle b { font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.fr-tips-toggle > svg:last-child { flex: none; margin-left: auto; transition: transform .2s; }
.fr-tips.open .fr-tips-toggle > svg:last-child { transform: rotate(180deg); }
.fr-tips ul { padding-right: 8px; }
.fr-tips ul[hidden] { display: none; }
.fr-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.fr-x:hover { background: var(--bg); }
.fr-tips ul { margin: 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 3px; }
.fr-tips li b { color: var(--ink); }

/* préparation chauffeur */
.fr-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fr-check { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); }
.fr-check.ok { border-color: var(--success); background: var(--success-50); }
.fr-check > div { flex: 1; min-width: 0; }
.fr-check b { display: block; font-size: 15px; }
.fr-check span:not(.fr-check-ico) { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.fr-check-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-50); color: var(--primary-text); display: grid; place-items: center; flex: none; }
.fr-check.ok .fr-check-ico { background: var(--success); color: #fff; }
.fr-check em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--success); }
.fr-check .btn { width: auto; flex: none; }
.fr-h2 { font-size: 17px; font-weight: 800; margin: 26px 0 10px; }
.fr-steps { margin: 0; padding: 0; list-style: none; counter-reset: fr; display: grid; gap: 12px; }
.fr-steps li { counter-increment: fr; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.fr-steps li::before { content: counter(fr); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.fr-steps b { font-size: 15px; }
.fr-steps span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .fr-art-halo, .onb-promo, .fr-tip { animation: none; } }

/* ================= Icônes (public/js/icons.js) ================= */
svg.ic { flex: none; display: inline-block; vertical-align: -0.2em; }
.ic-star { color: var(--warning); }
.ic-ok { color: var(--success); }
.ic-ko { color: var(--danger); }
.ic-pin { color: var(--primary); }
.round-btn svg.ic { width: 22px; height: 22px; vertical-align: 0; }
.opt svg.ic, .btn svg.ic { vertical-align: -0.22em; }
.empty .big svg.ic { color: var(--muted-2); }
.check-list svg.ic { vertical-align: -0.25em; }
.opt-brand svg.ic-brand { border-radius: 5px; }
.pay-status svg.ic-brand { border-radius: 4px; vertical-align: -0.3em; }
.momo-box input:focus, .momo-box select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 72, 92, 0.16); }

/* ================= Fenêtres Drivo (public/js/modal.js) ================= */
.dm-backdrop {
  position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 20, 22, 0); transition: background .18s;
}
.dm-backdrop.in { background: rgba(20, 20, 22, .5); }
.dm {
  width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; background: var(--surface); color: var(--ink);
  border-radius: 28px 28px 0 0; padding: 12px var(--gutter) calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .9, .3, 1);
}
.dm-backdrop.in .dm { transform: none; }
.dm-backdrop.out .dm { transform: translateY(100%); transition-duration: .18s; }
.dm-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 16px; }
.dm-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-text); margin-bottom: 14px; }
.dm-danger .dm-ico { background: var(--danger-50); color: var(--danger); }
.dm-title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.dm-text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dm-html { margin-top: 12px; }
/* « Pour qui est la course ? » : choisir dans les contacts du téléphone, proches récents (contact-pick.js) */
.cp-box .cp-pick { width: 100%; justify-content: center; gap: 8px; }
.cp-box .cp-t { margin: 12px 0 6px; }
.cp-recent { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cp-chip { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 180px; padding: 8px 12px;
  border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.cp-chip b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-chip small { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.cp-chip:active { border-color: var(--primary); }
.dm-fields { display: grid; gap: 12px; margin-top: 16px; }
.dm-f textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface);
  font-size: 16px; line-height: 1.45; outline: none; resize: vertical; font: inherit;
}
.dm-f textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.dm-f select { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.dm-f select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.dm-f.err input, .dm-f.err textarea { border-color: var(--danger); }
.dm-err { min-height: 0; font-size: 13px; font-weight: 600; color: var(--danger); margin-top: 4px; }
.dm-err:empty { display: none; }
.dm-actions { display: grid; gap: 10px; margin-top: 20px; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { background: #b3122a; }
@media (min-width: 700px) {
  .dm-backdrop { align-items: center; }
  .dm { border-radius: 24px; max-width: 420px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .2s, opacity .2s; padding-top: 24px; }
  .dm-backdrop.in .dm { transform: none; opacity: 1; }
  .dm-grip { display: none; }
}
@keyframes dmUp { from { transform: translateY(40px); opacity: .6; } }
@keyframes dmFade { from { background: rgba(20, 20, 22, 0); } }
@media (prefers-reduced-motion: reduce) { .dm, .overlay-card, .overlay { transition: none !important; animation: none !important; } }

/* ----- Alerte SOS ----- */
.sos .dm { padding-top: 22px; }
.sos-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sos-ring { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.sos-ring svg.track { position: absolute; inset: 0; transform: rotate(-90deg); }
.sos-ring circle { fill: none; stroke-width: 7; }
.sos-ring .bg { stroke: var(--danger-50); }
.sos-ring .fg { stroke: var(--danger); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.sos-core { width: 72px; height: 72px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 8px 22px rgba(215, 25, 45, .35); }
.sos-core svg { --ic-on: var(--danger); }
.sos.sent .sos-core { background: var(--success); box-shadow: 0 8px 22px rgba(29, 183, 122, .35); }
.sos-list { list-style: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--bg); display: grid; gap: 8px; font-size: 14px; }
.sos-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.sos-list svg { color: var(--danger); margin-top: 1px; }
.sos.sent .sos-list svg { color: var(--success); }
.sos-calls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sos-calls a {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; text-decoration: none;
  background: var(--danger-50); color: var(--danger); font-size: 12px; font-weight: 700;
}
.sos-calls a b { font-size: 22px; font-weight: 900; }
.sos-calls a:first-child { background: var(--danger); color: #fff; }

/* ================= Hors ligne (public/js/net.js) ================= */
.net-bar {
  position: absolute; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top)); z-index: 1400;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--ink); color: var(--surface); font-size: 13px; line-height: 1.35; box-shadow: var(--shadow-lg);
  animation: onbChip .3s cubic-bezier(.2, .8, .2, 1);
}
.net-bar b { font-weight: 800; }
.net-bar svg { flex: none; color: var(--warning); }
.net-bar.out { opacity: 0; transition: opacity .2s; }
body:not(:has(.app)) .net-bar { position: fixed; top: calc(12px + env(safe-area-inset-top)); max-width: 520px; margin: 0 auto; }

.map-off { background: var(--bg) repeating-linear-gradient(45deg, transparent 0 22px, var(--track) 22px 24px); display: grid; place-items: start center; }
.map-off-msg { margin-top: calc(90px + env(safe-area-inset-top)); display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface); color: var(--ink-2); font-size: 13px; box-shadow: var(--shadow); }

.onb-lang { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--muted-2); }
.onb-lang [aria-pressed="true"] { color: var(--ink); text-decoration: none; }

/* Compte demandé en mode invité */
.onb-gate { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--primary-50); color: var(--primary-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.onb-gate svg { flex: none; margin-top: 1px; }

/* ---------- Récompenses & parrainage (passager, chauffeur, admin) ---------- */
/* Fond sombre fixe (et non var(--ink), qui devient clair en mode sombre : texte blanc illisible). */
.rw-hero { border-radius: var(--radius-lg); padding: 18px; background: #17191d; color: #fff; margin-bottom: 12px; border: 1px solid var(--line); }
.rw-hero .rw-label { font-size: 13px; opacity: .75; }
.rw-hero .rw-points { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0; }
.rw-hero .rw-sub { font-size: 13px; opacity: .85; }
.rw-card { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; background: var(--surface); }
.rw-card h3, .page-body .rw-card > h3 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.page-body .rw-card > h3:first-child, .rw-card > h3:first-child { margin-top: 0; }
.rw-card .list-row .title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rw-card p { margin: 6px 0; }
.rw-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 10px 0 6px; }
.rw-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }
.rw-steps { display: flex; gap: 6px; margin: 10px 0 4px; }
.rw-steps i { flex: 1; height: 10px; border-radius: 4px; background: var(--track); }
.rw-steps i.on { background: var(--primary); }
.rw-big { font-size: 22px; font-weight: 900; }
.rw-deal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: #17191d; color: #fff; font-weight: 800; margin: 10px 0; border: 1px solid var(--line); }
.rw-deal .rw-pct { font-size: 22px; font-weight: 900; color: var(--success-bright); }
.rw-days { display: flex; gap: 4px; margin-top: 8px; }
.rw-days span { flex: 1; text-align: center; font-size: 12px; font-weight: 800; padding: 6px 0; border-radius: 8px; background: var(--track); color: var(--muted); }
.rw-days span.on { background: var(--primary); color: #fff; }
.rw-days span.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.rw-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.rw-code .plate { font-size: 22px; }
.rw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rw-actions .btn { flex: 1; min-width: 120px; }
.rw-chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--track); color: var(--muted); white-space: nowrap; }
.rw-chip.ok { background: rgba(29, 183, 122, .14); color: var(--success); }
.rw-chip.wait { background: rgba(245, 165, 36, .16); color: var(--warning-ink); }
.rw-chip.ko { background: rgba(215, 25, 45, .1); color: var(--danger); }
.rw-amount { font-weight: 900; white-space: nowrap; }
.rw-amount.plus { color: var(--success); }
.rw-rules { font-size: 13px; color: var(--muted); }
.rw-rules summary { cursor: pointer; font-weight: 800; color: var(--ink); padding: 8px 0; }
.rw-rules li { margin: 4px 0; }
.rw-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: var(--radius); margin: 8px auto; width: max-content; max-width: 100%; }
.rw-qr svg, .rw-qr img { width: 200px; height: 200px; }
.rw-otp { font-family: ui-monospace, Menlo, monospace; font-size: 34px; font-weight: 900; letter-spacing: .25em; text-align: center; margin: 6px 0; }

.onb-hint { margin: -2px 0 2px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.onb-status-note { margin: 8px 0 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

.net-eta-note { margin: -4px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--warning-50); color: var(--warning-ink); font-size: 13px; font-weight: 600; }

/* Réglage système « Autoriser tout le temps » (chauffeur) */
.fr-os { width: 100%; max-width: 320px; margin: 4px auto 14px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; }
.fr-os-title { font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.fr-os-opt { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.fr-os-opt.on { background: var(--primary-50); color: var(--primary-text); font-weight: 700; outline: 2px solid var(--primary); }
.fr-os-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.fr-os-opt.on .fr-os-radio { background: radial-gradient(circle, var(--primary) 0 4px, transparent 5px); border-color: var(--primary); }
/* Batterie faible */
.fr-batt { width: 64px; height: 30px; border: 3px solid var(--danger); border-radius: 8px; padding: 3px; position: relative; margin: 4px 0 6px; }
.fr-batt::after { content: ''; position: absolute; right: -8px; top: 8px; width: 4px; height: 10px; border-radius: 0 3px 3px 0; background: var(--danger); }
.fr-batt span { display: block; height: 100%; border-radius: 3px; background: var(--danger); }

/* ================= Devenir chauffeur (public/js/become-driver.js) ================= */
.bd .onb-top { gap: 10px; }
.bd-step { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.bd-hero { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-text); margin: 12px 0 18px; }
.bd-hero.ok { background: var(--success-50); color: var(--success); margin-inline: auto; }
.bd-known { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--success-50); color: var(--success); font-size: 14px; }
.bd-known b { color: var(--ink); }
.bd-help { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.bd-err { font-size: 13px; font-weight: 600; color: var(--danger); margin-top: 4px; }
.bd-err:empty { display: none; }
.onb-f select { width: 100%; height: 54px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
.bd-2 { grid-template-columns: 1fr 1fr; }
.bd-2 .onb-f:first-child, .bd-2 .onb-f:last-child { grid-column: 1 / -1; }
.bd-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.bd-class { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); }
.bd-class b { font-size: 15px; margin-top: 4px; }
.bd-class span { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.bd-class.on { border-color: var(--primary); background: var(--primary-50); }
.bd-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.bd-checks li { display: flex; gap: 8px; align-items: flex-start; }
.bd-checks .ko { color: var(--danger); } .bd-checks .wa { color: var(--warning-ink); } .bd-checks .ok { color: var(--success); }
.bd-docs { display: grid; gap: 10px; }
.bd-doc { display: flex; gap: 12px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--line); }
.bd-doc.has { border-color: var(--success); background: var(--success-50); }
.bd-thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; color: var(--muted-2); overflow: hidden; flex: none; }
.bd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bd-doc-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.bd-doc-main b { font-size: 14px; line-height: 1.35; }
.bd-tag { justify-self: start; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--warning-50); color: var(--warning-ink); }
.bd-tag.core { background: var(--primary-50); color: var(--primary-text); }
.bd-tag.opt { background: var(--track); color: var(--ink-2); }
.bd-date { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.bd-date input { height: 36px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--line-strong); font: inherit; font-size: 14px; background: var(--surface); }
.bd-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bd-shot, .bd-pick { position: relative; overflow: hidden; cursor: pointer; }
.bd-shot { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; }
.bd-pick { font-size: 13px; font-weight: 600; color: var(--primary-text); text-decoration: underline; }
.bd-shot input, .bd-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bd-later { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.bd-later svg { flex: none; margin-top: 2px; }

/* Tableau de bord flotte : alerte SOS d'un chauffeur */
.sos-alerts { display: grid; gap: 8px; margin: 12px 0; }
.sos-alerts.hidden { display: none; }
.sos-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #b3261e; color: #fff; border-radius: 10px; padding: 12px 14px; }
.sos-alert .main { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.sos-alert .main span { font-size: 13px; opacity: .9; }
.sos-alert .btn { width: auto; background: #fff; color: #b3261e; border: 0; }
.sos-alert .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }

/* Date de naissance : Jour / Mois / Année (public/js/datepick.js) */
.dp { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.dp select { width: 100%; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.dp select:focus { outline: none; border-color: var(--primary); }

/* Devenir chauffeur : zone des pièces */
.bd-progress { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.bd-progress-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bd-progress-bar i { display: block; height: 100%; background: var(--success, #1e8e3e); transition: width .3s; }
.bd-progress b { font-size: 14px; font-variant-numeric: tabular-nums; }
.bd-docs-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 18px 0 8px; }
.bd-doc { border-radius: 12px; background: var(--surface); align-items: flex-start; }
.bd-doc.has .bd-thumb { outline: 2px solid var(--success); outline-offset: -2px; }
.bd-doc-actions label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.bd-doc-actions .bd-shot { background: var(--ink, #15171a); color: var(--surface, #fff); }
.bd-doc-actions .bd-pick { background: var(--bg-2); color: var(--ink); }
.bd-doc-actions label { position: relative; overflow: hidden; }
.bd-doc-actions input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }

/* carte de la demande (app chauffeur) */
.dm-btn { color: var(--muted-2); transition: color .2s, background .2s; }
.dm-btn.on { color: var(--primary); background: var(--primary-50); }
.dm-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px 3px 5px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--surface); color: var(--primary-text); box-shadow: 0 1px 6px rgba(41, 43, 46, 0.18); pointer-events: none; white-space: nowrap; }
.dm-chip.lvl3 { background: var(--primary); color: #fff; }
.dm-banner { background: var(--primary-50); color: var(--ink); align-items: flex-start; line-height: 1.4; }
.dm-banner > svg { flex: none; margin-top: 1px; color: var(--primary); }
.dm-banner b { color: var(--primary-text); }

/* centre de sécurité (app chauffeur) */
.sf-btn { color: var(--danger); }
.sf-sos { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: 18px; border: 0;
  background: var(--danger); color: #fff; margin-bottom: 12px; cursor: pointer; }
.sf-sos b { display: block; font-size: 18px; }
.sf-sos small { display: block; font-size: 13px; opacity: .9; line-height: 1.35; }
.sf-sos:active { transform: scale(.99); }
.sf-actions { display: grid; gap: 8px; margin: 14px 0 6px; }
.sf-act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.sf-act > svg { flex: none; color: var(--primary-text); }
.sf-act b { display: block; font-size: 15px; }
.sf-act small { display: block; font-size: 12.5px; color: var(--ink-2); }
.sf-act:disabled { opacity: .55; cursor: default; }
.sf-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.sf-tips li { display: flex; gap: 8px; align-items: flex-start; }
.sf-tips svg { flex: none; margin-top: 2px; color: var(--ink-3); }

/* réception des demandes : retour maison, distance, découvert (app chauffeur) */
.pf-row .opt small { font-weight: 600; opacity: .7; margin-left: 2px; }
.pf-row .opt svg { vertical-align: -3px; }
.pf-banner { align-items: flex-start; line-height: 1.4; background: var(--info-50); color: var(--ink); }
.pf-banner > svg { flex: none; margin-top: 1px; color: var(--ink-2); }
.pf-banner.warn { background: var(--warning-50); }
.pf-banner.warn > svg { color: var(--warning); }
.pf-wallet { margin: 8px 0 4px; }
.pf-home-pin { width: 30px; height: 30px; border-radius: 50%; background: var(--info); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); border: 2px solid #fff; }

/* contrôle du visage (inscription, selfie de contrôle) */
.fc .onb-body { position: relative; }
.fc-x { position: absolute; top: 4px; right: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.fc-frame { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; margin: 8px auto 12px; border-radius: 20px; overflow: hidden; background: var(--bg); }
.fc-oval { position: absolute; inset: 12% 18%; border: 3px dashed var(--line-strong); border-radius: 50%; }
.fc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; }
.fc-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.fc-list li svg { flex: none; margin-top: 2px; }
.fc-list .ok { color: var(--success); } .fc-list .ok span { color: var(--ink); }
.fc-list .ko { color: var(--warning); } .fc-list .ko span { color: var(--ink); }
.fc-list .fc-wait { color: var(--ink-2); }
.fc-actions { display: grid; gap: 8px; }

/* bonus par zone et par heure, location de véhicule (app chauffeur) */
.bn-box { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.bn-head { display: flex; align-items: center; gap: 8px; }
.bn-head svg { color: var(--success); }
.bn-head .small { margin-left: auto; }
.bn-item { display: flex; gap: 12px; align-items: center; }
.bn-amt { flex: none; min-width: 86px; text-align: center; font-weight: 800; font-size: 15px; color: var(--success); background: var(--success-50); border-radius: 12px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.bn-amt small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.bn-txt b { display: block; font-size: 14px; }
.bn-txt span { font-size: 12.5px; color: var(--ink-2); }
.bn-item.now .bn-txt span::first-line { font-weight: 700; }
.rt-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 10px 0; }
.rt-card.proposed { border-color: var(--primary); background: var(--primary-50); }
.rt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rt-terms { white-space: pre-line; margin: 6px 0; }
.rt-card .btn-row { margin-top: 10px; }

/* photo du chauffeur (offres, course) */
.avatar { position: relative; overflow: hidden; }
.avatar .av-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bd-face-ok { font-size: 12.5px; font-weight: 700; color: var(--success); align-self: center; }

/* voiture du chauffeur : silhouette colorée (offres) et 3D (course) */
.car-fig { margin: 0; display: flex; align-items: center; gap: 10px; }
.car-fig .car-art { width: 120px; height: auto; flex: none; }
.car-fig figcaption { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.car-fig figcaption b { color: var(--ink); }
.car-plate { display: inline-block; margin-top: 2px; padding: 1px 6px; border: 1.5px solid var(--ink); border-radius: 4px; font-weight: 800; font-size: 12px; color: var(--ink); letter-spacing: .04em; background: var(--surface); }
.bid-car { position: relative; display: block; width: 100%; text-align: left; margin: 8px 0 2px; padding: 6px 8px; border-radius: 12px; background: var(--bg); border: 0; cursor: pointer; }
.bid-car-3d { position: absolute; top: 6px; right: 8px; display: inline-flex; gap: 3px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--primary-text); }
.trip-car3d { position: relative; margin: 8px 0 4px; border-radius: 14px; background: var(--bg); min-height: 64px; }
.trip-car3d .car3d { width: 100%; height: 170px; --poster-color: transparent; background: transparent; }
.trip-car3d .car-fig { padding: 6px 8px; }
.car3d-cap { position: absolute; left: 10px; bottom: 8px; font-size: 13px; color: var(--ink-2); }
.car3d-cap b { color: var(--ink); }
.car3d-big .car3d-host { height: 260px; display: grid; place-items: center; background: var(--bg); border-radius: 16px; }
.car3d-big .car3d { width: 100%; height: 260px; }
.car3d-big .car-art { width: 80%; }

/* nouveautés après mise à jour, actions requises */
.wn .onb-body { display: flex; flex-direction: column; min-height: 100%; }
.wn-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary-text); margin: 8px 0 0; }
.wn-slide { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 24px 0; }
.wn-ico { width: 84px; height: 84px; border-radius: 26px; background: var(--primary-50); color: var(--primary-text); display: grid; place-items: center; margin: 0 auto 18px; }
.wn-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.wn-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line-strong); transition: width .2s, background .2s; }
.wn-dots i.on { width: 20px; background: var(--primary); }
.wn-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.wn-actions .hidden + .btn { grid-column: 1 / -1; }
.wn-action { align-items: flex-start; line-height: 1.4; background: var(--warning-50); color: var(--ink); }
.wn-action > svg { flex: none; margin-top: 1px; color: var(--warning); }
.wn-action.blocking { background: var(--danger-50); }
.wn-action.blocking > svg { color: var(--danger); }

/* notes réelles et détail de la priorité */
.stars-new { display: inline-block; font-size: 12px; font-weight: 700; color: var(--success); background: var(--success-50); padding: 1px 7px; border-radius: 6px; }
.stars-n { font-weight: 500; color: var(--ink-2); }
.prio-rows { display: grid; gap: 10px; font-size: 13px; }
.prio-row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 4px 8px; align-items: center; }
.prio-l { font-weight: 600; }
.prio-bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.prio-bar i { display: block; height: 100%; background: var(--primary); }
.prio-v { text-align: right; font-variant-numeric: tabular-nums; }
.prio-why { grid-column: 1 / -1; color: var(--ink-2); font-size: 12.5px; }

/* paiements acceptés (app chauffeur) : opérateur, interrupteur, numéro avec +237 */
.pay-accept { display: grid; gap: 8px; margin: 8px 0 14px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pay-opt .main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pay-opt .main b { font-size: 15px; }
.pay-opt .main span { font-size: 12.5px; color: var(--ink-2); }
.pay-opt .main span.ok { color: var(--success); font-weight: 600; }
.pay-logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
.pay-logo.cash { background: var(--success-50); color: var(--success); }
.pay-num { margin: -2px 0 4px; padding: 10px 12px 8px; border-radius: 14px; background: var(--bg); }
.pay-num label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.pay-field { display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.pay-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230, 72, 92, 0.16); }
.pay-pfx { padding: 0 10px 0 14px; font-weight: 700; color: var(--ink-2); border-right: 1px solid var(--line); line-height: 44px; }
.pay-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px; letter-spacing: .02em; padding: 11px 12px; font-variant-numeric: tabular-nums; }
.pay-err { margin: 6px 2px 0; min-height: 0; font-size: 13px; color: var(--danger); }
.pay-err:empty { display: none; }
#btnPaySave { justify-self: start; width: auto; padding-inline: 22px; }

/* listes déroulantes et champs des réglages : lisibles en clair comme en sombre */
.toggle-row select, .field-line select, .field-line input, .field-line textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: 12px; padding: 9px 12px; max-width: 100%;
}
.toggle-row select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.toggle-row select:focus, .field-line select:focus, .field-line input:focus, .field-line textarea:focus { outline: none; border-color: var(--primary); }
.toggle-row select option { color: var(--ink); background: var(--surface); }
/* champs de paiement dans les fenêtres (Mobile Money, carte) */
.dm-f .pay-field input { border: 0 !important; box-shadow: none !important; background: transparent; padding: 12px; border-radius: 0; }
.pay-tail { display: inline-flex; align-items: center; padding-right: 10px; }
.pay-tail:empty { display: none; }
.pay-pfx svg { vertical-align: -4px; color: var(--ink-2); }
.pay-cvc { font-size: 12px; letter-spacing: .1em; color: var(--muted-2); }
.pay-hint { margin: 6px 2px 0; font-size: 13px; color: var(--ink-2); }
.pay-hint:empty { display: none; }
.pay-hint.ok { color: var(--success); font-weight: 600; }
.pay-hint.ko { color: var(--danger); }
.rt-card .kv { gap: 12px; }
.rt-card .kv b { text-align: right; }
#wnActions:empty { display: none; }
.bid-car .car-fig figcaption { padding-right: 34px; }

/* ---------- Portefeuille chauffeur : filtre de période des transactions, progression des primes ---------- */
.tx-filter { margin: 4px 0 10px; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-chip { flex: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; min-height: 38px; }
.tx-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tx-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tx-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.tx-range label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); flex: 1 1 130px; }
.tx-range input { height: 42px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.tx-range .btn { width: auto; height: 42px; }
.tx-sum { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 8px; background: var(--surface); }
.tx-sum-t { font-weight: 800; margin-bottom: 8px; text-transform: none; }
/* Résumé en lignes (libellé à gauche, montant à droite sur toute la largeur) : lisible de 100 à 10 000 000 FCFA. */
.tx-sum-g { display: grid; gap: 6px; margin-bottom: 8px; }
.tx-sum-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tx-sum-r span { font-size: 14px; color: var(--muted); font-weight: 600; }
.tx-sum-r b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tx-sum-r.tx-net { border-top: 1.5px solid var(--line); padding-top: 8px; margin-top: 2px; }
.tx-sum-r.tx-net span { color: var(--ink); font-weight: 800; font-size: 15px; }
.tx-sum-r.tx-net b { font-size: 21px; font-weight: 800; }
/* Lignes de transactions et de gains : le montant ne se coupe jamais, le libellé passe à la ligne. */
#walletTx .kv, #walletToday .kv, #walletPayout .kv { gap: 12px; }
#walletTx .kv > span, #walletToday .kv > span, #walletPayout .kv > span { min-width: 0; overflow-wrap: anywhere; }
#walletTx .kv > b, #walletToday .kv > b, #walletPayout .kv > b { white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; text-align: right; }
#walletBalance { font-size: clamp(22px, 8.5vw, 30px) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-day { margin: 14px 0 2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.tx-day::first-letter { text-transform: uppercase; }
#walletTx b.plus, .rw-amount.plus { color: var(--success); }
#walletTx b.minus, .tx-sum b.minus { color: var(--danger); }
.tx-sum b.plus { color: var(--success); }
.rw-sub { font-size: 14px; font-weight: 700; color: var(--warning-ink); }
.rw-bar2 { display: flex; }
.rw-bar2 > span { border-radius: 999px 0 0 999px; }
.rw-bar2 > span[style="width:100%"] { border-radius: 999px; }
.rw-bar2 > i { display: block; height: 100%; background: repeating-linear-gradient(45deg, rgba(245, 165, 36, .9) 0 6px, rgba(245, 165, 36, .55) 6px 12px); transition: width .4s; }
.rw-mini { height: 6px; margin: 6px 0 2px; }
.rw-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rw-legend em { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.rw-legend em.ok { background: var(--primary); }
.rw-legend em.wait { background: repeating-linear-gradient(45deg, rgba(245, 165, 36, .9) 0 3px, rgba(245, 165, 36, .55) 3px 6px); }
.rw-rides { margin-top: 8px; }
.rw-rides summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; }
.rw-rides .kv { align-items: center; }
.rw-rides .rw-chip { white-space: normal; text-align: right; max-width: 55%; }
@media (prefers-reduced-motion: reduce) { .rw-bar2 > i { transition: none; } }

/* ---------- Tutoriels illustrés (public/js/tutorial.js) ---------- */
.tuto {
  --tuto-inkbg: #292b2e;
  position: absolute; inset: 0; z-index: 1800; background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column;
  padding: calc(8px + var(--safe-top)) var(--gutter) calc(16px + var(--safe-bottom));
  animation: tutoFade .2s ease-out;
}
.tuto-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.tuto-count { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tuto-skip { min-height: 44px; padding: 0 10px; margin-right: -10px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.tuto-skip:focus-visible, .tuto-how:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tuto-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; touch-action: pan-y; }
.tuto-slide { margin: auto 0; padding: 4px 0; }
.tuto-art { display: block; width: 100%; height: auto; max-height: 40vh; }
.tuto-h { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin: 22px 0 8px; }
.tuto-p { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.tuto-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0; }
.tuto-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: width .25s, background .25s; }
.tuto-dots i.on { width: 22px; background: var(--primary); }
.tuto-foot { display: flex; gap: 10px; }
.tuto-foot .btn { flex: 1; min-width: 0; }
.tuto-foot .btn[hidden] { display: none; }
.tuto-in-next { animation: tutoInNext .28s cubic-bezier(.2, .8, .2, 1); }
.tuto-in-prev { animation: tutoInPrev .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes tutoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tutoInNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes tutoInPrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (max-height: 640px) { .tuto-h { font-size: 21px; margin-top: 14px; } .tuto-p { font-size: 15px; } .tuto-dots { margin: 10px 0; } }
@media (prefers-reduced-motion: reduce) {
  .tuto, .tuto-in-next, .tuto-in-prev { animation: none; }
  .tuto-dots i { transition: none; }
}
/* Lien « Comment ça marche ? » sous le choix Privée / Partagée */
.tuto-how { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: -2px 0 6px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--primary-text); }
/* ligne sous Privée / Partagée : ce que « partager » veut dire + lien vers le tutoriel */
.tuto-shared-sub { margin: -2px 0 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.tuto-shared-sub > span { display: block; text-wrap: balance; }
.tuto-shared-sub .tuto-how { margin: 0; min-height: 28px; }
/* Animations des dessins (transform et opacity seulement ; image fixe avec « réduire les animations ») */
.tuto-art .m-pop, .tuto-art .m-bill, .tuto-art .m-bub, .tuto-art .m-ring { transform-box: fill-box; transform-origin: center; }
.tuto-art .m-lane { animation: tLane .5s linear infinite; }
.tuto-art .m-pop { animation: tPop 3.2s ease-out infinite; }
.tuto-art .m-d2 { animation-delay: .35s; }
.tuto-art .m-nudge { animation: tNudge .6s ease-in-out infinite alternate; }
.tuto-art .m-walker { transform: translate(186px, 84px); animation: tWalk 5s linear infinite; }
.tuto-art .m-step { animation: tStep .28s ease-in-out infinite alternate; }
.tuto-art .m-arrive { animation: tArrive 5s ease-out infinite; }
.tuto-art .m-ring { animation: tRing 1.6s ease-out infinite; }
.tuto-art .m-hop { animation: tHop 6s ease-out infinite; }
.tuto-art .m-drop { animation: tDrop 6s ease-in-out infinite; }
.tuto-art .m-detour { transform: translate(250px, 150px); animation: tDetour 6s linear infinite; }
.tuto-art .m-bill { animation: tWiggle 1.2s ease-in-out infinite alternate; }
.tuto-art .m-coin { animation: tHopY .9s ease-in-out infinite alternate; }
.tuto-art .m-coin.m-d2 { animation-delay: .3s; }
.tuto-art .m-inch { animation: tInch 3s ease-in-out infinite alternate; }
.tuto-art .m-bub { transform-origin: 40% 100%; animation: tBub 4s ease-out infinite; }
@keyframes tLane { to { transform: translateX(-26px); } }
@keyframes tPop { 0%, 15% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 32%, 100% { transform: scale(1); opacity: 1; } }
@keyframes tNudge { to { transform: translateX(4px); } }
@keyframes tWalk {
  0% { transform: translate(110px, 176px); opacity: 0; } 4% { opacity: 1; } 14% { transform: translate(71px, 176px); }
  47% { transform: translate(71px, 84px); } 88%, 100% { transform: translate(186px, 84px); opacity: 1; }
}
@keyframes tStep { to { transform: translateY(-2px); } }
@keyframes tArrive { 0% { transform: translateX(70px); opacity: 0; } 20% { opacity: 1; } 55%, 100% { transform: none; opacity: 1; } }
@keyframes tRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tHop { 0%, 30% { opacity: 0; transform: translate(-16px, 10px); } 38% { opacity: 1; transform: translate(0, -7px); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tDrop { 0% { transform: translateX(-130px); opacity: 0; } 6% { opacity: 1; } 30%, 55% { transform: none; } 85% { transform: translateX(100px); opacity: 1; } 92%, 100% { transform: translateX(110px); opacity: 0; } }
@keyframes tDetour {
  0% { transform: translate(40px, 150px); opacity: 0; } 4% { opacity: 1; } 21% { transform: translate(108px, 150px); }
  36% { transform: translate(136px, 112px); } 46% { transform: translate(164px, 96px); } 56% { transform: translate(192px, 112px); }
  71% { transform: translate(220px, 150px); } 90% { transform: translate(280px, 150px); opacity: 1; } 100% { transform: translate(280px, 150px); opacity: 0; }
}
@keyframes tWiggle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes tHopY { to { transform: translateY(-6px); } }
@keyframes tInch { to { transform: translateX(10px); } }
@keyframes tBub { 0% { transform: scale(0); opacity: 0; } 10% { transform: scale(1.08); opacity: 1; } 16%, 85% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tuto-art .m-lane, .tuto-art .m-pop, .tuto-art .m-nudge, .tuto-art .m-walker, .tuto-art .m-step, .tuto-art .m-arrive, .tuto-art .m-ring,
  .tuto-art .m-hop, .tuto-art .m-drop, .tuto-art .m-detour, .tuto-art .m-bill, .tuto-art .m-coin, .tuto-art .m-inch, .tuto-art .m-bub { animation: none; }
}
/* Dessins : couleurs en classes pour suivre le thème clair / sombre */
.tuto-art .a-bg { fill: var(--primary-50); }
.tuto-art .a-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.tuto-art .a-sel { stroke: #e6485c; stroke-width: 2; }
.tuto-art .a-red { fill: #e6485c; }
.tuto-art .a-redl { fill: var(--primary-100); }
.tuto-art .a-white { fill: #fff; }
.tuto-art .a-ink { fill: var(--ink); }
.tuto-art .a-inkbg { fill: var(--tuto-inkbg); }
.tuto-art .a-mut { fill: var(--muted-2); }
.tuto-art .a-soft { fill: var(--line-strong); }
.tuto-art .a-track { fill: var(--track); }
.tuto-art .a-glass { fill: var(--line-strong); }
.tuto-art .a-road { fill: var(--line-strong); }
.tuto-art .a-lane { fill: none; stroke: var(--surface); stroke-width: 3; stroke-dasharray: 14 12; }
.tuto-art .a-street { fill: none; stroke: var(--surface); stroke-width: 12; }
.tuto-art .a-sat { fill: #5b6168; }
.tuto-art .a-roof { fill: #7d838b; }
.tuto-art .a-roof2 { fill: #9aa0a7; }
.tuto-art .a-satroad { fill: none; stroke: #c3c7cd; stroke-width: 8; stroke-linecap: round; }
.tuto-art .a-shadow { fill: rgba(0, 0, 0, .3); }
.tuto-art .a-dot { fill: var(--surface); stroke: #e6485c; stroke-width: 4; }
.tuto-art .a-halo { fill: none; stroke: #e6485c; stroke-width: 2; stroke-dasharray: 3 4; }
.tuto-art .a-ring { stroke: var(--surface); stroke-width: 3; }
.tuto-art .a-ringw { stroke: var(--surface); stroke-width: 2; }
.tuto-art .a-sline { fill: none; stroke: var(--line); stroke-width: 1.5; }
.tuto-art .a-sink { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tuto-art .a-swhite { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.tuto-art .a-sred { fill: none; stroke: #e6485c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tuto-art .a-route { stroke-width: 5; }
.tuto-art .a-thin { stroke-width: 2.5; }
.tuto-art .a-hair { stroke-width: 1.5; }
.tuto-art .a-dash { stroke-dasharray: 5 6; }
.tuto-art .a-direct { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.tuto-art .a-walk { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 8; }
.tuto-art .a-strike { fill: none; stroke: var(--muted); stroke-width: 2; }
.tuto-art .a-plate { stroke: var(--ink); stroke-width: 2.5; }
.tuto-art .a-faint { opacity: .7; }
.tuto-art .a-t { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--ink); }
.tuto-art .a-t.s { font-size: 11.5px; }
.tuto-art .a-t.l { font-size: 18px; font-weight: 800; }
.tuto-art .a-t.xl { font-size: 24px; font-weight: 800; }
.tuto-art .a-t.m { fill: var(--muted); }
.tuto-art .a-t.w { fill: #fff; }
.tuto-art .a-t.k { fill: #292b2e; }
.tuto-art .a-t.r { fill: var(--primary-text); }
.tuto-art .a-t.plate { font-size: 16px; font-weight: 800; letter-spacing: 1.5px; }
@media (prefers-color-scheme: dark) { .tuto { --tuto-inkbg: #55585f; } }

/* Scènes des nouveautés (Place, Le plus rapide, coller un lieu, habitudes, Drivo Pro) : mêmes règles que plus haut,
   transform et opacity seulement ; avec « réduire les animations », une image fixe lisible (état réglé plus bas). */
.wn { --tuto-inkbg: #292b2e; }
@media (prefers-color-scheme: dark) { .wn { --tuto-inkbg: #55585f; } }
.wn-art .tuto-art { max-height: 30vh; margin: 0 auto 18px; }
.tuto-art .a-seat { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 3; }
.tuto-art .a-nav { fill: #16803c; }
.tuto-art .a-limit { fill: #fff; stroke: #d7263d; stroke-width: 7; }
.tuto-art .a-adv { fill: #1d4fb8; stroke: #fff; stroke-width: 2; }
.tuto-art .a-wide { stroke-width: 26; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .tuto-art .a-adv { fill: #16336f; stroke: #8ab4f8; } }
.tuto-art .m-tap, .tuto-art .m-solo, .tuto-art .m-filled, .tuto-art .m-hold, .tuto-art .m-breathe { transform-box: fill-box; transform-origin: center; }
.tuto-art .m-ride { animation: tRide 6s linear infinite; }
.tuto-art .m-seat2 { animation: tOn2 6s linear infinite; }
.tuto-art .m-seat3 { animation: tOn3 6s linear infinite; }
.tuto-art .m-wait1 { animation: tOff2 6s linear infinite; }
.tuto-art .m-wait2 { animation: tOff3 6s linear infinite; }
.tuto-art .m-hand { transform-box: view-box; transform-origin: 66px 92px; animation: tSpin 3s linear infinite; }
.tuto-art .m-solo { animation: tSolo 6s ease-out infinite; }
.tuto-art .m-paste { animation: tPaste 5s linear infinite; }
.tuto-art .m-tap { animation: tTap 5s ease-out infinite; }
.tuto-art .m-found { animation: tFound 5s ease-out infinite; }
.tuto-art .m-pindrop { animation: tPinDrop 5s ease-out infinite; }
.tuto-art .m-filled { animation: tFilled 5s ease-out infinite; }
.tuto-art .m-fastcar { animation: tFastCar 5s ease-in-out infinite; }
.tuto-art .m-breathe { animation: tBreathe 1.2s ease-in-out infinite alternate; }
.tuto-art .m-up { animation: tUp 6s linear infinite; }
.tuto-art .m-bars { animation: tBars 5s ease-in-out infinite; }
.tuto-art .m-car { animation: tHopY 1.2s ease-in-out infinite alternate; }
.tuto-art .m-hold { animation: tHold 2.4s ease-out infinite; }
.tuto-art .m-curve { animation: tCurve 6s linear infinite; }
.tuto-art .m-lift { animation: tLift 3s ease-in-out infinite alternate; }
@keyframes tRide { 0% { transform: translateX(-40px); } 100% { transform: translateX(360px); } }
@keyframes tOn2 { 0%, 38% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes tOn3 { 0%, 61% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes tOff2 { 0%, 37% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes tOff3 { 0%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes tSpin { to { transform: rotate(360deg); } }
@keyframes tSolo { 0%, 38% { opacity: 0; transform: scale(.9); } 46% { opacity: 1; transform: scale(1.03); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tPaste { 0%, 22% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes tTap { 0%, 8% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(.8); } 26%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes tFound { 0%, 30% { opacity: 0; transform: translateY(6px); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes tPinDrop { 0%, 40% { opacity: 0; transform: translateY(-30px); } 48% { opacity: 1; transform: none; } 52% { transform: translateY(-5px); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes tFilled { 0%, 30% { opacity: 0; transform: scale(.85); } 36% { opacity: 1; transform: scale(1.05); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tFastCar { 0%, 10% { transform: none; opacity: 1; } 60%, 92% { transform: translateX(86px); opacity: 1; } 100% { transform: translateX(86px); opacity: 0; } }
@keyframes tBreathe { to { transform: scale(1.04); } }
@keyframes tLift { from { transform: translateY(3px); } to { transform: translateY(-3px); } }
@keyframes tUp { 0% { transform: translateY(20px); } 100% { transform: translateY(-200px); } }
@keyframes tBars { 0%, 30% { opacity: 1; } 38%, 84% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes tHold { 0% { opacity: 0; transform: scale(.8); } 40% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes tCurve {
  0% { transform: translate(40px, 200px) rotate(-62deg); opacity: 0; } 5% { opacity: 1; } 20% { transform: translate(70px, 150px) rotate(-50deg); }
  38% { transform: translate(110px, 122px) rotate(-22deg); } 52% { transform: translate(160px, 112px) rotate(-8deg); } 68% { transform: translate(222px, 97px) rotate(-22deg); }
  84% { transform: translate(266px, 58px) rotate(-55deg); } 95% { transform: translate(292px, 16px) rotate(-62deg); opacity: 1; } 100% { transform: translate(300px, 0) rotate(-62deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tuto-art .m-ride, .tuto-art .m-seat2, .tuto-art .m-seat3, .tuto-art .m-wait1, .tuto-art .m-wait2, .tuto-art .m-hand, .tuto-art .m-solo,
  .tuto-art .m-paste, .tuto-art .m-tap, .tuto-art .m-found, .tuto-art .m-pindrop, .tuto-art .m-filled, .tuto-art .m-fastcar, .tuto-art .m-breathe,
  .tuto-art .m-up, .tuto-art .m-bars, .tuto-art .m-car, .tuto-art .m-hold, .tuto-art .m-curve, .tuto-art .m-lift { animation: none; }
  /* Images fixes : la voiture entre les deux arrêts (une place prise en chemin), au bout du trajet, dans le virage. */
  .tuto-art .m-ride { transform: translateX(160px); }
  .tuto-art .m-seat3, .tuto-art .m-wait1 { opacity: 0; }
  .tuto-art .m-fastcar { transform: translateX(60px); }
  .tuto-art .m-up { transform: translateY(-40px); }
  .tuto-art .m-curve { transform: translate(160px, 112px) rotate(-8deg); }
  .tuto-art .m-tap, .tuto-art .m-hold { opacity: .6; }
}

/* Choix de la ville : cartes lisibles (nom, région), coche sur la ville choisie. */
.fr-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fr-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fr-city { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 16px; background: var(--bg); border: 1.5px solid var(--line); text-align: left; color: var(--ink); cursor: pointer; }
.fr-city-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--muted); }
.fr-city-t { flex: 1; min-width: 0; display: grid; }
.fr-city-t b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-city-t small { font-size: 12px; color: var(--muted); }
.fr-city-ok { flex: none; color: var(--primary); visibility: hidden; }
.fr-city.on { border-color: var(--primary); background: var(--primary-50, #fdecee); }
.fr-city.on .fr-city-ic { background: var(--primary); color: #fff; }
.fr-city.on .fr-city-ok { visibility: visible; }
.fr-city:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Recherche en cours : « − prix + » (ajustement fin du prix proposé). */
.price-stepper { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; padding: 8px; border-radius: 16px; background: var(--bg); border: 1.5px solid var(--line); }
.price-stepper .ps-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; }
.price-stepper .ps-btn.plus { background: var(--primary); border-color: var(--primary); color: #fff; }
.price-stepper .ps-btn:disabled { opacity: .35; cursor: default; }
.price-stepper .ps-mid { flex: 1; min-width: 0; text-align: center; display: grid; gap: 2px; }
.price-stepper .ps-mid b { font-size: 20px; font-variant-numeric: tabular-nums; }
.price-stepper .ps-mid span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mention « ⓘ » de la carte : repliée et discrète (les crédits complets sont dans Menu › Informations légales). */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { opacity: .55; transform: scale(.82); transform-origin: top right; }
.maplibregl-ctrl-attrib.maplibregl-compact-show { font-size: 10px; max-width: 70vw; }

/* La liste déroulante native de la pastille ville est remplacée par la fenêtre en cartes. */
#cityPill { cursor: pointer; }
#cityPill select { pointer-events: none; -webkit-appearance: none; appearance: none; }

/* Choix avec logo (ex. « Comment payer ? ») : logo à gauche, texte à côté. */
.choice-row.with-ic { justify-content: flex-start; }
.choice-row .choice-ic { flex: none; display: inline-flex; }
.choice-row .choice-ic .ic-brand { border-radius: 10px; }
.choice-row.with-ic .choice-t { flex: 1; min-width: 0; }
.choice-row:disabled .choice-ic { filter: grayscale(1); opacity: .5; }

/* Carte d'une demande (chauffeur) : prix et gain, paiement, indicateurs colorés, itinéraire, actions. */
.rq { padding: 14px; }
.rq-head { display: flex; align-items: center; gap: 10px; }
.rq-who { flex: 1; min-width: 0; display: grid; }
.rq-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-who span { font-size: 13px; color: var(--muted); }
.rq-price { text-align: right; display: grid; }
.rq-price b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-price span { font-size: 12px; color: var(--muted); }
.rq-earn { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 12px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.rq-earn > div:first-child { display: grid; }
.rq-earn > div:first-child span { font-size: 12px; color: var(--muted); }
.rq-earn > div:first-child b { font-size: 20px; color: var(--success, #1e9e5a); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-earn small { font-size: 11px; color: var(--muted); }
.rq-pay { display: flex; align-items: center; gap: 8px; min-width: 0; border-left: 1px solid var(--line); padding-left: 12px; }
.rq-pay > div { display: grid; min-width: 0; }
.rq-pay b { font-size: 13px; line-height: 1.25; }
.rq-pay .ic-brand { flex: none; border-radius: 8px; }
.rq-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.rq-m { display: grid; padding: 8px 10px; border-radius: 12px; border: 1.5px solid transparent; }
.rq-m span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.rq-m b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-m small { font-size: 11px; opacity: .85; }
.rq-m.good { background: #e7f6ee; color: #146c3f; border-color: #bfe6cf; }
.rq-m.mid { background: #fff4e0; color: #8a5a00; border-color: #f6d9a6; }
.rq-m.bad { background: #fde8ea; color: #a3172b; border-color: #f5c2c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rq-m.good { background: #173a28; color: #8fe0b3; border-color: #25543b; } :root:not([data-theme="light"]) .rq-m.mid { background: #3d2f12; color: #f3c877; border-color: #5a461d; } :root:not([data-theme="light"]) .rq-m.bad { background: #3f1a1f; color: #f4a3ad; border-color: #5c262d; } }
.rq-tags { display: grid; gap: 4px; margin: 6px 0 10px; }
.rq-tags:empty { display: none; }
.rq-counter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rq-fixed { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.rq-counter-t { margin: 10px 0 0; }
.rq-counter-t + .rq-counter { margin-top: 6px; }
.rq-counter button { flex: 1 1 0; min-width: 76px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.rq-counter .rq-own { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--ink); }
/* Liste compacte des demandes (Drivo Pro) : une ligne dense par demande, « Accepter » à droite. */
#requestList, #requestList * { overflow-anchor: none; } /* ancrage du défilement géré par driver.js (keepAnchor) */
.rq-list { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.rqr { display: flex; align-items: stretch; min-height: 76px; border-top: 1px solid var(--line); background: var(--surface); }
.rqr:first-child { border-top: 0; }
.rqr-new { animation: rqrNew 1.6s ease-out; }
@keyframes rqrNew { from { background: var(--primary-50); } }
.rqr-main { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: center; padding: 8px 8px 8px 12px; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.rqr-main:active { background: var(--bg); }
.rqr-main > span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.rqr-price { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rqr-net { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rqr-net b { color: var(--success, #1e9e5a); font-weight: 700; font-variant-numeric: tabular-nums; }
.rqr-exp { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rqr-exp.low { color: var(--danger); }
.rqr-m { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 12px; font-weight: 700; padding: 2px 5px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.rqr-m.good { background: #e7f6ee; color: #146c3f; }
.rqr-m.mid { background: #fff4e0; color: #8a5a00; }
.rqr-m.bad { background: #fde8ea; color: #a3172b; }
.rqr-pay { display: inline-flex; flex: none; }
.rqr-pay .ic-brand, .rqr-pay svg { border-radius: 5px; }
.rqr-b { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 20px; padding: 0 4px; border-radius: 6px; background: var(--bg); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.rqr-b.rain { color: #1d5fb8; background: var(--info-50); }
.rqr-b.demand { color: var(--warning-ink); background: var(--warning-50); }
/* Position de l'offre dans la fourchette du trajet (basse / dans la moyenne / haute). */
.rqr-b.range.low, .rq-range.low { color: var(--warning-ink); background: var(--warning-50); }
.rqr-b.range.high, .rq-range.high { color: var(--success); background: var(--success-50); }
.rq-range { justify-self: end; margin-top: 2px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--bg); white-space: nowrap; }
.rqr-l2 { overflow: hidden; }
/* « Rapide » (pas de contre-offre) et « prio » décident du choix : jamais coupés, 2e ligne si besoin (les autres
   pastilles, simples indices, peuvent être coupées pour garder des lignes compactes). */
.rqr-l2:has(.rqr-b.fast, .rqr-b.prio) { flex-wrap: wrap; row-gap: 3px; }
.rqr-l3 { font-size: 13px; color: var(--ink-2); }
.rqr-route { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rqr-side { flex: none; width: 96px; display: grid; align-content: center; justify-items: center; gap: 1px; padding: 6px; text-align: center; font: inherit; }
.rqr-side small { font-size: 12px; font-weight: 600; line-height: 1.2; }
.rqr-side b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rqr-accept { margin: 8px 8px 8px 0; min-height: 44px; border: 0; border-radius: 14px; background: var(--brand); color: var(--on-brand); cursor: pointer; }
.rqr-accept:active { background: var(--brand-press); }
.rqr-accept:disabled { opacity: .6; }
.rqr-bid { background: var(--success-50); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.rqr-wait { margin: 8px 8px 8px 0; border-radius: 14px; border: 1.5px dashed var(--success); color: var(--ink); }
.rqr-wait small { color: var(--ink-2); }
.rqr-wait-t { display: inline-flex; align-items: center; gap: 4px; }
.rqr-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--success); border-right-color: transparent; animation: onbSpin .9s linear infinite; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rqr-m.good { background: #173a28; color: #8fe0b3; }
  :root:not([data-theme="light"]) .rqr-m.mid { background: #3d2f12; color: #f3c877; }
  :root:not([data-theme="light"]) .rqr-m.bad { background: #3f1a1f; color: #f4a3ad; }
  :root:not([data-theme="light"]) .rqr-b.rain { color: #9cc3f5; }
}
/* Détail d'une demande : la carte complète dans une feuille du bas. */
.rq-sheet .overlay-card { padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); touch-action: pan-y; }
.rq-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; }
.rq-sheet-head b { font-size: 17px; font-weight: 800; }
.rq-sheet-x { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.rq-sheet-x:active { background: var(--bg); }
.rq-sheet .card.rq { border: 0; padding: 0; margin: 0; animation: none; overflow: visible; }

/* Photo du chauffeur : en grand dans sa fiche, plein écran au toucher. */
.overlay-card .pf-photo { width: 84px; height: 84px; flex: none; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 5px var(--brand, #e5484d); font-size: 26px; font-weight: 800; }
.overlay-card .pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-viewer { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: pv-in .18s ease; }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer .pv-name { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); text-align: center; color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.photo-viewer .pv-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; }
@keyframes pv-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .photo-viewer { animation: none; } }

/* Sélecteur de langue des apps : Auto (téléphone) | Français | English. */
.lang-switch-app { display: inline-flex; flex: none; background: var(--chip, #f1f2f4); border-radius: 999px; padding: 3px; gap: 2px; }
.lang-switch-app [data-lang] { border: 0; background: none; padding: 7px 11px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted, #6b6f76); cursor: pointer; white-space: nowrap; }
.lang-switch-app [data-lang].on { background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-switch-app { background: #2a2d33; } :root:not([data-theme="light"]) .lang-switch-app [data-lang].on { background: #3a3e46; color: #fff; } }
.drawer-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.drawer-lang > span:first-child { display: inline-flex; align-items: center; gap: 6px; }

/* Crédits de la carte : simple « i » pâle sans pastille (licence OpenStreetMap), détail au toucher et dans
   Menu › Informations légales. */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { background: transparent !important; box-shadow: none; opacity: .28; transform: scale(.62); min-height: 0; }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button { background-color: transparent; }

/* Drivo Pro : compte ouvert sur un autre téléphone (device-session.js). Plein écran, au-dessus de la carte et des
   fenêtres ordinaires (sous l'écran de démarrage) ; variables du thème (clair / sombre). */
.device-moved { position: fixed; inset: 0; z-index: 2600; background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.dmv-card { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.dmv-card h2 { margin: 6px 0 0; font-size: 23px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
.dmv-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dmv-card .dmv-who { font-weight: 700; color: var(--ink); }
.dmv-card .btn { width: 100%; }
.dmv-card .btn-brand { margin-top: 12px; }
.dmv-ico { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-text); }
.dm-backdrop.device-sheet { z-index: 2700; } /* feuilles de relais : au-dessus de l'écran ci-dessus */
.device-sheet .dm-html .small { margin: 0; color: var(--ink-2); line-height: 1.45; }

/* Petits écrans (ex. 720×1612, ~800 px de haut) : illustration d'accueil plus basse pour que le titre entier
   reste visible au-dessus des boutons, sans défiler. */
@media (max-height: 860px) {
  .onb-welcome .onb-hero { height: 210px; }
  .onb-welcome .onb-body { padding-top: 14px; }
  .onb-welcome .logo { margin-bottom: 8px; }
  .onb-welcome .onb-title { font-size: 25px; }
}

/* ---------- Offres des chauffeurs en pile (app passager, #bidList) ----------
   La meilleure offre en entier et surélevée ; les deux suivantes dépassent dessous (≈ 55 % cachées, un peu plus
   petites et plus pâles), comme un paquet de cartes. Toucher la pile déplie la liste complète. */
.bid-card { transition: box-shadow .2s; }
.bid-best { border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); }
.bid-best-badge { display: inline-flex; align-items: center; gap: 4px; margin: -2px 0 8px; padding: 3px 10px 3px 7px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand, #fff); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.bid-best-badge svg { color: currentColor; }
.bids-stacked .bid-best { z-index: 3; margin-bottom: 0; box-shadow: 0 10px 28px rgba(41, 43, 46, .14); }
.bid-stack { position: relative; margin: 0 0 4px; }
.bid-peek { position: relative; display: flex; align-items: flex-end; width: 100%; height: 100px; margin-top: -50px; padding: 0 14px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; color: var(--ink); text-align: left;
  transform-origin: 50% 0; box-shadow: 0 6px 16px rgba(41, 43, 46, .08); cursor: pointer; transition: transform .25s, opacity .25s; }
.bid-peek-1 { z-index: 2; transform: scale(.96); opacity: .9; }
.bid-peek-2 { z-index: 1; transform: scale(.92); opacity: .72; }
.bid-peek:active { transform: scale(.95); }
.bid-peek-2:active { transform: scale(.91); }
.bid-peek:focus-visible, .bid-more:focus-visible, .bid-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.bid-peek-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; }
.bid-peek-av { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; overflow: hidden; flex: none; }
.bid-peek-av .av-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bid-peek-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.bid-peek-who b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bid-peek-who span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bid-peek-price { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bid-peek .countdown { height: 3px; opacity: .7; }
.bid-stack-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 10px; }
.bid-more { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 700; }
.bid-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--primary-text, var(--primary)); font-size: 14px; font-weight: 700; }
#bidList > .bid-toggle { display: flex; width: 100%; margin: -2px 0 10px; }
.bid-in { animation: bidIn .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes bidIn { from { opacity: 0; transform: translateY(-10px); } }
.bid-promoted { animation: bidTop 1.2s ease-out; }
@keyframes bidTop { 0% { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--brand); } 30% { transform: none; } 100% { box-shadow: 0 10px 28px rgba(41, 43, 46, .14); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bids-stacked .bid-best { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .bid-peek { box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) .bid-peek-1 { opacity: .92; }
  :root:not([data-theme="light"]) .bid-peek-2 { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .bid-peek, .bid-card { transition: none; }
  .bid-in, .bid-promoted { animation: none; }
}

/* ---------- Drivo Pro : tri « Meilleur prix », demande du dessus mise en avant et pile ----------
   .rq-best : la 1re ligne devient une carte surélevée avec « Meilleur prix », les autres forment une liste encadrée.
   .rq-stacked (repliée) : les lignes 2 et 3 dépassent sous la 1re (≈ 45 % cachées, réduites, plus pâles) ; leur
   bande visible (.rqr-peekbar) déplie la liste. */
.rqr-peekbar { display: none; }
.rq-list.rq-best { border: 0; border-radius: 0; background: none; overflow: visible; }
.rq-best > .rqr { position: relative; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.rq-best > .rqr:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.rq-best > .rqr.rqr-top { z-index: 3; margin-top: 12px; border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 16px;
  box-shadow: 0 10px 26px rgba(41, 43, 46, .13); }
.rq-best > .rqr-top + .rqr { margin-top: 12px; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.rq-best > .rqr-top + .rqr:last-child { border-radius: 16px; }
.rqr-badge { position: absolute; top: -11px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 6px;
  border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.rqr-top .rqr-main { padding-top: 14px; }
.rq-stacked > .rqr.rqr-peek { margin-top: -40px; min-height: 90px; border: 1px solid var(--line); border-radius: 16px; transform-origin: 50% 0;
  box-shadow: 0 6px 16px rgba(41, 43, 46, .08); transition: transform .25s, opacity .25s; }
.rq-stacked > .rqr-peek-1 { z-index: 2; transform: scale(.96); opacity: .9; }
.rq-stacked > .rqr-peek-2 { z-index: 1; transform: scale(.92); opacity: .75; }
.rq-stacked > .rqr-peek > :not(.rqr-peekbar) { visibility: hidden; }
.rq-stacked > .rqr-peek > .rqr-peekbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px;
  border: 0; border-radius: 0 0 16px 16px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rqr-peekbar b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rqr-peekbar .rqr-route { color: var(--ink-2); white-space: nowrap; }
.rqr-peekbar > svg:last-child { flex: none; color: var(--ink-2); }
.rqr-peek-sent { display: inline-flex; color: var(--success); flex: none; }
.rqr-peekbar:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.rq-stacked > .rqr-peek + .rqr:not(.rqr-peek) { margin-top: 12px; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.rq-stacked > .rqr-peek + .rqr:not(.rqr-peek):last-child { border-radius: 16px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rq-best > .rqr.rqr-top { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .rq-stacked > .rqr.rqr-peek { box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
}
@media (prefers-reduced-motion: reduce) { .rq-stacked > .rqr.rqr-peek { transition: none; } }

/* Inscription avec un numéro (ou un e-mail) qui a déjà un compte : message avant la connexion (onboarding, espace
   flotte, candidature partenaire). */
.acct-exists { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--primary-50); color: var(--ink); text-align: left; }
.acct-exists > svg { flex: none; color: var(--primary-text, var(--primary)); margin-top: 1px; }
.acct-exists b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.acct-exists span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.acct-exists.hidden { display: none; }
.acct-exists span { font-weight: 400; }

/* ---------- Drivo Pro : accueil compact (plus de 6 demandes visibles sans défiler sur 360 × 800) ----------
   Barre du haut sur une ligne, onglets serrés, bandeaux fins d'une ligne (un toucher les déplie), une seule ligne
   d'outils (tri en menu, « Retour maison », distance), feuille ouverte jusque sous la barre du haut quand des
   demandes attendent (#viewMain.rq-tall). */
#onlinePill, #balancePill { white-space: nowrap; }
#viewMain.rq-tall:not(.sized):not(.collapsed) { max-height: calc(100dvh - 64px - env(safe-area-inset-top)); }
#viewMain > .tabs { margin-bottom: 8px; }
#viewMain > .tabs button { flex: 1 1 auto; padding: 7px 6px; white-space: nowrap; }
#tabRequests .rq-strip { padding: 6px 12px; margin-bottom: 6px; font-size: 13px; line-height: 1.35; gap: 8px; min-height: 32px; align-items: center; cursor: pointer; border-radius: 12px; }
#tabRequests .rq-strip > svg { margin-top: 0; }
#tabRequests .rq-strip .rq-strip-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tabRequests .rq-strip .rq-strip-t br { display: none; }
#tabRequests .rq-strip.open { align-items: flex-start; }
#tabRequests .rq-strip.open .rq-strip-t { white-space: normal; }
#tabRequests .rq-strip.open .rq-strip-t br { display: inline; }
#tabRequests .rq-strip button { flex: none; }
.rq-tools { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.rq-tools::-webkit-scrollbar { display: none; }
.rq-tools .rq-sort, .rq-tools .pf-row { display: flex; gap: 6px; flex: none; margin: 0; flex-wrap: nowrap; }
.rq-tools .opt { flex: none; min-height: 34px; padding: 6px 11px; font-size: 13px; gap: 5px; white-space: nowrap; }
.rq-tools #btnSort svg:last-child { margin-left: -1px; opacity: .85; }
@media (max-width: 380px) { .rq-tools #btnSort svg:first-child { display: none; } }
.rq-demo { margin: 0 0 6px; font-size: 12px; }
/* Action requise (ex. photo de profil) au-dessus des demandes : titre + une ligne d'explication, bouton à droite. */
#tabRequests .wn-action { padding: 8px 12px; margin-bottom: 6px; font-size: 13px; line-height: 1.35; gap: 8px; align-items: center; }
#tabRequests .wn-action > span { flex: 1; min-width: 0; }
#tabRequests .wn-action .wn-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
#tabRequests .wn-action br { display: none; }
#tabRequests .wn-action > button { flex: none; max-width: 36%; white-space: normal; text-align: right; line-height: 1.25; }
@media (max-width: 400px) {
  #onlinePill, #balancePill { padding: 8px 12px; font-size: 13.5px; gap: 6px; }
  #topbar { gap: 6px; }
  #topbar .round-btn { width: 40px; height: 40px; }
  #balancePill > svg { display: none; }
}
/* Bandeaux fins côte à côte (météo | demande) ; déplié, un bandeau prend toute la largeur. */
.rq-strips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rq-strips:not(:has(.rq-strip:not(.hidden))) { display: none; }
.rq-strips > .rq-strip { flex: 1 1 0; min-width: 0; margin-bottom: 0 !important; }
.rq-strips > .rq-strip.open { flex-basis: 100%; }
#tabRequests .wn-action:not(.open) .wn-text { display: none; }
#tabRequests .wn-action { cursor: pointer; }
#tabRequests .wn-action.open .wn-text { white-space: normal; }
.rq-tools .pf-row .pf-lbl { display: none; } /* distance : icône seule (libellé dans aria-label) tant qu'aucune limite n'est choisie */
.rq-tools .pf-row [data-pf="radius"]:not(.on) { width: 34px; padding: 0; justify-content: center; }
#viewMain > .sheet-handle { height: 16px; margin: -4px 0 2px; }
#viewMain > .sheet-handle::after { top: 5px; }
#viewMain > .tabs { padding: 3px; }
#viewMain > .tabs button { padding: 6px; }
/* Lignes de demandes un peu plus serrées (≈ 72 px) ; pile « Meilleur prix » : 40 px visibles par carte cachée. */
#requestList .rqr { min-height: 70px; }
#requestList .rqr-main { gap: 2px; padding: 5px 6px 5px 12px; }
#requestList .rqr-top .rqr-main { padding-top: 12px; }
#requestList .rqr-accept, #requestList .rqr-wait { margin: 6px 6px 6px 0; }
#requestList .rq-stacked > .rqr.rqr-peek { margin-top: -44px; min-height: 84px; }
#requestList .rq-stacked > .rqr-peek > .rqr-peekbar { height: 40px; }
#requestList .rq-stacked > .rqr-peek + .rqr:not(.rqr-peek), #requestList .rq-best > .rqr-top + .rqr:not(.rqr-peek) { margin-top: 10px; }
#requestList .rqr-m { padding: 1px 5px; }

/* Mode conduite, petit écran : la colonne de boutons de droite tient toujours entre la consigne et la barre du bas
   (classes posées par layoutDrive() selon la place réelle). Zoom +/− réunis en une seule pilule. */
body.drive-mode #driveSide.ds-compact { gap: 8px; }
body.drive-mode #driveSide.ds-compact .drive-fab { width: 48px; height: 48px; }
body.drive-mode #driveSide.ds-compact #btnZoomIn { border-radius: 24px 24px 0 0; box-shadow: 0 -1px 8px rgba(0,0,0,.14); }
body.drive-mode #driveSide.ds-compact #btnZoomOut { margin-top: -8px; border-radius: 0 0 24px 24px; border-top: 1px solid var(--line, #e3e5e8); box-shadow: 0 4px 8px rgba(0,0,0,.14); }
body.drive-mode #driveSide.ds-tight { gap: 6px; }
body.drive-mode #driveSide.ds-tight .drive-fab { width: 44px; height: 44px; }
body.drive-mode #driveSide.ds-tight #btnZoomIn { border-radius: 22px 22px 0 0; }
body.drive-mode #driveSide.ds-tight #btnZoomOut { margin-top: -6px; border-radius: 0 0 22px 22px; }
body.drive-mode #driveSide.ds-tight .drive-fab-lbl { font-size: 9.5px; }
body.drive-mode #driveSide.ds-tight .drive-fab-lbl svg { width: 19px; height: 19px; }
/* Encore trop haut : zoom + et − côte à côte sur une ligne (deux colonnes), les autres boutons restent à droite. */
body.drive-mode #driveSide.ds-min { display: grid; grid-template-columns: 44px 44px; column-gap: 6px; }
body.drive-mode #driveSide.ds-min > * { grid-column: 2; }
body.drive-mode #driveSide.ds-min > #btnZoomIn { grid-column: 1; border-radius: 22px 0 0 22px; }
body.drive-mode #driveSide.ds-min > #btnZoomOut { grid-column: 2; margin-top: 0; margin-left: -6px; width: 50px; border-top: 0; border-left: 1px solid var(--line, #e3e5e8); border-radius: 0 22px 22px 0; }
/* Toujours trop haut (consigne sur 5 lignes + panneau du Mode Place) : tous les boutons sur deux colonnes, zoom en tête,
   « Quitter » à droite. */
body.drive-mode #driveSide.ds-2col { row-gap: 6px; }
body.drive-mode #driveSide.ds-2col > * { grid-column: auto; }
body.drive-mode #driveSide.ds-2col > #btnZoomIn, body.drive-mode #driveSide.ds-2col > #btnZoomOut { order: -1; }
body.drive-mode #driveSide.ds-2col > #btnDriveExit { grid-column: 2; }
/* Prix des cartes (course en cours, offres) : jamais coupé sur deux lignes (« 800 / FCFA »). */
.card .price .v { white-space: nowrap; }
/* Radar (petit écran) : sous-titre et conseil du prix sur deux lignes au plus, au lieu d'être coupés en « … ». */
.radar-status > div:last-child { min-width: 0; }
#radarSub { white-space: normal !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.price-stepper .ps-mid span { white-space: normal; text-overflow: clip; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Réglages (petit écran) : langue, type de carte, point de départ — le choix passe sous le libellé au lieu
   d'écraser la description sur 5 lignes. */
@media (max-width: 400px) {
  .toggle-row:has(> #langSlot, > #langSwitch, > #mapStyleSlot, > #pickupPref) { flex-wrap: wrap; row-gap: 8px; }
  .toggle-row:has(> #langSlot, > #langSwitch, > #mapStyleSlot, > #pickupPref) > .main { flex: 1 1 100%; }
  .toggle-row > #langSlot, .toggle-row > #langSwitch, .toggle-row > #mapStyleSlot { flex: 1 1 100%; display: flex; }
  .toggle-row > #langSlot .lang-switch-app, .toggle-row > #langSwitch .lang-switch-app { flex: 1; }
  .toggle-row > #langSlot .lang-switch-app [data-lang], .toggle-row > #langSwitch .lang-switch-app [data-lang] { flex: 1; }
  .toggle-row > #mapStyleSlot > * { flex: 1; max-width: none !important; }
  .toggle-row > #pickupPref { flex: 1 1 100%; max-width: none !important; }
}
@media (max-width: 400px) {
  .kv:has(> #drvLang) { flex-wrap: wrap; row-gap: 8px; }
  .kv:has(> #drvLang) > span:first-child { flex: 1 1 100%; }
  .kv > #drvLang { flex: 1 1 100%; display: flex; }
  .kv > #drvLang .lang-switch-app { flex: 1; }
  .kv > #drvLang .lang-switch-app [data-lang] { flex: 1; }
  /* Détail d'une demande : contre-offres et « Mon prix » sur une ligne. */
  .rq-counter button { min-width: 0; padding: 0 4px; font-size: 14px; white-space: nowrap; }
  /* Portefeuille : montants et recharges jamais coupés en deux lignes. */
  #tabWallet [data-topup] { white-space: nowrap; font-size: 14px; padding-left: 6px; padding-right: 6px; }
}
#walletOverdraft .kv b, #walletToday .kv b, #walletPayout .kv b { white-space: nowrap; }
@media (max-width: 380px) {
  .rq-counter .rq-own svg { display: none; }
  #tabWallet [data-topup] { font-size: 13px; }
}
/* Commande (petit écran) : champ « Arrivée » lisible — durée masquée (elle est dans la ligne du trajet), « + Arrêt »
   en icône seule, boutons plus serrés, dès qu'une destination est choisie. */
@media (max-width: 400px) {
  #viewForm #fieldTo:has(#btnClearTo:not(.hidden)) .field-meta { display: none; }
  #viewForm #fieldTo:has(#btnClearTo:not(.hidden)) #btnAddStop .fa-lbl { display: none; }
  #viewForm #fieldTo:has(#btnClearTo:not(.hidden)) .field-act { padding: 6px 8px; margin-left: 4px; }
  #viewForm #fieldTo .fl { min-width: 0; flex: 1 1 auto; }
}

/* Bandeaux pluie / trafic / demande de la liste des demandes : texte complet sur deux lignes au plus (plus coupé
   par « … ») ; chaque bandeau prend toute la largeur quand deux ne tiennent pas côte à côte. */
#tabRequests .rq-strip .rq-strip-t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: clip; }
#tabRequests .rq-strip.open .rq-strip-t { -webkit-line-clamp: unset; line-clamp: none; display: block; }
.rq-strips > .rq-strip { flex: 1 1 100%; }
#topbar #balancePill { white-space: nowrap; }

/* ---------- Drivo Pro, Portefeuille : gains par période (public/js/driver-wallet.js) ---------- */
.wl { --wl-plus: #0f8a57; --wl-minus: #c8102e; margin: 12px 0 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wl, :root:not([data-theme="light"]) .wl-hist { --wl-plus: #5fd6a0; --wl-minus: #ff8a95; } }
:root[data-theme="dark"] .wl, :root[data-theme="dark"] .wl-hist { --wl-plus: #5fd6a0; --wl-minus: #ff8a95; }
.wl-hist { --wl-plus: #0f8a57; --wl-minus: #c8102e; }
.wl .plus, .wl-hist .plus, #walletTx .wl-hist b.plus { color: var(--wl-plus); }
.wl .minus, .wl-hist .minus, #walletTx .wl-hist b.minus { color: var(--wl-minus); }
.wl-seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--track); }
.wl-seg button { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 4px 6px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.15; }
@media (max-width: 340px) { .wl-seg button { font-size: 12.5px; padding: 4px 3px; } }
.wl-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.wl-seg button:focus-visible, .wl-bar:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.wl-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.wl-range label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); flex: 1 1 120px; min-width: 0; }
.wl-range input { height: 42px; min-width: 0; width: 100%; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.wl-range .btn { width: auto; height: 42px; flex: 1 1 100%; }
.wl-card { margin-top: 10px; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); transition: opacity 0.15s; }
.wl-card.busy, #wlList.busy { opacity: 0.55; }
.wl-load { padding: 18px 0; text-align: center; color: var(--muted); font-size: 14px; }
.wl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: 14px; }
.wl-dates { color: var(--muted); font-size: 13px; }
.wl-dates::first-letter { text-transform: uppercase; }
.wl-netl { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wl-net { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wl-net.plus { color: var(--ink); }
.wl-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--muted); }
.wl-meta span + span::before { content: '·'; margin-right: 6px; }
.wl-chart { display: flex; align-items: stretch; gap: 2px; height: 104px; margin: 12px 0 2px; border-bottom: 1.5px solid var(--line); }
.wl-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0; border-radius: 4px 4px 0 0; }
.wl-bar-f { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.wl-bar-f i { display: block; width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: var(--wl-plus); opacity: 0.75; }
.wl-bar.neg .wl-bar-f i { background: var(--wl-minus); }
.wl-bar.sel .wl-bar-f i, .wl-bar:hover .wl-bar-f i { opacity: 1; }
.wl-bar-l { height: 16px; font-size: 10.5px; line-height: 16px; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.wl-chart { padding-bottom: 0; }
.wl-cap { min-height: 18px; margin: 6px 0 2px; }
.wl-cap .notranslate { display: inline-block; }
.wl-cap .notranslate::first-letter { text-transform: uppercase; }
.wl-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.wl-sec b { font-size: 14px; text-transform: none; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-src { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14.5px; }
.wl-src .wl-l { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.wl-src b { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-src.zero { color: var(--muted-2); }
.wl-src.zero .wl-ic { opacity: 0.45; filter: grayscale(1); }
.wl-n { font-size: 12px; color: var(--muted); }
.wl-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--track); color: var(--ink); }
.wl-ic svg { display: block; }
.wl-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1.5px solid var(--line); font-weight: 800; }
.wl-tot b { font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-tr { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.wl-tr summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 6px 0; list-style-position: inside; }
#wlHistTitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.wl-htag { font-size: 13px; font-weight: 600; color: var(--muted); }
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.wl-chips .tx-chip { padding: 6px 12px; min-height: 36px; font-size: 13.5px; }
.wl-day { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 14px 0 2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.wl-day > span { min-width: 0; }
.wl-day > span::first-letter { text-transform: uppercase; }
.wl-day > b { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; }
.wl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wl-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-m > b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.wl-sub { display: flex; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.wl-sub > span:not(:last-child)::after { content: '·'; margin: 0 5px; }
.wl-amt { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.wl-actions .btn { flex: 1 1 140px; width: auto; }

/* Profil Drivo Pro › Documents : une carte par pièce (nom complet, état, échéance, action). */
.doc-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 0;background:var(--surface);display:grid;gap:8px}
.doc-card.doc-expired{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.doc-card.doc-expiring{border-color:color-mix(in srgb,#d4a017 50%,var(--line))}
.doc-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.doc-card-t{font-weight:650;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.doc-card-v{display:block;font-weight:500;font-size:13px;color:var(--ink-2)}
.doc-card-p{flex:none;margin:0 !important;padding:3px 10px !important;font-size:12.5px;white-space:nowrap}
.doc-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.doc-card-f .btn{width:auto;flex:none}
.doc-card-link{background:none;border:0;padding:4px 0;color:var(--primary-text,var(--primary));font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.doc-card-f .btn,.doc-card-link{margin-left:auto}
/* Cartes de ville : noms entiers (« Yaoundé », « Bafoussam » étaient coupés à 360 px) ; la coche ne réserve plus
   de place quand la ville n'est pas choisie. */
.fr-city { position: relative; padding-right: 10px; gap: 8px; }
.fr-city-t b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
.fr-city-ok { display: none; position: absolute; top: 6px; right: 8px; visibility: visible; }
.fr-city.on .fr-city-ok { display: block; }
@media (max-width: 380px) { .fr-city-ic { width: 32px; height: 32px; } .fr-city { padding-left: 10px; } }