/**
 * Pilates & Moi — cartes des formations Pro
 * ---------------------------------------------------------------------
 * Chargé par le plugin « MOI — Habillages du site ».
 *
 * La carte est construite en Elementor v4 (listing JetEngine « Formation —
 * carte »). Ce fichier ne porte que ce que le schéma de style v4 ne sait pas
 * atteindre : les deux widgets JetEngine de la carte (image mise en avant et
 * tags de modalité), la hauteur égale des cartes et le bouton calé en pied.
 * Les couleurs sont lues sur les variables Elementor.
 */

/* Cartes de même hauteur, la carte entière est le lien -------------------- */

.jet-listing-grid--1323 .jet-listing-grid__item > .elementor,
.jet-listing-grid--1323 .jet-listing-grid__item > .elementor > .elementor-element-fccard {
	height: 100%;
}

.elementor .elementor-element-fccard {
	color: inherit;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.elementor .elementor-element-fccard:hover,
.elementor .elementor-element-fccard:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px -14px rgba(169, 85, 71, .35);
}

.elementor .elementor-element-fccard:focus-visible {
	outline: 2px solid var(--moiTerracotta, #ce6857);
	outline-offset: 3px;
}

.elementor-element-fccard .elementor-element-fcfacts {
	margin-top: auto;
}

.elementor-element-fccard h3 {
	transition: color .25s ease;
}

.elementor-element-fccard:hover h3 {
	color: var(--moiTerracotta, #ce6857);
}

/* Vignette : image mise en avant, fond blush tant qu'elle n'est pas posée --- */

.elementor-element-fcmedia .elementor-widget-jet-listing-dynamic-image,
.elementor-element-fcmedia .elementor-widget-container,
.elementor-element-fcmedia .jet-listing-dynamic-image {
	display: block;
	width: 100%;
	height: 100%;
}

.elementor-element-fcmedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}

.elementor-element-fccard:hover .elementor-element-fcmedia img {
	transform: scale(1.04);
}

/* Tags de modalité (présentiel, visio, e-learning) ------------------------- */

.fctags .jet-listing-dynamic-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0; /* neutralise les espaces laissés entre les termes */
}

.fctags .jet-listing-dynamic-terms__link {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--moiBlush, #e8cfc1);
	border-radius: 40px;
	background: var(--moiBlushLight, #fff9f5);
	color: var(--moiTerracottaDark, #a95547);
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .02em;
}

/* Une couleur par famille de formation ------------------------------------
 *
 * La classe moi-formation--<niveau> est posée sur chaque élément de la grille
 * par le plugin (champ « Niveau » de la formation). Chaque famille reçoit un
 * liseré en tête de carte, un voile léger de sa couleur qui s'estompe vers le
 * bas, et la même couleur sur l'accroche et le tarif.
 *   initiale         Studio MOI™ Pro Initiale      terracotta
 *   perfectionnement MOI™ Pro Perfectionnement     brun (inkSoft)
 *   thematique       Lombalgie et thématiques      rose
 *   immersion        Matwork 1, 2, 3 en présentiel sable (blushDark)
 * Le liseré prend la couleur pleine ; le texte, une nuance lisible sur blanc.
 */

.jet-listing-grid__item.moi-formation--initiale {
	--moi-fam: var(--moiTerracotta, #ce6857);
	--moi-fam-texte: var(--moiTerracottaDark, #a95547);
	--moi-fam-voile: #fbeae6;
}

.jet-listing-grid__item.moi-formation--perfectionnement {
	--moi-fam: var(--moiInkSoft, #6b5f58);
	--moi-fam-texte: var(--moiInkSoft, #6b5f58);
	--moi-fam-voile: #efeae7;
}

.jet-listing-grid__item.moi-formation--thematique {
	--moi-fam: var(--moiRose, #eb7f91);
	--moi-fam-texte: #b85a6a;
	--moi-fam-voile: #fdecef;
}

.jet-listing-grid__item.moi-formation--immersion {
	--moi-fam: #beaa9e; /* moiBlushDark */
	--moi-fam-texte: #7d6a5f;
	--moi-fam-voile: #f5efea;
}

.jet-listing-grid__item[class*="moi-formation--"] .elementor-element-fccard {
	border-top: 6px solid var(--moi-fam);
	background: linear-gradient(180deg, var(--moi-fam-voile) 0, #fff 150px);
}

/* les widgets v4 n'ont pas de classe elementor-element-<id> : on passe par data-id */
.jet-listing-grid__item[class*="moi-formation--"] [data-id="fcaccroche"],
.jet-listing-grid__item[class*="moi-formation--"] [data-id="fctarif"] {
	color: var(--moi-fam-texte);
}

.jet-listing-grid__item[class*="moi-formation--"] .fctags .jet-listing-dynamic-terms__link {
	border-color: var(--moi-fam);
	background: #fff;
	color: var(--moi-fam-texte);
}

.jet-listing-grid__item[class*="moi-formation--"] .elementor-element-fccard:hover h3 {
	color: var(--moi-fam-texte);
}