/* ====================================================================
   DAISYWORLD — Responsive
   Approche fluide (clamp, grid, aspect-ratio) + points d'ajustement.
   Testé : 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920 / 2560
   ==================================================================== */

/* ------------------------- Très grands écrans ---------------------- */
@media (min-width: 1921px) {
  :root {
    --container: 1400px;
    --container-wide: 1720px;
  }
  body { font-size: 1.1rem; }
}

/* --------------------------- Laptop / tablette paysage ------------- */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr 0.9fr; }
  .hero__card { left: -1rem; max-width: 220px; }

  .pilates__list { gap: 1.3rem 1.5rem; }

  .footer__top { grid-template-columns: 1.2fr 1fr; row-gap: 3rem; }
}

/* --------------------------- Tablette portrait --------------------- */
@media (max-width: 920px) {
  .header__nav { display: none; }
  .burger { display: block; }

  .experience__grid,
  .pilates__grid,
  .glow__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .experience__media { order: -1; max-width: 560px; }
  .pilates__media { max-width: 560px; margin-inline: auto; }
  .glow__media { max-width: 560px; }

  .gallery__masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(96px, 15vw, 160px); }

  .insta__card { grid-template-columns: 1fr; }
  .insta__thumbs { max-width: 460px; }

  .contact__media { order: -1; max-width: 560px; }

  /* Offre découverte : visuel au-dessus du texte */
  .offer__intro { grid-template-columns: 1fr; }
  .offer__media { order: -1; max-width: 560px; }

  /* Carte : empilée sous le bloc d'informations */
  .map { grid-template-columns: 1fr; }
  .map__frame { aspect-ratio: 4 / 3; }
}

/* ------------------------------ Mobile ----------------------------- */
@media (max-width: 760px) {
  :root {
    --section-space: clamp(4rem, 16vw, 5.5rem);
    --radius: 18px;
    --radius-lg: 24px;
  }

  .btn--header { display: none; }

  .hero {
    padding-top: calc(5.2rem + env(safe-area-inset-top));
    padding-bottom: 5.6rem;
    min-height: 100svh;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .hero__media { justify-self: stretch; width: 100%; }
  .hero__figure { aspect-ratio: 4 / 5; }
  .hero__card {
    position: static;
    max-width: none;
    margin-top: -2.6rem;
    margin-inline: 1rem;
    position: relative;
    z-index: 2;
  }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__scroll { display: none; }

  .experience__img-small { grid-column: 1 / 7; margin-top: -22%; }

  .pilates__badge { right: 0.6rem; padding: 1rem 0.9rem; max-width: 140px; }
  .pilates__badge-big { font-size: 2.2rem; }
  .pilates__list { grid-template-columns: 1fr; }

  .studio__grid { grid-template-columns: 1fr; }
  .studio__card:nth-child(2) { transform: none; }
  .studio__card { aspect-ratio: 4 / 4.6; }

  .glow__img-small { grid-column: 7 / 13; margin-top: -26%; }

  .planning__track { gap: 1.6rem; }

  .contact__actions .btn { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }

  .footer__top { grid-template-columns: 1fr; row-gap: 2.6rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .lightbox__nav { display: none; }
  .lightbox__figure { max-width: 94vw; }

  /* Formulaire : une seule colonne, zones tactiles confortables */
  .offer-form__grid { grid-template-columns: 1fr; }
  .offer__media { aspect-ratio: 4 / 4.6; }
  .offer__badge { width: 100%; justify-content: center; }
  .field input[type='text'],
  .field input[type='email'],
  .field input[type='tel'] { padding-block: 1rem; }
  .field--check input { width: 24px; height: 24px; }

  .map__frame { aspect-ratio: 1 / 1; }
  .map__side .btn { justify-self: stretch; justify-content: center; }

  .faq__item summary { gap: 1rem; }

  /* ================== CENTRAGE DU CONTENU (MOBILE) ==================
     Sur téléphone, toutes les sections adoptent le même axe centré.
     Les listes à puce et les numéros, positionnés en absolu sur desktop,
     repassent en flux pour rester alignés avec le texte centré.

     Pour revenir à un alignement à gauche : supprimer ce bloc.
     Pour un compromis (titres centrés, paragraphes à gauche) : conserver
     uniquement les règles marquées « TITRES ».
  ================================================================== */

  /* TITRES — chapeaux, titres de section et sous-titres */
  .section__head--left { text-align: center; }

  /* Blocs de texte éditoriaux */
  .experience__text,
  .pilates__content,
  .glow__content,
  .offer__content,
  .contact__info,
  .map__side { text-align: center; }

  /* Piliers de L'Expérience : numéro au-dessus du titre */
  .experience__pillars li {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .experience__pillar-num { grid-row: auto; margin-bottom: 0.35rem; }

  /* Liste « Inclus dans ton initiation » : coche en ligne devant le texte */
  .offer__included li { padding-left: 0; }
  .offer__included li::before {
    position: static;
    display: inline-block;
    margin-right: 0.7rem;
    transform: translateY(-2px) rotate(-45deg);
  }

  /* Groupes de boutons et d'étiquettes */
  .pilates__cta,
  .glow__tags,
  .contact__actions { justify-content: center; }

  /* Adresse et coordonnées */
  .contact__address,
  .map__side { justify-items: center; }
  .map__side-text { max-width: 32rem; margin-inline: auto; }

  /* Pied de page */
  .footer__brand,
  .footer__nav,
  .footer__contact,
  .footer__book { text-align: center; }
  .footer__logo, .footer__social { margin-inline: auto; }
  .footer__social { justify-content: center; }
  .footer__book .btn { margin-inline: auto; }
  .footer__bottom { align-items: center; text-align: center; }
  .footer__legal { justify-content: center; }
  /* le survol ne doit plus décaler les liens vers la droite */
  .footer__nav a:hover { padding-left: 0; }

  /* Le formulaire garde ses libellés alignés à gauche : un champ de
     saisie se lit mieux quand l'étiquette suit le bord de l'input. */
  .offer-form__body { text-align: left; }
  /* La FAQ conserve son indicateur +/- à droite. */
  .faq__list { text-align: left; }
}

/* --------------------------- Petits mobiles ------------------------ */
@media (max-width: 374px) {
  :root { --gutter: 1rem; }
  .hero__title { font-size: 2.55rem; }
  .contact__actions .btn { flex-basis: 100%; }
  .btn { padding-inline: 1.3rem; }
  .offer-form { padding: 1.3rem 1.1rem; }
  .map__frame { aspect-ratio: 3 / 4; }
}

/* ---------------- Tablettes paysage basses (hauteur) --------------- */
@media (max-height: 620px) and (min-width: 761px) {
  .hero { min-height: auto; padding-block: 7.5rem 4rem; }
}