/* =====================================================================
   LAYOUT.CSS — Grilles réutilisables (Grid / Flexbox)
   Aucune structure principale en position:absolute.
   ===================================================================== */

/* ---------- Grille auto-responsive ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Deux colonnes texte / image ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.two-col--media-first { direction: rtl; }
.two-col--media-first > * { direction: ltr; }

/* ---------- Split (blocs pleine largeur côte à côte) ---------- */
.split {
  display: grid;
  gap: 0;
  align-items: stretch;
}
.split--2 { grid-template-columns: 1fr 1fr; }
.split--sidebar { grid-template-columns: 250px 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }

/* ---------- Cluster (rangée d'éléments flexibles) ---------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }

/* ---------- Média couvrant ---------- */
.media-cover { position: relative; overflow: hidden; }
.media-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rounded    { border-radius: var(--radius-lg); overflow: hidden; }
.rounded-md { border-radius: var(--radius-md); overflow: hidden; }

/* ---------- Ratios ---------- */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-3-4  { aspect-ratio: 3 / 4; }