/**
 * Styles d'accessibilité RGAA
 *
 * Classes utilitaires pour conformité RGAA niveau AA
 * - Skip links
 * - Screen reader only
 * - Focus visible
 * - Styles haute-contraste
 *
 * AIDEV-NOTE: RGAA AA obligatoire
 * Ces styles sont critiques pour la conformité légale.
 */

/* ============ SKIP LINK ============ */
/**
 * Lien d'évitement vers le contenu principal
 * WCAG 2.4.1 - Contourner des blocs
 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  background-color: var(--color-primary, #1565c0);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
}

/* ============ SCREEN READER ONLY ============ */
/**
 * Masque visuellement mais reste accessible aux lecteurs d'écran
 * WCAG 1.3.1 - Information et relations
 */
.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;
}

/**
 * Variante qui peut être rendue visible au focus
 */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

/* ============ FOCUS VISIBLE ============ */
/**
 * Indicateurs de focus conformes WCAG 2.4.7
 * Focus visible sur tous les éléments interactifs
 */

/* Reset du focus par défaut */
*:focus {
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
}

/* Supprimer outline pour interactions souris uniquement */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Focus visible (clavier) */
*:focus-visible {
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
}

/* Focus spécifique pour les boutons */
button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.2);
}

/* Focus spécifique pour les liens */
a:focus-visible {
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
  background-color: rgba(21, 101, 192, 0.1);
}

/* Focus pour les champs de formulaire */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-focus, #0d47a1);
  outline-offset: 2px;
  border-color: var(--color-border-focus, #1565c0);
}

/* ============ ÉTATS ARIA ============ */
/**
 * Styles pour états ARIA
 */

/* Éléments invalides */
[aria-invalid="true"] {
  border-color: var(--color-error, #c62828) !important;
}

[aria-invalid="true"]:focus {
  outline-color: var(--color-error, #c62828);
}

/* Éléments désactivés */
[aria-disabled="true"],
[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Éléments sélectionnés */
[aria-selected="true"] {
  background-color: var(--color-bg-highlight, #e3f2fd);
}

/* Éléments courants */
[aria-current="true"],
[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
}

/* Éléments développés/réduits */
[aria-expanded="false"]::after {
  content: " ▸";
}

[aria-expanded="true"]::after {
  content: " ▾";
}

/* ============ LIVE REGIONS ============ */
/**
 * Styles pour les régions live ARIA
 * Pas de styles visuels par défaut, mais peuvent être stylées si besoin
 */
[role="status"],
[role="alert"],
[aria-live] {
  /* Pas de styles par défaut pour les annonces screen reader */
}

/* Alerte visible */
[role="alert"]:not(.sr-only) {
  padding: var(--spacing-md, 16px);
  background-color: var(--color-error-bg, #ffebee);
  border-left: 4px solid var(--color-error, #c62828);
  border-radius: var(--border-radius, 4px);
  margin: var(--spacing-md, 16px) 0;
}

/* ============ DIALOG/MODAL ============ */
/**
 * Styles pour les dialogues accessibles
 * WCAG 2.4.3 - Ordre du focus
 */
[role="dialog"],
[role="alertdialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: var(--color-bg-primary, white);
  border-radius: var(--border-radius, 4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: var(--spacing-lg, 24px);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* Overlay pour le dialogue */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* ============ TABLEAUX ACCESSIBLES ============ */
/**
 * Styles pour tableaux avec headers accessibles
 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  text-align: left;
  border-bottom: 1px solid var(--color-border, #bdbdbd);
}

th {
  background-color: var(--color-bg-secondary, #f5f5f5);
  font-weight: 600;
}

/* Focus dans les cellules */
th:focus,
td:focus {
  outline: 2px solid var(--color-focus, #0d47a1);
  outline-offset: -2px;
}

/* ============ PRÉFÉRENCES UTILISATEUR ============ */
/**
 * Respect des préférences utilisateur
 * WCAG 1.4.12 - Espacement du texte
 */

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mode contraste élevé */
@media (prefers-contrast: more) {
  :root {
    --color-primary: #0d47a1;
    --color-text-primary: #000000;
    --color-border: #000000;
  }

  button,
  .button {
    border: 2px solid currentColor;
  }
}

/* Mode sombre (optionnel - respect préférence) */
@media (prefers-color-scheme: dark) {
  /* Note: non implémenté dans cette version
     Conserver le thème clair pour usage en classe sur VPI */
}

/* ============ TAILLE DU TEXTE ============ */
/**
 * Support du zoom jusqu'à 200%
 * WCAG 1.4.4 - Redimensionnement du texte
 */
html {
  /* Permet le zoom du texte */
  font-size: 100%;
}

/* Éviter les débordements au zoom */
body {
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ============ ESPACEMENTS ACCESSIBLES ============ */
/**
 * Cibles tactiles de taille suffisante
 * WCAG 2.5.5 - Taille de la cible
 */
button,
.button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 44px;
  min-width: 44px;
}

/* Espacement entre éléments cliquables */
.button + .button,
button + button {
  margin-left: var(--spacing-sm, 8px);
}

/* ============ LIENS ACCESSIBLES ============ */
/**
 * Liens distinguables du texte
 * WCAG 1.4.1 - Utilisation de la couleur
 */
a {
  color: var(--color-primary, #1565c0);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
  background-color: rgba(21, 101, 192, 0.1);
}

/* Liens dans du texte (contexte) */
p a,
li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}