/* Rayflections V2 - mobile portrait card rails - 2026-07-10 */

@media (max-width: 760px) and (orientation: portrait) {
  html body.production-v2 :is(
    #vision .vision-challenge-grid,
    #posture-rayflections .about-video-grid,
    #contrat-confiance .rf-grid--3,
    #methode-resume-rayflections .methode-pillars,
    #methodologie .method-phase-system__grid,
    #doctrine .partnership-card-grid,
    #methode .partnership-method-grid--visual,
    #livrables .partnership-deliverables--visual,
    #parcours-constat .journey-step-brief,
    #parcours-portes .journey-door-grid,
    #parcours-formules .journey-formula-grid,
    #parcours-consultation .journey-consultation-list--orientation,
    #parcours-pratique .journey-practice-grid,
    #trajectoires-checkpoint .cp-next-trajectory-grid,
    #faq-checkpoint .cp-next-profile-grid
  ) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 18px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 18px 18px !important;
    margin-inline: -18px !important;
    scrollbar-width: none;
  }

  html body.production-v2 :is(
    #vision .vision-challenge-grid,
    #posture-rayflections .about-video-grid,
    #contrat-confiance .rf-grid--3,
    #methode-resume-rayflections .methode-pillars,
    #methodologie .method-phase-system__grid,
    #doctrine .partnership-card-grid,
    #methode .partnership-method-grid--visual,
    #livrables .partnership-deliverables--visual,
    #parcours-constat .journey-step-brief,
    #parcours-portes .journey-door-grid,
    #parcours-formules .journey-formula-grid,
    #parcours-consultation .journey-consultation-list--orientation,
    #parcours-pratique .journey-practice-grid,
    #trajectoires-checkpoint .cp-next-trajectory-grid,
    #faq-checkpoint .cp-next-profile-grid
  )::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html body.production-v2 :is(
    #vision .vision-challenge-grid,
    #posture-rayflections .about-video-grid,
    #contrat-confiance .rf-grid--3,
    #methode-resume-rayflections .methode-pillars,
    #methodologie .method-phase-system__grid,
    #doctrine .partnership-card-grid,
    #methode .partnership-method-grid--visual,
    #livrables .partnership-deliverables--visual,
    #parcours-constat .journey-step-brief,
    #parcours-portes .journey-door-grid,
    #parcours-formules .journey-formula-grid,
    #parcours-consultation .journey-consultation-list--orientation,
    #parcours-pratique .journey-practice-grid,
    #trajectoires-checkpoint .cp-next-trajectory-grid
  ) > * {
    flex: 0 0 clamp(282px, 78vw, 330px) !important;
    width: clamp(282px, 78vw, 330px) !important;
    max-width: clamp(282px, 78vw, 330px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.production-v2 #faq-checkpoint .cp-next-profile-grid > * {
    flex: 0 0 clamp(232px, 68vw, 286px) !important;
    width: clamp(232px, 68vw, 286px) !important;
    max-width: clamp(232px, 68vw, 286px) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }
}

/* Contact: keep the orientation and network cards compact on mobile. */
@media (max-width: 760px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  html body.production-v2.contact-v2 :is(
    #choisir-point-entree .contact-entry-grid,
    #communaute .contact-social-grid
  ) {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 18px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 18px 18px !important;
    margin-inline: -18px !important;
    scrollbar-width: none;
    transform: none !important;
  }

  html body.production-v2.contact-v2 :is(
    #choisir-point-entree .contact-entry-grid,
    #communaute .contact-social-grid
  )::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html body.production-v2.contact-v2 #choisir-point-entree .contact-entry-grid > * {
    flex: 0 0 clamp(282px, 78vw, 330px) !important;
    width: clamp(282px, 78vw, 330px) !important;
    max-width: clamp(282px, 78vw, 330px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
    scroll-snap-align: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.production-v2.contact-v2 #communaute .contact-social-grid > * {
    flex: 0 0 clamp(232px, 68vw, 286px) !important;
    width: clamp(232px, 68vw, 286px) !important;
    max-width: clamp(232px, 68vw, 286px) !important;
    min-width: 0 !important;
    align-self: stretch !important;
    scroll-snap-align: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.production-v2.contact-v2 :is(
    #choisir-point-entree .contact-entry-grid,
    #communaute .contact-social-grid
  ):focus-visible {
    outline: 1px solid rgba(217, 189, 120, 0.8);
    outline-offset: 4px;
  }
}