/* Vitrine : Diptyque. Deux moitiés plein écran, un mot par moitié, mouvements lents. */
.vtr-dip {
	--vtr-dip-ease: cubic-bezier(.7, 0, .2, 1);
	--vtr-dip-doux: cubic-bezier(.2, .7, .2, 1);
	--vtr-l: calc(100vw - var(--vtr-sb, 0px));
	position: relative;
	width: var(--vtr-l);
	max-width: none;
	height: var(--vtr-dip-h, 100svh);
	min-height: 560px;
	margin: var(--vtr-dip-remonte, 0px) calc(50% - var(--vtr-l) / 2) 0 !important;
	overflow: hidden;
	background: #14171f;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
/* Encadré : aligné sur les marges du site (--wooh-marge, 48 px par défaut), comme l'en-tête
   et les sections suivantes. L'en-tête reste au-dessus, en blanc. */
.vtr-dip.vtr-dip--cadre {
	/* Mêmes marges que l'en-tête Wooh : 48 px, 20 px sur téléphone. */
	--vtr-dip-marge: var(--wooh-marge, 48px);
	width: calc(var(--vtr-l) - 2 * var(--vtr-dip-marge));
	margin: 0 calc(50% - var(--vtr-l) / 2 + var(--vtr-dip-marge)) !important;
	margin-top: var(--vtr-dip-haut, 0px) !important;
}
@media (max-width: 544px) {
	.vtr-dip.vtr-dip--cadre {
		--vtr-dip-marge: var(--wooh-marge-mobile, 20px);
	}
}
.vtr-dip *,
.vtr-dip *::before,
.vtr-dip *::after {
	box-sizing: border-box;
}
.vtr-dip__panneaux {
	display: flex;
	height: 100%;
}
.vtr-dip .vtr-dip__panneau {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	box-shadow: none;
	/* Le grand mot se règle sur la largeur de SA moitié (unités cqi), pas sur l'écran. */
	container-type: inline-size;
	transition: flex-grow 1.1s var(--vtr-dip-ease);
}
/* Séparation nette entre les deux zones : 1 px blanc, qui suit la largeur animée des panneaux. */
.vtr-dip .vtr-dip__panneau + .vtr-dip__panneau {
	border-left: 1px solid #fff;
}
.vtr-dip .vtr-dip__panneau:hover,
.vtr-dip .vtr-dip__panneau:focus {
	color: #fff;
}
.vtr-dip .vtr-dip__panneau:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}
.vtr-dip .vtr-dip__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 2.4s var(--vtr-dip-doux), filter 1.1s ease;
}
/* Diaporama : les photos sont empilées, seule la photo « vue » est visible. La suivante
   arrive en fondu lent avec un léger recul (1,05 vers 1). */
.vtr-dip .vtr-dip__panneau--diapo .vtr-dip__img {
	opacity: 0;
	transition: opacity 1.6s ease, transform 2.8s var(--vtr-dip-doux), filter 1.1s ease;
}
.vtr-dip .vtr-dip__panneau--diapo .vtr-dip__img.is-vue {
	opacity: 1;
}
.vtr-dip .vtr-dip__panneau--diapo .vtr-dip__img:not(.is-vue) {
	transform: scale(1.05);
}
/* Légende et compteur : discrets, en bas à droite de la moitié ouverte, sur la ligne du texte. */
.vtr-dip__legende {
	position: absolute;
	bottom: clamp(40px, 7vh, 72px);
	right: clamp(24px, 3.9vw, 56px);
	justify-content: flex-end;
	max-width: 40%;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 16px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .04em;
	color: #fff;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}
.vtr-dip__legende > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vtr-dip__legende > span:first-child:empty {
	display: none;
}
.vtr-dip__compte {
	flex: none;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	font-variant-numeric: tabular-nums;
	opacity: .8;
}
.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__legende {
	opacity: 1;
	transition-delay: .3s;
}
.vtr-dip__legende.is-change > span:first-child {
	animation: vtr-dip-legende .9s ease;
}
@keyframes vtr-dip-legende {
	from { opacity: 0; }
}
@media (hover: none) and (min-width: 861px) {
	.vtr-dip__legende {
		opacity: 1;
	}
}
/* Mobile : en haut de chaque moitié (le texte occupe le bas), sous le titre pour la première. */
@media (max-width: 860px) {
	.vtr-dip__legende {
		top: 20px;
		bottom: auto;
		left: 24px;
		right: 24px;
		max-width: none;
		justify-content: space-between;
	}
	.vtr-dip .vtr-dip__panneau:first-child .vtr-dip__legende {
		top: calc(var(--vtr-dip-entete, 0px) + 48px);
	}
	.vtr-dip__panneau--diapo .vtr-dip__voile {
		background-image: linear-gradient(180deg, rgba(20, 23, 31, .3) 0%, rgba(20, 23, 31, 0) 16%), linear-gradient(180deg, rgba(20, 23, 31, .22) 0%, rgba(20, 23, 31, 0) 18%, rgba(20, 23, 31, 0) 34%, rgba(20, 23, 31, calc(var(--vtr-dip-voile, .55) * .55)) 62%, rgba(20, 23, 31, calc(var(--vtr-dip-voile, .55) + .2)) 100%);
	}
}

.vtr-dip__img--vide {
	display: block;
	background: #3a3d44;
}
.vtr-dip__voile {
	position: absolute;
	inset: 0;
	/* Voile du bas plus long et plus dense : le texte blanc reste lisible sur une photo claire. */
	background: linear-gradient(180deg, rgba(20, 23, 31, .22) 0%, rgba(20, 23, 31, 0) 18%, rgba(20, 23, 31, 0) 34%, rgba(20, 23, 31, calc(var(--vtr-dip-voile, .55) * .55)) 62%, rgba(20, 23, 31, calc(var(--vtr-dip-voile, .55) + .2)) 100%);
	pointer-events: none;
}
/* Moitié ouverte : un voile de plus sous le texte révélé. */
.vtr-dip__voile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 23, 31, 0) 35%, rgba(20, 23, 31, .5) 100%);
	opacity: 0;
	transition: opacity .9s ease;
}
.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__voile::after,
.vtr-dip:not(.is-js) .vtr-dip__panneau:hover .vtr-dip__voile::after {
	opacity: 1;
}
.vtr-dip__bloc {
	position: absolute;
	left: clamp(24px, 3.9vw, 56px);
	right: clamp(24px, 3.9vw, 56px);
	bottom: clamp(40px, 7vh, 72px);
	display: flex;
	flex-direction: column;
}
.vtr-dip__petit {
	display: flex;
	gap: 18px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
}
.vtr-dip__mot {
	display: block;
	font-size: clamp(56px, 7.8vw, 128px);
	font-size: clamp(40px, calc((100cqi - 2 * clamp(24px, 3.9vw, 56px)) / 5.2), 128px);
	font-weight: 300;
	line-height: .95;
	letter-spacing: -.035em;
	white-space: nowrap;
	transform-origin: left bottom;
	transition: transform 1.1s var(--vtr-dip-ease), opacity .8s ease;
}
.vtr-dip__revele {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 1s var(--vtr-dip-ease), opacity .6s ease;
}
.vtr-dip__revele > span {
	min-height: 0;
	overflow: hidden;
}
.vtr-dip__suite {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 440px;
	padding-top: 28px;
}
.vtr-dip__texte {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
}
.vtr-dip__lien {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.vtr-dip__trait {
	display: block;
	width: 32px;
	height: 1px;
	background: currentColor;
	transition: width .8s var(--vtr-dip-ease);
}

/* Sans souris (tablette) ou sans script : la moitié gauche reste la plus large (réglage « partage »). */
.vtr-dip .vtr-dip__panneau:first-child {
	flex-grow: var(--vtr-dip-g1, 72);
}
.vtr-dip .vtr-dip__panneau:last-child {
	flex-grow: var(--vtr-dip-g2, 28);
}

/* Survol : la moitié visée s'ouvre, l'autre s'efface. Avec JavaScript, l'état est
   porté par des classes (is-actif / is-retrait) remises à zéro dès que la souris
   quitte le hero : Safari laisse parfois :hover ou :has() bloqués. Sans JavaScript,
   :hover prend le relais. */
@media (hover: hover) and (min-width: 861px) {
	.vtr-dip .vtr-dip__panneau.is-actif,
	.vtr-dip:not(.is-js) .vtr-dip__panneau:is(:hover, :focus-visible) {
		flex-grow: var(--vtr-dip-g1, 72);
	}
	.vtr-dip .vtr-dip__panneau.is-retrait,
	.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:is(:hover, :focus-visible)) .vtr-dip__panneau:not(:hover):not(:focus-visible) {
		flex-grow: var(--vtr-dip-g2, 28);
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__img,
	.vtr-dip:not(.is-js) .vtr-dip__panneau:is(:hover, :focus-visible) .vtr-dip__img {
		transform: scale(1);
	}
	.vtr-dip .vtr-dip__panneau.is-retrait .vtr-dip__img,
	.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:is(:hover, :focus-visible)) .vtr-dip__panneau:not(:hover):not(:focus-visible) .vtr-dip__img {
		filter: brightness(.55) saturate(.6);
	}
	.vtr-dip .vtr-dip__panneau.is-retrait .vtr-dip__mot,
	.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:is(:hover, :focus-visible)) .vtr-dip__panneau:not(:hover):not(:focus-visible) .vtr-dip__mot {
		opacity: .82;
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__revele,
	.vtr-dip:not(.is-js) .vtr-dip__panneau:is(:hover, :focus-visible) .vtr-dip__revele {
		grid-template-rows: 1fr;
		opacity: 1;
		transition-delay: .15s;
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__trait,
	.vtr-dip:not(.is-js) .vtr-dip__panneau:is(:hover, :focus-visible) .vtr-dip__trait {
		width: 72px;
	}
}

/* Départ vers la page choisie : la moitié cliquée prend toute la largeur, les textes s'effacent. */
.vtr-dip.is-depart .vtr-dip__panneau {
	transition: flex-grow .55s cubic-bezier(.7, 0, .2, 1) !important;
}
.vtr-dip.is-depart .vtr-dip__panneau.is-choisi {
	flex-grow: 100 !important;
}
.vtr-dip.is-depart .vtr-dip__panneau:not(.is-choisi) {
	flex-grow: .0001 !important;
}
.vtr-dip.is-depart .vtr-dip__panneau.is-choisi .vtr-dip__img {
	filter: none !important;
}
.vtr-dip.is-depart :is(.vtr-dip__bloc, .vtr-dip__legende, .vtr-dip__titre, .vtr-dip__defile) {
	opacity: 0 !important;
	transition: opacity .25s ease !important;
}
@media (max-width: 860px) {
	/* Mobile (moitiés empilées) : la moitié choisie s'efface simplement vers la page suivante. */
	.vtr-dip.is-depart .vtr-dip__panneau:not(.is-choisi) {
		opacity: .4;
	}
}

/* Pendant le passage à la page suivante : le mot de la moitié choisie au centre,
   avec un fin trait de chargement dessous. */
.vtr-dip__route {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: rgba(20, 23, 31, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}
.vtr-dip.is-depart .vtr-dip__panneau.is-choisi .vtr-dip__route {
	opacity: 1;
	transition-delay: .2s;
}
.vtr-dip__route-mot {
	font-size: clamp(44px, 6vw, 96px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.035em;
	color: #fff;
	white-space: nowrap;
	transform: translateY(12px);
	transition: transform .7s var(--vtr-dip-doux);
}
.vtr-dip.is-depart .vtr-dip__panneau.is-choisi .vtr-dip__route-mot {
	transform: none;
	transition-delay: .2s;
}
.vtr-dip__route-ligne {
	position: relative;
	display: block;
	width: 72px;
	height: 1px;
	overflow: hidden;
	background: rgba(255, 255, 255, .3);
}
.vtr-dip__route-ligne::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: #fff;
	transform: translateX(-100%);
}
.vtr-dip.is-depart .vtr-dip__panneau.is-choisi .vtr-dip__route-ligne::after {
	animation: vtr-dip-charge 1.1s cubic-bezier(.6, 0, .4, 1) .4s infinite;
}
@keyframes vtr-dip-charge {
	from { transform: translateX(-100%); }
	to { transform: translateX(260%); }
}

/* Flèches croisées sur la séparation : deux traits fins qui se croisent lentement,
   à cheval sur les deux moitiés. Effacées dès qu'une moitié s'ouvre. */
.vtr-dip__croise {
	position: absolute;
	left: var(--vtr-dip-x, var(--vtr-dip-partage, 72%));
	top: 50%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	width: 40px;
	color: #fff;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity .5s ease;
}
.vtr-dip__croise > span {
	display: block;
	width: 40px;
	line-height: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
	animation: vtr-dip-croise-a 3.6s var(--vtr-dip-doux) infinite;
}
.vtr-dip__croise > .vtr-dip__croise-b {
	animation-name: vtr-dip-croise-b;
}
.vtr-dip__croise svg {
	display: block;
	width: 40px;
	max-width: none;
	height: 12px;
}
.vtr-dip__croise > .vtr-dip__croise-b svg {
	transform: scaleX(-1);
}
@keyframes vtr-dip-croise-a {
	0%, 12% { transform: translateX(-26px); opacity: 0; }
	30% { opacity: .95; }
	62% { opacity: .95; }
	80%, 100% { transform: translateX(26px); opacity: 0; }
}
@keyframes vtr-dip-croise-b {
	0%, 12% { transform: translateX(26px); opacity: 0; }
	30% { opacity: .95; }
	62% { opacity: .95; }
	80%, 100% { transform: translateX(-26px); opacity: 0; }
}
.vtr-dip.is-survol .vtr-dip__croise,
.vtr-dip.is-depart .vtr-dip__croise,
.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:hover) ~ .vtr-dip__croise {
	opacity: 0;
}
@media (max-width: 860px) {
	/* Moitiés empilées : la séparation est horizontale, les flèches montent et descendent. */
	/* À droite : le texte de chaque moitié est aligné à gauche, juste au-dessus de la séparation. */
	.vtr-dip__croise {
		left: calc(100% - 40px);
		top: var(--vtr-dip-y, calc(var(--vtr-dip-g1, 72) * 1%));
		transform: translate(-50%, -50%) rotate(90deg);
	}
	.vtr-dip.is-survol .vtr-dip__croise {
		opacity: 1;
	}
	.vtr-dip.is-depart .vtr-dip__croise {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vtr-dip__croise > span {
		opacity: .9;
	}
}

/* Filet central, titre et invitation à défiler */
.vtr-dip__filet {
	display: none;
	position: absolute;
	left: var(--vtr-dip-partage, 58%);
	top: var(--vtr-dip-entete, 0px);
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .28);
	pointer-events: none;
	transition: opacity .6s ease;
}
.vtr-dip.is-survol .vtr-dip__filet,
.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:hover) ~ .vtr-dip__filet {
	opacity: 0;
}
.vtr-dip .vtr-dip__titre {
	position: absolute;
	left: 50%;
	top: calc(var(--vtr-dip-entete, 0px) + 28px);
	z-index: 2;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .92);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .6s ease;
}
.vtr-dip.is-survol .vtr-dip__titre,
.vtr-dip:not(.is-js) .vtr-dip__panneaux:has(.vtr-dip__panneau:hover) ~ .vtr-dip__titre {
	opacity: 0;
}
.vtr-dip__defile {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: block;
	margin-left: -.5px;
	pointer-events: none;
	width: 1px;
	height: 56px;
	overflow: hidden;
	background: rgba(255, 255, 255, .25);
}
.vtr-dip__defile span {
	position: absolute;
	left: 0;
	top: -56px;
	width: 1px;
	height: 56px;
	background: #fff;
	animation: vtr-dip-defile 2.4s var(--vtr-dip-ease) infinite;
}
@keyframes vtr-dip-defile {
	0% { top: -56px; }
	60%, 100% { top: 56px; }
}

/* Arrivée : les mots montent, les photos reculent. L'animation démarre dès le premier
   affichage (sans attendre le script, chargé en différé) : sinon la page s'affichait
   d'abord au repos, puis repartait en arrière au chargement du script, d'où un « rebond ».
   Avec l'intro animée (html.vtr-intro), l'arrivée attend toujours la levée du rideau. */
/* Arrivée douce : la photo apparaît en fondu avec un très léger recul, le texte suit. */
html:not(.vtr-intro) .vtr-dip .vtr-dip__img,
.vtr-dip.is-pret .vtr-dip__img {
	animation: vtr-dip-arrivee-img 2.8s cubic-bezier(.25, .1, .25, 1) backwards;
}
html:not(.vtr-intro) .vtr-dip .vtr-dip__bloc,
.vtr-dip.is-pret .vtr-dip__bloc {
	animation: vtr-dip-arrivee 1.6s cubic-bezier(.25, .1, .25, 1) .35s backwards;
}
html:not(.vtr-intro) .vtr-dip .vtr-dip__panneau + .vtr-dip__panneau .vtr-dip__bloc,
.vtr-dip.is-pret .vtr-dip__panneau + .vtr-dip__panneau .vtr-dip__bloc {
	animation-delay: .5s;
}
@keyframes vtr-dip-arrivee {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
/* Pas d'état final imposé : chaque photo finit à l'échelle de son état (ouverte ou non). */
@keyframes vtr-dip-arrivee-img {
	from { opacity: 0; transform: scale(1.04); }
}

/* Mobile : toute la largeur, sans marge, et le même jeu de proportions mais à la verticale.
   La moitié ouverte (is-actif) prend la plus grande hauteur et montre son texte ; un toucher
   sur l'autre moitié l'ouvre, un second toucher suit son lien. */
@media (max-width: 860px) {
	.vtr-dip,
	.vtr-dip.vtr-dip--cadre {
		width: var(--vtr-l);
		height: calc(100svh - var(--vtr-dip-dessus, 72px));
		min-height: 520px;
		max-height: 900px;
		margin: 0 calc(50% - var(--vtr-l) / 2) !important;
		margin-top: var(--vtr-dip-haut, 0px) !important;
	}
	.vtr-dip__panneaux {
		flex-direction: column;
	}
	.vtr-dip .vtr-dip__panneau {
		flex: 1 1 0;
		min-height: 0;
		height: auto;
		transition: flex-grow .8s var(--vtr-dip-ease);
	}
	.vtr-dip .vtr-dip__panneau:first-child,
	.vtr-dip .vtr-dip__panneau.is-actif {
		flex-grow: var(--vtr-dip-g1, 72);
	}
	.vtr-dip .vtr-dip__panneau:last-child,
	.vtr-dip .vtr-dip__panneau.is-retrait {
		flex-grow: var(--vtr-dip-g2, 28);
	}
	.vtr-dip.is-js .vtr-dip__panneau.is-actif {
		flex-grow: var(--vtr-dip-g1, 72);
	}
	.vtr-dip.is-js .vtr-dip__panneau.is-retrait {
		flex-grow: var(--vtr-dip-g2, 28);
	}
	.vtr-dip .vtr-dip__panneau + .vtr-dip__panneau {
		border-left: 0;
		border-top: 1px solid #fff;
	}
	.vtr-dip .vtr-dip__bloc {
		left: 20px;
		right: 20px;
		bottom: 24px;
	}
	.vtr-dip__petit {
		margin-bottom: 12px;
		font-size: 11px;
	}
	.vtr-dip__mot {
		font-size: clamp(44px, 13vw, 80px);
		transition: transform .8s var(--vtr-dip-ease), opacity .6s ease;
	}
	/* Moitié repliée : le mot seul, plus petit ; le texte n'apparaît que sur la moitié ouverte. */
	.vtr-dip .vtr-dip__panneau.is-retrait .vtr-dip__mot {
		transform: scale(.72);
	}
	.vtr-dip .vtr-dip__panneau.is-retrait .vtr-dip__petit {
		margin-bottom: 6px;
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__revele,
	.vtr-dip:not(.is-js) .vtr-dip__revele {
		grid-template-rows: 1fr;
		opacity: 1;
		transition-delay: .2s;
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__voile::after {
		opacity: 1;
	}
	.vtr-dip .vtr-dip__panneau.is-actif .vtr-dip__legende {
		opacity: 1;
	}
	.vtr-dip .vtr-dip__panneau.is-retrait .vtr-dip__img {
		filter: brightness(.7) saturate(.8);
	}
	.vtr-dip__suite {
		gap: 16px;
		padding-top: 14px;
	}
	.vtr-dip__texte {
		font-size: 15px;
	}
	.vtr-dip__filet,
	.vtr-dip__defile {
		display: none;
	}
	.vtr-dip .vtr-dip__titre {
		top: calc(var(--vtr-dip-entete, 0px) + 16px);
		max-width: calc(100% - 40px);
		font-size: 10px;
		white-space: normal;
		text-align: center;
	}
}
@media (hover: none) and (min-width: 861px) {
	.vtr-dip__revele {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vtr-dip *,
	.vtr-dip.is-pret * {
		animation: none !important;
		transition: none !important;
	}
	.vtr-dip .vtr-dip__img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * En-tête transparent (page avec un Diptyque « sous l'en-tête »).
 * Redevient opaque quand on défile (vtr-entete-opaque, posé par le script),
 * quand on le survole ou quand un méga menu est ouvert.
 * ---------------------------------------------------------------------- */
body.vtr-entete-transparent #page {
	position: relative;
}
body.vtr-entete-transparent #masthead,
body.vtr-entete-transparent .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
}
body.vtr-entete-transparent .ast-above-header-wrap {
	display: none !important;
}
body.vtr-entete-transparent #masthead .ast-primary-header-bar,
body.vtr-entete-transparent #masthead .main-header-bar,
body.vtr-entete-transparent #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) .ast-primary-header-bar,
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) .main-header-bar {
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, .28) !important;
	box-shadow: none !important;
}
/* Textes, icônes et logo en blanc tant que l'en-tête est transparent */
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) :is(.main-header-menu > .menu-item > .menu-link, .ast-builder-menu .menu-link, .ast-header-account, .ast-header-search, .ast-header-woo-cart, .menu-toggle, .ast-mobile-menu-trigger-minimal) {
	color: #fff !important;
}
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) :is(.ast-header-account svg, .ast-header-search svg, .ast-header-woo-cart svg, .menu-toggle svg, .ast-mobile-menu-trigger-minimal svg) {
	fill: #fff !important;
	color: #fff !important;
}
/* Icônes au trait de l'en-tête Wooh (masques CSS) */
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) :is(.ast-header-search .astra-search-icon, .ast-header-account .ast-header-account-link, .ast-header-woo-cart .astra-icon.ast-icon-shopping-cart)::before {
	background: #fff !important;
}
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) .main-header-menu > .menu-item > .menu-link {
	box-shadow: none !important;
}
body.vtr-entete-transparent #masthead .site-branding img {
	transition: filter .45s ease;
}
body.vtr-entete-transparent:not(.vtr-entete-opaque):not(.vtr-entete-verre) #masthead:not(:hover):not(:has(.vtr-mm-li--ouvert)):not(:has(.ast-mobile-popup-drawer.active)) .site-branding img {
	filter: brightness(0) invert(1);
}
/* Variante « verre fumé blanc » : l'en-tête reste lisible (textes et logo foncés)
   et laisse deviner la photo à travers un voile blanc flouté. */
body.vtr-entete-verre #masthead .ast-primary-header-bar,
body.vtr-entete-verre #masthead .main-header-bar,
body.vtr-entete-verre #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	background: rgba(255, 255, 255, .92) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
	box-shadow: 0 1px 0 rgba(20, 23, 31, .06), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.vtr-entete-verre #masthead .ast-primary-header-bar,
	body.vtr-entete-verre #masthead .main-header-bar,
	body.vtr-entete-verre #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
		background: rgba(255, 255, 255, .58) !important;
		-webkit-backdrop-filter: blur(22px) saturate(1.6);
		backdrop-filter: blur(22px) saturate(1.6);
	}
	body.vtr-entete-verre.vtr-entete-opaque #masthead .ast-primary-header-bar,
	body.vtr-entete-verre.vtr-entete-opaque #masthead .main-header-bar,
	body.vtr-entete-verre #masthead:hover .ast-primary-header-bar,
	body.vtr-entete-verre #masthead:hover .main-header-bar,
	body.vtr-entete-verre #masthead:has(.vtr-mm-li--ouvert) .ast-primary-header-bar,
	body.vtr-entete-verre #masthead:has(.vtr-mm-li--ouvert) .main-header-bar {
		background: rgba(255, 255, 255, .84) !important;
	}
}
/* Le soulignement actif du menu reste discret sur le verre */
body.vtr-entete-verre #masthead .main-header-menu > .menu-item > .menu-link {
	background: transparent !important;
}

/* En-tête collant d'Astra : toujours opaque */
body.vtr-entete-transparent:not(.vtr-entete-verre) .ast-header-sticked,
body.vtr-entete-transparent:not(.vtr-entete-verre) .ast-sticky-active {
	background: #fff !important;
}

/* Aperçu dans l'éditeur : pas de plein écran ni d'en-tête. */
.editor-styles-wrapper .vtr-dip,
.vtr-dip-editeur .vtr-dip,
.vtr-dip-editeur .vtr-dip.vtr-dip--cadre {
	width: 100%;
	height: 640px;
	min-height: 0;
	margin: 0 !important;
}
.vtr-dip-editeur .vtr-dip__panneau {
	pointer-events: none;
}
.editor-styles-wrapper .vtr-dip .vtr-dip__revele {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Zone atteinte par une ancre du Diptyque : pas de cadre de focus visible autour de la section. */
[data-vtr-cible]:focus {
	outline: none;
}