/* Adaptation aux petits ecrans et au tactile
   ---------------------------------------------------------------
   Charge en DERNIER : il ne fait que surcharger les feuilles
   precedentes, sans changer le parcours (memes boutons, memes menus).
   Objectif : que l'application soit utilisable au doigt. */

/* ---- Tactile : cibles de 44px ---- */
@media (pointer: coarse) {
  .verre-bouton { height: 44px; min-width: 44px; }
  #toolbar-bottom .verre-bouton { width: 44px; }
  .fonds-bouton { height: 40px; padding: 0 12px; }
  .filtres-ligne { padding: 10px 8px; }
  .filtres-tout { padding: 6px 4px; }
  #filtres-reinit { padding: 11px 10px; }
  #recherche-resultats li { padding: 10px 12px; }
  .menu-tooltip-item .menu-action { height: 44px; }
  #visite-virtuelle-main div { height: 40px; }
}

/* ---- Marges de securite (encoche, barre de geste) ---- */
#outils-haut { top: calc(15px + env(safe-area-inset-top, 0px)); left: calc(15px + env(safe-area-inset-left, 0px)); }
#toolbar-bottom { right: calc(15px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
#fonds-main { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* ---- Petits ecrans ---- */
@media (max-width: 700px) {

  /* Barre du haut : la recherche passe sur une seconde ligne, pleine largeur */
  #recherche-main {
    top: calc(67px + env(safe-area-inset-top, 0px));
    left: 15px;
    right: 15px;
    width: auto;
    transform: none;
  }
  /* Le logo ne doit pas recouvrir la recherche */
  .logo { max-height: 40px; margin-top: 12px; right: 15px; }

  /* Fonds historiques : barre pleine largeur au-dessus de la barre d'outils du bas */
  #fonds-main {
    left: 15px;
    right: 15px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px;
  }
  #fonds-liste { justify-content: center; }
  #fonds-opacite { width: 140px; }

  /* Panneau de filtres ouvert : il occupe l'ecran, on masque ce qui est dessous */
  body.filtres-ouverts #fonds-main,
  body.filtres-ouverts #toolbar-bottom,
  body.filtres-ouverts #recherche-main { display: none; }

  /* Panneau d'inventaire ouvert : il couvre la carte, le menu radial attend sa fermeture */
  body.panneau-info-ouvert #main-menu-tooltip { visibility: hidden; }

  /* Menu radial : ellipse plus serree, pastilles plus compactes */
  #main-menu-tooltip { --rayon-x: 100px; --rayon-y: 135px; }
  .menu-tooltip-item .menu-action {
    gap: 6px;
    padding: 0 12px 0 9px;
    font-size: 12.5px;
  }
  #main-menu-tooltip #tooltip-desc { max-width: calc(100vw - 30px); font-size: 13px; }

  /* Sous-menu "Visite virtuelle" : au-dessus du bouton (la gauche est hors ecran) */
  #visite-virtuelle-main {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 8px);
    transform: none;
    z-index: 3;
  }
  #visite-virtuelle-main div { margin-left: 0; }

  /* Visite experte : panneau bas pleine largeur */
  #visite-experte-main {
    left: 15px;
    right: 15px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    transform: none;
    flex-wrap: wrap;
    padding: 8px;
  }
  .experte-seg { order: 3; width: 100%; }
  .experte-mode { flex: 1; justify-content: center; padding: 0 8px; }
  .experte-ferme { margin-left: auto; }

  /* Bandeau beta : le texte passe sur deux lignes ; les barres du bas montent d'autant */
  #beta-alert {
    height: auto;
    box-sizing: border-box;
    padding: 2px 10px;
    font-size: 10px;
    line-height: 13px;
  }
  #toolbar-bottom { bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  /* Lecteur de podcast : place au titre */
  #modal-popup .shk-cover,
  #modal-popup .shk-btn_speed { display: none; }
  #modal-popup-body-podcast { padding: 18px 16px 16px; }
  .aide-tete, .aide-corps { padding-left: 20px; padding-right: 20px; }
  .modal { padding: 16px; }
}