/* ============================================================
   UTILITIES — Classes atomiques réutilisables
   ============================================================ */

/* ── Accessibilité / SEO ──────────────────────────────────── */
/* Texte présent dans le DOM (donc indexable) mais retiré visuellement.
   Ne pas utiliser display:none : Google traite ce contenu différemment. */
.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;
}

/* ── Boutons ─────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-gold);
  color: var(--color-blue-dk);
  font-weight: var(--fw-black);
  font-size: 0.95rem;
  padding: 0.95rem 2.2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-gold);
  transition: all var(--transition-base);
  font-family: var(--font-body);
}

.btn-gold:hover {
  background: var(--color-gold-lt);
  transform: translateY(-2px);
}

.btn-outline-w {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--alpha-white-30);
  color: var(--alpha-white-82);
  font-weight: var(--fw-medium);
  font-size: 0.93rem;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.btn-outline-w:hover {
  border-color: var(--color-white);
  background: var(--alpha-white-07);
}

.btn-inv {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  color: var(--color-gold-lt);
  text-decoration: none;
  border: 1px solid var(--alpha-gold-35);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.btn-inv:hover {
  background: var(--alpha-gold-10);
}

.rel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-gold-lt);
  text-decoration: none;
  border: 1px solid var(--alpha-gold-30);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.rel-link:hover {
  background: var(--alpha-gold-10);
}

/* ── Textes colorés ──────────────────────────────────────── */
.text-gold     { color: var(--color-gold); }
.text-gold-lt  { color: var(--color-gold-lt); }
.text-white    { color: var(--color-white); }
.text-muted    { color: var(--alpha-white-50); }
.text-muted-sm { color: var(--alpha-white-45); }

/* ── Fonds de section ────────────────────────────────────── */
.bg-dark   { background-color: var(--color-dark); }
.bg-dark-2 { background-color: var(--color-dark-2); }
.bg-dark-3 { background-color: var(--color-dark-3); }
.bg-blue-dk { background-color: var(--color-blue-dk); }
.bg-blue   { background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-deep) 100%); }

/* ── Description courte sous titre ──────────────────────── */
.section-desc {
  color: var(--alpha-white-55);
  font-size: var(--text-lg);
  max-width: 540px;
  line-height: var(--lh-relaxed);
  margin-bottom: 2.5rem;
}

/* ── Label de référence programme ────────────────────────── */
.prog-ref-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Description programme ───────────────────────────────── */
.prog-desc {
  font-size: var(--text-md);
  color: var(--alpha-white-50);
  margin-bottom: 1.5rem;
}