/* ==========================================================================
   Widget accessibilité — socle PORTABLE (fonctionne sur n'importe quel site).
   Utilise des variables CSS avec fallback (var(--x, valeur-par-défaut)) :
   si le site cible a déjà --navy/--ink/--line/--muted/--font-sans/--font-display,
   le widget épouse automatiquement sa charte. Sinon les valeurs par défaut
   (bleu marine neutre) s'appliquent — à ajuster si besoin.
   ========================================================================== */

/* Boutons flottants empilés en bas à droite : accessibilité (toujours visible, en bas)
   + flèche « remonter en haut » (au-dessus, visible après défilement).
   Couleurs paramétrables : --a11y-btn-bg / --a11y-scrolltop-bg (fallbacks neutres). */
.a11y-btn {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 9999px; border: 0;
  background: var(--a11y-btn-bg, var(--navy, #21386E)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  cursor: pointer; transition: background-color .2s, filter .2s;
}
.a11y-btn:hover { background: var(--a11y-btn-bg-hover, var(--ink, #1B2A4E)); }
.a11y-btn:focus-visible, .scrolltop-btn:focus-visible { outline: 3px solid var(--a11y-scrolltop-bg, #b45309); outline-offset: 2px; }

.scrolltop-btn {
  position: fixed; bottom: 5rem; right: 1.25rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 9999px; border: 0;
  background: var(--a11y-scrolltop-bg, #b45309); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  cursor: pointer; transition: background-color .2s;
}
.scrolltop-btn.is-visible { display: inline-flex; }
.scrolltop-btn:hover { filter: brightness(.92); }

.a11y-panel {
  position: fixed; bottom: 5rem; right: 1.25rem; z-index: 61;
  width: 16rem; max-width: calc(100vw - 2.5rem);
  background: var(--a11y-panel-bg, #fff); color: var(--ink, #1B2A4E);
  border: 1px solid var(--line, var(--border, #E3E1D9));
  border-radius: 0.9rem; padding: 1rem 1.1rem;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.45);
  font-family: var(--font-sans, system-ui, sans-serif);
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h2 { font-family: var(--font-display, inherit); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.7rem; }
.a11y-panel label {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
  color: var(--ink, #1B2A4E); cursor: pointer; font-size: .95rem;
}
.a11y-panel input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--a11y-btn-bg, var(--navy, #21386E)); flex: 0 0 auto; }
.a11y-reset {
  width: 100%; margin-top: .8rem; padding: .55rem; border-radius: 9999px;
  border: 1px solid var(--line, var(--border, #E3E1D9)); background: transparent;
  color: var(--ink, #1B2A4E); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background-color .2s;
}
.a11y-reset:hover { background: rgba(0,0,0,.05); }

/* ---- Agrandir le texte ---- */
html.a11y-larger body { font-size: 20px; }
html.a11y-larger h1 { font-size: 1.1em; }

/* ---- Espacer le texte (confort de lecture dys/TDAH) ---- */
html.a11y-spacing body { line-height: 1.9; letter-spacing: .02em; word-spacing: .08em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: .55rem; }

/* ---- Souligner les liens ---- */
html.a11y-links a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; }

/* ---- Réduire les animations (case du site — en plus du prefers-reduced-motion système) ---- */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* ⚠️ Si le site a du JS qui force scrollIntoView({behavior:'smooth'}) (ex. ancre/onglet),
   ce réglage CSS ne s'applique PAS à cet appel (limitation navigateur). Il faut vérifier en JS :
   document.documentElement.classList.contains('a11y-motion') || matchMedia('(prefers-reduced-motion: reduce)').matches
   et passer behavior:'auto' dans ce cas. Vu en prod sur educ-care — à vérifier systématiquement. */

/* ---- Police dyslexie (OpenDyslexic) ----
   Fichiers à héberger en local : /fonts/opendyslexic-400.woff2 + opendyslexic-700.woff2
   Source : https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5/files/opendyslexic-latin-400-normal.woff2
            https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5/files/opendyslexic-latin-700-normal.woff2
   Chargé UNIQUEMENT si l'option est activée (0 coût sinon). */
@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/opendyslexic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/opendyslexic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
html.a11y-dys body, html.a11y-dys input, html.a11y-dys textarea, html.a11y-dys button, html.a11y-dys select {
  font-family: "OpenDyslexic", var(--font-sans, system-ui, sans-serif) !important;
}
html.a11y-dys h1, html.a11y-dys h2, html.a11y-dys h3, html.a11y-dys h4 {
  font-family: "OpenDyslexic", var(--font-display, var(--font-sans, system-ui, sans-serif)) !important;
  letter-spacing: 0;
}
/* La police OpenDyslexic est large : si la barre d'en-tête (logo/nom/CTA) est étroite,
   neutraliser la police dys dessus pour éviter tout débordement (adapter le sélecteur) : */
/* html.a11y-dys .site-header { font-family: var(--font-sans, system-ui, sans-serif) !important; } */