/*
 * Design system Weblounes : compléments à theme.json (ce qu'il ne sait pas
 * exprimer), boutons, styles de blocs, header et footer.
 * Les sections (patterns) sont dans patterns.css.
 */

/* ==========================================================================
   Fondations
   ========================================================================== */

:root {
	--wl-header-h: var(--wp--custom--header-height);
	--wl-ease: var(--wp--custom--transition);
	--wl-focus: var(--wp--preset--color--accent);
	--wl-line: var(--wp--preset--color--border);
	--wl-night-line: rgb(255 255 255 / 0.08);
	/* Icônes en data URI : aucune requête, couleur via mask + currentColor. */
	--wl-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15 15 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");
	--wl-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
	scroll-padding-top: calc(var(--wl-header-h) + 1.5rem);
	/* Réserve la place de la barre de défilement : pas de décalage quand le menu bloque le défilement. */
	scrollbar-gutter: stable;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Inter 4 : coupe « Display » (axe opsz) automatique sur les grands titres. */
	font-optical-sizing: auto;
}

/* Défilement bloqué pendant l'ouverture du menu mobile. */
.wl-menu-open {
	overflow: hidden;
}

/* Focus clavier visible et cohérent sur tous les éléments interactifs. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wl-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Soulignement des liens fin, décalé, qui s'épaissit au survol. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--wl-ease), text-decoration-thickness var(--wl-ease);
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Titres équilibrés, paragraphes sans veuve. Un mot plus long que la ligne est coupé. */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Très petits écrans : césure avec trait d'union (« d’accompagne-ments » en grand titre à 320 px). */
@media (max-width: 22.4375rem) {
	:where(h1, h2, h3, h4, h5, h6) {
		hyphens: auto;
	}
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

/* Masqué visuellement, lu par les lecteurs d'écran. */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Mot à trait d'union insécable (« e-commerce », « a-t-il ») : titres et questions de FAQ. */
.wl-nobr {
	white-space: nowrap;
}

/* Lien d'évitement (généré par WP) : visible au focus, aux couleurs du site. */
#wp-skip-link:focus {
	z-index: 100;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.875rem 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

/* Sections sombres : focus, liens et boutons adaptés au fond marine. */
.wl-dark {
	--wl-focus: var(--wp--preset--color--brand-cyan);
	--wl-line: rgb(255 255 255 / 0.12);
}

/*
 * Section immersive « nuit » : grille fine estompée sous le contenu.
 * Halos en radial-gradient : ni filter: blur ni bruit SVG (feTurbulence),
 * qui retardaient le premier affichage de 0,1 à 0,4 s sur mobile.
 */
.wl-night {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--ink-muted);
}

.wl-night::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(var(--wl-night-line) 1px, transparent 1px) 0 0 / 4rem 4rem,
		linear-gradient(90deg, var(--wl-night-line) 1px, transparent 1px) 0 0 / 4rem 4rem;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
	pointer-events: none;
}

.wl-night :is(h1, h2, h3, h4, strong) {
	color: var(--wp--preset--color--base);
}

.wl-night .has-muted-color {
	color: var(--wp--preset--color--ink-muted) !important;
}

.wl-dark :where(h1, h2, h3, h4) {
	color: inherit;
}

.wl-dark a:where(:not(.wp-element-button)) {
	color: inherit;
}

.wl-dark a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--brand-blue);
}

/* Texte en dégradé de marque (titres, chiffres). */
.wl-gradient-text,
h1 mark.has-inline-color {
	background: var(--wp--preset--gradient--marque-fonce);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*
 * Dégradé qui défile lentement. background-position impose de repeindre le
 * texte : animation cadencée par paliers (~5 images/s), invisible à cette
 * vitesse mais 12 fois moins coûteuse qu'à 60 images/s.
 */
.wl-dark :is(.wl-gradient-text, h1 mark.has-inline-color) {
	background-image: linear-gradient(100deg, #7b9bff, #a78bfa, #5ee6ff, #a78bfa, #7b9bff);
	background-size: 300% 100%;
	animation: wl-aurora 18s steps(90) infinite;
}

@keyframes wl-aurora {
	to {
		background-position: 300% 0;
	}
}

@media (forced-colors: active) {
	.wl-gradient-text,
	h1 mark.has-inline-color {
		-webkit-text-fill-color: currentColor;
	}
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 2.75rem;
	transition: background var(--wl-ease), color var(--wl-ease), border-color var(--wl-ease), box-shadow var(--wl-ease);
}

/* Bouton principal : flèche qui glisse au survol, fond marine. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--custom--shadow--medium);
}

/* Reflet qui balaie le bouton principal au survol. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.wp-block-button:not(.is-style-outline, .wl-btn-tel) > .wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
	transition: background-position 600ms ease;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::before {
	background-position: 250% 0;
}

.wp-block-button:not(.is-style-outline, .wl-btn-tel) > .wp-block-button__link::after {
	content: "→";
	content: "→" / "";
	transition: transform var(--wl-ease);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wl-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	box-shadow: var(--wp--custom--shadow--glow);
}

.wl-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6), 0 12px 48px -6px rgb(94 230 255 / 0.55);
}

/* Bouton secondaire (style « Contour » du core). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.875em - 1.5px) calc(1.5em - 1.5px);
	border: 1.5px solid var(--wp--preset--color--border-strong);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

.wl-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgb(255 255 255 / 0.22);
	background: rgb(255 255 255 / 0.06);
	color: var(--wp--preset--color--base);
}

.wl-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--ink-surface);
}

/* Bouton téléphone : classe `wl-btn-tel`, icône combiné. */
.wl-btn-tel > .wp-block-button__link {
	font-variant-numeric: tabular-nums;
}

.wl-btn-tel > .wp-block-button__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--wl-icon-phone) center / contain no-repeat;
	mask: var(--wl-icon-phone) center / contain no-repeat;
}

/* ==========================================================================
   Styles de blocs (inc/patterns.php)
   ========================================================================== */

/* Paragraphe « Surtitre ». */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--gradient--marque);
}

.has-text-align-center.is-style-eyebrow {
	justify-content: center;
}

.wl-dark .is-style-eyebrow {
	color: var(--wp--preset--color--brand-cyan);
}

.wl-dark .is-style-eyebrow::before {
	background: var(--wp--preset--gradient--aurore);
	box-shadow: 0 0 12px rgb(94 230 255 / 0.8);
}

/* Groupe « Carte » ; entièrement cliquable s'il contient `.wl-card-link`. */
.is-style-card {
	position: relative;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wl-line);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wl-ease), box-shadow var(--wl-ease), transform var(--wl-ease);
}

.wl-dark .is-style-card {
	background: var(--wp--preset--color--ink-surface);
}

.is-style-card:has(.wl-card-link a:hover) {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	box-shadow: var(--wp--custom--shadow--medium);
	transform: translateY(-2px);
}

.is-style-card:has(.wl-card-link a:focus-visible) {
	outline: 2px solid var(--wl-focus);
	outline-offset: 3px;
}

:root .wl-card-link {
	margin-top: auto;
}

.wl-card-link a {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 0.4em;
	font-weight: 600;
	text-decoration: none;
}

/* Flèche placée après le texte grâce à row-reverse. */
.wl-card-link a::before {
	content: "→";
	content: "→" / "";
	transition: transform var(--wl-ease);
}

.wl-card-link a:hover::before {
	transform: translateX(3px);
}

/* Lien étiré sur toute la carte ; le focus est reporté sur la carte. */
.wl-card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wl-card-link a:focus-visible {
	outline: none;
}

/*
 * Halo qui suit la souris sur les cartes d'une grille `wl-spotlight`
 * (position fournie par assets/js/effects.js, souris uniquement).
 */
.wl-spotlight > * {
	position: relative;
	isolation: isolate;
	transition: border-color var(--wl-ease), box-shadow var(--wl-ease), transform var(--wl-ease);
}

.wl-spotlight > *::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, -30%), rgb(79 124 255 / 0.14), transparent 60%);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

.wl-spotlight > :hover {
	border-color: rgb(79 124 255 / 0.45);
}

.wl-spotlight:hover > *::after {
	opacity: 1;
}

.wl-spotlight > .wl-dark::after {
	background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, -30%), rgb(94 230 255 / 0.18), transparent 60%);
}

/* Liste « Coches ». */
.is-style-check {
	padding-left: 0;
	list-style: none;
}

.is-style-check li {
	position: relative;
	padding-left: 1.75em;
}

.is-style-check li + li {
	margin-top: 0.5em;
}

.is-style-check li::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 1.125em;
	height: 1.125em;
	border-radius: 50%;
	background: var(--wl-icon-check) center / 0.75em no-repeat, var(--wp--preset--gradient--marque);
}

/* Variante en ligne (réassurance sous les CTA). */
.is-style-check.wl-inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
}

.is-style-check.wl-inline-list li + li {
	margin-top: 0;
}

/* Fil d'Ariane (bloc wl/breadcrumb du plugin wl-seo). */
.wl-breadcrumb {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wl-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wl-breadcrumb li:not(:last-child)::after {
	content: "/" / "";
	margin-inline-start: 0.5rem;
	opacity: 0.5;
}

.wl-breadcrumb a {
	color: inherit;
}

.wl-breadcrumb [aria-current] {
	color: var(--wp--preset--color--contrast);
}

.wl-dark .wl-breadcrumb {
	color: var(--wp--preset--color--ink-muted);
}

.wl-dark .wl-breadcrumb [aria-current] {
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Navigation (remplace la feuille du core, retirée dans inc/navigation.php)
   ========================================================================== */

.wp-block-navigation ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-navigation.is-vertical ul {
	flex-direction: column;
	align-items: flex-start;
}

.wp-block-navigation-item__content {
	display: block;
}

/* ==========================================================================
   Header
   ========================================================================== */

.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/*
 * Fond flouté porté par un pseudo-élément : un backdrop-filter sur le header
 * lui-même piégerait le panneau mobile (position: fixed) dans sa boîte.
 */
.wl-header {
	position: relative;
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--base);
}

.wl-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 -1px;
	background: rgb(5 6 15 / 0.94);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
}

/* Liseré lumineux sous le header. */
.wl-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(123 155 255 / 0.5), rgb(94 230 255 / 0.5), transparent);
	opacity: 0;
	transition: opacity var(--wl-ease);
}

/* Filet et ombre qui apparaissent au défilement, sans JS. */
@supports (animation-timeline: scroll()) {
	.wl-header {
		animation: wl-header-scrolled linear both;
		animation-timeline: scroll(root);
		animation-range: 0 6rem;
	}
}

@keyframes wl-header-scrolled {
	to {
		border-bottom-color: var(--wl-night-line);
		box-shadow: 0 10px 40px -20px rgb(0 0 0 / 0.8);
	}
}

.wl-header:hover::after,
.wl-header:focus-within::after {
	opacity: 1;
}

.wl-header__bar {
	min-height: var(--wl-header-h);
	gap: var(--wp--preset--spacing--40);
}

.wl-logo {
	display: inline-flex;
	flex-shrink: 0;
}

.wl-logo img {
	display: block;
	width: auto;
	height: 2rem;
}

/* Très petits écrans (320 px) : logo réduit, pour que l'appel et le bouton Menu tiennent sur la ligne. */
@media (max-width: 22.4375rem) {
	.wl-logo img {
		height: 1.5rem;
	}
}

.wl-header .wl-nav a {
	position: relative;
	padding-block: 0.5rem;
	color: rgb(255 255 255 / 0.74);
	text-decoration: none;
	transition: color var(--wl-ease);
}

.wl-header .wl-nav a:hover,
.wl-header .wl-nav a[aria-current="page"] {
	color: var(--wp--preset--color--base);
}

.wl-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wl-header__phone::before {
	color: var(--wp--preset--color--brand-cyan);
}

.wl-header__phone::before,
.wl-header__call::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--wl-icon-phone) center / contain no-repeat;
	mask: var(--wl-icon-phone) center / contain no-repeat;
}

.wl-header__actions {
	display: flex;
	gap: 0.5rem;
}

/* Bouton d'appel et bouton Menu : cibles tactiles de 44 px minimum. */
.wl-header__call,
.wl-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1.5px solid rgb(255 255 255 / 0.16);
	border-radius: var(--wp--custom--radius--pill);
	background: rgb(255 255 255 / 0.04);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--wl-ease);
}

.wl-header__call {
	padding: 0;
	font-size: 1.125rem;
}

.wl-header__call:hover,
.wl-menu-toggle:hover {
	border-color: rgb(255 255 255 / 0.5);
}

/*
 * Icône hamburger qui se transforme en croix, en deux temps : les barres
 * rejoignent le centre (top), puis pivotent (transform). Ordre inversé à la
 * fermeture. Les faire bouger ensemble les fait passer par une forme « > ».
 */
.wl-menu-toggle__icon,
.wl-menu-toggle__icon::before,
.wl-menu-toggle__icon::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.wl-menu-toggle__icon {
	position: relative;
	transition: background-color 0s 120ms;
}

.wl-menu-toggle__icon::before,
.wl-menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	transition: top 120ms ease 120ms, transform 120ms ease;
}

.wl-menu-toggle__icon::before {
	top: -6px;
}

.wl-menu-toggle__icon::after {
	top: 6px;
}

[aria-expanded="true"] .wl-menu-toggle__icon {
	background-color: transparent;
	transition-delay: 0s;
}

[aria-expanded="true"] .wl-menu-toggle__icon::before,
[aria-expanded="true"] .wl-menu-toggle__icon::after {
	top: 0;
	transition: top 120ms ease, transform 120ms ease 120ms;
}

[aria-expanded="true"] .wl-menu-toggle__icon::before {
	transform: rotate(45deg);
}

[aria-expanded="true"] .wl-menu-toggle__icon::after {
	transform: rotate(-45deg);
}

/* Mobile et tablette : panneau plein écran sous la barre. */
@media (max-width: 71.99rem) {
	.wl-header__panel {
		display: none !important;
	}

	.wl-header:not([data-menu]) .wl-header__panel:target,
	.wl-header[data-menu="open"] .wl-header__panel {
		position: fixed;
		inset: calc(var(--wl-header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			radial-gradient(30rem 20rem at 100% 0%, rgb(109 63 224 / 0.25), transparent 70%),
			var(--wp--preset--color--night);
		animation: wl-panel-in 220ms var(--wl-ease);
	}

	.wl-nav,
	.wl-nav ul {
		width: 100%;
	}

	.wl-nav ul {
		flex-direction: column;
	}

	.wl-nav a {
		padding-block: 0.875rem;
		border-bottom: 1px solid var(--wl-night-line);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.wl-header__phone {
		font-size: var(--wp--preset--font-size--medium);
	}

	.wl-header__panel .wp-block-button,
	.wl-header__panel .wp-block-button__link {
		width: 100%;
	}
}

@keyframes wl-panel-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

/* Desktop : panneau en ligne, boutons mobiles masqués. */
@media (min-width: 72rem) {
	.wl-header__actions {
		display: none;
	}

	.wl-header__panel {
		gap: var(--wp--preset--spacing--50);
	}

	.wl-nav ul {
		gap: clamp(1.25rem, 2vw, 2rem);
	}

	/* Indicateur de page courante : trait dégradé sous le lien. */
	.wl-nav a[aria-current="page"]::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--wp--preset--gradient--aurore);
		box-shadow: 0 0 10px rgb(94 230 255 / 0.7);
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wl-footer {
	font-size: var(--wp--preset--font-size--small);
}

/* Liseré lumineux et halo en haut du footer. */
.wl-footer.wl-night {
	background-image: radial-gradient(60rem 18rem at 50% 0%, rgb(109 63 224 / 0.22), transparent 70%);
	box-shadow: inset 0 1px 0 rgb(123 155 255 / 0.35);
}

/* Nom de marque géant, en dégradé qui s'estompe, coupé par le bas de page. */
.wl-footer__wordmark {
	margin: var(--wp--preset--spacing--50) 0 -0.18em;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0)), var(--wp--preset--gradient--aurore);
	background-blend-mode: soft-light;
	-webkit-background-clip: text;
	background-clip: text;
	font-size: clamp(4rem, 19vw, 17rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.8;
	text-align: center;
	white-space: nowrap;
	max-width: none;
	user-select: none;
	-webkit-text-fill-color: transparent;
	-webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 95%);
	mask-image: linear-gradient(180deg, #000 10%, transparent 95%);
}

.wl-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

@media (min-width: 40rem) {
	.wl-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.wl-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	}
}

.wl-footer__logo img {
	display: block;
	width: auto;
	height: 2rem;
}

.wl-footer__title {
	color: var(--wp--preset--color--base);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wl-footer address {
	font-style: normal;
	line-height: 1.8;
}

.wl-footer .wp-block-navigation ul {
	gap: 0.75rem;
}

.wl-footer .wp-block-navigation a,
.wl-footer address a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.wl-footer .wp-block-navigation a:hover,
.wl-footer address a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.wl-footer__bottom {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wl-line);
}

/* ==========================================================================
   Apparition au défilement, jouée une fois (classes posées par effects.js
   sur les éléments situés sous l'écran au chargement). Sans JS : rien n'est
   masqué. Transition ponctuelle plutôt qu'animation liée au défilement :
   aucun calque graphique conservé ensuite. translate/scale plutôt que
   transform : aucun conflit avec les effets de survol des cartes.
   ========================================================================== */

.wl-reveal {
	opacity: 0;
	translate: 0 2rem;
	scale: 0.97;
	transition: opacity 700ms ease, translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1), scale 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--wl-i, 0) * 90ms);
}

.wl-reveal.is-revealed {
	opacity: 1;
	translate: none;
	scale: none;
}

/* ==========================================================================
   Préférence « réduire les animations »
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.is-style-card:has(.wl-card-link a:hover) {
		transform: none;
	}

	/* Filet du header : lié au défilement, sans mouvement, on le conserve. */
	.wl-header {
		animation-duration: auto !important;
	}

	/* Frise de la méthode : ligne affichée pleine. */
	.wl-steps::after {
		animation: none !important;
	}
}