/**
 * La carte produit de la boutique.
 *
 * Chaque valeur est relevée sur la carte de la boucle Divi en production,
 * élément par élément, en styles calculés (`docs/`) : sur ordinateur, sur
 * tablette, sur téléphone en une et en deux colonnes. Aucune n'est approchée.
 *
 * Deux particularités de Divi qu'il fallait reproduire telles quelles :
 *
 * - l'interligne vaut **23,8 px partout**, y compris pour le titre en 20 px et
 *   le prix en 30 px : c'est l'interligne du corps de texte (14 px × 1,7),
 *   hérité en valeur absolue par chaque module ;
 * - un **vide de 30 px sous l'image**, que Divi crée en espaçant le module du
 *   cœur placé après elle. La ligne de rayon, remontée de 22 px, s'y loge.
 *
 * Les couleurs pointent sur les variables globales de Divi, avec la valeur
 * relevée en repli.
 */

.tif-carte {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	background-color: var( --gcid-o961uqcw6x, #ffffff );
	border: 1px solid var( --gcid-wh2kjr5a5z, #efece3 );
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.3s, transform 0.3s, translate 0.3s;
	cursor: pointer;
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 23.8px;
	color: #666666;
	text-align: start;
}

.tif-carte:hover {
	box-shadow: 0 2px 8px 0 rgba( 0, 0, 0, 0.15 );
	transform: translateY( -8px );
}

.tif-carte p {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------
 * L'image, le macaron et le cœur
 * ------------------------------------------------------------------ */

.tif-carte__media {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 30px;
}

.tif-carte__image {
	display: block;
	line-height: 0;
}

.tif-carte__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.tif-carte__macaron {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 2px 8px 0 rgba( 0, 0, 0, 0.15 );
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 23.8px;
	color: var( --gcid-9xxx50qw5b, #2d1b47 );
}

/* Le cœur se positionne lui-même, en coin de l'image : son enveloppe ne doit
   ni le déplacer ni occuper de place. */
.tif-carte__coeur {
	position: static;
	height: 0;
}

/* ------------------------------------------------------------------
 * Le corps
 * ------------------------------------------------------------------ */

.tif-carte__corps {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0;
	padding: 4px 16px 16px;
}

.tif-carte__rayon {
	position: relative;
	margin: -22px 0 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 23.8px;
	color: var( --gcid-zlyxp18sxb, #c2bba8 );
	text-transform: uppercase;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.tif-carte__titre {
	font-size: 20px;
	font-weight: 700;
	line-height: 23.8px;
	color: var( --gcid-qpwt6p8gja, #4a2f70 );
	text-align: left;
	transition: color 0.3s;
}

.tif-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.tif-carte__titre:hover {
	color: var( --gcid-zaehsudiwy, #8662b0 );
}

.tif-carte__phrase {
	margin-top: 8px !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	color: var( --gcid-c8ru7wcqf9, #66448f );
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tif-carte__attributs {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 23.8px;
	color: var( --gcid-c8ru7wcqf9, #66448f );
}

.tif-carte__attributs a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	border: 1px solid #cfeee2;
	background-color: var( --gcid-pub5p05ud5, #f8f7f1 );
	border-radius: 999px;
	color: var( --gcid-c8ru7wcqf9, #66448f );
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}

.tif-carte__attributs a:hover {
	border-color: var( --gcid-c8ru7wcqf9, #66448f );
	background-color: var( --gcid-0vz11oxs1i, #f7eefc );
}

/* ------------------------------------------------------------------
 * Le pied : les prix à gauche, le panier à droite
 * ------------------------------------------------------------------ */

.tif-carte__pied {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	margin-top: auto;
	padding-top: 24px;
}

.tif-carte__prix {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0 8px;
}

.tif-carte__prix-barre {
	font-size: 14px;
	font-weight: 500;
	line-height: 23.8px;
	color: var( --gcid-wm3m19t8pt, #f49680 );
	text-decoration-line: line-through;
}

.tif-carte__prix-courant {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 23.8px;
	color: var( --gcid-i0ot9tyxer, #ff6fa5 );
}

.tif-carte__panier {
	position: relative;
	align-self: end;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Rupture de stock : le voile, et le macaron au-dessus
 * ------------------------------------------------------------------ */

.tif-carte--rupture {
	isolation: isolate;
}

.tif-carte--rupture::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 9999;
	border-radius: inherit;
	background: var( --tif-rupture-voile, rgba( 248, 247, 241, 0.62 ) );
	pointer-events: none;
}

.tif-carte--rupture .tif-carte__macaron {
	z-index: 10000;
}

/* ------------------------------------------------------------------
 * Tablette et téléphone
 * ------------------------------------------------------------------ */

@media ( max-width: 980px ) {
	.tif-carte__phrase {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* Une colonne sur téléphone : la carte se couche, l'image à gauche sur toute
   la hauteur. Valeurs de la règle d'origine (filtres.css, 0.25). */
@media ( max-width: 767px ) {
	html[data-tif-cols="1"] .tif-carte {
		flex-direction: row;
		align-items: stretch;
		gap: 14px;
	}

	html[data-tif-cols="1"] .tif-carte__media {
		flex: 0 0 auto;
		display: block;
		width: 38%;
		max-width: 160px;
		padding-bottom: 0;
	}

	html[data-tif-cols="1"] .tif-carte__image {
		height: 100%;
	}

	html[data-tif-cols="1"] .tif-carte__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	html[data-tif-cols="1"] .tif-carte__corps {
		flex: 1 1 auto;
		min-width: 0;
	}
}