/* Sorti de css/app.css le 29/09/2026 : le même tableau de bord sert au site
   du chauffeur (index.html) et à la Console (console.html). */
/* =========================================================================
   LE TABLEAU DE BORD DU BILAN (js/bord.js) — une page, sept tuiles, un « i »
   -------------------------------------------------------------------------
   Yanis, 14 septembre 2026 : « une seule page pour tout, on ne scrolle pas ;
   surtout les chiffres clés ; le reste derrière le bouton info ». Uber et
   Bolt gardent une couleur chacun, validées par le validateur dataviz en
   clair (#e11d48 / #6d28d9) et en sombre (#e8455c / #8e72ef) ; les barres
   d'heures reprennent les quatre violets de la grille des secteurs.
   ========================================================================= */
:root {
  --bord-uber: #e11d48; --bord-bolt: #6d28d9;
  --bord-v1: #a78bfa; --bord-v2: #8b5cf6; --bord-v3: #6d28d9; --bord-v4: #4c1d95;
}
:root[data-theme="dark"] {
  --bord-uber: #e8455c; --bord-bolt: #8e72ef;
  --bord-v1: #6d28d9; --bord-v2: #8b5cf6; --bord-v3: #a78bfa; --bord-v4: #c4b5fd;
}
#bord { display: flex; flex-direction: column; gap: 8px; }
/* `display: flex` bat l'attribut `hidden` : sans cette ligne, le tableau de
   bord restait affiché au-dessus du calendrier (constaté au banc, 20/09). */
#bord[hidden] { display: none; }
.bord__barre { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.bord__periode { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bord__titre {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bord__fleche {
  width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
}
.bord__modes { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 2px; flex: none; }
.bord__modes button {
  border: 0; background: transparent; font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 5px 9px; border-radius: var(--r-pill); color: var(--text-2); cursor: pointer;
}
.bord__modes .bord__mode--on { background: var(--ink); color: var(--on-ink); }
.bord__tuile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 9px 11px; position: relative; min-width: 0;
}
.bord__lab {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); padding-right: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bord__i {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700;
  line-height: 24px; text-align: center; cursor: pointer; padding: 0;
}
.bord__hero { background: var(--ink); color: var(--on-ink); border-color: var(--ink); padding: 12px 14px 11px; }
.bord__hero .bord__lab { color: var(--on-ink-2); }
.bord__hero .bord__i { background: transparent; border-color: var(--on-ink-2); color: var(--on-ink); }
.bord__big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 2px; }
.bord__sous { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; font-weight: 600; opacity: .85; }
.bord__hero-note { margin-top: 5px; font-size: 11.5px; opacity: .75; }
.bord__pt--uber, .bord__pt--bolt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.bord__pt--uber { background: var(--bord-uber); }
.bord__pt--bolt { background: var(--bord-bolt); }
.bord__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bord__kpis .bord__tuile { padding: 9px 8px; }
.bord__v {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.bord__v small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--text-2); }
.bord__tag {
  display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-pill); background: var(--calm-soft); color: var(--calm);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.bord__tag--chaud { background: var(--warm-soft); color: var(--warm); }
.bord__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Une colonne par heure : Uber en bas, Bolt au-dessus (15/09/2026, la case
   « Uber ou Bolt » a rejoint ce graphique). Douze pixels au-dessus des
   barres pour le nombre des trois meilleures heures. */
.bord__heures { display: flex; align-items: flex-end; gap: 2px; height: 68px; margin-top: 4px; }
.bord__h {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 2px; overflow: visible;
}
.bord__h s { display: block; width: 100%; }
.bord__h-u { background: var(--bord-uber); border-radius: 0 0 2px 2px; }
.bord__h-b { background: var(--bord-bolt); border-radius: 3px 3px 0 0; }
.bord__h s:only-child { border-radius: 3px 3px 2px 2px; }
.bord__h-val {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.bord__h--vide { background: color-mix(in srgb, var(--text-2) 10%, transparent); border-radius: 3px 3px 0 0; }
.bord__lab small { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.bord__lab small i { vertical-align: 0; margin-right: 3px; }
.bord__axe {
  display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
/* Une seule grille pour la liste : la colonne des noms prend le plus long, jamais
   coupé ; les barres restent alignées (12/10, « Notre-Dame » s'affichait coupé). */
.bord__lieux { display: grid; grid-template-columns: max-content minmax(0, 1fr) 30px; align-items: center; gap: 5px 6px; margin-top: 6px; font-size: 11px; }
.bord__lieu { display: contents; }
.bord__lieu b { font-weight: 600; color: var(--text); white-space: nowrap; }
.bord__lieu i { display: block; height: 9px; border-radius: 3px; background: var(--bord-v3); }
.bord__lieu em { font-style: normal; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bord__anneau { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bord__anneau svg { width: 74px; height: 74px; flex: none; }
.bord__legende { font-size: 11px; line-height: 1.35; }
.bord__legende b { display: block; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bord__semaines { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 6px; }
.bord__sem { flex: 1; background: var(--bord-v2); border-radius: 3px 3px 0 0; opacity: .5; }
.bord__sem--ici { opacity: 1; background: var(--bord-v4); }
/* une semaine dont une part n a pas de commission connue : hachurée */
.bord__sem--partiel {
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 255, 255, .35) 3px 5px);
}
.bord__pied { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px; }
.bord__lien {
  border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); padding: 6px 0; cursor: pointer;
}
.bord__vide { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }
.bord__accueil { text-align: center; padding: 20px 14px; }
.bord__accueil p { margin: 0 0 12px; color: var(--text-2); }
/* La feuille de détail passe PAR-DESSUS le panneau du Bilan (z 1600) : la
   feuille commune (#feuille) est occupée par le Bilan lui-même, l ouvrir
   refermerait l écran qu on regarde. */
.bord__voile {
  position: fixed; inset: 0; z-index: 1700; background: rgba(10, 10, 11, .5);
  display: none; align-items: flex-end; justify-content: center;
}
.bord__voile--on { display: flex; animation: fade var(--base) var(--ease); }
.bord__feuille {
  width: 100%; max-width: 480px; max-height: 82vh; overflow: auto;
  background: var(--surface); color: var(--text); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: sheetUp var(--base) var(--ease);
}
.bord__feuille h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; padding-right: 76px; }
.bord__feuille p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.bord__feuille p b { color: var(--text); }
.bord__feuille .card { margin-top: 8px; }
.bord__fermer {
  float: right; border: 0; background: var(--surface-2); border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; color: var(--text);
}
.bord__table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 6px; }
.bord__table td { padding: 5px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.bord__table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
#bilan-analyse { margin-top: 4px; }

/* Le sélecteur de période du Bilan et du Calendrier : un appui, la roue du
   téléphone (15/09/2026, « on n'arrive pas à appuyer dessus »). Les flèches
   passent à 40 px, la taille d'un doigt. */
.bord__select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
  padding: 8px 20px 8px 4px; max-width: 210px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2385858d' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; cursor: pointer;
}
.bord__fleche { width: 40px; height: 40px; font-size: 26px; }
.bord__v--mot { font-size: 18px; }

/* ---------- LE CALENDRIER DE L'AÉROPORT, MODE JOUR (js/calendrier-aeroport.js) ---------- */
.ca2-h { background: var(--info); opacity: .72; border-radius: 3px 3px 2px 2px; }
.ca2-h--pic { opacity: 1; }
.ca2-longs { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--text); }
.ca2-long b { font-variant-numeric: tabular-nums; font-weight: 800; margin-right: 8px; min-width: 34px; display: inline-block; }
.ca2-long span { color: var(--text-2); }
.ca2-long--plus { color: var(--text-3); font-weight: 700; }
.ca2-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.ca2-jour {
  border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ca2-jour__piste { height: 44px; width: 100%; display: flex; align-items: flex-end; }
.ca2-jour__piste i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--info); opacity: .45; }
.ca2-jour--ici .ca2-jour__piste i { opacity: 1; }
.ca2-jour__nom { font-size: 9.5px; color: var(--text-3); white-space: nowrap; }
.ca2-jour--ici .ca2-jour__nom { color: var(--text); font-weight: 800; }
.ca2-jour:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 6px; }

/* Le titre court « Aéroport », à gauche de la croix de fermeture. */
.ca2-titre { margin: 0 44px 4px 2px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.ca2-long { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La barre du tableau de bord passe sous le bouton ✕ du panneau quand elle
   en est la première ligne (le Bilan) ; et à 375 px les modes descendent
   d'une ligne plutôt que d'écraser le sélecteur. */
.modal #bord > .bord__barre { padding-right: 38px; }
.bord__barre { flex-wrap: wrap; row-gap: 4px; }
.bord__modes { margin-left: auto; }
.bord__h-val { white-space: nowrap; }
.bord__kpis .bord__lab { letter-spacing: .04em; }

/* ---------- Suivi GPS (js/suivi.js), 15/09/2026 ----------
   Une carte à part dans Mes données, sous le dépôt de fichiers. */
#bilan-suivi { margin-top: 12px; }
.suivi__titre { font-weight: 700; font-size: 15px; margin: 0; color: var(--text); }
.suivi__ligne { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; color: var(--text); }
.suivi__alerte {
  font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; padding: 8px 10px;
  border-radius: 10px; background: var(--hot-soft); color: var(--text);
}
.suivi__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.suivi__effacer {
  align-self: center; background: none; border: 0; padding: 6px 8px;
  color: var(--hot); font-size: 13px; text-decoration: underline; cursor: pointer;
}
/* Les arrêts de la trace sur la Journée : plus petits que les courses et
   d'une autre couleur — la course reste le repère, l'arrêt le contexte. */
.jour__arret {
  box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 11px; border: 2px solid #fff; background: #0ea5e9; color: #fff;
  font: 700 9.5px/18px system-ui; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; z-index: 1;
}
/* Un arrêt se tient souvent là où la course a chargé : la course passe
   devant, c'est elle le repère (vu le 15/09/2026, l'arrêt la masquait). */
.jour__point { z-index: 2; }
/* « Voir ma trace » fait défiler jusqu'à la Journée : sans cette marge, la
   barre d'onglets collée en haut masquait son titre. */
#bilan-journee { scroll-margin-top: 64px; }
/* L'export Google déposé (js/suivi.js, 16/09/2026) : sous le suivi Overland,
   séparé d'un filet. */
.suivi__google { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Un arrêt reconstitué par Google : même forme, en creux — la mesure
   d'Overland reste pleine. */
.jour__arret--google { background: #fff; color: #334155; border-color: #94a3b8; }

/* Le haut du Calendrier de l'aéroport (15/09/2026, maquette B choisie par
   Yanis) : le graphe des heures en grand, les avions et les pics dessous. */
.ca2-resume { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.ca2-resume b { color: var(--text); font-weight: 800; }
/* La semaine débordait de sa tuile d'une colonne : la date passe sous la
   lettre, et sept colonnes égales tiennent dans la moitié d'un téléphone. */
.ca2-jours { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ca2-jour { min-width: 0; }
.ca2-jour__nom { line-height: 1.15; text-align: center; }
/* La barre sur une seule ligne — « aligner Aujourd'hui, et Jour / Saison sur
   la même ligne » — et un petit espace avant les tuiles. Le jour s'écrit à
   la taille de son mot ; le sélecteur natif, invisible, est posé dessus et
   ouvre la roue du téléphone (16 px : iOS ne zoome pas au toucher). */
.ca2-barre { flex-wrap: nowrap; margin: 2px 0 12px; }
.ca2-barre .bord__fleche { width: 32px; height: 40px; }
.ca2-barre .bord__modes { margin-left: auto; flex: none; }
.ca2-choix { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 8px 2px; cursor: pointer; }
.ca2-choix__texte { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca2-choix::after {
  content: ''; flex: none; width: 12px; height: 8px;
  background: no-repeat center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2385858d' stroke-width='2' stroke-linecap='round'/></svg>");
}
.ca2-choix__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* ---------- MON CALENDRIER (js/calendrier.js), 15/09/2026 ----------
   Le bouton « ＋ Calendrier » partout où l'appli montre quelque chose de
   daté, et l'écran de la journée. La barre et le choix de date reprennent
   ceux du Calendrier de l'aéroport (.bord__barre, .ca2-choix). Aucune
   couleur par type : l'icône dit le type, la couleur reste porteuse
   d'information (la ligne rouge de maintenant). */
.cal-plus {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.cal-plus--on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.cal-plus:active { transform: scale(.97); }
.cal-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.map-popup .cal-plus { margin-top: var(--s2); min-height: 32px; }
.bord__table .cal-plus { margin: 4px 0 0 8px; min-height: 32px; }