/*
 * Cartes de référence et filtres — archive /references/ et archives de taxonomie.
 *
 * Chargé uniquement sur ces gabarits (voir wnp_enqueue_reference_cards_style).
 * Les couleurs proviennent exclusivement des presets de theme.json.
 */

/* ==========================================================================
   Filtres par taxonomie
   ========================================================================== */

.wnp-filtres__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding-block: 0.9rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

/* Le layout « flow » de Gutenberg pose des marges verticales sur les enfants :
   elles désaligneraient la ligne en flex. */
.wnp-filtres__ligne > * {
	margin-block: 0;
}

.wnp-filtres > .wnp-filtres__ligne:first-of-type {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.wnp-filtres__label {
	flex: 0 0 auto;
	inline-size: 9rem;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	line-height: 1.6;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

.wnp-filtres__liste {
	display: flex;
	flex: 1 1 18rem;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wnp-filtres__liste li {
	margin: 0;
}

.wnp-filtres__liste a {
	display: inline-block;
	padding: 0.26rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wnp-filtres__liste a:hover,
.wnp-filtres__liste a:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* Terme en cours de consultation sur une archive de taxonomie. */
.wnp-filtres__liste a[aria-current="page"] {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Carte
   ========================================================================== */

.wnp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: 100%;
	padding: 0.85rem 0.85rem 1.35rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 18px;
	background-color: var(--wp--preset--color--base);
	/* Rogne le filet d'accent sur les coins arrondis : sans ça, ses angles
	   dépassent de la carte (son rayon est ramené à 2,5 px par sa hauteur).
	   Le macaron déborde de 18 px sous la boîte média, pour 32 px disponibles :
	   il n'est pas affecté. */
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease;
}

/*
 * Filet d'accent : distingue les deux catégories.
 *
 * Les deux filets font la même largeur, seule la teinte change (choix éditorial
 * du 28/08). WCAG 1.4.1 reste tenu par deux éléments :
 *   - un écart de luminance de 9,8:1 entre turquoise (gris 201/255) et bleu
 *     marine (gris 38/255) : la distinction subsiste en l'absence de perception
 *     des couleurs, par la clarté ;
 *   - le nom de la catégorie reste dans le DOM en screen-reader-text.
 * Ne pas rapprocher ces deux teintes en luminance sans rétablir un repère de forme.
 */
.wnp-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 5px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	transform-origin: top center;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Création de site web : turquoise. */
.wnp_ref_categorie-creation-de-site-web .wnp-card::before {
	background-color: var(--wp--preset--color--custom-turquoise);
}

/* Gestion de projet web : bleu marine. */
.wnp_ref_categorie-gestion-de-projet-web .wnp-card::before {
	background-color: var(--wp--preset--color--custom-bleu-marine);
}

/* ---------- Média : vignette + macaron ---------- */

.wnp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	margin-block-end: 1.15rem;
	border-radius: 12px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* Le recadrage vit sur la figure, pas sur la boîte média : le macaron déborde. */
.wnp-card__vignette {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}

.wnp-card__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wnp-card__macaron {
	position: absolute;
	inset-block-end: -18px;
	inset-inline-end: 12px;
	width: clamp(58px, 22%, 88px);
	margin: 0;
}

.wnp-card__macaron img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Titre ---------- */

.wnp-card__titre {
	margin: 0.4rem 0 0;
	font-size: 1.25rem;
	line-height: 1.3;
	text-wrap: balance;
}

.wnp-card__titre a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.3s ease;
}

/* Zone de clic étendue à toute la carte. */
.wnp-card__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ---------- Secteur ---------- */

.wnp-card__secteur {
	margin: 0;
	margin-block-start: auto;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.wnp-card__secteur a {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid currentColor;
}

/* ==========================================================================
   Survol : élévation, respiration de l'image, filet qui se déploie.
   Aucune ombre portée.
   ========================================================================== */

@media (hover: hover) {
	.wnp-card:hover {
		transform: translateY(-6px);
		border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 26%, transparent);
	}

	.wnp-card:hover::before {
		transform: scaleY(1.6);
	}

	.wnp-card:hover .wnp-card__vignette img {
		transform: scale(1.05);
	}

	.wnp-card:hover .wnp-card__titre a {
		text-decoration: underline;
		text-decoration-color: currentColor;
	}
}

/* :has(:focus-visible) et non :focus-within : le contour ne doit apparaître
   qu'à la navigation clavier, pas au clic souris. */
.wnp-card:has(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--custom-rose-violet);
	outline-offset: 3px;
}

.wnp-card:has(:focus-visible) .wnp-card__titre a {
	text-decoration: underline;
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.wnp-card,
	.wnp-card::before,
	.wnp-card__vignette img,
	.wnp-card__titre a,
	.wnp-filtres__liste a {
		transition: none;
	}

	.wnp-card:hover {
		transform: none;
	}

	.wnp-card:hover .wnp-card__vignette img {
		transform: none;
	}
}

/* Retour à la liste complète, présent uniquement sur les archives de taxonomie
   (gabarit taxonomy-wnp-references). Intitulé explicite hors contexte : RGAA 6.1. */
.wnp-filtres__reset {
	flex: 0 0 auto;
	margin: 0;
}

.wnp-filtres__reset a {
	display: inline-flex;
	align-items: center;
	padding: 0.26rem 0.85rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Chevron vers la gauche, tracé en CSS : pas de caractère annoncé par les
   lecteurs d'écran. */
.wnp-filtres__reset a::before {
	content: "";
	inline-size: 0.38rem;
	block-size: 0.38rem;
	margin-inline-end: 0.5rem;
	border-inline-start: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.wnp-filtres__reset a:hover,
.wnp-filtres__reset a:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.wnp-filtres__reset a {
		transition: none;
	}
}

/* Compteur de résultats, ramené dans le lien par wnp_inline_filter_counts.
   Opacité 0.65 : 5,92:1 sur puce normale, 8,32:1 sur puce active — AA tenu
   dans les deux états. */
.wnp-filtres__compte {
	margin-inline-start: 0.28rem;
	font-size: 0.82em;
	opacity: 0.65;
}

/* ==========================================================================
   Légende : la puce de catégorie rappelle le filet de la carte,
   par sa couleur ET par sa longueur.
   ========================================================================== */

.wnp-filtres__liste a[href*="/categorie/"]::before {
	content: "";
	display: inline-block;
	block-size: 4px;
	margin-inline-end: 0.5rem;
	border-radius: 2px;
	vertical-align: 0.14em;
}

.wnp-filtres__liste a[href$="/categorie/creation-de-site-web/"]::before {
	inline-size: 20px;
	background-color: var(--wp--preset--color--custom-turquoise);
}

.wnp-filtres__liste a[href$="/categorie/gestion-de-projet-web/"]::before {
	inline-size: 20px;
	background-color: var(--wp--preset--color--custom-bleu-marine);
}

/* ==========================================================================
   Repli des filtres secondaires
   ========================================================================== */

.wnp-filtres__plus {
	margin-block: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.wnp-filtres__plus > summary {
	padding-block: 0.9rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
	cursor: pointer;
	list-style: none;
}

.wnp-filtres__plus > summary::-webkit-details-marker {
	display: none;
}

.wnp-filtres__plus > summary::after {
	content: "";
	inline-size: 0.42rem;
	block-size: 0.42rem;
	margin-inline-start: 0.55rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform 0.25s ease;
}

.wnp-filtres__plus[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.wnp-filtres__plus > summary:hover,
.wnp-filtres__plus > summary:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* Les lignes repliées n'ont pas besoin du filet du haut ni du dernier filet bas. */
.wnp-filtres__plus .wnp-filtres__ligne:first-of-type {
	border-block-start: none;
}

.wnp-filtres__plus .wnp-filtres__ligne:last-of-type {
	border-block-end: none;
}

/* ==========================================================================
   À partir du format tablette, le bouton de repli remonte sur la ligne
   Catégorie, aligné à droite. Le contenu déplié, lui, reste en pleine largeur
   sous cette ligne — d'où le positionnement absolu du seul <summary>.
   ========================================================================== */

@media (min-width: 782px) {
	.wnp-filtres {
		position: relative;
	}

	/* Réserve la place du bouton pour éviter tout chevauchement des puces. */
	.wnp-filtres > .wnp-filtres__ligne:first-of-type {
		padding-inline-end: 18rem;
	}

	.wnp-filtres__plus > summary {
		position: absolute;
		inset-block-start: 0.9rem;
		inset-inline-end: 0;
		display: inline-flex;
		align-items: center;
		/* Hauteur d'une puce : le libellé se centre sur la ligne Catégorie. */
		min-block-size: 2.1rem;
		padding-block: 0;
	}

	/* Replié, le bloc est hors flux : son filet ferait doublon avec celui
	   de la ligne Catégorie. */
	.wnp-filtres__plus {
		border-block-end: none;
	}

	.wnp-filtres__plus[open] {
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wnp-filtres__plus > summary::after {
		transition: none;
	}
}