/* ==========================================================================
   CybHelp — Accessibilité
   Skip-links, sr-only, mode haute lisibilité (AAA)
   ========================================================================== */

/* ---------- Screen reader only ---------- */
.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;
}

/* ---------- Skip-links ---------- */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: var(--space-2);
}

.skip-links a {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  padding: 0.6rem 1rem;
  background: var(--violet);
  color: var(--text);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
  box-shadow: var(--shadow-lg);
}

.skip-links a:focus-visible {
  top: var(--space-2);
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- Mode haute lisibilité AAA ---------- */
[data-a11y="high"] {
  --bg: #000000;
  --bg-elev-1: #0a0a0a;
  --bg-elev-2: #141414;
  --text: #ffffff;
  --text-dim: #e5e5e5;
  --text-muted: #cccccc;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.3);
  --violet: #c4b5fd;
  --cyan: #67e8f9;
  --success: #86efac;
  --warning: #fcd34d;
  --danger: #fca5a5;
  --halo: none;
}

[data-a11y="high"] body {
  background-image: none;
}

[data-a11y="high"] :focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

[data-a11y="high"] .btn,
[data-a11y="high"] input,
[data-a11y="high"] select,
[data-a11y="high"] textarea,
[data-a11y="high"] .card,
[data-a11y="high"] .chip {
  border-width: 2px;
}

[data-a11y="high"] .hero-title {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}

[data-a11y="high"] .btn-primary {
  background: var(--cyan);
  color: #000;
}

[data-a11y="high"] a {
  text-decoration: underline;
}

/* Le mode contraste force les animations à s'atténuer */
[data-a11y="high"] *,
[data-a11y="high"] *::before,
[data-a11y="high"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* prefers-reduced-motion global */
@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;
  }
  .breathing-circle {
    animation: none;
    opacity: 0.6;
  }
}