/*
 * Mode contraste élevé (plugin h2a-accessibility-tools) — règles qui ne se règlent pas par la palette.
 * Chargé par le thème parent après le CSS du plugin, parent puis enfant (voir gouttenberg/functions.php).
 * Le remappage des couleurs est généré dans h2a-high-contrast.css (tokens/accessibility.json) : ne pas le dupliquer ici.
 * Seuil : 4,5:1 (AA). Les règles « fond + texte » valent pour un même bloc (le fond et la couleur sur le même
 * élément, comme les héros) et pour ses descendants.
 */

/*
 * « primary-500 » et « primary » sont deux slugs du même rouge. Le contenu des pages utilise les deux
 * (fond « primary-500 » de la section d'intro, pastilles sociales, titre de la section projets) :
 * le second doit suivre le remappage du premier.
 */
body.high-contrast {
	--wp--preset--color--primary-500: var(--wp--preset--color--primary);
}

/*
 * Rouge de marque en texte sur fond foncé : même remappé (#db0033), il n'atteint que 2,58:1 sur le bordeaux
 * (3,38:1 avec #ff003c). Texte et liens passent en blanc (13,35:1 sur le bordeaux, 21:1 sur le noir).
 * Le bloc « projet suivant » a son fond bordeaux par son propre CSS : il fait partie des fonds foncés.
 * Les composants à panneau clair posés dans ces sections (cartes projet et article) gardent leur couleur :
 * leur titre reste en primary sur fond blanc.
 */
body.high-contrast :is(
	.has-secondary-background-color,
	.has-secondary-400-background-color,
	.has-secondary-500-background-color,
	.has-secondary-600-background-color,
	.has-secondary-700-background-color,
	.has-brand-900-background-color,
	.has-black-background-color,
	.has-black-700-background-color,
	.has-black-800-background-color,
	.has-black-900-background-color,
	.project-next
):is(
	.has-primary-color,
	.has-primary-500-color
):not(:is(.project-card, .post-card) *),
body.high-contrast :is(
	.has-secondary-background-color,
	.has-secondary-400-background-color,
	.has-secondary-500-background-color,
	.has-secondary-600-background-color,
	.has-secondary-700-background-color,
	.has-brand-900-background-color,
	.has-black-background-color,
	.has-black-700-background-color,
	.has-black-800-background-color,
	.has-black-900-background-color,
	.project-next
) :is(
	.has-primary-color,
	.has-primary-500-color
):not(:is(.project-card, .post-card) *) {
	color: var(--wp--preset--color--white) !important;
}

body.high-contrast :is(
	.has-secondary-background-color,
	.has-secondary-400-background-color,
	.has-secondary-500-background-color,
	.has-secondary-600-background-color,
	.has-secondary-700-background-color,
	.has-brand-900-background-color,
	.has-black-background-color,
	.has-black-700-background-color,
	.has-black-800-background-color,
	.has-black-900-background-color,
	.project-next
) a:where(:not(.wp-element-button, .wp-block-button__link)):not(:is(.project-card, .post-card) *) {
	color: var(--wp--preset--color--white);
}

/* Tags (contour et texte rouges, fond transparent) sur fond foncé : blancs. Les tags à fond blanc gardent leur rouge. */
body.high-contrast :is(
	.has-secondary-background-color,
	.has-secondary-400-background-color,
	.has-secondary-500-background-color,
	.has-secondary-600-background-color,
	.has-secondary-700-background-color,
	.has-brand-900-background-color,
	.has-black-background-color,
	.has-black-700-background-color,
	.has-black-800-background-color,
	.has-black-900-background-color,
	.project-next
) .tags:not(.tags--on-light) .tag:not(:is(.project-card, .post-card) *) {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

/*
 * Fonds primary (#db0033 en contraste élevé) : le bordeaux n'y fait que 2,58:1 et le noir 4,06:1.
 * Texte secondary / brand-900 / noir, ou rose pâle (primary-100 à 300), passe en blanc (5,17:1).
 * Même exclusion des composants à panneau clair que ci-dessus.
 */
body.high-contrast :is(
	.has-primary-background-color,
	.has-primary-500-background-color,
	.has-primary-600-background-color,
	.has-primary-700-background-color
):is(
	.has-secondary-color,
	.has-secondary-500-color,
	.has-secondary-600-color,
	.has-secondary-700-color,
	.has-brand-900-color,
	.has-black-color,
	.has-black-900-color,
	.has-primary-100-color,
	.has-primary-200-color,
	.has-primary-300-color
):not(:is(.project-card, .post-card) *),
body.high-contrast :is(
	.has-primary-background-color,
	.has-primary-500-background-color,
	.has-primary-600-background-color,
	.has-primary-700-background-color
) :is(
	.has-secondary-color,
	.has-secondary-500-color,
	.has-secondary-600-color,
	.has-secondary-700-color,
	.has-brand-900-color,
	.has-black-color,
	.has-black-900-color,
	.has-primary-100-color,
	.has-primary-200-color,
	.has-primary-300-color
):not(:is(.project-card, .post-card) *) {
	color: var(--wp--preset--color--white) !important;
}

/*
 * Titres de héros sans classe de couleur : ils héritent du rouge du style global des titres (theme.json).
 * Seuls les héros à fond bordeaux, noir ou rouge passent en blanc (titre d'article, de page). Le héros d'une
 * page projet est sur fond blanc : son titre garde son rouge (5,17:1).
 */
body.high-contrast .is-style-hero:is(
	.has-secondary-background-color,
	.has-secondary-400-background-color,
	.has-secondary-500-background-color,
	.has-secondary-600-background-color,
	.has-secondary-700-background-color,
	.has-brand-900-background-color,
	.has-black-background-color,
	.has-black-700-background-color,
	.has-black-800-background-color,
	.has-black-900-background-color,
	.has-primary-background-color,
	.has-primary-500-background-color,
	.has-primary-600-background-color,
	.has-primary-700-background-color
) :is(h1, h2, h3, h4):not(.has-text-color) {
	color: var(--wp--preset--color--white);
}

/* Plan du site : titres de colonnes en secondary par variable, sur le fond primary de la page. */
body.high-contrast :is(.page-sitemap, .wp-block-gouttenberg-h2a-page-sitemap) {
	--page-sitemap-heading: var(--wp--preset--color--white);
}

/*
 * Rose pâle en texte (filtres d'archive inactifs : primary-200 = 2,01:1 sur blanc) : passe en secondary
 * (13,35:1 sur blanc). Sur fond foncé il reste tel quel (6,64:1 sur le bordeaux) ; sur fond primary,
 * la règle précédente le passe en blanc. L'état actif reste distingué par la graisse et la couleur primary.
 */
body.high-contrast :is(
	.has-primary-100-color,
	.has-primary-200-color,
	.has-primary-300-color
):not(
	:is(
		.has-primary-background-color,
		.has-primary-500-background-color,
		.has-primary-600-background-color,
		.has-primary-700-background-color,
		.has-secondary-background-color,
		.has-secondary-400-background-color,
		.has-secondary-500-background-color,
		.has-secondary-600-background-color,
		.has-secondary-700-background-color,
		.has-brand-900-background-color,
		.has-black-background-color,
		.has-black-700-background-color,
		.has-black-800-background-color,
		.has-black-900-background-color
	) *
) {
	color: var(--wp--preset--color--secondary) !important;
}

/*
 * Composants dont le rouge est posé par leur propre CSS (pas par une classe has-*), sur fond bordeaux :
 * même remappé il n'y fait que 2,58:1, le texte et l'icône passent en blanc.
 * - 404 : mots mis en avant du texte d'accroche (on ne touche pas à --page-404-accent : le bouton s'en sert comme fond) ;
 * - « projet suivant » : libellé et flèche du lien ;
 * - pagination : numéro courant (rouge sur pastille bordeaux), et numéros inactifs, à 56 % d'opacité (3,93:1 sur blanc).
 */
body.high-contrast .page-404__lead :is(em, i, strong, b),
body.high-contrast :is(.project-next__cta-label, .project-next__cta-icon),
body.high-contrast .h2a-archive-pagination__number.is-current {
	color: var(--wp--preset--color--white);
}

body.high-contrast .h2a-archive-pagination__number:not(.is-current),
body.high-contrast .h2a-archive-pagination__ellipsis {
	color: var(--wp--preset--color--secondary);
}

/*
 * Pas de soulignement : le plugin souligne tous les liens en contraste élevé, ce que le design du site écarte.
 * (Attention WCAG 1.4.1 : dans un paragraphe, un lien ne doit pas se distinguer du texte par la seule couleur
 * si celle-ci n'a pas 3:1 avec le texte voisin.)
 */
body.high-contrast a {
	text-decoration: none !important;
}

/*
 * Décors animés de fond (blobs du pied de page, lave de la page 404) : retirés en contraste élevé.
 * Ils font varier le fond derrière le texte et n'apportent aucune information (canvas aria-hidden).
 */
body.high-contrast :is(.h2a-metaball__canvas, .page-404__canvas) {
	display: none !important;
}

/*
 * Texte blanc posé sur photo ou vidéo : le fond change à chaque image, aucune couleur ne garantit 4,5:1.
 * En contraste renforcé, les pastilles (« humain / stratégie / design » du héros d'accueil, mots-clés des
 * bandeaux) reçoivent un fond sombre quasi opaque : le pire cas (image blanche) donne plus de 10:1 pour le texte.
 * Les pastilles fusionnées ont un fond transparent forcé par leur CSS : !important est nécessaire.
 */
html body.high-contrast .tags.tags--on-dark :is(.tag, p.tag, .wp-block-paragraph.tag, .wp-block-gouttenberg-h2a-tag, .tags__cluster),
html body.high-contrast .tags.tags--on-dark.tags--fused > :is(.tag, p.tag, .wp-block-paragraph.tag, .wp-block-gouttenberg-h2a-tag) {
	background-color: rgb(0 0 0 / 80%) !important;
	border-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Héros à vidéo ou photo sans voile : un voile sombre derrière le titre et les textes blancs. */
html body.high-contrast .wp-block-cover.is-style-hero > .wp-block-cover__background.has-background-dim {
	background-color: var(--wp--preset--color--black) !important;
	opacity: 0.5 !important;
}