/* Qliing — feuille responsive partagée.
   Les artboards (.dc.html) sont stylés inline pour le desktop (1440px) ;
   cette feuille surcharge la mise en page aux largeurs tablette et mobile.
   Les !important sont nécessaires pour passer au-dessus des styles inline. */

html, body { overflow-x: clip; }
img { max-width: 100%; }
.hide-m { display: inline; }

/* ---------- Tablette (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .page h1 { font-size: 56px !important; }
  .page h2 { font-size: 40px !important; }
  .stat { font-size: 52px !important; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 40px !important; }
  .g4 .tl-line { display: none !important; }
  .hero-in { padding: 64px 32px 0 !important; }
  .hero-in2, .blk { padding: 64px 32px !important; }
  .card-lg { padding: 36px 32px !important; }
  .hero-visual { height: 560px !important; }
  .hero-phone { transform-origin: 50% 100%; transform: translateX(-50%) rotate(-6deg) scale(.85) !important; }
  .hero-notif { right: 0 !important; }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .page { font-size: 16px !important; }
  .page h1 { font-size: 40px !important; line-height: 1.08 !important; }
  .page h2 { font-size: 32px !important; }
  .page h3 { font-size: 22px !important; }
  .lead { font-size: 17px !important; }
  .stat { font-size: 44px !important; }
  .stat-sm { font-size: 28px !important; }
  mark { padding: 0 6px !important; }

  /* Grilles → une colonne */
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  /* Bandeaux de chiffres : deux colonnes ; le stepper "Comment ça marche" (avec sa ligne) reste en une colonne */
  .g4:not(:has(> .tl-line)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
  .row { gap: 4px !important; }
  .tl-line { display: none !important; }

  /* Rythme vertical */
  .sec { padding-top: 64px !important; }
  .sec2 { padding-top: 48px !important; }
  .sec3 { padding-top: 40px !important; }
  .hero-in { padding: 48px 20px 0 !important; gap: 32px !important; }
  .hero-in2, .blk { padding: 56px 20px !important; }
  .hero-copy { padding-bottom: 8px !important; }
  .card-lg { padding: 28px 20px !important; border-radius: 24px !important; }
  /* Étapes : visuel sous le texte, même cadrage qu'en desktop (300px, écran lisible) */
  .step-visual { order: 2; }

  /* Hero accueil : téléphone réduit */
  .hero { min-height: 0 !important; }
  .hero-visual { height: 340px !important; align-self: stretch !important; }
  .hero-phone { transform-origin: 50% 100%; transform: translateX(-50%) rotate(-6deg) scale(.6) !important; bottom: -100px !important; }
  .hero-notif { right: 4px !important; top: 8px !important; width: 240px !important; padding: 12px 14px !important; }

  /* Hero consommateurs : les deux téléphones sont réduits en bloc (zoom conserve la mise en page interne)
     et affichés en entier, sans être tronqués par le bas comme sur desktop */
  .hero-phones { zoom: .58; height: auto !important; overflow: visible !important; align-items: flex-start !important; padding: 0 12px 72px; }
  .hero-phones > div:first-child { transform: rotate(-4deg) !important; }
  .hero-phones > div:last-child { transform: translateY(48px) rotate(4deg) !important; }

  /* Marques : schéma en 3 couches empilé, connecteurs verticaux */
  .layers { grid-template-columns: minmax(0, 1fr) !important; }
  .conn { height: 48px; }
  .conn [data-flow] { width: 3px !important; height: 100% !important; transform-origin: top !important; }

  /* Investisseurs */
  .hero-logo { justify-self: start !important; max-width: 200px !important; }
  .deck-logo { justify-content: flex-start !important; }
  .deck-logo img { width: 160px !important; }

  /* Header : nav sur une deuxième ligne, badge raccourci */
  .hdr-in { flex-wrap: wrap; padding: 12px 16px !important; gap: 10px 16px !important; }
  .hdr-nav { order: 3; width: 100%; gap: 18px !important; font-size: 14px !important; flex-wrap: wrap; }
  .hide-m { display: none !important; }

  /* Footer */
  .ftr-in { padding: 48px 20px 32px !important; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  .fgrid > div:first-child { grid-column: 1 / -1; }

  /* Boutons / e-mails longs */
  a[href^="mailto:"] { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 400px) {
  .page h1 { font-size: 34px !important; }
  .page h2 { font-size: 28px !important; }
  .hero-phones { zoom: .5; }
}

/* Compléments mobile : stats des cartes "Le problème", lignes Comprendre/Activer/Mesurer */
@media (max-width: 768px) {
  .stat-md { font-size: 36px !important; white-space: nowrap; }
  .kv { flex-direction: column !important; gap: 8px !important; padding: 24px !important; }
  .kv > span { min-width: 0 !important; }
}