/* ============================================================
   Rayflections — Réglage responsive mobile (proportions)
   Portée : TÉLÉPHONE UNIQUEMENT (@media max-width: 760px).
   Le bureau n'est jamais affecté : hors de ce breakpoint,
   ce fichier n'applique aucune règle.
   Calibré pour ~430px (grand iPhone), fluide et sûr de 360 à 430px via clamp().
   Chargé en dernier sur la home → surcharge par ordre de source.
   ============================================================ */

@media (max-width: 760px) {

  /* ---- 1. Titre héros ---------------------------------- */
  /* Sélecteur renforcé : bat .hero--apple .hero__brand-title (0,2,0). */
  html[data-theme] .hero--apple .hero__brand-title,
  html[data-theme] .hero__brand-title {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.06 !important;
  }
  html[data-theme] .hero--apple .hero__title,
  html[data-theme] .hero__title {
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.32 !important;
    max-width: 94vw !important;   /* évite le repli en colonne étroite (bridé à ~185px sinon) */
  }

  /* ---- 2. Titres de section (H2) ----------------------- */
  .constat-panel__title,
  .masterclass__brand,
  .checkpoint__brand,
  .recovery__brand,
  .home-partnership__title,
  .community__title,
  .endcta__title,
  h2.t-h1,
  h2.t-h2 {
    font-size: clamp(26px, 6.6vw, 30px) !important;
    line-height: 1.15 !important;
  }

  /* ---- 3. Textes d'introduction / chapô ---------------- */
  .constat__hook,
  .checkpoint__subtitle,
  p.t-h2 {
    font-size: clamp(18px, 4.6vw, 20px) !important;
    line-height: 1.4 !important;
  }
  .method__lead-bold {
    font-size: clamp(17px, 4.3vw, 19px) !important;
    line-height: 1.45 !important;
  }

  /* ---- 4. Sous-titres de cartes (H3) ------------------- */
  .recovery-card__title,
  main h3:not([class]) {
    font-size: clamp(17px, 4.4vw, 19px) !important;
    line-height: 1.25 !important;
  }

  /* ---- 5. Espacements verticaux des sections ----------- */
  /* Desktop = 112px (56/56) ; partenariat = 220px. On divise ~par 2. */
  .constat,
  .method,
  .entry-router,
  .masterclass,
  .home-masterclass,
  .checkpoint,
  .home-checkpoint,
  .recovery,
  .media-hub,
  .reseaux,
  .endcta {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[data-theme] .hero--apple.hero--trajectoire,
  .hero--trajectoire { padding-top: 56px !important; }
  .home-partnership {
    padding-top: 52px !important;
    padding-bottom: 44px !important;
  }

  /* ---- 6. Zones tactiles : minimum 44px ---------------- */
  .btn,
  .nav__links a,
  .entry-router__cta,
  .route-card__cta,
  .recovery-card__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- 7. Respiration des marges latérales ------------- */
  /* Évite que le texte colle aux bords sur les petits écrans. */
  .constat__hook,
  .hero__title {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* ---- 8. Layouts mobile-natifs : carrousels horizontaux ---- */
  /* Groupes de cartes empilés -> une rangée qu'on fait glisser.
     Pur CSS (scroll-snap), sans JS. Casse la monotonie verticale. */
  html[data-theme] .method--apple .method-apple__cards,
  .method-apple__cards,
  .recovery-grid,
  .media-hub__grid,
  .constat-truths,
  .route-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;
  }
  .method-apple__cards::-webkit-scrollbar,
  .recovery-grid::-webkit-scrollbar,
  .media-hub__grid::-webkit-scrollbar,
  .constat-truths::-webkit-scrollbar,
  .route-grid::-webkit-scrollbar { display: none; height: 0; width: 0; }

  html[data-theme] .method--apple .method-apple__cards > *,
  .method-apple__cards > *,
  .recovery-grid > *,
  .media-hub__grid > *,
  .constat-truths > *,
  .route-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;
  }

  /* ---- 9. « Voir Rayflections en mouvement » : atténuer le fond flou ---- */
  /* La photo de fond paysage, étirée pour couvrir une section haute, paraît
     floue sur mobile. On ajoute un voile sombre + on retire le verre dépoli. */
  #main .media-hub,
  .media-hub {
    background: linear-gradient(180deg, #0b1526 0%, #070f1d 100%) !important;
  }
  /* Fond désormais sombre -> titre en clair (il était peint en navy via
     -webkit-text-fill-color pour l'ancienne photo claire). */
  #main .media-hub .media-hub__header .t-h1,
  #main .media-hub .media-hub__note {
    color: #fffaf0 !important;
    -webkit-text-fill-color: #fffaf0 !important;
  }
  #main .media-hub .media-hub__header .t-h1 .t-em,
  #main .media-hub .media-hub__header .t-em {
    color: #d9bd78 !important;
    -webkit-text-fill-color: #d9bd78 !important;
  }
  #media-hub .media-card,
  #media-hub .media-card__badge,
  #media-hub .media-card__duration,
  #media-hub .eyebrow {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ---- 10. Réseaux sociaux : 2 colonnes au lieu de 4 serrées ---- */
  /* La règle d'origine est sur-spécifiée (body #main … !important, spéc. 1,4,1).
     On la bat avec DEUX ids (#main #reseaux → 2,1,0) pour passer en 2×2. */
  body #main #reseaux .community__links--visual,
  #main #reseaux .community__links.community__links--visual {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }
  #main #reseaux .community-card {
    min-height: 220px !important;
  }
}

/* Mobile audit pass 2026-07-12: menu compact, anchors and touch targets. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 104px;
  }

  #commencer,
  #constat,
  #methode-rayflections,
  #points-entree,
  #masterclass,
  #checkpoint,
  #recovery,
  #partenariat,
  #media-hub,
  #reseaux {
    scroll-margin-top: 104px;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global,
  body.ray-nav-mounted:not(.production-v2) .nav--global.scrolled {
    padding: 12px 12px 0 !important;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global .nav__inner {
    min-height: 62px !important;
    padding: 8px 8px 8px 12px !important;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand {
    gap: 8px !important;
    min-width: 0 !important;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand span {
    font-size: 0.74rem !important;
    letter-spacing: 0.12em !important;
  }

  body.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:not(.production-v2).ray-nav-mounted .nav__drawer {
    inset: 74px 12px auto 12px !important;
    max-height: calc(100dvh - 92px) !important;
    padding: 0.68rem !important;
    border-radius: 20px !important;
  }

  .hero__ctas .btn,
  .hero--trajectoire .hero__ctas .btn,
  .hero--trajectoire .hero__ctas .btn--lg,
  .cta-sticky,
  .home-partnership__actions .btn,
  .checkpoint__cta .btn,
  .masterclass__cta .btn,
  .endcta__actions .btn,
  .community-card,
  .route-card__cta,
  .entry-router__cta,
  .recovery-card__cta,
  .mc-card__cta {
    min-height: 44px !important;
  }

  .hero__ribbon-dots {
    min-height: 44px !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .hero__ribbon-dot,
  .hero__ribbon-dot.is-active {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero__ribbon-dot::after {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border: 1px solid rgba(216, 178, 122, 0.55) !important;
    border-radius: 999px !important;
    background: rgba(216, 178, 122, 0.18) !important;
    transition: width 0.35s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
  }

  .hero__ribbon-dot.is-active::after {
    width: 22px !important;
    background: linear-gradient(90deg, rgba(216, 178, 122, 0.9), rgba(232, 200, 148, 1)) !important;
    box-shadow: 0 0 14px rgba(232, 200, 148, 0.45) !important;
  }

  html[data-theme="day"] .hero__ribbon-dot::after {
    border-color: rgba(139, 107, 52, 0.55) !important;
    background: rgba(184, 148, 85, 0.18) !important;
  }

  html[data-theme="day"] .hero__ribbon-dot.is-active::after {
    background: linear-gradient(90deg, rgba(184, 148, 85, 0.95), rgba(216, 178, 122, 1)) !important;
  }
}

/* Home nav mobile parity with production pages - 2026-07-12 */
@media (max-width: 760px) {
  html body.ray-nav-mounted:not(.production-v2) .nav--global,
  html body.ray-nav-mounted:not(.production-v2) .nav--global.scrolled {
    padding: 14px 14px 0 !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__inner {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 62px !important;
    gap: 10px !important;
    padding: 8px 10px 8px 14px !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__links,
  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__cta {
    display: none !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand {
    grid-column: auto !important;
    gap: 0.65rem !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__brand span {
    font-size: clamp(0.78rem, 0.9vw, 0.95rem) !important;
    letter-spacing: 0.12em !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger {
    grid-column: auto !important;
    justify-self: end !important;
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: auto !important;
    padding: 0 !important;
    background: rgba(255, 250, 240, 0.10) !important;
    border-color: rgba(191, 155, 82, 0.28) !important;
  }

  html[data-theme="day"] body.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark, .nav__burger span),
  body.theme-day.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark, .nav__burger span) {
    color: rgba(20, 35, 58, 0.76) !important;
    background-color: currentColor !important;
  }

  html[data-theme="day"] body.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger,
  body.theme-day.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger {
    color: rgba(20, 35, 58, 0.76) !important;
  }

  html[data-theme="day"] body.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark),
  body.theme-day.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark) {
    background-color: transparent !important;
  }

  html[data-theme="night"] body.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark, .nav__burger span),
  body.theme-night.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark, .nav__burger span) {
    color: rgba(255, 250, 240, 0.80) !important;
    background-color: currentColor !important;
  }

  html[data-theme="night"] body.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger,
  body.theme-night.ray-nav-mounted:not(.production-v2) .nav--global .nav__burger {
    color: rgba(255, 250, 240, 0.80) !important;
  }

  html[data-theme="night"] body.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark),
  body.theme-night.ray-nav-mounted:not(.production-v2) .nav--global :is(.nav__brand, .nav__brand span, .nav__brand-mark) {
    background-color: transparent !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    z-index: 998 !important;
    background: rgba(7, 16, 29, 0.28) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 200ms ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.ray-nav-mounted:not(.production-v2).drawer-open .nav__drawer-overlay,
  html body.ray-nav-mounted:not(.production-v2).method-nav-open .nav__drawer-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer {
    position: fixed !important;
    inset: 76px 14px auto 14px !important;
    z-index: 999 !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 94px) !important;
    gap: 0.2rem !important;
    padding: 0.8rem !important;
    overflow-y: auto !important;
    border: 1px solid rgba(191, 155, 82, 0.28) !important;
    border-radius: 24px !important;
    background: rgba(255, 251, 245, 0.96) !important;
    background-image: none !important;
    box-shadow: 0 24px 80px rgba(7, 16, 29, 0.22) !important;
    color: #07101d !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 200ms ease !important;
    backdrop-filter: blur(22px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  }

  html[data-theme="night"] body.ray-nav-mounted:not(.production-v2) .nav__drawer,
  body.theme-night.ray-nav-mounted:not(.production-v2) .nav__drawer {
    background: rgba(7, 16, 29, 0.96) !important;
    color: #fffaf0 !important;
  }

  html body.ray-nav-mounted:not(.production-v2).drawer-open .nav__drawer,
  html body.ray-nav-mounted:not(.production-v2).method-nav-open .nav__drawer {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer-list,
  html body.ray-nav-mounted:not(.production-v2) .nav__drawer-cta {
    display: grid !important;
    gap: 0.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: currentColor !important;
    font-family: var(--sans, "Inter", system-ui, sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer a[aria-current="page"],
  html body.ray-nav-mounted:not(.production-v2) .nav__drawer a:hover {
    color: #d9bd78 !important;
    background: rgba(217, 189, 120, 0.10) !important;
  }

  html body.ray-nav-mounted:not(.production-v2) .nav__drawer a.btn--gold {
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0.35rem !important;
    background: #d9bd78 !important;
    color: #07101d !important;
  }
}

/* Home mobile CTA scale - 2026-07-20 */
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  body:not(.production-v2) main .btn {
    min-width: 0 !important;
    min-height: 44px !important;
    max-width: 100% !important;
    padding: 0.68rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body:not(.production-v2) main .btn .arrow {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  .method__ctas .btn,
  .entry-router__cta .btn,
  .masterclass__cta .btn {
    width: auto !important;
  }

  #media-hub .media-hub__actions,
  .endcta__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  #media-hub .media-hub__actions {
    max-width: 320px !important;
  }

  #media-hub .media-hub__actions .btn {
    flex: 0 1 auto !important;
    width: auto !important;
  }

  .endcta__actions {
    max-width: 300px !important;
  }

  .endcta__actions .btn {
    width: 100% !important;
    max-width: 286px !important;
  }
}