/* ==========================================================================
   IÉNA Capital — Design System
   03 · Mise en page
   --------------------------------------------------------------------------
   Trois primitives seulement :
     .page      enveloppe de page (fond + gouttières)
     .container largeur de lecture centrée
     .grid      grille éditoriale de 12 colonnes
   plus .section (rythme vertical d'un chapitre) et .stack (flux vertical).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page & conteneur
   -------------------------------------------------------------------------- */

.page {
  min-height: 100vh;
  background: var(--color-surface);
  padding: 0 var(--page-gutter);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Grille — 12 colonnes égales. Le placement se fait par classes .col-*,
   jamais par des valeurs de grid-column écrites dans le balisage.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.col-1-3   { grid-column: 1 / span 3;  }  /* index de section */
.col-1-4   { grid-column: 1 / span 4;  }  /* index + portrait (chapitre fondateur) */
.col-1-6   { grid-column: 1 / span 6;  }  /* chapeau de couverture */
.col-1-12  { grid-column: 1 / span 12; }  /* pleine largeur */
.col-5-7   { grid-column: 5 / span 7;  }  /* corps de section (défaut) */
.col-5-8   { grid-column: 5 / span 8;  }  /* corps de section élargi (encart) */
.col-6-7   { grid-column: 6 / span 7;  }  /* corps en vis-à-vis d'un portrait */
.col-8-5   { grid-column: 8 / span 5;  }  /* colonne d'appui de couverture */


/* --------------------------------------------------------------------------
   Section — un chapitre : filet supérieur, index à gauche, corps à droite.
   Le filet est fin par défaut ; le modificateur --major ouvre un chapitre.
   -------------------------------------------------------------------------- */

.section {
  border-top: var(--rule-width) solid var(--color-rule);
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.section--major { border-top-color: var(--color-rule-strong); }

/* Dernière section avant le pied de page : respiration supplémentaire. */
.section--closing { padding-bottom: var(--space-80); }

/* Toute section porteuse d'une ancre s'arrête sous le haut de la fenêtre. */
.section[id] { scroll-margin-top: var(--scroll-margin); }

.section__index {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}

/* Suite de chapitres. */
.sections {
  display: flex;
  flex-direction: column;
}


/* --------------------------------------------------------------------------
   Stack — flux vertical. Le pas est nommé par sa valeur, comme les tokens
   d'espacement, pour que le balisage dise exactement ce qu'il obtient.
   -------------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-18));
}

.stack--4  { --stack-gap: var(--space-4);  }
.stack--6  { --stack-gap: var(--space-6);  }
.stack--8  { --stack-gap: var(--space-8);  }
.stack--18 { --stack-gap: var(--space-18); }
.stack--20 { --stack-gap: var(--space-20); }
.stack--22 { --stack-gap: var(--space-22); }
.stack--24 { --stack-gap: var(--space-24); }
.stack--26 { --stack-gap: var(--space-26); }


/* --------------------------------------------------------------------------
   Adaptation — point de rupture unique à 900px : la grille de 12 colonnes se
   replie en une colonne. Au-dessus, le rendu est celui de la maquette.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .page { padding: 0 var(--page-gutter-sm); }

  .grid { grid-template-columns: 1fr; }

  .col-1-3,
  .col-1-4,
  .col-1-6,
  .col-1-12,
  .col-5-7,
  .col-5-8,
  .col-6-7,
  .col-8-5 { grid-column: 1 / -1; }
}