/* Grille d'accueil des cartes : une colonne, puis trois à partir de 810px,
   comme la maquette. Posée ici parce que c'est la mise en page propre à ce
   widget (Elementor ne sait pas basculer à 810px). */
.e-con.hvl-detail-grid,
.hvl-detail-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 810px) {
	.e-con.hvl-detail-grid,
	.hvl-detail-grid {
		gap: 16px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.e-con.hvl-detail-grid > .e-con,
.hvl-detail-grid > * {
	--width: auto;
	width: auto;
	min-width: 0;
}

.hvl-detail {
	--dt-surface: var(--e-global-color-blanc, #fff);
	--dt-line: var(--e-global-color-brume_200, #dde7ef);
	--dt-art-a: var(--e-global-color-azur_50, #eef8fd);
	--dt-art-b: var(--e-global-color-brume_100, #eef4f8);
	--dt-brand: var(--e-global-color-primary, #08739f);
	--dt-ink: var(--e-global-color-text, #14161d);
	--dt-mute: var(--e-global-color-gris, #6a6f7d);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: var(--dt-surface);
	box-shadow: inset 0 0 0 1px var(--dt-line);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
}

.hvl-detail *,
.hvl-detail *::before,
.hvl-detail *::after {
	box-sizing: border-box;
}

.elementor-widget-hvl-detail-card,
.elementor-widget-hvl-detail-card > .elementor-widget-container {
	height: 100%;
}

.hvl-detail__art {
	display: grid;
	place-items: center;
	flex: none;
	height: 150px;
	background: linear-gradient(170deg, var(--dt-art-a), var(--dt-art-b));
}

.hvl-detail__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 22px;
}

.hvl-detail .hvl-detail__title {
	display: block;
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--dt-ink);
}

.hvl-detail .hvl-detail__text {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--dt-mute);
}

.hvl-detail__text strong {
	font-weight: 600;
	color: var(--dt-ink);
}

.hvl-detail__text a {
	color: var(--dt-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ---------- Échelle typographique ---------- */
.hvl-detail__type {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	color: var(--dt-ink);
}

.hvl-detail__type span:nth-child(1) {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
}

.hvl-detail__type span:nth-child(2) {
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

.hvl-detail__type span:nth-child(3) {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--dt-mute);
}

/* ---------- Colonnes de mise en page ---------- */
.hvl-detail__grid {
	display: grid;
	grid-template-columns: repeat(6, 18px);
	gap: 6px;
}

.hvl-detail__grid i {
	height: 64px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--dt-brand) 16%, transparent);
}

.hvl-detail__grid i:nth-child(-n + 3) {
	background: color-mix(in srgb, var(--dt-brand) 38%, transparent);
}

/* ---------- Bouton et anneau de focus ---------- */
.hvl-detail__focus {
	display: inline-flex;
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background: var(--dt-brand);
	box-shadow: 0 0 0 3px var(--dt-surface), 0 0 0 5px var(--dt-brand);
}

@media (prefers-reduced-motion: no-preference) {
	.hvl-detail__focus {
		animation: hvl-detail-focus 2.4s ease-in-out infinite;
	}

	@keyframes hvl-detail-focus {
		0%,
		100% {
			box-shadow: 0 0 0 3px var(--dt-surface), 0 0 0 5px var(--dt-brand);
		}

		50% {
			box-shadow: 0 0 0 3px var(--dt-surface), 0 0 0 8px color-mix(in srgb, var(--dt-brand) 45%, transparent);
		}
	}
}