/* =============================================================================
   ACCESSIBILITÉ — couche transverse (toutes largeurs), chargée en dernier.
   Skip-link, focus visible clavier, ouverture clavier du sous-menu, confort.
   Réutilise les tokens --hm-* (home-mobile.css, globaux).
   ============================================================================= */

/* ----- Lien d'évitement : visible uniquement au focus clavier ----- */
.skip-link {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%) translateY(-160%);
    z-index: 100000;
    padding: 11px 22px;
    background: #251f1b;
    color: #fff;
    font: 600 13px/1 'Comfortaa', sans-serif;
    letter-spacing: .04em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid var(--hm-terracotta, #d06e0a);
    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;
}

/* ----- Focus visible clavier : anneau ambre cohérent partout -----
   On ne montre l'anneau qu'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,
.sf-menu a:focus-visible,
.mobile-bottombar_btn:focus-visible,
.view-switch_btn:focus-visible {
    outline: 2px solid var(--hm-terracotta, #d06e0a);
    outline-offset: 2px;
    border-radius: 3px;
}
/* Le champ recherche a déjà un anneau ambre dédié (box-shadow) : pas de double. */
#sidebar .search-form_it:focus-visible { outline: none; }

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

/* ----- Sous-menu de navigation : ouverture au clavier (pas que :hover) -----
   Le menu déroulant « Articles » s'ouvrait uniquement au survol souris. On
   l'ouvre aussi quand un de ses éléments reçoit le focus clavier. ≥980px
   (en deçà, la navigation passe par la barre basse mobile). */
@media (min-width: 980px) {
    .header .sf-menu li:focus-within > ul {
        top: 100% !important;
        z-index: 999 !important;
    }
}

/* ----- Respiration : la classe utilitaire d'accessibilité (texte hors-é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;
}

/* =============================================================================
   CONTRASTE WCAG AA — chargée en dernier, gagne la cascade.
   On garde l'ambre vif (#d06e0a) pour les FONDS/bordures/icônes/survols
   (décoratif), mais on assombrit l'ambre, le taupe et les gris quand ils
   portent du TEXTE de petite taille (le ratio 4.5:1 l'exige). L'ambre-texte
   devient clay (#a8551e, ~4.7:1 sur blanc, reste chaud et dans le ton).
   ============================================================================= */

/* Labels ambre en texte → clay (lisible, toujours chaleureux). */
.breadcrumb_item a,
.home-featured_cat,
.posts-grid .post-card_cat,
.next-path_item-cat,
.next-path_continue-label,
.next-path_all,
.search-count,
.category-count,
.post_meta a,
.post_category a,
.widget_categories .cat-count-side,
.cat-index_chips a,
.home-themes_item a { color: #a8551e; }

/* Survol : l'ambre vif revient (transitoire, non testé par axe en état repos). */
.breadcrumb_item a:hover,
.posts-grid .post-card_cat:hover,
.next-path_all:hover,
.post_meta a:hover { color: #c0560a; }

/* Taupe « muted » en texte de méta → un cran plus sombre (passe AA). */
.posts-grid .post-card_time,
.home-featured_time,
.home-themes_count,
.home-extra p,
.category-description,
.search-snippet,
.home-citation_author { color: #7a6e5f; }

/* Gris de chapôs/extraits → plus sombres (lecture). */
.next-path_item-excerpt,
.post_content div.excerpt p,
.posts.view-grid .post-excerpt,
.search-snippet { color: #5f5f5f; }

/* L'auteur de citation reste clay (déjà conforme), on le garde explicite. */
.home-citation_author,
.next-path_citation cite,
.testimonial small,
.testimonial .user { color: #a8551e; }

/* Bouton « recherche » (texte blanc) : fond clay → blanc conforme (~4.9:1). */
#sidebar .search-form_is { background: #a8551e; }
#sidebar .search-form_is:hover { background: #8f4718; }

/* Lien dans un bloc de texte (bandeau série) : soulignement pour ne pas
   dépendre uniquement de la couleur. */
.series-banner a,
.post_content p a { text-decoration: underline; text-underline-offset: 2px; }

/* ----- Reliquats AA (éléments de contenu / injectés par JS / sidebar à id) ----- */
/* Compteurs de catégories en sidebar (spécificité #sidebar à battre). */
#sidebar .cat-count-side,
#sidebar .cat-count-side strong { color: #7a6e5f; }
/* Sommaire (toc) : liens lisibles, titre clay. */
.article-toc a,
.article-toc_list a,
.article-toc ul li a,
.article-toc ol li a { color: #5a5145; }
.article-toc strong { color: #6a5f50; }
/* Navigation entre parties d'un article (prev/next) → clay. */
.article-part-nav a { color: #a8551e; }
/* Date et page courante du fil d'Ariane → taupe plus sombre. */
.post_meta,
.post_meta time,
.breadcrumb_item span[aria-current="page"] { color: #7a6e5f; }
/* Catégorie dans la méta (lien) → clay (spécificité méta renforcée). */
body.single .post_meta .post_category a,
body.single .post_meta a[rel="category tag"],
.post_meta .post_category a { color: #a8551e; }
/* Bandeau « série » + TL;DR + légende d'image → texte plus sombre. */
.series-banner,
.series-banner strong,
.article-tldr,
.article-tldr strong,
figcaption,
.featured-thumbnail figcaption,
.image-credit { color: #5f5f5f; }
.series-banner a { color: #a8551e; }
/* Bouton flottant « Lecture sereine » (texte blanc) : fond clay → conforme. */
.reading-mode-toggle { background: #a8551e; }