/* ═══════════════════════════════════════════════════════════════════════
   arx-responsive.css — Media queries pour les blocs ACF ARX
   Chargé APRÈS style.css et chrome.css.
   !important requis pour surcharger les inline styles.
   Breakpoints : 900px (tablette), 600px (mobile).
   Sélecteurs : classes CSS sémantiques (arx-*) ajoutées dans les render.php.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── UTILITAIRES (toujours actifs) ──────────────────────────────────── */

/* Empêcher le scroll horizontal global (body seulement — html casse le scroll trackpad macOS) */
body {
  overflow-x: hidden;
}

/* Les images dans les grilles ne doivent pas dépasser */
img {
  max-width: 100%;
  height: auto;
}


/* ─── TABLETTE (≤ 900px) ─────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── HEROES ──────────────────────────────────────────────────────── */

  /* page-hero (coaching, entreprise, weekend) */
  .arx-section-fullscreen {
    min-height: auto !important;
  }
  .arx-section-fullscreen > .arx-grid-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Image column of page-hero */
  div.img-curtain[style*="min-height:100vh"] {
    min-height: 50vh !important;
  }

  /* hero home (arx-hero) */
  .arx-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* hero home signature row */
  .arx-hero-headline {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── GRILLES 2 COLONNES → 1 ─────────────────────────────────────── */

  /* pullquotes à propos */
  .arx-grid-pullquote {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* image+texte blocks: 1 col, texte avant image */
  .arx-grid-split {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }
  .arx-grid-split > .img-curtain,
  .arx-grid-split > [class*="media"] {
    order: 2 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .arx-grid-split > .img-curtain img,
  .arx-grid-split > [class*="media"] img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    inset: auto !important;
  }

  /* offer-panel */
  .arx-grid-offer {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }

  /* contact split */
  .arx-grid-contact {
    grid-template-columns: 1fr !important;
  }

  /* about-short */
  .arx-grid-about {
    grid-template-columns: 1fr !important;
  }

  /* podcast */
  .arx-grid-podcast {
    grid-template-columns: 1fr !important;
  }

  /* ── GRILLES 3 COLONNES → 2 ─────────────────────────────────────── */

  /* card-grid (pain points, pour qui) */
  .arx-grid-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* piliers home */
  .arx-grid-piliers {
    grid-template-columns: 1fr !important;
  }

  /* ── PADDINGS ────────────────────────────────────────────────────── */
  section[style*="padding:clamp(5rem,10vw,8rem)"] {
    padding-top: clamp(3rem,6vw,5rem) !important;
    padding-bottom: clamp(3rem,6vw,5rem) !important;
  }

  /* ── BOUTONS CTA ────────────────────────────────────────────────── */
  .arx-btn-row {
    flex-direction: column !important;
    align-items: center !important;
  }
}


/* ─── MOBILE (≤ 600px) ───────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── TOUTES LES GRILLES → 1 COLONNE ─────────────────────────────── */

  .arx-grid-split,
  .arx-hero-grid,
  .arx-hero-headline,
  .arx-grid-pullquote,
  .arx-grid-about,
  .arx-grid-podcast,
  .arx-grid-contact,
  .arx-grid-offer {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Grilles 3-col */
  .arx-grid-cards,
  .arx-grid-piliers {
    grid-template-columns: 1fr !important;
  }

  /* Grilles nommées (legacy + new) */
  .methode-grid,
  .diff-grid,
  .programme-grid,
  .formats-grid,
  .bonus-grid,
  .offres-grid,
  .temoignages-grid,
  .repartirez-grid,
  .triptyque {
    grid-template-columns: 1fr !important;
  }

  /* Steps (auto auto 1fr → auto 1fr) */
  .arx-step-row {
    grid-template-columns: auto 1fr !important;
  }

  /* ── HEROES ──────────────────────────────────────────────────────── */

  /* Toute section fullscreen → hauteur auto */
  .arx-section-fullscreen {
    min-height: auto !important;
  }

  /* Image hero : hauteur raisonnable */
  div.img-curtain[style*="min-height:100vh"],
  div.img-curtain[style*="min-height:50vh"] {
    min-height: 60vw !important;
    aspect-ratio: 16/10;
  }

  /* Hero home: photo between title and CTA on mobile */
  .arx-pad-hero {
    display: contents !important;
  }
  /* Title block (eyebrow + H1) */
  .arx-pad-hero > div:first-child {
    order: 1 !important;
    padding: 5rem 1rem 1.5rem !important;
  }
  /* Image column */
  .arx-hero-grid > .reveal:last-child {
    order: 2 !important;
    position: relative !important;
    min-height: 60vw !important;
    aspect-ratio: 16/10;
  }
  /* CTA + auteur block */
  .arx-hero-headline {
    order: 3 !important;
    padding: 1.5rem 1rem 2rem !important;
  }

  /* Offers-opener: hide dot separators on mobile */
  .chapter-opener nav > span[aria-hidden="true"] {
    display: none !important;
  }

  /* Hero fullscreen: pas de gap blanc entre header et hero */
  .arx-section-fullscreen {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Hero page-offres : espace suffisant entre header fixe et surtitre */
  .arx-hero-text {
    padding-top: 7rem !important;
  }

  /* ── TITRES ──────────────────────────────────────────────────────── */
  .arx-title-page {
    font-size: clamp(1.8rem,7vw,2.6rem) !important;
  }
  .arx-title-hero {
    font-size: clamp(1.8rem,7vw,2.6rem) !important;
  }

  /* ── SECTIONS PADDING ───────────────────────────────────────────── */
  section[style*="padding:clamp(5rem"],
  section[style*="padding:clamp(3rem"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── BOUTONS CTA MOBILE ──────────────────────────────────────────── */
  a.btn,
  a.btn-light,
  a.btn--ghost,
  a.btn--secondary {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .arx-btn-row {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* ── CONTAINERS ─────────────────────────────────────────────────── */
  .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── FAQ ─────────────────────────────────────────────────────────── */
  details summary {
    font-size: 1rem !important;
    gap: 0.5rem !important;
  }

  /* ── CAROUSEL TÉMOIGNAGES ─────────────────────────────────────── */
  .section-deep [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── PULLQUOTES ─────────────────────────────────────────────────── */
  p.pull-onDark {
    font-size: clamp(1.3rem,4vw,1.8rem) !important;
  }

  /* ── PROGRAMME ICONE BOX ────────────────────────────────────────── */
  .arx-icon-box {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── HERO FIG CAPTION ───────────────────────────────────────────── */
  .arx-caption-overlay {
    left: 1rem !important;
    right: 1rem !important;
  }

  /* ── IMAGES DANS LES GRILLES ────────────────────────────────────── */
  img[style*="object-fit:cover"] {
    width: 100% !important;
    height: auto !important;
  }
}