.hvl-peaks {
	--hvl-peaks-surface: var(--e-global-color-azur_deep, #032838);
	--hvl-peaks-accent: var(--e-global-color-accent, #38b0db);
	--hvl-peaks-ink: var(--e-global-color-blanc, #fff);
	--hvl-peaks-h: 150px;
	--hvl-peaks-radius: 22px;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 26px 26px 22px;
	border-radius: var(--hvl-peaks-radius);
	color: var(--hvl-peaks-ink);
	text-align: left;
	background: var(--hvl-peaks-surface);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--hvl-peaks-accent) 18%, transparent),
		inset 0 3px 0 var(--hvl-peaks-accent);
}

@media (min-width: 810px) {
	.hvl-peaks {
		--hvl-peaks-h: 190px;
		--hvl-peaks-radius: 28px;
		padding: 34px 38px 28px;
	}
}

.hvl-peaks__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
}

.hvl-peaks__head b {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--hvl-peaks-ink);
}

.hvl-peaks__head span {
	font-size: 12px;
	font-weight: 500;
	color: color-mix(in srgb, var(--hvl-peaks-ink) 55%, transparent);
}

.hvl-peaks__chart {
	position: relative;
	margin-top: 18px;
	height: var(--hvl-peaks-h);
}

.hvl-peaks__chart svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hvl-peaks__area {
	fill: color-mix(in srgb, var(--hvl-peaks-accent) 16%, transparent);
}

.hvl-peaks__line {
	fill: none;
	stroke: var(--hvl-peaks-accent);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.hvl-peaks__base {
	stroke: color-mix(in srgb, var(--hvl-peaks-ink) 14%, transparent);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.hvl-peaks__months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	color: color-mix(in srgb, var(--hvl-peaks-ink) 42%, transparent);
}

.hvl-peaks__months li.is-peak {
	color: var(--hvl-peaks-accent);
}

.hvl-peaks__events {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.hvl-peaks__events li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hvl-peaks-ink);
	background: color-mix(in srgb, var(--hvl-peaks-ink) 7%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hvl-peaks-accent) 22%, transparent);
}

.hvl-peaks__events em {
	font-style: normal;
	font-weight: 500;
	color: color-mix(in srgb, var(--hvl-peaks-ink) 55%, transparent);
}

.hvl-peaks__note {
	margin: 14px 0 0;
	font-size: 11px;
	font-weight: 500;
	color: color-mix(in srgb, var(--hvl-peaks-ink) 42%, transparent);
}

/* ------------------------------------------------------------------ *
 * Utilitaires propres à la page « Agence web à Cannes ».
 * Ce fichier n’est chargé que lorsque le widget hvl-cn-peaks est posé.
 * ------------------------------------------------------------------ */

/* Bande arrondie quasi pleine largeur : le contrôle « width » d’Elementor est
   ignoré sur un conteneur racine « boxed », on pose donc la laisse ici. */
.e-con.hvl-cn-band {
	width: calc(100% - 52px);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.e-con.hvl-cn-band {
		width: calc(100% - 32px);
	}
}

/* Gouttière de 56 px des deux bandes à deux colonnes (maquette). */
.e-con.hvl-cn-atelier,
.e-con.hvl-cn-why {
	--hvl-cols-gap: 56px;
}

/* Colonnes 45 / 55 de la section « pourquoi » (maquette : 0.9fr / 1.1fr). */
@media (min-width: 900px) {
	.e-con.hvl-cn-split > .e-con:first-child {
		--width: calc((100% - var(--hvl-cols-gap, 56px)) * 0.45);
		width: var(--width);
	}

	.e-con.hvl-cn-split > .e-con:last-child {
		--width: calc((100% - var(--hvl-cols-gap, 56px)) * 0.55);
		width: var(--width);
	}
}

/* Légende posée sur le visuel d’une carte d’offre (hvl-offer-card). */
.hvl-cn-offer[data-cap] {
	position: relative;
}

.hvl-cn-offer[data-cap] .hvl-offer__stage {
	padding-top: 48px;
}

.hvl-cn-offer[data-cap]::before {
	content: attr(data-cap);
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	z-index: 2;
	width: fit-content;
	max-width: calc(100% - 36px);
	border-radius: 10px;
	padding: 5px 10px;
	font-family: var(--e-global-typography-text-font-family, "Karla"), sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--e-global-color-text, #14161d);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 0 0 1px rgba(20, 22, 29, 0.06);
}

@media (min-width: 810px) {
	.hvl-cn-offer[data-cap]::before {
		right: auto;
		max-width: 276px;
	}

	.hvl-cn-offer .hvl-offer__text {
		max-width: 68ch;
	}
}

.hvl-cn-offer[data-cap]:has(.hvl-offer--deep)::before {
	color: var(--e-global-color-blanc, #fff);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Filigrane des cartes « défis ». */
.hvl-cn-defi {
	position: relative;
	overflow: hidden;
}

.hvl-cn-defi__wm .elementor-heading-title {
	position: absolute;
	right: 14px;
	top: 8px;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
	color: color-mix(in srgb, var(--e-global-color-accent, #38b0db) 10%, transparent);
	pointer-events: none;
}

/* Liste « ce que nous fixons dès la maquette ». */
.hvl-cn-specs > .e-con + .e-con {
	border-top: 1px solid rgba(20, 22, 29, 0.08);
}

/* Onglets du calendrier, posés sur le panneau sombre. */
.hvl-cn-caltabs {
	--hvl-pill-strip: rgba(255, 255, 255, 0.07);
	--hvl-pill-ink: var(--e-global-color-blanc, #fff);
	--hvl-pill-active-bg: var(--e-global-color-accent, #38b0db);
	--hvl-pill-active-ink: var(--e-global-color-text, #14161d);
	--hvl-pill-radius: 16px;
}

.hvl-cn-caltabs .e-n-tabs > .e-n-tabs-heading {
	align-self: stretch;
	width: auto;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.hvl-cn-caltabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title {
	flex: none;
	border-radius: 12px;
	white-space: nowrap;
}

.hvl-cn-caltabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:hover {
	background: rgba(255, 255, 255, 0.08);
}

.hvl-cn-caltabs .e-n-tab-title-text em {
	margin-left: 5px;
	font-style: normal;
	font-weight: 500;
	opacity: 0.6;
}

.hvl-cn-caltabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:focus-visible {
	outline-color: var(--e-global-color-accent, #38b0db);
}

/* Trois temps d’un événement : colonnes filetées dès 810 px (bascule de la
   maquette), cartes empilées en dessous. */
.e-con.hvl-cn-steps > .e-con {
	--width: 100%;
	width: var(--width);
	padding: 16px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 810px) {
	.e-con.hvl-cn-steps > .e-con {
		--width: calc(100% / 3);
		width: var(--width);
		padding: 4px 22px 6px;
		border-radius: 0;
		background: none;
		border-left: 1px solid color-mix(in srgb, var(--e-global-color-accent, #38b0db) 30%, transparent);
	}

	.e-con.hvl-cn-steps > .e-con:first-child {
		padding-left: 0;
		border-left: 0;
	}
}