/* ==========================================================================
   OPTIMIZ BTP — Layout
   Conteneur, rythme des sections, grilles.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 820px; }
.container--wide   { max-width: 1400px; }

/* ---- Sections -----------------------------------------------------------
   La densité très aérée est le principal véhicule du premium sur ce projet :
   sans chiffres, sans références clients et sans photos de réalisations,
   c'est l'espace qui porte le niveau de gamme.                            */

.section {
  padding-block: var(--section-pad);
}

.section--tight  { padding-block: var(--section-pad-sm); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Intro portant le <h1>, juste sous une .page-media. Resserrée des DEUX
   côtés (le bas depuis le 2026-08-26) : l'image donne déjà la respiration du
   haut, et l'intro des pages de pôle n'a qu'un eyebrow + un <h1>, sans
   chapô — avec un --section-pad plein en bas, le titre était suivi de 276px
   de vide (138 + 138 de la section suivante) et flottait au lieu
   d'introduire. */
.section--intro { padding-block: var(--section-pad-sm); }

/* ---- Rythme entre sections ----------------------------------------------
   Deux sections de MÊME FOND n'ont aucune frontière entre elles : leurs
   paddings s'additionnent en une coulée de vide (276px mesurés). Quand le
   fond change, le contraste sépare déjà — d'où le :not() des deux côtés
   plutôt qu'une réduction globale. Le haut seulement : réduire aussi le bas
   cumulerait deux réductions et collerait les blocs. */
.section:not(.section--surface) + .section:not(.section--surface) {
  padding-top: var(--section-pad-sm);
}

/* Surface détachée du fond — sans ombre, par contraste seul. --section-surface
   (pas --surface, réservé aux cartes/composants) : voir tokens.css. */
.section--surface {
  background: var(--section-surface);
  border-block: 1px solid var(--line-soft);
}

/* ---- En-tête de section -------------------------------------------------
   Structure : eyebrow → titre → lead. L'écart eyebrow/titre est piloté par
   un token unique : des gaps hérités de chaque conteneur produisent sinon
   des écarts silencieux d'une section à l'autre.                          */

.section-heading {
  max-width: var(--measure);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--gap-eyebrow);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ⛔ Thème clair : l'or ne peut pas porter du texte (1,84:1).
   L'eyebrow y devient une pastille — l'or passe en fond, le texte en noir. */
[data-theme="light"] .eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--accent-soft);
  color: var(--fg);
  border-radius: var(--radius-sm);
}

/* var(--space-6), pas --space-5 (2026-09-08, retour utilisateur : plus
   d'air entre titre et chapô, audité sur 5 gabarits — 24px partout,
   cohérent mais jugé trop serré). Un cran au-dessus sur l'échelle
   existante, comme --gap-eyebrow au-dessus : rule ciblée, le token
   --space-5 lui-même reste inchangé pour tout le reste du site (boutons,
   grilles, cartes) qui continue de s'en servir ailleurs. */
.section-heading__lead {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: var(--text-lg);
}

.section-body {
  margin-top: var(--space-8);
}

/* ---- Grilles ------------------------------------------------------------
   auto-fit + minmax : le nombre de colonnes s'adapte sans media query,
   et aucune carte ne descend sous une largeur lisible.                    */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Deux colonnes asymétriques : texte + média. */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .split--text-first  > :first-child { order: 0; }
  .split--media-first > :first-child { order: 1; }
}

/* ---- Pile verticale ----------------------------------------------------- */

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }
.stack--xl > * + * { margin-top: var(--space-8); }

/* Reprend exactement l'ancienne largeur de .container--narrow (820px) — une
   compatibilité de largeur FIXE, pas une mesure de lecture qui doit suivre
   la police (contrairement à var(--measure), en ch). Utilisé quand un TITRE
   de section a besoin d'un conteneur plus large pour tenir sur une ligne
   (2026-09-08, /diagnostic/ #lectures-titre, #page-titre) mais qu'un élément
   du même conteneur doit garder EXACTEMENT sa largeur d'avant plutôt que de
   suivre le titre — un `.stack` de paragraphes de lecture, ou un formulaire
   dont les rangées d'options n'ont aucune raison de s'étirer sur toute la
   largeur d'un écran large. Générique, pas scopé à `.stack` malgré le nom
   (repris tel quel — pas de collision, une seule autre classe l'utilise).
   margin-inline:auto (2026-09-08, suite) : le BLOC lui-même est centré dans
   le conteneur élargi, sur demande explicite — le CONTENU à l'intérieur
   (rangées d'options, paragraphes de lecture) reste aligné à gauche en son
   sein, seule sa position d'ensemble sur la page change. */
.stack--measure,
.measure-fixed {
  max-width: 820px;
  margin-inline: auto;
}

/* ---- Ligne de séparation ------------------------------------------------ */

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

/* ---- Mesure de lecture -------------------------------------------------- */

.measure { max-width: var(--measure); }

/* ---- Média ---------------------------------------------------------------
   height:auto est indispensable : les <img> portent width/height en HTML
   (pour réserver la place et éviter le décalage), ces attributs seraient
   sinon interprétés comme des dimensions fixes.                           */

.media {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}