/* Le Bon Relais — page « Modèles gratuits » (modeles.html), en complément de style.css.
   Page d'arrivée courte : 4 documents × 2 métiers en gros boutons qui ouvrent l'outil (modeles.lebonrelais.pro),
   trois étapes, questions repliées, bloc essai, modèles vierges en bas. Mêmes règles que la vitrine
   (vitrine/DESIGN.md) : neutres chauds, aucun dégradé, aucune police ni ressource externe, accent réservé au seul
   bouton « Essayer un mois offert » (défini dans style.css). Mobile d'abord. */

.modeles-haut { padding-top: var(--e-6); padding-bottom: var(--e-6); }
.modeles-haut h1 { max-width: 44rem; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.modeles-haut .chapeau { margin-top: var(--e-4); color: var(--texte); font-weight: 600; }
.modeles-note { margin-top: var(--e-4); color: var(--doux); font-size: .9375rem; max-width: var(--colonne); }

.modeles-choix { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-4); }
.modeles-choix h2 { font-size: 1rem; line-height: 1.3; letter-spacing: 0; font-weight: 700; margin-bottom: var(--e-2); }
.modeles-choix p { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.modele-bouton {
  display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: var(--e-3);
  background: var(--surface); border: 1.5px solid var(--bord); border-radius: var(--r-carte);
  font-weight: 700; text-decoration: none; text-align: center;
  transition: transform var(--d-survol) ease-out, box-shadow var(--d-survol) ease-out, border-color var(--d-survol) ease-out;
}
.modele-bouton::after { content: "\00a0→"; color: var(--doux); }
.modele-bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-1); border-color: var(--texte); }

.modeles-etapes { padding-top: var(--e-6); }
.modeles-etapes h3 { font-weight: 700; }

.faq .modeles-note { margin-top: var(--e-5); }

.modeles-relais { background: var(--surface); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); max-width: none; }
.modeles-relais strong { color: var(--texte); }

.modeles-vierges { padding-top: var(--e-6); padding-bottom: var(--e-6); color: var(--doux); font-size: .9375rem; }
.modeles-vierges h2 { font-size: 1rem; letter-spacing: 0; color: var(--texte); }
.modeles-vierges p { margin-top: var(--e-2); }
.modeles-vierges ul { margin: var(--e-2) 0 0; padding-left: 1.1rem; line-height: 1.9; }

@media (min-width: 48rem) {
  .modeles-choix { grid-template-columns: repeat(2, 1fr); gap: var(--e-5) var(--e-6); }
  .modeles-vierges ul { columns: 2; column-gap: var(--e-7); }
}
@media (min-width: 64rem) {
  .modeles-choix { grid-template-columns: repeat(4, 1fr); }
  .modeles-choix h2 { min-height: 2.6em; }      /* boutons alignés même quand un titre tient sur deux lignes */
  .modeles-choix p { grid-template-columns: 1fr; }
}