/* MAPREVO — surcouche mobile (chargée après Maprevo.css). Retirer la balise <link> pour revenir en arrière. */
/* Règle du fichier : tout est dans une media query mobile/tablette ou (pointer: coarse).
   Le desktop (≥ 1024 px, souris) ne doit pas bouger d'un pixel. */

/* ══════════════════════════════════════════════════════════════════
   1. TÉLÉPHONE + TABLETTE (≤ 768)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Encoche : l'en-tête descend sous la barre d'état (0 hors PWA plein écran) */
  :root { --header-h: calc(56px + env(safe-area-inset-top)); }
  .app-header, .topbar {
    padding-top: env(safe-area-inset-top);
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  /* Champs < 16 px = zoom automatique d'iOS au focus. Une règle pour tous. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }

  /* Recherche d'adresse : était masquée sous 900 px (display:none) */
  .top-search { display: block; flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 4px; }
  .top-search .mr-search-input { height: 44px; padding: 0 12px 0 34px; text-overflow: ellipsis; }
  .mr-search-wrap:has(.mr-search-clear:not([style*="none"])) .mr-search-input { padding-right: 44px; }
  .brand { min-height: 44px; }
  .top-search .mr-search-input::placeholder { font-size: 13px; }
  .mr-search-icon { left: 12px; }
  .mr-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* doublon de la croix maison */
  .mr-search-clear { width: 40px; height: 40px; right: 2px; }
  .mr-search-results {
    position: fixed; left: 8px; right: 8px;
    top: calc(var(--header-h) + 6px);
    max-height: calc(100dvh - var(--header-h) - 100px);
    overscroll-behavior: contain;
  }
  .mr-search-item { min-height: 48px; }
  .top-spacer { display: none; }

  /* Boutons d'en-tête : 44 px au doigt */
  .top-actions .chip, .top-actions .tb-btn { min-width: 44px; min-height: 44px; justify-content: center; }

  /* ── Un seul élément flottant en bas : quand une feuille / un panneau
     occupe le bas, le bouton Fond de plan et les crédits s'effacent
     (ils étaient recouverts à moitié, ou recouvraient la feuille). ── */
  body:has(#panelOutils.left:not(.sidebar-hidden):not(.mr-hidden-strict), .mr-vsub-bar:not(.hidden),
           #mr-time-machine-panel, #mr-section-panel, #mr-solar-panel, #mr-style-panel, #mr-draw-style-panel,
           #mr-story-panel, .mrlg.on, #volume-editor-panel, #mr-walk-hud, #cardSondage:not(.hidden),
           #mrViewsPanel:not(.hidden), #mrBasemapPanel:not(.hidden)) .mr-bottom-credits,
  body:has(#panelOutils.left:not(.sidebar-hidden):not(.mr-hidden-strict), .mr-vsub-bar:not(.hidden),
           #mr-time-machine-panel, #mr-section-panel, #mr-solar-panel, #mr-style-panel, #mr-draw-style-panel,
           #mr-story-panel, .mrlg.on, #volume-editor-panel, #mr-walk-hud, #cardSondage:not(.hidden),
           #mrViewsPanel:not(.hidden)) .mr-basemap-btn { display: none !important; }

  /* Annotation (.tool-panel) : était sous l'en-tête (top:12px absolu) */
  .tool-panel {
    position: fixed !important;
    top: calc(var(--header-h) + 8px) !important;
    max-height: calc(100dvh - var(--header-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 9990 !important;
  }

  /* Placement IFC : 340 px fixes à droite → pleine largeur sous l'en-tête */
  #mr-ifc-place-panel {
    left: 8px !important; right: 8px !important; width: auto !important;
    top: calc(var(--header-h) + 8px) !important;
    max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto;
  }
  #mr-ifc-place-panel input { padding: 8px 10px !important; min-height: 44px; }
  #mr-ifc-place-panel button { min-height: 44px; }

  /* Modale Import : 100vh → 100dvh (barre d'URL mobile) */
  #mr-import-modal-js { height: 100dvh !important; }
  #mr-import-modal-js > div:last-child { max-height: calc(100dvh - 24px) !important; overscroll-behavior: contain; }
}

/* ══════════════════════════════════════════════════════════════════
   2. TABLETTE PORTRAIT (641–768) — le menu Données ne s'ouvrait pas
   Maprevo.css pousse .panel hors écran (translateX(-100%)) sous 768 px
   et attend une classe .open que le JS ne pose jamais (il bascule
   .sidebar-hidden). On suit l'état réellement utilisé par le JS.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 768px) {
  #panelOutils.left:not(.sidebar-hidden):not(.mr-hidden-strict) { transform: none; }
  /* Panneaux ancrés à gauche : ne pas passer sous la barre d'outils (62 px) */
  .tool-drawer { left: 74px !important; }
  .tool-panel, #mr-ifc-place-panel { left: 74px !important; right: 12px !important; width: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════
   3. TÉLÉPHONE (≤ 640) — bottom nav active
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── BLOQUANT : les deux sub-bars Mesures + Dessin s'affichaient sur la
     feuille Données (body.mr-sidebar-open .mr-vsub-bar {display:flex!important}
     battait .mr-vsub-bar.hidden en spécificité). ── */
  body .mr-vsub-bar.hidden { display: none !important; }

  /* En-tête : marque + recherche + Importer. « Tutoriel » reste dans Plus. */
  .app-header, .topbar { gap: 6px; }
  #btnTutoriel { display: none !important; }

  /* Libérés des crédits, panneaux et sub-bars descendent contre la nav :
     plus de carte visible au-dessus. */
  .mr-vsub-bar, body.mr-sidebar-open .mr-vsub-bar,
  #mr-time-machine-panel, #mr-section-panel, #mr-solar-panel, #mr-style-panel,
  #mr-draw-style-panel, #mr-story-panel {
    bottom: calc(var(--mr-nav-h) + 8px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--header-h) - var(--mr-nav-h) - 24px - env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  #panelOutils.left { height: min(76dvh, calc(100dvh - 130px)) !important; }
  .mr-mm-sheet { max-height: 75dvh; overscroll-behavior: contain; }

  /* Légende : au-dessus de la nav, pleine largeur, défilable */
  .mrlg {
    position: fixed !important;
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
    top: auto !important; transform: none !important;
    bottom: calc(var(--mr-nav-h) + 8px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--header-h) - var(--mr-nav-h) - 24px) !important;
  }

  /* Forage : passait sous la nav (Tracer / Tout supprimer inaccessibles) */
  .tool-drawer {
    left: 8px !important; right: 8px !important; max-width: none !important;
    bottom: calc(var(--mr-nav-h) + 8px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--header-h) - var(--mr-nav-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
  }

  /* Profil en long : 420 px fixes calés à droite → sortait à gauche */
  #profileContainer {
    left: 8px !important; right: 8px !important; width: auto !important;
    top: calc(var(--header-h) + 8px) !important;
  }

  /* Volume : panneau d'édition au-dessus de la nav */
  #volume-editor-panel { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }

  /* Toasts : collés en bas à droite, ils couvraient la nav et les sub-bars.
     Placés sous l'en-tête, pleine largeur : rien d'utile n'est masqué. */
  [id^="maprevo-toast-"] {
    top: calc(var(--header-h) + 8px) !important; bottom: auto !important;
    left: 8px !important; right: 8px !important; max-width: none !important;
  }

  /* Popups de mesure (Distance, Coordonnées…) : jamais hors écran */
  [id^="measure-popup-"] { max-width: calc(100vw - 16px); }

  /* Tutoriel : le pied (Précédent + points + Suivant) débordait de 43 px
     et les puces de liste étaient éclatées en colonnes (li en flex). */
  .mr-tuto-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .mr-tuto-dots { display: none; }       /* la progression reste dans l'en-tête (1/7 + barre) */
  .mr-tuto-btn-prev, .mr-tuto-btn-next { min-height: 44px; }
  .mr-tuto-card { max-height: calc(100dvh - 24px); }
  .mr-tuto-list li { display: block; position: relative; padding-left: 36px; }
  .mr-tuto-list li > i:first-child { position: absolute; left: 14px; top: 13px; }

  /* Tour guidé : « Commencer le tour » débordait du pied à 360 px */
  body .mr-tour-foot { padding: 10px 12px; gap: 4px; }
  body .mr-tour-btn-prev:disabled { display: none; }
  body .mr-tour-btn { padding: 9px 14px; white-space: nowrap; }
  body .mr-tour-pop:not(.mr-tour-pop-centered) .mr-tour-icon { display: none; } /* bulle compacte : laisse voir la cible */

  /* Historique : années 20 px de haut, 30 px de large, « 2025 » coupé.
     Deux lignes de 5 : chaque année devient une cible ≥ 44 × 44. */
  .mr-tm-ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 0; }
  .mr-tm-tick { min-height: 44px; min-width: 44px; padding: 2px; }
  .mr-tm-compare-btn { min-height: 40px; }
  /* Poignée du comparateur : à mi-hauteur elle tombait derrière le panneau Historique */
  .mr-sv-handle { top: 30%; }

  /* Lisibilité : textes fonctionnels < 12 px remontés, sans changer la mise en page */
  .mr-mn-item span { font-size: 12px; }
  .mr-vsub-item span, .mr-vsub-bar span { font-size: 12px !important; }
  .mr-mm-item span { font-size: 12px; }
  #panelOutils .mr-theme-card-sub { font-size: 11px !important; }
  .mr-tm-tick-year { font-size: 12px !important; letter-spacing: 0; }
  .mr-tm-hint, .mr-solar-tip, .mr-style-tip, .mr-story-tip { font-size: 12px; }
  .mr-style-desc { font-size: 10.5px; }
  .mr-solar-preset, #mrSolarPlay { font-size: 12px; }
  .t-sub, .mr-wms-cat-visual-sub { font-size: 11.5px; }
  .tp-foot, .tool-drawer label, .tool-panel span, .tool-panel small { font-size: 12px; }

  /* Plancher 12 px dans les panneaux : surtitres, sous-titres, libellés, badges.
     (1) classes communes des panneaux ; (2) tailles posées en style inline par le JS.
     Les crédits légaux (pills swisstopo / GEOREVO) ne sont pas concernés. */
  :is(#panelOutils, .mr-mm-sheet, #mr-time-machine-panel, #mr-section-panel, #mr-solar-panel, #mr-style-panel,
      #mr-draw-style-panel, #mr-story-panel, #mrViewsPanel, #mrBasemapPanel, #mr-share-modal, #mr-pdf-modal,
      #mr-shortcuts-help, .mrlg, #modalTutoriel, #mr-ifc-place-panel, #mr-import-modal-js, .tool-panel,
      .tool-drawer, [id^="measure-popup-"], #volume-editor-panel, #mr-split-view)
    :is([class*="label"], [class*="-sub"], [class*="desc"], [class*="hint"], [class*="tip"], [class*="badge"],
        [class*="-sec-h"], [class*="empty"], [class*="angle"], [class*="preset"], [class*="compare-btn"],
        [class*="import-btn"], .mr-style-name, .mr-basemap-item-name, .mr-sc-footer, .chip, .sep,
        small, label, kbd, summary, [class*="ticks"] span, .mr-solar-group-head > span:first-child,
        .mrlg-txt > *, .mrlg-cnt, .mrlg-muted, .mr-tuto-hero-tag span, .mr-mm-title) {
    font-size: 12px !important;
  }
  .mr-walk-exit { font-size: 12px !important; }
  /* « FOND DE PLAN » à 12 px sur deux lignes : bouton un peu plus large */
  .mr-basemap-btn { width: 84px !important; }
  .mr-basemap-btn-label { font-size: 12px !important; }
  :is([style*="font-size:8px"], [style*="font-size:9px"], [style*="font-size:9.5px"], [style*="font-size:10px"],
      [style*="font-size:10.5px"], [style*="font-size:11px"], [style*="font-size:11.5px"],
      [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"]):not(.mr-bottom-credits *):not(input, select, textarea) {
    font-size: 12px !important;
  }

  /* Mode Marche : « Sortir » 34 px et HUD clavier inutile au doigt sur la nav */
  .mr-walk-exit { min-height: 44px; }
  body.mr-mobile .mr-walk-controls { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   4. ÉCRAN TACTILE (doigt, gants) — cibles ≥ 44 px
   (pointer: coarse) n'atteint jamais le desktop souris.
   ══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Boutons d'action des panneaux (32–39 px avant) */
  .btn, .mr-solar-preset, #mrSolarPlay, .mr-story-add-btn, .mr-views-add-btn,
  #mrPdfCancel, #mrPdfGenerate, .mr-tree-import-btn,
  .mr-tuto-btn-prev, .mr-tuto-btn-next, .mr-walk-exit { min-height: 44px; }

  /* Croix de fermeture (14–32 px avant) : zone de tap 44 × 44, icône inchangée */
  .mr-tm-close, .mr-solar-close, .mr-style-close, .mr-story-close, .mr-views-close,
  .mr-share-close, .mr-sc-close, .mr-tuto-close, .mr-theme-back-btn, .mrlg-x, .tp-close,
  #mrPdfClose, #mrClose, #mrIfcClose, #closeProfileBtn, .mr-share-copy-btn {
    min-width: 44px !important; min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  /* Croix en <span data-close> des toasts et popups de mesure */
  [id^="maprevo-toast-"] [data-close], [id^="measure-popup-"] [data-close] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0;
  }

  /* Mode Marche : pavé directionnel (créé par le JS seulement sur écran tactile).
     Maintien = déplacement continu ; le glisser sur la carte oriente la vue. */
  #mr-walk-hud .mr-walk-pad, #mr-walk-hud .mr-walk-pad2 { position: absolute; pointer-events: auto; display: grid; gap: 4px; }
  #mr-walk-hud .mr-walk-pad {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(var(--mr-nav-h, 0px) + 12px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px);
  }
  #mr-walk-hud .mr-wp-up { grid-area: 1 / 2; } #mr-walk-hud .mr-wp-left { grid-area: 2 / 1; }
  #mr-walk-hud .mr-wp-right { grid-area: 2 / 3; } #mr-walk-hud .mr-wp-down { grid-area: 3 / 2; }
  #mr-walk-hud .mr-walk-pad2 {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--mr-nav-h, 0px) + 88px + env(safe-area-inset-bottom));
  }
  #mr-walk-hud .mr-walk-pad button, #mr-walk-hud .mr-walk-pad2 button {
    width: 56px; height: 56px; border: none; border-radius: 16px;
    background: rgba(255,255,255,0.94); color: #0A0E1A; font-size: 20px;
    box-shadow: 0 6px 18px rgba(10,14,26,0.25);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }
  #mr-walk-hud .mr-walk-pad button.on, #mr-walk-hud .mr-walk-pad2 button.on { background: #1A56E8; color: #F5C518; }

  /* Tour guidé (styles injectés plus tard dans <head> : body pour l'emporter) */
  body .mr-tour-btn, body .mr-tour-skip { min-height: 44px; }
  body .mr-tour-close { width: 44px; height: 44px; margin: -8px -10px -8px 0; }

  /* Années de l'Historique (tablette : une ligne suffit, 10 × 44 px) */
  .mr-tm-tick, .mr-tm-compare-btn { min-width: 44px; min-height: 44px; }

  /* Interrupteur « Édition » (case 14 px) */
  #annoPanel label.switch { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  #annoPanel input[type="checkbox"] { width: 22px; height: 22px; }

  /* Curseur natif de taille : piste plus haute = pouce plus facile à attraper */
  #annoSize { min-height: 32px; }
  /* Curseurs Historique / Soleil : piste fine conservée (fond limité au contenu),
     zone de tap portée à ~30 px et pouce agrandi (18–20 px → 28 px) */
  .mr-tm-slider, .mr-solar-slider { box-sizing: content-box; padding: 12px 0; background-clip: content-box; }
  .mr-tm-slider::-webkit-slider-thumb, .mr-solar-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .mr-tm-slider::-moz-range-thumb, .mr-solar-slider::-moz-range-thumb { width: 28px; height: 28px; }
  #annoColor { min-height: 44px; }

  /* Champs de saisie au doigt */
  .tool-drawer input, .tool-panel input[type="text"], #mrWmsSearch, #mrPdfTitle, #mrPdfClient,
  .mr-share-url-input, .mr-story-title-input { min-height: 44px; }

  /* Défilement interne sans entraîner la page / la carte */
  #panelOutils, .mr-mm-sheet, .mr-search-results, .mr-basemap-panel, .tool-panel, .tool-drawer,
  #mr-time-machine-panel, #mr-solar-panel, #mr-style-panel, #mr-story-panel, .mrlg-body { overscroll-behavior: contain; }
}