/* ==========================================================================
   MyWattUp — Finitions de l'app installée (PWA), 2026-11
   Chargé après app-refonte-2026.css. Ne change ni la structure ni les
   couleurs : uniquement ce qui fait « app finie » sur un téléphone.
   ========================================================================== */

/* Encoche / Dynamic Island : avec viewport-fit=cover et la barre d'état
   « black-translucent », le contenu passe sous l'heure si on ne réserve pas
   la zone sûre du haut. */
body #view-app .app-wrap { padding-top: calc(20px + env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
#view-vitrine .lp-nav-inner { padding-top: calc(16px + env(safe-area-inset-top)); }

/* Comportement « natif » : pas de flash gris au toucher, pas de zoom au
   double-tap, pas de rebond qui révèle le fond du navigateur. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
#view-app button, #view-app a, #view-app .bottom-nav, #view-app [role="button"] { touch-action: manipulation; }
#view-app .bottom-nav, #view-app .bottom-nav * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#view-app img { -webkit-user-drag: none; }

/* Retour visuel au toucher sur les éléments cliquables */
#view-app .bottom-nav a:active,
#view-app .mini-card:active,
#view-app .app-cta:active,
#view-app .icon-btn:active { transform: scale(0.96); transition: transform 0.08s ease; }

/* Barre de navigation du bas : verre dépoli comme sur iOS */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #view-app .bottom-nav { background: rgba(18, 18, 24, 0.78) !important; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
}

/* Avatar : si l'image ne charge pas (réseau, bloqueur), on n'affiche pas le
   texte alternatif brut dans le cercle. */
#view-app img.avatar-preview, #view-app img[class*="avatar"] { color: transparent; font-size: 0; background: radial-gradient(circle at 35% 30%, rgba(212, 255, 63, 0.35), rgba(255, 90, 54, 0.15) 60%, #1a1714); }

/* Focus clavier visible et cohérent */
#view-app :focus-visible, #view-login :focus-visible, #view-onboarding :focus-visible { outline: 2px solid #D4FF3F; outline-offset: 2px; }

/* Barres de défilement discrètes sur ordinateur */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
}
::selection { background: #D4FF3F; color: #0b0d04; }