/* ============================================================
   Rayflections — Réglage mobile des pages Masterclass & Checkpoint
   (pile CSS "css/", distincte de la home -> assets/v2-mobile-tune.css)
   Portée : TÉLÉPHONE UNIQUEMENT (@media max-width: 760px) -> bureau intact.
   Chargé en dernier sur masterclass.html et checkpoint.html.
   Spécificité calée sur les règles existantes (body.production-v2… !important),
   qui sont fortement sur-spécifiées, d'où les préfixes ci-dessous.
   Calibré ~430px, fluide et sûr de 360 à 430px via clamp().
   ============================================================ */

@media (max-width: 760px) {

  /* ---- 1. Titres (échelle mobile) ----------------------
     Sélecteurs calés sur les règles existantes sur-spécifiées
     (ex. body.production-v2.masterclass-v2 :is(.heading-lg,.rf-title), spéc 0,3,1)
     -> on égale/dépasse la spécificité, on gagne par l'ordre de source. */
  /* Masterclass : le hero est verrouillé par une règle à id (#masterclass-hero)
     -> il faut un sélecteur à id pour la battre (les classes ne suffisent pas). */
  #masterclass-hero .heading-xl,
  #masterclass-hero h1.heading-xl,
  html body.production-v2.checkpoint-v2 .cp-hero .cp-hero__brand,
  html body.production-v2.checkpoint-v2 .cp-hero__brand {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.06 !important;
  }
  body.production-v2.masterclass-v2 :is(.heading-lg, .rf-title),
  html body.production-v2.checkpoint-v2 :is(section, .rf-tunnel, .cp-hero, .cp-next) :is(.heading-lg, .rf-title),
  html body.production-v2 section h2:not([class]) {
    font-size: clamp(26px, 6.6vw, 30px) !important;
    line-height: 1.16 !important;
  }

  /* ---- 2. Marges verticales des sections --------------- */
  body.production-v2 section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  body.production-v2 .page-hero {
    padding-top: 76px !important;
    padding-bottom: 40px !important;
  }
  body.production-v2 .youth-offer-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ---- 3. Carrousels horizontaux (scroll-snap, sans JS) ---- */
  body.production-v2.masterclass-v2 .masterclass-formats__grid,
  body.production-v2.masterclass-v2 .masterclass-support__grid,
  body.production-v2.masterclass-v2 .masterclass-founder__message,
  body.production-v2.checkpoint-v2 .cp-stats__grid,
  body.production-v2.checkpoint-v2 .cp-next-offer-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 4px 16px 14px !important;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  body.production-v2.masterclass-v2 .masterclass-formats__grid::-webkit-scrollbar,
  body.production-v2.masterclass-v2 .masterclass-support__grid::-webkit-scrollbar,
  body.production-v2.masterclass-v2 .masterclass-founder__message::-webkit-scrollbar,
  body.production-v2.checkpoint-v2 .cp-stats__grid::-webkit-scrollbar,
  body.production-v2.checkpoint-v2 .cp-next-offer-grid::-webkit-scrollbar { display: none; height: 0; width: 0; }

  body.production-v2.masterclass-v2 .masterclass-formats__grid > *,
  body.production-v2.masterclass-v2 .masterclass-support__grid > *,
  body.production-v2.masterclass-v2 .masterclass-founder__message > *,
  body.production-v2.checkpoint-v2 .cp-next-offer-grid > * {
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
  }
  /* Stats Checkpoint : chiffres courts -> cartes plus étroites */
  body.production-v2.checkpoint-v2 .cp-stats__grid > * {
    flex: 0 0 62% !important;
    width: 62% !important;
    max-width: 240px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
  }

  /* ---- 4. Carrousel méthode (les 4 temps) : trop haut sur mobile ----
     C'est un carrousel vertical à viewport fixe (~980px = plus d'un écran
     par étape). On recadre l'image (381 -> 190px) ET on réduit la hauteur
     du viewport pour coller au contenu -> section bien plus courte. */
  body.production-v2.checkpoint-v2 .cp-next-phase-carousel__viewport {
    height: 690px !important;
    min-height: 0 !important;
  }
  body.production-v2.checkpoint-v2 .cp-next-phase-slide {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  body.production-v2.checkpoint-v2 .cp-next-phase-slide figure {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 170px !important;
    max-height: none !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  body.production-v2.checkpoint-v2 .cp-next-phase-slide figure img {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  body.production-v2.checkpoint-v2 .cp-next-phase-slide > div {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  /* ---- 5. Section vidéo fondateur (Masterclass) : ne se replie pas ----
     La grille garde une colonne FIXE ~665px sur mobile -> la vidéo et le
     texte débordent l'écran (rognés à droite, texte mal cadré). On force
     une colonne unique qui tient dans l'écran + on empile proprement. */
  html body.production-v2.masterclass-v2 .masterclass-founder__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }
  html body.production-v2.masterclass-v2 .masterclass-founder__video,
  html body.production-v2.masterclass-v2 .masterclass-founder__copy,
  html body.production-v2.masterclass-v2 .mc-founder-thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Le bloc "message" est en flex-row (paragraphes côte à côte) : sur mobile
     ils s'étalent hors écran et sont rognés. On empile verticalement.
     Sélecteur large pour couvrir aussi les pages masterclass déclinées. */
  html body.production-v2 .masterclass-founder__message {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  html body.production-v2 .masterclass-founder__message > p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* ---- 6. Page méthode — "Notre méthodologie" (4 piliers) ----
     Le média hérite d'un min-height:100% qui, sur la carte empilée en mobile,
     s'effondre (~4px) -> photo quasi invisible. On empile la carte (image
     au-dessus, texte dessous) et on redonne une vraie hauteur au média. */
  html body.production-v2.methode-v2 .method-phase-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  html body.production-v2.methode-v2 .method-phase-card__media {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  html body.production-v2.methode-v2 .method-phase-card__media .method-theme-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 22% !important;
  }
}

/* Mobile audit pass 2026-07-12: keep primary interactions thumb-safe. */
@media (max-width: 760px) {
  html body.production-v2 :is(.btn, .btn-primary, .btn-secondary, .btn--gold, .btn--ghost),
  html body.production-v2 :is(.nav__burger, .nav__drawer a, .theme-toggle, .v2-theme-toggle),
  html body.production-v2 :is(.cp-hero__ctas, .cp-v4-anchorbar, .cp-v4-service-actions, .cp-offer__ctas, .cp-next-offer-card) a,
  html body.production-v2 :is(.masterclass-start__actions, .masterclass-showcase__tabs, .masterclass-formats__grid, .masterclass-support__grid) :is(a, button),
  html body.production-v2 :is(.youth-offer-actions, .atelier-actions) :is(a, button),
  html body.production-v2 summary {
    min-height: 44px !important;
  }
}