html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (max-width: 767px) {
	body {
		overflow-x: clip;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1 {
	text-wrap: balance;
}

::selection {
	background: var(--e-global-color-azur_100, #d6eef9);
	color: var(--e-global-color-text, #14161d);
}

:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #08739f);
	outline-offset: 3px;
}

.hvl-case-todo {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border-radius: 8px;
	padding: 3px 9px;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	color: #8a5a00;
	background: #fff6de;
	box-shadow: inset 0 0 0 1px #f1d38a;
}

.hvl-media-crop img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hvl-crop, 21 / 9);
	object-fit: cover;
	object-position: var(--hvl-crop-position, center);
}

@media (max-width: 809px) {
	.hvl-media-crop img {
		aspect-ratio: var(--hvl-crop-mobile, 4 / 3);
	}
}

.hvl-am-route__line {
	flex: 1;
	min-height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--e-global-color-primary, #08739f) 0 10px,
		transparent 10px 18px
	);
}

.e-con.hvl-cols-3 > .e-con,
.hvl-cols-3 > * {
	--width: calc((100% - var(--hvl-cols-gap, 16px) * 2) / 3);
	width: var(--width);
}

.e-con.hvl-cols-rail,
.hvl-cols-rail {
	display: grid;
	min-width: 0;
	max-width: 100%;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--hvl-rail-min, 230px), 1fr);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-bottom: 6px;
}

.e-con.hvl-cols-rail > .e-con,
.hvl-cols-rail > * {
	--width: auto;
	width: auto;
}

@media (max-width: 899px) {
	.e-con.hvl-cols-3 > .e-con,
	.hvl-cols-3 > * {
		--width: 100%;
	}
}

.e-con.hvl-cols-2 > .e-con,
.hvl-cols-2 > * {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) / 2);
	width: var(--width);
}

@media (max-width: 899px) {
	.e-con.hvl-cols-2 > .e-con,
	.hvl-cols-2 > * {
		--width: 100%;
	}
}

.hvl-nowrap {
	white-space: nowrap;
}

.e-con.hvl-cols-aside > .e-con:first-child,
.hvl-cols-aside > *:first-child {
	--width: calc(100% - var(--hvl-aside-width, 340px) - var(--hvl-cols-gap, 56px));
	width: var(--width);
}

.e-con.hvl-cols-aside > .e-con:last-child,
.hvl-cols-aside > *:last-child {
	--width: var(--hvl-aside-width, 340px);
	width: var(--width);
	align-self: start;
}

.e-con.hvl-cols-band > .e-con,
.hvl-cols-band > * {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) / 2);
	width: var(--width);
}

@media (max-width: 899px) {
	.e-con.hvl-cols-aside > .e-con:first-child,
	.e-con.hvl-cols-aside > .e-con:last-child,
	.e-con.hvl-cols-band > .e-con,
	.hvl-cols-aside > *,
	.hvl-cols-band > * {
		--width: 100%;
	}
}

@media (min-width: 900px) {
	.e-con.hvl-sticky-aside,
	.hvl-sticky-aside {
		position: sticky;
		top: var(--hvl-sticky-top, 104px);
		align-self: start;
	}
}

/* Les bandes de couleur des pages villes sont des panneaux arrondis encastrés,
   comme le bloc « méthode » de l'accueil : Elementor ignore width/margin sur un
   conteneur de premier niveau, l'écart se pose donc ici. */
.e-con.e-parent.hvl-band--deep,
.e-con.e-parent.hvl-band--panel,
.e-con.e-parent.hvl-band--soft,
.e-con.e-parent.hvl-band--inset {
	width: calc(100% - var(--hvl-band-inset, 52px));
	margin-inline: auto;
}

@media (max-width: 767px) {
	.e-con.e-parent.hvl-band--deep,
	.e-con.e-parent.hvl-band--panel,
	.e-con.e-parent.hvl-band--soft,
	.e-con.e-parent.hvl-band--inset {
		--hvl-band-inset: 32px;
	}
}


/* Les colonnes ci-dessus calculent leur largeur avec une gouttière supposée.
   Si la gouttière réelle est plus large, on préfère resserrer les colonnes
   plutôt que les faire passer à la ligne sans prévenir. */
.e-con.hvl-cols-2 > .e-con,
.e-con.hvl-cols-3 > .e-con,
.e-con.hvl-cols-band > .e-con,
.e-con.hvl-cols-aside > .e-con {
	flex-shrink: 1;
	min-width: 0;
}

/* Variantes qui basculent à 810 px, comme la plupart des maquettes villes. */
.e-con.hvl-cols-3--810 > .e-con,
.hvl-cols-3--810 > * {
	--width: calc((100% - var(--hvl-cols-gap, 16px) * 2) / 3);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

.e-con.hvl-cols-band--810 > .e-con,
.hvl-cols-band--810 > * {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) / 2);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

@media (max-width: 809px) {
	.e-con.hvl-cols-3--810 > .e-con,
	.e-con.hvl-cols-band--810 > .e-con,
	.hvl-cols-3--810 > *,
	.hvl-cols-band--810 > * {
		--width: 100%;
	}
}

/* Fait suivre à la gouttière du calcul celle réellement réglée dans Elementor. */
.e-con.hvl-cols-sync {
	--hvl-cols-gap: var(--column-gap, 16px);
}

/* Colonne latérale centrée verticalement plutôt qu'alignée en haut. */
.e-con.hvl-cols-aside.hvl-cols-aside--center > .e-con:last-child,
.hvl-cols-aside--center > *:last-child {
	align-self: center;
}

/* Bande 55/45 au lieu de 50/50. */
.e-con.hvl-cols-band--55 > .e-con:first-child,
.hvl-cols-band--55 > *:first-child {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) * 0.55);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

.e-con.hvl-cols-band--55 > .e-con:last-child,
.hvl-cols-band--55 > *:last-child {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) * 0.45);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

@media (max-width: 899px) {
	.e-con.hvl-cols-band--55 > .e-con,
	.hvl-cols-band--55 > * {
		--width: 100%;
	}
}

/* Variantes qui basculent à 900 px (plusieurs maquettes services). */
.e-con.hvl-cols-3--900 > .e-con,
.hvl-cols-3--900 > * {
	--width: calc((100% - var(--hvl-cols-gap, 16px) * 2) / 3);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

.e-con.hvl-cols-band--900 > .e-con,
.hvl-cols-band--900 > * {
	--width: calc((100% - var(--hvl-cols-gap, 48px)) / 2);
	width: var(--width);
	flex-shrink: 1;
	min-width: 0;
}

@media (max-width: 899px) {
	.e-con.hvl-cols-3--900 > .e-con,
	.e-con.hvl-cols-band--900 > .e-con,
	.hvl-cols-3--900 > *,
	.hvl-cols-band--900 > * {
		--width: 100%;
	}
}

/* Le widget Bouton d'Elementor retombe sur l'accent quand aucune couleur
   n'est posée ; la charte veut le bleu principal. Un réglage explicite
   sur le bouton reste prioritaire. */
.elementor .elementor-widget-button .elementor-button {
	background-color: var(--e-global-color-primary, #08739f);
}

.elementor .elementor-widget-button .elementor-button:hover,
.elementor .elementor-widget-button .elementor-button:focus {
	background-color: var(--e-global-color-azur_700, #075c7f);
}

.hvl-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	transform: translateY(-180%);
	border-radius: 10px;
	padding: 10px 16px;
	font-family: var(--e-global-typography-body-font-family, "Karla"), system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--e-global-color-blanc, #fff);
	background: var(--e-global-color-primary, #08739f);
	box-shadow: 0 6px 20px -8px rgba(20, 22, 29, 0.6);
	transition: transform 0.18s ease;
}

.hvl-skip-link:focus {
	transform: translateY(0);
	color: var(--e-global-color-blanc, #fff);
	outline: 2px solid var(--e-global-color-text, #14161d);
	outline-offset: 2px;
}

#content:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.hvl-skip-link {
		transition: none;
	}
}