/* ============================================================================
   Desktop / large screens — Burger Drive
   RÈGLE : ce fichier ne contient QUE des media queries min-width. En dessous du
   breakpoint (mobile/petite tablette), AUCUNE règle ne s'applique → le mobile
   reste strictement identique. On élargit juste proprement pour ordinateur.
   ============================================================================ */

@media (min-width: 900px) {
  /* Le conteneur app passe d'une colonne téléphone (480px) à une largeur bureau. */
  #app { max-width: 960px; }

  /* Hero : les slides sont en 16:9 (1280×720). Sur desktop, une hauteur fixe donne
     un ratio trop panoramique qui coupe le burger. On passe en aspect-ratio (cadrage
     proche du mobile, ~2.1:1) borné pour rester une bannière élégante. */
  /* Ratio 16:9 = celui des slides (1280×720) → aucun recadrage vertical, les titres
     ("LES WOO BURGERS") ne sont jamais coupés. */
  .resto-cover { height: auto; aspect-ratio: 16 / 9; max-height: 560px;
    margin-top: 18px; border-radius: 22px; }
  .resto-slide { object-position: center center; }

  /* Identité resto (nom, note, statut) : on garde une largeur lisible, centrée,
     au lieu de l'étirer sur toute la largeur. */
  .resto-id { max-width: 580px; margin-left: auto; margin-right: auto; }

  /* Menu : plus de colonnes → cartes de taille raisonnable (pas géantes). */
  .menu-wrap { padding: 28px 32px 48px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
  .section-title { font-size: 27px; }

  /* Survol des cartes (n'existe pas au tactile) : léger relief = feel premium. */
  .card { transition: transform .16s var(--ease, ease), box-shadow .16s ease; }
  .card:not(.sold-out):hover { transform: translateY(-3px); box-shadow: var(--sh-2, 0 10px 26px rgba(0,0,0,.10)); }
  .card:not(.sold-out):hover .card-media img { transform: scale(1.03); }
  .card-media img { transition: transform .25s ease; }

  /* Avis clients : au lieu d'un scroll horizontal (peu naturel à la souris),
     on répartit les cartes en grille centrée qui s'adapte à la largeur. */
  .reviews { padding: 88px 24px 56px; }
  .rv-head-t > b { font-size: 34px; }
  /* Grille 2×2 équilibrée, centrée (plus net qu'un 3+1 avec une carte seule). */
  .rv-scroll { flex-wrap: wrap; justify-content: center; overflow: visible;
    scroll-snap-type: none; gap: 20px; max-width: 760px; margin: 0 auto; padding-top: 34px; }
  .rv-card { flex: 0 1 348px; max-width: 360px; }
  /* Relief au survol (inexistant au tactile) — mouvement à ressort. */
  .rv-card:hover { transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(16,18,20,.05), 0 26px 50px -20px rgba(16,18,20,.22),
      inset 0 0 0 1px rgba(16,18,20,.05); }
  .rv-cta a:hover { transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16,18,20,.06), 0 20px 34px -16px rgba(16,18,20,.28),
      inset 0 0 0 1px rgba(16,18,20,.09); }
  .rv-cta a:hover svg { transform: translateX(3px) scale(1.06); }

  /* Appbar : un peu plus d'air sur les côtés. */
  .appbar { padding-left: 22px; padding-right: 22px; }

  /* Barre panier : reste un pill centré, on l'élargit légèrement pour l'échelle. */
  .cart-bar { width: min(520px, calc(100% - 28px)); }
}

/* Grands écrans (Mac 27", moniteurs larges) : 4 colonnes de menu. */
@media (min-width: 1240px) {
  #app { max-width: 1120px; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}