/* ═══════════════════════════════════════════
   RECHERCHE AVOCAT — Accessibility (WCAG 2.1 AA)
   Section E : Client-side improvements
   ═══════════════════════════════════════════ */

/* ─── Skip to main content ───────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--green-700);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ─── Focus indicators (keyboard nav) ────── */
/* Remplace l'outline par défaut par un style cohérent avec la charte */
:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sur fond sombre (header, hero) */
.header :focus-visible,
.avocat-hero :focus-visible {
  outline-color: var(--green-400);
  outline-offset: 3px;
}

/* Boutons primary/accent : outline blanc sur fond vert */
.btn--primary:focus-visible,
.btn--accent:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--green-600);
}

/* Chips, domain-btn */
.chip:focus-visible,
.domain-btn:focus-visible,
.urgence-btn:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

/* Supprime outline sur clic souris, conserve sur clavier */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Color contrast fixes ───────────────── */
/* Objectif : ratio 4.5:1 texte normal, 3:1 UI components */

/* Texte secondaire : --neutral-500 (#6b7280) sur blanc = 4.6:1 ✓ */
/* --neutral-400 trop clair — forcer neutral-500 min */
.footer__tagline,
.pricing-card__desc,
.pricing-card__note,
.avocat-step__text {
  color: var(--neutral-500); /* 4.6:1 sur blanc ✓ */
}

/* --green-400 (#52b882) sur blanc = 2.9:1 — insuffisant pour texte */
/* Forcer --green-700 pour tout texte coloré */
.textarea-counter--ok,
.otp-status--ok {
  color: var(--green-700) !important; /* 5.7:1 ✓ */
}

/* Placeholder : suffisamment contrasté */
::placeholder {
  color: var(--neutral-400);
  opacity: 1; /* Firefox */
}

/* ─── Form accessibility ─────────────────── */

/* Champ en erreur : indication non-couleur (border + icône) */
[data-error]::after {
  content: attr(data-error);
  display: block;
  font-size: var(--text-xs);
  color: var(--red-500);
  margin-top: var(--space-1);
  font-weight: 500;
}

.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* Champ vérifié / valide */
.field-input[aria-invalid="false"],
.field-textarea[aria-invalid="false"] {
  border-color: var(--green-500);
}

/* Required star */
.required {
  color: var(--red-500);
  margin-left: 2px;
  aria-hidden: true; /* Masqué pour les lecteurs d'écran */
}

/* Hint text */
.field-hint {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-1);
  display: block;
}

/* ─── Live regions (screen reader announcements) */
.sr-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Visually hidden (accessible text) ────── */
.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;
}

/* ─── High contrast mode support ─────────── */
@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }
  .chip.selected {
    border: 2px solid Highlight;
  }
  .wizard__progress-bar {
    background: Highlight;
  }
}

/* ─── Keyboard focus trap helpers ─────────── */
[data-focus-trap] {
  /* Classe ajoutée par JS quand une modale est ouverte */
  overflow: hidden;
}

/* ─── Interactive element minimum size (WCAG 2.5.5) ── */
/* Appliqué surtout sur mobile — voir responsive-mobile.css */
.btn,
.chip,
.domain-btn,
.urgence-btn {
  min-height: 36px; /* Desktop : un peu moins strict */
  min-width: 36px;
}