/* ==========================================================================
   layout.css — Container, grilles, sections, utilitaires de composition
   Utilitaires réutilisables sur toutes les pages.
   Charger après tokens.css et base.css.
   ========================================================================== */


/* --- 1. Container ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largeur-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-gouttiere);
  padding-right: var(--espace-gouttiere);
}

.container--lecture { max-width: var(--largeur-contenu); }   /* 720px */
.container--etroit  { max-width: 920px; }


/* --- 2. Sections -------------------------------------------------------- */

.section {
  padding-top: var(--espace-section);
  padding-bottom: var(--espace-section);
  position: relative;
}

.section--creme  { background-color: var(--couleur-creme); }
.section--blanc  { background-color: var(--couleur-blanc); }
.section--ecru   { background-color: #F0EBDC; }     /* nuance beige plus saturée que crème */
.section--sombre {
  background-color: var(--couleur-marine-profonde);
  color: var(--couleur-texte-inverse);

  /* Redéfinition LOCALE des tokens de texte dans ce contexte.
     Les custom properties étant héritables, tout élément enfant qui utilise
     color: var(--couleur-texte) ou var(--couleur-texte-subtil) obtient
     automatiquement la bonne couleur sans surcharge de sélecteur. */
  --couleur-texte:          var(--couleur-texte-inverse);
  --couleur-texte-subtil:   var(--couleur-texte-subtil-inverse);
  --couleur-bordure:        var(--couleur-bordure-sombre);
}

/* Inversion explicite des titres, liens, emphases, eyebrow (titres gardent
   la teinte pleine crème plutôt que la valeur calculée du paragraphe) */
.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--sombre h4,
.section--sombre h5,
.section--sombre h6         { color: var(--couleur-texte-inverse); }
.section--sombre a          { color: var(--couleur-cuivre-clair); }
.section--sombre a:hover    { color: var(--couleur-creme); }
.section--sombre strong     { color: var(--couleur-cuivre-clair); }
.section--sombre .eyebrow   { color: var(--couleur-cuivre-clair); }

/* Amplitudes alternatives */
.section--compact { padding-top: var(--espace-6); padding-bottom: var(--espace-6); }
.section--ample   { padding-top: calc(var(--espace-section) * 1.5);
                    padding-bottom: calc(var(--espace-section) * 1.5); }


/* --- 3. Grilles --------------------------------------------------------- */
/* Le min(100%, X) évite tout débordement sur viewport < X */

.grille {
  display: grid;
  gap: var(--espace-4);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.grille--serree { gap: var(--espace-3); }
.grille--aeree  { gap: var(--espace-6); }


/* --- 4. Stack (rythme vertical entre enfants) --------------------------- */
/* Pattern "Every Layout" : margin-top sur tous les enfants sauf le premier */

.stack > * + * { margin-top: var(--espace-3); }
.stack--serre > * + * { margin-top: var(--espace-2); }
.stack--ample > * + * { margin-top: var(--espace-5); }


/* --- 5. Cluster (alignement horizontal fluide) -------------------------- */
/* Pour groupes de boutons, tags, meta en ligne */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  align-items: center;
}
.cluster--ample { gap: var(--espace-3); }


/* --- 6. Bandeau (sous-bloc encart) -------------------------------------- */

.bandeau {
  padding: var(--espace-6);
  border-radius: var(--rayon-lg);
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
}
.bandeau--marine {
  background: var(--couleur-marine-profonde);
  color: var(--couleur-texte-inverse);
  border-color: var(--couleur-bordure-sombre);
}


/* --- 7. Filets (séparateurs) ------------------------------------------- */

.filet {
  border: 0;
  height: 1px;
  background-color: var(--couleur-bordure);
  margin-top: var(--espace-6);
  margin-bottom: var(--espace-6);
}
.filet--cuivre {
  height: 3px;
  width: 72px;
  background-color: var(--couleur-cuivre);
  border-radius: 2px;
  margin-top: var(--espace-4);
  margin-bottom: var(--espace-4);
}


/* --- 8. Alignements utiles --------------------------------------------- */

.texte-centre  { text-align: center; }
.bloc-centre   { margin-left: auto; margin-right: auto; }


/* --- 9. Variantes d'alignement pour les intros de section -------------- */
/* Utilisées pour varier le rythme vertical de la page d'accueil.
   Le rythme B (titre centré) existe déjà via .section-intro.is-centree. */

/* Rythme C — titre aligné à droite (usage parcimonieux : 1 fois max) */
.section-intro--droite {
  margin-left: auto;
  text-align: right;
}
.section-intro--droite p { margin-left: auto; }