/* ==========================================================================
   MÉRA — Layout & grille
   Grille : 4 col (mobile) · 8 col (tablet) · 12 col (laptop / large desktop)
   Les overrides par breakpoint sont dans responsive.css.
   ========================================================================== */

/* ---- Conteneur ----------------------------------------------------------- */

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

/* Pleine largeur : les modules image des maquettes touchent les bords */
.container--full {
  max-width: none;
  padding-inline: 0;
}

/* ---- Grille ---------------------------------------------------------------

   Usage :
     <div class="grid">
       <div class="col" style="--span: 4; --span-md: 5; --span-lg: 7;">…</div>
       <div class="col" style="--span-lg: 4; --start-lg: 9;">…</div>
     </div>

   Variables disponibles sur .col (toutes optionnelles) :
     --span / --start          mobile        (4 colonnes)
     --span-md / --start-md    tablet        (8 colonnes)
     --span-lg / --start-lg    laptop        (12 colonnes)
     --span-xl / --start-xl    large desktop (12 colonnes)

   Règle : un breakpoint sans --span-* explicite repasse en PLEINE LARGEUR
   (pas d'héritage entre breakpoints, car le nombre de colonnes change).
   Exception : --span-xl hérite de --span-lg (12 colonnes dans les deux cas).
   Un --start-* non défini hérite du breakpoint précédent — pour revenir au
   placement automatique, poser explicitement --start-* : auto.
   Pour les compositions asymétriques, combiner --start-* et --span-*,
   et --row-* si deux blocs doivent se chevaucher.
   -------------------------------------------------------------------------- */

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

/* Modules bord à bord, sans gouttière (blocs juxtaposés des maquettes) */
.grid--flush {
  --grid-gap: 0px;
  --grid-row-gap: 0px;
}

.col {
  --_span: var(--span, var(--grid-columns));
  --_start: var(--start, auto);
  grid-column: var(--_start) / span var(--_span);
  grid-row: var(--row, auto);
  min-width: 0;
}

/* ---- Sections ------------------------------------------------------------ */

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

.section--flush {
  padding-block: 0;
}

/* ---- Utilitaires de composition ----------------------------------------- */

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-4));
}

.align-end {
  align-self: end;
}

.align-center {
  align-self: center;
}

/* Filet horizontal pleine largeur de la surface */
.divider {
  border: 0;
  border-top: var(--rule-width) solid var(--surface-rule);
}

.divider--soft {
  border-top-color: var(--surface-rule-soft);
}

/* ---- Page ---------------------------------------------------------------- */

.site-main {
  display: block;
  min-height: 60vh;
}