/* =============================================================
   Utilitaires CSS v2.0
   ============================================================= */

/* ─── Display ─────────────────────────────────────────────── */
.hidden         { display: none !important; }
.block          { display: block; }
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }

/* ─── Texte ───────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.text-invert  { color: var(--text-invert); }
.text-white   { color: #fff; }

.font-normal   { font-weight: var(--w-normal); }
.font-medium   { font-weight: var(--w-medium); }
.font-semibold { font-weight: var(--w-semibold); }
.font-bold     { font-weight: var(--w-bold); }

.uppercase { text-transform: uppercase; }
.tracking-wide   { letter-spacing: var(--ls-wide); }
.tracking-wider  { letter-spacing: var(--ls-wider); }
.leading-tight   { line-height: var(--lh-tight); }
.leading-relaxed { line-height: var(--lh-relaxed); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Fond / surface ──────────────────────────────────────── */
.bg-white   { background: #fff; }
.bg-alt     { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-primary { background: var(--primary); }
.bg-dark    { background: var(--navy-950); }

/* ─── Espacement ──────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.mx-auto { margin-inline: auto; }

.p-4 { padding: var(--s-4); }
.p-6 { padding: var(--s-6); }
.px-4 { padding-inline: var(--s-4); }
.py-4 { padding-block: var(--s-4); }

/* ─── Bordures ────────────────────────────────────────────── */
.rounded    { border-radius: var(--r); }
.rounded-sm { border-radius: var(--r-sm); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-full { border-radius: var(--r-full); }
.border     { border: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }

/* ─── Ombres ──────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }

/* ─── Visibilité responsive ───────────────────────────────── */
.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 768px) {
  .hide-mobile { display: block; }
  .show-mobile { display: none; }
  .hide-tablet { display: none; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none; }
}

/* ─── Divers ──────────────────────────────────────────────── */
.w-full    { width: 100%; }
.max-w-narrow { max-width: var(--max-w-narrow); }
.mx-auto   { margin-inline: auto; }
.overflow-hidden { overflow: hidden; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.inset-0   { inset: 0; }
.z-10      { z-index: 10; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Titre avec accent doré */
.title-accented {
  position: relative;
  display: inline-block;
}
.title-accented::after {
  content: '';
  display: block;
  height: 4px;
  width: 48px;
  background: var(--gradient-gold);
  border-radius: var(--r-full);
  margin-top: var(--s-3);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin-block: var(--s-8);
}

/* Lien "voir tout" */
.view-all-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-sm); font-weight: var(--w-semibold);
  color: var(--primary); text-decoration: none;
  transition: gap var(--t-fast);
}
.view-all-link:hover { gap: var(--s-3); }
.view-all-link .arrow { transition: transform var(--t-fast); }
.view-all-link:hover .arrow { transform: translateX(4px); }

/* Aspect ratios */
.aspect-video  { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1; }
.aspect-card   { aspect-ratio: 4/3; }

/* Object fit */
.object-cover  { object-fit: cover; width: 100%; height: 100%; }
.object-center { object-position: center; }