/* ==========================================================================
   GARBADROME — Adaptations écran
   ========================================================================== */

@media (max-width: 1120px) {
  .menu__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .hero__inner  { grid-template-columns: 1fr; text-align: center; }
  .hero__lede   { margin-inline: auto; }
  .hero__actions,
  .hero__pills  { justify-content: center; }
  .hero .eyebrow { justify-content: center; }
  .hero__stage  { order: -1; max-width: 420px; margin-inline: auto; }
  .hero__frame  { aspect-ratio: 4 / 3.4; }
  .hero__sticker { left: -10px; bottom: 20px; }

  /* Centré, la bande décorative doit s'effacer des deux côtés. */
  .hero__band {
    max-width: 260px;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  }
  .hero__stage::after { right: -14px; bottom: -18px; width: 140px; height: 140px; }

  .story__grid  { grid-template-columns: 1fr; }
  .story__media { max-width: 460px; margin-inline: auto; }

  .ci__grid     { grid-template-columns: 1fr; }
  .ci__mapWrap  { max-width: 540px; margin-inline: auto; }

  .find__grid   { grid-template-columns: 1fr; }
  .find__mapCard { aspect-ratio: 4 / 3; }

  .drinks__grid { grid-template-columns: 1fr; }
  .drink        { max-width: 560px; }
}

@media (max-width: 900px) {
  .how__list { grid-template-columns: 1fr; }
  .how__item { padding: 1.8rem 0 1.8rem 0; }
  .how__item + .how__item { padding-left: 0; border-top: 1px solid var(--line-inv); }
  .how__item + .how__item::before { display: none; }
  .how__txt { max-width: none; }
}

@media (max-width: 780px) {
  .precisions { grid-template-columns: 1fr; }
  .find__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 76px; }
  .menu__grid   { grid-template-columns: 1fr; }
  .dish__visual { aspect-ratio: 16 / 9; }
  .foot__grid   { grid-template-columns: 1fr 1fr; }
  .story__facts li { grid-template-columns: 1fr; gap: .2rem; }
  .tier__head,
  .drinks__head { flex-wrap: wrap; gap: .8rem; }
  .tier__rule   { order: 3; flex-basis: 100%; }
  .story__quote { right: 4px; bottom: -18px; }
  .find__hero .frame { aspect-ratio: 16 / 9; }
}

/* ---- Le haut de page sur mobile ----
   Trois boutons empilés : ils doivent respirer, et la hiérarchie doit rester
   lisible (appeler > WhatsApp > voir la carte). */
@media (max-width: 560px) {
  .hero__title   { margin-bottom: 1.15rem; }
  .hero__lede    { margin-bottom: 1.35rem; font-size: var(--t-base); }
  .hero__band    { height: 15px; background-size: auto 15px; margin-bottom: 1.15rem; }
  .hero .status  { margin-bottom: 1.15rem; }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: 1.7rem;
  }
  .hero__actions .btn { width: 100%; }
  .hero__actions .btn--lg { padding-block: .95rem; }
  /* Le troisième bouton est un appui, pas un appel : on l'allège. */
  .hero__actions .btn--outline {
    padding-block: .8rem;
    font-size: var(--t-sm);
    background: rgba(255,253,249,.6);
  }

  .hero__pills { gap: .4rem; }
  .hero__pills li { padding: .36rem .8rem; }
}

@media (max-width: 420px) {
  .foot__grid { grid-template-columns: 1fr; }
  .drink {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "media name"
      "media txt"
      "media price";
  }
  .drink__price  { justify-self: start; }
  .hero__sticker { left: -4px; bottom: 12px; padding: .75rem 1rem; }
}

/* ---- Impression : la carte doit sortir proprement ---- */
@media print {
  .topstrip, .nav, .actionbar, .motif, .how, .ci, .final,
  .proof, .cater, .faq, .status,
  .find__mapCard, .find__actions, .hero__stage { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .dish, .drink, .precision, .infoblk { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .dish__name, .dish__price, .h2, .tier__title { color: #000 !important; }
  .menu__grid { grid-template-columns: repeat(2, 1fr); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}