/* ==========================================================================
   DEV'n DONE Design System v1.0 — Layout
   Conteneur, section, grille 4 / 8 / 12, piles et grappes.
   Dépend de : tokens.css
   ========================================================================== */

/* Conteneur : contenu plafonné à 1320 px, marges fluides 20 → 80 px */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section : rythme vertical 72 → 128 px */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

/* Grille : 4 colonnes (mobile) · 8 (tablette) · 12 (desktop) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--space-7);
}
.grid > * { min-width: 0; grid-column: 1 / -1; }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Placement desktop (≥ 1024). En dessous, chaque bloc prend toute la largeur. */
@media (min-width: 1024px) {
  .col-3  { grid-column: auto / span 3; }
  .col-4  { grid-column: auto / span 4; }
  .col-5  { grid-column: auto / span 5; }
  .col-6  { grid-column: auto / span 6; }
  .col-7  { grid-column: auto / span 7; }
  .col-8  { grid-column: auto / span 8; }
  .col-12 { grid-column: 1 / -1; }
  .start-2 { grid-column-start: 2; }
  .start-5 { grid-column-start: 5; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
}
/* Placement tablette (640–1023) */
@media (min-width: 640px) and (max-width: 1023px) {
  .md-col-4  { grid-column: auto / span 4; }
  .md-col-6  { grid-column: auto / span 6; }
}

/* Pile verticale : espace régulier entre enfants */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-7); }

/* Grappe horizontale qui passe à la ligne */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-4)); }
.cluster--sm { --cluster-gap: var(--space-2); }
.cluster--between { justify-content: space-between; }

/* Colonnes automatiques (listes de services, badges, etc.) */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auto-min, 16rem)), 1fr));
  gap: var(--auto-gap, var(--col-gap));
}