/* VOYA FINAL MOBILE — no horizontal page scroll */
*,
*::before,
*::after { box-sizing:border-box; }

html,body,#ecran-app,#contenu {
  width:100%;
  max-width:100%;
  min-width:0;
}

html,body { overflow-x:hidden !important; }

@media (max-width:600px) {
  .contenu { padding-left:14px !important; padding-right:14px !important; }

  .rs-humeurs {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  .rs-humeurs button {
    width:100% !important;
    min-width:0 !important;
  }

  .carte-postale {
    width:100% !important;
    max-width:100% !important;
  }

  .grille,.galerie,.g2,.g3,.g4 {
    max-width:100% !important;
    min-width:0 !important;
  }
  .grille>* ,.galerie>* ,.g2>* ,.g3>* ,.g4>* {
    min-width:0 !important;
    max-width:100% !important;
  }

  img,video,svg,iframe,canvas { max-width:100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   PWA installée (écran d'accueil) — correctifs dimensions
   ══════════════════════════════════════════════════════════════ */

/* 1. iOS zoome automatiquement sur tout champ < 16px, et le zoom reste
      bloqué après la connexion → tout déborde et la barre du bas disparaît.
      16px minimum sur les écrans tactiles = plus aucun zoom. */
@media (hover:none) and (pointer:coarse) {
  input, select, textarea, .champ { font-size:16px !important; }
}

/* 2. Pas de conteneur de défilement parasite : "clip" coupe le débordement
      horizontal sans casser le défilement ni la barre fixée en bas. */
html, body { overflow-x:clip !important; }
@supports not (overflow:clip) { html, body { overflow-x:hidden !important; } }
html, body { height:auto !important; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* 3. Zones sûres (encoche / Dynamic Island / barre d'accueil) */
.entete {
  padding-top:env(safe-area-inset-top, 0px) !important;
  height:calc(66px + env(safe-area-inset-top, 0px)) !important;
  padding-left:max(14px, env(safe-area-inset-left, 0px));
  padding-right:max(14px, env(safe-area-inset-right, 0px));
}
@media (max-width:900px) {
  .entete { height:calc(62px + env(safe-area-inset-top, 0px)) !important; }
  .mise-en-page { min-height:calc(100dvh - 62px - env(safe-area-inset-top, 0px)) !important; }
  .contenu { padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .nav-bas {
    display:flex !important;
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    z-index:60 !important;
    padding-bottom:max(6px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    transform:translateZ(0);
  }
  .toast { bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
}
.menu-mobile-panel { padding-top:calc(18px + env(safe-area-inset-top, 0px)) !important; }
.fond-auth, .ecran.centre.actif {
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.rs-panneau {
  padding-top:calc(20px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}
.modal-boite { max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }

/* 4. En-tête : jamais plus large que l'écran */
@media (max-width:600px) {
  .entete { gap:8px; }
  .entete .logo { flex:0 0 auto; }
  .actions-entete { margin-left:auto; display:flex; gap:6px; flex:0 1 auto; }
  .actions-entete .rond, .actions-entete .mobile-menu-btn { flex:0 0 auto; }
}

/* ══ Carte (Leaflet) : ne passe plus jamais au-dessus du menu du bas ══
   Leaflet utilise des z-index 400 à 1000 ; on les enferme dans la carte. */
#carte-voyage, .leaflet-container {
  position:relative;
  z-index:0 !important;
  isolation:isolate;
  max-width:100%;
  overflow:hidden;
}
@media (max-width:900px) {
  /* Hauteur qui tient entre l'en-tête et le menu du bas */
  #carte-voyage {
    height:min(58vh, calc(100dvh - 62px - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px)) !important;
    min-height:260px;
    border-radius:16px;
  }
}
.leaflet-popup-content { margin:12px 14px; font:13px/1.4 Inter, system-ui, sans-serif; }
.popup-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.popup-actions .btn { font-size:12px; padding:7px 10px; }

/* ══ Lieux détectés : retirer / remettre ══ */
.lieux-detectes { margin-top:14px; }
.lieux-puces { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.lieu-puce {
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  border:1px solid var(--ligne); background:var(--carte); color:var(--encre);
  border-radius:999px; padding:7px 8px 7px 13px; font:700 12px Inter, system-ui, sans-serif; cursor:pointer;
}
.lieu-puce span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lieu-puce i { font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--ligne); font-size:11px; flex:0 0 auto; }
.lieu-puce.off { opacity:.55; }
.lieu-puce.off span { text-decoration:line-through; }
.lieux-liste { display:flex; flex-direction:column; gap:8px; }
.lieu-ligne { display:flex; align-items:center; gap:10px; min-width:0; padding:6px 0; border-top:1px solid var(--ligne); }
.lieu-ligne.off { opacity:.55; }
.lieu-mini { width:42px; height:42px; border-radius:10px; flex:0 0 auto; background:#ddd center/cover; }
.lieu-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.lieu-txt b, .lieu-txt small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lieu-txt small { color:var(--muet); font-size:11px; }
.lieu-ligne .btn { flex:0 0 auto; white-space:nowrap; }

/* ══ Lieux ajoutés à la main ══ */
.tete:has(> .btn.orange) { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px; }
.hors-ligne { background:color-mix(in srgb, var(--jaune) 22%, var(--carte)); border:1px solid var(--ligne); border-radius:12px; padding:10px 12px; margin:0 0 10px; }
.placer-info { background:var(--encre); color:var(--fond); border-radius:12px; padding:8px 12px; margin:10px 0 0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.placer-info .btn { color:var(--fond); }
.al-pos { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.al-pos .btn { flex:1 1 auto; }
.lieu-pin { display:grid; place-items:center; font-size:20px; background:color-mix(in srgb, var(--orange) 18%, var(--carte)) !important; }
.pin-manuel { width:36px; height:36px; display:grid; place-items:center; font-size:26px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.lieu-ligne .btn[title] { padding-left:10px; padding-right:10px; }

/* ══ Menu du bas : taille "appli" sur téléphone ══ */
@media (max-width:900px) {
  .nav-bas { padding-top:8px !important; padding-left:max(6px, env(safe-area-inset-left, 0px)) !important; padding-right:max(6px, env(safe-area-inset-right, 0px)) !important; gap:2px; }
  .nav-bas a {
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-height:58px; padding:4px 2px; border-radius:14px;
    font-size:12.5px !important; font-weight:700 !important; letter-spacing:.01em; line-height:1.1;
    color:#b4bfcc !important; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  }
  .nav-bas a i { font-size:25px !important; line-height:1; display:block; }
  .nav-bas a.actif { color:var(--jaune) !important; background:rgba(255,255,255,.08); }
  .nav-bas a:active { transform:scale(.94); }
  .nav-bas a:nth-child(4), .nav-bas a:nth-child(5) { display:none !important; }
  .contenu { padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  .toast { bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
}
/* Petits téléphones (iPhone SE…) : un peu plus compact pour que tout tienne */
@media (max-width:360px) {
  .nav-bas a { font-size:11px !important; }
  .nav-bas a i { font-size:22px !important; }
}