/* ============================================================ Kabana Pizz — Interface PWA ============================================================ Bandeau d'installation, bandeau de mise à jour et ajustements du mode autonome (application épinglée). Feuille séparée : ces règles ne servent qu'aux appareils qui savent installer le site, et n'ont rien à faire dans la feuille du back-office. ============================================================ */ .pwa-banner { position: fixed; /* Les elements fixes ignorent la marge de securite posee sur : en paysage sur un ecran a encoche, ils passeraient dessous. */ left: max(var(--page-gutter), env(safe-area-inset-left)); right: max(var(--page-gutter), env(safe-area-inset-right)); /* Sous le panier flottant dans la pile, jamais au-dessus d'une modale de commande. */ bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); max-width: 520px; margin: 0 auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .pwa-banner.is-visible { opacity: 1; transform: translateY(0); } /* Le panier flottant occupe déjà le bas de l'écran d'accueil : le bandeau se pose au-dessus tant qu'il est affiché. */ body:has(.mini-cart:not([hidden])) .pwa-banner { bottom: calc(var(--space-4) + 56px + var(--space-3) + env(safe-area-inset-bottom)); } /* Un tiroir ouvert (panier, commande) prend toute l'attention : le bandeau ne doit pas flotter par-dessus. */ body:has(.drawer-overlay:not([hidden])) .pwa-banner { display: none; } .pwa-banner__icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); } .pwa-banner__text { flex: 1 1 12rem; min-width: 0; } .pwa-banner__title { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-text); } .pwa-banner__hint { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); } .pwa-banner__actions { display: flex; align-items: center; gap: var(--space-1); } .pwa-banner__close { display: grid; place-items: center; /* 44 px : même zone tactile que les autres commandes du site. */ width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font-size: var(--text-xl); line-height: 1; cursor: pointer; } .pwa-banner__close:hover { background: var(--color-surface-sunken); color: var(--color-text); } .pwa-banner__steps { flex: 1 0 100%; margin: 0; padding: var(--space-3) 0 0 var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); } .pwa-banner__steps li + li { margin-top: var(--space-1); } .pwa-banner--update { border-color: var(--color-primary-border); background: var(--color-primary-soft); } @media (prefers-reduced-motion: reduce) { .pwa-banner { transition: none; } } /* ============================================================ Mode autonome (application installée) ============================================================ */ /* Sans barre d'adresse, l'en-tête colle à l'encoche et à la barre d'état : on rend la marge de sécurité au contenu. */ @media (display-mode: standalone) { .topbar { padding-top: env(safe-area-inset-top); } .footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); } } /* En paysage sur un écran à encoche, `viewport-fit=cover` laisse le contenu passer sous l'arrondi : ces marges valent 0 ailleurs. */ @media (orientation: landscape) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* Même raison pour le panier flottant, seul autre élément fixe du site : `viewport-fit=cover` (ajouté pour le mode autonome) laisse désormais le contenu s'étendre sous l'encoche. Les valeurs valent 0 partout ailleurs. */ @media (orientation: landscape) { .mini-cart { left: max(var(--page-gutter), env(safe-area-inset-left)); right: max(var(--page-gutter), env(safe-area-inset-right)); } }