/* ═══════════════════════════════════════════════════════════════════
   MOBILE — overrides ciblés pour viewports ≤ 768px
   Charger en dernier dans main.css pour gagner sur la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* Diagramme de conversion : la variante verticale est cachée par défaut
   (desktop affiche la version horizontale .conv-svg). */
.conv-svg-mobile { display: none; }


/* ─── Tablet & small desktop (≤ 1024px) : prévenir débordement nav ─── */
@media (max-width: 1024px) {
  nav { padding: 18px 32px; }
  .intro-strip { padding: 24px 32px; }
  .roi-band { padding: 80px 32px; }
  .cta-section { padding: 100px 32px; }
  footer { padding: 48px 32px; }
  /* Forcer la grille avantages en 1 colonne dès la tablette (défensif vs cache CSS) */
  .adv-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  .adv-card.wide { grid-column: span 1 !important; }
  .adv-card { padding: 40px 28px; }
  .adv-num { right: 18px; top: 14px; font-size: 4rem; }
}


/* ═════════════════════════════════════════════════
   ≤ 768px (tablette / grand téléphone paysage)
   ═════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* NAV : éviter écrasement entre logo / lang-btn / burger */
  nav { padding: 12px 16px; gap: 10px; }
  .nav-logo img { height: 38px; padding: 4px 8px; }
  .lang-btn { padding: 6px 10px; font-size: .62rem; gap: 4px; }
  .lang-menu { min-width: 140px; right: 0; }
  .nav-burger {
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
  }
  .nav-burger:focus-visible { outline: 1px solid var(--c-teal); outline-offset: 2px; }

  /* HERO : padding raisonnable, KPIs sortis du floating absolu */
  .hero {
    padding: 96px 24px 56px;
    min-height: auto;
  }
  .hero-content { max-width: 100%; }
  .hero-badge { padding: 7px 16px; font-size: .65rem; margin-bottom: 24px; }
  .hero-h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 32px; max-width: 100%; }
  .hero-btns { gap: 10px; }
  .btn-p, .btn-s { padding: 12px 22px; font-size: .72rem; letter-spacing: .12em; }
  .hero-kpis {
    position: static; flex-direction: row; flex-wrap: wrap;
    gap: 24px; margin-top: 40px;
    right: auto; bottom: auto;
  }
  .kpi-item { text-align: left; flex: 1 1 30%; min-width: 90px; }
  .kpi-n { font-size: 2.2rem; }
  .scroll-cue { display: none; }

  /* INTRO STRIP : padding plus serré */
  .intro-strip { padding: 18px 16px; }
  .intro-strip-inner { gap: 56px; }
  .strip-item { font-size: .6rem; letter-spacing: .15em; gap: 10px; }

  /* WHAT IS R3X : bascule diagramme horizontal → vertical */
  .conv-diagram { height: auto; aspect-ratio: auto; }
  .conv-svg { display: none; }
  .conv-svg-mobile { display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto; }
  .what-grid { gap: 40px; margin-top: 40px; }
  .what-text p { font-size: 1rem; line-height: 1.75; }
  .what-callout { padding: 18px 20px; }
  .what-callout p { font-size: 1rem; line-height: 1.6; }

  /* PRODUCTS : stack vertical de l'intro */
  .products-intro { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .prod-card { padding: 32px 22px; }
  .prod-name { font-size: 1.15rem; }

  /* DIFFERENTIATORS */
  .not-card { padding: 28px 22px; }
  .not-new { font-size: 1.25rem; }

  /* ADVANTAGES : forcer 1 colonne en dessous de 768px (défensif vs cache) */
  .adv-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  .adv-card.wide { grid-column: span 1 !important; }
  .adv-card { padding: 36px 24px; }
  .adv-title { font-size: 1.35rem; }
  .adv-body { font-size: 1rem; line-height: 1.75; }
  .adv-num { font-size: 3.6rem; right: 16px; top: 12px; }
  .adv-card.wide .adv-title { font-size: 1.6rem !important; }

  /* WHO */
  .who-card { padding: 32px 22px; }
  .who-type { font-size: 1.15rem; }

  /* TABS */
  .tab-btn { padding: 14px 8px; font-size: .65rem; letter-spacing: .1em; }
  .tab-pane { padding: 32px 22px; grid-template-columns: 1fr; }
  .ben-item { padding: 16px; }

  /* FOUNDER : la photo doit rester raisonnable une fois en mono-colonne */
  .arnaud-grid { gap: 40px; margin-top: 40px; }
  .arnaud-photo-wrap { max-width: 320px; margin: 0 auto; }
  .arnaud-nb-wrap { width: 90px; height: 90px; bottom: -12px; right: -8px; }
  .arnaud-content .label { font-size: 1.15rem; }
  .arnaud-role { font-size: .95rem; margin-bottom: 20px; }
  .arnaud-text p { font-size: 1rem; line-height: 1.75; }
  .arnaud-quote { padding: 22px 24px; }
  .arnaud-quote p { font-size: 1.05rem; }
  .arnaud-links { justify-content: center; }

  /* PROCESS : retirer la barre horizontale quand les étapes s'empilent */
  .process-steps { gap: 32px; margin-top: 40px; }
  .process-steps::before { display: none; }
  .p-dot { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 14px; }
  .p-title { font-size: 1rem; }
  .p-body { font-size: .9rem; }

  /* ROI BAND */
  .roi-band { padding: 64px 24px; }
  .roi-metrics { gap: 28px !important; padding: 32px 0; }
  .roi-m-n { font-size: 2.6rem; }
  .roi-sub { font-size: 1rem; line-height: 1.75; margin-top: 24px; }

  /* CTA */
  .cta-section { padding: 100px 24px; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-actions .btn-p, .cta-actions .btn-s { justify-content: center; }
  .cta-contact { font-size: .8rem; margin-top: 40px; padding-top: 28px; }

  /* FOOTER */
  footer { padding: 40px 24px; align-items: flex-start; }
  .foot-logo-img { height: 48px; }
  .foot-tagline { font-size: 1.05rem; }
  .foot-pills { gap: 6px; }
  .foot-pill { white-space: normal; }

  /* SECTION TITLES : éviter qu'ils écrasent leurs voisins */
  .section-title { line-height: .95; }

  /* FORM : déjà géré par form.css à 700px — petites finitions */
  #dossier { padding: 64px 20px; }
  .zf-form { padding: 0; }
  .zf-group { margin-bottom: 32px; }
  .zf-group-title { font-size: .58rem; margin-bottom: 20px; }
  .zf-input, .zf-textarea { font-size: .88rem; padding: 11px 14px; }
  .zf-submit button { padding: 14px 36px; font-size: .85rem; width: 100%; box-sizing: border-box; }
}


/* ═════════════════════════════════════════════════
   ≤ 480px (téléphone portrait)
   ═════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* HERO : encore plus compact */
  .hero { padding: 88px 18px 48px; }
  .hero-h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .hero-sub { font-size: .95rem; line-height: 1.7; }
  .hero-kpis { gap: 16px; margin-top: 32px; }
  .kpi-n { font-size: 1.9rem; }
  .kpi-l { font-size: .55rem; }

  /* SECTION TITLES */
  .section-title { font-size: clamp(2.2rem, 9vw, 3.8rem) !important; }
  .label { font-size: .7rem !important; letter-spacing: .15em !important; }

  /* SECTIONS : padding latéral réduit */
  .section { padding: 48px 18px; }

  /* CARDS : padding plus serré pour gagner de la place horizontale */
  .prod-card, .not-card, .adv-card, .who-card { padding: 28px 18px; }
  .tab-pane { padding: 24px 18px; }

  /* INTRO STRIP : éléments plus rapprochés */
  .intro-strip { padding: 14px 12px; }
  .intro-strip-inner { gap: 40px; }

  /* TABS : 1 colonne pour éviter écrasement */
  .tab-nav { grid-template-columns: 1fr !important; gap: 1px; }
  .tab-btn { padding: 12px; font-size: .72rem; letter-spacing: .12em; text-align: left; padding-left: 18px; }

  /* FOOTER */
  footer { padding: 32px 18px; }

  /* CTA */
  .cta-section { padding: 80px 18px; }

  /* FOUNDER : photo maximum 100% width avec marge */
  .arnaud-photo-wrap { max-width: 100%; }
  .arnaud-nb-wrap { width: 80px; height: 80px; }
  .arnaud-quote-mark { font-size: 3.5rem; top: -10px; left: 16px; }

  /* FORM */
  #dossier { padding: 48px 18px; }
}