/* ============================================================
   MOBILE-GLOBAL.CSS — corrections mobiles 375px / 390px
   Vgama — généré 2026-05-06
   Complète mobile-hardening.css sans le remplacer.
   ============================================================ */

/* ── 0. RESET ANTI-OVERFLOW GLOBAL ────────────────────────── */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   MOBILE ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ── NAV ─────────────────────────────────────────────────── */
  .nav {
    padding: 12px 20px !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* Desktop nav links cachés */
  .mega-nav {
    display: none !important;
  }

  /* Mega menu "Offre" : colonnes → liste simple */
  .mega-panel {
    display: none !important;
  }
  .mega-overlay {
    display: none !important;
  }

  /* Burger toujours visible */
  .nav-burger {
    display: flex !important;
    flex-shrink: 0 !important;
  }

  /* Bouton "Prendre un rendez-vous" dans nav-right : visible */
  .nav-right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }

  .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 0 12px !important;
    min-height: 34px !important;
  }

  /* Mobile overlay (mob-menu) */
  .mob-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
  }

  .mob-menu.is-open {
    transform: translateY(0) !important;
    pointer-events: all !important;
  }

  .mob-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 28px !important;
  }

  .mob-menu .mob-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }

  .mob-menu .mob-l {
    font-size: 22px !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  /* CTA "Prendre un rendez-vous" dans mob-menu */
  .mob-menu .mob-cta {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    text-align: center !important;
    padding: 16px 24px !important;
    border-radius: 60px !important;
    background: #ffffff !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    min-height: 52px !important;
  }

  /* ── BANDEAU LOGOS ───────────────────────────────────────── */
  .logos-sec {
    padding: 20px 0 !important;
  }

  .logos-track img {
    height: 20px !important;
    width: auto !important;
    margin: 0 14px !important;
  }

  /* Override hauteurs custom */
  .logos-track img[alt="Logo Argon"],
  .logos-track img[alt="Logo Ogures"],
  .logos-track img[alt="Logo Noma"] {
    height: 20px !important;
  }

  /* ── SECTION OFFRE (svc-sec) ─────────────────────────────── */
  .svc-panel {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }

  .svc-list {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .svc-item {
    padding: 16px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    pointer-events: none !important;
  }

  .svc-item-name {
    font-size: 15px !important;
  }

  /* Détail : caché sur mobile, liste seulement */
  .svc-detail {
    display: none !important;
  }

  /* ── SECTION MÉTHODOLOGIE ─────────────────────────────────── */
  .meth-sec {
    padding: 60px 0 !important;
  }

  .meth-inner {
    padding: 0 20px !important;
  }

  .meth-tl-outer {
    padding: 0 20px 60px !important;
  }

  /* Timeline → colonne unique */
  .meth-tl-wrap::before {
    left: 22px !important;
  }

  .meth-tl-item {
    grid-template-columns: 48px 1fr !important;
    margin-bottom: 28px !important;
  }

  .meth-tl-item.side-left .meth-tl-card,
  .meth-tl-item.side-right .meth-tl-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-left: 16px !important;
    margin-right: 0 !important;
    text-align: left !important;
    padding: 20px !important;
  }

  .meth-tl-item.side-left .meth-tl-center,
  .meth-tl-item.side-right .meth-tl-center {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .meth-tl-item.side-left .meth-tl-spacer,
  .meth-tl-item.side-right .meth-tl-spacer {
    display: none !important;
  }

  .meth-tl-hline {
    display: none !important;
  }

  .meth-tl-ghost {
    display: none !important;
  }

  /* ── SECTION ÉQUIPE ──────────────────────────────────────── */
  /* Animation orbitale supprimée */
  .team-orbit,
  .orbit-wrap,
  .orbit-stage,
  .orbit-rings,
  .orbit-ring,
  .orbit-line {
    display: none !important;
  }

  /* Cartes en colonne */
  .team-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .team-card {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Nav carousel caché */
  .team-nav-btn {
    display: none !important;
  }

  /* ── SECTION TÉMOIGNAGES ─────────────────────────────────── */
  .testi-grid,
  .testi-masonry,
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .testi-card {
    min-width: calc(100vw - 40px) !important;
    width: 100% !important;
    padding: 28px 20px !important;
  }

  /* ── SECTION FAQ ─────────────────────────────────────────── */
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 20px !important;
  }

  .faq-col {
    width: 100% !important;
  }

  .faq-item {
    width: 100% !important;
  }

  .faq-q {
    padding: 16px 0 !important;
  }

  /* ── FORMULAIRE CONTACT ──────────────────────────────────── */
  .contact-page {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 32px !important;
  }

  .contact-left,
  .contact-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .contact-form-card {
    padding: 24px 20px !important;
  }

  .cf-inp {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }

  .cf-textarea {
    min-height: 120px !important;
    font-size: 16px !important;
  }

  .cf-submit {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 14px !important;
  }

  /* Inputs génériques */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* évite le zoom iOS */
  }

  /* ── FOOTER ──────────────────────────────────────────────── */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .footer-brand,
  .footer-col {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .footer-col-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .footer-meta-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* ── PAGES ARTICLES DU LAB ───────────────────────────────── */
  .article-hero {
    padding: 96px 20px 40px !important;
  }

  .article-hero-inner {
    padding: 0 !important;
  }

  .article-title {
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1.2 !important;
  }

  .article-subtitle {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .article-body {
    padding: 0 20px !important;
  }

  .article-content {
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .article-content p,
  .article-content li {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .article-block {
    margin: 16px 0 !important;
    padding: 20px !important;
  }

  .stat-block {
    margin: 16px 0 !important;
    padding: 20px !important;
  }

  .error-section {
    padding: 0 !important;
  }

  /* Tableaux : scroll horizontal */
  .article-content table,
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── LE-LAB : hero & grille ──────────────────────────────── */
  .lab-hero {
    padding: 96px 20px 40px !important;
    text-align: center !important;
  }

  .lab-hero-title {
    font-size: clamp(24px, 8vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .lab-hero-sub {
    font-size: 15px !important;
    padding: 0 !important;
  }

  .lab-content {
    padding: 0 20px !important;
  }

  .lab-inner {
    padding: 0 !important;
  }

  /* Filtres : scroll horizontal */
  .lab-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  .lab-filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Grille d'articles → 1 colonne */
  .lab-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .lab-featured {
    flex-direction: column !important;
  }

  .lab-featured-img {
    min-height: 200px !important;
    width: 100% !important;
  }

  /* ── PRE-FOOTER CTA ──────────────────────────────────────── */
  .prefooter-inner {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 40px 20px !important;
  }

  .prefooter-divider {
    display: none !important;
  }

  .prefooter-left,
  .prefooter-right {
    width: 100% !important;
  }

  .prefooter-title {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  .prefooter-btn {
    width: 100% !important;
    min-height: 52px !important;
  }

  .prefooter-metrics {
    justify-content: center !important;
    gap: 24px !important;
  }

  /* ── SECTION CAS CLIENTS ─────────────────────────────────── */
  .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }

  .case-card {
    width: 100% !important;
  }

  /* ── OFFRE PAGES : grilles génériques ───────────────────── */
  .problem-grid,
  .compare-grid,
  .metrics-grid,
  .included-grid,
  .deliver-grid,
  .account-grid,
  .kpi-grid,
  .focus-panel,
  .phone-grid,
  .prospect-grid,
  .philo-grid,
  .pillars-grid,
  .steps-grid,
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── KPI CARDS CARROUSEL ─────────────────────────────────── */
  .kpi-sec .kpi-track,
  .kpi-cards-track,
  [class*="kpi-track"] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 12px !important;
  }

  .kpi-card,
  [class*="kpi-card"] {
    min-width: 260px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* ── GLOBAL : paddings & overflow ───────────────────────── */
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Mention légales / confidentialité / CGU */
  .legal-content,
  .legal-body,
  .page-content,
  .page-shell {
    padding: 0 20px !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* Comment ça marche */
  .ccm-inner,
  .ccm-chap,
  .ccm-pilot-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .ccm-pilot-shell {
    grid-template-columns: 1fr !important;
  }

  /* AI-driven */
  .ia-process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .ia-hero-inner {
    padding: 0 20px !important;
  }

  /* Aucun élément ne doit déborder */
  * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Exceptions : éléments qui ont besoin de leur propre max-width */
  .mob-menu {
    max-width: none !important;
  }

  .mob-cta {
    max-width: 340px !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ============================================================
   PETIT MOBILE ≤ 420px (375px / 390px exactement)
   ============================================================ */
@media (max-width: 420px) {

  /* NAV */
  .nav {
    padding: 10px 16px !important;
  }

  .nav-cta {
    font-size: 9.5px !important;
    padding: 0 10px !important;
    min-height: 32px !important;
  }

  /* Logos : très petits */
  .logos-track img {
    height: 18px !important;
    margin: 0 10px !important;
  }

  /* Sections génériques */
  .svc-item {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  /* FAQ */
  .faq-grid {
    padding: 0 16px !important;
  }

  /* Contact */
  .contact-page {
    padding: 16px !important;
  }

  .contact-form-card {
    padding: 20px 16px !important;
  }

  /* Footer */
  .footer-top {
    gap: 20px !important;
  }

  /* Articles */
  .article-body,
  .article-content {
    padding: 0 !important;
  }

  .article-title {
    font-size: clamp(22px, 7vw, 28px) !important;
  }

  /* Lab */
  .lab-hero {
    padding: 86px 16px 32px !important;
  }

  .lab-hero-title {
    font-size: clamp(22px, 7vw, 28px) !important;
  }

  .lab-content,
  .lab-inner {
    padding: 0 !important;
  }

  /* Wrap */
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Prefooter */
  .prefooter-inner {
    padding: 32px 16px !important;
  }

  /* Offre items */
  .meth-tl-card {
    padding: 16px !important;
  }

  /* Team */
  .team-card {
    padding: 20px !important;
  }
}

/* ============================================================
   BURGER JS : assure que le script mobMenu fonctionne
   (le script dans index.html utilise .is-open, pas .open)
   On maintient la compatibilité avec les deux classes
   ============================================================ */
.mob-menu.open {
  transform: translateY(0) !important;
  pointer-events: all !important;
}

/* Body bloqué quand menu ouvert */
body.mob-open,
body.mobile-nav-open {
  overflow: hidden !important;
}

/* ── nav-mobile (créé par mobile-nav-global.js) ── */
@media (max-width: 768px) {
  .nav-mobile {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    background: #0a0a0a !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 24px !important;
  }

  .nav-mobile.open {
    display: flex !important;
  }

  .nav-mobile .mob-l {
    width: min(320px, 100%) !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 20px !important;
    text-decoration: none !important;
  }

  .nav-mobile .mob-cta {
    margin-top: 20px !important;
    width: min(320px, 100%) !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 0 20px !important;
  }
}