/* ============================================================
   TripForge — modern theme
   ============================================================ */

:root {
  /* Palette */
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #e7ebf0;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  /* Accents — sunset travel */
  --coral: #ff6b4a;
  --coral-600: #f4502c;
  --amber: #ffb02e;
  --teal: #14b8a6;
  --indigo: #6366f1;
  --violet: #8b5cf6;

  --grad-warm: linear-gradient(135deg, #ff7e5f 0%, #ffb347 100%);
  --grad-night: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);

  /* Type colors */
  --c-start: #f59e0b;                    /* point de départ : ambre, distinct des trois autres */
  --c-place: #6366f1;
  --c-hotel: #ec4899;
  --c-activity: #14b8a6;

  /* Semantic tokens (bg / border / text) — one place, dark-mode aware */
  --coral-text: #d23f1f;                 /* coral with AA contrast as text on light */
  --danger: #ef4444; --danger-bg: #fee2e2; --danger-text: #dc2626;
  --warn-text: #b45309; --warn-bg: rgba(255,176,46,.16); --warn-border: #f6d28a;
  --success-text: #0f9d6b; --success-bg: rgba(20,184,166,.14);
  --info-text: #4f52d6; --info-bg: rgba(99,102,241,.12);

  /* UI */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .06);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, .16);
  --rail-w: 78px;
  --panel-w: 392px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, button { font-family: inherit; }
a { color: var(--coral-600); }

/* The hidden attribute must always win over custom display values
   (.leg, .day__summary, .item__refuel… set display:flex/inline-flex). */
[hidden] { display: none !important; }

/* Consistent keyboard focus ring on every interactive control (mouse clicks stay clean) */
:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
.item__node:focus-visible, .icon-btn:focus-visible, .map-fab:focus-visible,
.day__view:focus-visible, .day__collapse:focus-visible { border-radius: 50%; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Layout shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--panel-w) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Bloc conteneur des enfants positionnés. Sous 860px `.panel` passe en `position: absolute;
     inset: 0` : sans ce `relative`, il se cale sur le bloc conteneur initial et ignore le
     `margin-top: 40px` de `.app.shared` — l'en-tête du volet passait alors sous le bandeau
     de partage (position: fixed, z-index 1500) et devenait incliquable. */
  position: relative;
}

/* ===== Écran de chargement (logo officiel) ===== */
.app-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #f4f6f9;
  transition: opacity .45s ease, visibility .45s ease;
}
.app-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader__mark {
  width: 92px; height: 92px; border-radius: 22px;
  box-shadow: 0 20px 55px rgba(255, 107, 74, .28);
  animation: appLoaderPulse 1.5s ease-in-out infinite;
}
.app-loader__bar { width: 132px; height: 4px; border-radius: 999px; background: rgba(15, 23, 42, .08); overflow: hidden; }
.app-loader__bar span {
  display: block; width: 42%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffb07c, #ff6b4a);
  animation: appLoaderBar 1.15s ease-in-out infinite;
}
@keyframes appLoaderPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes appLoaderBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }
html.dark .app-loader { background: #0e1014; }
html.dark .app-loader__bar { background: rgba(255, 255, 255, .1); }

/* ===== Auth (connexion / inscription) — épuré + logo ===== */
#authView { display: flex; flex-direction: column; gap: 16px; }
.auth-hero { text-align: center; padding: 4px 2px 2px; }
.auth-hero__logo {
  width: 64px; height: 64px; border-radius: 18px;
  box-shadow: 0 12px 30px rgba(255, 107, 74, .25);
  margin-bottom: 14px;
}
.auth-hero__title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; margin: 0 0 7px; color: var(--ink); letter-spacing: -.01em; }
.auth-hero__sub { font-size: .86rem; color: var(--muted); margin: 0 auto; line-height: 1.5; max-width: 32ch; }
#authView .field__input { padding: 12px 14px; }
#authView #authSubmit { margin-top: 4px; padding: 13px; font-size: .98rem; }
#authView #forgotBtn { margin-top: 2px; align-self: center; }

/* ===== Volet : sélecteur Aperçu / Jours + panneaux ===== */
.pv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pv[hidden] { display: none; }
.pv--pad { overflow-y: auto; gap: 15px; padding: 16px 18px 24px; }
#pvOverview { overflow-y: auto; gap: 12px; padding: 12px 14px 18px; }

/* ===== Cartes du volet « Aperçu » ===== */
.ov-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.ov-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ov-card__title { font-family: var(--font-display); font-size: .92rem; font-weight: 700; margin: 0; }

/* progression / compte à rebours */
.ov-progress { color: #fff; border: none; background: linear-gradient(135deg, #2c2723, #16130f); }
html.dark .ov-progress { background: linear-gradient(135deg, #243042, #141b25); }
.ov-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ov-progress__label { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; }
.ov-progress__sub { font-size: .73rem; opacity: .82; white-space: nowrap; }
.ov-progress__bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.ov-progress__bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ffb07c, #ff6b4a); transition: width .5s ease; }
.ov-progress[data-state="done"] .ov-progress__bar span { background: #34d399; }

/* aperçu par jour */
.ov-days { display: grid; gap: 6px; }
.ov-day { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid transparent; border-radius: 11px; padding: 7px 9px; transition: transform .12s, border-color .12s, background-color .12s, box-shadow .12s; }
.ov-day:hover { border-color: var(--coral); transform: translateX(2px); }
.ov-day__n { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--coral); min-width: 24px; }
.ov-day__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ov-day__main b { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.ov-day__main small, .ov-day__stat small { color: var(--muted); font-size: .72rem; }
.ov-day__stat { display: flex; flex-direction: column; align-items: flex-end; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* États d'un jour dans l'aperçu. Deux signaux DISTINCTS PAR LA FORME, pour qu'un jour à la
   fois actuel et accompli les cumule sans qu'aucune règle n'en annule une autre :
     — accompli (toutes les étapes cochées) : fond corail teinté, propriété `background` ;
     — aujourd'hui : anneau corail plein, propriété `box-shadow` inset (et non `border-color`,
       que `.ov-day:hover` impose déjà, ni un contour extérieur qui déborderait du gap de 6px).
   Le compteur « ✓ 5/5 » double le signal en texte : l'information n'est jamais que chromatique. */
.ov-day--done { background: rgba(255,107,74,.12); }
.ov-day--done .ov-day__main b,
.ov-day--done .ov-day__main small { color: var(--coral-text); }
.ov-day--today { box-shadow: inset 0 0 0 2px var(--coral); }
.ov-day--today .ov-day__n { color: #fff; background: var(--coral); border-radius: 7px; padding: 1px 5px; text-align: center; }
/* 12 % de corail est quasi invisible sur --surface-2 en sombre : même réglage qu'en 507. */
html.dark .ov-day--done { background: rgba(255,107,74,.2); }

/* ===== Frise des jours (niveau 1 : vue d'ensemble + nav rapide) ===== */
.day-strip {
  display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 6; background: var(--surface);
  scrollbar-width: thin;
}
.day-strip::-webkit-scrollbar { height: 5px; }
.day-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.day-pill {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: 6px 11px; border-radius: 12px; line-height: 1.15;
  border: 1px solid var(--line); background: var(--surface-2);
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.day-pill:hover { border-color: var(--coral); }
.day-pill:active { transform: scale(.96); }
.day-pill__n { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--ink); }
.day-pill__date { font-size: .65rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.day-pill__count { font-size: .58rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.day-pill--active { background: var(--ink); border-color: var(--ink); }
.day-pill--active .day-pill__n { color: #fff; }
.day-pill--active .day-pill__date, .day-pill--active .day-pill__count { color: rgba(255, 255, 255, .78); }
.day-pill--today { box-shadow: inset 0 0 0 1.5px var(--coral); }
.day-pill--today.day-pill--active { box-shadow: none; }
/* Mode sombre : l'actif --ink devient clair → fond corail + texte blanc pour rester lisible */
html.dark .day-pill--active { background: var(--coral); border-color: var(--coral); }
html.dark .day-pill--active .day-pill__n { color: #fff; }
html.dark .day-pill--active .day-pill__date,
html.dark .day-pill--active .day-pill__count { color: rgba(255, 255, 255, .85); }

/* Niveau 2 : le jour déplié (sélectionné) légèrement mis en avant ; en-têtes repliés cliquables */
.days .day:not(.day--collapsed) { border-color: #ffd2c4; box-shadow: 0 4px 16px rgba(255, 107, 74, .08); }
html.dark .days .day:not(.day--collapsed) { border-color: #5a3a2e; }
.day--collapsed .day__head { cursor: pointer; }

/* ===== Portail d'administration (modale plein écran) ===== */
.modal.modal--full { padding: 0; }
.modal--full .modal__panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.modal--full .modal__body { padding: 16px clamp(14px, 3vw, 40px) 28px; }

/* ===== Grande modale à deux volets (Réglages / Compte) ===== */
.modal--wide .modal__panel { max-width: 900px; height: min(660px, calc(100dvh - 40px)); }
/* déconnecté : le formulaire de connexion reprend une largeur de lecture confortable */
.modal--wide.is-auth .modal__panel { max-width: 460px; height: auto; }
.sheet { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sheet[hidden] { display: none; }
.sheet__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px; overflow-y: auto;
  background: var(--surface-2); border-right: 1px solid var(--line);
}
.sheet__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 11px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: .855rem; font-weight: 600; font-family: var(--font); text-align: left;
  transition: background .14s, color .14s;
}
.sheet__item:hover { background: var(--surface); color: var(--ink); }
.sheet__item.is-active { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.sheet__ic { width: 20px; text-align: center; flex-shrink: 0; font-size: .98rem; }
.sheet__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sheet__badge {
  margin-left: auto; flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .67rem; font-weight: 800; display: grid; place-items: center;
}
.sheet__badge--soft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.sheet__item.is-active .sheet__badge--soft { background: var(--bg); }
.sheet__main { overflow-y: auto; padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sheet__sec { display: flex; flex-direction: column; gap: 14px; }
.sheet__sec[hidden] { display: none; }
.sheet__head { display: flex; flex-direction: column; gap: 3px; }
.sheet__h { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.sheet__desc { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* ===== Onglet « À vérifier » ===== */
.warn-list { display: flex; flex-direction: column; gap: 8px; }
.warn {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.warn:hover { background: var(--surface-2); transform: translateX(2px); }
.warn--bloquant { border-left: 3px solid var(--danger); }
.warn--important { border-left: 3px solid var(--amber); }
.warn--conseil { border-left: 3px solid var(--teal); }
.warn__ic { font-size: 1.05rem; line-height: 1.3; flex-shrink: 0; }
.warn__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.warn__txt b { font-size: .875rem; font-weight: 650; letter-spacing: -.01em; }
.warn__txt i { font-style: normal; font-size: .775rem; color: var(--muted); line-height: 1.42; }
.warn__go { flex-shrink: 0; align-self: center; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.warn-ok {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 18px; text-align: center; border: 1px dashed var(--line); border-radius: 14px;
  color: var(--muted);
}
.warn-ok__ic { font-size: 2rem; }
.warn-ok b { color: var(--ink); font-size: .95rem; }
.warn-ok span { font-size: .8rem; max-width: 34ch; line-height: 1.45; }

/* ===== Compte : profil ===== */
.account-id__meta { font-size: .78rem; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.acc-fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 2px; }
.acc-fact b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.acc-fact span { font-size: .68rem; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); font-weight: 700; }
.acc-badge { font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.acc-badge--ok { color: var(--success-text); background: var(--success-bg); }
.acc-badge--warn { color: var(--warn-text); background: var(--warn-bg); }

/* ===== Réglages : une ligne par capacité (itinéraire, import IA) =====
   Au repos, deux lignes `.tool` ; « Modifier » déplie `.cap__panel`, un seul à la fois.
   Tout reste dans le flux : le pied « Enregistrer » ne doit jamais être en position fixe,
   sinon il recouvre le champ de saisie sur un téléphone. */
.caps { display: flex; flex-direction: column; gap: 10px; }
.cap { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
/* `.tool` est déclaré plus bas dans ce fichier : sans le `.cap` de tête, ses valeurs
   (rayon, marge intérieure, bordure au survol) l'emporteraient à spécificité égale. */
.cap .cap__row { border-radius: 0; padding: 13px 14px; }
.cap .cap__row:hover { border-color: transparent; }
.cap__act {
  flex-shrink: 0; font-size: .76rem; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--surface-2);
}
.cap--open .cap__row { border-bottom: 1px solid var(--line); }
.cap--alerte { border-color: var(--warn-border); background: var(--warn-bg); }
.cap--alerte .tool__txt i { color: var(--warn-text); }
/* Troisième ligne : le quota de la clé PRÊTÉE. Distinct de la phrase d'état pour ne plus
   se faire tronquer en fin de ligne sur un écran étroit. */
.cap__quota { color: var(--coral-text) !important; font-weight: 650; margin-top: 2px; }
.cap--alerte .cap__row:hover { background: transparent; }
.cap__panel { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-width: 0; }
.cap__key { display: flex; flex-direction: column; gap: 10px; }
.cap__note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px;
}
.cap__note--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.cap__foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); padding-top: 12px;
}
.cap__foot[hidden] { display: none; }
.cap__foot-txt { flex: 1; min-width: 120px; font-size: .78rem; font-weight: 700; color: var(--warn-text); }
/* Sur un téléphone, « 🗺️ OpenRouteService » passe à la ligne DANS son bouton : les deux
   options s'empilent alors en pleine largeur, chacune sur une seule ligne. */
@media (max-width: 420px) {
  .cap__panel .segmented--inline { flex-direction: column; }
}

/* ===== Budget : sections repliables ===== */
.bg-sec { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bg-sec[hidden] { display: none; }
.bg-sec__head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; cursor: pointer; user-select: none; list-style: none;
  border-radius: 14px;
}
.bg-sec__head::-webkit-details-marker { display: none; }
.bg-sec__head:hover { background: var(--surface-2); }
.bg-sec__t { flex: 1; min-width: 0; font-family: var(--font-display); font-size: .98rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.bg-sec__v { flex-shrink: 0; font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: var(--ink-soft); }
.bg-sec__chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); transition: transform .18s; }
.bg-sec[open] > .bg-sec__head { border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); }
.bg-sec[open] > .bg-sec__head .bg-sec__chev { transform: rotate(180deg); }
.bg-sec__body { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px 16px; }

/* Coûts hors étapes : une ligne par poste, libellé à gauche, montant à droite */
.bg-costs { display: flex; flex-direction: column; }
.bg-cost {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 2px; border-bottom: 1px dashed var(--line); cursor: text;
}
.bg-cost:last-child { border-bottom: none; }
.bg-cost > span { font-size: .875rem; font-weight: 600; color: var(--ink); }
.bg-cost input { width: 118px; flex-shrink: 0; text-align: right; }

.bg-days { display: flex; flex-direction: column; gap: 6px; }
.bg-day {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .14s, border-color .14s;
}
.bg-day:hover { background: var(--surface-2); border-color: var(--coral); }
.bg-day__n {
  flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: .74rem;
  color: var(--coral-text); background: rgba(255,107,74,.12); border-radius: 7px; padding: 3px 7px;
}
.bg-day__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bg-day__main b { font-size: .82rem; font-weight: 650; text-transform: capitalize; }
.bg-day__main small { font-size: .72rem; color: var(--muted); }
.bg-day__bar { display: block; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bg-day__bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad-warm); }
.bg-day__tot { flex-shrink: 0; font-family: var(--font-display); font-size: .92rem; font-weight: 700; }
html.dark .bg-day__bar { background: #2b3440; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.admin-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.admin-card__v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.admin-card__l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }

.admin-section { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-count { color: var(--muted); font-weight: 700; }
.admin-search { flex: 1; min-width: 180px; max-width: 360px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .86rem; }
.admin-search:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.15); }

/* Vue en grille : tout est centré horizontalement, colonnes comme actions. Les cellules
   d'identité gardent leur alignement interne à gauche, sinon un email long donnerait un
   bloc de texte centré illisible ; c'est la COLONNE qui est centrée, pas son contenu. */
.admin-u__email { font-weight: 600; color: var(--ink); word-break: break-word; }
.admin-u__name { font-size: .76rem; color: var(--muted); margin-top: 1px; }

/* ===== Comptes : une FICHE par utilisateur (le tableau à 8 colonnes ne tenait nulle part) ===== */
.admin-users { display: grid; gap: 10px; }
.admin-u {
  display: flex; flex-direction: column; gap: 11px;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  background: var(--surface); transition: border-color .14s, box-shadow .14s;
}
.admin-u:hover { border-color: var(--coral); box-shadow: var(--shadow-sm); }
.admin-u__head { display: flex; align-items: center; gap: 11px; }
.admin-u__ava {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: .95rem; color: #fff; background: var(--coral);
}
.admin-u__id { flex: 1; min-width: 0; }
.admin-u__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); }
.admin-u__stats b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-u__keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.admin-u__key { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-u__key > span:first-child {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.admin-u .admin-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.admin-sortsel { flex: 0 0 auto; cursor: pointer; }
html.dark .admin-u { background: var(--surface-2); }

.admin-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.admin-badge--on { background: rgba(22,163,74,.14); color: #16a34a; }
.admin-badge--off { background: rgba(239,68,68,.14); color: #ef4444; }
/* « Sans effet » n'est pas une panne : un prêt inutile se signale en gris, pas en rouge. */
.admin-badge--mute { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.admin-badge--tight { padding: 1px 5px; }  /* pastille icône (✓) : plus compacte que le badge texte */

.admin-actions { display: flex; gap: 4px; justify-content: center; white-space: nowrap; }
.admin-act { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 7px; font-size: .92rem; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s, transform .1s; }
.admin-act:hover:not(:disabled) { border-color: var(--coral); background: var(--surface-2); transform: translateY(-1px); }
.admin-act--danger:hover:not(:disabled) { border-color: #ef4444; background: rgba(239,68,68,.1); }
.admin-act:disabled { opacity: .45; cursor: progress; }

.admin-empty { color: var(--muted); font-size: .88rem; padding: 26px; text-align: center; }

/* ===== Tutoriel (onboarding) ===== */
.tuto__panel { max-width: 420px; text-align: center; position: relative; overflow: hidden; }
.tuto__skip { position: absolute; top: 12px; right: 14px; z-index: 2; background: none; border: none; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 5px 9px; border-radius: 8px; }
.tuto__skip:hover { color: var(--ink); background: var(--surface-2); }
.tuto__stage { padding: 42px 28px 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 236px; }
.tuto__ic { width: 86px; height: 86px; display: grid; place-items: center; font-size: 44px; line-height: 1; border-radius: 24px; background: linear-gradient(135deg, #fff1ea, #ffe0d4); box-shadow: 0 12px 26px rgba(255, 107, 74, .22); }
html.dark .tuto__ic { background: linear-gradient(135deg, #2a2018, #1d1611); box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }
.tuto__ic--logo { background: none !important; box-shadow: none !important; }
.tuto__ic img { width: 100%; height: 100%; border-radius: 22px; }
.tuto__title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; margin: 6px 0 0; }
.tuto__text { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin: 0; max-width: 320px; }
.tuto__dots { display: flex; justify-content: center; gap: 7px; padding: 16px 0; }
.tuto__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .25s, background .25s; }
.tuto__dot.is-active { background: var(--coral); width: 22px; }
.tuto__nav { display: flex; gap: 10px; padding: 0 22px 22px; }
.tuto__nav .btn { flex: 1; justify-content: center; }

/* ===== Import IA (texte → itinéraire) ===== */
.ai__panel { max-width: 620px; }
.ai-text { width: 100%; resize: vertical; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.5; }
.ai-text:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .15); }
.ai-status { font-size: .86rem; font-weight: 600; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); }
.ai-status--ok { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ai-status--warn { background: rgba(245, 158, 11, .14); color: #b45309; }
.ai-status--err { background: rgba(239, 68, 68, .12); color: #ef4444; }
.ai-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.ai-preview__head { padding: 10px 12px; background: var(--surface-2); font-size: .86rem; border-bottom: 1px solid var(--line); }
.ai-day { border-bottom: 1px solid var(--line); }
.ai-day:last-child { border-bottom: none; }
.ai-day__t { padding: 8px 12px 2px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--coral); display: flex; align-items: center; gap: 8px; }
.ai-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 12px; font-size: .85rem; min-width: 0; }
.ai-item:last-child { padding-bottom: 10px; }
.ai-item__ic { flex-shrink: 0; }
.ai-item__n { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ai-item__a { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ai-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ai-item__meta { font-size: .72rem; color: var(--ink-soft); font-weight: 600; }
.ai-item__notes { font-size: .72rem; color: var(--muted); line-height: 1.35; }
.ai-day__h { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--muted); }

/* ===== Import IA : éléments à compléter avant création ===== */
.ai-fix { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: 12px; }
.ai-fix__head { font-size: .85rem; font-weight: 700; color: var(--warn-text); }
.ai-fix__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-fix__row--date { flex-direction: column; align-items: stretch; gap: 4px; }
.ai-fix__lbl { font-size: .8rem; font-weight: 600; color: var(--ink); flex-shrink: 0; min-width: 150px; }
.ai-fix__q { flex: 1; min-width: 160px; }
.ai-fix__hint { font-size: .74rem; color: var(--muted); }
.ai-fix__state { font-size: .78rem; font-weight: 700; color: var(--muted); min-width: 60px; }
.ai-fix__state.is-ok { color: var(--success-text); }
.ai-fix__state.is-err { color: var(--danger-text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Admin : réglages clés / modèle / limites ===== */
.admin-cfg { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.admin-cfg > summary { padding: 12px 15px; font-weight: 700; font-size: .9rem; cursor: pointer; user-select: none; }
.admin-cfg[open] > summary { border-bottom: 1px solid var(--line); }
/* 420px et non 290 : en dessous, une carte de capacité ne laisse plus qu'une
   soixantaine de pixels au nom du service, entre son icône, son badge d'état et son
   chevron. Mieux vaut une colonne lisible que deux colonnes tronquées. */
.admin-cfg__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; padding: 15px; }

/* Une carte par service : clé + réglage dépendant + limite, au même endroit */
.admin-svc {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.admin-svc__head { display: flex; align-items: center; gap: 10px; }
.admin-svc__ic { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.admin-svc__head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.admin-svc__head b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.admin-svc__head i { font-style: normal; font-size: .74rem; color: var(--muted); }
.admin-svc__state { flex-shrink: 0; }
/* Carte de service repliable — même grammaire que les sections du budget. */
.admin-svc__head { cursor: pointer; list-style: none; user-select: none; }
.admin-svc__head::-webkit-details-marker { display: none; }
.admin-svc__head:hover b { color: var(--coral-text); }
.admin-svc__chev { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; transition: transform .18s; }
.admin-svc[open] .admin-svc__chev { transform: rotate(180deg); }
.admin-svc__body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* Le résumé doit tenir sur UNE ligne même en colonne étroite : il est tronqué plutôt
   qu'empilé sur trois lignes, la portée complète étant rappelée dans le corps. */
.admin-svc__head > div b,
.admin-svc__head > div i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-svc__portee { margin: 0; font-size: .74rem; color: var(--muted); }

.admin-cfg .field { gap: 4px; }
.admin-cfg .field__input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; width: 100%; }
.admin-cfg .field__input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .15); }
.admin-cfg__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 0 15px 15px;
}
.admin-cfg__legend { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.45; flex: 1; min-width: 240px; }

/* Une carte par CAPACITÉ (itinéraire, import IA) ; dedans, une `.admin-svc` par service
   du catalogue. Les deux niveaux se distinguent par le fond, pas par une bordure de plus. */
.admin-cap {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.admin-cap__head { display: flex; align-items: center; gap: 10px; }
.admin-cap__ic { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.admin-cap__head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.admin-cap__head b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); }
.admin-cap__head i { font-style: normal; font-size: .74rem; color: var(--muted); }
.admin-cap__svcs { display: flex; flex-direction: column; gap: 10px; }
.admin-cap .admin-svc { background: var(--surface-2); }
/* Consommation du jour : phrase prête à l'emploi venue du serveur (unité comprise). */
.admin-cap__usage {
  margin: 0; font-size: .76rem; line-height: 1.45; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
/* Un « Enregistrer » par carte, aligné à droite (le pied `.cap__foot` est partagé
   avec l'écran utilisateur, où c'est le libellé en flex:1 qui pousse les boutons). */
.admin-cap .cap__foot { justify-content: flex-end; }

/* Colonne « Clés prêtées » : deux listes plutôt qu'une rangée d'interrupteurs */
.admin-share { display: flex; flex-direction: column; gap: 9px; align-items: stretch; min-width: 210px; }
.admin-share__k { display: flex; flex-direction: column; gap: 3px; }
.admin-sel {
  width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .78rem; cursor: pointer;
}
.admin-sel:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,74,.15); }
.admin-sel:disabled { opacity: .55; cursor: progress; }
/* Effet RÉEL du prêt, calculé par le serveur : badge + motif, sous le sélecteur. */
.admin-eff { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.admin-eff i { font-style: normal; font-size: .7rem; line-height: 1.35; color: var(--muted); }

/* ============================================================
   Sidebar
   ============================================================ */
/* ===== Rail de navigation (desktop) ===== */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 12px; gap: 10px;
  min-height: 0; z-index: 700;
}
.rail__brand { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; }
.rail__brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.rail__nav { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rail__nav::-webkit-scrollbar { width: 0; }
.rail__item {
  width: 62px; padding: 9px 2px 7px;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: none; background: transparent; border-radius: 14px;
  color: var(--muted); font-size: .625rem; font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: background .16s, color .16s;
}
.rail__item svg { width: 21px; height: 21px; }
.rail__item span { line-height: 1; letter-spacing: -.01em; }
.rail__item:hover { background: var(--surface-2); color: var(--ink); }
.rail__item.is-active { background: rgba(255, 107, 74, .12); color: var(--coral-text); }
.rail__foot { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; padding-top: 8px; border-top: 1px solid var(--line); width: 46px; }
.rail__mini {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 12px; color: var(--muted); cursor: pointer;
  transition: background .16s, color .16s;
}
.rail__mini svg { width: 20px; height: 20px; }
.rail__mini:hover { background: var(--surface-2); color: var(--ink); }
/* compteur d'alertes sur l'entrée « À vérifier » du rail */
.rail__badge {
  position: absolute; top: 4px; right: 9px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}
.rail__item--check.is-active { background: var(--danger-bg); color: var(--danger-text); }
html.dark .rail__item--check.is-active { background: rgba(239, 68, 68, .18); color: #fca5a5; }
html.dark .rail__item.is-active { background: rgba(255, 107, 74, .2); color: #ff9077; }

/* ===== Volet contextuel ===== */
.panel {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; z-index: 600;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.panel__head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.panel__titles { flex: 1; min-width: 0; }
.panel__title {
  margin: 0; font-family: var(--font-display); font-size: 1.16rem; font-weight: 800;
  letter-spacing: -.025em; color: var(--ink); line-height: 1.2;
}
.panel__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.panel__sub > span:first-child {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.panel__acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.panel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ===== Sections « plates » (Photos / Budget / Outils) ===== */
.pv-dates { padding: 12px 14px 0; }
.pv-lead__txt { margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.photo-grid__it {
  aspect-ratio: 1; border-radius: 11px; border: 1px solid var(--line);
  background-size: cover; background-position: center; cursor: pointer; padding: 0;
  transition: transform .14s, box-shadow .14s;
}
.photo-grid__it:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.tool-group { display: flex; flex-direction: column; gap: 4px; }
/* Doublons mobiles des entrées du rail (masqué sous 860px, style.css « .rail { display: none } »).
   Sur ordinateur le rail les porte déjà : on les retire pour ne pas afficher deux fois la même chose.
   Le point de rupture est écrit ici ET dans la media query du rail — garder les deux en phase. */
/* Sélecteurs DOUBLÉS à dessein (0,2,0) : `.icon-btn` est déclaré ligne ~1082, donc APRÈS
   ce bloc. À spécificité égale c'est l'ordre de source qui tranche, et `.icon-btn {
   display: grid }` l'emportait — le trio Compte / Réglages / Administration s'affichait
   dans l'en-tête ET dans le rail sur ordinateur. Doubler la classe rend le masquage
   indépendant de l'endroit où ces règles vivent dans le fichier. */
@media (min-width: 861px) {
  .tool-group.tool-group--mobile { display: none; }
  .icon-btn.icon-btn--mobile { display: none; }
}
/* La pastille de session est en position absolue : son bouton doit être son référent. */
.icon-btn--mobile { position: relative; }
.tool-group__title {
  margin: 0 0 4px 2px; font-size: .68rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.tool {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border: 1px solid transparent; background: transparent;
  border-radius: 12px; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s;
}
.tool:hover { background: var(--surface-2); border-color: var(--line); }
.tool__ic { font-size: 1.12rem; width: 26px; text-align: center; flex-shrink: 0; }
.tool__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tool__txt b { font-size: .87rem; font-weight: 650; letter-spacing: -.01em; }
.tool__txt i { font-style: normal; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.tool--toggle { cursor: pointer; }
.tool--toggle input {
  width: 38px; height: 22px; appearance: none; -webkit-appearance: none; background: var(--line);
  border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.tool--toggle input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.tool--toggle input:checked { background: var(--coral); }
.tool--toggle input:checked::after { transform: translateX(16px); }
.tool--danger { color: var(--danger-text); }
.tool--danger:hover { background: var(--danger-bg); border-color: transparent; }
.tool--danger .tool__txt i { color: var(--danger-text); opacity: .75; }

/* Stats */
.trip-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Collapsible stats (mobile) — hidden by default; shown only on small screens */
.trip-stats__mini, .trip-stats__toggle { display: none; }
.trip-stats__mini { grid-column: 1 / -1; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; overflow: hidden; }
.trip-stats__mini:hover { border-color: var(--coral); }
.trip-stats__toggle { grid-column: 1 / -1; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; padding: 5px; background: transparent; border: none; border-top: 1px dashed var(--line); color: var(--muted); font-size: .72rem; font-weight: 700; cursor: pointer; }
.trip-stats__toggle:hover { color: var(--coral-text); }
.trip-stats__chev { font-size: .8em; }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.stat__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }

/* Days list */
.days {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.days::-webkit-scrollbar { width: 10px; }
.days::-webkit-scrollbar-thumb { background: #d8dee6; border-radius: 8px; border: 3px solid var(--surface); }
.days::-webkit-scrollbar-thumb:hover { background: #c2cad4; }

.day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex-shrink: 0; /* keep natural height; let .days scroll instead of collapsing cards */
}
.day__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #fff, #fcfdfe);
  border-bottom: 1px solid var(--line);
}
.day__grip {
  color: #cbd5e1;
  cursor: grab;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.day__grip:active { cursor: grabbing; }
.day__grip svg { width: 16px; height: 16px; }
.day__badge {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--grad-night);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  display: grid; place-items: center;
  font-family: var(--font-display);
}
/* header middle = title + tags, wraps; action buttons stay pinned right (never clipped) */
.day__headmain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; flex: 1; min-width: 0; }
.day__headbtns { display: flex; gap: 1px; flex-shrink: 0; }
.day__title {
  flex: 1 1 110px;
  font-weight: 600;
  font-size: .95rem;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
  min-width: 70px;
  text-overflow: ellipsis;
}
.day__title:hover { background: var(--surface-2); }
.day__title:focus { outline: none; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
.day__meta { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.day__sum-walk { color: #0d9488; }
.day__del {
  border: none; background: transparent; color: #cbd5e1;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0;
  transition: all .15s;
}
.day__del:hover { background: var(--danger-bg); color: var(--danger-text); }
.day__del svg { width: 15px; height: 15px; }

.day__items { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 12px; }
.day__items.is-empty { padding: 14px 8px; }
.day__empty {
  font-size: .8rem; color: var(--muted); text-align: center; padding: 6px 8px 2px;
}

.day__add {
  margin: 2px 8px 10px;
  border: 1px dashed #cdd5df;
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: .82rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.day__add:hover { border-color: var(--coral); color: var(--coral-text); background: rgba(255,107,74,.07); }
.day__add svg { width: 15px; height: 15px; }

/* ============ Timeline item ============ */
.item {
  position: relative;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 10px 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, opacity .15s;
}
.item:hover { box-shadow: var(--shadow-md); border-color: #dbe2ea; }
.item.sortable-ghost { opacity: .4; }
.item.sortable-chosen { box-shadow: var(--shadow-lg); }

/* vertical rail linking the timeline nodes (runs through items + legs).
   The item carries a 1px left border, so its pseudo origin is shifted 1px vs the
   border-less leg — hence item left:24 / leg left:25 → both land on the node centre (~26px). */
.item::before, .leg::before {
  content: ''; position: absolute; top: -6px; bottom: -6px; width: 2px;
  background: var(--line); z-index: 0;
}
.item::before { left: 24px; }
.leg::before { left: 25px; }
.day__items > .item:first-child::before { top: 24px; }                 /* start at the first node */
.day__items > .item:last-child::before { bottom: auto; height: 30px; } /* stop at the last node */
.day__items > .item:only-child::before { display: none; }

/* drag handle — appears on hover in the left gutter */
.item__grip { position: absolute; left: -2px; top: 0; bottom: 0; width: 14px; display: grid; place-items: center; color: #cbd5e1; cursor: grab; opacity: 0; transition: opacity .15s; z-index: 4; }
.item:hover .item__grip { opacity: .55; }
.item__grip:active { cursor: grabbing; }
.item__grip svg { width: 13px; height: 13px; }

/* node = step number + done toggle, sitting on the rail */
.item__node {
  position: relative; z-index: 1; flex-shrink: 0; cursor: pointer; padding: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--node, var(--c-place));
  border: 2.5px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--line);
  color: #fff; font-weight: 700; font-size: .76rem; font-family: var(--font-display);
  display: grid; place-items: center;
  transition: transform .12s, box-shadow .12s;
}
.item__node:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--ink-soft); }
.item__num { line-height: 1; }
.item__node-check { width: 15px; height: 15px; display: none; }
.item--done .item__node { background: var(--c-activity) !important; box-shadow: 0 0 0 1.5px var(--c-activity); }
.item--done .item__node .item__num { display: none; }
.item--done .item__node-check { display: block; }

.item__body { flex: 1; min-width: 0; padding-top: 2px; }
.item__name { font-weight: 600; font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.item__name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.item__count { flex-shrink: 0; font-size: .66rem; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* tidy chip row */
/* second row: chips (left, wrap) + actions (right) — keeps the name on its own full-width line */
.item__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 7px; }
.item__sub { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 6px 7px; flex-wrap: wrap; flex: 1; min-width: 0; }
.item__time { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--coral-text); background: rgba(255,107,74,.12); border-radius: 999px; padding: 1.5px 8px; white-space: nowrap; }
.item__type-tag { font-weight: 700; border-radius: 999px; padding: 1.5px 8px; }
.item__type-tag--place { color: #4f52d6; background: rgba(99,102,241,.12); }
.item__type-tag--hotel { color: #db2777; background: rgba(236,72,153,.12); }
.item__type-tag--activity { color: #0f9d8c; background: rgba(20,184,166,.13); }
.item__book { font-weight: 700; border-radius: 999px; padding: 1.5px 8px; white-space: nowrap; }
.item__book--todo { color: var(--warn-text); background: rgba(255,176,46,.16); }
.item__book--ok { color: var(--success-text); background: rgba(20,184,166,.15); }
.item__missing { color: var(--coral-600); font-weight: 600; }

/* Collapsible step detail */
.item__detail { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .26s ease, opacity .2s ease, margin-top .26s ease; }
.item--open .item__detail { max-height: 900px; opacity: 1; margin-top: 8px; }
.item__notes { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; white-space: pre-wrap; }
.item__journal { margin-top: 6px; font-size: .76rem; color: var(--muted); font-style: italic; line-height: 1.4; border-left: 2px solid var(--coral); padding-left: 9px; white-space: normal; }
.item__photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.item__photo { padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px; line-height: 0; }
.item__photos img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; transition: transform .12s; }
.item__photo:hover img { transform: scale(1.05); border-color: var(--coral); }

.item__btn--expand svg { transition: transform .22s ease; }
.item--open .item__btn--expand { color: var(--coral-600); }
.item--open .item__btn--expand svg { transform: rotate(180deg); }

.item__actions { display: flex; gap: 1px; flex-shrink: 0; margin-top: -4px; margin-right: -2px; }
.item__btn {
  border: none; background: transparent; color: #b3bdca;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  transition: all .15s;
}
.item__btn:hover { background: var(--surface-2); color: var(--ink); }
.item__btn--del:hover { background: var(--danger-bg); color: var(--danger-text); }
.item__btn svg { width: 14px; height: 14px; }

.item--done { opacity: .62; }
.item--done .item__name-txt { text-decoration: line-through; color: var(--muted); }

/* Slideshow / diaporama */
.slideshow { position: fixed; inset: 0; z-index: 3000; background: #0b0f14; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slideshow__close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(8px); }
.slideshow__close:hover { background: rgba(255,255,255,.22); }
.slideshow__stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.slideshow__img { max-width: 92%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.slideshow__img.is-anim { animation: ssKenBurns 8s ease-out forwards, ssFade .6s ease; }
@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.slideshow__caption { text-align: center; color: #fff; padding: 14px 20px 4px; }
.slideshow__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.slideshow__meta { color: #b9c2cf; font-size: .85rem; margin-top: 2px; }
.slideshow__bar { width: min(420px, 70%); height: 3px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.slideshow__bar span { display: block; height: 100%; width: 0; background: var(--coral); transform-origin: left; }
@keyframes ssBar { from { width: 0; } to { width: 100%; } }
.slideshow__controls { display: flex; align-items: center; gap: 14px; padding-bottom: 26px; }
.slideshow__btn { width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.slideshow__btn:hover { background: rgba(255,255,255,.24); }
.slideshow__btn--play { background: var(--coral); }
.slideshow__btn--play:hover { background: var(--coral-600); }
.slideshow__count { color: #b9c2cf; font-size: .82rem; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* Case à cocher (label + input) */
.check-field { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; font-size: .82rem; color: var(--ink-soft); cursor: pointer; line-height: 1.35; }
.check-field input { margin-top: 2px; flex-shrink: 0; }

/* Offline indicator chip */
.offline-chip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 3000;
  background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 6px; pointer-events: none; max-width: calc(100vw - 24px);
}
html.dark .offline-chip { background: #222c38; } /* --ink is near-white in dark → keep a dark pill */
@media (max-width: 860px) { .offline-chip { bottom: calc(132px + env(safe-area-inset-bottom)); font-size: .74rem; } }

/* Trip recap (bilan) */
.recap-hero { text-align: center; padding: 6px 0 14px; }
.recap-hero__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); line-height: 1.15; }
.recap-hero__dates { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: 4px; }
.recap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recap-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.recap-card__ic { font-size: 1.3rem; }
.recap-card b { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.recap-card span:last-child { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.recap-progress { margin-top: 14px; }
.recap-progress__bar { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.recap-progress__bar span { display: block; height: 100%; background: var(--grad-warm); border-radius: 999px; transition: width .4s ease; }
.recap-progress__label { font-size: .78rem; font-weight: 700; color: var(--success-text); text-align: center; margin-top: 6px; }
.recap-actions { flex-wrap: wrap; }
@media (max-width: 380px) { .recap-grid { grid-template-columns: repeat(2, 1fr); } }

/* Mode conduite (drive mode) */
.drive {
  position: fixed; inset: 0; z-index: 4000; background: var(--bg);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.drive__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; flex-shrink: 0; }
.drive__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.drive__logo { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 3px 9px rgba(255, 107, 74, .3); }
.drive__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.drive__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; gap: 16px; padding: 8px 22px 26px; max-width: 640px; width: 100%; margin: 0 auto; overflow-y: auto; }
.drive__label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--coral-text); }
.drive__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.1; color: var(--ink); }
.drive__metrics { display: flex; flex-direction: column; gap: 2px; }
.drive__dist { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 10vw, 3.2rem); color: var(--ink); line-height: 1; }
.drive__eta { font-size: 1rem; font-weight: 600; color: var(--muted); }
.drive__hint { font-size: .95rem; color: var(--muted); }
.drive__wx { font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }
.drive__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.drive__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; border-radius: 16px; font-size: 1.05rem; font-weight: 800; cursor: pointer; border: none; text-decoration: none; }
.drive__btn--nav { background: var(--grad-warm); color: #fff; box-shadow: var(--shadow-md); }
.drive__btn--done { background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); }
.drive__btn:active { transform: scale(.98); }
.drive__upnext { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.drive__upnext-lbl { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.drive__upitem { font-size: 1rem; font-weight: 600; color: var(--ink-soft); padding: 4px 0; }
.drive__done { text-align: center; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.drive__done-emoji { font-size: 3.5rem; }
.drive__done h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--ink); }
.drive__done p { color: var(--muted); max-width: 280px; }
@media (max-width: 380px) { .drive__actions { grid-template-columns: 1fr; } }

/* Help / guide list */
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.help-list li { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); padding-left: 2px; }
.help-list li b { color: var(--ink); }

/* Collapsible modal sections */
.msec { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); flex-shrink: 0; }
.msec__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink);
}
.msec__head:hover { background: var(--surface-2); }
.msec__chev { width: 18px; height: 18px; color: var(--muted); transition: transform .22s ease; }
.msec--open .msec__chev { transform: rotate(180deg); }
.msec__body { display: none; padding: 4px 14px 14px; }
.msec--open .msec__body { display: flex; flex-direction: column; gap: 13px; }
.time-range { display: flex; align-items: center; gap: 8px; }
.time-range .field__input { flex: 1; min-width: 0; }
.time-range__sep { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.time-range__clear { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.time-range__clear:hover { border-color: var(--coral); color: var(--coral-600); }
.remind-date { margin-top: 9px; padding-left: 27px; display: flex; flex-direction: column; gap: 3px; }
.remind-date .field__input { max-width: 200px; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.photo-thumb { position: relative; width: 72px; height: 72px; }
.photo-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); display: block; }
.photo-thumb__del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.photos__add { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--line); border-radius: 9px; padding: 9px 14px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s; }
.photos__add:hover { border-color: var(--coral); color: var(--coral-600); }

/* Day progress + today */
.day__progress { font-size: .7rem; font-weight: 700; color: var(--c-activity); background: rgba(20,184,166,.12); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.day__progress.is-complete { color: var(--success-text); }
.day__today-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--coral); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.day__traffic { font-size: .64rem; font-weight: 800; color: var(--warn-text); background: rgba(255,176,46,.18); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.day--today { box-shadow: 0 0 0 2px var(--coral), var(--shadow-sm); }
.day--today .day__badge { background: var(--coral); }

/* Budget */
.budget-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.budget-list li { display: flex; justify-content: space-between; align-items: center; padding: 7px 4px; border-bottom: 1px dashed var(--line); font-size: .85rem; }
.budget-list li:last-child { border-bottom: none; }
.budget-list li b { font-family: var(--font-display); }
.budget-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; }
.budget-total b { font-family: var(--font-display); font-size: 1.3rem; color: var(--coral-600); }

/* Type dots */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--start { background: var(--c-start); }
.dot--place { background: var(--c-place); }
.dot--hotel { background: var(--c-hotel); }
.dot--activity { background: var(--c-activity); }

/* Sidebar actions */
.sidebar__actions { padding: 6px 14px 10px; }
.link-btn {
  border: none; background: transparent; color: var(--muted);
  font-size: .8rem; font-weight: 600; padding: 2px 0;
  transition: color .15s;
}
.link-btn:hover { color: var(--ink); }
.link-btn--danger:hover { color: var(--danger-text); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 600;
  transition: all .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 4px 12px rgba(255,107,74,.35); }
.btn--primary:hover { background: var(--coral-600); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-2); border-color: #d3dae2; color: var(--ink); }

.icon-btn {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  transition: all .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }

/* ============================================================
   Map
   ============================================================ */
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #e8edf2; }

.map-toolbar {
  position: absolute;
  top: 16px; left: 16px; right: 16px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  flex-wrap: wrap;
}
.map-toolbar > * { pointer-events: auto; }

.segmented {
  display: inline-flex;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--shadow-md);
  gap: 2px;
}
.segmented__btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: .82rem; font-weight: 600;
  color: var(--muted);
  transition: all .15s;
}
.segmented__btn svg { width: 17px; height: 17px; }
.segmented__btn:hover { color: var(--ink); }
.segmented__btn.is-active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

.map-toolbar__summary { flex: 1; display: flex; justify-content: center; min-width: 200px; }
.route-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: var(--shadow-md);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 100%;
}
.route-pill--muted { color: var(--muted); font-weight: 500; }
.route-pill b { font-family: var(--font-display); }
.route-pill .sep { width: 1px; height: 16px; background: var(--line); }
.route-pill .route-pill__mode { color: var(--coral-600); }

.map-toolbar__right { display: flex; gap: 8px; }
.map-fab {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  color: var(--ink-soft);
  display: grid; place-items: center;
  transition: all .15s;
}
.map-fab:hover { color: var(--ink); transform: translateY(-1px); }
.map-fab svg { width: 20px; height: 20px; }
.map-fab.is-active { background: var(--coral); color: #fff; border-color: var(--coral); }

.map-banner {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 500;
  background: var(--ink);
  color: #fff;
  padding: 18px 20px;
  border-radius: 18px;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  width: min(360px, calc(100% - 32px));
}
.map-banner__msg { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.map-banner__ic { font-size: 1.7rem; line-height: 1; }
.map-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.map-banner__cta {
  border: none; background: var(--coral); color: #fff;
  border-radius: 10px; padding: 9px 14px; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.map-banner__cta:hover { filter: brightness(1.06); }
.map-banner__x {
  border: none; background: rgba(255,255,255,.14); color: #fff;
  border-radius: 10px; padding: 9px 14px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.map-banner__x:hover { background: rgba(255,255,255,.22); }

/* Map markers (Leaflet divIcon) */
.map-marker {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  border: 2.5px solid #fff;
}
.map-marker span {
  transform: rotate(45deg);
  color: #fff; font-weight: 700; font-size: .8rem;
  font-family: var(--font-display);
}
.map-marker--place { background: var(--c-place); }
.map-marker--hotel { background: var(--c-hotel); }
.map-marker--activity { background: var(--c-activity); }

.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.popup__type { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.popup__name { font-weight: 700; font-size: .95rem; margin: 2px 0 4px; color: var(--ink); }
.popup__notes { font-size: .8rem; color: var(--muted); }

/* ============================================================
   Modals
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); animation: fade .2s; }
.modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  animation: pop .22s cubic-bezier(.16,1,.3,1);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.modal__header h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.modal__body { padding: 18px 20px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.modal__body > * { min-width: 0; }
.modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }

/* Éditeur d'étape — tiroir large ancré à droite sur ordinateur (≥861px).
   Donne ~560px de large + pleine hauteur pour éditer confortablement, tout en
   laissant la carte et l'itinéraire visibles derrière un voile léger.
   À ≤860px on garde la feuille du bas (bottom sheet) définie plus bas. */
@media (min-width: 861px) {
  #itemModal { place-items: stretch end; padding: 0; }
  #itemModal .modal__backdrop { background: rgba(15,23,42,.32); backdrop-filter: blur(1.5px); }
  #itemModal .modal__panel {
    width: min(560px, 94vw); max-width: none;
    height: 100dvh; max-height: 100dvh;
    border-radius: 18px 0 0 18px;
    animation: drawerIn .26s cubic-bezier(.16, 1, .3, 1);
  }
  #itemModal .modal__body { padding: 18px 22px; gap: 16px; }
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(34px); } }

/* Type picker */
.type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-chip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 9px 6px;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  transition: all .15s;
}
.type-chip:hover { border-color: #cbd5e1; }
.type-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.type-chip.is-active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.field__input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field__input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.field__input::placeholder { color: #aab4c0; }
textarea.field__input { resize: vertical; min-height: 44px; }
.field__hint { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.search-box { position: relative; display: flex; align-items: center; }
.search-box__icon { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search-box .field__input { padding-left: 36px; }
.search-box__spinner {
  position: absolute; right: 12px; width: 16px; height: 16px;
  border: 2px solid var(--line); border-top-color: var(--indigo);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.search-results {
  list-style: none; margin: 4px 0 0; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-md);
  max-height: 220px; overflow-y: auto;
}
.search-results li {
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: .85rem; color: var(--ink-soft);
  display: flex; gap: 8px; align-items: flex-start;
}
.search-results li:hover, .search-results li.is-active { background: var(--surface-2); }
.search-results li svg { width: 15px; height: 15px; color: var(--coral); flex-shrink: 0; margin-top: 2px; }
.search-results__name { font-weight: 600; color: var(--ink); }
.search-results__empty { padding: 12px; text-align: center; color: var(--muted); font-size: .84rem; }

.callout {
  font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.callout--ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.callout--warn { background: #fffbeb; border-color: #fde68a; color: var(--warn-text); }

/* ============================================================
   Toasts
   ============================================================ */
/* ===== Clés API sur petit écran =====
   Ces deux écrans sont denses : cartes de service côté admin, panneaux de capacité côté
   utilisateur. Sous 560px, tout passe en colonne unique et les cibles tactiles s'élargissent. */
@media (max-width: 560px) {
  /* Administration — une carte de capacité par ligne, quel que soit le minmax. */
  .admin-cfg__cards { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .admin-cap { padding: 12px; }
  .admin-svc { padding: 11px; }
  .admin-svc__head { gap: 8px; }
  .admin-svc__head b { font-size: .88rem; }
  .admin-svc__state .admin-badge { font-size: .64rem; padding: 2px 6px; }
  /* La règle anti-zoom générique est battue par `.admin-cfg .field__input` (0,2,0). */
  .admin-cfg .field__input, .admin-search, .admin-sortsel, .admin-sel { font-size: 16px; }
  /* Comptes : les deux sélecteurs de prêt s'empilent au lieu de se serrer. */
  .admin-u { padding: 11px; }
  .admin-u__keys { grid-template-columns: 1fr; }
  .admin-u__stats { gap: 4px 10px; font-size: .74rem; }
  .admin-actions { gap: 6px; }
  .admin-act { padding: 7px 10px; }          /* cible tactile plus généreuse */

  /* Réglages utilisateur — le panneau déplié prend toute la largeur. */
  .cap__panel { padding: 12px; }
  .cap .segmented { display: flex; width: 100%; }
  .cap .segmented__btn { flex: 1; justify-content: center; padding: 9px 6px; font-size: .78rem; }
  .cap__row { padding: 12px; }
  .cap__act { font-size: .74rem; padding: 6px 10px; }
}

/* Écran de connexion OBLIGATOIRE : plus de croix, plus de sortie par le fond. Le seul
   chemin est de se connecter ou de créer un compte. */
.modal--gate [data-close] { display: none !important; }

/* La pile était calée en `left: 50%` sans largeur : elle ne pouvait donc s'étendre que sur
   la MOITIÉ DROITE de l'écran, et un message un peu long repartait sur trois lignes. Elle
   occupe maintenant toute la largeur, les messages restant centrés. */
.toast-stack {
  position: fixed; bottom: 20px; left: 0; right: 0;
  z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 0 16px; pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff;
  max-width: min(620px, 100%);                       /* large, sans traverser tout un grand écran */
  padding: 11px 18px; border-radius: 12px;
  font-size: .85rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px;
  animation: toastIn .25s cubic-bezier(.16,1,.3,1);
}
.toast svg { width: 17px; height: 17px; flex-shrink: 0; }
.toast--ok svg { color: #34d399; }
.toast--err { background: #b91c1c; }
.toast--err svg { color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
.toast.is-leaving { animation: toastOut .25s forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   Leg connector (travel between two items)
   ============================================================ */
.leg {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 44px;
  font-size: .76rem; color: var(--muted);
}
.leg__text { display: flex; align-items: center; gap: 4px 9px; flex-wrap: wrap; }
.leg__text b { color: var(--ink-soft); font-weight: 700; }
.leg__fuel { color: #9aa5b1; font-weight: 500; }
.leg__traffic { font-weight: 700; color: var(--warn-text); background: rgba(255,176,46,.18); border-radius: 999px; padding: 0 7px; font-size: .92em; }
.leg__traffic--ok { color: var(--success-text); background: rgba(20,184,166,.14); }

/* Item duration chip + refuel / warning badges */
.item__dur { color: var(--indigo); font-weight: 600; }
.item__refuel, .item__warn {
  margin-top: 5px; font-size: .73rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; width: fit-content;
}
.item__refuel { color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.item__warn { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger); }

/* Per-day summary footer */
.day__summary {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  padding: 9px 13px; margin: 0 8px 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .76rem; font-weight: 600; color: var(--ink-soft);
}
.day__summary span { white-space: nowrap; }

/* Map marker — refuel highlight */
.map-marker--refuel { box-shadow: 0 0 0 3px #fbbf24, 0 4px 10px rgba(0,0,0,.35); }
.map-marker__fuel {
  position: absolute; top: -7px; right: -7px;
  font-size: 13px; line-height: 1;
  background: #fff; border-radius: 50%;
  width: 18px; height: 18px; display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Settings — inline segmented + separators + duration input
   ============================================================ */
.segmented--inline {
  display: flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 3px; gap: 3px;
}
.segmented--inline .segmented__btn {
  flex: 1; justify-content: center; border-radius: 8px; padding: 9px 8px; font-size: .82rem;
}
.segmented--inline .segmented__btn.is-active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

.dur-input { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dur-input .field__input { width: 110px; flex: none; }
.dur-input__unit { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dur-input__hint { font-size: .82rem; color: var(--indigo); font-weight: 600; }

/* ============================================================
   Day navigator
   ============================================================ */
.day-nav {
  position: absolute;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 500;
  width: min(540px, calc(100% - 40px));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 10px 12px 12px;
}
.day-nav__row { display: flex; align-items: center; gap: 8px; }
.day-nav__all {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 9px; padding: 7px 11px; font-size: .8rem; font-weight: 700; color: var(--ink-soft);
  transition: all .15s; flex-shrink: 0;
}
.day-nav__all:hover { border-color: var(--coral); color: var(--coral-600); }
.day-nav.is-day .day-nav__all { background: var(--ink); color: #fff; border-color: var(--ink); }
.day-nav__arrow {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  display: grid; place-items: center; transition: all .15s;
}
.day-nav__arrow:hover { background: var(--surface-2); color: var(--ink); }
.day-nav__arrow svg { width: 18px; height: 18px; }
.day-nav__arrow:disabled { opacity: .35; cursor: default; }
.day-nav__center { flex: 1; min-width: 0; text-align: center; }
.day-nav__title {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-nav__stats { font-size: .76rem; font-weight: 600; color: var(--muted); margin-top: 1px; }
.day-nav__play {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: none; border-radius: 9px; padding: 8px 13px;
  background: var(--coral); color: #fff; font-weight: 700; font-size: .8rem;
  box-shadow: 0 4px 12px rgba(255,107,74,.35); transition: all .15s;
}
.day-nav__play:hover { background: var(--coral-600); }
.day-nav__play svg { width: 14px; height: 14px; }
.day-nav__play.is-playing { background: var(--ink); box-shadow: none; }

.day-nav__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin-top: 12px;
  border-radius: 6px; background: var(--line); cursor: pointer;
}
.day-nav__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--coral); border: 3px solid #fff; box-shadow: var(--shadow-md); cursor: grab;
}
.day-nav__slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--coral); border: 3px solid #fff; box-shadow: var(--shadow-md); cursor: grab;
}

/* ============================================================
   Play subtitle + car marker
   ============================================================ */
.subtitle {
  position: absolute;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 520;
  width: min(560px, calc(100% - 40px));
  background: var(--grad-night);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 12px;
}
.subtitle__text { flex: 1; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.subtitle__text b { color: var(--amber); }
.subtitle__text .sub-meta { display: block; font-size: .78rem; font-weight: 500; color: #cbd5e1; margin-top: 2px; }
.subtitle__stop {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  border: none; background: rgba(255,255,255,.15); color: #fff;
  display: grid; place-items: center; transition: background .15s;
}
.subtitle__stop:hover { background: rgba(255,255,255,.28); }
.subtitle__stop svg { width: 16px; height: 16px; }

.car-marker__inner {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 3px solid var(--coral);
  display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.map-marker--start { opacity: .55; filter: grayscale(.3); }

/* Walking leg accent */
.leg--walk .leg__text b { color: var(--teal); }

/* ============================================================
   Schedule time, per-leg mode toggle, day departure, refresh
   ============================================================ */

.day__depart {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.day__depart-lbl { font-size: .76rem; font-weight: 600; color: var(--muted); }
.day__time {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface);
}
.day__time:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

.day-nav__refresh {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  display: grid; place-items: center; transition: all .15s;
}
.day-nav__refresh:hover { color: var(--coral-600); border-color: var(--coral); }
.day-nav__refresh svg { width: 17px; height: 17px; }

/* ============================================================
   Dark-mode switch
   ============================================================ */
.switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 48px; height: 27px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative; transition: background .2s;
}
.switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s;
}
.switch input:checked + .switch__track { background: var(--indigo); border-color: var(--indigo); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(21px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(99,102,241,.3); }

/* ============================================================
   Dark theme
   ============================================================ */
html.dark {
  --ink: #e9eef5;
  --ink-soft: #c2cbd6;
  --muted: #8b97a6;
  --line: #2b3440;
  --bg: #0e1319;
  --surface: #161d27;
  --surface-2: #1d2632;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.6);
  /* semantic tokens — dark variants */
  --coral-text: #ff8a6a;
  --danger: #f87171; --danger-bg: #3a1a1a; --danger-text: #fca5a5;
  --warn-text: #fcd34d; --warn-bg: rgba(255,176,46,.14); --warn-border: #5a4a12;
  --success-text: #6ee7b7; --success-bg: rgba(20,184,166,.16);
  --info-text: #a5b4fc; --info-bg: rgba(99,102,241,.18);
}
html.dark body { background: var(--bg); }
html.dark .day__head { background: linear-gradient(180deg, #1a222d, #161d27); }
/* --ink devient quasi-blanc en sombre : le bandeau garderait du blanc sur blanc. */
html.dark .map-banner { background: #1d2632; border: 1px solid var(--line); }
html.dark .route-pill,
html.dark .map-fab,
html.dark .day-nav,
html.dark .type-chip.is-active,
html.dark .day-nav.is-day .day-nav__all { background: #3a4860; }
/* La piste du sélecteur et son bouton actif étaient dans la MÊME règle, donc du #3a4860
   sur du #3a4860 : en sombre, le choix actif était rigoureusement invisible. On rétablit
   le rapport du thème clair — piste en creux, pastille active en relief. */
html.dark .segmented { background: #1d2632; border-color: var(--line); }
html.dark .segmented__btn.is-active,
html.dark .segmented--inline .segmented__btn.is-active { background: #3a4860; color: #fff; }
/* `html.dark .map-fab` (0,2,1) l'emportait sur `.map-fab.is-active` (0,2,0) : en sombre,
   un bouton actif perdait son corail et devenait indistinct d'un bouton inactif. */
html.dark .map-fab.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
html.dark .btn--primary { background: var(--coral); }
html.dark .toast { background: #222c38; }
html.dark .day-nav__all,
html.dark .day-nav__arrow,
html.dark .day-nav__refresh { background: var(--surface-2); }
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
html.dark .callout--ok { background: #06281f; border-color: #14543f; color: #6ee7b7; }
html.dark .callout--warn { background: #2a2206; border-color: #5a4a12; color: #fcd34d; }
html.dark .item__refuel { background: #2a2206; border-color: #5a4a12; }
html.dark .item__warn { background: #2a1414; border-color: #5a1f1f; color: #fca5a5; }
html.dark .car-marker__inner { background: #161d27; }
html.dark .map-marker__fuel { background: #161d27; }

/* ============================================================
   Wave 2 — share (read-only), collaborators, reset
   ============================================================ */
.trip-row__badge--shared { color: var(--indigo); background: #eef0ff; }
html.dark .trip-row__badge--shared { background: #1e2333; }

.collab-invite { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.collab-invite .field__input { flex: 1; }

/* Read-only shared view */
.share-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 1500;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--grad-night); color: #fff; font-size: .85rem; font-weight: 600;
  box-shadow: var(--shadow-md);
}
.share-banner__btn { color: var(--amber); font-weight: 700; text-decoration: none; }
/* la marge du bandeau ne s'applique QU'À la vue partagée (pas au verrouillage lecture seule) */
.app.shared { height: calc(100vh - 40px); height: calc(100dvh - 40px); margin-top: 40px; }
.app.readonly .item__grip,
.app.readonly .day__grip,
.app.readonly .item__btn--edit,
.app.readonly .item__btn--del,
.app.readonly .item__actions .item__btn--map,
.app.readonly .day__add,
.app.readonly .day__del,
.app.readonly .day__tool[data-tool="optimize"],
.app.readonly .leg__modes,
.app.readonly .sidebar__actions,
.app.readonly #importBtn,
.app.readonly #resetBtn,
.app.readonly #aiImportBtn,
.app.readonly #addByMapBtn,
.app.readonly #nearbyBtn,
.app.readonly #settingsBtn,
.app.readonly #mSettingsBtn,
.app.readonly .day__depart { display: none !important; }
.app.readonly #tripName,
.app.readonly .day__title { pointer-events: none; background: transparent; }
/* lecture seule : champs non éditables (date de début, coûts du budget) */
.app.readonly #tripStart,
.app.readonly #pvBudget .field__input { pointer-events: none; opacity: .6; }

/* ============================================================
   Day collapse / view buttons, leg-mode toggle, fuel option
   ============================================================ */
.day__view, .day__collapse {
  border: none; background: transparent; color: #cbd5e1;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0;
  transition: all .15s;
}
.day__view:hover, .day__collapse:hover { background: var(--surface-2); color: var(--coral-600); }
.day__view svg, .day__collapse svg { width: 16px; height: 16px; }
.day__collapse svg { transition: transform .2s; }
.day--collapsed .day__collapse svg { transform: rotate(-90deg); }
.day--collapsed .day__depart,
.day--collapsed .day__items,
.day--collapsed .day__summary,
.day--collapsed .day__alert,
.day--collapsed .day__tools,
.day--collapsed .day__add { display: none; }

/* Per-leg transport toggle (car / walk) */
.leg__modes {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 2px; gap: 2px; flex-shrink: 0;
}
.leg__mode {
  border: none; background: transparent; color: var(--muted);
  width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  cursor: pointer; line-height: 0; transition: all .12s;
}
.leg__mode svg { width: 14px; height: 14px; }
.leg__mode:hover { color: var(--ink); }
.leg__mode.is-active { background: var(--surface); color: var(--coral); box-shadow: var(--shadow-sm); }
.leg--walk .leg__mode.is-active { color: var(--teal); }
.leg--override .leg__modes { box-shadow: 0 0 0 1.5px var(--coral); }
.leg--override.leg--walk .leg__modes { box-shadow: 0 0 0 1.5px var(--teal); }

/* Settings — fuel on/off row */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; }

/* Google Maps link button on items */
.item__btn--map:hover { background: #e8f0fe; color: #1a73e8; }
html.dark .item__btn--map:hover { background: #1a2942; color: #8ab4f8; }

/* Map pin popup actions */
.popup__actions { display: flex; gap: 6px; margin-top: 9px; }
.popup__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 8px; padding: 7px 8px; font-size: .76rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: all .15s;
}
.popup__btn svg { width: 14px; height: 14px; }
.popup__btn:hover { border-color: var(--coral); color: var(--coral-600); }

/* Day copy-to-clipboard button */
.day__copy {
  border: none; background: transparent; color: #cbd5e1;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; transition: all .15s;
}
.day__copy:hover { background: var(--surface-2); color: var(--coral-600); }
.day__copy svg { width: 15px; height: 15px; }

/* Mobile bottom tabs (hidden on desktop) */
.tabbar { display: none; }

/* ============================================================
   Accounts (header button, login/register, trips list)
   ============================================================ */
#accountBtn { position: relative; }
.account-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: #22c55e; border: 2px solid var(--surface);
}

.btn--sm { padding: 6px 11px; font-size: .8rem; }

.account-id { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.account-avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--grad-warm); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(255,126,95,.4);
}
.account-id__info { min-width: 0; }
.account-id__email { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trips-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.trips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.trips-empty { font-size: .85rem; color: var(--muted); text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }

.trip-row { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 4px; transition: border-color .15s; }
.trip-row.is-active { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255,107,74,.15); }
.trip-row__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: none; background: transparent; text-align: left; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.trip-row__open:hover { background: var(--surface-2); }
.trip-row__name { font-weight: 600; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-row__badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--coral-600); background: #fff2ee; padding: 2px 6px; border-radius: 999px; flex-shrink: 0; }
html.dark .trip-row__badge { background: #3a2018; }
.trip-row__btn { border: none; background: transparent; color: #b3bdca; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; transition: all .15s; }
.trip-row__btn svg { width: 15px; height: 15px; }
.trip-row__btn:hover { background: var(--surface-2); color: var(--ink); }
.trip-row__del:hover, .trip-row__unshare:hover { background: var(--danger-bg); color: var(--danger-text); }
html.dark .trip-row__del:hover, html.dark .trip-row__unshare:hover { background: #2a1414; color: #fca5a5; }

/* ============================================================
   Day date / weather / tools / alerts, opening hours, nearby
   ============================================================ */
.day__wx { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

.day__alert {
  margin: 0 8px 8px; padding: 7px 11px; border-radius: var(--radius-sm);
  font-size: .76rem; font-weight: 700; background: #fffbeb; border: 1px solid #fde68a; color: var(--warn-text);
}
html.dark .day__alert { background: #2a2206; border-color: #5a4a12; color: #fcd34d; }

.day__tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.day__tool {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 8px; padding: 6px 9px; font-size: .76rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .15s;
}
.day__tool:hover { border-color: var(--coral); color: var(--coral-600); }
.day__tool.is-disabled { opacity: .45; pointer-events: none; }

.item__hours {
  margin-top: 5px; font-size: .73rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; width: fit-content;
  color: var(--warn-text); background: #fffbeb; border: 1px solid #fde68a;
}
html.dark .item__hours { background: #2a2206; border-color: #5a4a12; color: #fcd34d; }

/* Journal photo markers on the map */
.photo-marker { background: transparent; border: none; }
.photo-marker__img {
  display: block; width: 42px; height: 42px; border-radius: 10px;
  border: 2.5px solid #fff; box-shadow: var(--shadow-md);
  background-size: cover; background-position: center; cursor: pointer;
}
.photo-marker:hover .photo-marker__img { transform: scale(1.06); transition: transform .12s; }
.photo-marker__count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--coral); color: #fff; font-size: .64rem; font-weight: 800;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}

/* Geolocation panel (top-center, below the map toolbar) + "me" marker */
.geo-panel {
  position: absolute; z-index: 540;
  top: 112px; left: 50%; transform: translateX(-50%);
  width: min(540px, calc(100% - 40px));
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 9px 12px; pointer-events: auto;
}
html.dark .geo-panel { background: rgba(29,38,50,.97); }
.geo-panel__close { position: absolute; top: -10px; right: -10px; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; width: 26px; height: 26px; box-shadow: var(--shadow-sm); }
.geo-panel__body { flex: 1; min-width: 0; }
.geo-panel__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.geo-panel__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-panel__dist { font-size: .78rem; color: var(--coral-600); font-weight: 600; }
.geo-panel__nav { display: flex; gap: 6px; flex-shrink: 0; }
.geo-panel__nav .btn { text-decoration: none; white-space: nowrap; }
.me-marker { background: transparent; border: none; }
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.4); position: relative; margin: 3px; }
.me-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(37,99,235,.5); animation: mePulse 1.8s ease-out infinite; }
@keyframes mePulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.nearby {
  position: absolute; top: 70px; right: 16px; z-index: 520;
  width: 300px; max-width: calc(100% - 32px); max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.nearby__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 8px 14px; border-bottom: 1px solid var(--line); }
.nearby__cats { display: flex; gap: 6px; padding: 10px; flex-wrap: wrap; }
.nearby-cat { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); border-radius: 999px; padding: 6px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.nearby-cat:hover { border-color: var(--coral); }
.nearby-cat.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
html.dark .nearby-cat.is-active { background: #3a4860; }
.nearby__results { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.nearby__results li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.nearby__results li:hover { background: var(--surface-2); }
.nearby-name { flex: 1; min-width: 0; font-size: .84rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-add { border: none; background: var(--coral); color: #fff; border-radius: 7px; padding: 5px 10px; font-size: .76rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.nearby-add:hover { background: var(--coral-600); }
.nearby-loading { color: var(--muted); font-size: .82rem; padding: 10px; }
.nearby-pin { width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--violet); border-radius: 50%; font-size: 14px; box-shadow: var(--shadow-md); }

/* Trip dates bar */
.trip-dates {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
/* Prochaine étape bar */
.nextstep {
  display: flex; align-items: stretch; gap: 8px;
  padding: 7px; transition: box-shadow .15s;
  background: linear-gradient(120deg, #fff3ee, #fde9e3);
  border: 1px solid #f6d4c8; border-radius: 14px;
}
html.dark .nextstep { background: linear-gradient(120deg, #2a2018, #2c1d18); border-color: #4a3328; }
.nextstep:hover { box-shadow: var(--shadow-md); }
.nextstep__go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  border: none; background: transparent; text-align: left; cursor: pointer;
  padding: 4px 6px; border-radius: 10px; transition: background .15s, transform .1s;
}
.nextstep__go:hover { background: rgba(255,255,255,.45); }
html.dark .nextstep__go:hover { background: rgba(255,255,255,.07); }
.nextstep__go:active { transform: scale(.99); }
.nextstep__pin { font-size: 1.15rem; flex-shrink: 0; }
.nextstep__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nextstep__label { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--coral-text); font-weight: 800; }
.nextstep__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nextstep__dist { font-size: .76rem; font-weight: 700; color: var(--coral-text); flex-shrink: 0; }
.nextstep__nav { flex-shrink: 0; align-self: center; border: none; width: 38px; height: 38px; border-radius: 11px; background: var(--coral); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(255,107,74,.35); cursor: pointer; transition: background .15s; }
.nextstep__nav:hover { background: var(--coral-600); }
.nextstep__nav svg { width: 18px; height: 18px; }
/* flash highlight when jumping to a step */
.item--flash { animation: itemFlash 1.6s ease; }
@keyframes itemFlash { 0%,100% { box-shadow: var(--shadow-sm); } 25% { box-shadow: 0 0 0 3px var(--coral); border-color: var(--coral); } }

.trip-dates__field { display: flex; align-items: center; gap: 6px; }
.trip-dates__field input {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface);
}
.trip-dates__field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.trip-dates__sep { color: var(--muted); }
.trip-dates__end b { color: var(--ink); }
/* Indicateur "lecture seule" (en-tête, non cliquable) */
.brand__lock {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid #f6d28a; background: rgba(255,176,46,.18); color: var(--warn-text);
  font-size: .66rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
html.dark .brand__lock { background: rgba(255,176,46,.14); border-color: #5a4a12; color: #fcd34d; }

.day__depart-date { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }

/* Optimize preview modal */
.optimize-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
.opt-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: .88rem; }
.opt-row.is-moved { border-color: var(--coral); background: rgba(255,107,74,.08); }
html.dark .opt-row.is-moved { background: #2a1a14; }
.opt-num { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: .74rem; display: grid; place-items: center; font-family: var(--font-display); }
html.dark .opt-num { background: #3a4860; }
.opt-name { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-flag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--coral-600); }
.opt-gain { color: #16a34a; font-weight: 700; }
html.dark .opt-gain { color: #4ade80; }

/* Nearby — richer list rows */
.nearby-open { flex: 1; min-width: 0; border: none; background: transparent; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 0; }
.nearby-det { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }              /* remplacé par la barre d'onglets du bas */

  /* timeline and map each fill the screen; the bottom tabs switch between them */
  .panel {
    position: absolute; inset: 0; width: 100%;
    z-index: 600; box-shadow: none;
    transform: translateX(0); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    padding-bottom: calc(58px + env(safe-area-inset-bottom)); /* clear the tab bar + home indicator */
  }
  .app.show-map .panel { transform: translateX(-100%); }
  .map-wrap { position: absolute; inset: 0; }

  /* Leaflet controls (z-index 1000) would bleed over the timeline — hide them
     in list view, show only when the map is visible. */
  .leaflet-control-container { display: none; }
  .app.show-map .leaflet-control-container { display: block; }

  /* bottom tab bar (+ home-indicator safe area) */
  .tabbar {
    display: flex; position: absolute; bottom: 0; left: 0; right: 0; z-index: 800;
    box-sizing: content-box; height: 58px; padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .1);
  }
  /* 6 onglets : on resserre légèrement pour que « À vérifier » tienne */
  .tabbar__btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: transparent; color: var(--muted); font-size: .655rem; font-weight: 700;
    position: relative; padding: 0 2px;
  }
  .tabbar__btn svg { width: 20px; height: 20px; }
  .tabbar__btn.is-active { color: var(--coral-600); }
  .tabbar__badge {
    position: absolute; top: 6px; left: 50%; margin-left: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* map overlays clear the tab bar */
  .map-toolbar { top: calc(8px + env(safe-area-inset-top)); left: 12px; right: 12px; gap: 8px; }
  .map-toolbar__summary { order: 3; flex-basis: 100%; min-width: 0; justify-content: flex-start; }
  .leaflet-control-zoom { display: none; } /* pinch to zoom on touch — frees the corner */
  .leaflet-control-attribution { margin-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
  /* prev/next flottant : uniquement sur la carte, jamais sur l'itinéraire */
  .day-nav { display: none; }
  .app.show-map .day-nav { display: block; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 24px); z-index: 1001; }
  /* L'animation de la journée est disponible sur mobile aussi. Le bouton est resserré, et
     le sous-titre se place AU-DESSUS de la barre prev/suivant (elle-même au-dessus de la
     barre d'onglets), sinon les trois se recouvrent. */
  .day-nav__play { padding: 6px 9px; }
  .day-nav__play span { display: none; }            /* icône seule : la barre est étroite */
  .subtitle {
    bottom: calc(140px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    z-index: 1002;                                   /* au-dessus de .day-nav (1001) */
  }
  .subtitle__text { font-size: .84rem; }
  /* the nearby panel must clear the (wrapping) map toolbar on small screens */
  .nearby { top: calc(112px + env(safe-area-inset-top)); max-height: 56vh; }
  .geo-panel { top: calc(112px + env(safe-area-inset-top)); }
  /* backdrop-filter is costly on mobile GPUs → use solid surfaces (still legible).
     `:not(.is-active)` est indispensable : sans lui, le `background-color: !important`
     écrasait le corail de `.map-fab.is-active`, qui gardait pourtant son `color: #fff` —
     le bouton « photos sur la carte » devenait blanc sur blanc, donc invisible. */
  .route-pill, .map-fab:not(.is-active), .day-nav, .geo-panel, .nearby {
    backdrop-filter: none !important; background-color: var(--surface) !important;
  }
  .map-fab.is-active { backdrop-filter: none !important; }   /* même gain, sans toucher au fond */

  /* modals become bottom sheets here (covers large phones / small tablets too),
     anchored to the dynamic viewport so the footer clears the browser's bottom bar */
  .modal { padding: 0; align-items: flex-end; bottom: auto; height: 100dvh; }
  .modal__panel {
    max-width: 100%; width: 100%; border-radius: 18px 18px 0 0;
    max-height: 90vh; max-height: 90dvh;
    animation: sheetUp .25s cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } }
  .modal__footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Grande modale : le menu latéral passe en barre horizontale au-dessus du contenu */
  .modal--wide .modal__panel { max-width: 100%; height: auto; }
  .sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sheet__nav {
    flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden;
    padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .sheet__nav::-webkit-scrollbar { display: none; }
  /* Trois onglets depuis la séparation Véhicule / Budget : mesuré à 375px, ils
     réclamaient 410px et le troisième était coupé SANS aucun indice de défilement.
     On resserre, et le dégradé de bord signale qu'il reste du contenu à droite —
     indispensable sur les écrans plus étroits encore (320px). */
  .sheet__item { width: auto; flex-shrink: 0; padding: 8px 9px; gap: 6px; font-size: .8rem; }
  .sheet__nav {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .sheet__nav:not([data-deborde]) { -webkit-mask-image: none; mask-image: none; }
  .sheet__main { padding: 16px 16px 22px; }
}

/* Phones */
@media (max-width: 560px) {
  .panel__head { padding: 12px 14px 10px; }
  .panel__title { font-size: 1.06rem; }
  .panel__acts .icon-btn { width: 34px; height: 34px; }
  .panel__acts .icon-btn svg { width: 18px; height: 18px; }
  .trip-stats { gap: 7px; padding: 12px 14px; }
  .trip-stats__toggle { display: flex; }
  .trip-stats.is-collapsed .stat,
  .trip-stats.is-collapsed .trip-stats__toggle { display: none; }
  .trip-stats.is-collapsed .trip-stats__mini { display: flex; }
  .stat { padding: 9px 6px; min-width: 0; }
  .stat__value { font-size: clamp(.86rem, 4vw, 1rem); white-space: nowrap; }
  .stat__label { font-size: .6rem; }
  /* La date du voyage se règle UNIQUEMENT depuis l'itinéraire : elle doit donc rester
     accessible ici. La masquer renvoyait vers les Réglages, où elle ne se trouve plus. */
  .trip-dates { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .trip-dates__field input { font-size: 16px; }   /* 16px : pas de zoom au focus sur iOS */
  .trip-dates__end { font-size: .8rem; }
  .days { padding: 12px; gap: 12px; }
  /* l'en-tête du jour : laisser le titre respirer (les détails sont dans le résumé) */
  .day__meta { display: none; }
  .day__copy { display: none; }
  /* étapes : plus de place pour le nom */
  .item { gap: 7px; padding: 11px 10px; }
  .item__grip { width: 12px; }
  .item__grip svg { width: 12px; height: 12px; }
  .item__actions { gap: 0; }

  .route-pill { padding: 8px 13px; font-size: .8rem; gap: 8px; }
  .map-fab { width: 40px; height: 40px; }

  .day-nav { padding: 9px 10px 11px; border-radius: 14px; }
  .day-nav__row { gap: 6px; }
  .day-nav__all { padding: 8px 10px; font-size: .76rem; }
  .day-nav__title { font-size: .85rem; }
  .day-nav__stats { font-size: .72rem; }

  /* bigger touch targets in the timeline */
  .item__btn { width: 30px; height: 30px; }
  .day__head { padding: 12px 10px; gap: 5px; }
  .day__collapse, .day__view, .day__copy, .day__del { width: 30px; height: 30px; }
  .leg__mode { width: 27px; height: 24px; }

  /* éviter le zoom auto iOS au focus : les inputs doivent faire ≥16px */
  .field__input, .trip-dates__field input, .day__time,
  input[type="date"], input[type="time"], input[type="number"], select.field__input { font-size: 16px; }
  /* `.admin-cfg .field__input` (0,2,0) l'emporterait sur la règle ci-dessus : les champs
     de clé de l'administration zoomaient au focus sous iOS. */
  .admin-cfg .field__input { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  /* compte : nom du voyage sur sa ligne, actions en dessous (alignées à droite) */
  .trip-row { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .trip-row__open { flex: 1 1 100%; }
  .trip-row__btn { width: 34px; height: 34px; }
}

/* Touch devices: larger hit targets + make the drag handle discoverable (no hover) */
@media (hover: none) {
  .item__grip { opacity: .5; }
}
@media (pointer: coarse) {
  .map-fab { width: 44px; height: 44px; }
  .nextstep__nav { width: 44px; height: 44px; }
  .item__btn, .leg__mode, .day__collapse, .day__view, .day__del, .day__copy { width: 34px; height: 34px; }
  /* the done toggle is isolated on the left → safe to extend its tap zone to 44px */
  .item__node { position: relative; }
  .item__node::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
  .tabbar__btn { min-height: 56px; }
}

/* ============================================================
   Vue globe 3D (MapLibre) — overlay plein écran, lecture seule
   ============================================================ */
.globe { position: fixed; inset: 0; z-index: 3000; background: var(--bg); }
.globe[hidden] { display: none; }
.globe__canvas { position: absolute; inset: 0; }
.globe__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,0));
  color: #fff;
}
.globe__title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.globe__title span { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.globe__title small { font-size: .76rem; opacity: .8; }
.globe__acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.globe__acts .btn--ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.globe__acts .btn--ghost:hover { background: rgba(255,255,255,.26); }
/* Frise des jours : UNE seule rangée qui défile. Un itinéraire de 16 jours empilait
   auparavant 3 ou 4 rangées (flex-wrap: wrap) et mangeait le globe. Les marges auto sur
   les extrémités centrent la frise tant qu'elle tient, sans rendre le premier bouton
   inatteignable quand elle déborde — ce que ferait `justify-content: center`. */
.globe__days {
  position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2;
  display: flex; gap: 7px; flex-wrap: nowrap; padding: 2px 16px 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                       /* on fait défiler au doigt ou à la molette */
}
.globe__days::-webkit-scrollbar { display: none; }
.globe__days > :first-child { margin-left: auto; }
.globe__days > :last-child { margin-right: auto; }
.globe-day {
  border: 1px solid rgba(255,255,255,.35); background: rgba(15,23,42,.55); color: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .15s;
}
.globe-day { flex: 0 0 auto; scroll-snap-align: center; }
.globe-day:hover { background: var(--coral); border-color: var(--coral); }
.globe-day.is-active { background: var(--coral); border-color: var(--coral); }
.globe__msg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: rgba(15,23,42,.85); color: #fff; padding: 14px 18px; border-radius: 14px;
  font-size: .88rem; text-align: center; max-width: min(340px, calc(100% - 32px));
}
.globe-pin {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: #fff; cursor: pointer;
  background: var(--c-place); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.globe-pin--hotel { background: var(--c-hotel); }
.globe-pin--activity { background: var(--c-activity); }
.maplibregl-popup-content { border-radius: 10px; font-family: var(--font); font-size: .82rem; padding: 8px 11px; }
@media (max-width: 560px) {
  .globe__bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .globe__acts { width: 100%; justify-content: flex-end; }
}