/* ═══════════════════════════════════════════════════════════════
   WHG ACCESSIBILITY WIDGET — Styles
   Conforme WCAG 2.1 AA / RGAA 4.1 / EN 301 549
   ═══════════════════════════════════════════════════════════════ */

/* ─── Bouton déclencheur fixe ─── */
.whg-a11y-trigger {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 999998 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #1a1a2e !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
  cursor: pointer !important;
  border: 2px solid #ffffff40 !important;
  transition: transform .2s, box-shadow .2s, background .2s !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.whg-a11y-trigger:hover,
.whg-a11y-trigger:focus-visible {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
  background: #c73050 !important;
  outline: none !important;
}
.whg-a11y-trigger:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 4px !important;
}

/* ─── Panneau latéral ─── */
.whg-a11y-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  width: 380px !important;
  max-width: 92vw !important;
  height: 100dvh !important;
  background: #fff !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.18) !important;
  transform: translateX(110%) !important;
  transition: transform .32s cubic-bezier(.22,1,.36,1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #1a1a2e !important;
  -webkit-font-smoothing: antialiased !important;
}
.whg-a11y-panel.whg-a11y--open {
  transform: translateX(0) !important;
}
.whg-a11y-panel-inner {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* ─── Header ─── */
.whg-a11y-header {
  padding: 24px 24px 16px !important;
  background: #1a1a2e !important;
  color: #fff !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.whg-a11y-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
}
.whg-a11y-subtitle {
  font-size: .82rem !important;
  opacity: .75 !important;
  margin: 0 !important;
  color: #fff !important;
  padding-right: 32px !important;
}
.whg-a11y-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background .15s !important;
}
.whg-a11y-close:hover,
.whg-a11y-close:focus-visible {
  background: rgba(255,255,255,.25) !important;
  outline: 2px solid #fff !important;
}

/* ─── Body ─── */
.whg-a11y-body {
  padding: 20px 24px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* ─── Groupes ─── */
.whg-a11y-group-label {
  display: block !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: #767676 !important;
  margin-bottom: 8px !important;
}

/* ─── Boutons radio (text-size + contrast) ─── */
.whg-a11y-btn-row {
  display: flex !important;
  gap: 6px !important;
  border-radius: 10px !important;
  background: #f1f3f5 !important;
  padding: 4px !important;
}
.whg-a11y-opt {
  flex: 1 !important;
  padding: 9px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #333 !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-align: center !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
}
.whg-a11y-opt:hover {
  background: rgba(0,0,0,.05) !important;
}
.whg-a11y-opt.active {
  background: #1a1a2e !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26,26,46,.25) !important;
}
.whg-a11y-opt:focus-visible {
  outline: 2px solid #1a1a2e !important;
  outline-offset: 2px !important;
}

/* ─── Toggles ─── */
.whg-a11y-toggle-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.whg-a11y-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  border: 1px solid transparent !important;
  user-select: none !important;
}
.whg-a11y-toggle:hover {
  background: #f8f9fa !important;
}
.whg-a11y-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.whg-a11y-toggle-slider {
  position: relative !important;
  display: inline-block !important;
  width: 38px !important;
  height: 22px !important;
  background: #ccc !important;
  border-radius: 11px !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
}
.whg-a11y-toggle-slider::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 16px !important;
  height: 16px !important;
  background: #fff !important;
  border-radius: 50% !important;
  transition: transform .2s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.whg-a11y-toggle input:checked + .whg-a11y-toggle-slider {
  background: #2e7d32 !important;
}
.whg-a11y-toggle input:checked + .whg-a11y-toggle-slider::after {
  transform: translateX(16px) !important;
}
.whg-a11y-toggle input:focus-visible + .whg-a11y-toggle-slider {
  outline: 2px solid #1a1a2e !important;
  outline-offset: 2px !important;
}
.whg-a11y-toggle-text {
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
}

/* ─── Footer / Reset ─── */
.whg-a11y-footer {
  padding: 16px 24px 24px !important;
  border-top: 1px solid #eee !important;
  flex-shrink: 0 !important;
}
.whg-a11y-btn-reset {
  width: 100% !important;
  padding: 11px !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #555 !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
}
.whg-a11y-btn-reset:hover {
  border-color: #c73050 !important;
  color: #c73050 !important;
  background: #fff5f7 !important;
}
.whg-a11y-btn-reset:focus-visible {
  outline: 2px solid #c73050 !important;
  outline-offset: 2px !important;
}
.whg-a11y-legal {
  margin: 12px 0 0 !important;
  font-size: .7rem !important;
  color: #999 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* ─── Guide de lecture (règle horizontale) ─── */
.whg-a11y-guide-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  height: 28px !important;
  background: rgba(255,255,0,.22) !important;
  border-top: 2px solid rgba(255,200,0,.6) !important;
  border-bottom: 2px solid rgba(255,200,0,.6) !important;
  pointer-events: none !important;
  z-index: 999997 !important;
  display: none !important;
  box-shadow: 0 0 12px rgba(255,200,0,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CLASSES D'ACCESSIBILITÉ APPLIQUÉES PAR LE JS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Texte grande taille ─── */
.whg-a11y-text-size-m,
.whg-a11y-text-size-m body,
.whg-a11y-text-size-m p,
.whg-a11y-text-size-m li,
.whg-a11y-text-size-m .entry-content,
.whg-a11y-text-size-m .site-content {
  font-size: 18px !important;
}
.whg-a11y-text-size-l,
.whg-a11y-text-size-l body,
.whg-a11y-text-size-l p,
.whg-a11y-text-size-l li,
.whg-a11y-text-size-l .entry-content,
.whg-a11y-text-size-l .site-content {
  font-size: 22px !important;
}

/* ─── Contraste élevé ─── */
.whg-a11y-contrast-high,
.whg-a11y-contrast-high body,
.whg-a11y-contrast-high .site {
  background: #000 !important;
  color: #fff !important;
}
.whg-a11y-contrast-high a {
  color: #ffcc00 !important;
  text-decoration: underline !important;
}
.whg-a11y-contrast-high a:visited {
  color: #d4a800 !important;
}
.whg-a11y-contrast-high a:hover,
.whg-a11y-contrast-high a:focus {
  color: #ffe066 !important;
}
.whg-a11y-contrast-high button,
.whg-a11y-contrast-high .button,
.whg-a11y-contrast-high input[type="submit"],
.whg-a11y-contrast-high [class*="btn"],
.whg-a11y-contrast-high [class*="cta"] {
  background: #333 !important;
  color: #fff !important;
  border-color: #fff !important;
}
.whg-a11y-contrast-high h1,
.whg-a11y-contrast-high h2,
.whg-a11y-contrast-high h3,
.whg-a11y-contrast-high h4,
.whg-a11y-contrast-high h5,
.whg-a11y-contrast-high h6,
.whg-a11y-contrast-high .entry-title,
.whg-a11y-contrast-high .widget-title,
.whg-a11y-contrast-high .site-title {
  color: #fff !important;
}
.whg-a11y-contrast-high img,
.whg-a11y-contrast-high video,
.whg-a11y-contrast-high iframe {
  opacity: .85 !important;
}
.whg-a11y-contrast-high .site-header,
.whg-a11y-contrast-high .site-footer,
.whg-a11y-contrast-high .main-navigation,
.whg-a11y-contrast-high nav,
.whg-a11y-contrast-high header,
.whg-a11y-contrast-high footer,
.whg-a11y-contrast-high .sidebar,
.whg-a11y-contrast-high aside,
.whg-a11y-contrast-high .widget,
.whg-a11y-contrast-high article,
.whg-a11y-contrast-high section,
.whg-a11y-contrast-high div,
.whg-a11y-contrast-high main {
  background: #000 !important;
  color: #fff !important;
  border-color: #555 !important;
}
.whg-a11y-contrast-high table th,
.whg-a11y-contrast-high table td {
  border-color: #666 !important;
  background: #111 !important;
  color: #fff !important;
}
.whg-a11y-contrast-high table th {
  background: #222 !important;
}
.whg-a11y-contrast-high input,
.whg-a11y-contrast-high textarea,
.whg-a11y-contrast-high select {
  background: #222 !important;
  color: #fff !important;
  border-color: #888 !important;
}
.whg-a11y-contrast-high .wpa-art-card,
.whg-a11y-contrast-high .whg-article-card,
.whg-a11y-contrast-high .post,
.whg-a11y-contrast-high .card {
  background: #111 !important;
  border-color: #444 !important;
  box-shadow: none !important;
}
.whg-a11y-contrast-high [class*="badge"],
.whg-a11y-contrast-high [class*="pill"] {
  background: #222 !important;
  color: #fff !important;
  border-color: #666 !important;
}
.whg-a11y-contrast-high .site-footer a,
.whg-a11y-contrast-high .footer-widgets a {
  color: #ffcc00 !important;
}

/* ─── Contraste inversé ─── */
.whg-a11y-contrast-invert,
.whg-a11y-contrast-invert body {
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Ré-inverser images/vidéos pour qu'elles restent naturelles */
.whg-a11y-contrast-invert img,
.whg-a11y-contrast-invert video,
.whg-a11y-contrast-invert iframe,
.whg-a11y-contrast-invert svg,
.whg-a11y-contrast-invert canvas,
.whg-a11y-contrast-invert [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* ─── Texte en gras ─── */
.whg-a11y-bold-text p,
.whg-a11y-bold-text li,
.whg-a11y-bold-text .entry-content,
.whg-a11y-bold-text .hentry,
.whg-a11y-bold-text .post-content {
  font-weight: 700 !important;
}

/* ─── Interligne augmenté ─── */
.whg-a11y-line-spacing p,
.whg-a11y-line-spacing li,
.whg-a11y-line-spacing .entry-content,
.whg-a11y-line-spacing .hentry,
.whg-a11y-line-spacing .wpa-art-title,
.whg-a11y-line-spacing .whg-article-title {
  line-height: 2 !important;
}
.whg-a11y-line-spacing p + p,
.whg-a11y-line-spacing li + li {
  margin-top: 1.2em !important;
}

/* ─── Pas d'animations ─── */
.whg-a11y-no-animations *,
.whg-a11y-no-animations *::before,
.whg-a11y-no-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* ─── Niveaux de gris ─── */
.whg-a11y-monochrome,
.whg-a11y-monochrome body {
  filter: grayscale(100%) !important;
}
/* Ré-inverser si combiné avec invert */
.whg-a11y-contrast-invert.whg-a11y-monochrome body {
  filter: invert(1) hue-rotate(180deg) grayscale(100%) !important;
}

/* ─── Focus visible renforcé ─── */
.whg-a11y-focus-visible a:focus-visible,
.whg-a11y-focus-visible button:focus-visible,
.whg-a11y-focus-visible input:focus-visible,
.whg-a11y-focus-visible textarea:focus-visible,
.whg-a11y-focus-visible select:focus-visible,
.whg-a11y-focus-visible [tabindex]:focus-visible {
  outline: 3px solid #c73050 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(199,48,80,.25) !important;
}

/* ─── Masquer les images ─── */
.whg-a11y-hide-images img,
.whg-a11y-hide-images video,
.whg-a11y-hide-images iframe,
.whg-a11y-hide-images canvas,
.whg-a11y-hide-images svg:not(.whg-a11y-trigger svg),
.whg-a11y-hide-images [class*="thumb"],
.whg-a11y-hide-images [class*="thumbnail"],
.whg-a11y-hide-images [class*="post-thumbnail"],
.whg-a11y-hide-images [style*="background-image"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* ─── Police Dyslexie ─── */
.whg-a11y-dyslexia-font body,
.whg-a11y-dyslexia-font p,
.whg-a11y-dyslexia-font li,
.whg-a11y-dyslexia-font h1,
.whg-a11y-dyslexia-font h2,
.whg-a11y-dyslexia-font h3,
.whg-a11y-dyslexia-font h4,
.whg-a11y-dyslexia-font h5,
.whg-a11y-dyslexia-font h6,
.whg-a11y-dyslexia-font a,
.whg-a11y-dyslexia-font span,
.whg-a11y-dyslexia-font div,
.whg-a11y-dyslexia-font .entry-content,
.whg-a11y-dyslexia-font .site-content {
  font-family: "OpenDyslexic", "Lexie Readable", "Comic Sans MS", "Chalkboard", sans-serif !important;
  font-style: normal !important;
  letter-spacing: .05em !important;
  word-spacing: .12em !important;
}
/* Charger OpenDyslexic si dispo via @font-face */
@font-face {
  font-family: "OpenDyslexic";
  src: local("OpenDyslexic"), local("OpenDyslexic3"), local("OpenDyslexic-Regular");
  font-display: swap;
}

/* ─── Overlay quand le panneau est ouvert ─── */
body.whg-a11y-panel-open::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  z-index: 999998 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   NOUVELLES FONCTIONNALITÉS v1.1
   ═══════════════════════════════════════════════════════════════ */

/* ─── Mode sombre ─── */
.whg-a11y-dark-mode,
.whg-a11y-dark-mode body {
  background: #121212 !important;
  color: #e0e0e0 !important;
}
.whg-a11y-dark-mode a {
  color: #81b0ff !important;
}
.whg-a11y-dark-mode a:visited {
  color: #b388ff !important;
}
.whg-a11y-dark-mode h1,
.whg-a11y-dark-mode h2,
.whg-a11y-dark-mode h3,
.whg-a11y-dark-mode h4,
.whg-a11y-dark-mode h5,
.whg-a11y-dark-mode h6,
.whg-a11y-dark-mode .entry-title,
.whg-a11y-dark-mode .widget-title {
  color: #f0f0f0 !important;
}
.whg-a11y-dark-mode .site-header,
.whg-a11y-dark-mode .site-footer,
.whg-a11y-dark-mode article,
.whg-a11y-dark-mode .post,
.whg-a11y-dark-mode .card,
.whg-a11y-dark-mode .widget,
.whg-a11y-dark-mode aside,
.whg-a11y-dark-mode .sidebar,
.whg-a11y-dark-mode header,
.whg-a11y-dark-mode footer,
.whg-a11y-dark-mode nav,
.whg-a11y-dark-mode section,
.whg-a11y-dark-mode .wpa-art-card,
.whg-a11y-dark-mode .whg-article-card {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}
.whg-a11y-dark-mode .wpa-art-title {
  color: #e0e0e0 !important;
}
.whg-a11y-dark-mode input,
.whg-a11y-dark-mode textarea,
.whg-a11y-dark-mode select {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}
.whg-a11y-dark-mode table th,
.whg-a11y-dark-mode table td {
  border-color: #444 !important;
  background: #1a1a1a !important;
}
.whg-a11y-dark-mode table th {
  background: #252525 !important;
}
.whg-a11y-dark-mode button,
.whg-a11y-dark-mode [class*="btn"]:not(.whg-a11y-trigger) {
  background: #333 !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}
.whg-a11y-dark-mode img {
  opacity: .8 !important;
}

/* ─── Grand curseur ─── */
.whg-a11y-big-cursor *,
.whg-a11y-big-cursor *::before,
.whg-a11y-big-cursor *::after {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40"><polygon points="2,2 2,32 7,27 12,38 16,36 11,25 22,25" fill="black" stroke="white" stroke-width="2"/></svg>') 4 4, auto !important;
}
.whg-a11y-big-cursor a,
.whg-a11y-big-cursor button,
.whg-a11y-big-cursor [role="button"],
.whg-a11y-big-cursor input[type="submit"],
.whg-a11y-big-cursor .clickable {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40"><polygon points="2,2 2,32 7,27 12,38 16,36 11,25 22,25" fill="black" stroke="white" stroke-width="2"/></svg>') 4 4, pointer !important;
}

/* ─── Mode daltonien ─── */
.whg-a11y-colorblind,
.whg-a11y-colorblind body {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='cb'><feColorMatrix type='matrix' values='0.43 0.72 -0.15 0 0 0.34 0.57 0.09 0 0 -0.02 0.03 0.99 0 0 0 0 0 1 0'/></filter></svg>#cb") !important;
}

/* ─── Masque de lecture (bandes haut/bas qui suivent le scroll) ─── */
.whg-a11y-reading-mask-active {
  position: relative !important;
}
.whg-a11y-reading-mask-active::before,
.whg-a11y-reading-mask-active::after {
  content: '' !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: rgba(0,0,0,.55) !important;
  pointer-events: none !important;
  transition: top .15s, bottom .15s !important;
}
.whg-a11y-reading-mask-active::before {
  top: 0 !important;
  height: 20vh !important;
}
.whg-a11y-reading-mask-active::after {
  bottom: 0 !important;
  height: 20vh !important;
}

/* ─── Bouton flottant audio pour lecture à voix haute ─── */
.whg-a11y-tts-active {
  outline: 2px solid #4caf50 !important;
  outline-offset: 2px !important;
  background: rgba(76,175,80,.08) !important;
}
#whg-a11y-tts-controls {
  position: fixed !important;
  bottom: 80px !important;
  left: 20px !important;
  z-index: 999997 !important;
  background: #1a1a2e !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.3) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border: 1px solid #ffffff30 !important;
}
#whg-a11y-tts-controls.whg-a11y-tts-visible {
  display: flex !important;
}
#whg-a11y-tts-controls button {
  background: rgba(255,255,255,.1) !important;
  border: none !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .15s !important;
}
#whg-a11y-tts-controls button:hover,
#whg-a11y-tts-controls button:focus-visible {
  background: rgba(255,255,255,.25) !important;
}
#whg-a11y-tts-status {
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* ─── Responsive ─── */
@media(max-width:480px) {
  .whg-a11y-trigger {
    width: 44px !important;
    height: 44px !important;
    bottom: 14px !important;
    left: 14px !important;
  }
  .whg-a11y-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .whg-a11y-header {
    padding: 18px 16px 14px !important;
  }
  .whg-a11y-body {
    padding: 14px 16px !important;
  }
  .whg-a11y-footer {
    padding: 12px 16px 20px !important;
  }
}