/* ============================================================
   v272.57 — LA FAMILLE OCTOGONALE, FORCE FINALE
   Cette feuille est chargée EN DERNIER (après style, voice-transport,
   planner, mobile-actions, wow, metro) : ses règles gagnent l'ordre.
   Elle impose la forme panneau routier (coins coupés fixes) à TOUS les
   boutons de la carte et de la navigation — la capture client 00h08 du
   26/09 montrait 8 boutons encore ronds parce que chaque feuille
   redéfinissait border-radius:999px après style.css.
   ============================================================ */

/* ============================================================
   v272.75 — FAMILLE OCTOGONALE UNIFIÉE (demande client 27/09 nuit :
   « faites les boutons de la page principale de la même manière que les
   octogones de la page de navigation ») — l'ENTÊTE et la BARRE D'OUTILS
   rejoignent la famille : coins coupés fixes, silhouette nette.
   Inclut : Signaler, FAQ, 🌐 langue, 🌙 nuit, 🧭 GPS de province, les
   4 pastilles de mode (Entraves/GPS/Mixte/Nav).
   ============================================================ */
/* v272.125 (Bob, « tout croche ») : .btn-report RETIRÉ de la famille
   octogonale — sur téléphone il est devenu une LONGUE BARRE à coins
   coupés (octogone écrasé = boche), à côté de la barre poule RONDE.
   L'octogone reste réservé aux boutons CARRÉS de la carte ; les barres
   de l'en-tête sont des pilules rondes jumelles. FAQ/langue/🌙/modes
   gardent leur octogone (petits boutons carrés : ça leur va). */
.btn-secondary[href*="faq"],
.lang-btn,
.theme-toggle,
.prov-gps-btn,
.mode-seg button {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  border-radius: 0 !important;
}

/* ============================================================
   v272.95 (Bob, batch-20) : LES BOUTONS DÉPLAÇABLES SONT TOUS
   OCTOGONAUX — « ces boutons-là sont vraiment octogonaux comme un
   Aristote, mais les autres qu'on bouge dans les autres modes sont pas
   octogones comme j'avais demandé » — la famille ENTIERE rejoint la
   forme panneau routier (mêmes couleurs, mème forme, n'importe quelle
   carte). Règle CIBLÉE (pas un balayage global qui casserait la
   pub/les fiches) : les boutons de carte, les flottants, le chip et
   le gros ▶ Naviguer. Règles non-!important : position.js/gps.css
   ne doivent plus jamais les arrondir par-dessus.
   ============================================================ */
.map-fab,
.fab-float,
.fab-float-page,
#gps-chip,
#nav-stop-fab,
#planner-nav-chip,
#nav-go-btn,
.mtl-zoom-h .zh-btn,
.nav-banner .nav-mini,
.rp-tourbar .rp-chip {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  border-radius: 0 !important;
}

/* ============================================================
   v272.112 (batch-26 : « les petites photos sont pas centrées dans
   leur bouton ») — le clip-path DÉCOUPE les coins : sans centrage
   flex, l'emoji reste posé en haut-gauche du texte courant (le
   padding du bouton le décale) → micro décalé vers un coin.
   On centre le picto PLEIN CADRE dans l'octogone, sur toute la
   famille, et on annule le décalage des paddings hérités.
   ============================================================ */
.map-fab,
.fab-float,
.fab-float-page,
#gps-chip,
#planner-nav-chip,
#nav-go-btn,
.mtl-zoom-h .zh-btn,
.nav-banner .nav-mini,
.rp-tourbar .rp-chip,
#mtl-back {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}
/* Les 3-4 pictos en RANGÉE (signaler/FAQ/langue gardent leur libellé) :
   même centrage vertical, gap conservé. */
.btn-report,
.btn-secondary[href*="faq"],
.lang-btn,
.theme-toggle,
.prov-gps-btn,
.mode-seg button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.8rem !important;
  line-height: 1.1 !important;
}

/* ============================================================
   v272.75 — LE STOP : VRAI PANNEAU STOP DE LA RUE
   Le client le veut « comme un vrai stop à la bonne grandeur » :
   octogone régulier PROPRE (l'ancien 30%/70% donnait un hexagone
   bombé), rouge stop normalisé, double liseré blanc comme le panneau
   physique, STOP centré en majuscules. Taille rehaussée à 72 px (cible
   tactile confortable en conduisant, lisible de loin).
   NOTE : style.css contient aussi width/height 64px + border 3px +
   box-shadow — on les neutralise ICI (feuille finale). Le liseré
   blanc passe par ::before (le border 3px carré casserait l'octogone).
   ============================================================ */
/* v272.107 (batch-23 : STOP « il bouge plus / je peux pas l'attraper ») —
   la carte d'arrivée (#nav-arrive, z 1660) recouvrait le STOP (z 2600 ?
   non : empilé sous la PWA barre) : le STOP passe AU-DESSUS DE TOUT
   (3200 > pub, > carte d'arrivée, > bannière) et la carte d'arrivée se
   relève de 10 px pour ne plus frotter l'octogone. */
#nav-stop-fab { z-index: 3200 !important; }
.nav-arrive { bottom: calc(9.4rem + env(safe-area-inset-bottom, 0px)) !important; }

/* v272.109 (batch-24) :
   1. « mes boutons à droite ONT DISPARU quand ils étaient sur les
      informations de navigation » — la bannière nav (z 1500) recouvrait
      les boutons flottants traînés dessus. Ils passent AU-DESSUS (1550),
      mais restent sous le chip (1650), la carte d'arrivée (1660) et le
      gros ▶ (1700).
   2. « le X de la bulle est aligné avec la lune en dessous, je ferme la
      bulle et j'appuie en même temps sur la lune → mode nuit » — en
      navigation, la lune (même flottante, posée par Bob) se cache : le
      ✕ ne tape plus à travers. Elle revient dès la sortie de nav. */
.fab-float,
.fab-float-page { z-index: 1550 !important; }
html.nav-mode .theme-toggle { display: none !important; }

/* v272.218 (Bob : « des pointillés puis des boutons mal placés ») :
   les encarts pub VIDES « + Votre pub ici » (bordure pointillée)
   sont CACHÉS — plus rien de pointillé ne traîne sur la carte.
   Un vrai encart rempli reste visible normalement. */
.ad-mini-available { display: none !important; }

/* v272.110 (batch-25, captures 14h03-14h06) :
   1. LE BANDEAU ROUGE « Touchez pour voir » coincé au MILIEU gauche
      recouvrait 2 boutons — il passe SOUS les flottants (et sous la pub).
   2. ⚡ et 🧭 empilés : les colonnes statiques ne POSERONT PLUS les
      boutons sur un souvenir flottant — garde déjà faite côté JS.
   3. Le bouton ⬅ RETOUR (mode précédent) : pastille grise, coin
      gauche, sous le chip, jamais sur la pub ni sur la bannière. */
/* v272.218 (Bob) : le bandeau URGENCE traverse SOUS la pub du haut
   (46% du bas) — plus jamais au centre de la carte. */
.urgent-banner.urgent-flash { z-index: 1200 !important; }

#mtl-back {
  position: fixed;
  left: 0.6rem;
  top: 45%;
  z-index: 1540;
  width: 46px;
  height: 46px;
  font-size: 1.15rem;
  background: linear-gradient(150deg, #334155 0%, #1e293b 100%);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(2, 6, 23, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
#mtl-back[hidden] { display: none !important; }
#mtl-back:active { transform: scale(0.94); }

/* v272.112 (batch-26, photos 15h30/15h37 : l'ARRÊT téléporté par sa
   création sans mémoire recouvrait le ⬅) — le ⬅ monte AU-DESSUS du
   STOP : jamais écrasé, toujours cliquable. */
#mtl-back { z-index: 3250 !important; }

/* ============================================================
   v272.121 (batch-32, 16h44 : le ⬅ écrase les adresses des formulaires
   d'arrêt) — 1. pastille PLUS PETITE et semi-transparente (elle gêne
   moins la lecture) ; 2. clic-TRANSPARENT : les taps passent au
   panneau dessous ; le vrai clic se prend sur #mtl-back-hit, son
   jumeau invisible exactement à la même place (même coords CSS).
   ============================================================ */
#mtl-back {
  width: 40px !important;
  height: 40px !important;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
#mtl-back-hit {
  position: fixed;
  left: 0.6rem;
  top: 45%;
  z-index: 3251;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  opacity: 0;
  pointer-events: auto;
}
#mtl-back-hit[hidden] { display: none !important; }

#nav-stop-fab {
  /* v272.312 (Bob, 27 oct : « mettre le bouton STOP un peu plus petit et
     plus facile à déplacer ») — 72 → 60 px sur TOUTES les variantes :
     même octogone, moins d'écran et moins de poids sous le doigt. */
  width: 60px !important;
  height: 60px !important;
  justify-content: center;
  padding: 0 !important;
  gap: 0 !important;
  background: #c1121f !important;
  border: none !important;
  box-shadow: none !important;
  /* v272.77 (Bob) : FIX POSITION — le « position: relative » ci-dessous
     (nécessaire au liseré ::before) écrasait le « position: fixed » de
     style.css → le STOP atterrissait à x=-14 (à moitié HORS écran,
     bas-gauche). Mesuré en preview. Le !important rétablit le fixed
     bas-droit voulu. */
  position: fixed !important;
  /* v272.80 (Bob, batch-14) : left/top/right/bottom SANS !important —
     le « !important » bloquait le drag au doigt (les styles inline du
     moteur perdaient toujours). Cette feuille charge en DERNIER : elle
     gagne par l'ordre, et le drag redevient libre. */
  /* v272.112b (batch-27, photos 23h50-23h51 : l'octogone ARRÊT était
     COUPÉ au bord droit — right 0.9rem au doigt = 14 px, le drop-shadow
     filait au-delà) : marge doublée + jamais recouvert par la pub du bas
     (z-index 1500 = au-dessus des slots pubs 1200). */
  /* v272.190 (Bob : « 2 places officielles en bas, un petit peu plus
     bas peut-être ») — place officielle du STOP BAISSÉE de 1,2rem :
     l'octogone repose plus près de la pub, il est STATIQUE (drag.js
     ne le prend plus) : plus jamais bougé, plus jamais écrasé. */
  right: 1.5rem;
  left: auto;
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  top: auto;
  z-index: 1500 !important;
  /* octogone régulier réel (8 pans égaux, pas d'hexagone bombé) */
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%) !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
/* ============================================================
   v272.112b (Bob, batch-27 : « ma petite flèche bleue maintenant tu vas
   la mettre en orange parce que bleu sur bleu je la vois pas ») — LA
   FLÈCHE PASSE EN ORANGE VIF : visible sur la ligne de route bleue, la
   couche trafic, le fond jour comme nuit. Halos assortis.
   ============================================================ */
.user-dot.as-arrow .user-dot-core::after {
  border-bottom-color: #ff7a00 !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(255, 122, 0, 0.9)) !important;
}
.user-dot.as-arrow .user-dot-core {
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.35), 0 2px 10px rgba(255, 122, 0, 0.55) !important;
}
/* Le point rond (pas en mode flèche) prend le même orange : plus AUCUN
   bleu-sur-bleu sur la position de Bob. */
.user-dot:not(.as-arrow) .user-dot-core {
  background: #ff7a00 !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.4), 0 0 14px rgba(255, 122, 0, 0.7) !important;
}
@keyframes userPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.4), 0 0 10px rgba(255, 122, 0, 0.55); }
  50% { box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.18), 0 0 20px rgba(255, 122, 0, 0.85); }
}

/* liseré blanc intérieur façon panneau physique : via un pseudo-élément
   clippé plus petit, blanc, derrière le libellé */
#nav-stop-fab::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: transparent;
  border: 2.2px solid rgba(255, 255, 255, 0.95);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  pointer-events: none;
}
#nav-stop-fab span {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

#map .map-fab,
#map .gps-chip,
#map .traffic-live-btn,
#map .buffy-badge {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
  border-radius: 0 !important;
}

/* ============================================================
   v272.59 — OCTOGONE UNIVERSIEL (suit le bouton PARTOUT)
   📷 batch-3 (26/09 12h16-12h21) : un bouton déplacé au doigt vers le
   haut de la page sort de #map (drag.js le reparente dans document.body,
   classe fab-float-page) → il perdait sa forme octogonale (clip-path
   scoper à #map seulement). Les boutons déplacés devenaient CARRÉS.
   Fix : même forme partout où drag.js peut le poser (body, #map,
   .map-topbar). La géométrie du drag n'est PAS touchée.
   ============================================================ */
body > .map-fab.fab-float-page,
body > .map-fab.fab-float,
.map-topbar .map-fab,
body > .gps-chip,
body > .traffic-live-btn {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
  border-radius: 0 !important;
}

/* ============================================================
   v272.118 (batch-29 : « ▶ Naviguer reste collé en pleine nav »,
   photo 11h44) — le bloc octogone ci-dessus force display:flex
   !important sur #nav-go-btn et #planner-nav-chip : il ÉCRASE
   l'attribut HTML [hidden] (display:none par défaut, spécificité 0) →
   le bouton de pause et le chip restaient visibles PENDANT la nav.
   [hidden] doit TOUJOURS gagner. Même parade pour .fab-float-page
   des adcadavres positionnés (display:none par drag.js).
   ============================================================ */
#nav-go-btn[hidden],
#planner-nav-chip[hidden] {
  display: none !important;
}

/* Le STOP façon panneau de rue : REMPLACÉ par le vrai panneau stop
   v272.75 ci-dessus (72px, octogone régulier, liseré blanc). Les règles
   ici (64px, clip 30%) sont RETIRÉES — elles fightaient contre la
   nouvelle définition. */

/* ============================================================
   v272.60 — MODE NUIT : LISÉRÉ LUMINEUX SUR LA SILHOUETTE
   Batch-4 (26/09) + screenshot 12h21 : en mode sombre, les coins coupés
   montrent le fond noir de la page → l'octogone READ comme un carré.
   drop-shadow suit la silhouette CLIPPÉE (contrairement à box-shadow) :
   un léger halo blanc rend les 8 pans visibles sur fond sombre.
   ============================================================ */
body.dark .map-fab,
body.dark .gps-chip,
body.dark .traffic-live-btn {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55));
}

/* ============================================================
   v272.117 (batch-28, 30/09) — NOUVEAUTÉS BOB :
   cônes orange, poule sur nid, barre « Signalez votre nid de
   poule », pastille GPS + provinces en haut à gauche.
   ============================================================ */

/* --- Points d'entraves DEVENUS PETITS CÔNES ORANGE --- */
.cone117-marker { background: transparent !important; border: none !important; }
/* v272.183 (FLUIDITÉ WAZE) : le cône devient UN SEUL élément (clip-path +
   dégradé) au lieu de span + <i> + ::after — même silhouette (triangle
   orange 14×13 + barre blanche 14×3), 2 000 cônes = ~2× moins d'éléments. */
.cone117 {
  display: block; width: 16px; height: 16px;
  background: linear-gradient(#ff7a00 0 13px, #fff 13px 16px);
  clip-path: polygon(50% 0%, 93.75% 81.25%, 93.75% 100%, 6.25% 100%, 6.25% 81.25%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.cone117 i, .cone117::after { content: none !important; display: none !important; }

/* --- NIDS-DE-POULE : cône orange + petite poule assie sur son nid --- */
.ph117-marker { background: transparent !important; border: none !important; }
.ph117 {
  display: flex; align-items: flex-end; justify-content: center;
  width: 22px; height: 22px; position: relative;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.ph117-cone {
  display: block; width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #ff7a00;
  border-radius: 2px;
}
.ph117-hen {
  position: absolute; top: -4px; right: -5px;
  font-size: 12px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* --- BARRE « Signalez votre nid de poule » — v272.118 : dans
   l'EN-TÊTE, à côté de « Signaler une entrave » (batch-29 : posée sur la
   carte, elle restait SOUS le pli (#pothole-bar@55,789, fenêtre 645 px)
   et l'app paraissait vide ; ici elle vit avec les autres actions. --- */
#pothole-bar {
  display: inline-flex; align-items: center; gap: 5px;
}
#pothole-bar .pothole-open-btn {
  cursor: pointer;
  background: #101828; color: #ffd27a;
  border: 1.5px solid #ff7a00; border-radius: 999px;
  font-weight: 700; font-size: .72rem;
  padding: .42rem .75rem; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
}
#pothole-bar .pothole-open-btn:active { transform: scale(.97); }
#pothole-bar .ph-cone { display: inline-flex; align-items: center; }
#pothole-bar .ph-cone i {
  display: block; width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid #ff7a00;
  border-radius: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
#pothole-bar .ph-hen {
  font-size: 15px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
@media (max-width: 899px) {
  #pothole-bar { display: flex; } /* sa propre rangée sur mobile */
  #pothole-bar .pothole-open-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ============================================================
   v272.119 (batch-30, Bob : « le bouton retour noir... on voit pas la
   flèche dedans... peut-il faire octogone comme tous les autres ») —
   le ⬅ passe à la famille octogonale : même clip-path, picto PLUS GROS
   et centré (la flèche était minuscule dans la pastille grise).
   ============================================================ */
#mtl-back {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  border-radius: 0 !important;
  font-size: 1.5rem !important;
  color: #ffd27a !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ============================================================
   v272.120 (batch-31, photos 14h33-14h35 : les icônes de nav (🚩 cible,
   📋, ⚠️, ARRÊT) DÉPASSENT de l'écran à droite — souvenirs x>320) —
   SÉCURITÉ UNIVERSELLE : AUCUN bouton déplacable ne peut plus rester
   hors de l'écran ; à l'application de la mémoire ET au chargement,
   tout x/y hors des limites est RECALÉ à l'intérieur (marge 8px).
   ============================================================ */
#nav-stop-fab, #planner-nav-chip, #mtl-back,
.nav-banner .nav-mini, .fab-float, .fab-float-page {
  max-width: 44px;
}
/* v272.125 (Bob, matin du 1er oct : « tous les boutons sont tout croches »
   — preuve 📐 00h58 : le STOP mesuré 44 DE LARGE × 72 DE HAUT, déformé
   par le plafond ci-dessus !) — le STOP garde SES 72×72 ; la puce GPS et
   les mini-boutons de bannière restent plafonnés à 44. */
#nav-stop-fab {
  /* v272.312 (Bob, 27 oct : « mettre le bouton STOP un peu plus petit et
     plus facile à déplacer ») — 72 → 60 px sur TOUTES les variantes :
     même octogone, moins d'écran et moins de poids sous le doigt. */
  width: 60px !important;
  height: 60px !important;
  max-width: none !important;
  max-height: none !important;
}
@supports (padding: 0px) {
  /* recalage JS ci-dessous (clamp) — la CSS borne seulement la taille */
}

/* ============================================================
   v272.119 (batch-30) — 1. LES BARRES S'UNIFORMISENT : « Signalez votre
   nid de poule » prend le MÊME habit sombre que « Signaler une entrave »
   (cône orange et poule restent de part et d'autre).
   2. LE COMPTEUR « 2242 entraves · 0 dans la vue » descend À CÔTÉ DU
   BLOC DES ENTRAVES (bas-gauche), il n'était plus au centre-haut où il
   flottait au-dessus de la carte ; caché pendant la nav.
   3. LA POULE S'ANIME (petit hochement de tête) à côté de sa barre.
   ============================================================ */
#pothole-bar .pothole-open-btn {
  background: linear-gradient(160deg, #0f1a2b 0%, #1a2b45 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 22px -8px rgba(18,16,31,.7);
}
#pothole-bar .ph-hen {
  animation: ph-bob 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes ph-bob {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-9deg) translateY(-1px); }
  60% { transform: rotate(7deg); }
}
#live-count {
  /* v272.226 (Bob : « le zoom est par-dessus la pastille du nombre
     d'entraves, et sur mon téléphone je ne vois plus la pastille du
     tout ») — mesuré live : une ancienne règle posait la chip en BAS
     (bottom 0.55rem) où le zoom la couvrait. Retour à la place
     d'origine CENTRE-HAUT de style.css v23.8.1 — jamais sous le zoom,
     jamais sous la pub. */
  top: 0.7rem !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}
html.nav-mode #live-count,
html.tour-on #live-count { opacity: 0 !important; pointer-events: none !important; }

/* ---------- v272.119 : MENU « Autres boutons » (déplie la rangée du bas)
   Sur 320px, la rangée des 4 boutons du bas mangeait la carte. DÉSORMAIS
   elle est PLIÉE par défaut (seul le bouton d'ouverture reste), et se
   déplie d'un appui. État mémorisé par session. */
.map-bottom-collapse { display: none; }
@media (max-width: 899px) {
  html.mtl-bottom-folded #gps-chip,
  html.mtl-bottom-folded .traffic-live-btn,
  html.mtl-bottom-folded #fab-recenter,
  html.mtl-bottom-folded #fab-transport,
  html.mtl-bottom-folded #fab-safety,
  html.mtl-bottom-folded #fab-planner,
  html.mtl-bottom-folded #voice-btn,
  html.mtl-bottom-folded #mtl-zoom-h { display: none !important; }

/* ============================================================
   v272.191b (Bob, 07 oct : « les boutons zoom et stop en bas centré mais
   déplacable ») — LE STOP ET LE BLOC ZOOM REVIENNENT dans la famille
   déplaçable (SEL_FAB), avec DES PLACES PAR DÉFAUT EN BAS DE L'ÉCRAN,
   CENTRÉES. Un drag écrit left/top inline qui gagnent sur ces valeurs.
   ============================================================ */
#nav-stop-fab {
  /* v272.315 — ANCRAGE SANS TRANSFORM : translateX(50%) réapparaissait
     PENDANT l'appui (drag-press) et faisait le saut +30 px à droite
     (constaté sur le 🦘 et le STOP, Bob 27 oct 17h). L'équivalent exact
     d'un centrage avec transform est right = 50% - 30 px (60 px de
     large) : même place au repos, zéro mouvement à l'appui. */
  right: calc(50% - 30px) !important;
  left: auto;
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)) !important;
  transform: none;
}

/* Le compteur de tournée (créé en nav seulement) est centré par défaut :
   en nav la règle .nav-mode ci-dessus pose top (sous la bannière) et
   style.css v272.191b centre horizontalement. Le drag écrit left/top
   inline, qui gagnent toujours. */
#planner-nav-chip {
  position: fixed;
}

/* GLISSEMENT qui ne scrolle plus : le bloc zoom (div conteneur +/−/mode)
   et le STOP (bouton sans .map-fab, jamais couvert avant) ne délèguent pas
   de scroll pendant le drag — décisif sur la tablette sans PointerEvent,
   où la décision scroll/pan se prend au touchstart. Un tap reste natif. */
#mtl-zoom-h {
  touch-action: none;
}
#nav-stop-fab {
  touch-action: none;
}
  .map-bottom-collapse {
    display: flex !important; align-items: center; justify-content: center;
    position: absolute; left: 8px; bottom: 8px; z-index: 1245;
    width: 42px; height: 42px;
    background: rgba(16,24,40,.92); color: #fff;
    font-size: 1.05rem; border: 1.5px solid rgba(255,255,255,.3);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    cursor: pointer;
  }
  html:not(.mtl-bottom-folded) .map-bottom-collapse { bottom: auto; top: 8px; }
}
html.nav-mode .map-bottom-collapse { display: none !important; } /* jamais en pleine nav */

/* ============================================================
   v272.121 (batch-32) — LE PLAN « MENU DÉROULANT AVEC LIBELLÉS »
   (idée de Bob : « on arrête toutes nos icônes dans un menu déroulant,
   on gagne de la place »). PLATEAU EN ATTENDU DE SON OUI/NON — les
   blocs ci-dessous ne S'ACTIVENT QUE si <html> porte la classe
   fab-menu-on, posée manuellement (ou par réglage à venir) :
     • la rangée du bas (📍 🚦 🎯 🚚 ⚠ 🚌 ▶⏸ 🗺) est REPLIÉE dans un
       bouton « 🧰 Outils carte » (octogone, bas-gauche) ;
     • le menu liste chaque outil avec son LIBELLÉ complet —
       l'icône ET le mot, comme demandé ;
     • en pleine navigation, le menu ne s'ouvre pas (le STOP et la
       bannière gardent l'écran). Le ⋯ d'en-tête (v272.121) est déjà
       actif, lui, pour ranger GPS/FAQ/langue/thème.
   ============================================================ */
.fab-menu-on .map-bottom-collapse { display: none !important; }
.fab-menu-on #fab-map-menu {
  display: flex !important;
  align-items: center; justify-content: center;
  position: absolute; left: 8px; bottom: 8px; z-index: 1246;
  width: 46px; height: 42px;
  background: rgba(16,24,40,.94); color: #fff;
  font-size: 1.05rem; border: 1.5px solid rgba(255,255,255,.3);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  cursor: pointer;
}
#fab-map-menu { display: none; }
.fab-menu-on #fab-map-menu-list {
  display: block;
  position: absolute; left: 8px; bottom: 58px; z-index: 1247;
  min-width: 218px; max-height: min(70vw, 420px);
  overflow-y: auto;
  background: rgba(16,24,40,.97); color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6);
  padding: 0.3rem;
}
#fab-map-menu-list { display: none; }
.fab-menu-on .fmm-row {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.6rem 0.55rem;
  background: none; border: none; border-radius: 9px;
  color: #fff; font: inherit; font-size: 0.86rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.fab-menu-on .fmm-row:active { background: rgba(255,255,255,.14); }
.fab-menu-on .fmm-row b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; flex: 0 0 34px;
  background: rgba(255,255,255,.12);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  font-size: 0.95rem;
}
.fab-menu-on .fmm-sep { height: 1px; background: rgba(255,255,255,.18); margin: 0.25rem 0.4rem; }
.fab-menu-on .fmm-title { padding: 0.35rem 0.55rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }
.fab-menu-on #fab-map-menu-list[hidden] { display: none; }
html.nav-mode #fab-map-menu, html.nav-mode #fab-map-menu-list { display: none !important; }

/* v272.118 (batch-29 : « le GPS là ça semble éteint ») — la chip 🛰️ de
   la colonne gauche paraissait blanche/morte (fond pâle) : bleu GPS
   franc, comme le bouton GPS de l'en-tête. */
.gps-chip {
  background: #1a73e8 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
body.dark .gps-chip {
  border-color: rgba(255,255,255,.85) !important;
}

/* v272.127 (batch-33) — LE CHIP « ARRÊT N/M » SE TIENT DROIT
   Photos 7h33/7h54 (tablette) : le chip s'écrasait en COLONNE (un mot
   par ligne, « Arrêt 2/4 · 0✅ 3⚠ » vertical sur toute la hauteur).
   v272.261 (Bob, 15 oct : « la pastille des infos de livraisons —
   plein de largeur du téléphone ou presque ») : PLEINE LARGEUR
   (marge 0.55rem de chaque côté), le texte retombe proprement sur 2
   lignes (nowrap supprimé du base : le nom long ne se fait plus
   couper) — la pilule centrale reste centrée via .nav-mode. */
#planner-nav-chip {
  width: auto !important;
  max-width: calc(100vw - 0.55rem) !important;
  white-space: normal !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  text-align: center;
}
#planner-nav-chip[hidden] { display: none !important; }

/* 🌙 du header (téléphone v126, photo 9h28) : un bouton de thème orphelin
   flottait sous les barres ALORS que ≤560px doit le cacher (il vit dans le
   menu ⋯). Forcé sans appel : plus jamais de lune seule en petit écran. */
@media (max-width: 899px) { /* v272.142 : maquette jusqu'aux tablettes */
  .header-legacy { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   v272.128 (batch-33, mesuré en direct 320×783) — LA PAGE TIENT
   DANS SON MOULE : tout plein-largeur, tout CENTRÉ.
   ═════════════════════════════════════════════════════════════ */
/* 1. LA BARRE DE SCROLL FANTÔME (17px volés, tout décentré à droite) :
   la liste des entraves (268 000 px de haut !) déroulait TOUTE la page.
   DÉSORMAIS : la liste scrolle DANS SON BLOC, la page ne bouge plus. */
@media (max-width: 899px) { /* v272.142 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* barre de défilement discrète : l'écran reste plein-largeur
     (elle appartient à html ET body — les deux, sans exception) */
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
  }
  #sidebar {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #list { overflow-y: visible !important; height: auto !important; }
  #map-wrap { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important;
    position: static !important; top: auto !important; order: -1 !important; margin: 0 !important; }
  header, .report-wrap, .pothole-wrap, .header-tools, .map-topbar {
    max-width: 100% !important;
  }
  #report-open, #pothole-open, .map-topbar { margin-left: auto !important; margin-right: auto !important; }
}
/* 2. LA PUB DU HAUT ÉCRASAIT LA CARTE (111px mesurés) : compressée à 56px
   → 55px rendus à la carte, et la carte minimale protégée. */
@media (max-width: 899px) { /* v272.142 */
  .map-ad.slot-top { max-height: 58px !important; overflow: hidden !important; }
  .map-ad.slot-top .ad-slot, .map-ad.slot-top [class*="slot"] { max-height: 58px !important; }
  .map-ad.slot-top img { max-height: 52px !important; width: auto !important; }
  #map { min-height: 300px !important; }
}

/* ═════════════════════════════════════════════════════════════
   v272.132 (Bob, live 13h27 : « je peux pas scroller en bas » +
   « la pub du bas avait disparu » + « les 2 boîtes pas pareilles »)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 899px) { /* v272.142 */
  /* 1. LA PUB DU BAS REVIENT, FIXÉE À L'ÉCRAN : toujours visible (monétisée)
     ET poignée de défilement : glisser dessus fait monter la page — la
     carte ne capte plus le geste. */
  .map-ad.slot-bottom {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    margin: 0 !important;
    z-index: 1400 !important;
  }
  /* la chip « N entraves » et les contrôles du bas ne passent plus DESSOUS */
  #map-wrap { padding-bottom: 0 !important; }
  /* v272.205 (audit final, mesuré à 320px : la chip ⛰️ mordait la pub du
     BAS de 58 px — collision réelle, le tap allait à la pub au lieu du
     GPS) — la règle octo (8rem+8px = 136px) se battait avec la grille
     style.css (11.45rem = 183px, PENSÉE pour libérer la pub 83px).
     On ALIGNE : même valeur que la grille, plus jamais de conflit. */
  .gps-chip { bottom: calc(11.45rem + 0px) !important; }

  /* 2. LES DEUX BARRES IDENTIQUES (demande directe : « même grandeur,
     même couleur, même épaisseur ») : cône ▲ et poule 🐔 décoratifs
     RETIRÉS sur téléphone (ils décalaient les boîtes), compteurs posés
     DANS la boîte à droite, les deux boîtes pleine largeur empilées. */
  .report-wrap, #pothole-bar {
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 0 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }
  #report-open, #pothole-open {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.86rem !important;
  }
  /* cône ▲ et poule 🐔 décoratifs : retirés sur téléphone (ils décalaient
     la boîte — la demande : les 2 boîtes PAREILLES, point). */
  #pothole-bar .ph-cone, #pothole-bar .ph-hen { display: none !important; }
  .report-wrap #report-count, #pothole-bar #pothole-count {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   v272.134 (batch-34) — LA MAQUETTE DE BOB (demo-2.jpg dessinée à la
   main le 01/10 au soir) — LE DEVANT DE L'APP SUR TÉLÉPHONE :
     rangée 1 : [MTL TRAFIC encadré]  FAQ  QUÉBEC  [Menu]
     rangée 2 : (🚧) [ Signaler une entrave .......... ] 999+
     rangée 3 : (🐔) [ Signaler un nid de poule ....... ]  10
     puis pub pleine largeur, la GRANDE carte, pub du bas fixée.
   Icônes et compteurs sont HORS des barres ; le bouton « Menu » ouvre
   la liste des icônes AVEC leur signification (sa demande du 30/09).
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 899px) { /* v272.142 : LA MAQUETTE MONTE AUX TABLETTES */
  /* — 1. RANGÉE DU LOGO : MTL TRAFIC encadré, FAQ, QUÉBEC, Menu —
     (le header passe en flex-wrap : rangée 1 = logo/prov/FAQ/Menu,
     rangée 2-3 = les deux barres via .header-actions pleine largeur) — */
  header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 8px 2px !important;
  }
  header .brand { order: 0 !important; }
  header .brand .tagline { display: none !important; }
  header .brand .logo {
    display: inline-block !important;
    border: 2.5px solid currentColor !important;
    border-radius: 8px !important;
    padding: 2px 6px 3px !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  /* ordre de la maquette : MTL TRAFIC · FAQ · QUÉBEC · [Menu à droite] */
  header > .brand-prov { display: inline-flex !important; align-items: center; order: 2 !important; margin: 0 !important; }
  header > .brand-prov .province-select {
    max-width: 64px !important; height: 32px !important;
    font-size: 0.74rem !important; padding: 2px 2px !important;
  }
  header > .brand-prov .prov-gps-btn { display: none !important; } /* le GPS vit dans le Menu */
  .header-legacy {
    display: inline-flex !important; align-items: center; gap: 0.4rem !important;
    order: 1 !important; margin: 0 !important;
  }
  .header-legacy .lang-menu, .header-legacy .theme-toggle { display: none !important; }
  .header-legacy .btn-secondary { font-size: 0.74rem !important; padding: 0.3rem 0.45rem !important; min-height: 32px !important; }
  .header-tools { display: inline-flex !important; order: 3 !important; margin: 0 0 0 auto !important; }
  /* .header-actions (les 2 barres) forme la rangée du dessous, pleine largeur */
  .header-actions {
    order: 4 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .header-more {
    width: auto !important; height: 32px !important;
    padding: 0 0.55rem !important;
    font-size: 0.74rem !important; font-weight: 800;
    border-radius: 999px !important;
    align-self: center !important;
  }
  .header-more-menu {
    top: calc(100% + 8px) !important; right: 8px !important;
    min-width: 240px !important;
    max-height: min(76vw, 480px);
    overflow-y: auto;
  }
  .hm-row b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px; flex: 0 0 32px;
    background: rgba(255, 122, 0, 0.14);
    border-radius: 7px;
    font-size: 0.95rem;
  }
  .hm-title {
    padding: 0.4rem 0.6rem 0.2rem;
    font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase;
    opacity: 0.6;
  }
  /* — 2. LES DEUX BARRES DE LA MAQUETTE : icône HORS barre à gauche,
      compteur HORS barre à droite (999+ / 10) — */
  .report-wrap, #pothole-bar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 2px !important;
    margin: 4px 0 0 !important;
    gap: 7px !important;
    box-sizing: border-box !important;
  }
  #pothole-bar { margin-top: 6px !important; }
  .report-wrap::before { content: "\1F6A7"; font-size: 17px; line-height: 1; flex: 0 0 auto; }
  /* maquette : la POULE à GAUCHE de sa barre (pas de cône décoratif) */
  #pothole-bar .ph-cone { display: none !important; }
  #pothole-bar .ph-hen { display: inline-flex !important; order: -1 !important; font-size: 17px !important; animation: none !important; flex: 0 0 auto !important; }
  #report-open, #pothole-open {
    flex: 1 1 auto !important;
    height: 40px !important; min-height: 40px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.84rem !important;
  }
  .report-wrap #report-count, #pothole-bar #pothole-count {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-width: 30px !important;
    height: 20px !important;
    font-size: 0.72rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .header-actions { row-gap: 6px !important; padding-bottom: 6px !important; }
  /* le bouton ⋯/✕ de la rangée bas de carte : remplacé par le Menu */
  html.menu-icons-on .map-bottom-collapse { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   v272.137 (sprint final) — 1. LA POULE DESSINÉE (l'emoji 🐔 rendait
   mal sur les fonds sombres) ; 2. le bouton 🧪 Simuler dans la barre
   de tournée (simulateur complet de livraison de Bob) ; 3. LA PUB
   PRÉ-ENTRÉE (plein écran 5 s, fermable, avant la page d'accueil).
   ═════════════════════════════════════════════════════════════ */
/* 1. POULE SVG : ne jamais étirer l'emoji, laisser respirer le dessin */
#pothole-bar .ph-hen svg { display: block; }
#pothole-bar .ph-hen svg, #pothole-bar .ph-hen svg * { animation: none !important; }

/* 2. BOUTON 🧪 SIMULER (barre de tournée) */
.rp-tourbar .rp-tb-sim {
  border: 1.5px solid rgba(46, 134, 222, 0.55);
  color: #1c6dd0;
  background: rgba(46, 134, 222, 0.08);
  font-weight: 800;
}
.rp-tourbar .rp-tb-sim:active { transform: scale(0.97); }

/* 3. PUB PRÉ-ENTRÉE — écran du sponsor avant l'accueil, 5 s */
#pre-ad {
  position: fixed; inset: 0; z-index: 2950;
  background: rgba(9, 13, 24, 0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
#pre-ad .pre-inner {
  width: 100%; max-width: 420px; max-height: 86vh; overflow: hidden;
  border-radius: 18px;
  background: var(--panel, #fff);
  box-shadow: 0 24px 70px -18px rgba(0,0,0,.65);
}
#pre-ad .pre-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.7rem;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; opacity: 0.55;
}
#pre-ad .pre-ad-body { padding: 0 0.6rem 0.6rem; max-height: 60vh; overflow: hidden; }
#pre-ad .pre-count {
  margin: 0.2rem auto 0.7rem;
  display: block; width: max-content;
  font-size: 0.72rem; font-weight: 800;
  background: rgba(255, 122, 0, 0.14); color: #b45309;
  border-radius: 999px; padding: 0.3rem 0.75rem;
}
#pre-ad .pre-btn {
  display: block; margin: 0 auto 0.8rem;
  min-width: 200px; padding: 0.65rem 1.2rem;
  border: none; border-radius: 999px;
  background: linear-gradient(160deg, #ff7a00, #e8632c);
  color: #fff; font: inherit; font-weight: 800; font-size: 0.92rem;
  cursor: pointer; box-shadow: 0 8px 22px -8px rgba(232, 99, 44, 0.8);
}
/* — 3. LES ICÔNES ÉPARPILLÉES DE LA CARTE ENTRENT DANS LE MENU —
   (≤ 899px, comme la rangée pliable v272.119 ; le 🧭 Nav et le ☰
   Toutes les options restent SUR la carte, eux.) */
@media (max-width: 899px) {
  html.menu-icons-on #fab-locate, html.menu-icons-on #fab-traffic,
  html.menu-icons-on #fab-layers, html.menu-icons-on #fab-transport,
  html.menu-icons-on #fab-safety, html.menu-icons-on #fab-planner,
  html.menu-icons-on #voice-btn, html.menu-icons-on #traffic-live-btn {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   v272.139 (Bob, dictée du 02 oct au soir) — LE GRAND RANGEMENT :
   1. LES BOUTONS QUI RESTENT REVIENNENT RONDS (l'octogone reste
      réservé au panneau STOP #nav-stop-fab, exception demandée) ;
   2. rangée 1 = logo · menu-1 · QUÉBEC · menu-2 (la FAQ vit dans
      menu-1) ; le bouton JAUNE ☰ de la carte monte devenir menu-2 ;
   3. la lune 🌙 vit SUR la carte (ronde, déplaçable au doigt) ;
   4. sur téléphone la barre d'outils de la carte se replie (0 px) :
      la carte monte (~¾ de pouce) et la pub du bas respire ;
   5. le compteur du bas passe AU-DESSUS de la pub.
   ═════════════════════════════════════════════════════════════ */

/* — 1. BOUTONS RONDS (famille carte) — SAUF le panneau STOP — */
.map-fab, .fab-float, .fab-float-page, #planner-nav-chip, #nav-go-btn,
.mtl-zoom-h .zh-btn, .nav-banner .nav-mini, .rp-tourbar .rp-chip, #mtl-back {
  clip-path: none !important;
  border-radius: 50% !important;
}
#gps-chip, #planner-nav-chip, #nav-go-btn, .rp-tourbar .rp-chip {
  border-radius: 999px !important;
}
/* — 3. LA LUNE SUR LA CARTE — coin haut-gauche, déplaçable — */
#map .moon-fab {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  z-index: 1210;
  font-size: 1.05rem;
}
/* — 5. LE COMPTEUR DU BAS NE SE FAIT PLUS MANGER PAR LA PUB — */
#live-count { z-index: 1450 !important; }

@media (max-width: 899px) { /* v272.142 */
  /* — 2. RANGÉE 1 : logo · menu-1 · QUÉBEC · menu-2 (FAQ dans menu-1) — */
  .header-legacy .btn-secondary[href*="faq"] { display: none !important; }
  .header-legacy { gap: 0.35rem !important; }
  #fab-more.header-menu2 {
    width: auto !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 0.6rem !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    background: #f29900 !important;
    color: #fff !important;
    border-radius: 999px !important;
    clip-path: none !important;
    align-self: center !important;
    white-space: nowrap;
  }
  /* — 4. LA BARRE D'OUTILS DE LA CARTE SE REPLIE : LA CARTE MONTE.
     Ses menus déroulants (#mobile-actions « menu-2 », #layer-menu)
     restent utilisables : absolus, débordent d'une barre à 0 px. — */
  .map-topbar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    flex: 0 0 0 !important;
  }
  .map-topbar > #fab-nav { display: none !important; } /* le 🧭 vit dans menu-2 → « 🧭 Navigation » */
  #map { min-height: 372px !important; } /* 300 + ~72 px (¾ de pouce) */
}

/* ═════════════════════════════════════════════════════════════
   v272.139b (correctifs MESURÉS en direct 320×783, livrés en 272.140) :
   1. une règle `#map .map-fab` plus spécifique gardait l'octogone →
      on riposte à la même spécificité : les boutons de carte sont RONDS
      (le STOP #nav-stop-fab n'est PAS .map-fab : il garde son octogone) ;
   2. le cône du bouton « Signaler une entrave » : le ::before 🚧 est
      remplacé par un vrai petit cône orange (span .ph-cone) ;
   3. rangée 1 compactée : logo · menu-1 · QUÉBEC · menu-2 tiennent
      sur UNE seule ligne à 320 px (mesuré : menu-2 passait à la ligne) ;
   4. le scrollbar de <main> volait 17 px à la carte (303 au lieu de 320) :
      masqué comme ceux de html/body.
   ═════════════════════════════════════════════════════════════ */
#map .map-fab, #map .moon-fab, #map .recenter-fab, #map .fs-fab,
#map .gps-chip, #map .traffic-live-btn, #map .buffy-badge {
  clip-path: none !important;
}
#map .map-fab, #map .moon-fab, #map .recenter-fab, #map .fs-fab {
  border-radius: 50% !important;
}
#map .gps-chip { border-radius: 999px !important; }
main { scrollbar-width: none; }
main::-webkit-scrollbar { width: 0; height: 0; }

/* — 2. LE CÔNE ORANGE (hors téléphone : caché, le ::before n'existe pas) — */
.report-wrap .ph-cone { display: none; }

@media (max-width: 899px) { /* v272.142 : le cône vit aussi sur tablette */
  .report-wrap::before { content: none !important; }
  .report-wrap .ph-cone { display: inline-flex !important; align-items: center; flex: 0 0 auto; }
  .report-wrap .ph-cone i {
    display: block; width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid #ff7a00;
    border-radius: 2px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  }
}

/* — 3. RANGÉE 1 COMPACTE (téléphone seul : les 4 tiennent sur une ligne à 320 px) — */
@media (max-width: 560px) {
  header { gap: 3px !important; padding: 8px 5px 2px !important; } /* v272.143 : place pour Québec 72px */
  header .brand .logo { font-size: 0.8rem !important; padding: 2px 5px 3px !important; }
  .header-more { height: 30px !important; font-size: 0.7rem !important; padding: 0 0.42rem !important; }
  #fab-more.header-menu2 { height: 30px !important; min-height: 30px !important; min-width: 0 !important; font-size: 0.7rem !important; padding: 0 0.42rem !important; }
  header > .brand-prov .province-select { max-width: 72px !important; height: 30px !important; font-size: 0.7rem !important; } /* v272.143 : « Québeı » tronqué (capture 09h32) → 72px */
}

/* ═════════════════════════════════════════════════════════════
   v272.140b (correctifs MESURÉS en direct, livrés en 272.141) :
   1. LA PUB DU BAS ÉTAIT SOUS LA LISTE : #sidebar (z 1000, flex-item)
      peignait PAR-DESSUS #map-wrap (z 900) qui contient la pub fixée
      (z 1400 confiné dans son contexte). #map-wrap passe à 1100 → la
      pub fixée et les boutons de carte gagnent (preuve elementsFromPoint
      du 02 oct 03h00 : le chip « Rue fermée » au-dessus de .slot-bottom).
      Les modales/STOP/bannière sont enfants de BODY : toujours au-dessus.
   2. « Quét » → « Québec » : le select de province reprend 66 px
      (la rangée 1 tient toujours : 108+55+66+63+12 = 304 ≤ 308).
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  #map-wrap { z-index: 1100 !important; }
}

/* ═════════════════════════════════════════════════════════════
   v272.142 (03 oct) — 1. NAV PROPRE : la boîte noire de 08h03 montrait
   le bandeau #nav-banner (127px) recouvrant gps-chip, recenter, la
   barre nids ET la rangée 1. En navigation : le bandeau RÈGNE, les
   contrôles utiles descendent SOUS lui, le header s'efface.
   2. TABLETTES 561-899px (la 800×1100 de Bob) : la maquette du
   téléphone en GRAND — tailles confortables au pouce.
   ═════════════════════════════════════════════════════════════ */

/* — 1. NAV PROPRE (toutes tailles : le bandeau existe partout) — */
html.nav-mode header { display: none !important; }
html.nav-mode #fab-recenter,
html.nav-mode #gps-chip,
html.nav-mode .moon-fab {
  top: calc(127px + 0.55rem) !important;
  bottom: auto !important;
}
html.nav-mode .map-topbar {
  height: 0 !important; min-height: 0 !important; padding: 0 !important;
  margin: 0 !important; border: 0 !important; background: transparent !important;
  flex: 0 0 0 !important;
}
/* v272.248 (boîte noire tournée 13 oct : #nav-banner×#fab-more 1320px²,
   ×22 evts) — le sélecteur  .map-topbar > #fab-more  laissait un fab
   DÉPLACÉ par le drag (remonté dans le body, fab-float-page) : le ☰
   restait visible au-dessus du bandeau. On le cache OÙ QU'IL SOIT :
   en nav, « toutes les options » vit dans le bandeau, pas sur la carte. */
html.nav-mode #fab-more,
html.nav-mode .map-topbar > #fab-nav { display: none !important; }
/* v272.144 (audit nav du 02 oct : recenter×gps 1444px² quand les
   souvenirs de drag se superposent) — en NAV, colonnes déterministes :
   conduire > déplacer. Hors nav, le drag reste roi. */
/* v272.193 : :not(.fab-float/-page) — le bouton DÉTACHÉ par Bob doit
   échapper à ce verrou, sinon son style inline de drag est écrasé
   par le !important et il reste immobile en nav/livraison. */
html.nav-mode #gps-chip:not(.fab-float):not(.fab-float-page) { left: 0.55rem !important; }
html.nav-mode #fab-recenter:not(.fab-float):not(.fab-float-page) { left: calc(0.55rem + 48px) !important; }
/* v272.153 (captures TABLETTE 05 oct 00h18-00h22 : en nav et en livraison,
   la colonne statique gauche (⛶ écran, 🚦 compteur, 🚌, ⚡, 🌙) reste plantée
   EN HAUT et EMPIÈTE sur la bande noire du bandeau nav ; Bob : « ils servent
   à rien, bougent pas, empêtent en haut sur la bande noire ». En nav, ces
   boutons ont TOUS leur doublon DANS le bandeau (🔊 🎯 📋 ⛔) : on les cache
   (toutes tailles, le bandeau existe partout). 🎯 recenter et 🛰️ GPS restent
   SOUS le bandeau (règle ci-dessus). Les boutons détachés par Bob (fab-float)
   restent où il les a mis. */
html.nav-mode #fab-fullscreen,
html.nav-mode .fab-transport,
html.nav-mode .fab-safety,
html.nav-mode .voice-btn,
html.nav-mode .moon-fab { display: none !important; }
/* 🚦 traffic-live-btn (bouton panneau Trafic en direct, colonne gauche)
   n'est PAS visé par ces cacheries : ≤899px le règle menu-icons-on
   v272.139 le cache déjà (il vit dans le Menu), ≥900 il reste sur la
   carte. Le compteur « N entraves · N dans la vue » = .live-count,
   TOUCHE JAMAIS — Bob s'en sert en tournée. */
html.nav-mode .fab-transport:not(.fab-float):not(.fab-float-page),
html.nav-mode .fab-safety:not(.fab-float):not(.fab-float-page),
html.nav-mode .voice-btn:not(.fab-float):not(.fab-float-page),
html.nav-mode .moon-fab:not(.fab-float):not(.fab-float-page) { display: none !important; }
html.nav-mode #fab-fullscreen:not(.fab-float):not(.fab-float-page) { display: none !important; }
/* LIVRAISON (tour-on, PAS en nav) sur TABLETTE ≤899 : même colonne gênante
   devant la maquette en grand → mêmes 4 boutons cachés (livraison ≠ nav :
   le bandeau n'existe pas, mais 🚌/⚡/⛶/🚦 n'y ont rien à faire pendant
   une tournée ; le drag de Bob reste roi hors tournée).
   (demande Bob : « servent à rien » → cachés SANS exception, même si
   un vieux souvenir de drag les avait détachés). */
html.tour-on:not(.nav-mode) .fab-transport,
html.tour-on:not(.nav-mode) .fab-safety,
html.tour-on:not(.nav-mode) #fab-fullscreen,
html.tour-on:not(.nav-mode) .moon-fab { display: none !important; }

/* — 2. TABLETTES 561-899 : la maquette en grand — */
@media (min-width: 561px) and (max-width: 899px) {
  .map-ad.slot-top { max-height: 78px !important; }
  .map-ad.slot-top .ad-slot, .map-ad.slot-top [class*="slot"] { max-height: 78px !important; }
  .map-ad.slot-top img { max-height: 72px !important; width: auto !important; }
  header { gap: 8px !important; padding: 10px 12px 4px !important; }
  header .brand .logo { font-size: 1.02rem !important; padding: 3px 8px 4px !important; }
  .header-more, #fab-more.header-menu2 {
    height: 38px !important; min-height: 38px !important;
    font-size: 0.85rem !important; padding: 0 0.8rem !important;
  }
  header > .brand-prov .province-select { max-width: 120px !important; height: 38px !important; font-size: 0.85rem !important; }
  .header-legacy .btn-secondary { font-size: 0.85rem !important; min-height: 38px !important; }
  #report-open, #pothole-open {
    height: 48px !important; min-height: 48px !important;
    font-size: 1rem !important;
  }
  .report-wrap .ph-cone i {
    border-left-width: 9px; border-right-width: 9px; border-bottom-width: 16px;
  }
  .report-wrap #report-count, #pothole-bar #pothole-count { font-size: 0.8rem !important; min-width: 36px !important; }
  #map { min-height: 420px !important; }
}

/* ============================================================
   v272.150 — PAYSAGE 900-1279 × HAUTEUR < 640 (tablette au
   camion, 960×480) — Buffy 02 oct soir, MESURES live dans le
   preview : .mode-seg débordait à right:1031px pour 943px
   visibles (rangée d'icônes coupée + scrollbar horizontale),
   les mini-compteurs .mc-item filaient jusqu'à 1278px, et des
   .ad-slot flottaient SUR la carte (373,348 · 135×109). La
   rangée des modes WRAPPE, les mc-item décoratifs sautent, les
   pubs latérales libèrent la carte — bande ÉTROITE en hauteur
   seulement : téléphone (≤899) et bureau (≥640 de haut ou
   ≥1280) ne changent pas d'un pixel.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1279px) and (max-height: 640px) {
  .map-topbar { flex-wrap: wrap !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; row-gap: .3rem; }
  .mode-seg { flex-wrap: wrap; max-width: 100%; }
  .map-topbar .mc-item { display: none !important; }
  .ad-slot { display: none !important; }
}

/* ============================================================
   v272.150 — UNIFORMITÉ DES 2 BOÎTES « SIGNALER » (Bob, 02 oct
   ~22h50 : « les mettre dans la même couleur de noir et la même
   largeur ») — MESURES live 320×783 : #report-open en dégradé
   violet-noir (135deg, 18,16,31 → 35,21,66) vs #pothole-open en
   dégradé bleu-marine (160deg, 15,26,43 → 26,43,69) ; largeurs
   240 vs 239 et décalage x 28 vs 37 (le cône 🚧 est HORS du
   bouton entrave, la poule 🐔 est DANS le sien). Désormais : le
   MÊME noir-violet de marque pour les deux, le cône rejoint le
   bouton (comme la poule), et les deux boutons en flex:1 →
   mêmes x, même largeur, même bord droit, à toutes largeurs.
   ============================================================ */
#report-open, #pothole-open {
  background-image: linear-gradient(135deg, rgb(18,16,31) 0%, rgb(28,21,51) 55%, rgb(35,21,66) 100%) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* ═════════════════════════════════════════════════════════════
   v272.152 (Bob, 05 oct) — LES DEUX BULLES EXACTEMENT SOEURS :
   chaque icône DANS sa bulle (le cône pour l'entrave, la poule
   pour le nid-de-poule), ZÉRO icône qui traîne à côté → mêmes x,
   même largeur, un seul iconé par bulle. Mesuré avant : boutons
   x 28 vs 37, largeurs 240 vs 239 (le cône-span volait 21 px).
   ============================================================ */
@media (max-width: 899px) {
  .report-wrap .ph-cone { display: none !important; } /* le cône vit DANS #report-open::before (déjà en place) */
  #pothole-bar .ph-hen { display: none !important; } /* la poule entre DANS la bulle */
  #pothole-open::before {
    content: "\1F414" !important;
    display: inline-flex !important;
    align-items: center;
    margin-right: 7px;
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .report-wrap #report-open, #pothole-bar .pothole-open-btn { flex: 1 1 auto !important; width: auto !important; }
  /* les 2 COMPTEURS à la même largeur (38 vs 30 mesurés) → boutons identiques */
  .report-wrap #report-count, #pothole-bar #pothole-count { min-width: 38px !important; flex: 0 0 38px !important; width: 38px !important; }
}
@media (max-width: 899px) {
  .report-wrap::before { display: none !important; }
  #report-open::before { content: "\1F6A7" !important; display: inline-flex !important; align-items: center; margin-right: 7px; font-size: 17px; line-height: 1; flex: 0 0 auto; }
  .report-wrap, #pothole-bar { display: flex !important; }
  .report-wrap #report-open, #pothole-bar .pothole-open-btn, #pothole-open { flex: 1 1 auto !important; width: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   v272.159 — BANDEAU CLÉ 🔑 (bas de l'écran, toute taille d'écran)
   Bob vend l'app : le client tape SA clé (mois/3/6/12/vie).
   ══════════════════════════════════════════════════════════════ */
.lic-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 1300;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 0.5rem 1rem; font: 600 0.78rem/1.2 var(--font-display, sans-serif);
  color: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
  max-width: calc(100vw - 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lic-none { background: linear-gradient(150deg, #ef4444, #b91c1c); }
.lic-ok   { background: linear-gradient(150deg, #16a34a, #15803d); }
.lic-bar .lic-x { background: rgba(255,255,255,.18); border: 0; color: #fff; border-radius: 50%; width: 20px; height: 20px; margin-left: 6px; font-size: 11px; cursor: pointer; }

.lic-modal { position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 1rem; }
.lic-modal.open { display: flex; }
.lic-card { background: #fff; border-radius: 18px; padding: 1.2rem; max-width: 340px; width: 100%; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.lic-head { font: 800 1.05rem/1.2 var(--font-display, sans-serif); margin-bottom: .3rem; }
.lic-sub  { font: 500 .78rem/1.35 var(--font-body, sans-serif); color: #555; margin-bottom: .8rem; }
.lic-input { width: 100%; box-sizing: border-box; border: 2px solid #e5e7eb; border-radius: 10px; padding: .6rem .7rem; font: 700 .9rem/1 monospace, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.lic-input:focus { border-color: #f97316; outline: none; }
.lic-msg { min-height: 1.4rem; font: 600 .78rem/1.3 var(--font-body, sans-serif); margin: .5rem 0; color: #111; }
.lic-actions { display: flex; gap: .5rem; }
.lic-actions .lic-activate { flex: 1; border: 0; border-radius: 999px; background: linear-gradient(150deg, #f97316, #ea580c); color: #fff; font: 700 .85rem/1 var(--font-display, sans-serif); padding: .7rem; cursor: pointer; }
.lic-actions .lic-close { border: 0; border-radius: 999px; background: #f3f4f6; color: #111; font: 600 .85rem/1 var(--font-body, sans-serif); padding: .7rem .9rem; cursor: pointer; }

/* ============================================================
   v272.161 (batch-35, Bob) — PANNEAU COUCHES : X DE FERMETURE
   « quand les options s'ouvrent il faut mettre un petit x à
   droite pour pouvoir refermer sans problème ». Le X vit sur la
   rangée du titre (flex), ROND (règle d'or : seul le STOP est
   octogone), cible tactile ≥ 36px.
   ============================================================ */
.layer-menu-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.layer-menu-head .layer-menu-title { flex: 1; min-width: 0; }
.layer-menu .layer-close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(16,24,40,.14);
  background: #fff;
  color: #111827;
  font: 800 1rem/1 var(--font-display, sans-serif);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.layer-menu .layer-close:active { transform: scale(.92); }

/* ============================================================
   v272.161 (batch-35, Bob) — ZOOM +/− : GROS et RONDS
   « les boutons plus et moins sont faites ovale même mince, on
   peut pas mettre les doigts là-dessus ». CAUSE MESURÉE : v256
   les avait réduits à 44×36 px + le clip-path octogone v272 les
   creusait (aspect « ovale/mince »). Ici :
   • EXCLUS du clip-path octogone (règle d'or : tout est rond,
     seul le STOP est octogone) ;
   • 56×56 px (cible tactile ≥ 48 px, très au-dessus) ;
   • touch-action: manipulation = zéro délai de 300 ms au tap.
   ============================================================ */
.mtl-zoom-h { gap: 9px !important; }
.mtl-zoom-h .zh-btn {
  clip-path: none !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  font-size: 1.55rem !important;
  border: 2px solid rgba(16,24,40,.14) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.mtl-zoom-h .zh-btn:active { transform: scale(.94); }

/* ============================================================
   v272.161 (batch-35, Bob) — LES 5 BOUTONS DE LA NAVIGATION
   « il y en a la moitié dans la map, la moitié dans la bande
   noire ». CAUSE MESURÉE : .nav-actions est une colonne ABSOLUE
   ancrée en haut-droite — 5 boutons × 44 px = ~250 px de haut,
   alors que la bande noire en fait ~100 → ça débordait sur la
   carte. Ici : la rangée redevient UN FLUX normal de la bannière,
   HORIZONTALE, alignée à droite → tout dans la bande, rien sur
   la carte. (🔊 voix · ⏹ arrêter · 🎯 suivre · 📋 arrêts · ⚠️ cloche)
   ============================================================ */
.nav-banner { padding-bottom: 0.7rem; }
.nav-banner .nav-actions {
  position: static !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.5rem;
  width: 100%;
}
.nav-banner .nav-stats { padding-right: 0.4rem !important; }
.nav-banner .nav-turn { padding-right: 0.2rem; }

/* v272.161 (batch-35) — numéro des arrêts sur la carte (tooltip permanent) */
.rp-num { background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 800; font-size: .8rem; padding: 0; }
.rp-num::before { display: none; }

/* ============================================================
   v272.163 (batch-35, retour terrain Bob) — ZOOM : ROND SUR TOUT
   ÉCRAN, MÊME 320 px « les + et − sont encore ovales sur mon
   téléphone ». CAUSE MESURÉE : la règle v256 (44×36 px, style.css
   3587) re-gagnait sur mobile et recréait l'ovale ; l'override
   v272.161 vivait AVANT elle dans la cascade locale du téléphone.
   FIX : réécrit ICI, en TÊTE DE FILE (dernière feuille chargée +
   sélecteur triple), avec !important sur chaque axe — la forme
   ovale ne peut plus revenir, quel que soit l'écran.
   ============================================================ */
#map .mtl-zoom-h, .mtl-zoom-h { gap: 9px !important; }
#map .mtl-zoom-h .zh-btn, .mtl-zoom-h .zh-btn, .zh-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 50% !important;
  clip-path: none !important;
  font-size: 1.55rem !important;
  border: 2px solid rgba(16,24,40,.14) !important;
  touch-action: manipulation;
}

/* ============================================================
   v272.163 (batch-35, retour terrain Bob) — LES 5 BOUTONS NAV
   SUR LA MAP (PAS dans la bande noire)
   « je les voulais sur la map mais pas qu'ils touchent la bande
   noire en haut ». Ils déménagent : colonne verticale à droite
   DE LA CARTE, ancrée SOUS la bannière (top = hauteur bannière +
   marge), loin du bord haut. Chacun garde sa couleur v272.113.
   Ordre haut→bas : 🎯 suivre · 🔊 voix · 📋 arrêts · ⚠️ cloche ·
   ⏹ STOP (rouge, en bas = le plus dangereux, le plus loin du
   doigt qui navigue). Déplaçables au doigt comme les autres.
   ============================================================ */
.nav-banner .nav-actions {
  position: fixed !important;
  top: auto !important;
  bottom: 4.9rem;
  right: 0.6rem;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: flex-end;
  gap: 0.5rem;
  z-index: 1450;
}
/* La bannière reprend sa hauteur naturelle (plus de rangée interne) */
.nav-banner { padding-bottom: 0.8rem !important; }
.nav-banner .nav-stats { padding-right: 5.6rem !important; }
/* Boutons légèrement plus gros (au volant) + ombres pour lire sur la map */
.nav-banner .nav-mini {
  width: 3rem !important;
  height: 3rem !important;
  font-size: 1.25rem !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   v272.164 (batch-36, retour terrain Bob) — 4 fixes
   ============================================================ */
/* 1) ZOOM : 48 px (Bob : « un peu plus petits ») — double la règle 163
      qui forçait 56 px ; la DERNIÈRE règle !important gagne. */
.mtl-zoom-h .zh-btn, .zh-btn {
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; min-height: 48px !important;
  max-width: 48px !important; max-height: 48px !important;
  font-size: 1.3rem !important;
  border-radius: 50% !important; clip-path: none !important;
}
/* 2) FLÈCHE DU GUIDE : plus GROSSE et ORANGE (Bob : « ma flèche orange,
      fais-la plus grosse ») */
.user-dot.as-arrow .user-dot-core {
  width: 26px !important; height: 26px !important;
}
.user-dot.as-arrow .user-dot-core::after {
  border-left: 11px solid transparent !important;
  border-right: 11px solid transparent !important;
  border-bottom: 26px solid #ff7a1a !important;
  transform: translate(-50%, -52%) !important;
}
/* 3) AVATARE AU CHOIX : cône orange à bande noire (menu-2 → « Guide ») */
html[data-avatar="cone"] .user-dot.as-arrow .user-dot-core::after {
  content: "" !important;
  border: 0 !important;
  width: 24px !important; height: 24px !important; left: 50%; top: 50%;
  background: linear-gradient(180deg, #ff7a1a 0 62%, #151515 62% 100%) !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  transform: translate(-50%, -50%) !important;
}
/* 4) LA BULLE PUB SUR LA CARTE (#map-ads-slot — sponsor « + Votre pub
      ici ») : plus discrète, ancrée en BAS-GAUCHE au-dessus de la
      recherche, jamais au milieu de la carte. */
#map-ads-slot {
  position: absolute !important;
  left: 0.6rem !important; right: auto !important;
  bottom: 11.4rem !important; top: auto !important;
  width: min(210px, 62vw) !important;
  z-index: 900 !important;
}

/* ============================================================
   v272.165 (batch-37, retour terrain Bob)
   ============================================================ */
/* 1) LE ✕ de la bannière nav RETIRÉ (il cachait les chiffres — et le ⏹
      rouge arrête déjà tout) */
.nav-banner .nav-x { display: none !important; }
/* 2) Les X des menus : RONDS, coin HAUT-DROIT de la bulle, comme la
      bulle pub de la carte — plus jamais au milieu du menu */
.header-more-menu, .mobile-actions { position: relative; }
.hm-close, .ma-close {
  position: absolute !important;
  top: 0.4rem !important; right: 0.45rem !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important; color: #111 !important;
  font: 800 1rem/1 var(--font-display, sans-serif) !important;
  justify-content: center !important;
  border: 1px solid rgba(16,24,40,.14) !important;
  z-index: 5;
}
.hm-close span, .ma-close span { display: none !important; }
/* 3) Remonter un peu la pub du bas ET le bloc zoom (Bob) */
#map-ads-slot { bottom: 12.4rem !important; }
/* v272.191b (Bob) : le zoom redevient DÉPLAÇABLE — sa place PAR DÉFAUT
   est en bas CENTRÉ (au-dessus du STOP). Sans !important : le drag écrit
   left/top inline qui gagnent (octo-final est la dernière feuille). */
#mtl-zoom-h {
  right: 50%;
  left: auto;
  bottom: 8.6rem;
  transform: translateX(50%);
}

/* ============================================================
   v272.167 (batch-38, Bob furieux — 2 fixes attendus 10×)
   ============================================================ */
/* 1) HEADER TABLETTE : tout TASSÉ à côté du logo, fini les boutons
      envoyés aux 4 coins (menu-1 · Québec · menu-2 collés, gaps réduits) */
@media (min-width: 900px) {
  header { gap: 0.45rem !important; justify-content: flex-start !important; }
  header > * { margin: 0 !important; }
  header .brand { margin-right: 0.2rem !important; }
  header .brand-prov { margin: 0 0.2rem !important; }
  header .header-actions, header .header-legacy, header .header-tools {
    gap: 0.3rem !important; margin: 0 !important;
  }
}
/* ═════════════════════════════════════════════════════════════
   v272.293 (Bob : « s'adapte à toutes les tablettes 2020-2026 »)
  Sur les TABLETTES PAYSAGE 901-1359px : dans l'en-tête flex, la barre
   d'outils (.map-topbar : 6 boutons + modes + couleurs) était ÉCRASÉE
   à 72px par les voisins (flex-basis 0) → ses enfants débordaient
   hors écran (mesuré 1180×820 : scroll 1387, mode-seg coupé ;
   1300×900 : scroll 1450). Avec basis 100% elle prend SA PROPRE
   RANGEÉ, jamais l'asphyxie — à 1600px et plus rien ne change. */
@media (min-width: 900px) and (max-width: 1359px) {
  header .map-topbar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
  }
}
/* 2) MENU-1 : rangées propres et régulières (langues en grille 2×2,
      tout centré comme le reste — fini les petits blocs croches) */
.header-more-menu { min-width: 210px; }
.header-more-menu .hm-row {
  width: 100%; justify-content: flex-start;
  padding: 0.6rem 0.6rem !important; font-size: 0.92rem !important;
  border-radius: 10px;
}
.header-more-menu .hm-lang {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.4rem !important;
}
.header-more-menu .hm-lang .hm-row { justify-content: center !important; }

/* ============================================================
   v272.215 (Buffy, 12 oct — retour tablette de Bob, boîte noire
   18:43-18:44, écran 600x960 : "les boutons de zoom sont cachés
   en dessous de la publicité, les autres sont mal centrés, et il
   y a encore ces fameuses lignes pointillées qui quittent jamais,
   j'en veux pas").

   CAUSE 1 MESURÉE (zoom caché sous la pub sur TABLETTE) : la place
   par défaut du zoom (+/−/mode) n'existait QUE dans le media query
   téléphone (max-width 899px). Sur la tablette (maquette CSS
   600 px, la machine évaluant >=900), le bloc retombait sur la
   règle style.css v256 (44x36, en FLUX) et se repliait PARTIELLEMENT
   sous le pli "nid-de-poule" (mesuré y=167 h=48 à la fenêtre 960).
   FIX : la place CENTRÉE EN BAS est déclarée TOUTES LARGEURS
   (>=900 inclus) en DERNIER mot de la feuille — la tablette
   retrouve le zoom à sa place téléphone.

   CAUSE 2 MESURÉE (boutons "mal centrés") : ce sont les MÊMES
   règles qui, hors media query (>=900), laissaient le zoom et le
   STOP aux positions de la cascade bureautique (half-flat, à
   moitié pliés dans la pub). FIX : la place centrée (zoom + STOP)
   s'applique PARTOUT — plus aucun bouton "à moitié posé" quelque
   part.

   CAUSE 3 (les pointillés intempestifs) : traitée dans js/map3d.js
   v272.215 — le pointillé SERRÉ [2,2.4] px de la ligne de tournée
   devenait une bande hachurée illisible dès que la trace était
   longue : motif étendu à [0.9, 1.8] px (1 trait sur 3), largeur
   8 -> 6 px. La trace de tournée reste un pointillé CLAIR et
   reconnaissable, jamais une hachure qui ne dit rien.
   ============================================================ */
/* --- La place officielle du zoom, TOUTES LARGEURS (téléphone,
   tablette et bureau) : bas de l'écran, CENTRÉ, une rangée au-dessus
   du STOP, comme la maquette. Dernier bloc de la feuille : aucune
   règle antérieure (style.css v256 en flux, bottom 8.6rem, media
   query <=899) ne peut plus la renverser. --- */
#mtl-zoom-h {
  /* v272.226 — mesuré live : la chip #live-count x=10..223, y=634..666
     et le zoom x=67..253, y=639..695 → le zoom COUVRAIT la chip.
     Nouvelle plage : la chip reste en HAUT-CENTRE (sa place d'origine
     de style.css v23.8.1 : CENTRE-HAUT), le zoom reste en bas au-dessus
     de la pub — plus aucun chevauchement possible. */
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1450 !important;
}
/* v272.227 (Bob : « le mauve ordinateur et l'autre plein écran c'est
   2 modes plein écran — tu les laisses ensemble, et tu mets la LUNE
   entre les 2 ») — ordre haut-gauche : 🖥️ (haut), 🌙 (milieu),
   ⛶ (bas). Mesuré live : lune y=279, mauve y=325, ⛶ y=438 → remontée
   du mauve AU-DESSUS de la lune + remontée du ⛶ SOUS la lune. */
@media (max-width: 899px) {
  #map #map-only-fab {
    position: absolute !important;
    left: 0.7rem !important;
    right: auto !important;
    top: 0.7rem !important;
    bottom: auto !important;
    z-index: 940 !important;
  }
  #map .theme-toggle {
    position: absolute !important;
    left: 0.7rem !important;
    top: 3.55rem !important;
    bottom: auto !important;
  }
  #map #fab-fullscreen {
    position: absolute !important;
    left: 0.7rem !important;
    right: auto !important;
    top: 6.4rem !important;
    bottom: auto !important;
  }
  /* v272.235 (Bob, « demain matin je m'en vais sur la route ») : COLONNE
     GACHE SERRÉE — 🎯 et 🛰️ s'enchaînent juste dessous (gap 8 px),
     finie la place creuse entre ⛶ (bot 313) et 🎯 (y 389). */
  #map #fab-recenter {
    position: absolute !important;
    left: 0.7rem !important;
    top: 9.25rem !important;
    bottom: auto !important;
  }
  #map #gps-chip {
    position: absolute !important;
    left: 0.7rem !important;
    top: 12.5rem !important;
    bottom: auto !important;
  }
  /* v272.239 (Bob : « le zoom est encore à gauche, la moitié hors carte,
     un peu trop haute — centre-le au centre et plus bas ») — retour du
     zoom au CENTRE (rangée d'origine), plus bas qu'avant mais toujours
     au-dessus de la pub. */
  #mtl-zoom-h {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: calc(4.7rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1160 !important;
  }
  /* v272.235 (Bob : « à droite, le petit iceberg, comme il faut, à droite
     de la pastille des entraves ») : 🏔️ haut-DROITE, rangée du haut
     (la pastille des entraves vit juste à côté au centre-haut). */
  #map #map3d-fab {
    position: absolute !important;
    right: 0.7rem !important;
    left: auto !important;
    top: 0.7rem !important;
    z-index: 940 !important;
  }
  /* v272.237 (Bob : « le menu-1, fais-le EXACTEMENT comme le menu-2, les
     mêmes endroits, les mêmes angles, identique ») — le sous-menu copie
     la géométrie du panneau #mobile-actions (menu-2) : même rayon 16px,
     même ombre, même largeur min(320px, 100vw-1.6rem), même max-h 70vh,
     même défilement, même animation d'entrée. Seul le CONTENU reste
     différent (les infos du menu haut != outils carte). */
  #header-more-menu {
    width: min(320px, calc(100vw - 1.6rem)) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 6.45rem) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px -12px rgba(16, 24, 40, 0.35) !important;
    background: var(--panel, #fff) !important;
    border: 1px solid var(--line, #e4e7ec) !important;
    padding: 0.5rem !important;
    animation: maIn 0.16s ease !important;
    /* ouverture sous la pastille, comme la 235 : pas de recouvrement */
    top: 5.7rem !important;
    right: 0.7rem !important;
    left: auto !important;
    position: fixed !important;
    z-index: 3000 !important;
  }
  #header-more-menu > .hm-close {
    position: sticky !important;
    float: right;
    top: 0.35rem !important;
    right: auto !important;
    margin: 0 0 0.2rem 0.45rem !important;
    transform: none;
    z-index: 5 !important;
  }
  #header-more-menu .hm-row {
    display: flex !important; align-items: center !important; gap: 0.5rem !important;
    width: 100% !important; background: transparent !important;
    padding: 0.6rem 0.55rem !important; border-radius: 10px !important;
    animation: none !important;
  }
  #header-more-menu .hm-row:active { background: rgba(226, 73, 47, 0.08) !important; }
  #header-more-menu .hm-sep { height: 1px !important; background: var(--line, #e4e7ec) !important; margin: 0.2rem 0.5rem !important; }
  #mobile-actions { position: fixed !important; top: 5.7rem !important; left: 0.7rem !important; right: 0.7rem !important; width: auto !important; max-height: calc(100vh - 6.45rem) !important; z-index: 2990 !important; }
}
/* v272.223d : règle #geo-btn fixed RETIRÉE — mesuré live : le � Authorized
   est piégé par le backdrop-filter du .toolbar (contient les fixed) :
   le fixed le projetait SOUS l'écran (y=1018 sur 783). Retour à l'état
   connu (static dans .search-row). Si Bob le veut plus haut un jour :
   passer par la hauteur du champ et non par un fixed. */
/* TABLETTE + BUREAU (>=900px) : la même place, mesurée 600x960 —
   la version tablette d'avant (44x36 style.css v256) devient la
   même taille que le téléphone (48 px). */
@media (min-width: 900px) {
  #mtl-zoom-h {
    position: fixed !important;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mtl-zoom-h .zh-btn {
    width: 48px !important; height: 48px !important;
    min-width: 48px !important; min-height: 48px !important;
    max-width: 48px !important; max-height: 48px !important;
    border-radius: 50% !important; clip-path: none !important;
    font-size: 1.3rem !important;
  }
}
/* EN NAV, le zoom reste au-dessus de la bannière (hérité v272.94). */
html.nav-mode body #mtl-zoom-h, html.nav-mode #mtl-zoom-h {
  display: flex !important;
  z-index: 1450 !important;
}

/* ============================================================
   v272.249 (Bob, 14 oct : « mes boutons de zoom + et - et l'icone sont
   trop mal places sur la carte — centre-les a la verticale a droite
   sur la map, au milieu, et a la meme grosseur que les autres boutons »)
   — LA PLACE FINALE du bloc zoom (+ / − / mode) : CÔTÉ DROIT de la
   carte, CENTRÉ VERTICALEMENT. Dernier bloc de la feuille : il gagne
   sur les deux places de la cascade (téléphone 1601, bureau 1661).
   Taille : 40 px sur téléphone = CELE des .map-fab de la carte
   (v272.164 posait 48 EN LIGNE côté JS : zoom-h.js écrit maintenant
   40 px ≤899, 48 px ≥900 — voir zoom-h.js build()).
   Le drag garde l'avantage : quand Bob a glissé le bloc, left/top
   inline écrasent la place par défaut.
   ============================================================ */
#mtl-zoom-h {
  position: fixed !important;
  left: auto !important;
  right: 0.55rem !important;
  top: calc(50% - 1.3rem) !important;  /* milieu VRAI de la carte (header/Ewert mesurés 320x783) */
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1450 !important;
}
@media (max-width: 899px) {
  #map #mtl-zoom-h .zh-btn, #mtl-zoom-h .zh-btn {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important;
    font-size: 1.12rem !important;
  }
  /* empilement vertical quand ça roule à droite : mesuré 320x783,
     3 x 40 + 2 x 6 gap = 132 px — jamais au delà de la moitié d'écran */
  #mtl-zoom-h { flex-direction: column !important; gap: 6px !important; }
}

/* ============================================================
   v272.249 (Bob, 14 oct : « en mode livraison et navigation sur le
   téléphone, arrange dans la pastille noire les textes de la vitesse,
   temps, kilométrage et ETA tout sur la même ligne — des fois ça tombe
   sur deux lignes, agrandit la boîte et cache mon bouton coffre à
   outils »). CAUSE MESURÉE : .nav-stats en flex avec gap 1.1rem +
   paddings 5.6/3.6rem à 320 px → les 4 valeurs ne tiennent pas →
   retour à la ligne → la bannière grossit → écrase le 🧰 (fixed
   top 7rem, z-index 1460 SOUS la bannière 1500). UNE LIGNE : nowrap,
   gaps/paddings serrés mesurés 320x783 (voir captures session).
   ============================================================ */
.nav-banner .nav-stats {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible;
  gap: 0.3rem !important;
  /* marges négatives : la ligne de stats utilise TOUTE la largeur de la
     bannière (les colonnes de boutons ne sont plus dedans depuis v272.163) */
  margin-left: -0.9rem !important;
  margin-right: -0.9rem !important;
  padding-left: 0.7rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: -0.2px;
  justify-content: flex-start;
}
.nav-banner .nav-stats span { white-space: nowrap; flex: 0 0 auto; }

/* ============================================================
   v272.169 (Bob, nuit du 06 oct) — 1) BOUTON 🧾 LISTE DES VIRAGES
   (navigation + livraison) : la liste complète des rues et virages,
   fermable par ✕. 2) OPTIONS DE ROUTE : la plus rapide / la plus
   courte (2-3 choix OSRM). 3) Les modes trafic NE CHANGENT PAS.
   ============================================================ */

/* ---- 1) Bouton 🧾 sur la carte + panneau liste ---- */
#nav-list-fab {
  position: absolute; right: 0.6rem; bottom: 15.2rem; z-index: 1600;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 2px solid #fff; background: #1a73e8; color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16,24,40,.35);
  display: flex; align-items: center; justify-content: center;
}
#nav-list-fab.hidden { display: none !important; }

#nav-steps {
  position: absolute; inset: auto 0.6rem 10rem 0.6rem; max-height: 40vh;
  z-index: 2900; background: #fff; color: #101828;
  border-radius: 14px; box-shadow: 0 8px 30px rgba(16,24,40,.4);
  overflow: hidden; display: none; flex-direction: column;
  touch-action: none; /* v272.175 : la carte ne pan plus à travers le panneau */
  font-family: inherit;
}
html.dark #nav-steps {
  background: #1d2939; color: #f2f4f7;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
#nav-steps.open { display: flex; }
#nav-steps .nvs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem .9rem; background: #1a73e8; color: #fff;
  font-weight: 700; font-size: .95rem;
}
#nav-steps .nvs-x {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(255,255,255,.18); color: #fff; font-size: 1rem;
  line-height: 1; cursor: pointer; flex: 0 0 auto;
}
#nav-steps .nvs-rows { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
#nav-steps .nvs-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .9rem; border-bottom: 1px solid rgba(16,24,40,.08);
  font-size: .92rem; line-height: 1.25;
}
html.dark #nav-steps .nvs-row { border-bottom-color: rgba(255,255,255,.09); }
#nav-steps .nvs-row.now { background: rgba(26,115,232,.12); font-weight: 700; }
html.dark #nav-steps .nvs-row.now { background: rgba(26,115,232,.3); }
#nav-steps .nvs-row.past { opacity: .45; }
#nav-steps .nvs-ico { flex: 0 0 1.7rem; text-align: center; font-size: 1.05rem; }
#nav-steps .nvs-dist { margin-left: auto; flex: 0 0 auto; color: #475467; font-variant-numeric: tabular-nums; font-size: .85rem; }
html.dark #nav-steps .nvs-dist { color: #98a2b3; }
#nav-steps .nvs-empty { padding: 1rem; text-align: center; color: #475467; }
html.dark #nav-steps .nvs-empty { color: #98a2b3; }

/* ---- v272.177 : la bande 🔑 verte ne RESTE PLUS sur l'écran (Bob :
   elle empiétait sur la pub et les boutons) — 5 s puis rangée ; mini 🔑 ---- */
.lic-bar { transition: transform .4s ease, opacity .4s ease; }
.lic-bar.lic-hide { transform: translateY(150%); opacity: 0; pointer-events: none; }
#lic-mini { position: fixed; left: .55rem; bottom: .55rem; z-index: 3100; width: 34px; height: 34px; border: 2px solid #065f46; border-radius: 50%; background: rgba(16,185,129,.92); color: #fff; font-size: 15px; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: pointer; padding: 0; font-family: inherit; }
#lic-mini.on { display: flex; }
.lic-modal .lic-remove { display: block; width: 100%; margin-top: .5rem; background: none; border: 0; color: #b91c1c; font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline; font-family: inherit; }

/* ---- 2) OPTIONS DE ROUTE : la plus rapide / la plus courte ---- */
#route-opts {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: .7rem;
  z-index: 1550; display: none; gap: .5rem; max-width: 94%;
}
#route-opts.show { display: flex; }
#route-opts .ro-opt {
  border: 2px solid #1a73e8; background: #fff; color: #1a73e8;
  border-radius: 999px; padding: .45rem .8rem; font-size: .82rem;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16,24,40,.25); font-family: inherit;
}
html.dark #route-opts .ro-opt { background: #1d2939; color: #9ecbff; border-color: #9ecbff; }
#route-opts .ro-opt.sel { background: #1a73e8; color: #fff; }
html.dark #route-opts .ro-opt.sel { background: #1a73e8; color: #fff; border-color: #1a73e8; }

@media (max-width: 899px) {
  #nav-steps { inset: auto 0.5rem 17rem 0.5rem; max-height: 48vh; }
  #route-opts { bottom: 8.2rem; }
}

/* ============================================================
   v272.170 — 📱 NOMMAGE D'APPAREIL + 🗣️ PANNEAU VOIX
   (portage EB Aviation : belles voix fluides, parlent pas trop vite)
   ============================================================ */
/* v272.217 (Bob : « elle disparaît puis je peux pas inscrire dedans ») :
   le dialog de nommage montant à z-index 5000 = au-dessus du STOP (3200),
   du ⬅ (3250), de la carte d'arrivée (3400) et des pubs (4000/4200) qui
   volaient le tap. Rien derrière ne reçoit plus le toucher. */
#mtl-devicename {
  position: fixed; inset: 0; z-index: 5000 !important;
  background: rgba(16,24,40,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#mtl-devicename .mdn-card {
  touch-action: auto; -webkit-tap-highlight-color: transparent;
}
#mtl-devicename input { background: #fff; }
html.dark #mtl-devicename input { background: #101828; }
#mtl-devicename .mdn-card {
  background: #fff; color: #101828; border-radius: 16px;
  max-width: 340px; width: 100%; padding: 1.2rem 1.1rem;
  box-shadow: 0 12px 40px rgba(16,24,40,.45); text-align: center;
  font-family: inherit;
}
html.dark #mtl-devicename .mdn-card { background: #1d2939; color: #f2f4f7; }
#mtl-devicename .mdn-ico { font-size: 2.2rem; margin-bottom: .3rem; }
#mtl-devicename h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
#mtl-devicename p { margin: 0 0 .8rem; font-size: .85rem; color: #475467; line-height: 1.4; }
html.dark #mtl-devicename p { color: #98a2b3; }
#mtl-devicename input {
  width: 100%; box-sizing: border-box; padding: .65rem .8rem;
  border: 2px solid #1a73e8; border-radius: 10px; font-size: 1rem;
  font-family: inherit; margin-bottom: .8rem;
}
#mtl-devicename .mdn-actions { display: flex; gap: .5rem; }
#mtl-devicename .mdn-save {
  flex: 1; border: 0; border-radius: 10px; padding: .65rem;
  background: #1a73e8; color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer;
}
#mtl-devicename .mdn-later {
  border: 2px solid #98a2b3; background: transparent; color: inherit;
  border-radius: 10px; padding: .65rem .8rem; font-size: .9rem; cursor: pointer;
}
/* v272.278 — LUCY : bouton 🎤 de la dictée vocale du nom (même
   dialog ; caché si l'appareil n'a pas de reconnaissance vocale). */
#mtl-devicename .mdn-mic {
  border: 2px solid #1a73e8; background: rgba(26,115,232,.08); color: #1a73e8;
  border-radius: 10px; padding: .65rem .8rem; font-size: .95rem; cursor: pointer;
}

/* ============================================================
   v272.171 — PANNEAU COPILOTE VOCAL (design FLITEPAD, palette
   MtlTrafic) : titre orange, Copilote : LUCY en gros, état voix
   (HORS-LIGNE ✓ vert), dropdown voix, 3 gros boutons, note.
   ============================================================ */
#mtl-vox-panel {
  position: fixed; inset: 0; z-index: 3200;
  background: rgba(16,24,40,.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 4.5rem 1rem 1rem;
}
#mtl-vox-panel .mvp-card {
  background: #ffffff; color: #101828; border-radius: 18px;
  max-width: 380px; width: 100%; padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 14px 44px rgba(16,24,40,.5); font-family: inherit;
  max-height: 80vh; overflow: auto;
}
html.dark #mtl-vox-panel .mvp-card { background: #101828; color: #f2f4f7; }
#mtl-vox-panel .mvp-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem;
}
#mtl-vox-panel .mvp-head span {
  font-weight: 800; font-size: 1.02rem; letter-spacing: .02em; color: #ff4d3d;
}
html.dark #mtl-vox-panel .mvp-head span { color: #ff6b57; }
#mtl-vox-panel .mvp-x {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
#mtl-vox-panel .mvp-cop { font-size: .95rem; color: #475467; margin-bottom: .2rem; }
html.dark #mtl-vox-panel .mvp-cop { color: #98a2b3; }
#mtl-vox-panel .mvp-cop b {
  color: #ff4d3d; font-size: 1.25rem; font-weight: 800; letter-spacing: .04em;
}
html.dark #mtl-vox-panel .mvp-cop b { color: #ff6b57; }
#mtl-vox-panel .mvp-state { font-size: .9rem; line-height: 1.35; margin-bottom: .7rem; color: #344054; }
html.dark #mtl-vox-panel .mvp-state { color: #d0d5dd; }
#mtl-vox-panel .mvp-state .mvp-ok { color: #199a4d; font-weight: 600; }
html.dark #mtl-vox-panel .mvp-state .mvp-ok { color: #2fe38a; }
#mtl-vox-panel .mvp-state .mvp-net { color: #d97706; font-weight: 600; }
#mtl-vox-panel #mvp-voice {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem; margin-bottom: .7rem;
  border: 2px solid #98a2b3; border-radius: 12px; font-size: .95rem;
  font-family: inherit; background: #fff; color: inherit;
}
html.dark #mtl-vox-panel #mvp-voice { background: #1d2939; }
#mtl-vox-panel .mvp-sample, #mtl-vox-panel .mvp-mic {
  width: 100%; border: 0; border-radius: 12px; padding: .8rem;
  margin-bottom: .55rem; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  cursor: pointer; background: #12813f; color: #fff;
}
#mtl-vox-panel .mvp-mic { background: #0f6b34; }
#mtl-vox-panel .mvp-sample:active, #mtl-vox-panel .mvp-mic:active { filter: brightness(1.12); }
#mtl-vox-panel .mvp-rename {
  width: 100%; border: 0; border-radius: 12px; padding: .75rem; margin-bottom: .6rem;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em; cursor: pointer;
  background: #eef2f6; color: #101828;
}
html.dark #mtl-vox-panel .mvp-rename { background: #1d2939; color: #f2f4f7; }
#mtl-vox-panel .mvp-rename-row { display: flex; gap: .5rem; margin-bottom: .6rem; }
#mtl-vox-panel #mvp-name-inp {
  flex: 1; min-width: 0; padding: .6rem .7rem; border: 2px solid #ff4d3d;
  border-radius: 10px; font-size: 1rem; font-family: inherit; background: #fff; color: inherit;
}
html.dark #mtl-vox-panel #mvp-name-inp { background: #1d2939; }
#mtl-vox-panel .mvp-rename-save {
  flex: 0 0 auto; width: 2.8rem; border: 0; border-radius: 10px;
  background: #ff4d3d; color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer;
}
#mtl-vox-panel .mvp-note { font-size: .76rem; color: #667085; margin: 0; line-height: 1.45; }
html.dark #mtl-vox-panel .mvp-note { color: #98a2b3; }

/* ============================================================
   v272.183 (FLUIDITÉ WAZE — demande Bob 06 oct : « fais comme
   Waze ») — VIEILLE TABLETTE ≤899px : l'ombre portée de 2 000
   cônes coûte cher en peinture sur GPU faible. Le look garde le
   triangle + la barre blanche ; l'ombre saute sur téléphone et
   tablette (invisible à cette taille), le PC la garde.
   ============================================================ */
@media (max-width: 899px) {
  .cone117 { filter: none; }
}

/* ============================================================
   v272.184 — SIGNALEMENTS COMMUNAUTAIRES 🚔 ⚠️ (chantier #6, Bob :
   « 4 bandes noires ») — rangée de 2 demi-bandes sous les
   nids-de-poule + icônes rondes sur la carte.
   ============================================================ */
#rep184-row { display: flex; gap: 8px; margin: 4px 0 0; }
/* ============================================================
   v272.240 (Bob) — BOUTON « INCIDENTS SUR LA ROUTE » en modes NAV et
   LIVRAISON : flottant sur la map, menu 5 options (entraves / poules /
   patrouilles / autres / tout ensemble). Caché en mode normal : les
   couches restent pilotées par la boîte 🚦 comme avant.
   ============================================================ */
.lm240-btn {
  position: absolute;
  /* v272.240b : bien positionné — bas-gauche de la carte, au-dessus du
     zoom ; la famille map-fab force display:flex !important partout
     (centre picto), donc on l'JOINTE avec la même force : caché par
     défaut (display:none !important), ré-affiché en nav/tour.
     v272.242 : left/right verrouillés !important (une règle générique
     .map-fab posait right:0.55rem qui gagnait — mesuré x=271). */
  left: 0.7rem !important;
  right: auto !important;
  bottom: 12.6rem !important;
  z-index: 1250 !important;
  width: 48px; height: 48px;
  border: 2px solid #ffd166;
  background: rgba(16,24,40,.92);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none !important;
  align-items: center; justify-content: center;
}
/* v272.242b (mesuré live : en nav, la règle générique .nav-mode .map-fab
   pose right:0.55rem !important — spécificité plus haute que .lm240-btn,
   le bouton retournait à droite x=271) — sélecteur de même poids :
   le bouton reste bas-GAUCHE en nav et en tournée. */
/* v272.243 : #map ajoute un ID → (1,2,1) : bat la position (0,3,0) de
   style.css .nav-mode .map-fab:not(...) qui tassait le bouton à droite. */
html.nav-mode #map .lm240-btn, html.tour-on #map .lm240-btn {
  display: flex !important;
  left: 0.7rem !important;
  right: auto !important;
  bottom: 12.6rem !important;
}
.lm240-btn:active { transform: scale(.94); }
#lm240-menu {
  position: absolute;
  left: 0.7rem;
  bottom: 17.4rem;
  z-index: 1250;
  min-width: 200px;
  background: rgba(16,24,40,.96);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6);
  padding: 0.35rem;
  display: none;
}
#lm240-menu:not([hidden]) { display: block !important; }
.lm240-title {
  font: 800 0.66rem/1 var(--font-display, sans-serif);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent, #e2492f);
  padding: 0.35rem 0.55rem 0.3rem;
}
.lm240-row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; color: #fff; font: inherit;
  font-weight: 700; font-size: .88rem;
  padding: .55rem .55rem; border-radius: 10px; cursor: pointer;
  text-align: left;
}
.lm240-row:active { background: rgba(255,255,255,.12); }
.lm240-row .lm240-e { flex: 0 0 auto; font-size: 1.05rem; }
.lm240-row .lm240-t { flex: 1 1 auto; }
.lm240-row .lm240-s { flex: 0 0 auto; font-size: .7rem; font-weight: 800; color: #7fd49b; }
.lm240-row:not(.on) .lm240-s { color: rgba(255,255,255,.45); }

.rep184-btn { flex: 1 1 0; min-width: 0; border: 0; background: #101828; color: #fff; font-weight: 700; font-size: .88rem; padding: 10px 6px; border-radius: 10px; cursor: pointer; }
.rep184-btn:active { transform: scale(.98); }
html.dark .rep184-btn { background: #1f2937; }

/* v272.227 (Bob) : LA PASTILLE TOURNANTE UNE RANGÉE — les 4 signalements
   (entrave / nid de poule / police / autre événement) défilent dans UNE
   pastille pleine largeur, avec le CHIFFRE dedans. On appuie quand le
   bon passe. Les vraies rangées restent dans le DOM (cachées) : les
   compteurs et les handlers continuent de vivre dedans. */
.rep-cycler {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; border: 0; background: #101828; color: #fff;
  font: inherit; font-weight: 800; font-size: .92rem;
  padding: .6rem .8rem; border-radius: 12px; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
html.dark .rep-cycler { background: #1f2937; }
.rep-cycler .rc-emoji { flex: 0 0 auto; font-size: 1.05rem; }
.rep-cycler .rc-label { flex: 1 1 auto; text-align: left; overflow: hidden; }
.rep-cycler .rc-count {
  flex: 0 0 auto; background: var(--accent, #e2492f); color: #fff;
  border-radius: 999px; padding: .12rem .5rem; font-size: .78rem;
  display: none;
}
.rep-cycler .rc-count.on { display: inline-flex; }

/* v272.230 (Bob) : l'attribution Leaflet passe PLEINE LARGEUR en bas de
   la map — tout au long du bas, plus de place gagnée au centre. */
/* v272.230b (mesuré live : l'attribution restait à w=176, coin w=176,
   x=-88 : le CSS interne de Leaflet met position:absolute + right:0 sur
   .leaflet-control-container .leaflet-corner — forcer left/right/w juste
   sur le coin n'a pas suffi (mesure le prouve) : forcer sur le CORRECT
   BAS-GAUCHE existant ou déplacer le contrôle DANS le DOM via JS Leaflet.
   Approche JSX sûre : position:fixed pleine largeur (le contrôle suit
   la carte, on l'ancre au bas de l'écran de la carte). */
.leaflet-control-container .leaflet-bottom.leaflet-right,
.leaflet-bottom.leaflet-right {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  /* v272.232b (mesuré live : le coin portait transform translateX(-88px)
     = une vieille règle de centrage qui le décalait hors écran) —
     transform annulé : pleine largeur réelle. */
  transform: none !important;
}
.leaflet-control-attribution {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 0.58rem !important;
  padding: 2px 4px !important;
}
/* v272.239 (Bob : « le bouton vert en bas à gauche avec la clé est
   TOUJOURS là — met-le dans le menu-1 en bas ») — le mini 🔑 (lic-mini)
   quitte l'écran en ≤899 ; la rangée 🔑 du menu-1 ouvre la même modale.
   Desktop ≥900 : le mini reste (rangée de bureau). */
@media (max-width: 899px) {
  #licence-bar { display: none !important; }
  #lic-mini { display: none !important; }
}
/* TÉLÉPHONE/TABLETTE (≤899) : la pastille tournante remplace les 4 rangées
   (entrave + nid de poule + police + autre) — les 2 rangées natives du
   haut sont cachées aussi : LEURS compteurs vivent dans la pastille. */
@media (max-width: 899px) {
  /* v272.227b (mesuré live : l'ID #rep184-row [ligne 1823] battait la
   classe .hidden-for-cycler → Police/Autre encore visibles) — sélecteur
   ID contre ID, la pastille gagne au ≤899. */
@media (max-width: 899px) {
  #rep184-row.hidden-for-cycler,
  .header-actions .report-wrap,
  #pothole-bar { display: none !important; }
}
/* BUREAU (≥900) : les rangées d'origine reviennent, la pastille dort. */
@media (min-width: 900px) {
  .rep-cycler { display: none !important; }
  #rep184-row.hidden-for-cycler { display: flex !important; }
}
.mtl-rep184-marker { background: transparent !important; border: none !important; }
.mtl-rep184 { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #101828; border: 2px solid #ffd166; border-radius: 50%; font-size: 15px; }

/* ============================================================
   v272.188 — BOB 00h20 : nav — la pastille livraisons mesurée 161×13
   (preuve 📐 boîte noire 04:16) ET PAR-DESSUS le bouton GPS (x=9) et le
   recentrer (x=57) → « les boutons répondent pas au doigt » : les taps
   tombaient sur la pastille ! Cause : la règle v272.112 (padding:0 +
   line-height:1) l'aplatissait. Correction : vraie hauteur 38 px,
   padding horizontal, position SOUS la rangée (jamais dessus).
   ============================================================ */
#planner-nav-chip {
  min-height: 38px !important;
  padding: 0 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}
/* v272.191b : top SANS !important — le compteur est déplaçable, le drag
   écrit top inline qui doit gagner. Le centrage horizontal par défaut
   est posé en fin de feuille (v272.191b). */
.nav-mode #planner-nav-chip {
  top: calc(8.2rem + 48px + env(safe-area-inset-top, 0px));
}

/* FLUIDITÉ 3 (Bob : « encore plus fluide, encore un peu saccadé ») :
   la liste d'entraves rend ~2 160 cartes <article> et le navigateur les
   peint toutes. content-visibility : celles hors écran coûtent ~zéro.
   Vieux navigateurs : règle ignorée, aucun risque. */
#list article {
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}

/* v272.189 — LE BOUTON 3D 🏔️ (map3d.js) : satellite + relief, dans le
   clan des map-fab (déplaçable au doigt comme les autres). */
#map3d-fab {
  position: absolute;
  right: 12px;
  /* v272.223 (Bob : « l'iceberg était en haut à droite avant sur la
     map, il est rendu en bas ») — mesuré live : top:263px = MILIEU de
     la carte. Remonté en HAUT-DROITE (1rem), aligné sur la lune. */
  top: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffd166;
  background: rgba(16,24,40,.9);
  color: #fff;
  font-size: 19px;
  z-index: 940;
  display: flex;
  align-items: center;
  justify-content: center;
}
#map3d-overlay { touch-action: none; }

/* v272.194 (Bob : « les 3 petits boutons blancs → un seul bouton 3D ») :
   CEINTURE DE SÉCURITÉ — même si map3d.js ne devait plus ajouter le
   NavigationControl, tout contrôle natif MapLibre (groupe blanc de
   zoom/boussole) dans la fenêtre 3D est masqué. Le pilotage 3D reste
   au doigt : pinch, drag, double-tap. */
#map3d-box .maplibregl-ctrl-group,
#map3d-box .maplibregl-ctrl-top-left,
#map3d-box .maplibregl-ctrl-top-right { display: none !important; }

/* v272.190 (Bob : « les 3 boutons bougent toujours pas au doigt ») —
   ROOT FIX : la décision scroll/pan du navigateur se prend au TOUCHSTART.
   La poser pendant pointerdown (v272.82) arrive trop tard sur certains
   navigateurs → pointercancel → le bouton « ne suit pas ». touch-action
   :none PERMANENT sur tout ce qui se glisse (les 3 du haut + ⬅ + 3D).
   Les STATIQUES (STOP, zoom) n'en ont pas besoin : ils ne glissent plus. */
.map-fab:not(.drag-locked), #gps-chip, #planner-nav-chip, #mtl-back {
  touch-action: none;
}

/* ═══════════════════════════════════════════════════════════
   v272.193 (07 oct, session express « avant de partir rouler »)
   ═══════════════════════════════════════════════════════════ */

/* 1. 🛰️ GPS-CHIP : même taille que les autres boutons (44px, comme le
      🎯 recenter à ses côtés). Avant : 38px dans la pastille ≤899px,
      demande Bob « le bouton GPS la même grosseur que les autres ». */
#map .gps-chip, html.nav-mode #gps-chip {
  width: 44px !important;
  height: 44px !important;
}

/* 2. 3D : le bouton 🗺️ Plan (top-left) EMPÊTAIT sur les 2-3 boutons
      blancs maplibre (contrôles de zoom, aussi top-left) → tassé à
      droite ET rendu DÉPLAÇABLE (drag.js SEL_FAB v272.193). */
#map3d-mode {
  left: 64px !important;
  touch-action: none;
}

/* 3. Liste des virages : le ✕ tombait SOUS le 🧰 (right:.6rem, top:7rem,
      z1460) — même coin. Le panneau remonte AU-DESSUS du coffre, son ✕
      est à nouveau atteignable d'un tap. */
#nav-steps {
  bottom: 7.8rem;
  z-index: 1480 !important;
}

/* 4. ▲▼ ⭐ des adresses : le navigateur DÉSIDAIT scroll/pan au touchstart
      sur la carte (ancêtre #map) au lieu du clic sur la flèche — le bouton
      « bougeait pas ». touch-action:manipulation sur les rangées du
      panneau tournée : les taps ▲▼/⭐/✕ passent, le scroll des listes
      reste naturel. */
#route-planner .rp-stop,
#route-planner .rp-move,
#route-planner .rp-mv,
#route-planner .rp-skip,
#route-planner .rp-del {
  touch-action: manipulation;
}

/* 5. PEIGNE FIN .193b — la 4ᵉ pastille (🏁 ETA) sur 320px : la rangée
      de stats passe proprement sur 2 lignes au lieu de se squeezer ;
      le chip livraison avec nom de route se coupe en ellipsis (jamais
      hors écran), la barre 3D pareil (ETA VISIBLE = rue à droite…). */
.nav-banner .nav-stats { flex-wrap: wrap; row-gap: 0.15rem; }
/* v272.261 (Bob : « la pastille des infos de livraisons, pleine largeur
   du téléphone ou presque ») — PLEINE LARGEUR et le texte retombe sur
   2 lignes proprement (plus d'ellipsis qui coupe le nom de l'arrêt). */
#planner-nav-chip {
  max-width: calc(100vw - 1.1rem);
  white-space: normal;
  overflow: hidden;
}

/* ============================================================
   v272.197 — MODE CARTE SEULE (Bob : « tout disparaît, seulement
   la GROSSE carte avec les icônes partout, et un ✕ pour revenir »)
   La classe body.map-only masque TOUT autour de la carte ; la carte
   prend toute la fenêtre. Les éléments sont cachés par style inline
   AUSSI (double ceinture) — le CSS ici garantit le rendu même si un
   bloc est recréé dynamiquement pendant le mode.
   ============================================================ */
body.map-only > header,
body.map-only > footer,
body.map-only #sidebar,
body.map-only #ad-top-slot,
body.map-only #map-ads-slot,
body.map-only .map-topbar,
body.map-only #pothole-bar,
body.map-only #mtl-urgent,
body.map-only .map-ad,
body.map-only .licence-bar,
body.map-only .mobile-spot {
  display: none !important;
}
body.map-only main {
  display: block !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.map-only #map-wrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 3000 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.map-only #map {
  width: 100% !important;
  height: 100% !important;
}
/* Le ✕ de sortie — clan map-fab (#ffd166 / #101828), coin haut-gauche,
   z-index AU-DESSUS de la carte et de la 3D, jamais recouvert. */
#map-only-close {
  position: fixed !important;
  /* v272.214 (Bob, test live 08 oct : « le X en mode entrave il empiète
     sur toutes les boutons, ils sont mal placées au centre ») — le ✕ et
     le compteur tombaient AU MILIEU de l'écran : drag.js avale le souvenir
     data-fab-pos (le doigt a déplacé LE ✕ une fois, ce souvenir écrase
     notre place coin haut-gauche à chaque ouverture). CEINTURES :
     ① left/top SANS transform ni transform-centering → jamais décalé de
       la moitié de sa largeur (le transform hérité du drag faisait
       glisser le bouton vers le centre) ;
     ② remember transform = none !important → le drag ne peut plus le
       tordre ;
     ③ RIEN ne doit reconstruire le ✕ avec un id en double — la création
       reste unique dans enterMapOnly (garde existante).
     La règle v272.191b (places concentriques bas-centre) ne doit JAMAIS
     s'appliquer au ✕ : il n'est PAS membre de la famille drag.js */
  top: calc(0.6rem + env(safe-area-inset-top, 0px)) !important;
  left: 0.6rem !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5000 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #ffd166 !important;
  background: rgba(16, 24, 40, 0.92) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6) !important;
  align-items: center !important;
  justify-content: center !important;
}
#map-only-close:active { transform: scale(0.94); }
/* v272.197b : le compteur « N entraves · N dans la vue » reste en carte
   seule (info utile) mais QUITTE le bas (chevauchait l'attribution et le
   zoom) — repositionné en haut au centre, sous le ✕. */
body.map-only #live-count {
  /* v272.214 (Bob : « les boutons sont mal placées au centre ») — le
     compteur subissait le même décentrage que le ✕ ; il SEUL accepte le
     centrage horizontal, MAIS écarté du ✕ (left 44px écarté pour ne
     jamais frotter l'octogone du ✕ en haut-gauche) */
  top: calc(1.15rem + env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  z-index: 4500 !important;
}

/* ============================================================
   v272.214 (Bob : « souvent je vois plus le timer en bas des sessions »)
   — LE MINI BADGE TEMPS : fix coin bas-GAUCHE, AU-DESSUS de la chip 🔑
   (qui reste un bouton de 34 px à left .55rem — le timer se place
   AU-DESSUS), toujours visible, jamais rangé, discreet (26 px, tous
   bords), chiffres lisibles. Vert = tranquille, rouge = ≤3 j.
   ============================================================ */
#lic-timer {
  display: none;
  position: fixed;
  left: 0.55rem;
  bottom: 3.7rem;
  z-index: 3090; /* SOUS le mini 🆔 (3100) pour ne pas se chevaucher, au-dessus de tout le reste */
  height: 26px;
  padding: 0 0.5rem;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 800 0.72rem/1 var(--font-display, sans-serif);
  color: #fff;
  background: linear-gradient(160deg, #0f6b34, #12813f);
  border: 1.5px solid #065f46;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
#lic-timer.on { display: flex; }
#lic-timer.urgent { background: linear-gradient(160deg, #a11212, #c1121f); border-color: #7f0d0d; }
#lic-timer.life { background: linear-gradient(160deg, #43120a, #7a3312); border-color: #5c2513; }
#lic-timer:active { transform: scale(0.94); }
/* la carte seule garde le timer visible si la clé existe — reste utile */
body.map-only #lic-timer { display: none !important; } /* SOUS le ✕ carte-seule, pas de cohabitation */
/* v272.214 : le ✕ carte-seule n'est PAS un membre de la famille drag —
   AUCUN souvenir mtl_fab_pos ne doit le déplacer. Si un souvenir
   try-catch traîne sur l'id map-only-close, on le neutralise au boot. */
#map-only-close.fab-float,
#map-only-close.fab-float-page { display: flex !important; position: fixed !important; }
#map-only-close.fab-float { left: 0.6rem !important; top: calc(0.6rem + env(safe-area-inset-top, 0px)) !important; }
#map-only-close.fab-float-page { left: 0.6rem !important; top: calc(0.6rem + env(safe-area-inset-top, 0px)) !important; }
/* ═══════════════════════════════════════════════════════════
   v272.276 (Bob, 21 oct : « revois les positions par défaut des
   boutons pour un écran 320px, sans jamais couvrir la bannière nav,
   la carte ni le compteur ») — AUDIT MESURÉ des défauts NAV/LIVRAISON
   à 320 : le 📬 badge (top 4.9rem), le 🧰 #nav-tools (top 7rem, JS
   inline) et le 🎤 #fab-voice (top 5.5rem) tombaient EN PLEIN DANS le
   bandeau #nav-banner (108-131px) ; la pastille-compteur PLEINE
   LARGEUR (bas mesuré y=237 à 2 lignes, PAS 198) couvrait la rangée
   🛰️/🎯 posée à 9.25rem/12.5rem par v272.235 (1628px² et 360px² de
   recouvrement). CAUSE RACINE : drag.js applySaved (v272.274)
   ré-impose AU BOOT la pose mémoire de la colonne statique
   (fab-float + inset inline) MÊME en nav-mode. RAMPE DÉTERMINISTE
   ≤380px, SOUS la pastille, JAMAIS sur la bannière, JAMAIS sur le
   compteur, JAMAIS au centre de la carte (mesures live 320×645 et
   320×783) :
   • gauche : ⬅ 12.9rem · 🛰️+🎯 15.9rem · 🎤 19rem · 🧾 22.4rem
   • droite : 🧰 15.9rem (menu 19.2rem) · 📬 19.3rem · 📦 23rem (tournée)
     (mesure live : la pastille 2 lignes va à y=237, PAS 198 → aucun
     bouton droit avant 15.9rem, sinon le compteur couvre 🧰/📦)
   • zoom ± (nav/tour) : top calc(50% + 5.6rem) — sous la rampe,
     bord droit x≈271-311 : hors du STOP bas-centré (x 124-196).
   L'octogone ⏹ STOP reste bas-centré et le ▶ Naviguer au-dessus de lui
   (places voulues par Bob, v272.190/v272.250, PAS TOUCHÉES).
   Les boutons DÉTACHÉS par Bob (fab-float/-page) gardent leur pose :
   :not() sur toute la rampe, ET le garde-fou drag.js NAV_FAB_RAMPE ne
   restaure PAS la mémoire de ces 6 boutons quand nav-mode est actif
   (le doigt garde la main hors nav ET pendant la nav).
   ≥381px : l'ancienne maquette tient.
   ============================================================ */
  /* v272.280 : zone de retrait visible pendant le geste dans la maquette nav aussi. */
  html.nav-mode .fab-remove-drop { display: flex !important; }
  /* — gauche, sous la pastille-compteur — */
  /* Variante #map préfixée : même spécificité que les poses v272.235
     (#map #gps-chip etc., 2 ids) et DERNIERE dans la feuille → elle
     gagne la pose par défaut en nav. La variante sans #map reste en
     secours pour un bouton recréé hors de la carte. */
  html.nav-mode #map #mtl-back,
  html.nav-mode #mtl-back,
  html.nav-mode #map #mtl-back-hit,
  html.nav-mode #mtl-back-hit {
    top: calc(12.9rem + env(safe-area-inset-top, 0px)) !important;
  }
  /* v272.276b : PAS de :not(.fab-float) sur la rampe — la classe est
     ré-ajoutée par applySaved (v272.274) à chaque memorisation : elle
     excluait 🛰️/🎯 de la rampe et les renvoyait SUR le compteur. La
     pose du doigt reste MAÎTRESSE via fab-float-page (aucun de ces 6
     boutons de carte n'en a) et hors nav la mémoire est intacte. */
  html.nav-mode #map #gps-chip:not(.fab-float):not(.fab-float-page),
  html.nav-mode #gps-chip:not(.fab-float):not(.fab-float-page) {
    left: 0.55rem !important;
    right: auto !important;
    top: calc(15.9rem + env(safe-area-inset-top, 0px)) !important;
  }
  html.nav-mode #map #fab-recenter:not(.fab-float):not(.fab-float-page),
  html.nav-mode #fab-recenter:not(.fab-float):not(.fab-float-page) {
    left: calc(0.55rem + 48px) !important; /* rangée : 🎯 à DROITE de 🛰️ (v272.142) */
    right: auto !important;
    top: calc(15.9rem + env(safe-area-inset-top, 0px)) !important;
  }
  html.nav-mode #map #fab-voice:not(.fab-float):not(.fab-float-page),
  html.nav-mode #fab-voice:not(.fab-float):not(.fab-float-page) {
    left: 0.7rem !important;
    right: auto !important;
    bottom: auto !important;
    top: calc(19rem + env(safe-area-inset-top, 0px)) !important;
  }
  html.nav-mode #map #nav-list-fab:not(.fab-float):not(.fab-float-page),
  html.nav-mode #nav-list-fab:not(.fab-float):not(.fab-float-page) {
    right: auto !important;
    bottom: auto !important;
    left: 0.6rem !important;
    top: calc(22.4rem + env(safe-area-inset-top, 0px)) !important;
  }
  /* — droite, sous la pastille-compteur — */
  html.nav-mode #nav-tools {
    top: calc(15.9rem + env(safe-area-inset-top, 0px)) !important;
  }
  html.nav-mode #nav-tools-menu {
    top: calc(19.2rem + env(safe-area-inset-top, 0px)) !important;
  }
  html.nav-mode #map .buffy-badge {
    top: calc(19.3rem + env(safe-area-inset-top, 0px)) !important;
    right: 0.7rem !important;
  }
  html.nav-mode.tour-on #map #fab-planner,
  html.nav-mode.tour-on #fab-planner {
    right: 0.7rem !important;
    left: auto !important;
    top: calc(23rem + env(safe-area-inset-top, 0px)) !important;
  }
  /* — zoom ± : bas-droite, sous la rampe, jamais sur le compteur — */
  html.nav-mode #map #mtl-zoom-h,
  html.nav-mode #mtl-zoom-h,
  html.tour-on #map #mtl-zoom-h,
  html.tour-on #mtl-zoom-h {
    top: calc(50% + 5.6rem) !important;
  }
}

/* v272.280 — positions mobiles de départ stables sous la carte.
   Les FAB visibles restent dans #map ; les règles ne visent que les boutons
   non déplacés. La rangée des outils de carte n'a pas de hauteur en nav,
   mais ses boutons ne sont pas des FAB mobiles de la carte. */
@media (max-width: 899px) {
  html:not(.nav-mode) #map #map-only-fab:not(.fab-float):not(.fab-float-page),
  html:not(.nav-mode) #map #theme-toggle:not(.fab-float):not(.fab-float-page),
  html:not(.nav-mode) #map #fab-fullscreen:not(.fab-float):not(.fab-float-page),
  html:not(.nav-mode) #map #fab-recenter:not(.fab-float):not(.fab-float-page),
  html:not(.nav-mode) #map #gps-chip:not(.fab-float):not(.fab-float-page) {
    left: 0.65rem !important;
    right: auto !important;
    transform: none !important;
  }
  html:not(.nav-mode) #map #map-only-fab:not(.fab-float):not(.fab-float-page) { top: 0.65rem !important; }
  html:not(.nav-mode) #map #theme-toggle:not(.fab-float):not(.fab-float-page) { top: 3.45rem !important; }
  html:not(.nav-mode) #map #fab-fullscreen:not(.fab-float):not(.fab-float-page) { top: 6.25rem !important; }
  html:not(.nav-mode) #map #fab-recenter:not(.fab-float):not(.fab-float-page) { top: 9.05rem !important; }
  html:not(.nav-mode) #map #gps-chip:not(.fab-float):not(.fab-float-page) { top: 11.85rem !important; }
  html:not(.nav-mode) #mtl-zoom-h:not(.fab-float):not(.fab-float-page) {
    top: 50% !important;
    right: 0.55rem !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* v272.280b — si le geste annule la capture du pointeur, le navigateur
   peut envoyer pointercancel sans pointerup. Terminer proprement dans ce
   cas garde la dernière pose réelle (ou conserve un tap si < 12 px). */

/* Pastille de tournée : presque pleine largeur, deux lignes non tronquées.
   Aucun left/top fixé ici : le drag reste libre et sa mémoire est intacte.
   bottom:auto annule le bottom CSS hérité : top + bottom ensemble étiraient
   la pastille sur ~400 px au lieu de laisser sa hauteur suivre le texte. */
#planner-nav-chip {
  box-sizing: border-box !important;
  width: min(calc(100vw - 1rem), 420px) !important;
  max-width: calc(100vw - 1rem) !important;
  min-height: 3.25rem !important;
  height: auto !important;
  bottom: auto !important;
  padding: 0.6rem 1rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  justify-content: center !important;
  text-align: center !important;
}
#planner-nav-chip.fab-float-page {
  display: flex !important;
  box-sizing: border-box !important;
  width: min(calc(100vw - 1rem), 420px) !important;
  max-width: calc(100vw - 1rem) !important;
  min-height: 3.25rem !important;
  height: auto !important;
  bottom: auto !important;
}
/* Le toast se crée avant nav-mode (la route calculée déclenche
   _startNavCore juste après driveTo). Le JS le marque une fois le mode
   réellement posé; cette règle finale évite le recouvrement de la bannière. */
html.nav-mode #route-ready,
html.nav-mode #route-ready.rr-low {
  top: auto !important;
  bottom: calc(10.4rem + env(safe-area-inset-bottom, 0px)) !important;
  left: 0.6rem !important;
  right: calc(1.5rem + 84px) !important;
  z-index: 1490 !important;
  transform: none !important;
  width: auto !important;
  max-width: min(92vw, 420px) !important;
  animation-name: routeReadyInLow !important;
}
@media (max-width: 380px) {
  html.nav-mode #route-ready,
  html.nav-mode #route-ready.rr-low {
    left: 0.55rem !important;
    right: 5.5rem !important;
    bottom: calc(10.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}
body > #rep-cycler.fab-float-page {
  box-sizing: border-box !important;
  width: calc(100vw - 10px) !important;
  max-width: calc(100vw - 10px) !important;
  min-height: 45px !important;
  height: auto !important;
  justify-content: center !important;
}
body > #rep-cycler.fab-float-page .rc-label { text-align: center; }

/* v272.280 : la zone « Enlever / Remove » n'apparaît que pendant un drag.
   Fixed dans la fenêtre pour fonctionner en mode carte, navigation et 3D. */
.fab-remove-drop {
  position: fixed !important;
  z-index: 10000 !important;
  left: 50% !important;
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) translateY(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-width: 142px !important;
  min-height: 48px !important;
  padding: 0.45rem 1.1rem !important;
  box-sizing: border-box !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #d93025 !important;
  color: #fff !important;
  font: 800 0.95rem/1 var(--font-display, inherit) !important;
  box-shadow: 0 5px 22px rgba(0,0,0,.38) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease !important;
}
.fab-remove-drop.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}
.fab-remove-drop.is-over { background: #9f1d18 !important; transform: translateX(-50%) scale(1.07) !important; }
.fab-removed { display: none !important; visibility: hidden !important; pointer-events: none !important; }
#hm-removed-fabs[hidden] { display: none !important; }
#hm-removed-fabs .hm-removed-row::after { content: "↩"; margin-left: auto; opacity: .75; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .fab-remove-drop { transition: none !important; } }

/* Infos de conduite centrées dans le bandeau, sans toucher à la place
   ni au comportement des actions de navigation. */
.nav-banner .nav-turn {
  justify-content: center !important;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
  text-align: center !important;
}
.nav-banner .nav-ico { flex: 0 0 auto !important; }
.nav-banner .nav-road {
  flex: 0 1 auto !important;
  text-align: center !important;
}
.nav-banner .nav-dist { flex: 0 0 auto !important; }
.nav-banner .nav-stats {
  justify-content: center !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}
.nav-banner .nav-stats span { flex: 0 1 auto !important; }
.map-fab:not(.drag-locked),
#gps-chip,
#planner-nav-chip,
#nav-go-btn,
#nav-stop-fab,
#mtl-zoom-h,
#rep-cycler,
.nav-banner .nav-mini {
  touch-action: none !important;
}

/* ============================================================
   v272.282 — BOB, TOURNÉE DU 23 OCTOBRE MATIN (boîte noire) :
   1) LA PASTILLE COMPTEUR N'EST DÉPLAÇABLE QUE SUR LA TABLETTE —
      cause : la tablette passe par la voie tactile (touchmove), le
      téléphone par les PointerEvent → le pointercancel du scroll
      volait le geste. touch-action:none figé en CSS règle ça pour
      de bon (zoom/stop l'ont déjà depuis v272.82).
   2) ANTI-DELETE DU PANNEAU ⏹ ARRÊT (code drag.js) + boutons
      ☰1/☰2 en haut de la carte + surfaces d'appui agrandies.
   ============================================================ */
#planner-nav-chip {
  touch-action: none;
}
#planner-nav-chip[hidden] { touch-action: auto; }

/* 3) SURFACE D'APPLUS AGRANDIE : un halo transparent de 8px autour des
   boutons attrape le doigt qui arrive un peu à côté (Bob : « il faut
   mettre les boutons plus facile à déplacer »). Le cadre du ::after
   fait partie du bouton pour le hit-test → pointerdown est reçu.
   Aucun changement visuel (fond transparent). */
.map-fab::after,
#gps-chip::after,
#mtl-back::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: transparent;
}
#nav-stop-fab::after {
  content: "";
  position: absolute;
  inset: -6px;
  background: transparent;
}

/* v272.301 (25 oct) — CORRECTIF CATASTROPHE EN-TÊTE (preuve live 600x806 :
   document.elementFromPoint(348,29) renvoyait BUTTON#fab-more au lieu du
   sélecteur QUÉBEC). Cause : #fab-more est STATIC dans l'en-tête, donc
   son halo d'appui .map-fab::after (position:absolute, inset:-8px) se
   calait sur le conteneur positionné le plus proche = l'EN-TÊTE sticky
   → halo mesuré 616x127 px couvrant TOUTE la rangée du haut : chaque tap
   sur LE LOGO, MENU-1 ou QUÉBEC atterrissait sur menu-2 (« tout ouvre
   le même menu », zéro tap province-select en boîte noire sur 25 h).
   position:relative sur les map-fabs posés dans l'en-tête rend le halo
   local au bouton (85x38 + 8 px, comme prévu par v272.282 pour les FABs
   de carte, qui eux sont positionnés déjà). Aucun changement visuel. */
header .map-fab { position: relative; }

/* 4) LES DEUX BOUTONS MENU ☰1 (gauche) ☰2 (droite) — octogones,
   visibles SEULEMENT en tournée (livraison) et pendant la nav : ce
   sont les portes menu-1 / menu-2 accessibles SANS fermer la course. */
.fab-menu-fab::after { content: ""; position: absolute; inset: -8px; background: transparent; }
#fab-menu-left,
#fab-menu-right {
  display: none !important;
  position: fixed;
  z-index: 2150;
  width: 46px !important;
  height: 46px !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 800;
  background: var(--panel, #fff) !important;
  color: var(--ink, #101828) !important;
  border: 1.5px solid var(--line-strong, #d7dbe3) !important;
  box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.35);
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
html.tour-on #fab-menu-left,
html.tour-on #fab-menu-right,
html.nav-mode #fab-menu-left,
html.nav-mode #fab-menu-right {
  display: flex !important;
}
/* Hors nav (livraison ARRÊT icône) : les deux coins HAUTS de la carte.
   À droite, on laisse le 🏔️ 3D (right 0.7rem, top 0.7rem) respirer. */
html.tour-on:not(.nav-mode) #fab-menu-left.fab-menu-fab {
  left: 0.6rem !important;
  right: auto !important;
  top: 0.6rem !important;
}
html.tour-on:not(.nav-mode) #fab-menu-right.fab-menu-fab {
  right: 4.1rem !important;
  left: auto !important;
  top: 0.6rem !important;
}
/* En nav : SOUS la pastille compteur (la bannière + pastille occupent
   le haut), avant la rampe ⬅ (12.9rem) — colonne gauche dégagée.
   !important : la pile générique .nav-mode .map-fab (right 0.55rem)
   ne doit PAS re-patcher mes deux octogones à droite. */
html.nav-mode #fab-menu-left.fab-menu-fab {
  left: 0.6rem !important;
  right: auto !important;
  top: calc(9rem + env(safe-area-inset-top, 0px)) !important;
  z-index: 2150 !important;
}
html.nav-mode #fab-menu-right.fab-menu-fab {
  right: 0.6rem !important;
  left: auto !important;
  top: calc(9rem + env(safe-area-inset-top, 0px)) !important;
  z-index: 2150 !important;
}
/* Vitesse d'appui : jamais écrasée par la taille 34px de la pile nav. */
html.nav-mode #fab-menu-left.fab-menu-fab,
html.nav-mode #fab-menu-right.fab-menu-fab,
html.tour-on:not(.nav-mode) #fab-menu-left.fab-menu-fab,
html.tour-on:not(.nav-mode) #fab-menu-right.fab-menu-fab {
  width: 46px !important;
  height: 46px !important;
}

/* 5) MENUS ANCRÉS À LA FENÊTRE pendant la nav / tournée : ils ne
   dépendent plus d'un ancêtre display:none (header / map-topbar). */
/* Bureau / tablette MAQUETTE GRANDE : le menu-1 était relatif au
   .header-tools — retaché près du coin droit, même bulle. */
@media (min-width: 900px) {
  .header-more-menu.mm-in-map,
  .mobile-actions.mm-in-map {
    position: fixed !important;
    top: 4.6rem !important;
    right: 0.8rem !important;
    left: auto !important;
    width: 320px !important;
    max-height: calc(100vh - 7rem) !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
    /* v272.297 (Bob : « les images que tu montres sont horribles, boutons
       mal placés partout ») — MESURE LIVE 987x770 : en mm-in-map ≥900px,
       le menu-1 perdait son panneau : background reste transparent
       (rgba(0,0,0,0)) → ses rangées flottaient SUR la carte et les pubs.
       Désormais le skin menu-2 (panneau opaque, bord, rayon, ombre) est
       posé DANS ce bloc : chaque état ≥900px affiche un panneau plein. */
    background: var(--panel, #fff) !important;
    border: 1px solid var(--line, #e4e7ec) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px -12px rgba(16, 24, 40, 0.35) !important;
  }
}
@media (max-width: 899px) {
  /* v272.282 : en nav, les deux menus descendent sous la pastille-compteur
     (top 5.7rem de la maquette v272.237 passerait DERRIÈRE la bannière). */
  /* v272.284 : sélecteur renforcé (#id) — l'ancien (.header-more-menu.
     mm-in-map = 0,3,1) perdait contre #header-more-menu (1,0,0) :
     le menu restait à top 5.7rem en nav, SUR la pastille compteur. */
  html.nav-mode #header-more-menu.mm-in-map,
  html.nav-mode #mobile-actions.mm-in-map {
    top: calc(13.4rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ============================================================
   v272.284 (Bob : « refais les menus menu-1 et menu-2 dans le même
   design, le X à la même place, des belles pastilles à l'intérieur,
   un beau texte qui ne chevauche et n'empiète pas ») — UN SEUL skin
   pour les deux menus, appliqué DERRIÈRE tout le reste (cette feuille
   charge en dernier) → le menu-1 et le menu-2 sont identiques dans
   TOUS les modes : accueil, navigation, livraison. Le HTML ne bouge
   pas (aucun handler cassé) : uniquement l'ordonnancement déjà rentré
   dans index.html + l'habillage ici.
   ============================================================ */
#header-more-menu, #mobile-actions {
  padding: 0.45rem 0.5rem 0.6rem !important;
}
/* --- Titre des menus : bandeau identique (menu-1 en hérite d'un
   ::before, menu-2 a son .ma-title natif) --- */
#header-more-menu::before {
  content: "Menu 1 · Réglages";
  display: block;
  min-height: 2.4rem;
  align-self: center;
  font: 800 0.72rem/1 var(--font-display, inherit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #667085);
  padding: 0.45rem 0.55rem 0.35rem;
}
.mobile-actions > .ma-title {
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  font: 800 0.72rem/1 var(--font-display, inherit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #667085);
  padding: 0.45rem 0.55rem 0.35rem;
}
/* --- LE X : pastille ronde orange, HAUT-DROIT, sticky — la même
   place et le même format dans les deux menus, dans tous les modes. --- */
#header-more-menu > .hm-close,
#mobile-actions > .ma-close {
  position: sticky !important;
  top: 0.3rem !important;
  /* menu-1 : float right existence ; menu-2 : idem (mobile-actions.css 31) */
  float: right;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 0.15rem 0.25rem 0.5rem !important;
  border-radius: 50% !important;
  background: #e2492f !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px -4px rgba(226, 73, 47, 0.55) !important;
  z-index: 6 !important;
  cursor: pointer !important;
}
#header-more-menu > .hm-close span,
#mobile-actions > .ma-close span {
  /* libellé gardé pour les lecteurs d'écran, caché à l'écran : le X rond
     reste carré et ne pousse PAS le titre (zéro empiètement). */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#header-more-menu > .hm-close:active,
#mobile-actions > .ma-close:active { transform: scale(0.94); }
/* --- Rangées : PASTILLES pleines (boîtes douces), même rayon, même
   hauteur tactile 46px+, texte sans troncature ni débordement --- */
#header-more-menu .hm-row:not(.hm-close),
#mobile-actions .ma-row:not(.ma-close) {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-height: 47px !important;
  box-sizing: border-box !important;
  background: var(--panel-2, rgba(102, 112, 133, 0.08)) !important;
  border: 1px solid var(--line, #e4e7ec) !important;
  border-radius: 13px !important;
  padding: 0.5rem 0.65rem !important;
  margin: 0 0 0.3rem 0 !important;
  font-weight: 600 !important;
  color: var(--ink, #101828) !important;
  text-align: left !important;
  cursor: pointer !important;
}
#header-more-menu .hm-row span,
#mobile-actions .ma-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.25;
}
#header-more-menu a.hm-row,
#mobile-actions a.ma-row { text-decoration: none !important; }
#header-more-menu .hm-row:active,
#mobile-actions .ma-row:active { background: rgba(226, 73, 47, 0.10) !important; }
/* --- Badges d'état : pastilles vertes/grises propres, jamais écrasées --- */
#header-more-menu .hm-row b,
#mobile-actions .ma-row .ma-state,
#mobile-actions .ma-row b {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #1c8a4c !important;
  background: rgba(28, 138, 76, 0.12) !important;
  border-radius: 999px !important;
  padding: 0.18rem 0.5rem !important;
  white-space: nowrap !important;
}
#mobile-actions .ma-row.off .ma-state,
#mobile-actions .ma-row b#ma-urgent-state:not([data-on]) { color: var(--ink-soft, #667085) !important; background: rgba(102, 112, 133, 0.12) !important; }
/* --- Organisation : rangées classification, séparateur discret --- */
#header-more-menu .hm-sep,
#mobile-actions .ma-sep {
  height: 1px !important;
  background: var(--line, #e4e7ec) !important;
  margin: 0.35rem 0.55rem 0.45rem !important;
  opacity: 0.7;
}
#header-more-menu .hm-lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.05rem 0 0.2rem !important;
}
#header-more-menu .hm-lang .hm-row { margin: 0 !important; }
/* v272.284b (capture Bob) : la section MODES (Entraves · GPS · Mixte ·
   Nav) écrasée par la grille 2 colonnes — retour FLEX pleine largeur :
   les 4 pastilles tiennent sur une rangée, lisibles. */
#mobile-actions .ma-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.15rem 0.35rem 0.45rem;
}
#mobile-actions .ma-row:focus-visible { outline: 2px solid var(--accent, #e2492f); outline-offset: 1px; }
/* --- Version : rangée discrète, pas de bordure pointillée criarde --- */
#mobile-actions #ma-version,
#header-more-menu #hm-version {
  opacity: 0.75;
  font-size: 0.8rem !important;
}
/* --- Sombre : les pastilles suivent le thème (déjà via vars) + lisible --- */
html.dark #header-more-menu .hm-row,
html.dark #mobile-actions .ma-row:not(.ma-close) {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f3f4f6 !important;
}
html.dark #header-more-menu > .hm-close,
html.dark #mobile-actions > .ma-close { background: #e2492f !important; color: #fff !important; }
/* v272.284 : en NAV, le menu tient SOUS la pastille compteur —
   max-height = hauteur de l'écran − (top 13.4rem + pastille 4.1rem +
   61px de pastille + 8px de marge) : aucun chevauchement, mesuré. */
html.nav-mode #header-more-menu,
html.nav-mode #mobile-actions {
  max-height: calc(100vh - 13.4rem - 4.1rem - 61px - 8px) !important;
}
/* v272.284 : les rangées fmm-grid de la section « LA CARTE » du
   menu-1 prennent le MÊME skin pastille que toutes les rangées (une
   seule famille visuelle, aucun texte tronqué). */
#header-more-menu .fmm-grid {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-height: 47px !important;
  box-sizing: border-box !important;
  background: var(--panel-2, rgba(102, 112, 133, 0.08)) !important;
  border: 1px solid var(--line, #e4e7ec) !important;
  border-radius: 13px !important;
  padding: 0.5rem 0.65rem !important;
  margin: 0 0 0.3rem 0 !important;
  color: var(--ink, #101828) !important;
  cursor: pointer !important;
}
#header-more-menu .fmm-grid:active { background: rgba(226, 73, 47, 0.10) !important; }
html.dark #header-more-menu .fmm-grid {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f3f4f6 !important;
}
/* v272.284b : la rangée SEGMENTÉE des modes (Entraves · GPS · Mixte ·
   Nav) redevient pleine largeur.lu et tactile (44 px min) sur téléphone
   — chaque segment occupe 1/4, texte lisible, aucun écrasement. */
#mobile-actions [data-ma="mode"] .mode-seg,
#mobile-actions [data-ma="mode"] .mode-seg .mode-seg-inner { width: 100%; }
#mobile-actions [data-ma="mode"] .mode-seg button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  font-size: 0.78rem !important;
  padding-inline: 0.3rem !important;
  white-space: nowrap !important;
}
#mobile-actions [data-ma="mode"] .mode-seg button span { display: inline !important; }
/* v272.284c : la SECTION des modes est contraite à ~216px par une
   règle antérieure — pleine largeur forcée (le panel fait 298px). */
#mobile-actions .ma-section[data-ma="mode"] {
  width: 100% !important;
  box-sizing: border-box !important;
}
#mobile-actions .ma-section[data-ma="mode"] .mode-seg {
  width: 100% !important;
}

/* ============================================================
   v272.286 (Bob, 23 oct : 4 retouches du matin)
   ============================================================ */
/* 1) LA LUNE : RONDE partout (Bob : « le bouton lune est octogone au
   lieu de rond ») — elle quitte la famille octogonale : l'écran
   320px la voit sur la carte, l'écran large dans l'en-tête. */
.theme-toggle,
#theme-toggle,
#map .theme-toggle,
.fab-float.theme-toggle,
.fab-float-page.theme-toggle {
  clip-path: none !important;
  border-radius: 999px !important;
}
/* 2) DRAG CONFORT (Bob : « mets les boutons plus facile à déplacer ») :
   pendant la glissade le bouton prend un HALO visible et passe
   AU-DESSUS de tout (la pose left/top reste la seule source de
   position — le halo ne déplace rien). */
.dragging {
  z-index: 5600 !important;
  box-shadow: 0 10px 26px -6px rgba(16, 24, 40, 0.55), 0 0 0 10px rgba(226, 73, 47, 0.14) !important;
  cursor: grabbing !important;
  transition: box-shadow 0.12s ease !important;
}
/* 3) EN-TÊTE 320px : menu-1 · Québec · menu-2 CENTRÉS à côté de la
   pastille logo (Bob : « centrer le menu-1, la pastille des provinces
   et le menu-2 ») — les deux marges auto répartissent l'espace
   restant EGALEMENT autour du trio. */
@media (max-width: 899px) {
  .header-legacy { margin-left: auto !important; }
  .header-tools { margin-right: auto !important; }
}
/* 4) MENU-1 : même COULEUR que menu-2 (Bob) — pastille orange
   identique, texte blanc, même forme ronde ; le libellé reste
   « menu-1 » pour differencier dans le titre. */
@media (max-width: 560px) {
  #header-more {
    background: #f29900 !important;
    color: #fff !important;
    border: 0 !important;
    min-height: 30px !important;
    line-height: 30px !important;
    padding: 0 0.65rem !important;
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px -2px rgba(242, 153, 0, 0.7) !important;
  }
  #header-more b { font-weight: 800 !important; }
}

/* ============================================================
   v272.286 (suite, 23 oct PM) — RANGÉE 1 QUI TIENT EN 320px :
   mesuré en direct (350+320 : le trio wrappait). Compacts : logo
   96px · menu-1 53px · Québec 72px · menu-2 58px = 279px + gaps
   auto → TIENT sur la rangée du logo, centré. (Les tailles
   antérieures 0.8rem cramponnaient la rangée → menu-2 tombait
   sous menu-1, capture du 23 oct 13h05.)
   ============================================================ */
@media (max-width: 560px) {
  header .brand { margin-right: 0 !important; }
  header .brand .logo {
    font-size: 0.74rem !important;
    padding: 2px 3px 2px !important;
    border-width: 2px !important;
  }
  #header-more, #fab-more.header-menu2 {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 0.3rem !important;
    font-size: 0.68rem !important;
  }
  /* v272.286 : display EXPLICITE — sur cache froid la règle de base
     #fab-more { display:none } (mobile-actions.css) gagnait selon
     l'ordre des feuilles et le menu-2 disparaissait de la rangée 1. */
  #fab-more.header-menu2 { display: inline-flex !important; }
  .header-legacy .header-more { align-self: center !important; }
}

/* ============================================================
   v272.287 (23 oct PM) — BOUTONS PLUS FACILES À DÉPLACER ET POSER
   (Bob, retour après son test du vieux cache 285)
   ============================================================ */
/* 1) RETOUR TACTILE LE PREMIER PIXEL : dès le doigt, le bouton se
   réveille (halo + léger grossissement). Classe posée/retirée par
   drag.js au pointerdown et pointerup — aucun effet sur le tap. */
.drag-press {
  box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.55), 0 0 0 8px rgba(226, 73, 47, 0.12) !important;
  transform: scale(1.08);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
  z-index: 5600 !important; /* toujours AU-DESSUS de tout dès le contact */
}
.drag-press.dragging { transform: none; } /* en glissade : pas de scale, pose exacte */
.drag-press::after { content: none !important; } /* jamais de décoration parasite */

/* ============================================================
   v272.288 (23 oct PM bis, Bob : « pourquoi les deux menus sont
   identiques ») — REDISTINCTION des deux menus :
   menu-2 (Options de la carte) garde le skin PASTILLE (rangées-boîtes
   v272.284) ; menu-1 (Réglages) redevient une LISTE CLASSIQUE compacte
   (avant 284) : rangées transparentes, fines, hover discret. Le menu
   sombre suit le thème via les variables. Le X rond et le titre restent
   en haut de chaque panneau (le X était la demande 272.286). */
#header-more-menu .hm-row:not(.hm-close),
#header-more-menu .fmm-grid {
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0.4rem 0.55rem !important;
  margin: 0 !important;
  gap: 0.5rem !important;
  color: var(--ink, #101828) !important;
  font-weight: 600 !important;
  text-align: left !important;
}
#header-more-menu .hm-row:not(.hm-close):hover {
  background: rgba(226, 73, 47, 0.06) !important;
}
#header-more-menu .hm-row:not(.hm-close):active {
  background: rgba(226, 73, 47, 0.10) !important;
}
/* Panneau menu-1 : légèrement différent du panneau menu-2 (liseré
   supérieur orange discret, rayons plus nets) — on voit d'un clin d'œil
   QUEL menu est ouvert même avant de lire le titre. */
#header-more-menu {
  border-top: 3px solid #f29900 !important;
  border-radius: 14px 14px 16px 16px !important;
}
#mobile-actions {
  border-top: 3px solid #e2492f !important;
}
html.dark #header-more-menu .hm-row:not(.hm-close) {
  background: transparent !important; /* le skin pastille sombre de 284 ne re-colle plus au menu-1 */
  color: #f3f4f6 !important;
}
html.dark #header-more-menu .fmm-grid {
  background: transparent !important;
  color: #f3f4f6 !important;
}

/* ============================================================
   v272.312 — LOT UNIFORMITÉ + KANGOUROU (Bob, 27 oct, 8 demandes)
   ============================================================ */
/* 1. GROSSEUR UNIFORME : tous les boutons de carte prennent 46 px —
   fini les gros/melanges à travers les modes. Le STOP (60), le 🦘 (60),
   la pastille de tournée (pleine largeur) et la colonne zoom gardent
   leurs règles dédiées ({！）ci-dessous contraigned par leurs propres blocs
   !important). */
#map .map-fab:not(#fab-menu-left):not(#fab-menu-right):not(#fab-more),
#map .traffic-live-btn,
#map .gps-chip {
  width: 46px !important;
  height: 46px !important;
  font-size: 1.1rem !important;
}
/* v272.314 — EXEMPTIONS ci-dessus (Bob, 27 oct : « le bouton du menu 2
   a changé de grosseur et n'est plus à la bonne place quand ça load ») :
   #fab-menu-left / #fab-menu-right (☰1/☰2 de tournée) et #fab-more (☰2
   topbar, mobile-actions.css) ont LEURS tailles et poses dédiées — la
   règle uniforme 46 ne doit plus les retoucher ni faire bouger #fab-more
   hors de son topbar. */
/* 2. BOUTON KANGOUROU 🦘 — même octogone que le STOP, jaune signal,
   posé DIRECTEMENT À GAUCHE du STOP (right = 1.5rem + 66 px de colonne). */
#nav-skip-fab {
  width: 60px !important;
  height: 60px !important;
  justify-content: center;
  padding: 0 !important;
  gap: 0 !important;
  /* v272.315 (Bob) : FOND NOIR — l'image kangourou tranche sur le noir,
     contrairement au jaune qu'il a refusé après test. Le liseré blanc
     ::before reste : l'octogone reste lisible de nuit. */
  background: #141414 !important;
  border: none !important;
  box-shadow: none !important;
  position: fixed !important;
  /* À sa création (aucune mémoire) : à GAUCHE du STOP, même rangée. */
  right: calc(1.5rem + 66px);
  left: auto;
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  top: auto;
  z-index: 1500 !important;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%) !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
#nav-skip-fab::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: transparent;
  border: 2.2px solid rgba(255, 255, 255, 0.95);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  pointer-events: none;
}
#nav-skip-fab span {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1;
  text-align: center;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  /* v272.316 (Bob) : le pictogramme reste BRUN-JAUNE à l'intérieur du
     bouton noir. L'emoji natif varie selon l'OS ; le filtre le force
     vers le brun-jaune signal (#e07b00, l'orange tournée de la carte)
     pour une lisibilité constante sur le fond noir, jour comme nuit. */
  color: #e07b00;
  filter: sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.02);
}
/* v272.316 (Bob, 3e demande : « quand on appuie dessus souvent les
   fonctions (copy, paste, move) apparaissent car il y a du texte sur
   ou dans le bouton ») — la SÉLECTION de texte est tuée sur TOUS les
   boutons déplaçables (map-fab, octogones, pastilles, rangées ☰ et
   bannière) : -webkit-touch-callout éteint le menu copy/paste iOS,
   user-select:none éteint la sélection Android. Le texte du bouton
   reste AFFICHÉ mais n'est plus sélectionnable. */
.map-fab,
#nav-stop-fab,
#nav-skip-fab,
#gps-chip,
#mtl-zoom-h,
#planner-nav-chip,
#nav-go-btn,
.nav-banner .nav-mini,
.fab-float,
.fab-float-page,
.ma-row {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
/* 3. PASTILLE ROUGE « ENLEVER » — remontée JUSTE SOUS la pastille de
   compteur d'arrêt (Bob : « déplace-la juste en dessous de la pastille
   de compteur d'arrêt ») — elle est invisible sauf pendant un drag. */
.fab-remove-drop {
  bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)) !important;
}
/* 4. BOÎTE CLÉ D'ACTIVATION — AU-DESSUS de la page d'ouverture de
   tournée (Bob : « elle empêchait le démarrage, cachée dessous ») : le
   bandeau 🔑 paticip au-dessus du panneau route-planner. */
.lic-bar {
  z-index: 5000 !important;
}
/* 5. AUCUNE SÉLECTION DE TEXTE sur les boutons (Bob : « copy, paste,
   move apparaissent, inutile et empêche de déplacer ») — complément du
   blocage contextmenu v272.312 dans drag.js. */
#map .map-fab,
.fab-float,
.fab-float-page,
.nav-banner .nav-mini,
#nav-stop-fab,
#nav-skip-fab,
#nav-tools,
#planner-nav-chip,
#mtl-back,
.mode-seg button,
.prov-gps-btn,
.theme-toggle,
.lang-btn {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ============================================================
   v272.314 — STOP ET KANGOUROU : LA POSE EXACTE SOUS LE DOIGT
   ============================================================ */
/* (Bob, 27 oct 16h : « le STOP fait un move à droite avant de revenir
   à sa place » ; « le 🦘 n'est pas à la grosseur du STOP, difficile à
   déplacer, et une fois déplacé il a changé de forme ».)

   PREUVE MESURÉE EN PREVIEW (drag simulé au doigt, pointerdown → move
   → up, 27 oct) : dès que floatize(el) vide le transform inline, la
   règle de centrage v272.191b `transform: translateX(50%)` regagne —
   l'octogone se peint +30 px (une demi-largeur) à droite de son left
   inline, PENDANT et APRÈS le drag (relevé : computed transform
   matrix(1,0,0,1,30,0) ; rect 426 px pour un left inline de 396 px).
   Et le 🦘 flottant passait sous le plafond .fab-float
   max-width:44px (v272.125) : 44×60 = octogone APLATI dès qu'il est
   déplacé (le filtre max-width du STOP a été posé en v272.312 — le
   bloc du 🦘 l'a raté). */
#nav-stop-fab.fab-float,
#nav-stop-fab.fab-float-page,
#nav-skip-fab.fab-float,
#nav-skip-fab.fab-float-page {
  /* v272.315 : le `:not(.drag-press)` est RETIRÉ — pendant l'appui
     (tap sans drag), translateX(50%) reprenait la main et l'octogone
     se déplaçait à droite puis revenait au lâcher. Transform ne
     revient JAMAIS sur ces deux boutons, appui compris. */
  transform: none !important;
}
/* En pleine glissade : pose EXACTE, ni centrage ni scale. La règle
   générique .drag-press.dragging{transform:none} (SANS !important)
   PERDAIT contre le sélecteur ID #nav-stop-fab — relevé mesuré. */
#nav-stop-fab.drag-press.dragging,
#nav-skip-fab.drag-press.dragging {
  transform: none !important;
}
/* Le plafond max-width:44px (v272.125) ne touche JAMAIS ces deux
   octogones 60×60, flottants ou non. */
#nav-stop-fab.fab-float,
#nav-stop-fab.fab-float-page,
#nav-skip-fab.fab-float,
#nav-skip-fab.fab-float-page {
  max-width: none !important;
  max-height: none !important;
}
/* Le 🦘 au repos : centrage flex identique aux flottants (la règle
   v272.112b ne couvrait PAS les boutons sans classe). */
#nav-skip-fab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Et il SUIT le STOP dans sa place centrée, 8 px de gouttière entre
   les deux octogones : centre 🦘 = centre STOP - 68 px. MÊME ANCRAGE
   SANS TRANSFORM que le STOP (v272.315) : right = 50% + 38 px place le
   centre à 50% - 68 px aussi sec, sans translateX — plus aucun saut
   au tap sur ≤899px (téléphone et tablette). */
@media (max-width: 899px) {
  #nav-skip-fab {
    right: calc(50% + 38px) !important;
    left: auto;
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)) !important;
    transform: none;
  }
}

/* ============================================================
   v272.337 (Bob, 30 oct matin) — LE BANDEAU NAV : DEUX LIGNES ET
   RIEN DE PLUS, textes PLEINE LARGEUR, tout CENTRÉ. La ligne de
   stats re-wrappait sur 2 lignes à 320 px (padding 3.6/5.6rem
   hérités) → le bandeau grossissait (3 lignes) et empiétait sur
   la pastille de compteur d'arrêt. FIX : nowrap + texte réduit à
   une ligne avec ellipsis, les paddings latéraux hérités annulés,
   ligne 1 PLEINE LARGEUR centrée (icône / rue · sortie / distance),
   ligne 2 PLEINE LARGEUR centrée (⏱ · heure · km · km/h).
   ============================================================ */
.nav-banner .nav-turn {
  flex-wrap: nowrap !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}
.nav-banner .nav-road {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.nav-banner .nav-exit {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffd166;
  background: rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 0.08rem 0.35rem;
  font-family: var(--font-display, inherit);
}
.nav-banner .nav-dist { flex: 0 0 auto !important; }
.nav-banner .nav-stats {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.nav-banner .nav-stats span { flex: 0 0 auto !important; }


/* ============================================================
   v272.339 - ROLLBACK BOUTONS A L ETAT DU 28 OCT 13h50 (v272.324,
   demande Bob : memes couleurs, memes boutons qu hier a la meme heure).
   Les trois blocs ajoutes APRES la 324 (bloc rond partiel v272.336,
   bloc rond etendu v272.337, palette hors-scope v272.337, pill 338)
   sont RETIRES entierement. Restent les regles d origine : degrades
   v251, v272.51/56, v272.59 gardes drag, v272.139b ronds #map,
   v272.141 pill menu-2, et le bandeau nav deux lignes v272.334
   (demande Bob, conserve). Le pill menu-2 est reaffirme ici une
   derniere fois pour battre toute regle anterieure du meme fichier.
   ============================================================ */
#fab-more,
#fab-more.header-menu2 {
  clip-path: none !important;
  border-radius: 999px !important;
}

/* ============================================================
   v272.340 — RESTAURATION des trois blocs coupes par le rollback 339
   (Bob : « Innocente tu m'a refoutue des boutons carré »). CAUSE:
   a l'ere 324, #fab-fullscreen et #fab-recenter portent octogone
   clip-path avec border-radius: 0 — sur le telephone SANS clip-path
   => CARRES PURS. Le dernier etat valide est rond + COLORE + pill:
   bloc rond etendu + palette + pill, remis ici a l'identique, la
   pill #fab-more restant la DERNIERE regle de la feuille.
   ============================================================ */
.map-fab:not(#nav-stop-fab):not(#nav-skip-fab):not(#fab-more),
.fab-float:not(#nav-stop-fab):not(#nav-skip-fab):not(#fab-more):not(#planner-nav-chip):not(#nav-go-btn):not(#nav-tools),
.fab-float-page:not(#nav-stop-fab):not(#nav-skip-fab):not(#fab-more):not(#planner-nav-chip):not(#nav-go-btn):not(#nav-tools),
.gps-chip,
#gps-chip,
#map .gps-chip,
body > .gps-chip,
#fab-recenter,
#fab-fullscreen,
.traffic-live-btn,
.buffy-badge {
  clip-path: none !important;
  border-radius: 50% !important;
}
#map .voice-btn,
#map .transport-fab,
#map .safety-fab,
#map .fs-fab,
#map .planner-fab,
#map .buffy-badge,
.voice-btn,
.transport-fab,
.safety-fab,
.fs-fab,
.planner-fab,
.buffy-badge,
.map-topbar .map-fab:not(#nav-stop-fab):not(#nav-skip-fab):not(#fab-more),
.mobile-actions .map-fab:not(#nav-stop-fab):not(#nav-skip-fab):not(#fab-more),
.nav-banner .nav-mini:not(#nav-stopall):not(#nav-stop-fab):not(#nav-skip-fab),
.nav-banner .nav-x,
#fab-menu-left,
#fab-menu-right,
#fab-recenter,
#fab-fullscreen,
#gps-chip,
.traffic-live-btn {
  clip-path: none !important;
  border-radius: 50% !important;
}
/* Palette rejoint le bouton meme quand drag.js le reparente hors
   #map (miroirs hors-scope, fin de feuille, memes degrades v251). */
.recenter-fab:not(#nav-stop-fab):not(#nav-skip-fab) {
  background: linear-gradient(150deg, #2f7bff 0%, #1a54d8 100%) !important;
  color: #fff !important;
  border-color: rgba(47, 123, 255, 0.5) !important;
  box-shadow: 0 8px 22px -6px rgba(47, 123, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.recenter-fab.on {
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.35), 0 8px 26px -6px rgba(47, 123, 255, 0.8) !important;
}
.fs-fab {
  background: linear-gradient(160deg, #ffffff, #e8eef7) !important;
  border: 1px solid #c9d4e3 !important;
  box-shadow: var(--shadow-md) !important;
}
.voice-btn:not(#nav-stop-fab):not(#nav-skip-fab) {
  background: linear-gradient(150deg, #e2492f 0%, #b93a24 100%) !important;
  color: #fff !important;
  border-color: rgba(226, 73, 47, 0.55) !important;
  box-shadow: 0 8px 22px -6px rgba(226, 73, 47, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.transport-fab {
  background: linear-gradient(150deg, #6366f1 0%, #4a4fd4 100%) !important;
  color: #fff !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.safety-fab {
  background: linear-gradient(150deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 8px 22px -6px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.planner-fab {
  background: linear-gradient(150deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #fff !important;
  border-color: rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 8px 22px -6px rgba(14, 165, 233, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.traffic-live-btn {
  background: linear-gradient(150deg, #12b76a 0%, #0a8f52 100%) !important;
  color: #fff !important;
  border-color: rgba(18, 183, 106, 0.5) !important;
  box-shadow: 0 8px 22px -6px rgba(18, 183, 106, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.traffic-live-btn:not(.active) {
  background: linear-gradient(150deg, #ffffff 0%, #eef1f6 100%) !important;
  color: #5d6b7e !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 10px 24px -8px rgba(16, 24, 40, 0.2) !important;
}
.gps-chip {
  background: linear-gradient(160deg, #eaf3ff, #d4e6ff) !important;
  color: #1a73e8 !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   v272.341 — LA PASTILLE COMPTeur D'ARRÊT ET LE GROS ▶ NAVIGUER
   RESTENT des PILLS 999px MÊME DRAGUÉS (Bob 29 oct : « la pastille
   est ovale, tu es allé chercher des versions trop loin »). CAUSE
   PRUVEE : les deux éléments sont des page-floats (drag.js) — quand drag.js
   les flotte, ils reçoivent .fab-float/.fab-float-page et le bloc rond 340
   leur imposait border-radius:50% sur une forme large (78vw/170px) =
   OVALE. FIX en FIN de feuille : exclusion explicite
   des deux ids dans les sélecteurs .fab-float/.fab-float-page du
   bloc rond (fait plus haut) + ré-affirmation de leur pill natif
   v272.201/206 ici. le coffre #nav-tools est aussi exclu : il garde
   son octogone d'origine, dragué ou pas (nature STOP/octogone).
   ============================================================ */
#planner-nav-chip,
#planner-nav-chip.fab-float,
#planner-nav-chip.fab-float-page,
#nav-go-btn,
#nav-go-btn.fab-float,
#nav-go-btn.fab-float-page {
  clip-path: none !important;
  border-radius: 999px !important;
}

/* ============================================================
   v272.354 — LE GROS OVALE PLEINE PAGE (Bob 1 nov : « en arrière-plan,
   de temps à autre, il y a un gros ovale qui prend toute la page »).
   CAUSE PRUVEE AU CODE : le bloc rond v272.139 (en tête de cette feuille,
   ligne 967) pose `border-radius: 50% !important` sur TOUT
   .fab-float/.fab-float-page — or drag.js flotte AUSSI des éléments
   LARGES : la pastille tournante #rep-cycler (≈100vw) et le sélecteur
   de mode #map3d-mode (≈210px). Un pill de 100vw avec des coins à 50 %
   = UN GROS OVALE SUR TOUTE LA PAGE. Le v272.341 exclusait les deux ids
   pills À LA MAIN — la même famille de bug remontée à chaque nouvel
   élément dragué large. DÉSORMAIS : garde UNIVERSELLE posée par drag.js
   tout seul — `fab-oval-guard` est ajouté à TOUT flottant plus large que
   96 px, et cette règle (en fin de feuille : elle gagne sur le
   bloc 139 comme l'exclusion 341) le remet en pill 999px, octogones
   pris (clip-path rien). Les vrais boutons ronds (≤ 96px) ne changent
   aucunément : ils n'ont jamais la classe.
   ============================================================ */
.fab-oval-guard,
.fab-oval-guard.fab-float,
.fab-oval-guard.fab-float-page {
  border-radius: 999px !important;
  clip-path: none !important;
}