/**
 * accessibility.css — couche accessibilité transverse (Axe 4).
 * Skip-link, focus visible clavier, menu mobile à vrai bouton, utilitaires.
 * Chargée APRÈS editorial.css ; réutilise les tokens :root.
 *
 * Les SEULS !important de la refonte vivent ici : le thème Articulla pose
 * `input, a { outline: none !important }` (style.css:29) — impossible à
 * battre autrement. Ils sont limités au bloc focus.
 */

/* ----- Lien d'évitement : visible uniquement au focus clavier ----- */
.skip-link {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%) translateY(-200%);
    z-index: 100000;
    padding: 10px 20px;
    background: var(--ink);
    color: var(--paper);
    font: 600 13px/1 var(--font-sans);
    letter-spacing: .02em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid var(--accent);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateX(-50%) translateY(0);
    outline: none !important;
}

/* ----- Focus visible clavier : anneau sapin cohérent partout -----
   Seulement au clavier (:focus-visible), jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

/* Sur les fonds sombres (footer encre), l'anneau sapin ne se voit pas. */
.site-footer a:focus-visible {
    outline-color: var(--footer-link) !important;
}

/* La cible du skip-link ne doit pas afficher d'anneau quand on l'atteint. */
#contenu:focus {
    outline: none !important;
}

/* ----- Utilitaire texte hors-écran (lecteurs d'écran) ----- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ----- Menu mobile : piloté par bouton (site.js), plus par :hover -----
   Le thème ouvrait le panneau au survol (style.css:223) : injouable au
   clavier et pénible au tap. site.js pose .is-open + aria-expanded. */
.mobile-nav .mobile-menu:hover .mobile-menu-list {
    display: none;
}

.mobile-nav .mobile-menu.is-open .mobile-menu-list {
    display: block;
}

/* Le déclencheur est désormais un <button> : on neutralise les styles UA
   (l'apparence visuelle vient du thème + editorial via la classe). */
.mobile-nav .mobile-menu-anchor {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

/* ----- Sous-menus desktop : ouverture au clavier en plus du survol -----
   Le thème n'ouvre qu'au :hover (style.css:214) ; un parcours Tab doit
   pouvoir atteindre les entrées du dropdown « Autre ». */
.site-menu li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

/* ----- Lien du colophon : ne pas reposer sur la seule couleur ----- */
.site-footer .colophon a {
    text-decoration: underline;
    text-underline-offset: 2px;
}