/* ============================================================
   louelafête — Correctifs mobile P2
   Confort, longueur de page et vitesse (points 7 à 11 de l'audit).
   À charger APRÈS style.css, apple-theme.css et mobile-p1.css.
   ============================================================ */

/* ── P2.9 — Le hero en WebP (≈ 59 ko au lieu de 278 ko)
   Trois déclarations volontaires, dans cet ordre : la première (JPEG) sert
   de repli aux très vieux navigateurs, les suivantes prennent le dessus
   dès que image-set() est comprise. ── */
.hero { background-image: url('../images/hero.jpg'); }
.hero {
  background-image: -webkit-image-set(url('../images/hero.webp') type('image/webp'), url('../images/hero.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/hero.webp') type('image/webp'), url('../images/hero.jpg') type('image/jpeg'));
}

/* ── P2.8 — La hauteur du hero ne doit plus sauter sur iOS
   `vh` change quand la barre d'URL de Safari se replie : on passe en `svh`
   (petite hauteur de vue, valeur stable) avec `vh` en repli. ── */
.hero { min-height: 88vh; min-height: 88svh; }

/* ── P2.7 — Moins de gestes pour arriver à « Réserver » ── */
@media (max-width: 640px) {
  /* Hero court et net : la photo reste visible, les boutons sont à portée
     de pouce sans défiler. Hauteur fixe = zéro recadrage pendant le scroll. */
  .hero {
    min-height: 470px;
    height: auto;
    padding: 96px 20px 44px;
  }
  .hero__title    { font-size: 34px; line-height: 1.08; letter-spacing: -.9px; }
  .hero__subtitle { font-size: 17px; line-height: 1.45; }

  /* Titres de section ramenés à la densité mobile (36 px → 27 px) */
  .section__title { font-size: 27px; line-height: 1.12; letter-spacing: -.5px; }
  .section__lead  { font-size: 16px; }

  /* Version mobile du hero : 21 ko au lieu de 59 ko */
  .hero { background-image: url('../images/hero.jpg'); }
  .hero {
    background-image: -webkit-image-set(url('../images/hero-840.webp') type('image/webp'), url('../images/hero.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/hero-840.webp') type('image/webp'), url('../images/hero.jpg') type('image/jpeg'));
  }
}

/* ── P2.9 — Les cartes de packs passent par <picture> : on neutralise la
   boîte intermédiaire pour que la photo garde exactement sa mise en page. ── */
.pack--photo picture,
.reserver__fiche-media picture { display: contents; }

/* ── P2.11 — Au doigt, un ruban qui défile tout seul est ingérable
   (la pause au survol n'existe pas). Sur écran tactile : on coupe
   l'animation et on laisse le doigt piloter, avec accrochage. ── */
@media (hover: none) and (max-width: 900px) {
  .galerie__ruban,
  .temoignages__ruban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Le fondu des bords cacherait la première et la dernière photo
       une fois le ruban piloté au doigt. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .galerie__ruban::-webkit-scrollbar,
  .temoignages__ruban::-webkit-scrollbar { display: none; }

  .galerie__piste,
  .temoignages__piste { animation: none; }

  .galerie__piste      { padding: 0 16px; }
  .temoignages__piste  { padding: 0 16px; }

  .galerie__item,
  .temoignages__piste > * { scroll-snap-align: center; }
}