/* Adaptations téléphone et tablette. La base du site est déjà « mobile d'abord » ; ici : le téléphone COUCHÉ, et les réglages tactiles. */

/* Tactile : pas de halo au toucher, pas de délai ni de zoom au double-tap sur les commandes ; les champs ≥ 16 px (sinon iOS zoome au focus) */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1em); }

/* Téléphone couché (court et large) : la mise en page « grand écran », mais compacte. Les règles reprennent celles de min-width: 900px, qui ne s'appliquent pas à 844 px. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  .scene { padding-block: 84px 44px; }
  .scene__head { margin-bottom: 16px; }
  .scene__title { font-size: clamp(2rem, 9vh, 2.9rem); }
  .scene__lead, .scene p { font-size: .98rem; }

  /* accueil : tout tient dans la hauteur, le titre sur une ligne */
  .scene--accueil { padding: 72px var(--gutter) 18px; }
  .hero { display: grid; grid-template-rows: 1fr auto 1fr; padding-block: 0; min-height: calc(100svh - 90px); }
  .hero__stage { grid-row: 2; }
  .hero__info { grid-row: 3; align-self: start; margin-top: 6px; gap: 10px; }
  .br-m { display: none; }
  .hero__title { font-size: clamp(2.8rem, 24vh, 6rem); }
  .hero__lead { font-size: .95rem; max-width: 52ch; }
  .hero__photo--a { width: min(14vw, 28vh); left: calc(2vw - var(--gutter)); top: 0; }
  .hero__photo--b { width: min(12vw, 24vh); right: calc(3vw - var(--gutter)); top: 1vw; }
  .hero__photo--c { display: none; }
  .ring { --ring-text-w: 70vh; --ring-arc-ratio: 1.0467; --ring-font: 17px; }

  /* sections à deux colonnes */
  .lieu { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .cadeau { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .playlist { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .photos-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .tl { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: baseline; }
  .timeline { gap: 18px; }
  .phone-stage { --pw: min(150px, 30vh); }
  .lieu__photo, .cadeau__photo, .playlist__photo { max-height: 62vh; width: auto; max-width: 100%; justify-self: center; }
  .lieu__photo img, .cadeau__photo img, .playlist__photo img { max-height: 58vh; width: auto; max-width: 100%; object-fit: cover; }

  /* menu plein écran : doit tenir dans 390 px */
  .menu { padding: 72px var(--gutter) 10px; overflow-y: auto; }
  .menu__list a { font-size: clamp(1.4rem, 7vh, 2.2rem); }
}

/* Petits téléphones en portrait (iPhone SE, 320-375 px) */
@media (max-width: 380px) {
  .header { padding-inline: 12px; }
  .photo-pill { padding-inline: .8em; }
}

/* Téléphone en portrait : le titre est placé en HAUTEUR VISIBLE (svh), à ~34 % depuis le haut, et la voiture s'arrête dessous (78 %, voir choreo.js) : les deux montent ensemble.
   La hauteur visible (100svh) est celle de l'écran barres du navigateur déployées : rien n'est jamais caché derrière la barre du bas. */
@media (orientation: portrait) and (max-width: 600px) {
  .scene--accueil { padding-top: 96px; padding-bottom: 36px; }
  .hero { min-height: 0; padding-top: max(40px, calc(34svh - 96px)); padding-bottom: 58vw; }   /* le bas garde son espace : c'est là que se pose le polaroïd du bas (hauteur 56vw), sans toucher le bouton */
  /* les deux polaroïds du haut tiennent AU-DESSUS du titre (qui est monté) : plus petits, dimensionnés aussi sur la hauteur visible */
  .hero__photo--a { width: min(26vw, 13svh); left: -5vw; top: 0; }
  .hero__photo--b { width: min(24vw, 12svh); right: -4vw; top: 6vw; }
}
@media (max-width: 380px) {
  .opening__hint { letter-spacing: .14em; font-size: .76rem; }
}