.wf-ilv{--ilv-h:100;--ilv-bg:#01111a;--ilv-ov:#01111a;--ilv-ov-o:0.45;--ilv-tc:#ffffff;--ilv-max:780px;--ilv-ts:60px;--ilv-ts-m:34px;--ilv-xs:17px;--ilv-xs-m:15px;--ilv-bb:#ffffff;--ilv-bc:#0b1a24;--ilv-br:999px;}
/* WF Intro lettres vidéo — styles communs.
   États posés par le script sur la racine :
   (aucun)       intro affichée, contenu caché ;
   .is-js        le script a pris la main (le secours sans JS est coupé) ;
   .is-revealed  titre, texte et bouton apparaissent ;
   .is-done      l'intro est retirée ;
   .is-instant   pas d'animation (visite déjà vue, mouvement réduit). */

.wf-ilv {
	--ilv-hh: calc(var(--ilv-h, 100) * 1vh);
	position: relative;
	height: var(--ilv-hh);
	min-height: 320px;
	overflow: hidden;
	isolation: isolate;
	background: var(--ilv-bg, #01111a);
	color: var(--ilv-tc, #fff);
}
@supports (height: 100svh) {
	.wf-ilv { --ilv-hh: calc(var(--ilv-h, 100) * 1svh); }
}
.wf-ilv--bleed {
	width: var(--wf-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--wf-vw, 100vw) / 2);
}

/* ── Par-dessus la page : voile fixe, la page se découvre à travers la forme ── */
.wf-ilv.wf-ilv--overlay {
	position: fixed;
	inset: 0;
	z-index: 10020;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	background: transparent;
}
/* La vidéo ne sert que de source au dessin : invisible mais « à l'écran » pour rester lue. */
.wf-ilv--overlay .wf-ilv__media { opacity: 0; pointer-events: none; }
.wf-ilv--overlay.is-done { display: none; }
.wf-ilv--overlay:not(.is-js):not(.is-done) { animation: wf-ilv-out .6s ease 4s both; }
/* Sortie « fenêtre » : le canvas peint lui-même le fond, troué par la forme. */
.wf-ilv.is-window .wf-ilv__intro { background: transparent; }

/* ── Média ── */
.wf-ilv__media,
.wf-ilv__shade,
.wf-ilv__intro {
	position: absolute;
	inset: 0;
}
.wf-ilv__media { z-index: 0; }
.wf-ilv__video,
.wf-ilv__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.wf-ilv__shade {
	z-index: 1;
	background: var(--ilv-ov, #01111a);
	opacity: var(--ilv-ov-o, .45);
	pointer-events: none;
}

/* ── Contenu ── */
.wf-ilv__content {
	position: relative;
	z-index: 2;
	display: flex;
	box-sizing: border-box;
	height: 100%;
	padding: clamp(88px, 12vh, 140px) clamp(20px, 6vw, 96px) clamp(48px, 9vh, 110px);
	align-items: center;
	justify-content: center;
}
.wf-ilv--v-top .wf-ilv__content { align-items: flex-start; }
.wf-ilv--v-bottom .wf-ilv__content { align-items: flex-end; }
.wf-ilv--h-left .wf-ilv__content { justify-content: flex-start; text-align: left; }
.wf-ilv--h-center .wf-ilv__content { text-align: center; }
.wf-ilv--h-right .wf-ilv__content { justify-content: flex-end; text-align: right; }

.wf-ilv__inner { width: 100%; max-width: var(--ilv-max, 780px); }
.wf-ilv__title {
	margin: 0 0 .4em;
	color: inherit;
	font-size: var(--ilv-ts, 60px);
	line-height: 1.08;
	text-wrap: balance;
}
.wf-ilv__text {
	font-size: var(--ilv-xs, 17px);
	line-height: 1.55;
	color: inherit;
	opacity: .92;
}
.wf-ilv__text > :last-child { margin-bottom: 0; }
.wf-ilv__text a { color: inherit; text-decoration: underline; }
.wf-ilv__actions { margin-top: clamp(24px, 4vh, 40px); }
.wf-ilv__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 clamp(28px, 3vw, 48px);
	border: 1px solid var(--ilv-bb, #fff);
	border-radius: var(--ilv-br, 999px);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.wf-ilv--btn-upper .wf-ilv__btn { text-transform: uppercase; }
.wf-ilv__btn--filled { background: var(--ilv-bb, #fff); color: var(--ilv-bc, #0b1a24); }
.wf-ilv__btn--filled:hover,
.wf-ilv__btn--filled:focus-visible { color: var(--ilv-bc, #0b1a24); text-decoration: none; transform: translateY(-2px); }
.wf-ilv__btn--outline { background: transparent; color: var(--ilv-bb, #fff); }
.wf-ilv__btn--outline:hover,
.wf-ilv__btn--outline:focus-visible { background: var(--ilv-bb, #fff); color: var(--ilv-bc, #0b1a24); text-decoration: none; }
.wf-ilv__btn:focus-visible { outline: 2px solid var(--ilv-bb, #fff); outline-offset: 3px; }

/* Entrée du contenu, déclenchée par .is-revealed */
.wf-ilv__inner > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
}
.wf-ilv.is-revealed .wf-ilv__inner > * { opacity: 1; transform: none; }
.wf-ilv.is-revealed .wf-ilv__inner > :nth-child(2) { transition-delay: .12s; }
.wf-ilv.is-revealed .wf-ilv__inner > :nth-child(3) { transition-delay: .24s; }

/* ── Pause / lecture ── */
.wf-ilv__pause {
	position: absolute;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ilv-tc, #fff);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease .3s, visibility 0s linear .9s;
}
.wf-ilv__pause::before {
	content: "";
	position: absolute;
	inset: 9px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: .85;
}
.wf-ilv__pause svg { position: relative; fill: currentColor; }
.wf-ilv__pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wf-ilv__ico-play { display: none; }
.wf-ilv__pause.is-paused .wf-ilv__ico-play { display: block; }
.wf-ilv__pause.is-paused .wf-ilv__ico-pause { display: none; }
.wf-ilv.is-revealed .wf-ilv__pause { opacity: 1; visibility: visible; transition: opacity .6s ease .3s, visibility 0s; }
.wf-ilv--pause-lm .wf-ilv__pause { left: clamp(8px, 1.5vw, 24px); top: 50%; margin-top: -22px; }
.wf-ilv--pause-bl .wf-ilv__pause { left: clamp(8px, 1.5vw, 24px); bottom: clamp(8px, 2vh, 24px); }
.wf-ilv--pause-br .wf-ilv__pause { right: clamp(8px, 1.5vw, 24px); bottom: clamp(8px, 2vh, 24px); }

/* ── Intro ── */
.wf-ilv__intro {
	z-index: 5;
	background: var(--ilv-bg, #01111a);
	cursor: default;
}
.wf-ilv__canvas { display: block; width: 100%; height: 100%; }
.wf-ilv.is-skip .wf-ilv__intro { transition: opacity .55s ease; opacity: 0 !important; }
.wf-ilv.is-done .wf-ilv__intro { display: none; }

/* Sans script : l'intro s'efface seule et le contenu apparaît. */
.wf-ilv:not(.is-js):not(.is-done) .wf-ilv__intro { animation: wf-ilv-out .6s ease 4s both; }
.wf-ilv:not(.is-js):not(.is-revealed) .wf-ilv__inner > * { animation: wf-ilv-in .8s ease 4.2s both; }
@keyframes wf-ilv-out { to { opacity: 0; visibility: hidden; } }
@keyframes wf-ilv-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.wf-ilv.is-instant *,
.wf-ilv.is-instant *::before { transition: none !important; animation: none !important; }

/* ── Bouton « Passer » : discret, apparaît après 1 s, lisible sur fond clair ou sombre ── */
.wf-ilv__skip {
	position: absolute;
	z-index: 7;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 3vh, 28px);
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	mix-blend-mode: difference;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
.wf-ilv.is-skipshow:not(.is-revealed):not(.is-done) .wf-ilv__skip {
	opacity: .72;
	visibility: visible;
	transition: opacity .5s ease, visibility 0s;
}
.wf-ilv.is-skipshow:not(.is-revealed):not(.is-done) .wf-ilv__skip:hover,
.wf-ilv.is-skipshow:not(.is-revealed):not(.is-done) .wf-ilv__skip:focus-visible { opacity: 1; }
.wf-ilv__skip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── Animations d'apparition de la page (UIkit) gelées sous le voile, relancées à l'ouverture ── */
html.wf-ilv-playing [class*="uk-animation-"] { animation-play-state: paused !important; }

/* ── En-tête masqué pendant l'intro (option) ── */
html.wf-ilv-hdr .tm-header,
html.wf-ilv-hdr .tm-header-mobile,
html.wf-ilv-hdr .tm-toolbar { transition: opacity .8s ease; }
html.wf-ilv-hdr--hide .tm-header,
html.wf-ilv-hdr--hide .tm-header-mobile,
html.wf-ilv-hdr--hide .tm-toolbar { opacity: 0; pointer-events: none; }

@media (max-width: 639.98px) {
	.wf-ilv__title { font-size: var(--ilv-ts-m, 34px); }
	.wf-ilv__text { font-size: var(--ilv-xs-m, 15px); }
}
@media (prefers-reduced-motion: reduce) {
	.wf-ilv__inner > * { transition: none; transform: none; }
}