/* La mise en page de lyodge.com, chargée APRÈS design/braise.css (lyodge-kit). Les sections
 * sont des composants du kit (heros, bande, offre, cas-client, capture) : ici, seulement leur
 * placement et le rythme sombre / clair. Aucune couleur écrite à la main, budget 40 lignes
 * (design/test/systeme.test.ts). Trois paliers : téléphone, 48rem (tablette), 64rem (bureau). */
html { scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--fond-page); }
.marque { display: inline-flex; align-items: center; gap: var(--espace-2); color: inherit; text-decoration: none; font: 700 1.25rem/1 var(--police-titre); letter-spacing: -0.02em; }
.marque, .ancres a { min-height: 44px; }
.ancres { display: none; --rangee-ecart: var(--espace-4); }
.ancres a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.ancres a:hover { text-decoration: underline; }
.section { padding-block: var(--espace-6); background: var(--fond-page); color: var(--texte-page); }
.section h2 { margin: 0; font-size: clamp(var(--taille-hero), 5vw, var(--taille-affichage)); line-height: 1.05; }
.chapeau { max-width: 40rem; margin: 0; font-size: var(--taille-intertitre); color: var(--encre-discrete); }
.points { display: grid; gap: var(--espace-3) var(--espace-5); margin: 0; padding-left: var(--espace-4); }
.pilote { padding: var(--espace-4); border: 1px solid var(--bordure-forte); border-radius: var(--rayon); }
.pilote h3, .etapes h3, .pilote p, .etapes p { margin: 0; }
.etapes { display: grid; gap: var(--espace-5); margin: 0; padding: 0; list-style: none; }
.pied { padding-block: var(--espace-5); border-top: 1px solid var(--bordure); }
.pied a { display: inline-block; padding-block: 10px; }
@media (min-width: 48rem) {
  .ancres { display: flex; }
  .points { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: repeat(4, 1fr); gap: var(--espace-4); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .offre { grid-template-columns: 5rem 1fr; }
  .offre-livrables { grid-column: 2; }
  .etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .section { padding-block: var(--espace-7); }
}