/* ====================================================================
   RESPONSIVE.CSS — Ajustements par palier
   Base mobile-first dans style.css. Paliers : 768px (tablette), 1024px
   (bureau). Vérifié à 375 / 768 / 1024 px sur une page soin bois... non,
   ici : une page soin et la page d'accueil, à chaque livraison.
   ==================================================================== */


/* ==== Tablette — 768px ==== */
@media (min-width: 768px) {

  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }

  .hero__grille { grid-template-columns: 1fr; }

  .carte-praticienne { grid-template-columns: 320px 1fr; }

  .soin-fiche { grid-template-columns: repeat(2, 1fr); }

  .galerie { grid-template-columns: repeat(3, 1fr); }

  .pied-de-page__grille { grid-template-columns: repeat(2, 1fr); }

  .cta-collant { display: none; } /* dès la tablette, le header suffit */
}


/* ==== Bureau — 1024px ==== */
@media (min-width: 1024px) {

  .nav-principale { display: block; }
  .menu-toggle { display: none; }
  .entete__actions .btn-tel { display: inline-flex; }

  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }

  .hero__grille { grid-template-columns: 1.05fr 0.95fr; }
  .hero__contenu { padding-right: var(--space-md); }

  .soin-fiche { grid-template-columns: repeat(4, 1fr); }

  .galerie { grid-template-columns: repeat(4, 1fr); }

  .pied-de-page__grille { grid-template-columns: repeat(4, 1fr); }

  .conteneur, .conteneur--etroit { padding-inline: var(--space-md); }
}


/* ==== Grand bureau — 1440px : on plafonne, pas de réglage supplémentaire
   nécessaire grâce à --container-max ; le contenu ne s'étire pas au-delà. ==== */