/**
 * Bibliothèque de pictogrammes ANS — v0.7.2
 *
 * - pictogrammes illustratifs : cartes et contenus éditoriaux ;
 * - pictogrammes fonctionnels : boutons, navigation et actions.
 *
 * Les chemins sont relatifs à assets/css/icons.css.
 */

/* --------------------------------------------------------------------------
 * Composant fonctionnel générique
 * ----------------------------------------------------------------------- */
.ans-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask-image: var(--ans-icon-url);
	mask-image: var(--ans-icon-url);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -0.18em;
}

.ans-icon--search { --ans-icon-url: url("../icons/functional/search.svg"); }
.ans-icon--menu { --ans-icon-url: url("../icons/functional/menu.svg"); }
.ans-icon--user { --ans-icon-url: url("../icons/functional/user.svg"); }
.ans-icon--arrow-right { --ans-icon-url: url("../icons/functional/arrow-right.svg"); }
.ans-icon--external-link { --ans-icon-url: url("../icons/functional/external-link.svg"); }
.ans-icon--download { --ans-icon-url: url("../icons/functional/download.svg"); }
.ans-icon--play { --ans-icon-url: url("../icons/functional/play.svg"); }
.ans-icon--calendar { --ans-icon-url: url("../icons/functional/calendar.svg"); }
.ans-icon--time { --ans-icon-url: url("../icons/functional/time.svg"); }
.ans-icon--file { --ans-icon-url: url("../icons/functional/file-text.svg"); }
.ans-icon--help { --ans-icon-url: url("../icons/functional/question-circle.svg"); }
.ans-icon--valid { --ans-icon-url: url("../icons/functional/circle-check.svg"); }
.ans-icon--warning { --ans-icon-url: url("../icons/functional/warning.svg"); }

/* --------------------------------------------------------------------------
 * Pictogrammes illustratifs des cartes d'accueil
 * ----------------------------------------------------------------------- */
.ans-home-card-icon {
	width: 6.25rem;
	height: 6.25rem;
	margin: 0 0 1rem;
}

.ans-home-card-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ans-home-card--formation::before,
.ans-home-card--webinaire::before,
.ans-home-card--quiz::before,
.ans-home-card--assistance::before {
	display: none;
}

.ans-home-card .wp-block-button__link,
.ans-home-news .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration-thickness: from-font;
}

.ans-home-card .wp-block-button__link::after,
.ans-home-news .wp-block-post-excerpt__more-link::after {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	background-color: currentColor;
	content: "";
	-webkit-mask-image: url("../icons/functional/arrow-right.svg");
	mask-image: url("../icons/functional/arrow-right.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--ans-transition-fast);
}

.ans-home-card .wp-block-button__link:hover::after,
.ans-home-card .wp-block-button__link:focus-visible::after,
.ans-home-news .wp-block-post-excerpt__more-link:hover::after,
.ans-home-news .wp-block-post-excerpt__more-link:focus-visible::after {
	transform: translateX(0.2rem);
}


/* --------------------------------------------------------------------------
 * Contrôle depuis l'Éditeur de blocs
 * ----------------------------------------------------------------------- */

/*
 * Styles de bloc disponibles :
 * - Sans pictogramme
 * - Flèche
 * - Lien externe
 * - Téléchargement
 *
 * Ils sont enregistrés dans inc/icons.php et apparaissent dans le panneau
 * Styles des blocs Bouton et Extrait d’article.
 */
.wp-block-button:is(
	.is-style-ans-icon-arrow,
	.is-style-ans-icon-external,
	.is-style-ans-icon-download
) .wp-block-button__link,
.wp-block-post-excerpt:is(
	.is-style-ans-icon-arrow,
	.is-style-ans-icon-external,
	.is-style-ans-icon-download
) .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.wp-block-button:is(
	.is-style-ans-icon-arrow,
	.is-style-ans-icon-external,
	.is-style-ans-icon-download
) .wp-block-button__link::after,
.wp-block-post-excerpt:is(
	.is-style-ans-icon-arrow,
	.is-style-ans-icon-external,
	.is-style-ans-icon-download
) .wp-block-post-excerpt__more-link::after {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	background-color: currentColor;
	content: "";
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button.is-style-ans-icon-arrow .wp-block-button__link::after,
.wp-block-post-excerpt.is-style-ans-icon-arrow .wp-block-post-excerpt__more-link::after {
	-webkit-mask-image: url("../icons/functional/arrow-right.svg");
	mask-image: url("../icons/functional/arrow-right.svg");
}

.wp-block-button.is-style-ans-icon-external .wp-block-button__link::after,
.wp-block-post-excerpt.is-style-ans-icon-external .wp-block-post-excerpt__more-link::after {
	-webkit-mask-image: url("../icons/functional/external-link.svg");
	mask-image: url("../icons/functional/external-link.svg");
}

.wp-block-button.is-style-ans-icon-download .wp-block-button__link::after,
.wp-block-post-excerpt.is-style-ans-icon-download .wp-block-post-excerpt__more-link::after {
	-webkit-mask-image: url("../icons/functional/download.svg");
	mask-image: url("../icons/functional/download.svg");
}

/* Désactivation via le panneau Styles ou une classe CSS additionnelle. */
.wp-block-button.is-style-ans-no-icon .wp-block-button__link::after,
.wp-block-post-excerpt.is-style-ans-no-icon .wp-block-post-excerpt__more-link::after,
.ans-no-icon::after,
.ans-no-icon a::after,
.ans-no-icon .wp-block-button__link::after,
.ans-no-icon .wp-block-post-excerpt__more-link::after {
	display: none !important;
	content: none !important;
}

/*
 * Classes avancées utilisables sur n'importe quel bloc :
 * ans-icon-arrow, ans-icon-external, ans-icon-download, ans-no-icon.
 */
:is(.ans-icon-arrow, .ans-icon-external, .ans-icon-download) a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

:is(.ans-icon-arrow, .ans-icon-external, .ans-icon-download) a::after {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	background-color: currentColor;
	content: "";
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ans-icon-arrow a::after {
	-webkit-mask-image: url("../icons/functional/arrow-right.svg");
	mask-image: url("../icons/functional/arrow-right.svg");
}

.ans-icon-external a::after {
	-webkit-mask-image: url("../icons/functional/external-link.svg");
	mask-image: url("../icons/functional/external-link.svg");
}

.ans-icon-download a::after {
	-webkit-mask-image: url("../icons/functional/download.svg");
	mask-image: url("../icons/functional/download.svg");
}

/* --------------------------------------------------------------------------
 * Header : icônes fonctionnelles officielles
 * ----------------------------------------------------------------------- */
.ans-header-search .wp-block-search__button svg,
.ans-main-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.ans-header-search .wp-block-search__button::before,
.ans-main-nav .wp-block-navigation__responsive-container-open::before {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	content: "";
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ans-header-search .wp-block-search__button::before {
	-webkit-mask-image: url("../icons/functional/search.svg");
	mask-image: url("../icons/functional/search.svg");
}

.ans-main-nav .wp-block-navigation__responsive-container-open::before {
	-webkit-mask-image: url("../icons/functional/menu.svg");
	mask-image: url("../icons/functional/menu.svg");
}

.bouton-connexion-wordpress a::before {
	content: none;
}

/* --------------------------------------------------------------------------
 * Liens externes / nouvel onglet : pictogrammes uniquement sur demande
 * ----------------------------------------------------------------------- */
/*
 * Depuis la v0.9.0, le thème n'ajoute plus automatiquement de pictogramme
 * aux liens target="_blank". Le fait qu'un lien ouvre un nouvel onglet ou
 * pointe vers un site externe ne préjuge pas de sa présentation visuelle :
 * logo, image, titre ou lien de texte restent donc inchangés par défaut.
 *
 * Pour afficher volontairement un pictogramme, utiliser :
 * - le style de bloc « Lien externe » pour les boutons / extraits ;
 * - la classe CSS additionnelle `ans-icon-external` sur un bloc parent.
 *
 * La classe `ans-no-icon` est conservée pour neutraliser les pictogrammes
 * explicites ou hérités d'autres composants du thème.
 */

@media (max-width: 680px) {
	.ans-home-card-icon {
		width: 5.25rem;
		height: 5.25rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.ans-home-card .wp-block-button__link::after,
	.ans-home-news .wp-block-post-excerpt__more-link::after {
		transition: none;
	}
}