/* ULTRAMOV — feuille de style du portail (lot L9, cahier F9.3, F9.4).
 *
 * Aucune police externe, aucun CDN : la pile système suffit et se charge en
 * zéro requête. Tout ce qui relève de la MARQUE d'une société (couleur, logo,
 * nom, pied de page) passe par les variables CSS ci-dessous, jamais par une
 * feuille de style par client : `app/theme.js` écrit `--umv-marque` sur
 * `:root` après `GET /api/v1/portail/marque`.
 *
 * L'attribution de la carte (classe `umv-attribution`, posée par le module
 * carte de L3) n'est JAMAIS stylée ici : elle est volontairement hors de
 * portée de toute feuille de marque (F2.2).
 *
 * Cibles tactiles : 44 px minimum partout (cahier de lot L9, point 9).
 */

/* --- Couleurs : jour par défaut, nuit si le système la demande ------------ */

:root {
  --umv-marque: #1565c0;
  --umv-marque-texte: #ffffff;

  --umv-fond: #f5f6f8;
  --umv-fond-carte: #ffffff;
  --umv-fond-doux: #eceef1;
  --umv-texte: #1a1c1e;
  --umv-texte-doux: #55595e;
  --umv-bord: #d6d9dd;

  --umv-ok: #2e7d32;
  --umv-attention: #a86a00;
  --umv-danger: #c62828;
  --umv-info: #1565c0;

  --umv-rayon: 10px;
  --umv-cible: 44px;
  /* G26 lot 2 : largeur du panneau de parc sur ordinateur. Le panneau et le
     décalage de la fiche véhicule la lisent tous les deux — une seule valeur,
     donc jamais de désaccord entre les deux. */
  --umv-parc-largeur: 240px;
  --umv-ombre: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    --umv-fond: #14171a;
    --umv-fond-carte: #1e2226;
    --umv-fond-doux: #262b30;
    --umv-texte: #eceef1;
    --umv-texte-doux: #a8aeb5;
    --umv-bord: #343a40;
    --umv-ok: #6abf69;
    --umv-attention: #e0a33a;
    --umv-danger: #ef5350;
    --umv-info: #64b5f6;
    --umv-ombre: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="nuit"] {
  --umv-fond: #14171a;
  --umv-fond-carte: #1e2226;
  --umv-fond-doux: #262b30;
  --umv-texte: #eceef1;
  --umv-texte-doux: #a8aeb5;
  --umv-bord: #343a40;
  --umv-ok: #6abf69;
  --umv-attention: #e0a33a;
  --umv-danger: #ef5350;
  --umv-info: #64b5f6;
  --umv-ombre: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--umv-fond);
  color: var(--umv-texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.35rem; margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
h3 { font-size: .95rem; margin: .9rem 0 .35rem; }
p  { margin: .4rem 0; }
a  { color: var(--umv-marque); }

:focus-visible {
  outline: 3px solid var(--umv-marque);
  outline-offset: 2px;
  border-radius: 4px;
}

.doux   { color: var(--umv-texte-doux); }
.petit  { font-size: .85rem; }
.gras   { font-weight: 600; }
.centre { text-align: center; }
.cache  { display: none !important; }

/* --- Mise en page --------------------------------------------------------- */

#coquille {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--umv-fond-carte);
  border-bottom: 1px solid var(--umv-bord);
}

.entete-ligne {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: var(--umv-marque);
  white-space: nowrap;
}

.marque img { height: 28px; width: auto; max-width: 120px; }

#vue {
  flex: 1 1 auto;
  padding: .7rem .7rem 5.5rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

#vue.pleine { padding: 0 0 4.6rem; max-width: none; }

#pied {
  padding: .8rem .7rem 5.5rem;
  color: var(--umv-texte-doux);
  font-size: .8rem;
  text-align: center;
}

/* --- Trois entrées : en bas sur téléphone, à gauche sur ordinateur -------- */

#entrees {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--umv-fond-carte);
  border-top: 1px solid var(--umv-bord);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.entree {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--umv-texte-doux);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  position: relative;
}

.entree[aria-current="page"] { color: var(--umv-marque); font-weight: 600; }
.entree .icone { font-size: 1.25rem; line-height: 1; }

.pastille {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--umv-danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

@media (min-width: 860px) {
  /* Grille et non flex à retour de ligne : avec « flex-wrap », l'espace vertical
     libre était réparti ENTRE les lignes et laissait une grande bande blanche
     sous l'en-tête dès que l'écran était plus haut que le contenu (constaté au
     premier démarrage réel, 3 septembre 2026). */
  #coquille {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-content: start;
  }
  #entete { grid-column: 1 / -1; grid-row: 1; }
  #entrees {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 0;
    /* G8 (06/09/2026) : sur téléphone la barre est en bas avec z-index 40 (au-dessus
       du contenu) ; à gauche sur ordinateur elle héritait de ce 40 et passait
       DEVANT la liste de suggestions de l'en-tête (z-index 30) — le début des
       propositions était masqué. Sous l'en-tête, au-dessus du contenu. */
    z-index: 20;
    align-self: start;
    flex-direction: column;
    height: auto;
    border-top: 0;
    border-right: 1px solid var(--umv-bord);
    padding: .5rem 0;
  }
  .entree { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: .6rem; padding: 0 1rem; font-size: .95rem; }
  .pastille { position: static; margin-left: auto; }
  #vue { grid-column: 2; grid-row: 2; padding-bottom: 1.5rem; }
  #pied { grid-column: 1 / -1; grid-row: 3; padding-bottom: 1rem; }
}

/* --- Barre de recherche unique ------------------------------------------- */

#recherche { position: relative; flex: 1 1 auto; min-width: 0; }

#recherche input {
  width: 100%;
  min-height: var(--umv-cible);
  padding: .5rem .75rem;
  border: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon);
  background: var(--umv-fond);
  color: var(--umv-texte);
  font: inherit;
}

#suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 50;
  max-height: 65vh;
  overflow-y: auto;
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon);
  box-shadow: var(--umv-ombre);
  list-style: none;
  margin: 0;
  padding: 4px;
}

#suggestions li { margin: 0; }

#suggestions button {
  display: block;
  width: 100%;
  min-height: var(--umv-cible);
  padding: .5rem .6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--umv-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#suggestions button:hover { background: var(--umv-fond-doux); }

/* --- Bannière santé du parc ---------------------------------------------- */

#sante {
  padding: .45rem .7rem;
  font-size: .88rem;
  background: var(--umv-fond-doux);
  border-top: 1px solid var(--umv-bord);
  color: var(--umv-texte);
}

#sante.attention { background: #fff4e0; color: #6b4a00; }
#sante.souci     { background: #fdecec; color: #7d1d1d; }

:root[data-theme="nuit"] #sante.attention,
:root:not([data-theme="jour"]) #sante.attention { background: #3a2c10; color: #f0d49a; }
:root[data-theme="nuit"] #sante.souci,
:root:not([data-theme="jour"]) #sante.souci { background: #3a1b1b; color: #f5b5b5; }

/* Les morceaux cliquables de la bannière (G26 lot 2, R1 — la règle était posée
   en ligne dans app.js faute d'accès à ce fichier ; elle est à sa place ici).
   `inherit` À DESSEIN : la couleur de marque est réglée pour le fond des
   cartes, pas pour le rouge de `#sante.souci` ni pour ses deux variantes de
   nuit. En héritant, le lien reprend le couple fond/texte déjà éprouvé de la
   bannière ; le soulignement, lui, dit que c'est cliquable sans dépendre de la
   couleur (WCAG 1.4.1). */
#sante a {
  color: inherit;
  text-decoration: underline;
}

/* --- Cartes, listes, boutons --------------------------------------------- */

.carte {
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon);
  padding: .7rem .8rem;
  margin-bottom: .6rem;
  box-shadow: var(--umv-ombre);
}

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { margin-bottom: .5rem; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--umv-cible);
  min-width: var(--umv-cible);
  padding: .5rem .9rem;
  border: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon);
  background: var(--umv-fond-carte);
  color: var(--umv-texte);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.bouton:hover { background: var(--umv-fond-doux); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }

.bouton.principal {
  background: var(--umv-marque);
  border-color: var(--umv-marque);
  color: var(--umv-marque-texte);
  font-weight: 600;
}

.bouton.danger { color: var(--umv-danger); border-color: var(--umv-danger); }
.bouton.large  { width: 100%; }

.boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

label { display: block; margin: .55rem 0 .2rem; font-size: .9rem; color: var(--umv-texte-doux); }

input, select, textarea {
  width: 100%;
  min-height: var(--umv-cible);
  padding: .5rem .6rem;
  border: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon);
  background: var(--umv-fond-carte);
  color: var(--umv-texte);
  font: inherit;
}

textarea { min-height: 88px; }

/* Interrupteur des règles : une case à cocher de 44 px, sans image. */
.interrupteur { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.interrupteur input { width: 26px; height: 26px; min-height: 26px; flex: 0 0 auto; accent-color: var(--umv-marque); }
.interrupteur span { flex: 1 1 auto; }

.onglets { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }

.onglet {
  min-height: var(--umv-cible);
  padding: .45rem .8rem;
  border: 1px solid var(--umv-bord);
  border-radius: 999px;
  background: var(--umv-fond-carte);
  color: var(--umv-texte);
  font: inherit;
  cursor: pointer;
}

.onglet[aria-selected="true"] {
  background: var(--umv-marque);
  border-color: var(--umv-marque);
  color: var(--umv-marque-texte);
  font-weight: 600;
}

.puce {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.etiquette {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--umv-fond-doux);
  color: var(--umv-texte-doux);
}

.etiquette.critique { background: #fdecec; color: #7d1d1d; }
.etiquette.attention { background: #fff4e0; color: #6b4a00; }
.etiquette.ok { background: #e7f4e8; color: #1e5c22; }

.rangee { display: flex; align-items: center; gap: .6rem; }
.rangee .grandit { flex: 1 1 auto; min-width: 0; }

.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th, .tableau td { padding: .45rem .4rem; border-bottom: 1px solid var(--umv-bord); text-align: left; }
.tableau th { color: var(--umv-texte-doux); font-weight: 600; }
.defile { overflow-x: auto; }

.message { padding: .6rem .8rem; border-radius: var(--umv-rayon); margin-bottom: .6rem; }
.message.erreur { background: #fdecec; color: #7d1d1d; }
.message.succes { background: #e7f4e8; color: #1e5c22; }
/* G25 lot E : « à lire maintenant », sans être une erreur — le lien
   d'appairage qui ne sera plus affiché, un écran pas encore branché. Mêmes
   couleurs que .etiquette.attention : une seule palette pour un seul sens. */
.message.attention { background: #fff4e0; color: #6b4a00; }

/* --- Carte et fiche véhicule --------------------------------------------- */

#zone-carte { position: relative; width: 100%; height: calc(100vh - 190px); min-height: 320px; }

@media (min-width: 860px) { #zone-carte { height: calc(100vh - 130px); } }

/* Lieu cherché (G10) : le libellé au-dessus de l'épingle, lisible jour et nuit. */
.umv-lieu .maplibregl-popup-content {
  padding: .45rem .7rem;
  border-radius: 10px;
  font: 600 .88rem/1.25 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1a1c1e;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.umv-lieu .maplibregl-popup-tip { border-top-color: #ffffff; }

.fiche {
  position: fixed;
  left: 0; right: 0; bottom: 56px;
  z-index: 45;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--umv-fond-carte);
  border-top: 1px solid var(--umv-bord);
  border-radius: var(--umv-rayon) var(--umv-rayon) 0 0;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
  padding: .8rem;
}

@media (min-width: 860px) {
  .fiche {
    left: auto; right: 0; top: 0; bottom: 0;
    width: 380px;
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--umv-bord);
  }
}

.fiche h2 { margin-top: 0; }
.fiche dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; margin: .5rem 0; font-size: .92rem; }
.fiche dt { color: var(--umv-texte-doux); }
.fiche dd { margin: 0; }

/* --- G20 : le panneau en haut à gauche de la carte (Rechercher / Itinéraire) ---
   Comme dans Google Maps ou Waze : la barre de recherche du bandeau vit ICI tant
   que la carte est ouverte, avec le bouton Itinéraire à côté ; en mode
   Itinéraire, les champs A/B, les gabarits et les résultats se déplient dessous. */

.panneau-carte {
  position: absolute;
  top: .6rem;
  left: .6rem;
  right: .6rem;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: calc(100% - 1.2rem);
  pointer-events: none;   /* la carte reste manipulable autour */
}
.panneau-carte > * { pointer-events: auto; }

.panneau-ligne {
  display: flex;
  align-items: stretch;
  gap: .4rem;
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  padding: .3rem;
}
.panneau-ligne #recherche { flex: 1 1 auto; min-width: 0; }
.panneau-ligne #recherche input { min-height: 48px; padding: .5rem .7rem; border-color: transparent; background: var(--umv-fond); font-size: 1rem; }

.itin-bascule {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  border-radius: 10px;
  color: var(--umv-marque);
  font-weight: 600;
}
.itin-bascule[aria-pressed="true"] { background: var(--umv-marque); color: var(--umv-marque-texte); border-color: var(--umv-marque); }
.itin-icone { font-size: 1.15rem; line-height: 1; }

.itineraire {
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  padding: .6rem;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  font-size: .92rem;
}

.itin-champs {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .35rem .4rem;
  align-items: center;
}
.itin-point { position: relative; display: flex; align-items: center; gap: .4rem; grid-column: 1; }
.itin-inverser { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: var(--umv-cible); padding: 0 .5rem; font-size: 1.1rem; }
/* G21 : les mesures de Google Maps — champs de 48 px, rond au départ,
   repère à l'arrivée, pointillés entre les deux. */
.itin-rond {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border: 3px solid var(--umv-texte-doux);
  border-radius: 50%;
  background: var(--umv-fond-carte);
}
.itin-repere { flex: 0 0 auto; display: flex; width: 18px; justify-content: center; color: var(--umv-danger); }
.itin-point + .itin-point .itin-rond, .itin-point + .itin-point .itin-repere { position: relative; }
/* Les pointillés qui relient le rond au repère. */
.itin-point:first-of-type::after {
  content: '';
  position: absolute;
  left: 8px; top: 34px;
  width: 2px; height: 14px;
  background: repeating-linear-gradient(var(--umv-bord) 0 3px, transparent 3px 6px);
}
.itin-champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: .5rem .7rem;
  border: 1px solid var(--umv-bord);
  border-radius: 8px;
  background: var(--umv-fond);
  color: var(--umv-texte);
  font: inherit;
  font-size: 1rem;
}
.itin-champ.erreur { border-color: var(--umv-danger); }
.itin-suggestions {
  position: absolute;
  top: calc(100% + 3px);
  left: 26px; right: 0;
  z-index: 55;
  max-height: 40vh;
  overflow-y: auto;
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: 8px;
  box-shadow: var(--umv-ombre);
  list-style: none;
  margin: 0;
  padding: 4px;
}
.itin-suggestions li { margin: 0; }
.itin-suggestions button {
  display: block; width: 100%;
  min-height: 40px; padding: .4rem .6rem;
  border: 0; border-radius: 6px;
  background: none; color: var(--umv-texte);
  font: inherit; text-align: left; cursor: pointer;
}
.itin-suggestions button:hover { background: var(--umv-fond-doux); }

.itin-outils { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.petit-bouton { min-height: 34px; padding: .2rem .6rem; font-size: .85rem; border-radius: 8px; }
.petit-bouton[aria-pressed="true"] { background: var(--umv-marque); color: var(--umv-marque-texte); border-color: var(--umv-marque); }

.itin-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.itin-gabarits { display: flex; flex-wrap: wrap; gap: .3rem; }
.pastille-gabarit {
  min-height: 30px;
  padding: .15rem .6rem;
  border: 1px solid var(--umv-bord);
  border-radius: 999px;
  background: var(--umv-fond);
  color: var(--umv-texte);
  font: inherit; font-size: .84rem;
  cursor: pointer;
}
.pastille-gabarit.active { background: var(--umv-marque); color: var(--umv-marque-texte); border-color: var(--umv-marque); font-weight: 600; }
/* G21 : les profils « en option » (voiture) se distinguent des poids lourds par un trait d'écart et un bord pointillé. */
.pastille-gabarit.pastille-option { margin-left: .5rem; border-style: dashed; }
.pastille-gabarit.pastille-option.active { border-style: solid; }
.itin-heure, .itin-heure-champ {
  min-height: 34px;
  padding: .2rem .5rem;
  border: 1px solid var(--umv-bord);
  border-radius: 8px;
  background: var(--umv-fond);
  color: var(--umv-texte);
  font: inherit; font-size: .88rem;
}

.itin-resultats { margin-top: .5rem; }
.itin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.itin-carte { border: 1px solid var(--umv-bord); border-radius: 10px; overflow: hidden; }
.itin-carte.choisi { border-color: var(--umv-marque); box-shadow: inset 4px 0 0 var(--umv-marque); }
.itin-carte-bouton {
  display: block; width: 100%;
  padding: .5rem .7rem;
  border: 0; background: none; color: var(--umv-texte);
  font: inherit; text-align: left; cursor: pointer;
}
.itin-carte-bouton:hover { background: var(--umv-fond-doux); }
.itin-carte-ligne { display: flex; align-items: baseline; gap: .6rem; }
.itin-duree { font-weight: 700; font-size: 1.05rem; color: var(--umv-marque); }
.itin-carte.choisi .itin-duree { color: var(--umv-texte); }
.itin-distance { color: var(--umv-texte-doux); }
/* G25 lot D6 — d'où vient la durée : la ligne grise sous le gros chiffre. Elle
   ne prend pas de place (une seule ligne, coupée par des points de suspension
   plutôt que de repousser les étapes) et ne crie jamais : c'est une note de bas
   de chiffre, pas un avertissement. */
.itin-provenance {
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* G25 lot C sur le portail (D6) — ce qui borde la route : la ligne de résumé
   sous la provenance, puis la liste pliée. Le résumé tient sur UNE ligne (un
   panneau qui s'allonge repousse les étapes hors de l'écran) ; la liste, elle,
   se déplie. */
.itin-alertes-resume {
  margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* G25 lot D5 — l'attente habituelle sur le site d'arrivée, sous la liste des
   itinéraires : une ligne, une fois pour tout le calcul (les variantes mènent au
   même point). Discrète comme la provenance : c'est une information, pas un
   avertissement — et les heures d'arrivée du dessus ne sont pas décalées. */
.itin-attente-site { margin: .25rem 0 .1rem; }
.itin-alertes { border-top: 1px solid var(--umv-bord); padding: .3rem .7rem .5rem; font-size: .88rem; }
.itin-alertes summary { cursor: pointer; color: var(--umv-marque); padding: .2rem 0; }
.itin-alertes-liste { list-style: none; margin: .3rem 0 0; padding: 0; }
.itin-alerte { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; }
.itin-alerte-picto { flex: 0 0 auto; line-height: 0; color: var(--umv-texte-doux); }
/* Les mêmes couleurs que la bande de la cabine et que les ronds de la carte :
   un exploitant et son chauffeur doivent reconnaître la même chose. */
.itin-alerte-pont_bas, .itin-alerte-evenement { color: #f5a623; }
.itin-alerte-radar { color: #1a73e8; }
.itin-alerte-station_pl, .itin-alerte-aire_pl, .itin-alerte-parking_pl { color: #1e8e3e; }
.itin-alerte-texte { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.itin-alerte-distance { flex: 0 0 auto; white-space: nowrap; }

/* Le pictogramme d'une alerte posé sur son rond, sur la carte. Le rond est une
   couche MapLibre (`umv-alertes-points`) ; ce marqueur ne porte que le dessin. */
.umv-alerte-picto {
  width: 16px; height: 16px;
  line-height: 0;
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.itin-etapes { border-top: 1px solid var(--umv-bord); padding: .3rem .7rem .5rem; font-size: .88rem; }

/* G25 lot D6 — Réglages → « Trafic » : trois chiffres, pas un tableau. */
.trafic-chiffres {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin: .6rem 0;
}
.trafic-chiffre {
  flex: 1 1 9rem; min-width: 9rem;
  border: 1px solid var(--umv-bord); border-radius: .5rem;
  padding: .6rem .7rem;
}
.trafic-chiffre .trafic-valeur { display: block; font-weight: 700; font-size: 1.15rem; }
.trafic-chiffre .trafic-titre { display: block; color: var(--umv-texte-doux); font-size: .82rem; }
/* G25 lot D6 — la ligne « Flux de l'État », sous les trois chiffres : ce n'est
   pas une mesure de nos camions, et les deux ne se comparent pas. */
.trafic-etat { font-size: .88rem; margin: .4rem 0 0; }
.itin-etapes summary { cursor: pointer; color: var(--umv-marque); padding: .2rem 0; }
.itin-etapes ol { margin: .3rem 0 0; padding-left: 1.3rem; }
.itin-etapes li { margin: .2rem 0; }
.itin-proches { margin-top: .5rem; }
.tres-petit { font-size: .78rem; }

/* Les repères A/B sur la carte. */
.umv-repere-itineraire {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #1a1c1e;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font: 700 .8rem/22px system-ui, sans-serif;
  text-align: center;
  cursor: default;
}
.umv-repere-itineraire[aria-label="Arrivée"] { background: #c62828; }

/* Satellite / Plan : en bas à droite, au-dessus de la bannière d'attribution. */
.bouton-aerien {
  position: absolute;
  right: .6rem;
  bottom: 2rem;
  z-index: 25;
  min-height: 36px;
  padding: .2rem .7rem;
  border-radius: 8px;
  background: var(--umv-fond-carte);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  font-size: .85rem;
}
.bouton-aerien[aria-pressed="true"] { background: var(--umv-marque); color: var(--umv-marque-texte); border-color: var(--umv-marque); }

@media (min-width: 860px) {
  .panneau-carte { right: auto; width: 408px; }
  .itineraire { max-height: calc(100vh - 210px); }
  .itin-bascule-texte { display: inline; }
}
@media (max-width: 859px) {
  .itin-bascule-texte { display: none; }
  .itin-bascule { padding: 0 .6rem; }
}

/* --- Tiroir Réglages ------------------------------------------------------ */

#tiroir {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .35);
  display: flex;
  justify-content: flex-end;
}

#tiroir .panneau {
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--umv-fond);
  padding: .8rem .8rem 3rem;
}

/* --- Impression : les rapports sortent en PDF par le navigateur ---------- */

@media print {
  #entete, #entrees, #pied, .fiche, .sans-impression { display: none !important; }
  #vue { padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 12px; }
  .carte { border: 0; box-shadow: none; padding: 0; margin-bottom: .5cm; break-inside: avoid; }
  .tableau th, .tableau td { border-bottom: 1px solid #999; }
  a[href]::after { content: ""; }
  @page { margin: 1.5cm; }
}

/* --- G21 : propositions façon Google (barre et champs A/B) ------------------
   Deux lignes : en gros ce qu'on cherche (la partie tapée en gras), en petit
   où c'est. Une petite étiquette de genre à gauche ; la ligne mise en avant
   au clavier (↑ ↓) est grisée comme au survol ; « Récents » en tête quand le
   champ est vide. */
#suggestions button[role="option"], .itin-suggestions button[role="option"] {
  display: flex; align-items: flex-start; gap: .6rem;
}
#suggestions button.active, .itin-suggestions button.active { background: var(--umv-fond-doux); }
.sugg-genre {
  flex: 0 0 auto;
  min-width: 4.2rem;
  padding-top: .1rem;
  color: var(--umv-texte-doux);
  font-size: .78rem;
}
.sugg-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sugg-principal { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-principal b { font-weight: 700; }
.sugg-secondaire { color: var(--umv-texte-doux); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-entete {
  padding: .35rem .6rem .15rem;
  color: var(--umv-texte-doux);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* --- G21 bloc C : fiche du lieu, menu du clic droit, pictogrammes ----------
   La fiche s'ouvre sous la barre quand on choisit une adresse : son nom, puis
   les deux gestes qui suivent (« Itinéraire », « Le plus proche »), comme dans
   Google Maps. Le menu du clic droit pose un point sans rien taper. */
.icone { flex: 0 0 auto; vertical-align: -.15em; }
.itin-icone-doux { color: var(--umv-texte-doux); }

.fiche-lieu {
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  padding: .6rem .7rem;
}
.fiche-lieu-entete { display: flex; align-items: flex-start; gap: .5rem; }
.fiche-lieu-repere { color: var(--umv-danger); font-size: 1.3rem; }
.fiche-lieu-nom { font-size: 1.05rem; font-weight: 600; }
.fiche-lieu-fermer {
  margin-left: auto;
  min-width: 28px; min-height: 28px;
  border: 0; border-radius: 50%;
  background: none; color: var(--umv-texte-doux);
  cursor: pointer;
}
.fiche-lieu-fermer:hover { background: var(--umv-fond-doux); }
.fiche-lieu-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.fiche-lieu-itineraire {
  display: flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--umv-marque); color: var(--umv-marque-texte); border-color: var(--umv-marque);
  font-weight: 600;
}

.menu-carte {
  position: absolute;
  z-index: 40;
  min-width: 200px;
  padding: 4px;
  background: var(--umv-fond-carte);
  border: 1px solid var(--umv-bord);
  border-radius: 10px;
  box-shadow: var(--umv-ombre);
}
.menu-carte button {
  display: block; width: 100%;
  min-height: 38px; padding: .35rem .6rem;
  border: 0; border-radius: 6px;
  background: none; color: var(--umv-texte);
  font: inherit; text-align: left; cursor: pointer;
}
.menu-carte button:hover { background: var(--umv-fond-doux); }

/* Les boutons qui portent un pictogramme alignent l'icône et le texte. */
.petit-bouton, .bouton-aerien, .itin-bascule { display: inline-flex; align-items: center; gap: .35rem; }

/* --- G25 lot B : les LIEUX de la recherche fédérée --------------------------
   Une proposition de lieu (entreprise Sirene, station poids lourd, lieu
   enregistré de la société) porte un pictogramme au lieu d'une étiquette de
   genre : un conducteur reconnaît un dessin plus vite qu'un mot, et la seconde
   ligne dit déjà la catégorie en toutes lettres. L'étoile d'un lieu enregistré
   est à la couleur de la marque : c'est ce que la société sait, et que personne
   d'autre n'a. */
.sugg-lieu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  color: var(--umv-texte-doux);
}
.sugg-lieu-client { color: var(--umv-marque); }

/* « Enregistrer ce lieu » sur la fiche du lieu : un geste de plus, discret,
   juste après « Itinéraire ». */
.fiche-lieu-enregistrer[aria-pressed="true"] { color: var(--umv-marque); }
.fiche-lieu-consignes {
  width: 100%;
  min-height: 3.4rem;
  margin-top: .4rem;
  padding: .35rem .5rem;
  border: 1px solid var(--umv-bord);
  border-radius: 8px;
  background: var(--umv-fond);
  color: var(--umv-texte);
  font: inherit;
  resize: vertical;
}

/* Réglages → « Lieux enregistrés » : la même liste en cartes que les
   interdictions signalées. */
.lieu-enregistre-consignes { width: 100%; min-height: 3rem; }
/* --- G25 lot B : « Voici l'entrée » sur la fiche du lieu --------------------
   La vignette vient APRÈS les deux gestes, jamais à leur place : on cherche un
   lieu pour y aller, la photo est le renseignement qui rassure. Elle n'apparaît
   que s'il y a quelque chose à montrer (`.cache` tant que rien n'est arrivé),
   et l'attribution reste sous la photo — c'est une condition de licence. */
.fiche-lieu-photo { margin-top: .6rem; }
.fiche-lieu-agrandir { display: block; line-height: 0; }
.fiche-lieu-vignette {
  display: block;
  width: 100%;
  /* Un cadre stable AVANT que l'image n'arrive : la fiche ne saute pas. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--umv-fond-doux);
}
.fiche-lieu-photo-legende {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .3rem;
  color: var(--umv-texte-doux);
  font-size: .82rem;
}
.fiche-lieu-photo-credit {
  display: block;
  margin-top: .1rem;
  color: var(--umv-texte-doux);
  font-size: .74rem;
  text-decoration: none;
}
.fiche-lieu-photo-credit:hover { text-decoration: underline; }

/* --- G25 lot B : Réglages → « Photos de lieux » ----------------------------
   La vignette est ce qu'on vient regarder : elle passe donc EN PREMIER dans la
   ligne, avant même le statut. Un administrateur ouvre cet écran pour voir des
   photos, pas pour lire des lignes. */
.photo-agrandir { display: block; line-height: 0; margin-bottom: .5rem; }
.photo-vignette {
  display: block;
  width: 100%;
  height: 280px;
  /* `contain` et NON `cover` : sur cet écran, l'administrateur décide si un
     visage ou une plaque est lisible. Une photo rognée lui cacherait justement
     ce qu'il doit voir. Ailleurs (fiche du lieu, /nav), la vignette est
     décorative et `cover` fait un plus bel effet. */
  object-fit: contain;
  border-radius: 8px;
  background: var(--umv-fond-doux);
}


/* --- G26 (réparation 4 bis) : les véhicules sans position ------------------
   Un camion qu'on ne peut pas dessiner sortait de la carte sans un mot. Cette
   bande le nomme, juste sous la carte, et dit depuis quand il se tait.

   Elle attire l'œil sans crier : un liseré à gauche, de la couleur « attention »
   du portail. Ce n'est pas une alerte — c'est une absence, et l'exploitant
   décide lui-même si elle en est une. Elle n'existe pas quand il n'y a rien à
   dire : `.cache` la retire complètement (voir web/app/vues/carte.js). */
.carte.muets {
  border-left: 4px solid var(--umv-attention, #b06000);
}
.carte.muets > p:first-child { margin-top: 0; }
.carte.muets .liste { margin-top: .5rem; }
/* La ligne d'un muet reste lisible sur un écran étroit : le nom garde la place,
   le « depuis quand » passe dessous plutôt que d'être rogné. */
@media (max-width: 480px) {
  .carte.muets .bouton.large { flex-wrap: wrap; }
}


/* --- G26 lot 2 : LE PANNEAU DE PARC ----------------------------------------
   Vérifié à l'écran le 11/09/2026 (B3) : `#vue div.carte.cache` existait,
   était REMPLIE, et mesurait 0 × 0 px. La liste du parc était écrite depuis le
   début et n'a jamais été montrée. Elle l'est maintenant, à côté de la carte,
   et elle absorbe la bande des muets du paquet 1 : un seul dispositif.

   L'ORDRE DU DOCUMENT est : panneau, carte, fiche — pour que le PREMIER ARRÊT
   DE TABULATION de l'écran soit le parc, et pour qu'un lecteur d'écran annonce
   la flotte avant tout le reste. La carte n'a aucun `tabindex` sur 1 173 lignes
   et ne peut pas en avoir : sans ce choix, le parc reste inatteignable au
   clavier. `order` pose ensuite le panneau là où il se lit le mieux — sous la
   carte sur téléphone, en colonne de droite sur ordinateur. L'ordre visuel et
   l'ordre du clavier diffèrent donc d'un cran ; c'est assumé, et c'est le prix
   d'une porte d'entrée clavier qui n'existait pas du tout. */

#vue.pleine {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* L'hôte de la fiche : elle est en `position: fixed`, il ne prend aucune place. */
#zone-fiche { order: 3; flex: 0 0 auto; }

#zone-carte { order: 1; }

#panneau-parc {
  order: 2;
  margin: .5rem .7rem;
  padding: .55rem .7rem;
  /* Il se lit d'un coup d'œil et défile tout seul : il ne pousse jamais la
     page, et il ne va jamais chercher la barre des trois entrées. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* TÉLÉPHONE (400 px) — LE COMPROMIS, ET POURQUOI.
   Le panneau ne remplace pas la carte et ne la recouvre pas : il se pose
   dessous et on voit les deux SANS FAIRE DÉFILER LA PAGE. La carte perd de la
   hauteur (40 vh au lieu de la quasi-totalité de l'écran) — 320 px sur un
   téléphone de 800 px, de quoi lire l'étalement de la flotte — et le panneau
   prend 19 rem, soit l'en-tête, les comptes et quatre lignes, le reste à
   portée de pouce dans son propre défilement. Un exploitant qui veut la carte
   en grand replie le panneau d'un bouton ; le choix tient tant qu'il reste sur
   l'écran. C'est le seul arbitrage qui laisse les deux visibles à la fois : un
   panneau plein écran cacherait la carte, un panneau sous la ligne de flottaison
   ne serait jamais vu — et c'est exactement le défaut qu'on répare. */
@media (max-width: 859px) {
  #zone-carte { height: 40vh; min-height: 200px; }
  #panneau-parc { max-height: 19rem; }
}

/* ORDINATEUR — LA COLONNE DE DROITE, ET POURQUOI PAS CELLE DE GAUCHE.
   Le haut-gauche de la carte appartient déjà au panneau Rechercher / Itinéraire
   (G20, `.panneau-carte`, 408 px) : c'est lui qui doit rester collé au bord de
   l'écran, sans quoi la barre de recherche part au milieu de la page. Le parc
   prend donc la colonne de droite, et LA FICHE VÉHICULE GLISSE À CÔTÉ DE LUI
   (`right: var(--umv-parc-largeur)`) au lieu de le recouvrir : cliquer une
   ligne ouvre la fiche SANS faire disparaître la liste d'où l'on vient.
   L'écran se lit alors de gauche à droite : la carte, le détail, la flotte. */
@media (min-width: 860px) {
  #vue.pleine { flex-direction: row; }
  #zone-carte { order: 1; flex: 1 1 auto; min-width: 0; }
  #zone-fiche { order: 2; flex: 0 0 0; width: 0; }
  #panneau-parc {
    order: 3;
    /* Juste au-dessus du point de rupture, l'écran est déjà partagé entre les
       trois entrées (190 px) et la fiche véhicule (380 px) : le panneau se fait
       étroit pour ne pas réduire la carte à un timbre, et s'élargit dès qu'il y
       a de la place (voir `--umv-parc-largeur` plus bas). */
    flex: 0 0 var(--umv-parc-largeur);
    margin: 0;
    height: calc(100vh - 130px);
    max-height: none;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  /* La fiche ne se pose plus SUR le panneau : elle se pose CONTRE lui. */
  #vue.pleine .fiche { right: var(--umv-parc-largeur); }
}

/* Sans carte (pas de WebGL, fond de carte absent), le panneau EST l'écran. */
#vue.pleine.sans-carte #panneau-parc { max-height: none; height: auto; flex: 1 1 auto; }

.parc-tete { display: flex; align-items: center; gap: .5rem; }
.parc-titre { font-size: 1rem; margin: 0; flex: 1 1 auto; }

/* Replier n'a de sens que là où la carte manque de place : sur ordinateur le
   bouton n'existe pas, et `display:none` le retire aussi de l'ordre de
   tabulation — un arrêt de moins à traverser. */
.parc-basculer { display: none; }
@media (max-width: 859px) { .parc-basculer { display: inline-flex; } }

/* Les cinq comptes SONT les cinq filtres (B7) : la bannière de santé du portail
   annonçait « 12 alertes à traiter » sans une seule balise cliquable. */
.parc-compteurs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .3rem; }

.parc-compte {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  /* Sur téléphone, la cible tactile de 44 px du cahier ; sur ordinateur, où la
     souris vise au pixel, une pastille plus compacte laisse la place aux
     lignes — c'est-à-dire au parc. */
  min-height: var(--umv-cible);
  padding: .3rem .6rem;
  border: 1px solid var(--umv-bord);
  border-radius: 999px;
  background: var(--umv-fond-carte);
  color: var(--umv-texte);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.parc-compte:hover:not([disabled]) { background: var(--umv-fond-doux); }
.parc-compte[aria-pressed="true"] {
  background: var(--umv-marque);
  border-color: var(--umv-marque);
  color: var(--umv-marque-texte);
  font-weight: 600;
}
.parc-compte[disabled] { opacity: .45; cursor: default; }
@media (min-width: 860px) { .parc-compte { min-height: 32px; } }

/* La bande d'avertissement du paquet 1, REPRISE ICI. Elle attire l'œil sans
   crier : c'est une absence, pas une alerte, et l'exploitant décide lui-même
   si elle en est une. Mêmes couleurs que `.etiquette.attention` : une seule
   palette pour un seul sens. */
.parc-silence {
  margin: .2rem 0 .1rem;
  padding: .4rem .6rem;
  border-left: 4px solid var(--umv-attention);
  border-radius: 0 var(--umv-rayon) var(--umv-rayon) 0;
  background: #fff4e0;
  color: #6b4a00;
  font-weight: 700;
}
:root[data-theme="nuit"] .parc-silence,
:root:not([data-theme="jour"]) .parc-silence { background: #3a2c10; color: #f0d49a; }
.parc-silence-aide { margin: .15rem 0 .4rem; }

.parc-liste { margin-top: .2rem; }
.parc-liste li { margin-bottom: .2rem; }

/* UNE LIGNE = UN VÉHICULE, et c'est elle qui prend le focus (`role="option"`,
   `tabindex` glissant). Pas de bouton à l'intérieur : quarante boutons à la
   file ne sont pas une porte d'entrée, c'est un couloir. */
.parc-ligne {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--umv-cible);
  padding: .3rem .45rem;
  border: 1px solid transparent;
  border-radius: var(--umv-rayon);
  cursor: pointer;
}
.parc-ligne:hover { background: var(--umv-fond-doux); }
.parc-ligne:focus-visible { outline: 3px solid var(--umv-marque); outline-offset: -2px; }
.parc-ligne[aria-selected="true"] {
  background: var(--umv-fond-doux);
  border-color: var(--umv-bord);
}

.parc-textes { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.parc-nom  { font-size: .92rem; }
.parc-etat { font-size: .78rem; }
/* Un nom trop long se coupe proprement plutôt que d'élargir le panneau et de
   pousser la carte hors de l'écran. */
.parc-nom, .parc-etat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Un véhicule qui ne répond plus se repère avant d'être lu. */
.parc-ligne.parc-muet, .parc-ligne.parc-hors_ligne { background: rgba(158, 158, 158, .10); }
.parc-ligne.parc-alerte { background: rgba(198, 40, 40, .08); }

.parc-reste, .parc-aide, .parc-vide { margin: .4rem 0 0; }
.parc-avis, .parc-avis-erreur, .parc-avis-tronque { margin: .3rem 0; }

/* À l'impression, le panneau EST le document : un inventaire de flotte se sort
   sur papier, pas la carte. */
@media print {
  #zone-carte, .parc-basculer, .parc-compteurs { display: none !important; }
  #panneau-parc { max-height: none; height: auto; overflow: visible; border: 0; }
  .parc-ligne { min-height: 0; }
}

@media (min-width: 1200px) { :root { --umv-parc-largeur: 320px; } }

/* ---------------------------------------------------------------------------
   G28 — LA FICHE D'UN SITE DE DÉCHARGEMENT, sur la carte du portail.

   Le contenu est construit par `web/app/exutoires-fiche.js`, le même module
   qu'en cabine : les classes `umv-exutoire-*` sont communes aux deux écrans, et
   seule la mise en place (`.umv-exutoire-carte`) appartient au portail. Elle se
   pose en haut à droite de la carte, là où rien d'autre ne vit, pour ne cacher
   ni le panneau de parc (à gauche) ni l'attribution (en bas).
   --------------------------------------------------------------------------- */
.umv-exutoire {
  position: relative;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: var(--fond-carte, #ffffff);
  color: var(--texte, #1a2229);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  font: 14px/1.4 inherit;
}
.umv-exutoire-carte {
  position: absolute; z-index: 6; top: 12px; right: 12px;
  width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
}
.umv-exutoire-fermer {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px;
  border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer;
}
.umv-exutoire-titre { font-size: 17px; font-weight: 700; line-height: 1.25; padding-right: 36px; }
.umv-exutoire-soustitre { font-size: 13px; color: var(--texte-faible, #7c8b98); margin-top: 2px; }
.umv-exutoire-ou { font-size: 13px; margin-top: 4px; }

/* La fiabilité en clair : 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-size: 12px; font-weight: 600; 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: 12px; color: #d92b2b; }

/* LA PHOTO DU PORTAIL (G28 lot 4). Elle est posée entre l'adresse et les
   lignes, et elle occupe toute la largeur : c'est la chose qu'un chauffeur
   regarde en premier, parce qu'un portail de carrière ne se décrit pas.
   `aspect-ratio` réserve sa place AVANT que l'image arrive — sans quoi la fiche
   sauterait sous le pouce au moment où la vignette se charge. */
.umv-exutoire-photo { margin: 8px 0 2px; }
.umv-exutoire-photo-image {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; background: var(--fond-faible, #eef2f5);
}
.umv-exutoire-photo-legende {
  display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px;
  font-size: 11px; line-height: 1.35; color: var(--texte-faible, #7c8b98);
}
.umv-exutoire-photo-quoi { font-weight: 700; color: var(--texte, #1a2229); }
/* Le crédit de licence ne se cache pas et ne se rétrécit pas : l'afficher est
   une obligation (Licence Ouverte 2.0, CC BY-SA 4.0), pas une option de mise
   en page. */
.umv-exutoire-photo-credit { flex: 1 1 100%; color: var(--texte-faible, #7c8b98); }
a.umv-exutoire-photo-credit { text-decoration: underline; }

.umv-exutoire-ligne { display: flex; gap: 8px; margin-top: 6px; font-size: 13px; }
.umv-exutoire-etiquette { flex: 0 0 76px; color: var(--texte-faible, #7c8b98); }
.umv-exutoire-valeur { flex: 1 1 auto; word-break: break-word; }
a.umv-exutoire-valeur { color: var(--accent, #1a73e8); text-decoration: none; }
.umv-exutoire-acces .umv-exutoire-valeur { white-space: pre-line; }

.umv-exutoire-yaller {
  display: block; width: 100%; min-height: 40px; margin-top: 12px;
  border: 0; border-radius: 8px; background: var(--accent, #1a73e8); color: #ffffff;
  font-size: 15px; font-weight: 700; cursor: pointer;
}