/* Wobi - Supports terrain (widget wobi_supports) */

.wobi-sup {
	--sup-accent: var(--w-accent, #F26A1B);
	--sup-deep: var(--w-deep, #D9560C);
	--sup-pale: var(--w-pale, #FFF1E7);
	--sup-ink: var(--w-ink, #111111);
	--sup-muted: var(--w-muted, #6B7075);
	--sup-line: var(--w-line, #ECECEC);
	--sup-surf: var(--w-surf, #F4F4F5);
	--sup-ease: var(--w-ease, cubic-bezier(.2, .8, .2, 1));
	display: grid;
	gap: 72px;
}

.wobi-sup__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--sup-line);
	position: relative;
}
.wobi-sup__entete::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 72px;
	height: 2px;
	background: var(--sup-accent);
}
.wobi-sup__titre {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--sup-ink);
	text-wrap: balance;
}
.wobi-sup__total {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--sup-deep);
}

.wobi-sup__grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.wobi-sup__carte {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sup-line);
	border-radius: 18px;
	overflow: hidden;
	margin: 0;
	transition: transform .35s var(--sup-ease), box-shadow .35s var(--sup-ease);
}
.wobi-sup__carte:hover {
	transform: translateY(-6px);
	box-shadow: var(--w-lift, 0 22px 44px -24px rgba(17, 17, 17, .22));
}

/* Cadre photo identique pour tous les supports, quel que soit le format d'origine.
   (Specificite renforcee : Elementor impose height:auto sur .elementor img.) */
.wobi-sup .wobi-sup__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sup-surf);
	overflow: hidden;
}
.wobi-sup .wobi-sup__media img.wobi-sup__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
	transition: transform .6s var(--sup-ease);
}
.wobi-sup .wobi-sup__carte:hover .wobi-sup__media img.wobi-sup__img { transform: scale(1.05); }

.wobi-sup__vide {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #C9CBCD;
}
.wobi-sup__vide svg {
	width: 44px;
	height: 44px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wobi-sup__corps {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wobi-sup__qte {
	margin: 0;
	font-size: clamp(40px, 4vw, 54px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sup-accent);
	font-variant-numeric: tabular-nums;
}
.wobi-sup__nom {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sup-ink);
}
.wobi-sup__desc {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sup-muted);
}

/* Apparition au defilement (activee par le script uniquement) */
.wobi-sup.est-anime .wobi-sup__carte {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s var(--sup-ease), transform .6s var(--sup-ease), box-shadow .35s var(--sup-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.wobi-sup.est-anime .wobi-sup__famille.est-vu .wobi-sup__carte {
	opacity: 1;
	transform: none;
}
.wobi-sup.est-anime .wobi-sup__famille.est-vu .wobi-sup__carte:hover {
	transform: translateY(-6px);
	transition-delay: 0s;
}

@media (max-width: 1024px) {
	.wobi-sup__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wobi-sup { gap: 56px; }
}
@media (max-width: 640px) {
	.wobi-sup__grille { grid-template-columns: 1fr; gap: 18px; }
	.wobi-sup__corps { padding: 18px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.wobi-sup__carte,
	.wobi-sup__img,
	.wobi-sup.est-anime .wobi-sup__carte { transition: none; transform: none; opacity: 1; }
}