/* ═══════════════════════════════════════════════════════════════════
   MOCKUPS MOBILE FIX — fixes visuels mobile pour tous les mockups
   (téléphones, dashboards SaaS, animations, tableaux)
   Cible : <=780px (tablette portrait + mobile) et <=560px (mobile pur)
   ═══════════════════════════════════════════════════════════════════ */

/* Garde-fou anti-overflow horizontal sur tout le site */
@media (max-width: 780px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Tous les sections par défaut respectent le viewport */
  section {
    max-width: 100vw;
    overflow-x: clip;
  }
}

/* ═══ A. TÉLÉPHONES — width fixe → fluide ═══ */
@media (max-width: 780px) {
  .phone-wrap,
  .phone-real,
  .phone-screen,
  .phone-screen-real,
  .mini-phone,
  .nfc-phone {
    max-width: 100% !important;
    width: min(320px, 100%) !important;
    box-sizing: border-box;
  }
  /* Phones plus petits pour les mockups secondaires */
  .mini-phone {
    width: min(208px, 80vw) !important;
  }
}

/* ═══ B. GRIDS 2-COL "phone+dashboard" → 1 col en mobile ═══ */
@media (max-width: 780px) {
  .saas-split,
  .saas-phone-col,
  .parcours-card,
  .parcours-flow,
  .hero-inner,
  .data-inner,
  .sante-inner,
  .ia-inner,
  .split-row,
  .roi-grid,
  .nfc-data-grid {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 24px !important;
  }
  /* Le saas-split devient column avec phone centré */
  .saas-split {
    gap: 32px !important;
  }
}

/* ═══ C. SAAS MOCKUP — sidebar fixe → masquée ═══ */
@media (max-width: 780px) {
  .saas-mock {
    max-width: 100% !important;
    width: 100% !important;
    transform: none !important;
  }
  .saas-body {
    grid-template-columns: 1fr !important;
  }
  .saas-sidebar {
    display: none !important;
  }
  /* Ou alternative : transformer en bandeau */
  .saas-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .saas-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .saas-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .saas-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Stats 4-col → 2-col en mobile */
  .saas-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Bottom alerts + classement → 1-col */
  .saas-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  /* Météo banner : compact + button below */
  .saas-meteo {
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .saas-meteo-text {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .saas-meteo-btn {
    width: 100% !important;
    margin-top: 4px !important;
  }
  .saas-meteo-title {
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }
  .saas-meteo-sub {
    font-size: 10px !important;
  }
  /* Alert row : compact, traiter button below */
  .saas-alert-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .saas-alert-time {
    font-size: 9px !important;
  }
  .saas-alert-body {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .saas-traiter {
    margin-left: auto !important;
  }
}

/* ═══ D. FLOATING CARDS DU HERO — masquées en mobile ═══ */
@media (max-width: 560px) {
  .fcard,
  .fc1, .fc2, .fc3,
  .step-dot,
  .dot1, .dot2, .dot3, .dot4, .dot5 {
    display: none !important;
  }
}

/* ═══ E. MOCKUPS EMBARQUÉS (DUERP, RPS, PAPRIPACT, VEILLE, CERFA…) ═══ */
@media (max-width: 780px) {
  .dash-mini,
  .duerp-stage, .duerp-body, .duerp-table,
  .papripact-stage, .papri-body,
  .veille-body,
  .cerfa-body,
  .rps-split,
  .sig-body,
  .epi-body,
  .rex-body,
  .obj-body,
  .hist-body,
  .flow-stage,
  .dash-anim-wrap {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* KPI 4-col → 2-col en mobile */
  .duerp-kpis,
  .papri-kpis,
  .saas-kpis,
  .rps-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Tables internes mockups : fluide, scroll si besoin */
  .duerp-table-row,
  .rps-theme-row,
  .papri-risk-row,
  .papri-act,
  .papri-lb-row,
  .cerfa-field,
  .sig-item,
  .epi-row,
  .epi-history-row,
  .epi-date-row {
    font-size: 9px !important;
  }
  .papri-actions,
  .papri-side-title,
  .papri-act,
  .papri-kpi {
    max-width: 100% !important;
  }
}

/* ═══ F. TABLEAU COMPARATIF — restreindre largeurs cellules ═══ */
@media (max-width: 560px) {
  .cmp-table,
  .cmp-row,
  .cmp-head {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    font-size: 11px !important;
  }
  .cmp-cell,
  .cmp-cell-notex,
  .cmp-cell-other {
    padding: 8px 6px !important;
    font-size: 11px !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══ G. SVG illustratifs : se redimensionner ═══ */
@media (max-width: 780px) {
  svg.illus,
  .hero-illus svg,
  .data-illus svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ═══ H. ANIMATIONS qui calculent positions absolues ═══ */
@media (max-width: 780px) {
  /* Cercle vertueux : devient une liste verticale */
  .cv-wrap {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  /* Ou réduire si on veut garder le cercle */
  .cv-node {
    width: 100px !important;
    padding: 8px 6px !important;
  }
  .cv-node-title {
    font-size: 10px !important;
  }
  .cv-node-sub {
    font-size: 8px !important;
  }
  .cv-center {
    width: 90px !important;
    height: 90px !important;
  }
  .cv-center-txt {
    font-size: 14px !important;
  }
}

/* ═══ I. Heatmaps & charts ═══ */
@media (max-width: 560px) {
  .heatmap-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
}

/* ═══ I.bis Boucle vertueuse parcours : cv-gains 3-col → 1-col ═══ */
@media (max-width: 780px) {
  .cv-gains {
    grid-template-columns: 1fr !important;
  }
  .cv-gain {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══ J. Step dots autour des phones — masqués ═══ */
@media (max-width: 560px) {
  .hero-blob {
    opacity: 0.3 !important;
  }
}

/* ═══ K. INLINE-STYLE GRIDS (les sections data, photo IA, etc.) ═══ */
/* On force tous les divs avec inline grid à se transformer */
@media (max-width: 780px) {
  /* Sections data/photo IA/santé NFC ont des inline display:grid;grid-template-columns:1fr 1fr */
  section .inner > div[style*="grid-template-columns"],
  section .inner > div > div[style*="grid-template-columns"],
  section > div[style*="grid-template-columns"],
  section > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* phone-glow décoratif : ne déborde pas */
  .phone-glow {
    max-width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* reveal-l et reveal-r : annule translation X latérale (cause overflow) */
  .reveal-l,
  .reveal-r {
    transform: none !important;
  }
}

/* ═══ L. PARCOURS-FLOW : scroll horizontal contenu ═══ */
@media (max-width: 780px) {
  .parcours-card {
    padding: 24px 18px !important;
    overflow: hidden !important;
  }
  /* Forcer scroll horizontal : passer en flex (pas grid) en mobile */
  .parcours-flow {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    margin: 16px -18px 12px !important;
    padding: 6px 18px 12px !important;
    width: calc(100% + 36px) !important;
    max-width: calc(100% + 36px) !important;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .parcours-flow > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }
  .parcours-step {
    scroll-snap-align: start !important;
  }
}

/* ═══ M. FORMATIONS QUIZ : grid 2-col → 1 col ═══ */
@media (max-width: 780px) {
  .formations-sec .reveal-l,
  .formations-sec .reveal-r {
    width: 100% !important;
    max-width: 100% !important;
  }
  .quiz-options,
  .quiz-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══ N. CONFORMITÉ : duo-cards → 1 colonne ═══ */
@media (max-width: 560px) {
  .modules-grid,
  .conf-grid,
  .feat-grid {
    grid-template-columns: 1fr !important;
  }
  .duo-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══ O. ECHO INTERNE : tous les divs inline avec width fixe en px (>320) ═══ */
@media (max-width: 560px) {
  /* Specifique : phone-glow et grandes décorations */
  .phone-glow,
  .hero-blob {
    pointer-events: none !important;
  }
}