/* ===== Le Sphinx — expérience mobile / PWA ===== */
:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }

* { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; max-width: 100%; }
body { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas, video { max-width: 100%; }
a, button, [role="button"] { touch-action: manipulation; }

/* ---- Barre de navigation basse (mobile) ---- */
.appnav { display: none; }
.appnav-spacer { display: none; }

@media (max-width: 860px) {
  .appnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(200,96,26,0.14);
    padding: 6px 4px calc(6px + var(--safe-b));
    box-shadow: 0 -6px 24px rgba(70,42,22,0.09);
  }
  .appnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: #94897C; font-size: 10px; font-weight: 600;
    padding: 3px 2px; border-radius: 12px; transition: color .16s ease;
  }
  .appnav .appnav-ic {
    width: 46px; height: 30px; display: grid; place-items: center;
    border-radius: 12px; transition: background .16s ease, transform .1s ease;
  }
  .appnav a i { font-size: 21px; }
  .appnav a.active { color: #C8601A; }
  .appnav a.active .appnav-ic { background: rgba(200,96,26,0.13); }
  .appnav a:active .appnav-ic { transform: scale(.88); }

  body:has(.appnav) { padding-bottom: calc(66px + var(--safe-b)) !important; }
  .appnav-spacer { display: block; height: calc(66px + var(--safe-b)); }
}

/* ---- Mode application installée ---- */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-t); }
}