/*
 * Elengui Studio — Accessibility Overrides
 * Corrections WCAG AA pour Lighthouse Accessibility 100/10
 * Applique les ratios de contraste minimum 4.5:1 pour les petits textes
 * et 3:1 pour les grands textes (>18px bold ou >24px)
 */

/* ============================================================
   SR-ONLY — Labels cachés visuellement mais accessibles aux screen readers
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   COLOR CONTRAST FIXES — WCAG AA compliance
   
   zinc-400 (#a1a1aa) sur fond blanc : ratio 2.8:1 — INSUFFISANT
   zinc-500 (#71717a) sur fond blanc : ratio 4.6:1 — OK (borderline)
   zinc-600 (#52525b) sur fond blanc : ratio 7:1 — EXCELLENT
   
   Le .label-tag utilise zinc-400 — on le remplace par zinc-600
   ============================================================ */

/* Label-tag: zinc-400 → zinc-600 pour WCAG AA */
.label-tag {
  color: rgb(82 82 91) !important; /* zinc-600 — ratio 7:1 ✅ */
}

/* Amélioration des textes zinc-400 utilisés comme texte de contenu */
.text-zinc-400 {
  color: rgb(82 82 91) !important; /* Remplacé par zinc-600 ✅ */
}

/* Exception: zinc-400 sur fond sombre (footer) = OK car fond sombre */
.bg-onyx-950 .text-zinc-400,
.bg-onyx-900 .text-zinc-400,
footer .text-zinc-400 {
  color: rgb(161 161 170) !important; /* Restauré: zinc-400 sur fond sombre ratio ~6:1 ✅ */
}

/* Nav links: zinc-500 sur fond transparent (navbar) — améliorer */
.nav-link {
  color: rgb(82 82 91) !important; /* zinc-600 ✅ */
}

/* Placeholder text — doit avoir ratio 4.5:1 minimum */
input::placeholder,
textarea::placeholder {
  color: rgb(82 82 91) !important; /* zinc-600 ✅ */
  opacity: 0.7;
}

/* ============================================================
   HEADING ORDER FIXES
   Correction des transitions h4 qui étaient directement sous h1
   On s'assure que h3 dans les contextes de cartes est stylistiquement
   identique à h4 (pour maintenir le design)
   ============================================================ */

/* Les cartes produits utilisent maintenant h3 à la place de h4.
   On leur applique le style de h4 pour maintenir la hiérarchie visuelle. */
.product-card h3,
article h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* ============================================================
   FOCUS VISIBLE — Amélioration pour navigation clavier
   ============================================================ */
:focus-visible {
  outline: 2px solid rgb(184 150 15); /* brass-500 */
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(184 150 15);
  outline-offset: 2px;
}

/* ============================================================
   TABLE HEADERS — Amélioration contraste
   Les th avec text-zinc-500 sur fond zinc-50 ont ratio 4.6:1 (borderline)
   ============================================================ */
th {
  color: rgb(63 63 70) !important; /* zinc-700 — ratio ~8:1 ✅ */
}