/* ── En-tête marque Tracéo (É1, partagé) ───────────────── */
.app-header {
  background: color-mix(in srgb, var(--canvas) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 30;
}
.tr-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.tr-brand__pic { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.tr-wordmark {
  font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  color: var(--ink); line-height: 1; white-space: nowrap;
}
.tr-wordmark__e { color: var(--traceo-red); }
.app-header__actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* Pastille d'identité locale (É2) : prénom stocké sur l'appareil, aucun compte */
.tr-me {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  cursor: pointer; max-width: 150px;
}
.tr-me:hover { background: var(--surface-2); }
.tr-me__av {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--produit-wash); color: var(--produit-ink); font-weight: 800; font-size: 12px;
}
.tr-me__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599.98px) { .tr-me__name { display: none; } .tr-me { padding: 0 5px; } }
/* État actif du bouton-icône favori (étoile dorée) */
.tr-iconbtn.fav-on { background: var(--soleil-wash); color: #9A7400; border-color: color-mix(in srgb, var(--soleil-mieux) 55%, transparent); }

/* É6 — pictos SVG sur fond plein. tr-icons.js pose la couleur de famille
   (bleu nav, rouge actions…) en style INLINE : sur un bouton rempli ou une
   pastille colorée, elle devient illisible. Seul `!important` bat un style
   inline → on force la reprise de la couleur du texte. Idem pour les boutons
   d'action discrets, qui doivent suivre leur état de survol. */
.tr-btn:not(.tr-btn--secondary):not(.tr-btn--ghost) [data-tr-icon],
.tr-iconbtn.is-active [data-tr-icon],
.go-alarm-banner__ic [data-tr-icon],
.report-alert__ic [data-tr-icon],
.cal-act [data-tr-icon],
.notif-banner .nb-close [data-tr-icon],
.place-picked [data-tr-icon] { color: currentColor !important; }

/* ── Nav principale : barre haute (desktop) ────────────── */
.app-nav { display: none; }
@media (min-width: 900px) {
  .app-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; min-width: 0; }
}
.app-nav__item {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.app-nav__item:hover { color: var(--ink); background: var(--surface-2); }
.app-nav__item.is-active { color: var(--traceo-red); background: var(--traceo-red-soft); }
.app-nav__ic { font-size: 15px; line-height: 1; }

/* Bouton actualiser (rotation au clic) */
.refresh-svg { transition: transform var(--dur-slow) var(--ease-out); }
.is-spin .refresh-svg { transform: rotate(360deg); }

/* ── Nav principale : tabbar basse (mobile) ────────────── */
.tabbar { display: none; }
@media (max-width: 899.98px) {
  .tabbar {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
    border-top: 1px solid var(--border);
  }
  body { padding-bottom: 66px; }   /* place pour la tabbar fixe */
}
.tab {
  flex: 1; min-height: 48px; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  border-radius: var(--r-sm);
}
.tab__ic { font-size: 19px; line-height: 1; }
.tab.is-active { color: var(--traceo-red); }

/* ── Ligne fil d'Ariane + outils d'arrêt (É1) ──────────── */
.crumbrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem 1rem;
}
.crumbrow.hidden { display: none; }
.acttools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem 0;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  min-width: 0;
}
.breadcrumb:empty { display: none; }
.crumb {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .4rem;
  border-radius: var(--r-xs);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.crumb:hover { color: var(--ink); background: var(--surface-2); }
.crumb--here { color: var(--ink); font-weight: 700; cursor: default; }
.crumb--here:hover { background: none; }
.crumb__sep { color: var(--ink-faint); }

/* ── Steps ─────────────────────────────────────────────── */
main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }

/* ── En-tête de page partagé (É6) ──────────────────────────────
   Même gabarit que .al-pagehd (É7) / .stats-pagehead (É4) : titre + sous-titre
   à gauche, actions à droite. Mutualisé ici parce que l'agenda et le mode GO
   n'ont pas de maquette dédiée — ils reprennent le motif des écrans refondus. */
.pagehd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); padding: 0 2px; margin-bottom: var(--sp-4);
}
.pagehd__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pagehd__title {
  margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight); color: var(--ink); line-height: 1.05;
  display: inline-flex; align-items: center; gap: 8px;
}
.pagehd__sub {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3);
  font-family: var(--font-mono);
}
.pagehd__act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Badges de ligne cliquables (tr-line + forme par mode : voir tokens/components.css) */
.tr-line[data-line] { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.tr-line[data-line]:hover { transform: scale(1.12); }

/* Bouton « +N bus » repliable */
.bus-toggle {
  height: 26px;
  padding: 0 .5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bus-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.bus-extra { display: contents; }
.bus-extra.hidden { display: none; }

/* ── States ────────────────────────────────────────────── */
.state-message { text-align: center; padding: 3rem 1rem; color: var(--ink-3); grid-column: 1 / -1; }
.state-message .icon { font-size: 2.5rem; margin-bottom: 1rem; }
.state-message p { font-size: var(--fs-body); }
.state-message small { font-size: var(--fs-xs); display: block; margin-top: .4rem; }
.state-message.error .icon { color: var(--crit); }

.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--traceo-red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Socle des modales (É6, partagé signalement + lieu) ─────────
   Vivait dans css/reports.css (thème violet) : remonté ici parce que la modale
   de lieu (accueil) s'appuie sur le même gabarit. `.modal` = scrim plein écran,
   `.modal-card` = feuille. Sur mobile la feuille est ancrée en bas (bottom
   sheet), comme l'éditeur d'alertes (É7) ; centrée dès 600 px. */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  /* Scrim volontairement NON tokenisé : un voile doit assombrir dans les deux
     thèmes (un token d'encre s'éclaircit en sombre et délaverait la page).
     Même valeur que `.al-scrim` (É7). */
  background: rgba(20, 12, 10, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, .6); }
.modal.hidden { display: none !important; }
.modal-card {
  width: 100%; max-width: 460px;
  max-height: min(88vh, 720px); display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-3);
  animation: modal-in var(--dur-base) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 600px) {
  .modal { align-items: center; padding: var(--sp-4); }
  .modal-card { border-radius: var(--r-lg); padding-bottom: 0; }
}
@keyframes modal-in {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight); color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.modal-body { padding: var(--sp-4); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}

@media (max-width: 500px) {
  .app-header { padding: .6rem .9rem; }
  main { padding: 1rem; }
}

/* ── Toast (partage de lien, E8.1) ─────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 1rem);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: .6rem 1rem; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 1100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Alertes locales (E1.2) ────────────────────────────── */
/* Repli bannière in-app quand les notifs système sont refusées/indisponibles. */
.notif-banner {
  position: fixed; left: 50%; top: .8rem; transform: translate(-50%, -1rem);
  display: flex; align-items: flex-start; gap: .6rem;
  max-width: min(92vw, 460px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-left: 4px solid var(--traceo-red);
  border-radius: var(--r-md); padding: .7rem .9rem;
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 1101; cursor: pointer;
}
.notif-banner.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.notif-banner .nb-text { display: flex; flex-direction: column; gap: .15rem; }
.notif-banner strong { font-size: var(--fs-sm); color: var(--ink); }
.notif-banner span { font-size: var(--fs-xs); color: var(--ink-3); }
.notif-banner .nb-close {
  flex: none; background: transparent; border: 0; color: var(--ink-3);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .15rem;
}
.notif-banner .nb-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .toast, .notif-banner { transition: none; }
}

/* Prod : on masque les outils d'observabilité (compteurs de quota/API, bouton de
   recalcul de plan « consomme du quota »). L'attribut data-env="prod" est posé sur
   <html> par le backend (_serve_index) quand APP_VERSION ≠ "dev". En dev, tout
   reste visible. */
html[data-env="prod"] #quota-footer,
html[data-env="prod"] #regen-btn { display: none !important; }