/**
 * Formations Cards — styles publics.
 * Les couleurs proviennent des variables définies dans les réglages du plugin.
 */

/* Valeurs par défaut : les réglages du plugin les écrasent via une règle :root en ligne. */
:root {
	--fc-accent: #ef7d00;
	--fc-accent-hover: #d06b00;
	--fc-text: #3c3a47;
	--fc-title: #000;
	--fc-card-bg: #fff;
	--fc-page-bg: #f5f5f7;
	--fc-radius: 15px;
	--fc-transition: 0.25s;
	--fc-icon-size: 18px;
	--fc-meta-gap: 8px;
	--fc-arrow: #3c3a47;
}

.fc-formations {
	--fc-gap-x: 60px;
	--fc-gap-y: 30px;

	color: var(--fc-text);
	font-size: 15px;
	line-height: 1.7;
	position: relative;
}

.fc-formations *,
.fc-formations *::before,
.fc-formations *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------- Page d'archive */

.fc-archive__inner {
	margin: 0 auto;
	max-width: 1200px;
	padding: 60px 20px 80px;
}

.fc-archive__header {
	margin-bottom: 40px;
}

.fc-archive__title {
	margin: 0 0 12px;
}

/* --------------------------------------------------------------- Filtres */

.fc-filters {
	background: var(--fc-page-bg);
	border-radius: var(--fc-radius);
	margin: 0 0 40px;
	padding: 24px 28px 28px;
}

.fc-filters--tabs-only {
	background: none;
	padding: 0;
}

.fc-filters__label {
	font-weight: 700;
	margin: 0 0 12px;
}

/* Certains thèmes chargent le script de jQuery UI sans sa feuille de style :
   le menu déroulant se retrouve alors dans le flux, tout en bas de la page, au
   lieu de flotter sous le champ — un clic semble alors ne rien faire. On fournit
   le strict nécessaire, uniquement pour les menus de nos champs (classe posée
   par le script). */
.fc-selectmenu-menu {
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 9999;
}

.fc-selectmenu-menu.ui-selectmenu-open {
	display: block;
}

.fc-selectmenu-menu .ui-menu {
	background: #fff;
	border: 1px solid #dcdce3;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 4px 0 0;
	max-height: 320px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 6px;
}

.fc-selectmenu-menu .ui-menu-item {
	list-style: none;
	margin: 0;
}

.fc-selectmenu-menu .ui-menu-item-wrapper {
	border-radius: 6px;
	color: var(--fc-text);
	cursor: pointer;
	display: block;
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 14px;
}

.fc-selectmenu-menu .ui-menu-item-wrapper:hover,
.fc-selectmenu-menu .ui-menu-item-wrapper.ui-state-active {
	background: var(--fc-page-bg);
	color: var(--fc-accent);
}

/* ---------------------------------------------------------------- Onglets */

.fc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.fc-filters--tabs-only .fc-tabs {
	margin-bottom: 40px;
}

.fc-formations .fc-tab {
	background: #fff;
	border: 1px solid #dcdce3;
	border-radius: 999px;
	color: var(--fc-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 22px;
	transition: background var(--fc-transition) ease, border-color var(--fc-transition) ease,
		color var(--fc-transition) ease;
}

.fc-formations .fc-tab:hover,
.fc-formations .fc-tab:focus-visible {
	border-color: var(--fc-accent);
	color: var(--fc-accent);
}

.fc-formations .fc-tab.is-active {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
}

.fc-filters__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Un filtre seul s'étirerait sur toute la barre : au-delà de 360 px il n'est
   pas plus lisible, et il finit sous les éléments fixes de la page (bandeau
   cookies, bouton de chat) qui rendent alors son côté droit inutilisable. */
.fc-field {
	flex: 1 1 200px;
	margin: 0;
	max-width: var(--fc-field-max, 360px);
	min-width: 160px;
}

.fc-field--search {
	flex: 1 1 240px;
}

.fc-formations .fc-select,
.fc-formations .fc-field input[type="search"] {
	appearance: none;
	background-color: #fff;
	border: 1px solid #dcdce3;
	border-radius: 10px;
	color: var(--fc-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	padding: 12px 40px 12px 16px;
	width: 100%;
}

.fc-formations .fc-field input[type="search"] {
	padding-right: 16px;
}

.fc-formations .fc-select {
	cursor: pointer;
}

/* Flèche en masque plutôt qu'en image de fond : sa couleur reste pilotable. */
.fc-field--select {
	position: relative;
}

/* Quand le thème remplace la liste native par son propre composant, celui-ci
   arrive sans habillage : on lui donne l'apparence du champ, sinon il s'affiche
   en simple texte. La classe est posée par le script s'il détecte le cas. */
.fc-field--enhanced::after {
	display: none;
}

.fc-formations .fc-field--enhanced .ui-selectmenu-button,
.fc-formations .fc-field--enhanced .select2-selection,
.fc-formations .fc-field--enhanced .nice-select,
.fc-formations .fc-field--enhanced .selectric {
	align-items: center;
	background-color: #fff;
	border: 1px solid #dcdce3;
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--fc-text);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 15px;
	gap: 10px;
	line-height: 1.4;
	min-height: 0;
	padding: 12px 16px;
	text-decoration: none;
	width: 100%;
}

.fc-formations .fc-field--enhanced .ui-selectmenu-text,
.fc-formations .fc-field--enhanced .select2-selection__rendered {
	flex: 1 1 auto;
	order: 1;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fc-formations .fc-field--enhanced .ui-selectmenu-icon,
.fc-formations .fc-field--enhanced .select2-selection__arrow {
	color: var(--fc-arrow);
	flex: none;
	margin-left: auto;
	order: 2;
	position: static;
}

.fc-field--select::after {
	background-color: var(--fc-arrow);
	content: "";
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}

.fc-formations .fc-select:focus,
.fc-formations .fc-field input[type="search"]:focus {
	border-color: var(--fc-accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.fc-formations .fc-submit,
.fc-formations .fc-reset {
	background: none;
	border: 1px solid #dcdce3;
	border-radius: 10px;
	color: var(--fc-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	padding: 12px 18px;
}

.fc-formations .fc-submit {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
}

.fc-formations .fc-submit:hover,
.fc-formations .fc-submit:focus {
	background: var(--fc-accent-hover);
	border-color: var(--fc-accent-hover);
}

.fc-formations .fc-reset:hover,
.fc-formations .fc-reset:focus {
	border-color: var(--fc-accent);
	color: var(--fc-accent);
}

.fc-reset.is-hidden {
	display: none;
}

/* Sans JavaScript, le bouton « Filtrer » reste indispensable ; avec, il est superflu. */
.fc-js .fc-submit {
	display: none;
}

/* ---------------------------------------------------------------- Grille */

.fc-results {
	position: relative;
	transition: opacity 0.2s ease;
}

.fc-results[aria-busy="true"] {
	opacity: 0.35;
	pointer-events: none;
}

.fc-count {
	color: #77757f;
	font-size: 14px;
	margin: 0 0 20px;
}

.fc-grid {
	display: grid;
	gap: var(--fc-gap-y) var(--fc-gap-x);
	grid-template-columns: repeat(var(--fc-cols, 3), minmax(0, 1fr));
}

.fc-cols-1 { --fc-cols: 1; }
.fc-cols-2 { --fc-cols: 2; }
.fc-cols-3 { --fc-cols: 3; }
.fc-cols-4 { --fc-cols: 4; --fc-gap-x: 40px; }
.fc-cols-5 { --fc-cols: 5; --fc-gap-x: 30px; }

/* ---------------------------------------------------------------- Cartes */

.fc-card {
	background: var(--fc-card-bg);
	border-radius: var(--fc-radius);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px 26px;
	position: relative;
	transition: box-shadow var(--fc-transition) ease, transform var(--fc-transition) ease,
		background-color var(--fc-transition) ease, border-color var(--fc-transition) ease;
}

.fc-align-center .fc-card {
	align-items: center;
	text-align: center;
}

.fc-align-left .fc-card {
	align-items: flex-start;
	text-align: left;
}

.fc-align-right .fc-card {
	align-items: flex-end;
	text-align: right;
}

.fc-align-left .fc-card__meta,
.fc-align-left .fc-card__media {
	justify-content: flex-start;
}

.fc-align-right .fc-card__meta,
.fc-align-right .fc-card__media {
	justify-content: flex-end;
}

/* Sélecteur volontairement spécifique : les contrôles Elementor visent
   « .elementor-element-xxx .fc-card:hover » et doivent pouvoir reprendre la main. */
.fc-formations .fc-card:hover,
.fc-formations .fc-card:focus-within {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
	transform: translateY(var(--fc-hover-lift, -4px)) scale(var(--fc-hover-scale, 1));
}

.fc-card__media {
	align-items: center;
	display: flex;
	justify-content: inherit;
	margin-bottom: 18px;
	min-height: 100px;
}

.fc-align-center .fc-card__media {
	justify-content: center;
}

.fc-formations .fc-card__logo {
	height: auto;
	max-height: 100px;
	max-width: 100px;
	object-fit: contain;
	width: auto;
}

.fc-card__title {
	color: var(--fc-title);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
}

.fc-formations .fc-card__link {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable, sans multiplier les liens pour les lecteurs d'écran. */
.fc-card__link::after {
	border-radius: var(--fc-radius);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.fc-formations .fc-card__link:focus-visible {
	outline: none;
}

.fc-card:focus-within .fc-card__link::after {
	outline: 2px solid var(--fc-accent);
	outline-offset: 3px;
}

.fc-card__meta {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: var(--fc-meta-gap);
	margin: 0 0 8px;
}

.fc-align-center .fc-card__meta {
	justify-content: center;
}

.fc-card__meta--modalite {
	color: #77757f;
	font-weight: 400;
}

.fc-icon {
	color: var(--fc-accent);
	flex: none;
	height: var(--fc-icon-size);
	width: var(--fc-icon-size);
}

.fc-card__excerpt {
	margin: 14px 0 24px;
}

.fc-card__action {
	margin: auto 0 0;
}

.fc-button {
	background: var(--fc-accent);
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 18px;
	transition: background 0.2s ease;
}

.fc-card:hover .fc-button,
.fc-card:focus-within .fc-button {
	background: var(--fc-accent-hover);
}

.fc-empty {
	background: var(--fc-page-bg);
	border-radius: var(--fc-radius);
	margin: 0;
	padding: 40px;
	text-align: center;
}

/* ------------------------------------------------------------ Pagination */

.fc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 44px;
}

.fc-formations .fc-pagination .page-numbers {
	background: #fff;
	border: 1px solid #dcdce3;
	border-radius: 10px;
	color: var(--fc-text);
	display: inline-block;
	line-height: 1.2;
	min-width: 42px;
	padding: 11px 14px;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fc-formations .fc-pagination .page-numbers:hover,
.fc-formations .fc-pagination .page-numbers:focus {
	border-color: var(--fc-accent);
	color: var(--fc-accent);
}

.fc-formations .fc-pagination .page-numbers.current {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
}

.fc-formations .fc-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --------------------------------------------------------- Afficher plus */

.fc-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 44px;
}

.fc-formations .fc-more {
	background: none;
	border: 1px solid var(--fc-accent);
	border-radius: 10px;
	color: var(--fc-accent);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 14px 28px;
	text-decoration: none;
	transition: background var(--fc-transition) ease, color var(--fc-transition) ease;
}

.fc-formations .fc-more:hover,
.fc-formations .fc-more:focus-visible {
	background: var(--fc-accent);
	color: #fff;
}

.fc-more__count {
	opacity: 0.7;
}

.fc-formations .fc-more.is-loading {
	cursor: progress;
	opacity: 0.55;
	pointer-events: none;
}

/* --------------------------------------------------------------- Chargeur */

.fc-spinner {
	animation: fc-spin 0.8s linear infinite;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	border-top-color: var(--fc-accent);
	height: 34px;
	left: 50%;
	margin: -17px 0 0 -17px;
	position: absolute;
	top: 120px;
	width: 34px;
	z-index: 2;
}

@keyframes fc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-card,
	.fc-results,
	.fc-button {
		transition: none;
	}

	.fc-formations .fc-card:hover,
	.fc-formations .fc-card:focus-within {
		transform: none;
	}

	.fc-results {
		transition: none;
	}

	.fc-spinner {
		animation-duration: 2s;
	}
}

/* -------------------------------------------------------------- Responsif */

@media (max-width: 1100px) {
	.fc-grid {
		--fc-cols: 2;
		--fc-gap-x: 30px;
	}
}

@media (max-width: 780px) {
	.fc-grid {
		--fc-cols: 1;
	}

	.fc-filters {
		padding: 20px;
	}

	.fc-field {
		flex: 1 1 100%;
	}

	.fc-card__title {
		font-size: 22px;
	}
}

/* Accessibilité : équivalent de screen-reader-text si le thème ne le fournit pas. */
.fc-formations .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}