/* =============================================================================
   Cartes interactives sur téléphone — habillage

   Les cartes livrées empilent le plan puis, dessous, une longue colonne d'aide
   (sites, stationnement, itinéraire, accès). Sur un ordinateur les deux tiennent
   côte à côte ; sur un iPhone la colonne fait 1 600 px, le plan tombe à 438 px
   et le visiteur passe son temps à faire défiler pour revenir à la carte.

   Ici, le plan occupe tout l'écran et l'aide devient un panneau que l'on tire
   du bas. C'est le geste attendu d'une application de carte.

   Ce fichier n'est pas dans le document : le serveur l'y ajoute au moment de
   servir. Les documents livrés par la préfecture restent intacts sur le disque,
   octet pour octet — voir private/portail/manifest.json.
   ========================================================================== */

@media (max-width: 820px) {

  /* --- La page ne défile plus : c'est la carte qui se déplace. ------------ */
  /* `dvh` suit la barre d'adresse de Safari quand elle se rétracte ; `vh` la
     compte toujours ouverte, et le bas de la page passait dessous. */
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }
  @supports (height: 100dvh) { html, body { height: 100dvh; } }
  body { display: flex; flex-direction: column; }

  /* --- Bandeau : 94 px pour un titre, c'est un sixième de l'écran. --------
     On vise le bandeau, et lui seul. `body > div:first-child` attrapait aussi
     le conteneur `#app` des cartes de service et rognait 24 px de plan sur
     toute la largeur. */
  body > header, #app > header, body > .hd {
    flex: none;
    padding: 7px 12px !important;
    padding-top: calc(7px + env(safe-area-inset-top)) !important;
    gap: 8px !important;
  }
  /* Les cartes de service enveloppent tout dans #app : pas de marge perdue. */
  #app { padding: 0 !important; height: 100%; display: flex; flex-direction: column; }
  #app > footer { flex: none; font-size: 10px; padding: 5px 10px !important; }

  /* Le cartouche des cartes de service tenait sur 153 px : un titre en trois
     lignes, sa traduction et le bandeau de diffusion. Tout y reste — en plus
     serré, et à une taille qui suit l'écran. */
  #app > header { font-size: clamp(11.5px, 3.3vw, 15px) !important; padding: 6px 10px !important; }
  #app > header .hrow { gap: 3px !important; }
  #app > header .hrow > div:first-child { line-height: 1.22 !important; }
  #app > header .har { font-size: .9em !important; line-height: 1.3 !important; }
  #app > header .restr { font-size: .7em !important; padding: 4px 9px !important; margin-top: 4px !important; }
  /* Le bandeau se répartissait sur trois lignes — titre, sous-titre, bouton —
     soit 102 px pris sur la carte. Titre et bouton tiennent sur la même ligne,
     le sous-titre passe dessous : 27 px rendus au plan. */
  body > header { flex-wrap: wrap !important; align-items: center !important; gap: 3px 10px !important; }
  #hTitle { flex: 1 1 auto; min-width: 0; order: 1; font-size: 12.5px !important; line-height: 1.2 !important; }
  #langBtn { order: 2; flex: none; }
  #hSub   { order: 3; flex: 1 0 100%; margin: 0 !important;
            font-size: 10.5px !important; line-height: 1.25 !important; opacity: .92; }

  /* --- Le plan prend toute la place restante. ----------------------------- */
  #wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    position: relative;
  }
  #map {
    position: absolute !important;
    inset: 0;
    width: auto !important;
    height: auto !important;
  }

  /* --- La carte d'itinéraire flottante disparaît. -------------------------- */
  /* Elle prenait 121 px en haut du plan et recouvrait à moitié le sélecteur de
     fond. Surtout, elle fait double emploi : l'onglet « Itinéraire » du bas
     porte les mêmes commandes, en plus complet (position, destination, calcul,
     résumé et liens de navigation). Sur téléphone, le haut du plan reste donc
     au plan. */
  #navCard { display: none !important; }

  /* --- L'aide devient un panneau que l'on tire. --------------------------- */
  /* --mx-sheet porte la hauteur courante : les commandes Leaflet s'y accrochent
     pour ne jamais passer dessous. */
  /* Une proportion pure donnerait un tiroir minuscule sur un petit écran et
     démesuré sur une tablette : on la borne des deux côtés. */
  :root { --mx-sheet: 36dvh; }

  #side {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: var(--mx-sheet);
    max-height: 88%;
    margin: 0 !important;
    /* Le haut laisse la place à la barre d'onglets, qui s'y superpose. */
    padding: calc(64px + env(safe-area-inset-bottom)) 13px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .3);
    z-index: 1000;
    transition: height .24s ease;
  }
  /* Fermé, le tiroir se réduit à sa barre d'onglets : tout le reste est plan. */
  #side.mx-closed {
    height: auto !important;
    overflow: hidden;
    padding-bottom: 0 !important;
  }

  /* --- Trois onglets au bas du plan ---------------------------------------
     La colonne d'aide enchaînait quatre sections sur 1 600 px : pour atteindre
     l'itinéraire il fallait passer devant quatorze sites. Elle se range en
     trois onglets — Sites, Stationnement, Itinéraire — dont un seul s'affiche.
     Fermés, ils ne prennent que leur propre hauteur et le plan occupe le reste.
     ---------------------------------------------------------------------- */
  .mx-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .07) inset;
    z-index: 3;
  }
  .mx-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    font-size: clamp(9.5px, 2.7vw, 11.5px);
    color: #5B6470;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mx-nav button .mi { font-size: clamp(16px, 4.8vw, 20px); line-height: 1; }
  .mx-nav button .ml { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mx-nav button.on { background: #1F4332; color: #fff; }

  /* Une seule section à la fois ; les autres ne sont pas dans le chemin.
     La section active porte une classe plutôt qu'un sélecteur par nom : les
     rubriques varient d'une carte à l'autre et on ne peut pas les énumérer. */
  .mx-sec { display: none; }
  .mx-sec.mx-on { display: block; }
  #side.mx-closed .mx-sec { display: none !important; }

  /* Les commandes de la carte restent au-dessus du tiroir. */
  .leaflet-bottom { bottom: var(--mx-sheet); transition: bottom .24s ease; }

  /* Le bouton d'urgence se posait sur la barre d'onglets : il remonte juste
     au-dessus, et reste atteignable quel que soit l'onglet ouvert. */
  #sosBtn {
    bottom: calc(var(--mx-sheet) + 12px) !important;
    top: auto !important;
    transition: bottom .24s ease;
    z-index: 1200;
  }

  /* Même chose pour la légende des cartes de service : ancrée au bas du plan,
     elle disparaissait derrière la barre d'onglets. Elle remonte au-dessus, et
     sa hauteur est bornée — dépliée, elle couvrait le plan qu'elle explique. */
  #lg {
    bottom: calc(var(--mx-sheet) + 10px) !important;
    top: auto !important;
    max-width: min(80vw, 300px);
    max-height: calc(100% - var(--mx-sheet) - 92px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: bottom .24s ease;
  }
  #lgB {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
  }

  /* --- Cibles tactiles : Apple demande 44 px, la carte en proposait 29. --- */
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
  }
  #langBtn, #bSat, #bPlan, #locBtn, #placeBtn, #goBtn,
  #side button, #side .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 16 px minimum sur un menu déroulant, sinon Safari zoome à l'ouverture et
     la carte reste décalée derrière. */
  #side select, #side input, #psel, #dsel {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* --- Lisibilité : la colonne descendait à 9 px. ------------------------- */
  #side { font-size: 13px !important; }
  #side h3 { font-size: 12.5px !important; }
  #side .note, #side small, #side .u { font-size: 11.5px !important; line-height: 1.5 !important; }
  #side table { font-size: 12px !important; }

  /* Une ligne de site tient au doigt. */
  #side .poi { min-height: 48px; }

  /* Le pavé de mentions légales n'a pas à occuper le panneau sur un téléphone. */
  #footNote { font-size: 10px !important; opacity: .75; }
}

/* Écran large : rien n'est touché, la mise en page d'origine s'applique. */