/*
 * Règle du carrousel (DESIGN.md, « The Carousel Rule ») — décidée le 17 octobre 2026.
 *
 * Sur téléphone, toute rangée de 2 cartes ou plus défile à l'horizontale au lieu de s'empiler :
 * la carte suivante dépasse sur le bord droit pour inviter à glisser, chaque carte se cale au
 * bord gauche, aucune barre de défilement. Sur ordinateur, rien ne change.
 *
 * Toute NOUVELLE grille de cartes s'ajoute à la liste ci-dessous (ou reçoit la classe .carousel).
 * Exceptions voulues, à ne pas ajouter : les choix d'un formulaire (achat, enquête), les étapes
 * numérotées (elles se lisent dans l'ordre), les listes de liens et la FAQ.
 *
 * Chargé en dernier sur toutes les pages, après styles.css et site-pages.css.
 */
@media (max-width: 720px) {
  :is(.bento-grid, .decision-grid, .aid-grid, .guide-grid, .price-grid, .feature-grid, .resource-grid, .plan-grid, .commitment-grid, .terms-grid, .blog-grid, .breakdown-grid, .carousel) {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--carousel-gutter, 22px);
    margin-inline: calc(-1 * var(--carousel-gutter, 22px));
    padding: 4px var(--carousel-gutter, 22px) 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  :is(.bento-grid, .decision-grid, .aid-grid, .guide-grid, .price-grid, .feature-grid, .resource-grid, .plan-grid, .commitment-grid, .terms-grid, .blog-grid, .breakdown-grid, .carousel)::-webkit-scrollbar { display: none; }
  :is(.bento-grid, .decision-grid, .aid-grid, .guide-grid, .price-grid, .feature-grid, .resource-grid, .plan-grid, .commitment-grid, .terms-grid, .blog-grid, .breakdown-grid, .carousel) > * {
    flex: 0 0 min(84%, 340px);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    grid-column: auto;
    grid-row: auto;
  }

  /* La grille de prix de l'accueil est un seul bloc bordé : en carrousel, chaque prix devient une carte. */
  .price-grid { border: 0; border-radius: 0; }
  .price-grid article, .price-grid article + article { border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  :is(.bento-grid, .decision-grid, .aid-grid, .guide-grid, .price-grid, .feature-grid, .resource-grid, .plan-grid, .commitment-grid, .terms-grid, .blog-grid, .breakdown-grid, .carousel) { scroll-behavior: smooth; }
}