/* =========================================================================
   styles-alt2.css — Surcharge de la variante alt2
   Chargée APRÈS styles.css et styles-alt1.css (body.alt1.alt2).
   alt2 = page réduite (hero + section "La méthode"). Cette couche élargit
   les pavés de stats pour que les libellés longs — "Conformité" et
   "Livraisons" — s'affichent pleinement, sans être à l'étroit ni tronqués.
   Reprend aussi la barre de progression de lecture d'altfoo.
   ========================================================================= */

/* Barre de progression de lecture (créée par le script en pied de page). */
.alt2 .af-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--signal), var(--accent-bright));
  z-index: 999; box-shadow: 0 0 10px rgba(54, 166, 230, .6);
}
@media (prefers-reduced-motion: reduce) { .alt2 .af-progress { display: none; } }

/* La section "La méthode" devient le cœur de la page : on passe les 4 pavés
   sur 2 colonnes (au lieu de 4). Chaque pavé gagne ainsi en largeur, ce qui
   laisse respirer "Conformité" et "Livraisons". Bloc centré et cadré. */
.alt2 .a1-method .stats {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(20px, 3vw, 32px);
}

/* Sécurité anti-débordement : les libellés longs ne coupent jamais. */
.alt2 .a1-method .stat b {
  white-space: nowrap;
}

/* Sur très petits écrans, une seule colonne pour rester lisible. */
@media (max-width: 560px) {
  .alt2 .a1-method .stats { grid-template-columns: 1fr; max-width: 420px; }
  .alt2 .a1-method .stat b { white-space: normal; }
}