/* =========================================================
   abpilates Premium · DÉCOUVERTE MOBILE (scroll scénarisé)
   Sur téléphone, l'accueil devient un parcours court :
   le héro de base → des « chapitres découverte » (photo
   d'ambiance + grande phrase + bouton vers la page dédiée)
   → « Pour qui » compact → les tarifs bien rangés → réserver.
   Le bureau ne change pas : les chapitres n'existent qu'en
   mobile, les sections complètes restent la version bureau.
   ========================================================= */

/* ---- bureau : les chapitres découverte n'existent pas ---- */
.disco { display: none; }
.hero__ctas { display: flex; flex-direction: column; gap: 12px; }

/* Bouton « Voir les formules » : présent sur bureau ET mobile — c'est ce
   qu'on demande le plus. Verre dépoli, pour rester lisible sur la photo. */
.hero__cta-formules {
  display: inline-flex;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
}
.hero__cta-formules:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 860px) {

  /* =====================================================
     0. Page continue : sur téléphone, plus de « boîtes
        blanches arrondies sur fond bleu » — les feuilles
        deviennent pleine largeur et s'enchaînent.
     ===================================================== */
  .sheet { margin: 0; border-radius: 0; }
  .giant { margin: 0; border-radius: 0; }

  /* =====================================================
     1. Le parcours : on remplace les sections longues par
        leurs chapitres découverte (les textes complets
        restent sur les pages dédiées).
     ===================================================== */
  .about, .fpmp,
  .method-teaser, .formats,
  .studio,
  .promises { display: none; }

  /* =====================================================
     2. Chapitre découverte : photo + grande phrase + bouton
     ===================================================== */
  .disco {
    display: block;
    padding: clamp(30px, 9vw, 54px) var(--gutter);
  }
  .disco + .disco { padding-top: 6px; }

  .disco__media {
    margin: 0; position: relative;
    border-radius: var(--radius-md); overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--frost-soft);
  }
  /* Chapitres illustrés par une photo en portrait : le cadre 4/3 les coupait
     aux hanches. Cadre 4/5 = on garde l'essentiel du mouvement. */
  .disco__media--portrait { aspect-ratio: 4 / 5; }
  /* image sage dans son cadre (le parallaxe faisait déborder la photo) */
  .disco__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .disco__media::after {      /* voile bas pour asseoir le titre */
    content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
    background: linear-gradient(180deg, transparent, rgba(16, 31, 56, .42));
  }
  .disco__kicker {
    position: absolute; top: 14px; left: 16px; z-index: 2;
    font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: rgba(16, 31, 56, .55); backdrop-filter: blur(4px);
    padding: 6px 12px; border-radius: 100px;
  }

  .disco__title {
    font-family: var(--font-serif); font-style: italic; font-weight: 500;
    font-size: clamp(30px, 8.8vw, 42px); line-height: 1.04; color: var(--navy);
    margin: -26px 0 0 6px; position: relative; z-index: 2;
    text-wrap: balance;
  }
  .disco__title em { color: var(--gold-deep); }
  /* le début du titre chevauche la photo : fond assorti à la page
     (pas de « case blanche »), juste de quoi masquer la photo dessous */
  .disco__title span {
    background: var(--frost); box-decoration-break: clone; -webkit-box-decoration-break: clone;
    padding: 2px 10px 2px 8px; border-radius: 6px;
  }

  .disco__line {
    margin: 12px 6px 0; font-size: 15px; line-height: 1.55; color: var(--muted);
    max-width: 42ch;
  }
  .disco__line strong { color: var(--ink); font-weight: 600; }

  .disco__facts { display: flex; gap: 8px; margin: 14px 6px 0; flex-wrap: wrap; }
  .disco__fact {
    border: 1px solid var(--frost-deep); background: var(--white); border-radius: 100px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  }

  /* Agrément FPMP : badge officiel, visible mais discret */
  .disco__agrement {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 6px 0; padding: 12px 14px;
    background: var(--white); border: 1px solid var(--frost-deep);
    border-radius: var(--radius-sm);
  }
  .disco__badge { flex: none; width: 58px; height: 58px; }
  .disco__agrement p { font-size: 13px; line-height: 1.5; color: var(--muted); }
  .disco__agrement strong { color: var(--ink); }
  .disco__cta { margin: 18px 6px 0; }
  .disco__cta .btn { width: auto; }

  /* =====================================================
     3. Héro : sur téléphone, les deux boutons pleine largeur
        (le style du bouton formules est défini plus haut,
         il vaut aussi pour le bureau)
     ===================================================== */
  .hero__ctas .btn { width: 100%; text-align: center; }

  /* =====================================================
     4. « Pour qui » compact : puces en ligne, réponse dessous
     ===================================================== */
  .audience__tags {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    padding: 4px 2px 8px;   /* marge haute : la puce active ne se fait plus rogner */
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .audience__tags::-webkit-scrollbar { display: none; }
  /* pas de remontée au survol sur tactile : c'était elle qui coupait la puce */
  .audience__tag, .audience__tag:hover { transform: none; }
  .audience__tag { flex: none; padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
  /* fondu à droite tant qu'il reste des choix cachés (classe posée en JS) */
  .audience__tags.has-more {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent);
  }
  .audience__detail { margin-top: 12px; }
  .audience__intro { font-size: 15px; }

  /* Les tarifs sont désormais des cartes à lignes dépliables
     (styles dans styles.css, section « CARTES DE FORMULES »). */


  /* Tarifs : notes denses repliées derrière un « + » */
  .mob-collapse { border-top: 1px solid var(--frost-deep); }
  .mob-collapse__head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 2px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--navy);
    text-align: left;
  }
  .mob-collapse__plus {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--frost-deep); position: relative;
    transition: transform .3s ease, background .3s;
  }
  .mob-collapse__plus::before, .mob-collapse__plus::after {
    content: ""; position: absolute; top: 50%; left: 50%; background: var(--navy);
    transform: translate(-50%, -50%);
  }
  .mob-collapse__plus::before { width: 11px; height: 1.5px; }
  .mob-collapse__plus::after { width: 1.5px; height: 11px; }
  .mob-collapse.is-open .mob-collapse__plus { transform: rotate(135deg); background: var(--frost); }
  .mob-collapse__body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .35s; }
  .mob-collapse.is-open .mob-collapse__body { opacity: 1; }
  .mob-collapse__body-inner { padding: 2px 2px 14px; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .disco__media img { transform: none !important; }
  .mob-collapse__body { transition: none; }
}