/* ============================================================
   MODE APP — app Android (Trusted Web Activity) et site installé.
   La classe html.est-app est posée dans <head> (base.html) : sans elle,
   rien ici ne s'applique et le site web reste identique.
   ============================================================ */

.app-nav,
.app-progress,
.app-seulement { display: none; }

html.est-app { -webkit-tap-highlight-color: transparent; }

/* ── Barre de chargement : l'app n'a pas de barre d'adresse pour montrer
      qu'une page se charge (réseau lent) ─────────────────────────────── */
html.est-app .app-progress {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1070;
  background: var(--ab-primary);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
html.est-app.is-navigating .app-progress {
  opacity: 1;
  animation: app-progress 10s cubic-bezier(.08, .8, .2, 1) forwards;
}
@keyframes app-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(.92); }
}

/* ── Écran de démarrage : prolonge celui d'Android (même logo de 160 px, au même
      endroit, sur le même fond blanc) jusqu'à la fin du chargement de la page.
      [hidden] + !important : Bootstrap force display:none sur [hidden] ─────── */
html.app-lancement .app-splash[hidden] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fff;
  transition: opacity .35s ease, visibility .35s ease;
  /* Secours si app.js ne se charge pas : disparaît seul après 8 s */
  animation: app-splash-secours .35s ease 8s forwards;
}
html.app-pret .app-splash[hidden] { opacity: 0; visibility: hidden; }
.app-splash img { width: 160px; height: 160px; }
.app-splash-barre {
  position: absolute;
  top: calc(50% + 112px);
  left: 50%;
  width: 64px;
  height: 3px;
  margin-left: -32px;
  border-radius: 3px;
  background: #ececec;
  overflow: hidden;
}
.app-splash-barre::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  border-radius: inherit;
  background: var(--ab-primary);
  animation: app-splash-barre 1.1s ease-in-out infinite;
}
@keyframes app-splash-barre {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
@keyframes app-splash-secours {
  to { opacity: 0; visibility: hidden; }
}

@media (max-width: 991.98px) {
  html.est-app .app-seulement { display: block; }

  /* En-tête allégé : favoris, panier et compte passent dans la barre du bas */
  html.est-app .lc-navbar .lc-icon-btn,
  html.est-app .lc-navbar .dropdown { display: none; }

  /* Le long pied de page du site n'a pas sa place dans une app ;
     ses liens utiles sont dans le menu (section .app-seulement) */
  html.est-app .lc-footer { display: none; }

  /* ── Barre du bas : celle de l'app (templates/app/partials/onglets.html), aux couleurs du site ── */
  html.est-app .app-nav { display: block; }
  /* Parcours d'achat (panier, livraison, paiement) : la barre d'action de la page (.cl-sticky) prend la place */
  html.est-app body:has(.cl-steps) .app-nav { display: none; }
  html.est-app body:has(.app-nav):not(:has(.cl-steps)) {
    padding-bottom: calc(68px + 44px + env(safe-area-inset-bottom, 0px));
  }
}

.app-nav .z-onglets {
  --z-surface: var(--ab-canvas);
  --z-bg: #faf9f7;
  --z-line: var(--ab-hairline);
  --z-ink: var(--ab-ink);
  --z-ink-2: var(--ab-muted);
  --z-primary-soft: #ffe9ed;
  --z-primary-texte: #c21a40;
  --z-primary-fond: #e0254a;
  position: fixed; z-index: 1030;
  left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  height: 68px; padding: 0 4px 6px;
  background: color-mix(in srgb, var(--z-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--z-line);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(17, 17, 26, .16);
  view-transition-name: app-nav;
  user-select: none;
}
html[data-theme="dark"] .app-nav .z-onglets {
  --z-surface: var(--ab-surface-soft);
  --z-bg: var(--ab-canvas);
  --z-primary-soft: #3a1720;
  --z-primary-texte: #ff6b85;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.app-nav .z-svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; width: 24px; height: 24px; stroke-width: 1.8; }
.app-nav .z-onglet {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  min-height: 56px; min-width: 0;
  color: var(--z-ink-2); text-decoration: none;
  transition: color .2s ease;
}
.app-nav .z-onglet-ico {
  position: relative;
  width: 56px; height: 30px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, transform .15s ease;
}
.app-nav .z-onglet-label { font: 600 11.5px/1.15 'Nunito Sans', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-nav .z-onglet.is-actif { color: var(--z-primary-texte); }
.app-nav .z-onglet.is-actif .z-onglet-ico { background: var(--z-primary-soft); }
.app-nav .z-onglet.is-actif .z-svg-plein { fill: currentColor; }
.app-nav .z-onglet.is-actif .z-onglet-label { color: var(--z-ink); font-weight: 800; }
.app-nav .z-onglet:active .z-onglet-ico { transform: scale(.9); }
.app-nav .z-onglet:focus-visible { outline: 2px solid var(--ab-primary); outline-offset: 2px; border-radius: 12px; }
.app-nav .z-onglet-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--z-surface), 0 0 0 3.5px var(--z-line); }
.app-nav .z-onglet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-nav .z-onglet--panier .z-onglet-ico {
  position: absolute; left: calc(50% - 29px); top: -24px;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(145deg, #ff5a76 0%, var(--z-primary-fond) 70%);
  color: #fff;
  box-shadow: 0 0 0 5px var(--z-bg), 0 10px 22px rgba(224, 37, 74, .38);
}
.app-nav .z-onglet--panier .z-svg { width: 26px; height: 26px; }
.app-nav .z-onglet--panier .z-pastille {
  position: absolute; top: -2px; right: -4px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 11px; background: #fff; color: #c21a40;
  font: 800 11.5px/21px 'Nunito Sans', system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px var(--z-primary-fond);
}

@media (prefers-reduced-motion: reduce) {
  html.est-app.is-navigating .app-progress { animation: none; transform: scaleX(.6); }
  html.app-lancement .app-splash[hidden] { transition: none; }
  .app-splash-barre::after { animation: none; left: 30%; }
  .app-nav .z-onglet, .app-nav .z-onglet-ico { transition: none; }
  .app-nav .z-onglet:active .z-onglet-ico { transform: none; }
}