/**
 * goA11y — styles du widget + effets de confort.
 *
 * DÉTERMINISME (cf. règle d'or GoCookies) : tout le visible du widget est
 * scopé #goa11y-* + !important pour résister aux thèmes hostiles. Le panneau
 * reste TOUJOURS clair (pas de prefers-color-scheme). Les effets visiteur
 * ciblent #goa11y-content (le contenu du site), jamais le widget.
 */

/* Auto-style : le widget hérite de la couleur d'accent du thème SANS config.
   Déclaré sur `body` (pas `:root`) car --e-global-color-primary d'Elementor vit
   sur body.elementor-kit-N (Gotcha connu) → invisible depuis :root.
   Priorité : override JS (accent explicite) > Elementor > WP preset > bleu de repli. */
body { --goa11y-accent: var(--goa11y-accent-override, var(--e-global-color-primary, var(--wp--preset--color--primary, #1a4fd6))); }

/* ---- neutralisation : le widget ne subit PAS les réglages hérités ---- */
#goa11y-toggle,
#goa11y-panel,
#goa11y-structure {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
#goa11y-panel *, #goa11y-structure * { box-sizing: border-box; }

/* ---- bouton flottant ---- */
#goa11y-toggle {
  position: fixed !important;
  bottom: 24px !important;
  z-index: 2147483000 !important;
  width: 48px !important; height: 48px !important;
  border: 0 !important; border-radius: 50% !important;
  background: var(--goa11y-accent) !important; color: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
  transition: transform .15s ease !important;
}
[data-goa11y-pos="left"] #goa11y-toggle { left: 20px !important; right: auto !important; }
[data-goa11y-pos="right"] #goa11y-toggle { right: 20px !important; left: auto !important; }
/* Forme de la pastille (data-goa11y-shape : round par défaut). */
[data-goa11y-shape="soft"] #goa11y-toggle { border-radius: 14px !important; }
[data-goa11y-shape="square"] #goa11y-toggle { border-radius: 4px !important; }
/* Preset « remontée » (+60 px) — anti-chevauchement avec un autre widget flottant. */
[data-goa11y-raised="1"] #goa11y-toggle { bottom: 84px !important; }
#goa11y-toggle:hover { transform: scale(1.08) !important; }
/* min-width + flex:none : certains thèmes (bouton en flex) écrasent la largeur du
   SVG à 0 → icône invisible. La largeur mini force le rendu quoi qu'il arrive. */
#goa11y-toggle svg { width: 26px !important; min-width: 26px !important; height: 26px !important; flex: none !important; }

/* ---- overlay + panneau ---- */
#goa11y-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.32) !important; z-index: 2147483647 !important;
}
#goa11y-overlay[hidden], #goa11y-panel[hidden] { display: none !important; }

#goa11y-panel {
  position: fixed !important; top: 0 !important; bottom: 0 !important;
  width: 340px !important; max-width: 90vw !important;
  z-index: 2147483647 !important;
  background: #ffffff !important; color: #0f141d !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.3) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  display: flex !important; flex-direction: column !important;
}
[data-goa11y-pos="left"] #goa11y-panel { left: 0 !important; right: auto !important; }
[data-goa11y-pos="right"] #goa11y-panel { right: 0 !important; left: auto !important; }

#goa11y-panel .goa11y-head {
  position: sticky; top: 0;
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 8px; padding: 16px 18px !important;
  background: #fff !important; border-bottom: 2px solid var(--goa11y-accent) !important;
}
#goa11y-panel .goa11y-brand { display: flex !important; align-items: center; gap: 10px; }
#goa11y-panel .goa11y-brand svg {
  width: 18px !important; height: 18px !important; color: #ffffff !important;
  background: var(--goa11y-accent) !important; border-radius: 8px !important;
  padding: 6px !important; box-sizing: content-box !important;
}
#goa11y-panel h2 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: #0f141d !important; }
#goa11y-panel .goa11y-actions { display: flex !important; gap: 2px; }

#goa11y-panel .goa11y-icon-btn {
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  padding: 8px !important; border-radius: 8px !important; color: #59626f !important;
  display: inline-flex !important;
}
#goa11y-panel .goa11y-icon-btn:hover { background: #eef2f8 !important; color: #0f141d !important; }
#goa11y-panel .goa11y-icon-btn svg { width: 18px !important; height: 18px !important; }

#goa11y-body { padding: 16px 18px !important; display: flex; flex-direction: column; gap: 20px; flex: 1; }
#goa11y-panel fieldset { border: 0 !important; margin: 0 !important; padding: 0 !important; }
#goa11y-panel legend {
  font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em;
  color: #8a93a1 !important; font-weight: 600 !important; margin-bottom: 10px !important; padding: 0 !important;
}
/* minmax(0,1fr) : les colonnes peuvent rétrécir sous la largeur du contenu
   (sinon un libellé long déborde → scroll horizontal). */
#goa11y-panel .goa11y-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; }
/* Écran étroit (mobile) : le panneau ≈ 90vw rend 2 colonnes trop serrées (les
   mots longs comme « Espacement » cassaient) → une seule colonne, pleine largeur. */
@media (max-width: 400px) {
  #goa11y-panel .goa11y-grid { grid-template-columns: 1fr !important; }
}

/* Carte = icône à GAUCHE dans une puce teintée d'accent (identité propre,
   distincte d'Ally : pas de remplissage noir, état actif en teinte d'accent). */
#goa11y-panel .goa11y-card {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  min-width: 0 !important;
  white-space: normal !important; /* certains thèmes forcent nowrap sur les boutons → texte coupé */
  padding: 10px 9px !important; text-align: left !important; cursor: pointer !important;
  border: 1.5px solid #e7ebf2 !important; border-radius: 12px !important;
  background: #fff !important; color: #3a4353 !important;
  font-size: 12px !important; line-height: 1.25 !important;
  transition: background .12s ease, border-color .12s ease !important;
}
#goa11y-panel .goa11y-card:hover { border-color: var(--goa11y-accent) !important; }
#goa11y-panel .goa11y-ic {
  flex: none !important; width: 28px !important; height: 28px !important; border-radius: 8px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--goa11y-accent) 14%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--goa11y-accent) 26%, #ffffff) !important;
  color: var(--goa11y-accent) !important;
}
#goa11y-panel .goa11y-ic svg { width: 16px !important; min-width: 16px !important; height: 16px !important; flex: none !important; }
#goa11y-panel .goa11y-cardtext { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
#goa11y-panel .goa11y-card .goa11y-label { font-weight: 600 !important; font-size: 11.5px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
#goa11y-panel .goa11y-card.is-active {
  background: color-mix(in srgb, var(--goa11y-accent) 10%, #ffffff) !important;
  border-color: var(--goa11y-accent) !important; color: var(--goa11y-accent) !important;
}
#goa11y-panel .goa11y-card.is-active .goa11y-ic {
  background: var(--goa11y-accent) !important; color: #ffffff !important;
}
#goa11y-panel .goa11y-profiles .goa11y-card { justify-content: center; }

#goa11y-panel .goa11y-dots { display: flex !important; gap: 4px; margin-top: 2px; }
#goa11y-panel .goa11y-dots i {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: currentColor !important; opacity: .22 !important; display: block !important;
}
#goa11y-panel .goa11y-dots i.on { opacity: 1 !important; }

#goa11y-panel .goa11y-foot {
  position: sticky; bottom: 0;
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 12px 18px !important; font-size: 12px !important;
  background: #fff !important; border-top: 1px solid #e5e9f0 !important; color: #8a93a1 !important;
}
#goa11y-panel .goa11y-foot a { color: var(--goa11y-accent) !important; text-decoration: none !important; }
#goa11y-panel .goa11y-foot a:hover { text-decoration: underline !important; }

/* ---- focus visible (le widget doit être exemplaire) ---- */
#goa11y-toggle:focus-visible,
#goa11y-panel button:focus-visible,
#goa11y-structure button:focus-visible {
  outline: 3px solid var(--goa11y-accent) !important; outline-offset: 2px !important;
}

/* ---- panneau de structure ---- */
#goa11y-structure {
  position: fixed !important; top: 90px !important; z-index: 2147483300 !important;
  width: 300px !important; max-height: 70vh !important; overflow-y: auto !important;
  background: #fff !important; color: #0f141d !important;
  border: 1px solid #e5e9f0 !important; border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.3) !important;
}
[data-goa11y-pos="left"] #goa11y-structure { left: 356px !important; }
[data-goa11y-pos="right"] #goa11y-structure { right: 356px !important; }
#goa11y-structure .goa11y-struct-head {
  position: sticky; top: 0; display: flex !important; align-items: center; justify-content: space-between;
  padding: 10px 14px !important; background: #fff !important; border-bottom: 1px solid #e5e9f0 !important;
  font-weight: 700 !important;
}
#goa11y-structure .goa11y-struct-head button { border: 0 !important; background: none !important; cursor: pointer !important; color: #59626f !important; padding: 4px !important; }
#goa11y-structure .goa11y-struct-head svg { width: 16px !important; height: 16px !important; }
#goa11y-structure .goa11y-struct-row {
  display: block !important; width: 100% !important; text-align: left !important;
  border: 0 !important; background: none !important; cursor: pointer !important;
  padding: 7px 14px !important; font-size: 13px !important; color: #475061 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#goa11y-structure .goa11y-struct-row:hover { background: #f6f8fb !important; color: var(--goa11y-accent) !important; }
#goa11y-structure .goa11y-struct-tag { font-family: ui-monospace, Menlo, monospace !important; font-size: 11px !important; color: #8a93a1 !important; margin-right: 4px; }

/* ---- masque de lecture ---- */
#goa11y-mask { position: fixed !important; inset: 0 !important; z-index: 2147483100 !important; pointer-events: none !important; }
#goa11y-mask .goa11y-mask-t, #goa11y-mask .goa11y-mask-b {
  position: absolute !important; left: 0 !important; right: 0 !important; background: rgba(0,0,0,.55) !important;
}
#goa11y-mask .goa11y-mask-t { top: 0 !important; }
#goa11y-mask .goa11y-mask-b { bottom: 0 !important; }

/* ---- toast d'aide (lecture vocale) ---- */
#goa11y-tts-toast {
  position: fixed !important; left: 50% !important; bottom: 24px !important;
  transform: translateX(-50%) !important; z-index: 2147483647 !important;
  background: #0f141d !important; color: #fff !important;
  padding: 12px 18px !important; border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.32) !important; max-width: 88vw !important; text-align: center !important;
}

/* =======================================================================
   Effets visiteur — ciblent #goa11y-content (le site), pas le widget.
   ======================================================================= */
body.goa11y-grayscale     #goa11y-content { filter: grayscale(1) !important; }
body.goa11y-high-contrast #goa11y-content { filter: contrast(1.35) !important; }
body.goa11y-inverted      #goa11y-content { filter: invert(1) hue-rotate(180deg) !important; }
body.goa11y-inverted      #goa11y-content img,
body.goa11y-inverted      #goa11y-content video { filter: invert(1) hue-rotate(180deg) !important; }

body.goa11y-hide-images #goa11y-content img { visibility: hidden !important; }

body.goa11y-readable-font #goa11y-content,
body.goa11y-readable-font #goa11y-content * {
  font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif !important;
}

body.goa11y-highlight-links #goa11y-content a {
  outline: 2px solid var(--goa11y-accent) !important; outline-offset: 2px !important;
  text-decoration: underline !important;
}

body.goa11y-focus-outline #goa11y-content :focus {
  outline: 3px solid var(--goa11y-accent) !important; outline-offset: 2px !important;
}

body.goa11y-text-left   #goa11y-content { text-align: left !important; }
body.goa11y-text-center #goa11y-content { text-align: center !important; }
body.goa11y-text-right  #goa11y-content { text-align: right !important; }

body.goa11y-pause-animations #goa11y-content *,
body.goa11y-pause-animations #goa11y-content *::before,
body.goa11y-pause-animations #goa11y-content *::after {
  animation-play-state: paused !important;
  animation: none !important;
  transition: none !important;
}

body.goa11y-big-cursor #goa11y-content,
body.goa11y-big-cursor #goa11y-content * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='white' stroke='black' stroke-width='1.5'><path d='M4 3l7 17 2.5-6.5L20 11z'/></svg>") 4 4, auto !important;
}

body.goa11y-tts-on #goa11y-content * { cursor: help !important; }

@media (prefers-reduced-motion: reduce) {
  #goa11y-toggle, #goa11y-panel .goa11y-card { transition: none !important; }
}