/* Lien d'évitement (WCAG 2.4.1), includes/modules/accessibility/public-display.php :
   invisible tant qu'il n'a pas le focus clavier, comme tout skip-link standard. */
.eh-a11y-skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 999999;
    background: var(--eh-color-ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    font-family: inherit;
    transition: top 0.2s ease;
}

.eh-a11y-skip-link:focus {
    top: 12px;
}

/* Panneau Accessibilité, ancré au bouton engrenage (même position que les
   panneaux panier et cookies : assets/css/sticky-cart.css / cookie-consent.css). */
.eh-a11y-panel,
.eh-a11y-panel *,
.eh-a11y-panel *::before,
.eh-a11y-panel *::after {
    box-sizing: border-box;
}

.eh-a11y-panel {
    /* display: flex est posé par assets/css/core.css (sélecteur par id, plus
       spécifique) : ne pas le redéclarer ici, au risque d'entrer en conflit
       d'ordre de cascade avec la règle qui masque ce panneau par défaut. */
    flex-direction: column;
    width: 100%;

    /* max-height (pas height:100%) : #eh-fab grandit selon son propre contenu
       (height: auto), donc un pourcentage ici ne se résoudrait jamais et la
       zone de défilement plus bas ne saurait jamais quand s'activer. */
    max-height: calc(100vh - 140px);
    min-height: 0;
    font-family: inherit;
}

@media (max-width: 1440px) {
    .eh-a11y-panel {
        max-height: calc(100vh - 120px);
    }
}

@media (max-width: 480px) {
    .eh-a11y-panel {
        max-height: calc(100vh - 110px);
    }
}

.eh-a11y-close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    flex-shrink: 0;
}

.eh-a11y-close:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: transparent;
    box-shadow: none;
    color: #333;
}

/* Seule cette zone défile si le contenu dépasse : la croix, elle, reste
   toujours en place et cliquable dans son intégralité. */
.eh-a11y-scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden auto;

    /* Marge droite plus large que les autres côtés : laisse de la place à la
       barre de défilement, pour qu'elle n'arrive pas juste sous la croix de
       fermeture (position: absolute, hors de cette zone qui défile). */
    padding: 34px 20px 16px 16px;
}

/* Police héritée du thème hôte (inherit) : les 3 panneaux du FAB doivent se
   lire comme un seul système, cohérent avec la typographie du site (Work
   Sans/ArminGrotesk sur pureden.fr), plutôt qu'imposer une police tierce
   jamais chargée par le plugin (voir assets/css/sticky-cart.css,
   cookie-consent.css). */
.eh-a11y-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--eh-color-ink);
    font-family: inherit;
}

.eh-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.eh-a11y-row:first-of-type {
    border-top: none;
}

.eh-a11y-row label,
.eh-a11y-row span {
    font-size: 0.8125rem;
    color: #333;
}

#eh-a11y-lang {
    font-size: 0.8125rem;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}

/* Interrupteur en forme de pilule (radius = moitié de la hauteur) plutôt que
   la piste rectangulaire à coins vifs héritée du noyau : cohérent avec le
   langage visuel arrondi du thème minimog. */
.eh-a11y-switch {
    width: 42px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: #ccc;
    cursor: pointer;
    position: relative;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.eh-a11y-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    transition: transform 0.2s ease;
}

/* Sans ce reset, la piste virait au vert de marque au survol/focus (et
   gagnait un anneau vert en box-shadow) même à l'état "désactivé" — la
   règle globale `button:hover` du thème s'appliquant à ce <button> nu.
   Fond explicitement répété pour les deux états (gris "désactivé", vert
   "activé" ci-dessous) : sans lui, seul le fond du thème l'emporterait au
   survol, quel que soit l'état réel de l'interrupteur. */
.eh-a11y-switch:hover,
.eh-a11y-switch:focus-visible {
    background: #ccc;
    border-color: transparent;
    box-shadow: none;
}

/* Accent de marque (vert sapin) plutôt que noir plat pour l'état "activé" :
   un repère visuel propre au site, nettement distinct du gris "désactivé"
   (#ccc) ci-dessus et déjà largement contrasté sur fond blanc (voir la note
   de contraste dans assets/css/core.css). */
.eh-a11y-switch[aria-pressed="true"] {
    background: var(--eh-color-accent-deep);
}

/* Repris au survol/focus : sinon le fond gris "désactivé" imposé par le
   reset générique ci-dessus (.eh-a11y-switch:hover) écraserait le vert
   "activé" dès que la souris passe dessus. */
.eh-a11y-switch[aria-pressed="true"]:hover,
.eh-a11y-switch[aria-pressed="true"]:focus-visible {
    background: var(--eh-color-accent-deep);
}

.eh-a11y-switch[aria-pressed="true"] .eh-a11y-switch-knob {
    transform: translateX(18px);
}

.eh-a11y-note {
    margin: 12px 0 0;
    font-size: 0.6875rem;
    color: #888;
    line-height: 1.4;
}

/* Stepper "Taille du texte" */
.eh-a11y-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eh-a11y-stepper button {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    color: var(--eh-color-ink);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.eh-a11y-stepper button:hover:not(:disabled) {
    background: #f0f0f0;
    border-color: #ccc;
    box-shadow: none;
    color: var(--eh-color-ink);
}

.eh-a11y-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.eh-a11y-stepper span {
    min-width: 42px;
    text-align: center;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #333;
}

/* Bouton "Réinitialiser les réglages" */
.eh-a11y-reset {
    display: block;
    width: 100%;

    /* Sans lui, le thème force height:45px sur tout <button> (règle globale
       du thème sur pureden.fr) — plus grand que le contenu réel de ce petit
       bouton texte, qui laissait un vide vertical disproportionné. */
    height: auto;
    margin-top: 16px;
    padding: 0;
    border-radius: 5px;
    background: none;
    border: 1px solid #ccc;
    color: #333;
    font-size: 0.75rem;
    cursor: pointer;
}

/* box-shadow explicitement neutralisé : c'est lui, combiné à la largeur
   100% de ce bouton, qui créait l'anneau vert entourant tout le panneau au
   survol/focus — confirmé en direct sur pureden.fr (règle globale
   `button:hover` du thème). color explicitement repris aussi : la même
   règle du thème pose un texte blanc au survol, illisible sur notre fond
   clair (#f0f0f0) — confirmé en direct, contraste quasi nul. */
.eh-a11y-reset:hover {
    background: #f0f0f0;
    border-color: #999;
    box-shadow: none;
    color: #333;
}

/* ========================================
   Effets appliqués au site : contraste, curseur agrandi, liens soulignés
   ======================================== */

/* Un filtre CSS global ne garantit aucun ratio de contraste WCAG précis, et
   peut même dégrader un contraste déjà correct sur certaines combinaisons de
   couleurs — un vrai jeu de couleurs de substitution testées serait plus
   fiable, mais suppose de connaître les couleurs du thème actif. En
   attendant, on limite l'intensité du filtre et on ajoute un signal de
   distinction des liens qui ne dépend pas de la couleur (soulignement). */
html.eh-a11y-contrast {
    filter: contrast(1.2) saturate(1.05);
}

html.eh-a11y-contrast img,
html.eh-a11y-contrast video {
    filter: contrast(0.9);
}

html.eh-a11y-contrast a {
    text-decoration: underline;
}

html.eh-a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

html.eh-a11y-large-cursor,
html.eh-a11y-large-cursor a,
html.eh-a11y-large-cursor button,
html.eh-a11y-large-cursor input,
html.eh-a11y-large-cursor select,
html.eh-a11y-large-cursor textarea,
html.eh-a11y-large-cursor [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2 L6 28 L13 21 L18 30 L22 28 L17 19 L26 19 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* Focus clavier visible, cohérent avec les panneaux panier/cookies. */
.eh-a11y-close:focus-visible,
.eh-a11y-switch:focus-visible,
#eh-a11y-lang:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}