/* 360 Acquéreurs — corrections pour téléphone (moins de 640 px).
   Rien ne s'applique au-delà : le rendu ordinateur est inchangé. */
@media (max-width: 640px) {
  /* Cartes « Des offres trop basses… », « Un plafond de verre… » : la grille
     de la maquette garde ses 4 colonnes à toutes les tailles, sans règle
     mobile. Sur téléphone, les deux dernières cartes sortaient de l'écran
     (jusqu'à 651 px de large). Une carte par ligne. */
  .pain-grid { grid-template-columns: 1fr; gap: 16px; }
  /* « La bascule » : les trois étapes Attirer · Gérer · Négocier restaient
     sur trois colonnes, sans règle mobile ; la troisième sortait de l'écran.
     Une étape par ligne, et les flèches qui les relient pointent vers le bas
     au lieu de la droite. */
  .bascule-steps { grid-template-columns: 1fr; gap: 28px; }
  .bstep:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  /* Halo décoratif du bloc tarif : posé à 18 % au-delà du bloc, de chaque
     côté, il élargissait la page. Ramené à 16 px, il reste dans la marge. */
  .price-wrap::before { inset: -6% -16px 8% -16px; }


  /* Pastilles flottantes du visuel du haut (« Flux quotidien », « + d'offres », « Meilleure gestion ») : la colonne du visuel
     ne pouvait pas devenir plus étroite que son image, et les pastilles,
     posées à 26–30 px au-delà, sortaient de l'écran (constaté par Céline sur
     son téléphone). La colonne peut rétrécir, et les pastilles restent en
     débord de 12 px, donc dans la marge de 20 px de l'écran. */
  .hero-grid > * { min-width: 0; }
  .hero .chip-tl { left: -12px; }
  .hero .chip-br,
  .hero .chip-mr { right: -12px; }

  /* « Les 3 piliers de la formation » : la grille gardait ses 3 colonnes à
     toutes les largeurs ; vers 485 px, les mots étaient coupés et le texte
     tenait sur un mot par ligne. Une carte par ligne jusqu'à 640 px. */
  .pillars3 { grid-template-columns: 1fr; }
}

/* ── Tablette (641 à 1279 px), demande de Céline du 18/09/2026 ───────────
   Seuils mesurés en balayant la page tous les 10 px : sans ces règles, les
   3 piliers avaient des titres à un mot par ligne jusqu'à 850 px, et les
   cartes « douleurs » jusqu'à 720 px (elles débordaient même de l'écran
   jusqu'à 660 px). Une marge de sécurité est prise au-dessus de ces valeurs.
   Rien ne change à 1440 px. */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Cartes « douleurs » : 2 × 2 au lieu de 4 de front. */
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 641px) and (max-width: 959px) {
  /* 3 piliers : une carte par ligne (deux colonnes laisseraient la
     troisième seule). Trois colonnes à partir de 960 px. */
  .pillars3 { grid-template-columns: 1fr; }
}