/* ══════════════════════════════════════════════════════════════
   mobile-pro.css — étuCook
   ─────────────────────────────────────────────────────────────
   À charger APRÈS accueil.css / styles.css.
   Regroupe tous les raffinements mobile-first pour un rendu
   qui fait "app native" plutôt que "site web".

   Contenu :
     1. Safe areas (notch iPhone, home indicator)
     2. Meta theme-color dynamique
     3. Micro-interactions (button press, card tap, heart pulse)
     4. Toast notifications
     5. Skeleton loaders
     6. Bannière d'installation PWA
     7. Mode PWA installée (plein écran)
     8. Touch feedback amélioré
     9. Transitions de page (View Transitions API)
   ══════════════════════════════════════════════════════════════ */


/* ══ 1. SAFE AREAS — respect du notch iPhone ════════════════ */
/*    Utilise env(safe-area-inset-*) pour ne rien tronquer.
      viewport-fit=cover doit être dans le viewport meta.       */

.navbar {
  padding-top: env(safe-area-inset-top);
  padding-left:  max(4px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

.app-shell {
  padding-left:  max(var(--page-px), env(safe-area-inset-left));
  padding-right: max(var(--page-px), env(safe-area-inset-right));
}


/* ══ 2. MODE PWA (app installée) ══════════════════════════════ */
/*    Quand l'app est lancée depuis l'écran d'accueil,
      pas de barre d'URL → on peut utiliser tout l'espace.       */

html.is-pwa {
  /* Support de la home indicator iOS + safe area */
  padding-bottom: env(safe-area-inset-bottom);
}

html.is-pwa .navbar {
  /* Navbar collée en haut en mode PWA (sans marge du haut) */
  top: 0;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding-top: max(8px, env(safe-area-inset-top));
  /* Compenser le padding pour garder l'espace interne du contenu */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

/* ══ FIX PWA — Contenus décalés vers le bas pour éviter la nav plus haute ══ */
/* On cible SEULEMENT le container top-level de chaque page (jamais imbriqué)  */
html.is-pwa .app-shell,
html.is-pwa .frigo-page,
html.is-pwa .courses-page,
html.is-pwa .admin-page,
html.is-pwa .profil-page,
html.is-pwa .recipe-hero {
  padding-top: calc(var(--nav-h) + var(--nav-top) + env(safe-area-inset-top, 0px) + 14px) !important;
}

/* auth-wrap a un padding-top plus généreux */
html.is-pwa .auth-wrap {
  padding-top: calc(var(--nav-h) + var(--nav-top) + env(safe-area-inset-top, 0px) + 28px) !important;
}

/* hero (landing index) encore plus généreux */
html.is-pwa .hero {
  padding-top: calc(var(--nav-h) + var(--nav-top) + env(safe-area-inset-top, 0px) + 40px) !important;
}


/* ══ 3. MICRO-INTERACTIONS ═══════════════════════════════════ */

/* ── Boutons : compression subtile au press ─────────────────── */
.btn,
.nav-btn,
.sidebar__btn,
.bottom-nav__item,
button:not([disabled]) {
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1),
              opacity .15s ease,
              box-shadow .2s ease;
  will-change: transform;
}
.btn:active:not([disabled]),
.nav-btn:active,
.sidebar__btn:active,
.bottom-nav__item:active,
button:active:not([disabled]) {
  transform: scale(.96);
  transition-duration: 60ms;
}

/* ── Cards : lift au tap ───────────────────────────────────── */
.recipe-card {
  transition: transform .18s ease, box-shadow .2s ease;
  will-change: transform;
}
.recipe-card:active {
  transform: scale(.98);
  box-shadow: var(--sh-card);
}

/* ── Bouton favoris : pulse au clic ────────────────────────── */
@keyframes heartPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.btn--pulsing {
  animation: heartPulse .55s cubic-bezier(.34, 1.56, .64, 1);
  animation-fill-mode: both;
}

/* ── Ripple subtil au tap (Material Design light) ──────────── */
.recipe-card,
.sidebar__btn,
.btn-overlay {
  position: relative;
  overflow: hidden;
}


/* ══ 4. TOASTS NOTIFICATIONS ═════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 12px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  width: min(400px, calc(100vw - 24px));
}

@media (min-width: 768px) {
  .toast-container {
    bottom: 24px;
    left: auto;
    right: 24px;
    transform: none;
    align-items: flex-end;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15);
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .28s cubic-bezier(.4,0,.2,1),
              transform .32s cubic-bezier(.34,1.56,.64,1);
  max-width: 100%;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--leaving {
  opacity: 0;
  transform: translateY(-10px);
  transition-duration: .22s;
}

.toast--success { background: #1e7e3d; }
.toast--error   { background: var(--danger); }
.toast--info    { background: var(--ink); }

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast__icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--white);
}
.toast__message {
  flex: 1;
  min-width: 0;
}
.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px -4px 0;
  border-radius: 4px;
  transition: color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.toast__close:hover { color: var(--white); background: rgba(255,255,255,.15); }


/* ══ 5. SKELETON LOADERS ═════════════════════════════════════ */
/*    Placeholders animés pendant le chargement des cards.       */

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--sand) 0%,
    var(--sand-2) 50%,
    var(--sand) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* Skeleton pour une card recette entière */
.recipe-card-skeleton {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.recipe-card-skeleton__img {
  width: 100%;
  height: 120px;
  background: linear-gradient(90deg, var(--sand), var(--sand-2), var(--sand));
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.recipe-card-skeleton__body {
  padding: 10px 12px 12px;
}
.recipe-card-skeleton__line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sand), var(--sand-2), var(--sand));
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  margin-bottom: 6px;
}
.recipe-card-skeleton__line--short { width: 60%; }
.recipe-card-skeleton__line--tiny  { width: 40%; height: 8px; margin-bottom: 0; }

@media (min-width: 560px) { .recipe-card-skeleton__img { height: 130px; } }
@media (min-width: 768px) { .recipe-card-skeleton__img { height: 140px; } }


/* ══ 6. BANNIÈRE D'INSTALLATION PWA ══════════════════════════ */

.pwa-install-banner {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 12px) + 12px);
  left: 12px;
  right: 12px;
  z-index: 9600;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--forest);
  color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 32px rgba(27,74,54,.35), 0 4px 8px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity .32s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 500px;
  margin: 0 auto;
}
.pwa-install-banner--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pwa-install-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--white);
  padding: 4px;
  object-fit: contain;
}
.pwa-install-banner__body {
  flex: 1;
  min-width: 0;
}
.pwa-install-banner__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.pwa-install-banner__sub {
  font-size: 11.5px;
  font-weight: 400;
  opacity: .85;
  line-height: 1.3;
}
.pwa-install-banner__yes {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--white);
  color: var(--forest);
  border: none;
  border-radius: var(--r-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
.pwa-install-banner__no {
  flex-shrink: 0;
  padding: 6px 8px;
  background: rgba(255,255,255,.15);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-banner__no:hover { background: rgba(255,255,255,.25); }

@media (min-width: 768px) {
  .pwa-install-banner {
    bottom: 24px;
    left: auto;
    right: 24px;
    max-width: 380px;
    margin: 0;
  }
}


/* ══ 7. TOUCH FEEDBACK — supprime le highlight bleu par défaut ═ */

* {
  -webkit-tap-highlight-color: rgba(27,74,54,.10);
}
button, a, [role="button"] {
  -webkit-tap-highlight-color: rgba(27,74,54,.15);
}


/* ══ 8. AMÉLIORATIONS DIVERSES ════════════════════════════════ */

/* Empêcher le scroll horizontal accidentel */
html, body {
  overflow-x: hidden;
}

/* Selection texte plus jolie */
::selection {
  background: rgba(27,74,54,.20);
  color: var(--ink);
}

/* Images : rendu net + transitions fluides */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Focus visible amélioré pour clavier */
:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   ios-install-guide.css — étuCook
   ─────────────────────────────────────────────────────────────
   Styles pour le mini-guide visuel d'installation iOS Safari.
   À ajouter à ton mobile-pro.css (ou charger séparément).
   ══════════════════════════════════════════════════════════════ */


/* Bannière iOS Safari : petit indicateur en bas d'écran */
.pwa-install-banner--ios-safari,
.pwa-install-banner--ios-other {
  /* Reprend le style de base de la bannière */
}


/* ══ Mini-guide iOS Safari : full-screen overlay ══════════════ */

.ios-install-guide {
  position: fixed;
  inset: 0;
  z-index: 9800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ios-install-guide--visible {
  opacity: 1;
  pointer-events: auto;
}

.ios-install-guide__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,20,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ios-install-guide__box {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 20px);
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 12px;
  right: 12px;
  background: var(--surface, #fff);
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(30px);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 480px;
  margin: 0 auto;
}
.ios-install-guide--visible .ios-install-guide__box {
  transform: translateY(0);
}

.ios-install-guide__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: var(--sand, #edeade);
  border: none;
  border-radius: 50%;
  color: var(--muted, #8a8a7a);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.ios-install-guide__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink, #1a1a14);
  margin: 0 0 4px;
  padding-right: 40px;
}

.ios-install-guide__intro {
  font-size: 13px;
  color: var(--muted, #8a8a7a);
  margin: 0 0 20px;
  font-weight: 500;
}

.ios-install-guide__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ios-install-guide__step:last-of-type { border-bottom: none; }

.ios-install-guide__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest, #1b4a36);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.ios-install-guide__desc {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2, #3d3d30);
  line-height: 1.5;
  padding-top: 6px;
}

.ios-install-guide__done {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: var(--forest, #1b4a36);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .15s ease;
}
.ios-install-guide__done:active {
  transform: scale(.97);
  background: var(--forest-m, #2d6147);
}


/* ══ 9. TRANSITIONS DE PAGE — désactivées ═════════════════════════
   La View Transitions API (@view-transition / navigation:auto) a été
   retirée : sur recette-detail.php (mise en page très différente,
   grande photo hero) elle provoquait un blocage du scroll (molette,
   trackpad, clavier — seule la barre de défilement restait
   utilisable), signe d'une transition qui ne se terminait pas
   proprement. Pas assez fiable pour la garder même ailleurs.
════════════════════════════════════════════════════════════════ */