/**
 * Verrou « paysage » : lorsque l'utilisateur tourne le téléphone sur le côté,
 * on superpose un overlay plein écran avec le même fond que l'app et le logo
 * en gros plan au centre, par-dessus tout le contenu.
 *
 * Ne s'active que sur petits écrans en orientation paysage (téléphones et
 * petites tablettes), pour ne pas masquer l'app sur desktop / grande tablette.
 *
 * Implémenté en CSS-only via body::after — aucune modification de HTML
 * nécessaire. L'overlay reproduit le fond app-bg.png (cf. base.css body::before)
 * et place le logo bouchardndl par-dessus.
 */

@media screen and (orientation: landscape) and (max-height: 600px) {
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483646; /* au-dessus de tout (modals, popovers, force-update, etc.) */
    pointer-events: auto;
    background-color: #e4e2de;
    background-image:
      url('https://bouchardndl.ca/assets/images/logo.png'),
      url('../images/app-bg.png'),
      radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, rgba(196, 177, 85, 0.12) 42%, transparent 68%),
      radial-gradient(ellipse 55% 40% at 78% 92%, rgba(255, 228, 150, 0.35) 0%, transparent 60%),
      linear-gradient(168deg, #efede9 0%, #e0ddd8 38%, #d2cfc9 100%);
    background-position:
      center center,
      center bottom,
      center bottom,
      center bottom,
      center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    /* Logo (ratio 800x320 ≈ 2.5:1) : prend presque toute la zone visible.
       Largeur = min(96vw, 96vh × 2.5) → toujours contenu, jamais coupé.
       Les autres couches reproduisent le fond de body::before. */
    background-size:
      min(96vw, 240vh) auto,
      cover,
      100% 100%,
      100% 100%,
      100% 100%;
    /* Animation douce d'apparition. */
    animation: landscape-lock-in 180ms ease-out both;
  }

  /* Bloque l'interaction et le scroll de l'app derrière. */
  html,
  body {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

@keyframes landscape-lock-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}