/* ══════════════════════════════════════════════════════════════
   AFROSTYLE — app installée (écran d'accueil / Android)
   Mêmes réglages que VOYA : zones sûres, zoom, menu du bas lisible.
   ══════════════════════════════════════════════════════════════ */

/* Marges d'écran : Capacitor 8 (Android) fournit --safe-area-inset-*, sinon env() */
:root{
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

/* 1. Pas de zoom automatique sur les champs (iOS zoome sous 16px) */
@media (hover:none) and (pointer:coarse) {
  input, select, textarea, .fi, .select, .textarea { font-size:16px !important; }
}

/* Connexion Google dans l'app Android : via le module natif (classe google-natif).
   Si le module n'est pas présent, on masque le bouton (la popup WebView échoue). */
html.natif:not(.google-natif) #google-btn,
html.natif:not(.google-natif) .auth-divider { display:none !important; }

/* 2. Jamais de défilement horizontal */
html, body { overflow-x:clip !important; max-width:100%; }
@supports not (overflow:clip) { html, body { overflow-x:hidden !important; } }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; }
img, video, iframe, canvas { max-width:100%; }

/* 3. Zones sûres : encoche en haut, barre de navigation en bas */
.topbar { padding-top:var(--sat) !important; height:calc(64px + var(--sat)) !important; }
.auth-screen, .loading { padding-top:calc(20px + var(--sat)); padding-bottom:calc(20px + var(--sab)); }
.booking-top { padding-top:calc(12px + var(--sat)) !important; }
.modal { padding-bottom:calc(20px + var(--sab)) !important; max-height:calc(92dvh - var(--sat)) !important; }
#paywall { padding-top:var(--sat); padding-bottom:var(--sab); }

@media (max-width:760px) {
  .topbar { height:calc(58px + var(--sat)) !important; }
  .sidebar, .sidebar-backdrop { top:calc(58px + var(--sat)) !important; }
  .sidebar { padding-bottom:calc(90px + var(--sab)); }
  .main { padding-bottom:calc(104px + var(--sab)) !important; }

  /* 4. Menu du bas : taille "appli" */
  .bottom-nav { height:calc(68px + var(--sab)) !important; padding:4px max(4px, var(--sar)) var(--sab) max(4px, var(--sal)) !important; }
  .bottom-item { font-size:22px !important; gap:3px !important; min-width:0; border-radius:12px; -webkit-tap-highlight-color:transparent; }
  .bottom-item small { font-size:11px !important; letter-spacing:.02em; white-space:nowrap; }
  .bottom-item.active { background:rgba(232,160,32,.08); }
  .bottom-item:active { transform:scale(.94); }
  .toast-wrap { bottom:calc(84px + var(--sab)) !important; }
}
@media (max-width:340px) {
  .bottom-item small { font-size:10px !important; }
}