/* ==========================================================================
   Responsive — ce que les tokens ne couvrent pas.

   L'échelle typographique et les espacements sont déjà adaptés dans
   css/tokens.css. Il ne reste ici que les vrais changements de mise en page.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- En-tête : seuls le logo et le bouton restent ----------------------- */
  .site-nav__link {
    display: none;
  }

  /* --- Hero --------------------------------------------------------------- */
  .hero__badge {
    left: 12px;
    bottom: 16px;
  }

  .hero__doodle {
    display: none;
  }

  /* --- Chiffres : deux colonnes, cartes plus compactes -------------------- */
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 18px;
    border-radius: var(--radius-sm);
  }

  .stat-card__label {
    font-size: var(--fs-2xs);
  }

  /* --- Témoignages : une seule vignette à l'écran, qu'on fait défiler ----- */
  .carousel {
    --carousel-per-view: 1;
  }

  /* --- Packs : le pack recommandé passe en premier ------------------------ */
  .pack--featured {
    order: -1;
  }

  /* --- FAQ ---------------------------------------------------------------- */
  .faq__question {
    line-height: 1.4;
  }

  /* --- Appel final -------------------------------------------------------- */
  .final-cta__card {
    padding: 44px 22px;
    border-radius: var(--radius-md);
  }

  .final-cta__title {
    font-size: 28px;
  }

  /* --- Boutons pleine largeur --------------------------------------------- */
  .hero__actions .btn,
  .picker__option {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* --- Barre d'action collée en bas --------------------------------------- */
  .sticky-bar {
    display: flex;
  }

  /* On dégage la hauteur de la barre pour ne rien masquer. */
  .site-footer {
    padding-bottom: 96px;
  }
}