/* ============================================================
   v23.5 — MENU CASCADE ☰ (mobile) : tous les outils de la carte
   regroupés dans UN menu déroulant → plus de place pour la carte
   et les pubs. Desktop : inchangé (le ☰ est caché).
   ============================================================ */
#fab-more { display: none; }
.mobile-actions {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 1300; /* au-dessus des rails (960) et de la chip GPS (1100) */
  width: min(320px, calc(100vw - 1.6rem));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(16, 24, 40, 0.35);
  padding: 0.5rem;
  max-height: 70vh;
  overflow-y: auto;
}
.mobile-actions.open { display: block; animation: maIn 0.16s ease; }
.mobile-actions:not(.open) { visibility: hidden; pointer-events: none; }
.mobile-actions.open { visibility: visible; pointer-events: auto; }
#mobile-actions[aria-hidden="true"] { visibility: hidden !important; pointer-events: none !important; }
#mobile-actions[aria-hidden="true"] button,
#mobile-actions[aria-hidden="true"] a,
#mobile-actions[aria-hidden="true"] input,
#mobile-actions[aria-hidden="true"] select,
#mobile-actions[aria-hidden="true"] [tabindex] { visibility: hidden !important; }
.mobile-actions > .ma-close { position: sticky !important; float: right; margin: 0 0.1rem 0.1rem 0.5rem !important; transform: none; }
.mobile-actions > .ma-title { min-height: 2.4rem; display: flex; align-items: center; }
.mobile-actions .mode-seg { box-sizing: border-box; min-width: 0; flex: 1 1 100%; overflow: hidden; }
.mobile-actions .mode-seg button { min-width: 0; padding: 0.42rem 0.28rem; white-space: nowrap; }
.mobile-actions .mode-seg button span { display: inline; }
#mobile-actions, #header-more-menu { scrollbar-width: thin; scrollbar-color: rgba(102, 112, 133, 0.45) transparent; overscroll-behavior: contain; }
#mobile-actions::-webkit-scrollbar, #header-more-menu::-webkit-scrollbar { width: 5px; }
#mobile-actions::-webkit-scrollbar-thumb, #header-more-menu::-webkit-scrollbar-thumb { background: rgba(102, 112, 133, 0.45); border-radius: 999px; }
#mobile-actions .ma-section[data-ma="mode"] { padding: 0.3rem 0.35rem 0.55rem; }
#mobile-actions .mode-seg button[aria-checked="true"] { outline: 2px solid rgba(255, 122, 0, 0.35); outline-offset: -2px; }
@media (max-width: 360px) {
  .mobile-actions .mode-seg button { font-size: 0.68rem; padding-inline: 0.18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-actions.open { animation: none; }
}
@keyframes maIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ma-title {
  font: 700 0.72rem/1 var(--font-display, inherit);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0.45rem 0.55rem 0.35rem;
}
.ma-section { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.15rem 0.35rem 0.45rem; }
.ma-section:empty { display: none; }
.ma-row {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: 0; background: transparent; font: inherit; text-align: left;
  padding: 0.6rem 0.55rem; border-radius: 10px; cursor: pointer;
  font-weight: 600; color: var(--ink);
}
.ma-row:hover { background: var(--accent-soft, rgba(226, 73, 47, 0.08)); }
.ma-row .ma-state { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: #1c8a4c; }
.ma-row.off .ma-state { color: var(--ink-soft); }
.ma-sep { height: 1px; background: var(--line); margin: 0.2rem 0.5rem; }

/* Les composants repliés dans le menu héritent du style pleine largeur */
.mobile-actions .mode-seg { width: 100%; justify-content: center; }
.mobile-actions .mode-seg button { flex: 1; }
/* v244 : pastilles couleurs en GRILLE 2 colonnes, libellés courts —
   lisibles d'un coup d'œil sans occuper 6 lignes du menu. */
.mobile-actions .map-colors {
  width: 100%;
  flex-wrap: wrap;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.5rem;
  padding: 0.5rem 0.6rem;
}
/* ============================================================
   v272.49 — LES BOUTONS DU MENU ☰ : OCTOGONES COLORÉS (demande client :
   « ronds, octogone ou cône comme les cônes d'entraves » → on garde la
   famille visuelle des boutons de la carte et de la nav). Texte lisible :
   la couleur remplace l'icône, sans déborder.
   ============================================================ */
/* ============================================================
   v272.70 — MENU ☰ SOBRE (demande client 27/09 : « les octogones dans
   le menu de couleur, c'était pas prévu, tu peux l'enlever »). Retour
   au style classique du site : rangées simples, couleurs du thème,
   hover discret. (Les octogones colorés de v272.49 restent sur les
   boutons de la CARTE et de la NAV — pas dans le menu.)
   ============================================================ */
#mobile-actions .ma-row:not(#ma-version) {
  color: inherit;
  font-weight: 600;
}
#mobile-actions .ma-row:not(#ma-version):hover { filter: brightness(1.08); }
#mobile-actions .ma-row .ma-state { color: #1c8a4c; }
#mobile-actions .ma-row.off .ma-state { color: var(--ink-soft); }
/* v272.70 : couleurs par rangée RETIRÉES (le menu reste neutre) : */
#mobile-actions #ma-stop-everything { color: #d93025; font-weight: 800; } /* rouge : arrêt d'urgence reste identifiable */
#mobile-actions #ma-version    { border: 1px dashed var(--line); border-radius: 10px; }

.mobile-actions .map-colors .mc-item { font-size: 0.7rem; }
.mobile-actions .map-fab { width: 40px; height: 40px; font-size: 1rem; }

/* Mobile : le ☰ apparaît, les blocs encombrants quittent la topbar */
@media (max-width: 899px) {
  #fab-more { display: inline-flex; }
  .map-topbar > .mode-seg { display: none; }
  .map-topbar > .map-colors { display: none; }
}

/* v23.4 (desktop) : le 🚦 trafic live passe à droite du rail gauche,
   dans la colonne zoom/GPS — il était recouvert par la pub latérale. */
@media (min-width: 1100px) {
  #map .traffic-live-btn { left: calc((100% - 2.25rem) / 4 + 0.55rem); bottom: 7.4rem; }
}