/* Page /sur-mesure : mise en page propre. Couleurs : jetons uniquement (css/tokens.css).
   Composants (.scenario, .liste-temps, .carte, .bouton…) : css/site.css.
   Proximité 1:2 : intra-groupe --e1/--e2, inter-groupe --e4 et plus. */

.sm-intro p,
.sm-chapeau {
  max-width: 60ch;
  margin: 0 0 var(--e2);
  color: var(--encre);
}

.sm-chapeau { margin-bottom: var(--e5); }

/* Situations et garanties : listes sans puce, 4 puis 3 colonnes */
.sm-situations,
.sm-garanties,
.sm-preuves,
.sm-scenarios {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
}

.sm-situation h3,
.sm-garanties h3 { margin: 0 0 var(--e1); }

.sm-situation p,
.sm-garanties p {
  margin: 0;
  color: var(--encre-douce);
}

.sm-situation,
.sm-garanties li {
  padding-top: var(--e2);
  border-top: 1px solid var(--filet);
}

/* Scénarios : le pic de la page, trois cartes chiffrées */
.sm-scenarios { margin-top: 0; }

.scenario h3 { margin: 0 0 var(--e1); }

.sm-note {
  max-width: 60ch;
  margin: var(--e4) 0 0;
  color: var(--encre-douce);
}

/* Preuves : cartes produit, l'accent ne passe que par data-produit (site.css) */
.sm-preuves .carte__nom { margin: var(--e1) 0; }

.sm-preuves .carte__ligne {
  margin: 0 0 var(--e2);
  color: var(--encre-douce);
}

.sm-preuves .carte__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Fin : un seul bouton, aligné à gauche sous le texte */
[data-bloc="suite"] .bouton { margin-top: var(--e1); }

@media (min-width: 700px) {
  .sm-situations { grid-template-columns: repeat(2, 1fr); }
  .sm-garanties,
  .sm-preuves { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .sm-situations { grid-template-columns: repeat(4, 1fr); }
  .sm-scenarios { grid-template-columns: repeat(3, 1fr); }
}