/* La page d'itineraire poids lourd — pensee pour un telephone tenu d'une main,
   dans une cabine, avec des gants. Gros caracteres, gros boutons, peu de mots. */

.nav-corps {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.nav-entete {
  flex: 0 0 auto;
  background: #12355b;
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.nav-marque {
  font: 700 15px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  white-space: nowrap;
}
.nav-marque span { color: #f58a1e; }
.nav-titre {
  font: 600 14px/1.25 Arial, Helvetica, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-carte { flex: 1 1 auto; min-height: 0; }

.nav-panneau {
  flex: 0 0 auto;
  background: #fff;
  color: #15202a;
  border-top: 1px solid #d5dbe0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  max-height: 52vh;
  overflow-y: auto;
}

.nav-etat { margin: 0; font: 400 14px/1.45 Arial, Helvetica, sans-serif; color: #4c5d6b; }
.nav-erreur { color: #ae3220; font-weight: 700; }

.nav-chiffres { display: flex; gap: 22px; align-items: baseline; margin-bottom: 4px; }
.nav-chiffre b {
  font: 700 26px/1 Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
}
.nav-chiffre span { font: 400 12px/1 Arial, Helvetica, sans-serif; color: #7c8b98; margin-left: 4px; }
.nav-profil {
  font: 600 11px/1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #12355b;
  background: #e7f0f9;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 10px;
}

.nav-gabarit { margin: 8px 0 12px; font: 400 13px/1.4 Arial, Helvetica, sans-serif; }
.nav-gabarit label { color: #4c5d6b; display: block; margin-bottom: 4px; }
.nav-gabarit select {
  width: 100%;
  padding: 9px 8px;
  font: 400 15px/1.2 Arial, Helvetica, sans-serif;
  border: 1px solid #b4bec6;
  border-radius: 5px;
  background: #fff;
  color: #15202a;
}

/* G26 (16/09/2026) — LA HAUTEUR QUE LE CONDUCTEUR DÉCLARE.
   « Un pont bas est un pont bas quand il est moins haut que la hauteur
   renseignée par le conducteur. » Le champ se tient sous le choix du véhicule,
   dans la même colonne et avec les mêmes bords : c'est la même question posée
   deux fois — quel camion, et de quelle hauteur aujourd'hui. Vide, il affiche
   « selon le véhicule » : rien n'est déclaré, rien n'est remplacé. */
.nav-hauteur { margin: 10px 0 0; font: 400 13px/1.4 Arial, Helvetica, sans-serif; }
.nav-hauteur label { color: #4c5d6b; display: block; margin-bottom: 4px; }
.nav-hauteur input {
  width: 100%;
  padding: 9px 8px;
  font: 400 15px/1.2 Arial, Helvetica, sans-serif;
  border: 1px solid #b4bec6;
  border-radius: 5px;
  background: #fff;
  color: #15202a;
}
.nav-hauteur-aide { margin: 4px 0 0; color: #6b7a87; font-size: 12px; }
/* Refusée : le bord rouge et la phrase disent ce qui ne va pas. RIEN n'est
   corrigé en douce — un camion silencieusement ramené à 4,00 m, c'est un pont
   arraché. */
.nav-hauteur-refus input { border-color: #b3261e; }
.nav-hauteur-refus .nav-hauteur-aide { color: #b3261e; }

.nav-boutons { display: flex; gap: 8px; }
.nav-boutons a {
  flex: 1;
  text-align: center;
  padding: 13px 4px;
  border-radius: 6px;
  font: 700 14px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
}
.nav-gmp { background: #fff; color: #3c4043; box-shadow: inset 0 0 0 1px #c6cbd2; }
.nav-wze { background: #33ccff; color: #0b2a3d; }

@media (prefers-color-scheme: dark) {
  .nav-panneau { background: #1a2229; color: #e7edf1; border-top-color: #2c3941; }
  .nav-etat { color: #a8b6c1; }
  .nav-provenance { color: #a8b6c1; }
  .nav-profil { color: #63a8e8; background: #16303f; }
  .nav-gabarit label { color: #a8b6c1; }
  .nav-gabarit select { background: #1a2229; color: #e7edf1; border-color: #3c4b55; }
  .nav-hauteur label { color: #a8b6c1; }
  .nav-hauteur input { background: #1a2229; color: #e7edf1; border-color: #3c4b55; }
  .nav-hauteur-aide { color: #92a1ad; }
  .nav-hauteur-refus input { border-color: #f2b8b5; }
  .nav-hauteur-refus .nav-hauteur-aide { color: #f2b8b5; }
  .nav-gmp { background: #1a2229; color: #e7edf1; box-shadow: inset 0 0 0 1px #3c4b55; }
}

/* Fond de carte indisponible : on le dit, la page reste utilisable. */
.nav-carte { position: relative; }

/* G26 (11/09/2026) — LE FOND QUI NE SE PEINT PAS.
   Le 11/09, géolocalisation refusée : le canevas existait (654 x 411), neuf
   requetes de tuiles etaient parties, et rien n'etait peint. MapLibre ne rejette
   pas sa promesse dans ce cas — le style charge, la SOURCE echoue ensuite, en
   silence. Le mot se pose PAR-DESSUS la carte vivante, sans toucher ni a son
   display ni a sa taille : le trace et l'epingle restent lisibles dessous. */
.nav-carte-mot {
  position: absolute; z-index: 3; left: 12px; right: 12px; top: 50%;
  transform: translateY(-50%); margin: 0;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(32,33,36,.88); color: #fff;
  font: 600 14px/1.35 Arial, Helvetica, sans-serif; text-align: center;
}

.nav-carte-absente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3e7ea;
  color: #7c8b98;
  font: 400 13px/1.4 Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .nav-carte-absente { background: #202830; color: #7c8b98; }
}

/* ============================================================================
   A6 — le guidage, façon Google Maps (09/09/2026)
   ============================================================================ */

/* En guidage : plus d'en-tête, la carte prend tout, le bandeau vert au-dessus. */
.nav-corps { position: relative; }
.nav-guidage .nav-entete { display: none; }
.nav-guidage .nav-panneau { max-height: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }

/* L'épingle d'arrivée (remplace la pastille orange) */
.nav-epingle {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #d93025; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* L'écran de départ : chiffres et gros bouton bleu « Démarrer » */
.nav-chiffres { gap: 18px; flex-wrap: wrap; }
.nav-chiffre b { font-size: 24px; }
.nav-ligne-depart { display: flex; gap: 10px; align-items: stretch; margin: 10px 0 6px; }
/* G25 lot D6 — d'où vient la durée. Une ligne grise, discrète, SOUS le geste
   principal : elle informe, elle ne réclame rien. Aucune ressource externe (la
   CSP de /nav n'autorise que 'self'), aucun pictogramme : du texte. */
.nav-provenance {
  margin: 0 0 8px;
  font: 400 13px/1.35 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}
.nav-demarrer {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; border: 0; border-radius: 28px; background: #1a73e8; color: #fff;
  font: 700 18px/1 Arial, Helvetica, sans-serif; cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,115,232,.35);
}
.nav-demarrer:active { background: #1558b8; }
.nav-demarrer svg { color: #fff; }
.nav-etapes-bouton {
  flex: 0 0 auto; min-height: 54px; padding: 0 16px; border-radius: 28px; border: 1px solid #b4bec6;
  background: #fff; color: #1a73e8; font: 600 15px/1 Arial, Helvetica, sans-serif; cursor: pointer;
}
.nav-etapes { list-style: none; margin: 6px 0 10px; padding: 0; max-height: 34vh; overflow-y: auto; border-top: 1px solid #e3e7ea; }
.nav-etapes li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #e3e7ea; font: 400 14px/1.35 Arial, Helvetica, sans-serif; }
.nav-etape-fleche { color: #1a73e8; flex: 0 0 auto; display: flex; }
.nav-etape-texte { flex: 1 1 auto; }
.nav-etape-dist { flex: 0 0 auto; color: #7c8b98; font-variant-numeric: tabular-nums; }
.nav-autres { margin-top: 10px; font: 400 12.5px/1.4 Arial, Helvetica, sans-serif; color: #7c8b98; }
.nav-autres a { color: #4c5d6b; }

/* Le bandeau vert */
.nav-bandeau {
  position: absolute; z-index: 5; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px;
  background: #1e8e3e; color: #fff; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.35);
  overflow: hidden;
}
.nav-bandeau-principal { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.nav-bandeau-fleche { flex: 0 0 auto; display: flex; color: #fff; }
.nav-bandeau-texte { flex: 1 1 auto; min-width: 0; }
.nav-bandeau-distance { font: 700 30px/1.05 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.nav-bandeau-instruction { font: 600 17px/1.25 Arial, Helvetica, sans-serif; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nav-bandeau-panneau { margin-top: 4px; font: 600 13px/1.2 Arial, Helvetica, sans-serif; background: rgba(255,255,255,.18); display: inline-block; padding: 3px 8px; border-radius: 4px; }
.nav-bandeau-suivant { background: #146c30; padding: 7px 14px; font: 600 14px/1.2 Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.nav-bandeau-suivant span { overflow: hidden; text-overflow: ellipsis; }
.nav-bandeau-arrivee { background: #1a73e8; }

/* Le rond bleu du camion */
.nav-puck { width: 40px; height: 40px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* ----------------------------------------------------------------------------
   LES BOUTONS SUR LA CARTE, ET LA HAUTEUR DU PANNEAU (G26, 11/09/2026)

   MESURÉ EN PRODUCTION LE 11/09 : « Signaler une interdiction » et « Dévier de
   la route » passaient PAR-DESSUS « Passer cet arrêt » — recouvrement de 30 %
   et 65 %, clics interceptés.

   LA CAUSE N'EST PAS L'ÉCRAN DE TOURNÉE. Elle est ici : ces boutons étaient
   ancrés à 110 px FIXES du bas de l'écran, pendant que le panneau qui porte les
   commandes a une hauteur VARIABLE — 52 vh au plus hors guidage, sans limite
   pendant. Dès que le panneau dépasse 110 px, il passe dessous. C'était donc
   vrai de TOUS les écrans, et pas des seules tournées : « Terminer » et « Photo
   de l'entrée » d'un trajet simple étaient recouverts de la même façon.

   LA RÉPARATION : l'ancrage suit la hauteur RÉELLE du panneau, que `nav.js`
   mesure et publie dans `--nav-panneau-h` (un ResizeObserver : elle change à
   chaque écran, et une mesure prise une fois serait fausse la fois suivante).
   Les 110 px ne sont plus qu'un repli, le temps du tout premier rendu.
   ---------------------------------------------------------------------------- */
:root { --nav-panneau-h: 110px; }

.nav-flottants { position: absolute; z-index: 5; right: 10px; bottom: calc(var(--nav-panneau-h, 110px) + 12px); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.nav-flottant {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; min-width: 48px; height: 48px; padding: 0 12px;
  border: 0; border-radius: 24px; background: #fff; color: #3c4043; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  font: 700 15px/1 Arial, Helvetica, sans-serif; cursor: pointer;
}
.nav-flottant svg { flex: 0 0 auto; }
.nav-recentrer { color: #1a73e8; }
/* G29 — « Répéter » : le bouton qu'on cherche quand on n'a pas entendu. Bleu
   comme « Recentrer », donc lu comme une commande de guidage et non comme une
   alerte. */
.nav-flottant-repeter { color: #1a73e8; }
.nav-flottant-devier { background: #fff3cd; color: #7a5a00; }

/* ----------------------------------------------------------------------------
   LE MESSAGE COURT (G26, 11/09/2026) — il était coupé net.

   MESURÉ : `white-space: nowrap` dans un corps en `overflow: hidden`. « Position
   indisponible. Vérifiez que la localisation est autorisée. » fait 462 px sur un
   écran de 360 : le chauffeur ne lisait jamais la fin de la phrase, c'est-à-dire
   la seule partie qui lui disait quoi faire.

   Un message d'erreur n'a pas à tenir sur une ligne. Il a à se lire. Il passe
   donc à la ligne, borné à la largeur de l'écran moins ses marges — deux lignes
   pour la phrase ci-dessus, entièrement lisibles sur 360 px.

   Son ancrage suit la hauteur du panneau, pour la même raison que les boutons
   flottants juste au-dessus.
   ---------------------------------------------------------------------------- */
.nav-toast {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-panneau-h, 110px) + 12px);
  background: rgba(32,33,36,.92); color: #fff; padding: 10px 16px; border-radius: 20px;
  font: 600 14px/1.3 Arial, Helvetica, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  white-space: normal; overflow-wrap: break-word; text-align: center;
  box-sizing: border-box; max-width: calc(100vw - 32px);
}

/* La barre du bas en guidage */
.nav-bas { display: flex; align-items: center; gap: 12px; }
.nav-bas-chiffres { flex: 1 1 auto; min-width: 0; }
.nav-bas-duree { font: 700 26px/1.05 Arial, Helvetica, sans-serif; color: #1e8e3e; font-variant-numeric: tabular-nums; }
.nav-bas-detail { font: 400 14px/1.3 Arial, Helvetica, sans-serif; color: #4c5d6b; margin-top: 2px; }
.nav-bas-vitesse { flex: 0 0 auto; text-align: center; padding: 6px 10px; border: 2px solid #d5dbe0; border-radius: 10px; }
.nav-bas-vitesse b { display: block; font: 700 20px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.nav-bas-vitesse span { font: 400 10px/1 Arial, Helvetica, sans-serif; color: #7c8b98; }
.nav-quitter, .nav-terminer {
  flex: 0 0 auto; min-height: 46px; padding: 0 18px; border-radius: 23px; cursor: pointer;
  font: 700 15px/1 Arial, Helvetica, sans-serif;
}
.nav-quitter { border: 2px solid #d93025; background: #fff; color: #d93025; }
.nav-terminer { border: 0; background: #1a73e8; color: #fff; width: 100%; min-height: 54px; font-size: 18px; }

@media (prefers-color-scheme: dark) {
  .nav-etapes-bouton { background: #1a2229; border-color: #3c4b55; color: #8ab4f8; }
  .nav-etapes, .nav-etapes li { border-color: #2c3941; }
  .nav-etape-fleche { color: #8ab4f8; }
  .nav-autres a { color: #a8b6c1; }
  .nav-flottant { background: #2b3239; color: #e7edf1; }
  .nav-recentrer { color: #8ab4f8; }
  .nav-bas-detail { color: #a8b6c1; }
  .nav-bas-vitesse { border-color: #3c4b55; }
  .nav-quitter { background: #1a2229; }
}

/* ============================================================================
   G24 — « Où allez-vous ? » (09/09/2026) : la destination tapée, façon Google Maps
   ============================================================================ */

/* Comme Google Maps, la recherche est EN HAUT de l'écran, sous l'en-tête : le clavier
   qui monte du bas ne cache jamais ni le champ ni la liste (sur iPhone, le clavier
   recouvre la page sans la rétrécir). La carte, avec la position, reste en dessous. */
.nav-destination .nav-entete { order: -2; }
.nav-destination .nav-panneau {
  order: -1; max-height: 62vh; border-top: 0; border-bottom: 1px solid #d5dbe0;
  padding-bottom: 12px;
}
@media (prefers-color-scheme: dark) { .nav-destination .nav-panneau { border-bottom-color: #2c3941; } }

.nav-ou { display: flex; flex-direction: column; gap: 8px; }

/* ----------------------------------------------------------------------------
   G29 (16/09/2026) — LA DICTÉE DE L'ADRESSE.

   MESURÉ EN PRODUCTION : 38 frappes, à deux mains, 10 à 15 secondes les yeux
   hors de la route, pour entrer une adresse. À chaque adresse. Google Maps et
   Waze : on parle, zéro geste.

   Le micro est sur la MÊME rangée que le champ, à sa droite, et il est GRAND —
   54 px de côté, la hauteur du champ : un pouce ganté le trouve sans viser, et
   il ne recouvre jamais le texte (c'est la leçon des boutons flottants). Le
   champ, lui, garde toute la place qui reste.
   ---------------------------------------------------------------------------- */
.nav-ou-rangee { display: flex; align-items: center; gap: 8px; }
.nav-ou-rangee .nav-ou-champ { flex: 1 1 auto; min-width: 0; }
.nav-micro {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; padding: 0; border: 2px solid #b4bec6; border-radius: 27px;
  background: #fff; color: #1a73e8; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.nav-micro:active { background: #e7f0f9; }
/* Pendant qu'il parle : rouge plein, et un battement lent — on voit d'un coup
   d'œil que le micro écoute, sans lire une ligne de texte. */
.nav-micro-ecoute { background: #d93025; border-color: #d93025; color: #fff; animation: nav-micro-bat 1.2s ease-in-out infinite; }
@keyframes nav-micro-bat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,48,37,.55); }
  50% { box-shadow: 0 0 0 8px rgba(217,48,37,0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-micro-ecoute { animation: none; }
}

.nav-ou-champ {
  width: 100%; box-sizing: border-box; min-height: 54px; padding: 0 16px;
  border: 2px solid #b4bec6; border-radius: 27px; background: #fff; color: #15202a;
  font: 400 18px/1.2 Arial, Helvetica, sans-serif; -webkit-appearance: none; appearance: none;
}
.nav-ou-champ:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,.2); }
.nav-ou-champ::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav-ou-etat { min-height: 1.4em; }

.nav-propositions { list-style: none; margin: 0; padding: 0; }
.nav-propositions-titre {
  font: 600 11px/1 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .08em;
  color: #7c8b98; padding: 8px 2px 4px;
}
.nav-proposition {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 56px; padding: 8px 4px; border: 0; border-bottom: 1px solid #e3e7ea; background: transparent;
  color: #15202a; cursor: pointer; font: 400 16px/1.3 Arial, Helvetica, sans-serif;
}
.nav-proposition:active, .nav-proposition[aria-selected="true"] { background: #e7f0f9; }
.nav-proposition-icone { flex: 0 0 auto; display: flex; color: #7c8b98; }
.nav-proposition-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-proposition-principal { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-proposition-principal b { font-weight: 800; color: #12355b; }
.nav-proposition-secondaire { font-size: 13px; color: #7c8b98; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-proposition-distance { flex: 0 0 auto; font-size: 13px; color: #7c8b98; white-space: nowrap; padding-left: 4px; }

/* « Changer de destination », sur l'écran de départ : discret, mais large sous le doigt. */
.nav-changer {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 2px 0 6px; padding: 0 4px;
  border: 0; background: transparent; color: #1a73e8; font: 600 15px/1 Arial, Helvetica, sans-serif; cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .nav-ou-champ { background: #1a2229; color: #e7edf1; border-color: #3c4b55; }
  .nav-micro { background: #1a2229; border-color: #3c4b55; color: #8ab4f8; }
  .nav-micro:active { background: #16303f; }
  .nav-micro-ecoute { background: #d93025; border-color: #d93025; color: #fff; }
  .nav-proposition { color: #e7edf1; border-bottom-color: #2c3941; }
  .nav-proposition:active, .nav-proposition[aria-selected="true"] { background: #16303f; }
  .nav-proposition-principal b { color: #8ab4f8; }
  .nav-changer { color: #8ab4f8; }
}

/* ============================================================================
   G25 lot A — les interdictions poids lourd (09/09/2026)
   ============================================================================ */

/* Le bloc AMBRE de l'écran de départ : l'interdiction qui touche l'arrivée.
   Ambre et non rouge — ce n'est pas une panne, c'est un avertissement : le
   camion partira, mais il doit savoir ce qui l'attend au bout. */
.nav-avertissement {
  background: #fff3cd;
  color: #6b4c00;
  border-left: 6px solid #f5a623;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 12px;
}
.nav-avertissement-message {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font: 700 18px/1.3 Arial, Helvetica, sans-serif;
}
.nav-avertissement-message span:first-child { font-size: 20px; flex: 0 0 auto; }
.nav-avertissement-conseil {
  margin-top: 5px;
  font: 400 14px/1.35 Arial, Helvetica, sans-serif;
  color: #7a5a00;
}
.nav-avertissement-message + .nav-avertissement-conseil + .nav-avertissement-message { margin-top: 10px; }

/* Le flottant « Signaler » : même famille que les autres, panneau en couleur. */
.nav-flottant-signaler { color: #b3261e; }

/* La feuille du bas, façon Google Maps quand il demande « Que voyez-vous ? ».
   Elle recouvre la barre du bas — c'est voulu : tant qu'elle est ouverte, elle
   est la seule chose à faire. */
.nav-feuille {
  position: fixed;
  z-index: 20;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  color: #15202a;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.32);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  max-height: 82vh;
  overflow-y: auto;
}
.nav-feuille-titre { font: 700 18px/1.2 Arial, Helvetica, sans-serif; margin-bottom: 12px; }

/* Trois colonnes de deux : six cibles larges, visées d'un pouce ganté. */
.nav-feuille-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav-tuile {
  min-height: 66px;
  padding: 6px 4px;
  border: 2px solid #b4bec6;
  border-radius: 10px;
  background: #fff;
  color: #15202a;
  font: 700 15px/1.2 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.nav-tuile[aria-pressed="true"] {
  border-color: #1a73e8;
  background: #e7f0f9;
  color: #0b4a9e;
  box-shadow: inset 0 0 0 1px #1a73e8;
}

.nav-feuille-valeur { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
/* `display: flex` gagne sur l'attribut `hidden` : sans cette ligne, le champ de
   la limite reste visible avant qu'une tuile soit choisie (vu à la capture). */
.nav-feuille-valeur[hidden] { display: none; }
.nav-feuille-valeur label { flex: 0 0 auto; font: 400 14px/1.2 Arial, Helvetica, sans-serif; color: #4c5d6b; }
.nav-feuille-valeur input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 12px; box-sizing: border-box;
  border: 2px solid #b4bec6; border-radius: 10px; background: #fff; color: #15202a;
  font: 700 22px/1.2 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
}
.nav-feuille-valeur input:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,.2); }
.nav-feuille-unite { flex: 0 0 auto; font: 700 20px/1 Arial, Helvetica, sans-serif; color: #4c5d6b; min-width: 1.2em; }

.nav-feuille-sauf {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px;
  font: 600 16px/1.2 Arial, Helvetica, sans-serif; cursor: pointer;
}
.nav-feuille-sauf input { width: 26px; height: 26px; accent-color: #1a73e8; }

.nav-feuille-etat { margin: 4px 0 0; min-height: 1.3em; font: 600 14px/1.35 Arial, Helvetica, sans-serif; color: #ae3220; }

.nav-feuille-boutons { display: flex; gap: 10px; margin-top: 10px; }
.nav-feuille-annuler, .nav-feuille-envoyer {
  min-height: 54px; border-radius: 27px; cursor: pointer;
  font: 700 17px/1 Arial, Helvetica, sans-serif;
}
.nav-feuille-annuler { flex: 0 0 auto; padding: 0 20px; border: 1px solid #b4bec6; background: #fff; color: #4c5d6b; }
.nav-feuille-envoyer { flex: 1 1 auto; border: 0; background: #1a73e8; color: #fff; }
.nav-feuille-envoyer:disabled { background: #9db9de; cursor: progress; }

@media (prefers-color-scheme: dark) {
  .nav-avertissement { background: #3a2f10; color: #ffdf9a; border-left-color: #f5a623; }
  .nav-avertissement-conseil { color: #e0c78a; }
  .nav-feuille { background: #1a2229; color: #e7edf1; }
  .nav-tuile { background: #232c34; color: #e7edf1; border-color: #3c4b55; }
  .nav-tuile[aria-pressed="true"] { background: #16303f; color: #8ab4f8; border-color: #8ab4f8; box-shadow: inset 0 0 0 1px #8ab4f8; }
  .nav-feuille-valeur label, .nav-feuille-unite { color: #a8b6c1; }
  .nav-feuille-valeur input { background: #232c34; color: #e7edf1; border-color: #3c4b55; }
  .nav-feuille-annuler { background: #1a2229; color: #a8b6c1; border-color: #3c4b55; }
  .nav-feuille-etat { color: #ff9c8a; }
}

/* --- G25 lot B : les LIEUX proposés sur l'écran « Où allez-vous ? » ---------
   La recherche fédérée rend, en plus des adresses, des lieux : entreprises,
   stations et aires poids lourd, parkings, usines et carrières. Le pictogramme
   remplace l'épingle — un chauffeur reconnaît un dessin plus vite qu'un mot —
   et prend la couleur bleue de l'application pour se distinguer des adresses,
   qui restent grises. Un lieu enregistré par l'exploitant (étoile) porte
   l'ambre : c'est ce que sa société sait et que personne d'autre n'a. */
.nav-proposition-lieu { color: #1a73e8; }
.nav-proposition-client { color: #e8a13a; }

@media (prefers-color-scheme: dark) {
  .nav-proposition-lieu { color: #8ab4f8; }
  .nav-proposition-client { color: #f5c469; }
}
/* =========================================================================
   G25 lot B — « Voici l'entrée » et « Photo de l'entrée » (agent 4)
   =========================================================================
   La vignette vit sous les chiffres de l'écran de départ ; le bouton photo
   au-dessus de « Terminer », à l'arrivée. Les deux se regardent et se visent
   d'un pouce ganté, dans une cabine, en plein soleil : gros, contrastés, sans
   fioriture. */

.nav-vignette { margin: 10px 0 2px; }
.nav-vignette-image { display: block; line-height: 0; }
.nav-vignette-image img {
  display: block; width: 100%;
  /* Un cadre stable AVANT que l'image n'arrive : l'écran ne saute pas sous le
     pouce au moment où le conducteur vise « Démarrer ». */
  aspect-ratio: 16 / 10;
  /* Et jamais plus haut que ça : sur un téléphone en portrait, une photo pleine
     largeur en 16/10 ferait 220 px — la moitié du panneau. */
  max-height: 150px;
  object-fit: cover;
  border-radius: 12px;
  background: #e3e8ec;
}
.nav-vignette-legende {
  margin-top: 5px;
  font: 600 15px/1.3 Arial, Helvetica, sans-serif; color: #4c5d6b;
}
/* L'attribution : obligatoire, donc toujours là — mais discrète, parce qu'elle
   ne s'adresse pas au conducteur. */
.nav-vignette-credit {
  display: block; margin-top: 2px;
  font: 400 12px/1.3 Arial, Helvetica, sans-serif; color: #6b7a86;
  text-decoration: none;
}
.nav-vignette-credit:hover { text-decoration: underline; }

.nav-photo { padding: 0 4px 8px; }
/* Le champ de fichier reste dans la page (un `display:none` empêcherait
   certains navigateurs de l'ouvrir), mais invisible : c'est le label qui est le
   bouton, et c'est lui que le doigt touche. */
.nav-photo-fichier {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nav-photo-bouton {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px;
  border: 2px solid #1a73e8; border-radius: 29px;
  background: #fff; color: #1a73e8;
  font: 700 18px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.nav-photo-bouton:active { background: #e8f0fe; }
.nav-photo-fichier:focus-visible + .nav-photo-bouton {
  outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.35);
}
.nav-photo-envoi .nav-photo-bouton { border-color: #9db9de; color: #9db9de; cursor: progress; }
.nav-photo-etat {
  margin: 6px 0 0; min-height: 1.3em;
  font: 600 14px/1.35 Arial, Helvetica, sans-serif; color: #ae3220;
  text-align: center;
}
/* Photo envoyée : le bouton a disparu, il ne reste que le merci — en vert, pas
   en rouge : ce n'est pas un échec. */
.nav-photo-faite .nav-photo-etat { color: #1e7d3c; }

@media (prefers-color-scheme: dark) {
  .nav-vignette-image img { background: #232c34; }
  .nav-vignette-legende { color: #a8b6c1; }
  .nav-vignette-credit { color: #8695a1; }
  .nav-photo-bouton { background: #1a2229; color: #8ab4f8; border-color: #8ab4f8; }
  .nav-photo-bouton:active { background: #16303f; }
  .nav-photo-etat { color: #ff9c8a; }
  .nav-photo-faite .nav-photo-etat { color: #7ed69b; }
}

/* =========================================================================
   G25 lot C — LA BANDE DES ALERTES EN ROUTE (agent C3)
   =========================================================================
   Sous le bandeau vert, jamais dessus : la manœuvre est ce qui se joue dans
   les dix prochaines secondes, l'alerte est ce qui se jouera dans la minute.
   L'ordre à l'écran suit l'ordre du temps.

   ARDOISE ET NON ROUGE. Un fond rouge dirait « danger immédiat » quatre fois
   par heure et ne dirait plus rien la cinquième. Le ton neutre porte la
   COULEUR sur ce qui la mérite : le pictogramme et la distance. Le ruban de
   gauche change de teinte selon la nature — ambre pour un pont bas, bleu-gris
   pour un radar, vert d'eau pour ce qui se choisit (aire, parking, station).

   Sa hauteur est PLAFONNÉE : elle ne doit jamais manger la carte, ni couvrir
   le camion posé dans le tiers bas de l'écran. Le `top` est posé par
   nav.js sous le bandeau mesuré (il grandit d'une ligne quand une manœuvre
   suivante s'affiche). */
.nav-alerte {
  position: absolute; z-index: 4;
  top: calc(8px + env(safe-area-inset-top));
  left: 8px; right: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 10px;
  border-left: 6px solid #7c8b98;
  border-radius: 10px;
  background: rgba(28, 38, 46, .94);
  color: #eef3f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  overflow: hidden;
}
/* `display: flex` gagne sur l'attribut `hidden` : sans cette ligne, la bande
   resterait visible une fois la dernière alerte passée (même piège que
   .nav-feuille-valeur, vu à la capture du 10/09). */
.nav-alerte[hidden] { display: none; }

.nav-alerte-picto { flex: 0 0 auto; display: flex; color: #cdd8e0; }
.nav-alerte-texte { flex: 1 1 auto; min-width: 0; }
.nav-alerte-titre {
  font: 700 16px/1.2 Arial, Helvetica, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-alerte-sous {
  margin-top: 1px;
  font: 400 13px/1.25 Arial, Helvetica, sans-serif; color: #b3c1cb;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-alerte-distance {
  flex: 0 0 auto;
  font: 700 20px/1 Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
}

/* La nature, par le ruban et le pictogramme. Trois teintes, pas cinq : ce qui
   coince le camion, ce qui coûte des points, ce qui se choisit. */
.nav-alerte-pont_bas { border-left-color: #f5a623; }
.nav-alerte-pont_bas .nav-alerte-picto, .nav-alerte-pont_bas .nav-alerte-distance { color: #ffd27d; }
.nav-alerte-radar { border-left-color: #8ab4f8; }
.nav-alerte-radar .nav-alerte-picto, .nav-alerte-radar .nav-alerte-distance { color: #b9d2fb; }
.nav-alerte-station_pl, .nav-alerte-aire_pl, .nav-alerte-parking_pl { border-left-color: #5fb98a; }
.nav-alerte-station_pl .nav-alerte-picto, .nav-alerte-aire_pl .nav-alerte-picto,
.nav-alerte-parking_pl .nav-alerte-picto,
.nav-alerte-station_pl .nav-alerte-distance, .nav-alerte-aire_pl .nav-alerte-distance,
.nav-alerte-parking_pl .nav-alerte-distance { color: #9fdcbc; }

/* JOUR. En plein soleil, l'ardoise translucide se lit mal sur une carte claire :
   on referme le fond et on remonte le contraste. (La règle du dessus reste la
   base ; celle-ci ne change que ce qu'il faut.) */
@media (prefers-color-scheme: light) {
  .nav-alerte { background: rgba(21, 32, 42, .96); box-shadow: 0 2px 10px rgba(0, 0, 0, .38); }
}

/* NUIT. Moins de lumière dans la cabine : on baisse le blanc et l'ombre. */
@media (prefers-color-scheme: dark) {
  .nav-alerte { background: rgba(16, 22, 28, .95); color: #dbe4ea; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  .nav-alerte-sous { color: #93a3ae; }
  .nav-alerte-picto { color: #b3c1cb; }
}

/* La ligne des alertes sur l'écran de DÉPART, sous la provenance : le même gris
   discret, la même taille. Elle ne doit rien pousser — d'où sa place, après
   « Démarrer » (nav.js l. 710-726, leçon apprise deux fois). */
.nav-alertes-depart {
  margin: -4px 0 8px;
  font: 400 13px/1.35 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}
@media (prefers-color-scheme: dark) { .nav-alertes-depart { color: #a8b6c1; } }

/* G25 lot D5 — l'attente habituelle sur le site d'arrivée, entre la provenance
   et les alertes : le même gris discret, la même taille. C'est une INFORMATION,
   pas un avertissement — elle ne prend ni couleur ni cadre, et elle ne pousse
   pas « Démarrer », qui est au-dessus. */
.nav-attente-site {
  margin: -4px 0 8px;
  font: 400 13px/1.35 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}
@media (prefers-color-scheme: dark) { .nav-attente-site { color: #a8b6c1; } }

/* ---------------------------------------------------------------------------
   G25 lot E (E-3) — LA TOURNÉE MULTI-ARRÊTS

   Trois endroits, et pas un de plus :
     · une ligne DANS le bandeau vert, au-dessus de l'instruction ;
     · la liste des arrêts SOUS « Démarrer », sur l'écran de départ ;
     · l'écran d'arrivée, qui devient « Arrivé · <nom> » avec « Reparti ».
   Aucun bouton nouveau sur l'écran de guidage (règle 3 du lot), et rien
   au-dessus de « Démarrer » : la liste peut porter vingt-cinq arrêts, elle ne
   doit jamais pousser le geste principal sous le bord de l'écran.
   --------------------------------------------------------------------------- */

/* « Arrêt 2/5 · Carrière Lambert », en petit, au-dessus de l'instruction. */
.nav-bandeau-tournee {
  font: 700 13px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .2px;
  opacity: .85;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La liste des arrêts. Hauteur bornée : au-delà, elle défile — vingt-cinq
   arrêts ne repoussent donc rien. */
.nav-tournee { margin: 2px 0 8px; }
.nav-tournee-resume {
  margin: 0 0 6px;
  font: 700 13px/1.35 Arial, Helvetica, sans-serif;
  color: #3c4b55;
}
.nav-tournee-arrets {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 30vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-tournee-arret {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #e6eaed;
  font: 400 14px/1.3 Arial, Helvetica, sans-serif;
  flex-wrap: wrap;
}
.nav-tournee-arret:first-child { border-top: 0; }
.nav-tournee-numero {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 11px;
  background: #d7dde2;
  color: #33414b;
  font: 700 12px/22px Arial, Helvetica, sans-serif;
  text-align: center;
}
.nav-tournee-courant .nav-tournee-numero { background: #1a73e8; color: #fff; }
.nav-tournee-arret[data-statut="fait"] .nav-tournee-numero,
.nav-tournee-arret[data-statut="passe"] .nav-tournee-numero { background: #9aa4ad; color: #fff; }
.nav-tournee-arret[data-statut="fait"] .nav-tournee-texte b,
.nav-tournee-arret[data-statut="passe"] .nav-tournee-texte b { color: #7c8b98; }
.nav-tournee-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nav-tournee-texte b { font-weight: 700; }
.nav-tournee-sous, .nav-tournee-attente {
  font: 400 12px/1.3 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}
.nav-tournee-heure {
  flex: 0 0 auto;
  font: 700 14px/1.3 Arial, Helvetica, sans-serif;
  color: #33414b;
}
/* « Passer cet arrêt » : discret, sur sa propre ligne, sous l'arrêt courant.
   Il n'existe QUE là et sur l'écran d'arrivée — deux endroits où le camion est
   à l'arrêt. */
.nav-tournee-menu {
  flex: 1 1 100%;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid #d0d7dd;
  border-radius: 16px;
  background: #f4f6f8;
  color: #3c4b55;
  font: 600 13px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.nav-tournee-menu:active { background: #e6eaed; }
.nav-tournee-mention {
  margin: 6px 0 0;
  font: 400 12px/1.35 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}
/* La consigne du site, sur l'écran d'arrivée : c'est le texte du TMS, et c'est
   la seule chose que le conducteur doit lire à ce moment-là. */
.nav-tournee-consigne {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 4px solid #1a73e8;
  background: #eef4fd;
  color: #1b3a5e;
  font: 600 15px/1.35 Arial, Helvetica, sans-serif;
  border-radius: 4px;
}
.nav-gabarit-tournee {
  margin: 0;
  font: 400 13px/1.35 Arial, Helvetica, sans-serif;
  color: #7c8b98;
}

@media (prefers-color-scheme: dark) {
  .nav-tournee-resume { color: #cfd9e0; }
  .nav-tournee-arret { border-top-color: #2b353d; }
  .nav-tournee-numero { background: #303a42; color: #cfd9e0; }
  .nav-tournee-arret[data-statut="fait"] .nav-tournee-numero,
  .nav-tournee-arret[data-statut="passe"] .nav-tournee-numero { background: #4a555e; }
  .nav-tournee-arret[data-statut="fait"] .nav-tournee-texte b,
  .nav-tournee-arret[data-statut="passe"] .nav-tournee-texte b { color: #8b98a3; }
  .nav-tournee-sous, .nav-tournee-attente, .nav-tournee-mention, .nav-gabarit-tournee { color: #a8b6c1; }
  .nav-tournee-heure { color: #e7edf1; }
  .nav-tournee-menu { background: #1a2229; color: #cfd9e0; border-color: #3c4b55; }
  .nav-tournee-consigne { background: #16303f; color: #cfe3f7; border-left-color: #8ab4f8; }
}

/* ============================================================================
   G26 — « POSITION INDISPONIBLE », ET UN BOUTON POUR RÉESSAYER (11/09/2026)
   ============================================================================

   PRIS À L'ÉCRAN LE 11/09, GÉOLOCALISATION REFUSÉE : le canevas de carte
   existait bien (654 × 411 pixels), neuf requêtes de tuiles étaient parties, et
   RIEN n'était peint. La moitié basse de l'écran était un aplat gris — sans
   message, sans bouton, sans repli. Un chauffeur qui refuse la localisation
   ouvrait ULTRAMOV et voyait un demi-écran mort.

   Le bandeau est DANS LE FLUX, entre l'en-tête et la carte, et non posé
   par-dessus : après la leçon des boutons flottants, on ne pose plus rien sur
   une commande. Il prend sa place, la carte prend le reste.

   Sobre : une phrase, un bouton. Le bouton REDEMANDE VRAIMENT la position —
   c'est tout l'objet, un bouton qui ne fait que se montrer serait pire que
   rien. */
.nav-position {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #fdf3e0;
  color: #6b4a10;
  border-bottom: 1px solid #f0dcb6;
  font: 400 14px/1.35 Arial, Helvetica, sans-serif;
}
.nav-position[hidden] { display: none; }
.nav-position-texte { flex: 1 1 auto; min-width: 0; }
.nav-position-reessayer {
  flex: 0 0 auto;
  min-height: 48px; padding: 0 18px;
  border: 1px solid #c9a253; border-radius: 24px;
  background: #fff; color: #6b4a10;
  font: 700 15px/1 Arial, Helvetica, sans-serif; cursor: pointer;
}
.nav-position-reessayer:active { background: #f6e9cf; }

/* En guidage, l'en-tête disparaît et la carte prend tout : le bandeau reste
   lisible mais se fait plus discret — le bandeau vert commande l'écran. */
.nav-guidage .nav-position { padding: 8px 12px; font-size: 13px; }

@media (prefers-color-scheme: dark) {
  .nav-position { background: #33280f; color: #f0dcb6; border-bottom-color: #4a3a16; }
  .nav-position-reessayer { background: #1a2229; color: #f0dcb6; border-color: #6b5524; }
}


/* ---------------------------------------------------------------------------
   G28 — LA FICHE D'UN SITE DE DÉCHARGEMENT.

   Le Patron : « quand on appuie sur un point, ça donne le Cemex sur lequel on
   appuie ». Une feuille en bas de l'écran, au-dessus du panneau, lisible d'un
   coup d'œil en cabine : le nom en gros, la confiance en couleur, le téléphone
   composable d'un doigt, et « Y aller » assez large pour se viser sans regarder.

   LE CONTENU est construit par `web/app/exutoires-fiche.js`, partagé avec le
   portail : les classes `umv-exutoire-*` sont donc les mêmes des deux côtés, et
   seule la MISE EN PLACE (`.nav-exutoire`) appartient à cet écran.
   --------------------------------------------------------------------------- */
.umv-exutoire.nav-exutoire {
  position: absolute; z-index: 7; left: 10px; right: 10px;
  bottom: calc(var(--nav-panneau-h, 110px) + 12px);
  max-height: 60vh; overflow-y: auto;
}
.umv-exutoire {
  padding: 12px 14px 14px; border-radius: 14px;
  background: #ffffff; color: #1a2229;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font: 15px/1.4 Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .umv-exutoire { background: #1a2229; color: #e7edf1; }
}
.umv-exutoire { position: relative; }
.umv-exutoire-fermer {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px;
  border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer;
}
.umv-exutoire-titre { font: 700 18px/1.25 Arial, Helvetica, sans-serif; padding-right: 40px; }
.umv-exutoire-soustitre { font-size: 14px; color: #7c8b98; margin-top: 2px; }
.umv-exutoire-ou { font-size: 14px; margin-top: 4px; }

/* La fiabilité, en clair et en couleur : vert on peut y aller, ambre on appelle
   d'abord, rouge on confirme avant de charger le camion. */
.umv-exutoire-confiance {
  display: inline-block; margin: 8px 0 4px; padding: 3px 9px; border-radius: 999px;
  font: 600 13px/1.5 Arial, Helvetica, sans-serif; color: #ffffff; background: #7c8b98;
}
.umv-exutoire-sur { background: #1e8e3e; }
.umv-exutoire-prudence { background: #f5a623; color: #1a2229; }
.umv-exutoire-doute { background: #d92b2b; }
.umv-exutoire-avertissement { margin: 4px 0; font-size: 13px; color: #d92b2b; }

.umv-exutoire-ligne { display: flex; gap: 8px; margin-top: 6px; font-size: 14px; }
.umv-exutoire-etiquette { flex: 0 0 82px; color: #7c8b98; }
.umv-exutoire-valeur { flex: 1 1 auto; word-break: break-word; }
a.umv-exutoire-valeur { color: #1a73e8; text-decoration: none; }
.umv-exutoire-acces .umv-exutoire-valeur { white-space: pre-line; }

.umv-exutoire-yaller {
  display: block; width: 100%; min-height: 48px; margin-top: 12px;
  border: 0; border-radius: 10px; background: #1a73e8; color: #ffffff;
  font: 700 16px/1 Arial, Helvetica, sans-serif; cursor: pointer;
}

/* G28 : la ligne « Afficher les 45 lieux Cemex » dans la barre. Elle n'emmène
   nulle part toute seule : elle ouvre la carte du réseau. Le rouge du point de
   déchargement la désigne, sans en faire un bouton d'alerte. */
.nav-proposition-exutoire { color: #d92b2b; }
.nav-proposition-reseau .nav-proposition-principal { font-weight: 700; color: #1a73e8; }