/* ══════════════════════════════════════════════════════════════
   AMOLOTO · RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ─── ≤ 1080px : tablette ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .am-fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .am-footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
  .am-footer__top > div:last-child { grid-column: 1 / -1; }
}

/* ─── ≤ 900px : nav mobile ─────────────────────────────────────── */
@media (max-width: 900px) {
  .am-nav { display: none; }
  .am-header__phone { display: none; }
  .am-hamburger { display: flex; }
  .am-header__actions .am-btn--gold { display: none; }

  .am-zones { grid-template-columns: 1fr; gap: var(--am-s7); }
  .am-zones__photo { order: -1; }
  .am-proof { grid-template-columns: 1fr; gap: var(--am-s7); }
  .am-reviews__grid { grid-template-columns: 1fr; }
  .am-reviews__head { align-items: flex-start; }
  .am-post-teaser { grid-template-columns: 120px 1fr; gap: var(--am-s4); }
  .am-article__body { max-width: 100%; }

  .am-facts__row { grid-template-columns: repeat(2, 1fr); }
  .am-facts__item:nth-child(3) { border-left: none; }
  .am-facts__item:nth-child(1), .am-facts__item:nth-child(2) { border-bottom: 1px solid var(--am-line-dark); padding-bottom: var(--am-s6); }

  .am-fleet-index__row { grid-template-columns: 40px 84px 1fr; row-gap: var(--am-s3); }
  .am-fleet-index__row .am-btn { grid-column: 2 / 4; justify-self: start; }
  .am-fleet-index__price { grid-column: 1 / 4; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .am-fleet-index__price span { display: inline; }
  .am-fleet-index__photo { width: 84px; height: 56px; }

  .am-fleet-cat__group-head { flex-direction: column; align-items: flex-start; }
  .am-fleet-grid { grid-template-columns: 1fr; }

  .am-footer__top { grid-template-columns: 1fr 1fr; gap: var(--am-s6) var(--am-s5); }
  .am-footer__top > div:first-child { grid-column: 1 / -1; }
  .am-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--am-s3); }

  /* Barre CTA fixe : uniquement mobile, place à réserver en bas de page */
  .am-mobile-cta { display: flex; }
  body { padding-bottom: 64px; }
  .am-hero { padding-bottom: 0; }
}

/* ─── ≤ 720px : ticket de réservation empilé ───────────────────── */
@media (max-width: 720px) {
  .am-ticket { grid-template-columns: 1fr; }
  .am-ticket__field { border-right: none; border-bottom: 1px solid var(--am-line); }
  .am-ticket__submit { padding: 18px; }

  .am-hero__content { max-width: 100%; }
  .am-hero { align-items: flex-end; }
  .am-hero__body { padding-bottom: var(--am-s6); }

  h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }

  .am-zones__pin { font-size: .72rem; padding: 5px 10px 5px 7px; }
}

/* ─── ≤ 560px : mobile étroit ──────────────────────────────────── */
@media (max-width: 560px) {
  .am-container { padding: 0 var(--am-s5); }
  .am-section { padding: var(--am-s7) 0; }
  .am-facts__row { grid-template-columns: 1fr 1fr; }
  .am-post-teaser { grid-template-columns: 1fr; }
  .am-post-teaser__img { aspect-ratio: 16/9; }
  .am-day-card { padding: var(--am-s5); }
  .am-footer__top { grid-template-columns: 1fr; }
  .am-footer__top > div { grid-column: 1 / -1; }
}

/* ─── Filet de sécurité mobile : grilles génériques à colonnes fixes ──
   `.am-grid` est utilisé avec un `grid-template-columns` inline (formulaire
   de réservation, contact, à propos, pages locales). Sans cette règle, le
   grid garde ses colonnes desktop en dessous de 900px et déborde
   horizontalement (mesuré : scrollWidth 774px pour un viewport 390px sur
   reserver.html). Placée en fin de fichier + !important pour gagner sur
   le style inline, quel que soit l'ordre des autres media queries. */
@media (max-width: 900px) {
  /* minmax(0, 1fr), pas juste 1fr : sinon un champ a min-content large
     (ex. input[type=date]) reste sur la piste implicite `auto` et fait
     deborder le grid (et son parent) au lieu de se retrecir. */
  .am-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Embed RentHub : filet de securite mobile, generereux comme sur desktop
     (le widget RentHub ne scrolle pas toujours en interne : une hauteur
     trop courte tronque des etapes entieres du parcours). */
  .am-renthub-frame iframe { min-height: 1500px; }
}

/* ─── Tunnel de reservation (reserver.html) : zero scroll avant l'action ──
   Le masque de recherche prime sur tout le reste au premier ecran mobile :
   compact, jamais empile en 4 lignes pleine largeur (voir am-ticket), et
   les badges de reassurance passent derriere l'embed plutot que de
   repousser la ligne de flottaison. */
@media (max-width: 640px) {
  .am-tunnel-header { height: 52px; }
  .am-tunnel-header__phone span { display: none; }
  .am-tunnel-top { padding: var(--am-s3) 0 var(--am-s4); }

  /* Depuis l'ajout des heures : date et heure sur la même ligne, la date
     large et l'heure étroite, une ligne par étape (départ puis retour). */
  .am-tunnel-mask {
    grid-template-columns: 1.35fr .65fr;
    grid-template-areas: "lieu lieu" "dep hdep" "ret hret" "submit submit";
  }
  .am-tunnel-mask__field--lieu { grid-area: lieu; border-right: none; border-bottom: 1px solid var(--am-line); padding: 12px var(--am-s4); }
  .am-tunnel-mask__field--dep { grid-area: dep; border-bottom: 1px solid var(--am-line); padding: 12px var(--am-s4); }
  .am-tunnel-mask__field--ret { grid-area: ret; border-bottom: 1px solid var(--am-line); padding: 12px var(--am-s4); }
  .am-tunnel-mask__field--hdep { grid-area: hdep; }
  .am-tunnel-mask__field--hret { grid-area: hret; }
  .am-tunnel-mask__field--hdep, .am-tunnel-mask__field--hret {
    border-right: none; border-bottom: 1px solid var(--am-line); padding: 12px var(--am-s4);
  }
  .am-tunnel-mask__submit { grid-area: submit; padding: 14px; min-height: 48px; justify-content: center; }

  /* Badges : masques sur mobile pour ne jamais repousser le masque/embed
     sous la ligne de flottaison (rappeles plus bas, pres du bloc WhatsApp). */
  .am-tunnel-badges { display: none; }

  /* Mode plein ecran mobile : header 52px (regle deja posee plus haut) +
     barre de recap plus fine (~44px) -> calc() ajuste en consequence. */
  .am-tunnel-recap-bar__inner { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .am-tunnel-recap-bar__info { font-size: .78rem; }
  .am-tunnel-recap-bar__edit { padding: 6px 12px; font-size: .74rem; }
  #am-renthub-section.is-immersive .am-renthub-frame iframe { min-height: calc(100svh - 52px - 44px); }
  #am-renthub-section.is-immersive .am-renthub-frame__loader { height: calc(100svh - 52px - 44px); }
}

/* Assistant de réservation : en dessous de 640px, le panneau occupe toute
   la largeur utile et se cale en feuille basse.

   La barre CTA fixe mobile (.am-mobile-cta) fait 70px de haut et porte un
   z-index de 460 : sans décalage elle recouvre le champ de saisie du chat,
   et sans z-index supérieur elle passe devant le panneau ouvert. Mesuré en
   headless, pas estimé. */
@media (max-width: 640px) {
  .am-chat { right: 12px; left: 12px; bottom: calc(70px + 12px + var(--am-cookie-h, 0px)); z-index: 470; }
  .am-chat__toggle { width: 100%; justify-content: center; }
  .am-chat__panel { width: 100%; max-height: min(72vh, 540px); }
  .am-chat__log { padding: 14px; }
  .am-chat__msg { max-width: 92%; }
}

/* Bandeau cookies : au-dessus de la barre CTA fixe mobile (70px), et
   au-dessus du lanceur du chat qui occupe déjà le coin bas droit. */
@media (max-width: 640px) {
  .am-cookie { left: 12px; right: 12px; bottom: calc(70px + 12px); padding: 13px 15px; }
  .am-cookie__ok { width: 100%; }
}