/* ============================================================
   BOULEBRETONNE.FR — LAYOUT
   ============================================================ */

/* ─── CONTAINERS ─────────────────────────────────────────── */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-wide {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ─── GRILLES ────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* ─── FLEX HELPERS ───────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ─── SCROLL HORIZONTAL ──────────────────────────────────── */
.scroll-x {
  display: flex;
  overflow-x: auto;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-x::-webkit-scrollbar { height: 3px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.scroll-snap { scroll-snap-align: start; flex-shrink: 0; }

/* ─── UTILITAIRES ────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0 !important; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.opacity-50 { opacity: 0.5; }
.pointer { cursor: pointer; }
.no-select { user-select: none; }

/* ─── RESPONSIVE BREAKPOINTS ─────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
  .container, .container-wide, .container-narrow { padding: 0 var(--space-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}