/*
 * Accessibilité — Rougié
 *
 * Écrit à la main, hors chaîne Compass : le thème _blank compile son CSS avec
 * Compass / Ruby Sass, outil abandonné dont l'environnement n'existe plus
 * (m5 de l'audit). Cette feuille est chargée après screen.css et ne dépend
 * d'aucune compilation.
 */

/* --------------------------------------------------------------------------
 * Indicateur de focus — WCAG 2.4.7, RGAA 10.7
 *
 * Le thème supprimait l'outline sur le menu principal et la pagination, avec
 * !important et sans rien mettre à la place : un utilisateur au clavier ne
 * voyait pas où il se trouvait. Les règles fautives ont été retirées de
 * sass/elements/ et de stylesheets/screen.css ; celles-ci fournissent
 * l'indicateur.
 *
 * :focus-visible évite d'afficher l'anneau au clic à la souris. Le bloc
 * :focus qui précède sert de repli pour les navigateurs qui ne le gèrent
 * pas ; il est neutralisé juste après pour ceux qui le gèrent.
 *
 * !important est nécessaire, pas décoratif : les feuilles des mu-plugins
 * suppriment l'outline avec une spécificité plus forte que la nôtre —
 *   .main-header .secondary-nav-container .search-toggle button  (0,4,1)
 *   .loop-product-wrapper .filters input                         (0,2,1)
 * contre  button:focus-visible  (0,1,1). Sans !important l'anneau ne
 * s'afficherait ni sur les boutons de recherche de l'en-tête, ni sur les
 * cases à cocher des filtres — qui sont en appearance:none et n'ont donc
 * aucun rendu de focus natif. Ces feuilles sont elles aussi compilées par
 * Compass et ne peuvent pas être régénérées (m5 de l'audit).
 * -------------------------------------------------------------------------- */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus {
	outline: 3px solid #a90d3e !important;
	outline-offset: 2px !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #a90d3e !important;
	outline-offset: 2px !important;
}

/*
 * En-tete et pied de page : fond bordeaux, le rouge de marque n'y contraste
 * pas assez. Anneau blanc a la place (WCAG 1.4.11, 3:1 minimum).
 */
header a:focus,
header button:focus,
header input:focus,
header a:focus-visible,
header button:focus-visible,
header input:focus-visible,
footer a:focus,
footer button:focus,
footer a:focus-visible,
footer button:focus-visible,
.search-container input:focus,
.search-container button:focus,
.search-container input:focus-visible,
.search-container button:focus-visible {
	outline-color: #fff !important;
}

/* --------------------------------------------------------------------------
 * Lien d'évitement — WCAG 2.4.1 (Bypass Blocks), RGAA 12.7
 *
 * L'accueil compte 139 liens : sans ce lien, la navigation doit être
 * traversée à la tabulation sur chaque page avant d'atteindre le contenu.
 *
 * Masqué visuellement tant qu'il n'a pas le focus, puis affiché en haut à
 * gauche. On n'utilise pas .sr-only du thème : ses propriétés sont en
 * !important et ne peuvent pas être annulées au focus.
 * -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	background: #fff;
	color: #a90d3e;
	font-family: "Poppins", Sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
}

.skip-link:focus {
	width: auto;
	height: auto;
	padding: 16px 24px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	outline: 3px solid #a90d3e;
	outline-offset: 2px;
}

/*
 * La cible reçoit le focus par programme (tabindex="-1") : pas d'anneau sur
 * le conteneur lui-même, qui n'est pas un élément interactif.
 */
#contenu:focus {
	outline: none;
}