/**
 * Styles d'accessibilité - CTO de Lyon
 */

/* Variables CSS pour l'accessibilité */
:root {
  --accessibility-font-size: 1rem;
  --accessibility-line-height: 1.5;
  --accessibility-letter-spacing: 0;
}

/* Application de la taille de police - uniquement sur html pour préserver la hiérarchie des titres (rem/em) */
html {
  font-size: var(--accessibility-font-size);
}

body,
body * {
  line-height: var(--accessibility-line-height);
  letter-spacing: var(--accessibility-letter-spacing);
}

/* Police adaptée aux dyslexiques */
.dyslexic-font {
  font-family: 'OpenDyslexic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.dyslexic-font * {
  font-family: 'OpenDyslexic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Contraste élevé */
.high-contrast {
  --contrast-bg-dark: #000000;
  --contrast-text-dark: #ffffff;
  --contrast-border-dark: #ffffff;
  --contrast-bg-light: #ffffff;
  --contrast-text-light: #000000;
  --contrast-border-light: #000000;
}

html.dark.high-contrast {
  --contrast-bg: var(--contrast-bg-dark);
  --contrast-text: var(--contrast-text-dark);
  --contrast-border: var(--contrast-border-dark);
}

html.high-contrast:not(.dark) {
  --contrast-bg: var(--contrast-bg-light);
  --contrast-text: var(--contrast-text-light);
  --contrast-border: var(--contrast-border-light);
}

.high-contrast body,
.high-contrast main,
.high-contrast section,
.high-contrast article,
.high-contrast div {
  background-color: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5,
.high-contrast h6,
.high-contrast p,
.high-contrast span,
.high-contrast li,
.high-contrast td,
.high-contrast th,
.high-contrast div {
  color: var(--contrast-text) !important;
}

.high-contrast a {
  color: var(--contrast-text) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

.high-contrast button,
.high-contrast .btn {
  border: 2px solid var(--contrast-border) !important;
  background-color: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

.high-contrast input,
.high-contrast textarea,
.high-contrast select {
  border: 2px solid var(--contrast-border) !important;
  background-color: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

/* Surcharger les classes Tailwind en mode contraste élevé */
.high-contrast .bg-light,
.high-contrast .bg-body,
.high-contrast .dark\:bg-darkmode-light,
.high-contrast .dark\:bg-darkmode-body {
  background-color: var(--contrast-bg) !important;
}

.high-contrast .text-text-dark,
.high-contrast .text-text,
.high-contrast .dark\:text-darkmode-text,
.high-contrast .dark\:text-darkmode-text-dark {
  color: var(--contrast-text) !important;
}

/* Espacement dyslexie */
.dyslexic-font p,
.dyslexic-font span,
.dyslexic-font div,
.dyslexic-font li,
.dyslexic-font h1,
.dyslexic-font h2,
.dyslexic-font h3,
.dyslexic-font h4,
.dyslexic-font h5,
.dyslexic-font h6,
.dyslexic-font a,
.dyslexic-font button,
.dyslexic-font label {
  word-spacing: 0.1em;
}

/* Focus visible */
*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html.dark.high-contrast *:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

html.high-contrast:not(.dark) *:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dyslexic-font * {
    transition: none !important;
    animation: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}