/* ==========================================================================
   CHEELO — RESPONSIVE.CSS
   Ajustements fins par breakpoint (le fluid-type/clamp gère déjà l'essentiel
   dans style.css ; ce fichier couvre la navigation, les grilles et le fine-tuning).
   ========================================================================== */

/* --- Bascule vers navigation mobile --------------------------------------*/
@media (max-width: 900px) {
  .nav-main { display: none; }
  .header-actions .btn-secondary { display: none; }
  .burger { display: flex; }
}

/* --- Tablette / petit desktop ------------------------------------------- */
@media (max-width: 860px) {
  .footer-top { text-align: left; }
  .reviews-head { flex-direction: column; align-items: flex-start; }
}

/* --- Mobile large --------------------------------------------------------*/
@media (max-width: 640px) {
  .section { padding-block: clamp(3.2rem, 12vw, 5rem); }
  .hero { padding-top: 6.5rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 1.4rem; }
  .price-card .ribbon-clip { width: 8rem; height: 8rem; }
  .price-card .ribbon { width: 9rem; font-size: .62rem; padding: .4rem 0; }
  .cookie-banner { left: .7rem; right: .7rem; bottom: .7rem; padding: 1.2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .logo-img { height: 36px; }
  .btn:not(.btn-block) { white-space: normal; text-align: center; max-width: 100%; }
}

/* --- Mobile étroit -------------------------------------------------------*/
@media (max-width: 400px) {
  .logo-img { height: 32px; }
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Grands écrans : plafonner la respiration ---------------------------- */
@media (min-width: 1700px) {
  :root { --container-w: 1320px; }
}