/* core/layout.css

   Structure des pages : conteneurs, en-têtes de page, titres, grilles.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

h2.page-title { font-size: var(--fs-7); margin: 0 0 6px; font-weight: 600; }

p.page-sub { color: var(--muted); margin: 0 0 28px; font-size: var(--fs-3); }

.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
  h2.page-title { font-size: var(--fs-6); }
}

/* ---------- titres ---------- */

h1.page-title {
  font-size: var(--fs-7);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.section-title {
  font-size: var(--fs-4);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  .section-title { font-size: var(--fs-5); }
}

.main {
  max-width: var(--w-content);
  margin: 0;
  padding: var(--s-6) var(--gutter) var(--s-9);
}

@media (max-width: 640px) {
  .main { padding: var(--s-5) var(--gutter) var(--s-8); }
}

/* =========================================================
   En-têtes de page et textes
   ========================================================= */

.page-header { margin: 0 0 var(--s-6); max-width: var(--w-read); }

.page-header .page-title {
  font-size: var(--fs-8);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.eyebrow { margin: 0 0 var(--s-2); font-size: var(--fs-2); font-weight: 500; color: var(--muted); }

.page-lead { margin: var(--s-3) 0 0; font-size: var(--fs-5); line-height: 1.6; color: var(--muted); }

.page-header .meta { margin-top: var(--s-2); }

.meta { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--muted); }

.section-label {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.step-index { color: var(--primary); font-weight: 600; }

@media (max-width: 640px) {
  .page-header { margin-bottom: var(--s-5); }
  .page-header .page-title { font-size: var(--fs-7); }
}