/**
 * Funnel — adaptations responsive.
 *
 * CE FICHIER DOIT ETRE CHARGE EN DERNIER (voir layouts/funnel/header.php).
 *
 * Pourquoi il existe : ces media queries vivaient dans layout.css, mais les regles
 * de BASE des memes composants (.quad, .painlist, .mentor, .demo-split…) sont
 * definies dans pages.css, charge APRES. A specificite egale, la derniere regle
 * gagne : `.quad { grid-template-columns: repeat(4,1fr) }` de pages.css ecrasait
 * `.quad { grid-template-columns: 1fr }` de la media query — le mobile affichait
 * 4 colonnes de ~110px. Regrouper le responsive en fin de cascade corrige les 8
 * composants concernes d'un coup, sans !important ni surenchere de specificite.
 *
 * Regle a tenir : toute nouvelle media query du theme va ICI, pas dans layout.css.
 */

@media (max-width: 1080px) {
  .hero-sub { font-size: 16px; max-width: 46ch; }
}

/* Filet global sur les medias : un seul asset plus large que son conteneur suffit
   a faire deborder la page entiere. `pyramide-succes.png` (680px de large)
   debordait de 41px sur un viewport de 390. */
img, video, iframe, svg { max-width: 100%; height: auto; }

@media (max-width: 980px) {
  .hero .wrap { padding: 48px var(--fnl-pad) 56px; }
  .hero-sub { max-width: none; }
  .quad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .demo-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mentor { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mentor-photo { max-width: 260px; }
  .mentor-photo .seal { width: 72px; top: -12px; inset-inline-end: -12px; }
}

@media (max-width: 640px) {
  section { padding: 54px 0; }
  .wrap { padding: 0 18px; }
  .hero-logo { height: 64px; }
  .hero h1 .hbr { display: none; }
  .hero .btn { width: 100%; }
  .painlist, .quad { grid-template-columns: minmax(0, 1fr); }
  .sec-dark .sec-head h2 { white-space: normal; }
  .card-ico { height: 64px; top: -22px; inset-inline-end: 10px; }
  .card-ico .card-logo { max-height: 64px; max-width: 96px; }
  body { padding-bottom: 0; }
}

/* Petits mobiles (iPhone SE / Android compacts). Les CTA sont en inline-flex :
   sur un libelle long (« Reservez votre consultation gratuite ») ils gardaient
   leur largeur intrinseque et debordaient de ~39px a 320px. */
@media (max-width: 400px) {
  .btn {
    width: 100%;
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
  }
  .cta-band .btn, .demo-cta .btn, .final .btn { width: 100%; }
}