/**
 * ==================================================
 * @file style.css
 * @brief Styles principaux pour WP Accessibility Menu.
 *         Gère les apparences du wrapper, du bouton flottant,
 *         du menu, des boutons multistate/toggle, etc.
 * @version 1.5 (avec profils/présets)
 * @author waylite.eu
 * ==================================================
 */

/* =======================
   VARIABLES DE COULEURS
   ======================= */
:root,
body.wam-customcolors {
  --wam-primary: #0097e6;
  --wam-accent: #fab700;
  --wam-bg: #ffffff;
  --wam-text: #23272f;
}

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

/* OpenDyslexic etc. - inchangé, conserve toutes tes règles font-face ! */
@font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'OpenDyslexic3'; src: url('../fonts/OpenDyslexic3-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'OpenDyslexic3'; src: url('../fonts/OpenDyslexic3-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'OpenDyslexicAlta'; src: url('../fonts/OpenDyslexicAlta-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'OpenDyslexicAlta'; src: url('../fonts/OpenDyslexicAlta-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'OpenDyslexicAlta'; src: url('../fonts/OpenDyslexicAlta-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'OpenDyslexicAlta'; src: url('../fonts/OpenDyslexicAlta-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'OpenDyslexicMono'; src: url('../fonts/OpenDyslexicMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

/* =====================
   WRAPPER
   ===================== */
#wam-accessibility-wrapper {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 999999;
  pointer-events: none;
}
#wam-accessibility-wrapper > * { pointer-events: auto; }

/* ==============
   BOUTON FLOTTANT
   ============== */
#wam-accessibility-button {
  position: fixed;
  bottom: 24px;
  right: 26px;
  background: var(--wam-primary, #273c75) !important;
  color: #fff;
  border-radius: 40px;
  cursor: pointer;
  font-size: 15px;
  font-family: 'Lexend Deca', Arial, sans-serif;
  box-shadow: 0 4px 24px rgba(27,38,59,0.13);
  border: none;
  outline: none;
  font-weight: bold;
  letter-spacing: 0.02em;
  transition: background 0.18s, box-shadow 0.16s, transform 0.11s;
}
#wam-accessibility-button:hover,
#wam-accessibility-button:focus-visible {
  background: #182848 !important;
  box-shadow: 0 2px 18px var(--wam-primary, #0097e6);
  outline: 2px solid var(--wam-accent, #fab700);
  outline-offset: 2px;
  transform: scale(1.04);
}

/* ==============
   MENU D’ACCESSIBILITÉ
   ============== */
#wam-accessibility-menu {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 284px;
  background: var(--wam-bg, #fff);
  border-radius: 16px;
  border: 1.5px solid #e1e5ea;
  box-shadow: 0 6px 24px rgba(20,24,56,0.13);
  display: none;
  flex-direction: column;
  font-family: 'Lexend Deca', Arial, sans-serif;
  color: var(--wam-text, #23272f);
  min-height: 440px;
  overflow: hidden;
  z-index: 999999;
}

/* Menu header */
.wam-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--wam-primary, #0097e6) !important;
  color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 12px 18px 8px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.wam-menu-header h2 {
  font-size: 15px!important;
  margin: 0!important;
  letter-spacing: 0.04em!important;
}
#wam-close-menu {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}
#wam-close-menu:hover,
#wam-close-menu:focus-visible {
  background: var(--wam-accent, #fab700);
  color: var(--wam-primary, #273c75);
  outline: 2px solid var(--wam-accent, #fab700);
}

/* ==============
   PROFILS / PRESETS
   ============== */
.wam-presets-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 7px 14px 0 14px;
  position: relative;
  z-index: 20;
}

#wam-presets-dropdown {
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 216px;
  background: #fff;
  border: 1.5px solid #e1e5ea;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(20,24,56,0.15);
  z-index: 40;
  padding: 8px 0 8px 0;
  animation: wam-dropdown-in 0.13s;
}

@keyframes wam-dropdown-in {
  from {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.wam-preset-btn {
  width: 100%;
  padding: 9px 22px;
  background: none;
  border: none;
  text-align: left;
  color: #23272f;
  font-size: 15px;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s, color 0.13s;
  margin-bottom: 2px;
}
.wam-preset-btn:last-child { margin-bottom: 0; }
.wam-preset-btn:hover,
.wam-preset-btn:focus-visible {
  background: var(--wam-primary, #0097e6);
  color: #fff;
  outline: 2px solid var(--wam-accent, #fab700);
}

/* ==============
   CONTENU DU MENU
   ============== */
.wam-menu-content {
  display: flex;
  flex-wrap: wrap;
  padding: 14px 7px 7px 7px;
  gap: 9px;
  justify-content: center;
}

/* ==============
   BOUTONS (Cards)
   ============== */
.wam-toggle-btn,
.wam-multistate-btn {
  width: 120px;
  height: 90px;
  background: #f7faff;
  border-radius: 10px;
  border: 1.5px solid #e1e5ea;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.12s, border 0.13s, background 0.13s, transform 0.11s;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  user-select: none;
  overflow: hidden;
  color: var(--wam-text, #23272f);
}
.wam-toggle-btn:hover,
.wam-multistate-btn:hover,
.wam-toggle-btn:focus-visible,
.wam-multistate-btn:focus-visible {
  background: #eaf6ff;
  border: 1.5px solid var(--wam-primary, #0097e6);
  box-shadow: 0 4px 16px rgba(0,151,230,0.12);
  transform: scale(1.025);
  outline: 2px solid var(--wam-accent, #fab700) !important;
  z-index: 10;
}

/* Etat actif, ombre/bordure, coche SVG moderne */
.wam-multistate-btn[data-state]:not([data-state="0"]),
.wam-toggle-btn[aria-pressed="true"] {
  border: 1.5px solid var(--wam-primary, #0097e6);
  background: #eaf6ff;
  box-shadow: 0 4px 16px rgba(0,151,230,0.10);
}
.wam-multistate-btn[data-state]:not([data-state="0"])::after,
.wam-toggle-btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 11px;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><circle fill="%230097e6" cx="12" cy="12" r="10"/><path stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 12.5l3 3.5 5-6.5"/></svg>') no-repeat center/contain;
}

/* Contenu du bouton */
.wam-btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.wam-btn-icon {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem !important;
  margin-top: 4px;
  width: 100%;
}
.wam-btn-text {
  flex: 0 0 20px;
  font-size: 13px !important;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: inherit;
}

/* Dots */
.wam-btn-dots {
  flex: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1.5px;
}
.wam-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9dfff;
  opacity: 0.36;
  margin: 0 0.5px;
  transition: background 0.11s, opacity 0.12s;
}
.wam-dot.active {
  background: var(--wam-primary, #0097e6);
  opacity: 1;
}

/* ==============
   FOOTER
   ============== */
/* Styles synchronisés pour les deux boutons */
#wam-reset-all,
#wam-preset-toggle-btn {
    background: var(--wam-accent, #fab700) !important;
    color: #23272f !important;
    border: none;
    border-radius: 7px;
    padding: 18px 8px 17px 14px!important;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1.5px 6px rgba(0, 151, 230, 0.08);
    outline: none;
    transition: background 0.16s, color 0.12s, box-shadow 0.14s;
    width: 100%;
}

/* Hover/Focus synchronisés */
#wam-reset-all:hover,
#wam-reset-all:focus-visible,
#wam-preset-toggle-btn:hover,
#wam-preset-toggle-btn:focus-visible {
  background: var(--wam-primary, #0097e6) !important;
  color: #fff !important;
  outline: 2px solid var(--wam-accent, #fab700);
}


/* ==============
   CLASSES FONCTIONNELLES
   ============== */

/* Ne JAMAIS masquer les médias du menu accessibilité (wrapper, bouton, menu, reset...) */
body.wam-hideImages #wam-accessibility-wrapper img,
body.wam-hideImages #wam-accessibility-wrapper svg,
body.wam-hideImages #wam-accessibility-wrapper picture,
body.wam-hideImages #wam-accessibility-wrapper object,
body.wam-hideImages #wam-accessibility-wrapper embed,
body.wam-hideImages #wam-accessibility-wrapper video,
body.wam-hideImages #wam-accessibility-wrapper .animation,
body.wam-hideImages #wam-accessibility-wrapper #animation {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
}

/* BONUS : exclusion par classe .wam-exclude (en dehors du menu accessibilité si besoin) */
body.wam-hideImages img.wam-exclude,
body.wam-hideImages svg.wam-exclude,
body.wam-hideImages picture.wam-exclude,
body.wam-hideImages object.wam-exclude,
body.wam-hideImages embed.wam-exclude,
body.wam-hideImages video.wam-exclude,
body.wam-hideImages .animation.wam-exclude,
body.wam-hideImages #animation.wam-exclude {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
}

/* ===========================
   RÈGLE GÉNÉRALE : cacher tout sauf exclusions ci-dessus
   =========================== */
body.wam-hideImages img:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages svg:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages picture:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages object:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages embed:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages video:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages .animation:not(.wam-exclude):not(#wam-accessibility-wrapper *),
body.wam-hideImages #animation:not(.wam-exclude):not(#wam-accessibility-wrapper *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Contraste */
body.wam-contrast-1 *:not(.wam-exclude):not(.wam-exclude *) {
  filter: invert(1) hue-rotate(180deg) contrast(1.2);
}
body.wam-contrast-2:not(.wam-exclude):not(.wam-exclude *) {
  background-color: #111 !important; color: #fff !important;
}
body.wam-contrast-2 *:not(.wam-exclude):not(.wam-exclude *) {
  background-color: transparent !important; color: #fff !important;
}
body.wam-contrast-3:not(.wam-exclude):not(.wam-exclude *) {
  background-color: #fff !important; color: #000 !important;
}
body.wam-contrast-3 *:not(.wam-exclude):not(.wam-exclude *) {
  background-color: transparent !important; color: #000 !important;
}

/* Bigger Text */
body.wam-biggerText-1 *:not(.wam-exclude):not(.wam-exclude *) { font-size: calc(100% + 1%) !important; }
body.wam-biggerText-2 *:not(.wam-exclude):not(.wam-exclude *) { font-size: calc(100% + 2%) !important; }
body.wam-biggerText-3 *:not(.wam-exclude):not(.wam-exclude *) { font-size: calc(100% + 3%) !important; }
body.wam-biggerText-4 *:not(.wam-exclude):not(.wam-exclude *) { font-size: calc(100% + 4%) !important; }

/* Text Spacing */
body.wam-textSpacing-1 *:not(.wam-exclude):not(.wam-exclude *) { letter-spacing: 1px !important; word-spacing: 1px !important; }
body.wam-textSpacing-2 *:not(.wam-exclude):not(.wam-exclude *) { letter-spacing: 2px !important; word-spacing: 2px !important; }
body.wam-textSpacing-3 *:not(.wam-exclude):not(.wam-exclude *) { letter-spacing: 3px !important; word-spacing: 3px !important; }

/* Dyslexia fonts */
body.wam-dyslexia-1 *:not(.wam-exclude):not(.wam-exclude *) { font-family: 'OpenDyslexic', Arial, sans-serif !important; }
body.wam-dyslexia-2 *:not(.wam-exclude):not(.wam-exclude *) { font-family: 'Lexend Deca', sans-serif !important; }

/* Cursor */
body.wam-cursor-1:not(.wam-exclude):not(.wam-exclude *) {
  cursor: url('../cursors/big-cursor.cur') 20 20, auto !important;
}
body.wam-cursor-1:not(.wam-exclude) a:hover,
body.wam-cursor-1:not(.wam-exclude) button:hover,
body.wam-cursor-1:not(.wam-exclude) input:hover,
body.wam-cursor-1:not(.wam-exclude) textarea:hover,
body.wam-cursor-1:not(.wam-exclude) select:hover,
body.wam-cursor-1:not(.wam-exclude) [role="button"]:hover {
  cursor: url('../cursors/big_hand-cursor.cur') 10 0, pointer !important;
}
body.wam-cursor-2:not(.wam-exclude):not(.wam-exclude *),
body.wam-cursor-3:not(.wam-exclude):not(.wam-exclude *) {
  cursor: auto !important;
}
#wam-cursor-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 1000001;
}

/* Line Height */
body.wam-lineHeight-1 *:not(.wam-exclude):not(.wam-exclude *) { line-height: 1.5 !important; }
body.wam-lineHeight-2 *:not(.wam-exclude):not(.wam-exclude *) { line-height: 1.75 !important; }
body.wam-lineHeight-3 *:not(.wam-exclude):not(.wam-exclude *) { line-height: 2 !important; }

/* Text Align */
body.wam-textAlign-1 *:not(.wam-exclude):not(.wam-exclude *) { text-align: left !important; }
body.wam-textAlign-2 *:not(.wam-exclude):not(.wam-exclude *) { text-align: right !important; }
body.wam-textAlign-3 *:not(.wam-exclude):not(.wam-exclude *) { text-align: center !important; }
body.wam-textAlign-4 *:not(.wam-exclude):not(.wam-exclude *) { text-align: justify !important; }

/* Saturation */
body.wam-saturation-1 *:not(.wam-exclude):not(.wam-exclude *) { filter: saturate(0.9); }
body.wam-saturation-2 *:not(.wam-exclude):not(.wam-exclude *) { filter: saturate(1.2); }
body.wam-saturation-3 *:not(.wam-exclude):not(.wam-exclude *) { filter: saturate(0); }

/* Highlight Links */
body.wam-highlightLinks a:not(.wam-exclude):not(.wam-exclude *) {
  background-color: yellow !important; color: black !important; outline: 2px dashed red !important;
}

/* Pause Animations CSS */
body.wam-pauseAnimations *:not(.wam-exclude):not(.wam-exclude *) {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Tooltips */
body.wam-tooltips [title]:not(.wam-exclude):not(.wam-exclude *):hover::after {
  content: attr(title);
  position: absolute;
  background: #333;
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  transform: translate(-50%, -120%);
  z-index: 999999;
}

/* logo et link */
#wam-logo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  margin-right: 5px;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  transition: background 0.14s;
}
#wam-logo-btn:hover,
#wam-logo-btn:focus-visible {
  background: #eaf6ff;
  outline: 2px solid var(--wam-accent, #fab700);
}
#wam-logo-btn img {
  width: 26px;
  height: 26px;
  display: block;
}

#wam-rgaa-scan-btn {
    background-color: var(--wam-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin: 10px;
}

#wam-rgaa-scan-btn i {
    font-size: 18px;
}

#wam-rgaa-scan-btn:hover,
#wam-rgaa-scan-btn:focus {
    background-color: var(--wam-accent);
    outline: none;
    color: #000;
}

/* ==============
   RESPONSIVE
   ============== */
@media (max-width: 600px) {
  #wam-accessibility-menu {
    width: 97vw !important;
    min-width: 0;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    min-height: unset;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    padding-bottom: 24px;
    overflow-y: auto;
  }
  .wam-menu-header { border-radius: 0 0 0 0 !important; }
  #wam-accessibility-button { right: 9px; bottom: 12px; }
}

/* ================
   CORRECTIONS RESPONSIVE COMPLÉMENTAIRES
   ================ */

@media screen and (max-height: 520px) {
  #wam-accessibility-menu {
    top: 10px !important;
    bottom: 10px !important;
    transform: none !important;
    height: auto !important;
    max-height: calc(100vh - 20px);
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
}

@media screen and (max-width: 320px) {
  #wam-accessibility-button {
    bottom: 12px !important;
    right: 8px !important;
    transform: scale(0.88);
  }
}

@media screen and (max-width: 600px) {
  #wam-accessibility-menu {
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}