/* ============================================================
   LAYOUT UTILITIES — Magasin virtuel Duvéa
   Containers, stack vertical, cluster horizontal, split, grids.
   Mobile-first. Breakpoints :
     • mobile  : 320 – 767 px (par défaut)
     • tablet  : 768 px et plus
     • desktop : 1440 px et plus
   ============================================================ */

/* ---------- CONTAINERS ---------- */
.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: var(--container-full); }
.container--flush  { padding-inline: 0; }

@media (min-width: 768px) {
  .container { padding-inline: var(--space-7); }
}

/* ---------- STACK — rythme vertical homogène ----------
   Usage : <div class="stack stack--lg"><...></div>
   Chaque enfant direct hérite d'un margin-top égal à --stack-space. */
.stack > * + * {
  margin-top: var(--stack-space, var(--space-4));
}

.stack--xs { --stack-space: var(--space-1); }
.stack--sm { --stack-space: var(--space-2); }
.stack--md { --stack-space: var(--space-4); }   /* défaut */
.stack--lg { --stack-space: var(--space-6); }
.stack--xl { --stack-space: var(--space-8); }
.stack--2xl { --stack-space: var(--space-9); }

/* ---------- CLUSTER — flex horizontal qui passe à la ligne ---------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}

.cluster--end    { --cluster-justify: flex-end; }
.cluster--center { --cluster-justify: center; }
.cluster--between { --cluster-justify: space-between; }
.cluster--baseline { --cluster-align: baseline; }
.cluster--top    { --cluster-align: flex-start; }
.cluster--gap-sm { --cluster-gap: var(--space-2); }
.cluster--gap-lg { --cluster-gap: var(--space-5); }

/* ---------- SPLIT — 50 / 50 (fiche produit, hero) ----------
   Mobile : empilé. Tablet+ : deux colonnes. */
.split {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: var(--split-align, center);
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }
  .split--reverse-mobile > :first-child { order: 2; }
  .split--reverse-mobile > :last-child  { order: 1; }
  .split--reverse-mobile > :first-child,
  .split--reverse-mobile > :last-child { order: revert; }
}

.split--top { --split-align: flex-start; }
.split--baseline { --split-align: baseline; }

/* ---------- GRILLES ---------- */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (min-width: 768px) {
  .grid--2-fixed { grid-template-columns: repeat(2, 1fr); }
  .grid--3-fixed { grid-template-columns: repeat(3, 1fr); }
  .grid--4-fixed { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- CENTRAGE PLEINE PAGE ---------- */
.center-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- VISIBILITÉ RESPONSIVE ---------- */
.show-mobile-only { display: revert; }
.show-tablet-up   { display: none; }
.show-desktop-up  { display: none; }

@media (min-width: 768px) {
  .show-mobile-only { display: none; }
  .show-tablet-up   { display: revert; }
}

@media (min-width: 1440px) {
  .show-desktop-up  { display: revert; }
}

/* ---------- ALIGNEMENTS DE TEXTE ---------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---------- WIDTH LIMITERS — pour les colonnes de texte ---------- */
.measure       { max-width: 60ch; }    /* corps de texte confortable */
.measure-narrow { max-width: 40ch; }
.measure-wide   { max-width: 75ch; }