/*
 * @author: Mathieu MARI <contact@mathieumari.com>
 * @date:   25-06-2026 00:39:00
 * @lastModifiedBy:   Mathieu MARI <contact@mathieumari.com>
 * @lastModifiedTime: 2026-06-29 23:30:00
 */

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

/* ============================================================== Variables */
:root {
	/* --- Couleurs de marque */
	--dd-primary-color: #b8924f;
	--dd-primary-color-light: #d8b985;
	--dd-primary-color-lighter: #e8d4a8;
	--dd-primary-color-dark: #8f6f38;

	--dd-secondary-color: #f6f1e7;
	--dd-bg-color: #14110c;
	--dd-bg-color-deep: #0d0b07;

	/* --- Dérivées sémantiques */
	--dd-color-text: var(--dd-secondary-color);
	--dd-color-text-muted: color-mix(in srgb, var(--dd-secondary-color) 90%, transparent);
	--dd-color-text-soft: color-mix(in srgb, var(--dd-secondary-color) 75%, transparent);
	--dd-color-accent: var(--dd-primary-color-light);
	--dd-color-border: color-mix(in srgb, var(--dd-primary-color-light) 14%, transparent);
	--dd-color-border-strong: color-mix(in srgb, var(--dd-secondary-color) 42%, transparent);
	--dd-color-surface: color-mix(in srgb, var(--dd-bg-color) 82%, transparent);
	--dd-color-overlay: color-mix(in srgb, var(--dd-bg-color) 55%, transparent);
	--dd-color-overlay-strong: color-mix(in srgb, var(--dd-bg-color) 80%, transparent);
	--dd-color-overlay-top: color-mix(in srgb, var(--dd-bg-color) 45%, transparent);
	--dd-color-primary-glow: color-mix(in srgb, var(--dd-primary-color) 22%, transparent);
	--dd-color-primary-inset: color-mix(in srgb, var(--dd-primary-color) 28%, transparent);
	--dd-color-primary-soft: color-mix(in srgb, var(--dd-primary-color) 8%, transparent);

	/* --- Typographie */
	--dd-serif: 'Cormorant Garamond', Georgia, serif;
	--dd-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	/* --- Layout */
	--dd-header-h: 200px;
	--dd-medal-size: clamp(11.5rem, min(14vw, 20vmin), 16rem);
	--dd-medal-size-scrolled: clamp(3.25rem, 4.2vw, 4rem);
	--dd-nav-bar-h-scrolled: 72px;
	--dd-brand-scrolled-gap: 14px;
	--dd-brand-label-width: 14rem;
	--dd-header-action-w: 112px;
	--dd-lang-switch-min-w: 96px;

	/* --- Scrollbar */
	--dd-scrollbar-size: 7px;
	--dd-scrollbar-track: color-mix(in srgb, var(--dd-secondary-color) 4%, transparent);
	--dd-scrollbar-thumb: color-mix(in srgb, var(--dd-primary-color) 52%, transparent);
}

/* ============================================================== Scrollbar */
html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--dd-scrollbar-thumb) var(--dd-scrollbar-track);
}

*::-webkit-scrollbar {
	width: var(--dd-scrollbar-size);
	height: var(--dd-scrollbar-size);
}

*::-webkit-scrollbar-track {
	background: var(--dd-scrollbar-track);
	border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
	border-radius: 999px;
	border: 2px solid transparent;
	background:
		linear-gradient(180deg, var(--dd-primary-color-light) 0%, var(--dd-primary-color) 100%) padding-box,
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0)) border-box;
	background-clip: padding-box;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transition:
		background 0.25s ease,
		box-shadow 0.25s ease;
}

*::-webkit-scrollbar-thumb:hover {
	background:
		linear-gradient(180deg, var(--dd-primary-color-lighter) 0%, var(--dd-primary-color-light) 100%) padding-box,
		linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0)) border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 12px var(--dd-color-primary-glow);
}

*::-webkit-scrollbar-thumb:active {
	background:
		linear-gradient(180deg, var(--dd-primary-color) 0%, var(--dd-primary-color-dark) 100%) padding-box,
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0)) border-box;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

/* ============================================================== Reset léger */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--dd-sans);
	color: var(--dd-color-text);
	background: var(--dd-bg-color);
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

/* ============================================================== Boot loader (desktop — vidéos background) */
html.dd-boot-pending,
html.dd-boot-pending body {
	overflow: hidden;
	height: 100%;
}

.dd-boot {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}

.dd-boot.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dd-boot__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--dd-primary-color) 10%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color-deep) 0%, var(--dd-bg-color) 48%, var(--dd-bg-color-deep) 100%);
}

.dd-boot__glow {
	position: absolute;
	left: 50%;
	top: 42%;
	width: min(72vw, 520px);
	height: min(72vw, 520px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--dd-primary-color) 24%, transparent) 0%, transparent 68%);
	filter: blur(28px);
	opacity: 0.55;
	animation: dd-boot-glow 3.2s ease-in-out infinite;
	pointer-events: none;
}

.dd-boot__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2.2vw, 22px);
	padding: clamp(24px, 4vw, 40px);
	text-align: center;
	animation: dd-boot-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dd-boot__medal {
	display: grid;
	place-items: center;
	animation: dd-boot-breathe 2.8s ease-in-out infinite;
}

.dd-boot__frame {
	--dd-medal-size: clamp(104px, 14vw, 148px);
}

.dd-boot__brand {
	margin: 0;
	font-family: var(--dd-serif);
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--dd-color-text);
	text-shadow: 0 2px 24px color-mix(in srgb, var(--dd-bg-color) 80%, transparent);
}

.dd-boot__status {
	margin: 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dd-color-text-muted);
}

.dd-boot__progress {
	position: relative;
	width: min(220px, 52vw);
	height: 2px;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--dd-primary-color-light) 16%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 12%, transparent) inset;
}

.dd-boot__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--dd-primary-color-dark), var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow: 0 0 14px color-mix(in srgb, var(--dd-primary-color-light) 55%, transparent);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dd-boot__quote {
	margin: clamp(6px, 1vw, 12px) 0 0;
	max-width: 34ch;
	min-height: 1.5em;
	font-family: var(--dd-serif);
	font-style: italic;
	font-size: clamp(14px, 1.55vw, 18px);
	line-height: 1.55;
	letter-spacing: 0.012em;
	color: color-mix(in srgb, var(--dd-color-text) 74%, transparent);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.dd-boot__quote.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes dd-boot-glow {
	0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.96); }
	50% { opacity: 0.62; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes dd-boot-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes dd-boot-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

.dd-static-media .dd-boot {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.dd-boot,
	.dd-boot__inner,
	.dd-boot__medal,
	.dd-boot__glow {
		animation: none !important;
		transition-duration: 0.2s;
	}

	.dd-boot__quote {
		transition: none;
	}
}

/* ============================================================== Header */
.dd-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	padding: 16px clamp(20px, 5vw, 64px) 0;
	overflow: visible;
	transition:
		padding 0.4s ease,
		background 0.4s ease,
		box-shadow 0.4s ease;
}

.dd-header.is-scrolled {
	padding-top: 9px;
	padding-bottom: 9px;
	background: var(--dd-color-surface);
	backdrop-filter: blur(12px);
	box-shadow:
		0 1px 0 var(--dd-color-border),
		0 12px 30px -20px rgba(0, 0, 0, 0.6);
}

/* --- Navigation principale */
.dd-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-start;
	gap: clamp(12px, 3vw, 48px);
	padding-top: 4px;
}

.dd-nav__group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.4vw, 24px);
	padding-top: 18px;
}

.dd-nav__group--left {
	justify-content: flex-end;
}
.dd-nav__group--right {
	justify-content: flex-start;
}

.dd-nav__link {
	position: relative;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--dd-color-text);
	opacity: 0.88;
	white-space: nowrap;
	transition: opacity 0.3s ease;
}

.dd-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 0;
	height: 1px;
	background: var(--dd-color-accent);
	transition: width 0.35s ease;
}

.dd-nav__link:hover {
	opacity: 1;
}
.dd-nav__link:hover::after {
	width: 100%;
}

/* --- Logo central — médaille + wordmark "Domaine de Duillier" */
.dd-nav__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(10px, 0.95vw, 15px);
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	perspective: 1000px;
}

/* --- Wordmark sous la médaille (mode hero) : serif doré gravé + filet */
.dd-nav__brand-label {
	position: relative;
	display: block;
	padding-bottom: 13px;
	font-family: var(--dd-serif);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	background: linear-gradient(180deg, #fff7e6 0%, #ecd6a6 52%, #c79f57 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
	transition:
		font-size 0.45s ease,
		letter-spacing 0.45s ease,
		padding 0.45s ease,
		filter 0.45s ease;
}

/* --- Filet doré décoratif sous le nom (mode hero uniquement) */
.dd-nav__brand-label::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 66%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
	transition: opacity 0.35s ease;
}

/* --- Médaille : cercle, fine tranche en or poli */
.dd-nav__frame {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--dd-medal-size);
	height: var(--dd-medal-size);
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.05) 0deg 2deg, rgba(255, 255, 255, 0.07) 2deg 4deg),
		conic-gradient(from 210deg, #8f6f38 0deg, #e8d4a8 46deg, #fff7e6 74deg, #c79f57 120deg, #8f6f38 168deg, #f1ddb2 214deg, #c79f57 256deg, #fff7e6 304deg, #8f6f38 360deg);
	background-blend-mode: overlay, normal;
	box-shadow:
		0 20px 42px -20px rgba(10, 7, 3, 0.68),
		0 6px 16px -8px rgba(10, 7, 3, 0.42),
		0 1px 0 rgba(255, 255, 255, 0.45) inset,
		0 -2px 5px rgba(0, 0, 0, 0.26) inset;
	transition:
		width 0.45s ease,
		height 0.45s ease,
		box-shadow 0.5s ease,
		transform 0.55s ease;
}

/* --- Fin liseré gravé en limite de la tranche */
.dd-nav__frame::before {
	content: '';
	position: absolute;
	inset: 4.5%;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(255, 247, 230, 0.45),
		0 2px 5px rgba(0, 0, 0, 0.32) inset;
	pointer-events: none;
	z-index: 3;
}

/* --- Reflet qui balaie la médaille */
.dd-nav__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
	background-size: 280% 280%;
	background-position: 130% 0;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 3;
	animation: dd-medal-sheen 3s ease-in-out infinite;
}

/* --- Médaillon central : blanc pur uniforme (fond du logo identique → homogène) */
.dd-nav__frame-mat {
	position: relative;
	display: grid;
	place-items: center;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	box-shadow:
		0 0 0 1px var(--dd-primary-color),
		0 0 0 2px rgba(255, 247, 230, 0.6);
	z-index: 1;
	transition:
		width 0.45s ease,
		height 0.45s ease;
}

/* --- Finition : fin filet doré intérieur (ne teinte pas le champ) */
.dd-nav__frame-mat::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 79, 0.16);
	pointer-events: none;
	z-index: 2;
}

/* --- Emblème carré centré, son fond blanc se fond dans le médaillon */
.dd-nav__logo {
	position: relative;
	display: block;
	width: 95%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	max-width: none;
	z-index: 1;
}

/* --- Survol : la médaille se soulève, s'illumine et s'incline */
.dd-nav__brand:hover .dd-nav__frame {
	transform: translateY(-2px) rotateX(8deg);
	box-shadow:
		0 36px 64px -18px rgba(10, 7, 3, 0.85),
		0 11px 26px -6px rgba(10, 7, 3, 0.6),
		0 0 26px rgba(216, 185, 133, 0.42),
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 -3px 7px rgba(0, 0, 0, 0.38) inset;
}

.dd-nav__brand:hover .dd-nav__frame::after {
	animation-duration: 1.6s;
}

/* --- Version compacte au scroll : barre fine, médaille à gauche, menu à droite */
.dd-header.is-scrolled .dd-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: clamp(14px, 2vw, 28px);
	min-height: var(--dd-nav-bar-h-scrolled);
	padding: 0 calc(var(--dd-header-action-w) + 20px) 0 calc(var(--dd-medal-size-scrolled) + var(--dd-brand-scrolled-gap) + var(--dd-brand-label-width) + 12px);
}

.dd-header.is-scrolled .dd-nav__group {
	padding-top: 0;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.dd-header.is-scrolled .dd-nav__group--left {
	justify-content: flex-start;
}

.dd-header.is-scrolled .dd-nav__group--right {
	justify-content: flex-start;
}

.dd-header.is-scrolled .dd-nav__brand {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 60;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--dd-brand-scrolled-gap);
	transform: translateY(-50%);
	transition: transform 0.45s ease;
}

/* Le nom passe à côté de la médaille, plus petit, en crème lisible sur la barre */
.dd-header.is-scrolled .dd-nav__brand-label {
	display: block;
	padding-bottom: 8px;
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--dd-color-text);
	-webkit-text-fill-color: var(--dd-color-text);
	filter: none;
}

/* On garde le même filet doré sous le nom, version compacte */
.dd-header.is-scrolled .dd-nav__brand-label::after {
	opacity: 1;
	width: 60%;
}

.dd-header.is-scrolled .dd-nav__frame {
	flex-shrink: 0;
	width: var(--dd-medal-size-scrolled);
	height: var(--dd-medal-size-scrolled);
	box-shadow:
		0 8px 22px -10px rgba(10, 7, 3, 0.68),
		0 1px 0 rgba(255, 255, 255, 0.4) inset,
		0 -1px 3px rgba(0, 0, 0, 0.22) inset;
}

/* La médaille reste nette : pas d'inclinaison 3D au survol */
.dd-header.is-scrolled .dd-nav__brand:hover {
	transform: translateY(calc(-50% - 2px));
}

.dd-header.is-scrolled .dd-nav__brand:hover .dd-nav__frame {
	transform: none;
}

/* --- Actions header (langue + contact) */
.dd-header__actions {
	position: absolute;
	top: 18px;
	right: clamp(20px, 5vw, 64px);
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: var(--dd-header-action-w);
	transition: transform 0.35s ease;
}

/* --- Sélecteur de langue */
.dd-lang-switch {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	min-width: var(--dd-lang-switch-min-w);
	flex-shrink: 0;
	padding: 4px 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	border: 1px solid var(--dd-color-border);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
}

.dd-lang-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 40px;
	height: 34px;
	border-radius: 999px;
	opacity: 0.62;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.dd-lang-switch__btn:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.dd-lang-switch__btn.is-active {
	opacity: 1;
	box-shadow:
		0 0 0 1px var(--dd-color-border-strong),
		0 0 0 2px color-mix(in srgb, var(--dd-primary-color) 35%, transparent),
		0 4px 14px var(--dd-color-primary-glow);
}

.dd-lang-switch__flag {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dd-header__contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding: 8px 12px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--dd-color-text);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	border: 1px solid var(--dd-color-border);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	opacity: 0.92;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.dd-header__contact-btn:hover {
	opacity: 1;
	transform: translateY(-1px);
	border-color: var(--dd-color-border-strong);
	box-shadow:
		0 0 0 1px var(--dd-color-border-strong),
		0 0 0 2px color-mix(in srgb, var(--dd-primary-color) 22%, transparent),
		0 8px 24px rgba(0, 0, 0, 0.32);
}

/* Bouton Contact masqué (header + menu mobile) */
.dd-header__contact-btn,
.dd-nav__mobile-link--cta {
	display: none !important;
}

/* Au scroll : actions sur une seule ligne, centrées dans la barre fine */
.dd-header.is-scrolled .dd-header__actions {
	top: 50%;
	transform: translateY(-50%) scale(0.96);
	flex-direction: row;
	align-items: center;
	width: auto;
	gap: 8px;
}

.dd-header.is-scrolled .dd-lang-switch {
	width: var(--dd-lang-switch-min-w);
	min-width: var(--dd-lang-switch-min-w);
}

.dd-header.is-scrolled .dd-header__contact-btn {
	width: auto;
}

/* --- Burger (mobile) */
.dd-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.dd-nav__burger span {
	display: block;
	width: 26px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--dd-color-text);
	transition:
		transform 0.35s ease,
		opacity 0.35s ease;
}

.dd-nav__burger.is-open span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.dd-nav__burger.is-open span:nth-child(2) {
	opacity: 0;
}
.dd-nav__burger.is-open span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Menu mobile déroulant */
.dd-nav__mobile {
	display: none;
	flex-direction: column;
	gap: 4px;
	margin-top: 18px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 0.45s ease,
		opacity 0.35s ease;
}

.dd-nav__mobile.is-open {
	max-height: 420px;
	opacity: 1;
}

.dd-nav__mobile-link {
	padding: 12px 4px;
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--dd-color-border);
}

/* ============================================================== Hero / bannière */
.dd-hero {
	position: relative;
	height: 280vh; /* hauteur de défilement pour scruber la vidéo */
}

.dd-hero__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.dd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--dd-bg-color-deep);
	/* Couche GPU dédiée : composition fluide avec le voile + le texte pendant le scrubbing */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}

/* --- Voile dégradé pour la lisibilité */
.dd-hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 35%, transparent 30%, var(--dd-color-overlay) 100%),
		linear-gradient(180deg, var(--dd-color-overlay-top) 0%, transparent 28%, transparent 65%, var(--dd-color-overlay-strong) 100%);
}

/* --- Contenu éditorial */
.dd-hero__content {
	position: absolute;
	left: 50%;
	top: 56%;
	transform: translate(-50%, -50%);
	width: min(92vw, 820px);
	text-align: center;
	z-index: 2;
}

.dd-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-hero__title {
	margin: 0;
	font-family: var(--dd-serif);
	font-weight: 500;
	font-size: clamp(42px, 8vw, 104px);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
}

.dd-hero__subtitle {
	margin: 22px auto 0;
	max-width: 560px;
	font-size: clamp(15px, 1.6vw, 19px);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--dd-color-text-muted);
}

/* --- Indicateur de défilement */
.dd-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 38px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 2;
	transition: opacity 0.4s ease;
}

.dd-hero__scroll.is-hidden {
	opacity: 0;
}

.dd-hero__scroll-label {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

.dd-hero__scroll-line {
	width: 1px;
	height: 54px;
	background: linear-gradient(180deg, var(--dd-primary-color-light), transparent);
	animation: dd-scroll-pulse 2.2s ease-in-out infinite;
	transform-origin: top;
}

@keyframes dd-scroll-pulse {
	0%,
	100% {
		transform: scaleY(0.4);
		opacity: 0.4;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* ============================================================== Responsive */
/* --- Desktop compact (juste au-dessus du burger) : la médaille rétrécit et les liens se
   resserrent pour garder le menu sur une seule ligne, sans qu'il passe sous le bloc langue.
   En dessous de 1200px la place manque pour la nav horizontale → bascule sur le burger. */
@media (max-width: 1280px) {
	:root {
		--dd-medal-size: clamp(10.5rem, min(16vw, 18vmin), 14.5rem);
	}

	.dd-nav {
		gap: clamp(8px, 1.6vw, 24px);
	}
	.dd-nav__group {
		gap: clamp(7px, 1.1vw, 16px);
	}
	.dd-nav__link {
		font-size: 12px;
		letter-spacing: 0.09em;
	}
}

/* --- Tablette & mobile : barre de contrôles épurée + burger, médaille centrée juste dessous.
   Seuil relevé à 1200px : en dessous, la nav horizontale (6 liens + médaille + bloc langue/contact)
   ne tient plus sur une ligne et le menu finissait par passer sous les drapeaux. */
@media (max-width: 1200px) {
	:root {
		--dd-medal-size: clamp(8.25rem, min(38vw, 42vmin), 10.5rem);
		--dd-medal-size-scrolled: clamp(2.75rem, 11vw, 3rem);
		--dd-brand-scrolled-gap: 10px;
		--dd-ctrl-inset: clamp(16px, 5vw, 28px);
		--dd-burger-w: 40px;
		/* Hauteur de la barre de contrôles — identique en hero et au scroll */
		--dd-bar-h: 72px;
	}

	/* Médaille centrée ~8px sous la barre.
	   Le header a déjà 16px de padding-top → nav = barre + 8 − 16 = barre − 8 */
	.dd-nav {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0;
		padding-top: calc(var(--dd-bar-h) - 8px);
	}

	.dd-nav__group {
		display: none;
	}

	.dd-nav__brand {
		grid-column: 1;
	}

	/* Conteneur d'actions transparent : chaque contrôle est positionné séparément */
	.dd-header__actions {
		display: contents;
	}

	/* Drapeaux : centrés verticalement dans la barre, à gauche (header uniquement) */
	.dd-header .dd-lang-switch {
		position: absolute;
		top: calc(var(--dd-bar-h) / 2);
		left: var(--dd-ctrl-inset);
		z-index: 60;
		width: auto;
		min-width: 0;
		gap: 2px;
		padding: 4px;
		transform: translateY(-50%);
	}

	/* Contact : centré dans la barre, à droite, juste à gauche du burger */
	.dd-header__contact-btn {
		position: absolute;
		top: calc(var(--dd-bar-h) / 2);
		right: calc(var(--dd-ctrl-inset) + var(--dd-burger-w) + 12px);
		z-index: 60;
		width: auto;
		min-height: 36px;
		padding: 9px 15px;
		font-size: 11px;
		letter-spacing: 0.12em;
		transform: translateY(-50%);
	}

	/* Burger : centré dans la barre, coin droit */
	.dd-nav__burger {
		display: flex;
		position: absolute;
		top: calc(var(--dd-bar-h) / 2);
		right: var(--dd-ctrl-inset);
		margin: 0;
		z-index: 60;
		transform: translateY(-50%);
	}

	/* Menu : panneau pleine largeur ancré juste sous la barre (même position hero/scroll) */
	.dd-nav__mobile {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: var(--dd-bar-h);
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		padding: 6px clamp(20px, 5vw, 28px) 18px;
		gap: 0;
		border-radius: 0 0 22px 22px;
		background: color-mix(in srgb, var(--dd-bg-color) 92%, transparent);
		border-top: 1px solid var(--dd-color-border);
		box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
		backdrop-filter: blur(18px);
		transform: translateY(-14px);
		pointer-events: none;
		z-index: 55;
		transition:
			max-height 0.45s ease,
			opacity 0.3s ease,
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.dd-nav__mobile.is-open {
		max-height: min(82vh, 560px);
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Overlay plein écran derrière le menu — hors header (position fixed) pour un flou
	   uniforme sur tout le viewport, même en scrollant, et non imbriqué dans le backdrop-filter du header */
	.dd-nav__overlay {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: color-mix(in srgb, var(--dd-bg-color) 52%, transparent);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}

	.dd-nav__overlay.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Contact : bouton doré pleine largeur en bas du menu */
	.dd-nav__mobile-link--cta {
		margin-top: 12px;
		padding: 14px 16px;
		text-align: center;
		font-weight: 500;
		color: var(--dd-bg-color-deep);
		border-bottom: 0;
		border-radius: 999px;
		background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
		box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8);
	}

	/* Barre scrollée à la même hauteur qu'en hero : on neutralise le padding du header
	   pour que sa hauteur totale soit exactement --dd-bar-h (= hauteur de la nav) */
	.dd-header.is-scrolled {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* État compact au scroll : médaille + nom à gauche, drapeaux + burger à droite */
	/* position: static → burger et marque s'alignent sur les bords du header (comme les drapeaux et le menu) */
	.dd-header.is-scrolled .dd-nav {
		position: static;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0;
		min-height: var(--dd-bar-h);
	}

	.dd-header.is-scrolled .dd-nav__brand {
		position: absolute;
		left: var(--dd-ctrl-inset);
		top: 50%;
		flex-direction: row;
		gap: 12px;
		transform: translateY(-50%);
	}

	/* Nom « Domaine de Duillier » à côté de la médaille */
	.dd-header.is-scrolled .dd-nav__brand-label {
		display: block;
		padding-bottom: 0;
		font-size: clamp(14px, 3.8vw, 17px);
		white-space: nowrap;
	}

	.dd-header.is-scrolled .dd-nav__brand-label::after {
		opacity: 0;
	}

	.dd-header.is-scrolled .dd-lang-switch {
		top: 50%;
		left: auto;
		right: calc(var(--dd-ctrl-inset) + var(--dd-burger-w) + 12px);
		width: auto;
		transform: translateY(-50%);
	}

	.dd-header.is-scrolled .dd-lang-switch__btn {
		min-width: 32px;
		height: 28px;
	}

	.dd-header.is-scrolled .dd-lang-switch__flag {
		width: 17px;
		height: 17px;
	}

	.dd-header.is-scrolled .dd-header__contact-btn {
		display: none;
	}

	/* Burger : reste centré dans la barre (héritage de la règle de base) ; rien à recadrer */

	/* Menu identique au hero : même top (--dd-bar-h) — pas d'override nécessaire */

	/* La hauteur du héro (100vh statique vs 280vh scrubé) est pilotée par le bloc média statique
	   (@media max-width:1024 / pointer:coarse) : pas d'override ici, sinon on casserait le scrub
	   sur les portables non tactiles entre 1025 et 1200px. */
}

/* --- Très petits écrans : barre compacte sans drapeaux pour laisser respirer le nom */
@media (max-width: 349px) {
	.dd-header.is-scrolled .dd-lang-switch {
		display: none;
	}
}

/* ============================================================== Animation médaille */
@keyframes dd-medal-sheen {
	0% {
		background-position: 130% 0;
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	45% {
		background-position: -45% 0;
		opacity: 0;
	}
	100% {
		background-position: -45% 0;
		opacity: 0;
	}
}

/* ============================================================== Présentation 1 — ouverture (hall d'entrée) */
.dd-presentation-1 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 96px);
	background: var(--dd-bg-color);
}

/* Image plein cadre, ghost doré désaturé — vignette douce sur tous les bords */
.dd-presentation-1::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../../img/photos/interieur/53.lg.webp') center 30% / cover no-repeat;
	opacity: 0.32;
	filter: saturate(0.4) brightness(0.52) contrast(1.05);
	pointer-events: none;
	z-index: -2;
	-webkit-mask-image: radial-gradient(135% 120% at 50% 24%, #000 30%, rgba(0, 0, 0, 0.55) 60%, transparent 88%);
	mask-image: radial-gradient(135% 120% at 50% 24%, #000 30%, rgba(0, 0, 0, 0.55) 60%, transparent 88%);
}

/* Voile marron : laisse deviner l'image au centre-haut, se referme vers le bas */
.dd-presentation-1::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(110% 78% at 50% 14%, color-mix(in srgb, var(--dd-primary-color) 10%, transparent), transparent 60%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--dd-bg-color) 52%, transparent) 0%,
			color-mix(in srgb, var(--dd-bg-color) 66%, transparent) 48%,
			var(--dd-bg-color) 100%);
	pointer-events: none;
	z-index: -1;
}

.dd-presentation-1__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}

.dd-presentation-1 .dd-presentation__facts {
	margin-bottom: 0;
	background: color-mix(in srgb, var(--dd-bg-color) 60%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ============================================================== Présentation 2 — vidéo scrubée + suite éditoriale */
.dd-presentation-2 {
	position: relative;
	/* isolation : crée un contexte d'empilement pour que la vidéo en z-index:-1
	   se peigne AU-DESSUS du fond opaque de la section (sinon elle reste invisible) */
	isolation: isolate;
	padding: 0 0 clamp(200px, 24vw, 360px);
	/* clip (et non hidden) : on rogne le plein-cadre sans créer de conteneur de
	   défilement, sinon la vidéo de fond en position: sticky ne s'accrocherait plus au viewport */
	overflow: clip;
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 6%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color-deep) 0%, var(--dd-bg-color) 18%, var(--dd-bg-color) 100%);
	/* Variables d'éclairage posées en JS sur la SECTION : partagées par la vidéo de fond
	   ET par le titre final (couche sticky) — un seul pilote pour toute la mise en lumière */
	--dd-p: 0;       /* progression brute lissée [0→1] */
	--dd-light: 0;   /* courbe d'éclairage ease-in [0→1] (pilotée en JS) */
}

.dd-presentation-2__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px) 0;
}

/* --- Vidéo de fond pilotée par le scroll */
.dd-presentation-2__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.dd-presentation-2__media-sticky {
	position: sticky;
	top: 0;
	width: 100vw;
	height: 100vh;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: var(--dd-bg-color-deep);
}

.dd-presentation-2__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Aucun filtre par image : un filter: brightness() animé sur une vidéo scrubée force le
	   navigateur à re-rastériser le calque à CHAQUE image (décodage 1080p ~12-14 ms + passe filtre
	   = budget 60 fps dépassé). On le retire : la vidéo s'affiche en pleine définition/lumière
	   native (plus net) et le scrub gagne sa marge de fluidité. La révélation sombre→lumière est
	   entièrement déléguée au voile ci-dessous (simple opacité compositée → quasi gratuit). */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}

.dd-presentation-2__media-veil {
	position: absolute;
	inset: 0;
	/* Voile = seule source d'assombrissement (pas de filter vidéo → perf 60 fps).
	   Phase texte (--dd-light ≈ 0) : fond très sombre pour lire confortablement les blocs éditoriaux.
	   Piste finale sans texte : le voile s'efface jusqu'à la pleine lumière (--dd-light → 1). */
	background:
		radial-gradient(135% 95% at 50% 35%, transparent 18%, color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 100%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--dd-bg-color) 98%, transparent) 0%,
			color-mix(in srgb, var(--dd-bg-color) 82%, transparent) 18%,
			color-mix(in srgb, var(--dd-bg-color) 76%, transparent) 50%,
			color-mix(in srgb, var(--dd-bg-color) 80%, transparent) 82%,
			color-mix(in srgb, var(--dd-bg-color) 98%, transparent) 100%);
	opacity: calc(0.97 - 0.97 * var(--dd-light));
}

/* Piste de scroll basse : la vidéo reste plein écran pendant qu'on atteint la pleine lumière */
.dd-presentation-2__runway {
	height: clamp(110vh, 150vh, 190vh);
	pointer-events: none;
}

/* --- Titre final façon héro : couche pleine section sans flux (absolute), titre sticky centré viewport */
.dd-presentation-2__headline-layer,
.dd-tour__headline-layer {
	position: absolute;
	inset: 0;
	z-index: 0; /* au-dessus de la vidéo (z:-1), sous le contenu éditorial (z:1) */
	pointer-events: none;
}

.dd-presentation-2__headline,
.dd-tour__headline {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: 0 clamp(20px, 5vw, 64px);
	text-align: center;
	/* Apparition pendant la montée en lumière : démarre vers p≈0.56, plein opacity vers p≈0.83.
	   opacity hors [0,1] est clampée par le navigateur */
	opacity: calc(var(--dd-light) * 2.65 - 0.26);
	transform: translateY(calc((1 - var(--dd-light)) * 26px));
	will-change: opacity, transform;
}

/* Halo sombre doux derrière le texte : lisibilité assurée sans masquer le paysage en pleine lumière */
.dd-presentation-2__headline::before,
.dd-tour__headline::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(112vw, 1000px);
	height: min(66vh, 540px);
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center,
		color-mix(in srgb, var(--dd-bg-color) 52%, transparent) 0%,
		color-mix(in srgb, var(--dd-bg-color) 20%, transparent) 44%,
		transparent 72%);
	z-index: -1;
	pointer-events: none;
}

.dd-presentation-2__eyebrow,
.dd-tour__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-presentation-2__title,
.dd-tour__title {
	margin: 0;
	font-family: var(--dd-serif);
	font-weight: 500;
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 1.03;
	letter-spacing: 0.01em;
	text-shadow:
		0 2px 12px rgba(0, 0, 0, 0.55),
		0 6px 44px rgba(0, 0, 0, 0.5);
}

.dd-presentation-2__lead,
.dd-tour__lead {
	margin: 22px auto 0;
	max-width: 560px;
	font-size: clamp(15px, 1.6vw, 19px);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--dd-color-text-muted);
	text-shadow:
		0 1px 6px rgba(0, 0, 0, 0.6),
		0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Blocs de texte sans fond propre : halo sombre multi-couches pour rester parfaitement
   lisibles même quand la vidéo s'éclaire derrière (jusqu'au bloc de clôture) */
.dd-presentation-2 .dd-presentation__split-content,
.dd-presentation-2 .dd-presentation__closing-text,
.dd-presentation-2 .dd-presentation__highlights {
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--dd-bg-color) 88%, transparent),
		0 2px 14px color-mix(in srgb, var(--dd-bg-color) 80%, transparent),
		0 0 34px color-mix(in srgb, var(--dd-bg-color) 70%, transparent);
}

/* ============================================================== Présentation — blocs éditoriaux partagés */

/* --- En-tête éditorial */
.dd-presentation__intro {
	max-width: 760px;
	margin: 0 auto clamp(48px, 7vw, 88px);
	text-align: center;
}

.dd-presentation__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-presentation__title {
	position: relative;
	display: inline-block;
	margin: 0;
	font-family: var(--dd-serif);
	font-weight: 500;
	font-size: clamp(34px, 5.5vw, 64px);
	line-height: 1.08;
	letter-spacing: 0.01em;
}

/* --- Blason fleur de lys en lévitation, à droite du titre */
.dd-presentation__crest {
	position: absolute;
	left: calc(100% + clamp(10px, 1.8vw, 26px));
	top: 50%;
	width: clamp(44px, 5.4vw, 76px);
	aspect-ratio: 1;
	transform: translateY(-56%);
	pointer-events: none;
}

.dd-presentation__crest-orb {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	animation: dd-crest-levitate 6s ease-in-out infinite;
	will-change: transform;
}

/* Halo doré diffus qui respire */
.dd-presentation__crest-orb::before {
	content: '';
	position: absolute;
	inset: -40%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--dd-primary-color) 60%, transparent) 0%, transparent 66%);
	filter: blur(7px);
	opacity: 0.5;
	z-index: 0;
	animation: dd-crest-glow 6s ease-in-out infinite;
}

/* Fin anneau gravé en or */
.dd-presentation__crest-orb::after {
	content: '';
	position: absolute;
	inset: -16%;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 32%, transparent);
	box-shadow:
		inset 0 0 14px color-mix(in srgb, var(--dd-primary-color) 24%, transparent),
		0 0 0 1px color-mix(in srgb, var(--dd-bg-color) 30%, transparent);
	z-index: 0;
}

.dd-presentation__crest-svg {
	position: relative;
	z-index: 1;
	width: 74%;
	height: 74%;
	filter:
		drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5))
		drop-shadow(0 2px 7px color-mix(in srgb, var(--dd-primary-color) 50%, transparent));
}

/* Lévitation franche et organique : montée ample, dérive latérale, balancement et respiration */
@keyframes dd-crest-levitate {
	0%   { transform: translate3d(0, 0, 0) rotate(-4deg) scale(0.98); }
	25%  { transform: translate3d(-4px, -8px, 0) rotate(-1deg) scale(1); }
	50%  { transform: translate3d(0, -14px, 0) rotate(4deg) scale(1.03); }
	75%  { transform: translate3d(4px, -8px, 0) rotate(1deg) scale(1); }
	100% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(0.98); }
}

@keyframes dd-crest-glow {
	0%, 100% { opacity: 0.34; transform: scale(0.92); }
	50% { opacity: 0.7; transform: scale(1.12); }
}

.dd-presentation__lead {
	margin: 20px auto 0;
	max-width: 560px;
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 300;
	line-height: 1.65;
	color: var(--dd-color-text-muted);
}

/* --- Bloc héro image + texte */
.dd-presentation__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: stretch;
	margin-bottom: clamp(48px, 7vw, 80px);
}

.dd-presentation__figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	box-shadow:
		0 28px 60px -28px rgba(0, 0, 0, 0.75),
		0 0 0 1px var(--dd-color-border);
}

/* --- Emplacement réservé : le ratio est posé AVANT le chargement lazy (zéro reflow au scroll) */
.dd-presentation__figure-slot {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--dd-ar, 16 / 10);
	contain: layout paint style;
	overflow: hidden;
	background: var(--dd-bg-color-deep);
}

.dd-presentation__figure--portrait {
	--dd-ar: 4 / 5;
}

.dd-presentation__figure::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--dd-bg-color) 35%, transparent) 100%);
	pointer-events: none;
}

.dd-presentation__figure-slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.dd-presentation__figure-slot.is-loaded img {
	opacity: 1;
}

/* Hors flux desktop : la figure principale épouse la hauteur du bloc de texte voisin */
.dd-presentation__hero .dd-presentation__figure--main,
.dd-presentation__split .dd-presentation__figure {
	align-self: stretch;
	min-height: 240px;
}

.dd-presentation__hero .dd-presentation__figure--main .dd-presentation__figure-slot,
.dd-presentation__split .dd-presentation__figure-slot {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

.dd-presentation__caption {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 2;
	padding: 8px 14px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dd-color-text);
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	border: 1px solid var(--dd-color-border);
	backdrop-filter: blur(8px);
}

.dd-presentation__hero-text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: clamp(16px, 1.7vw, 19px);
	font-weight: 300;
	line-height: 1.75;
	color: var(--dd-color-text-muted);
}

.dd-presentation__hero-text p {
	margin: 0;
}

/* --- Bandeau chiffres clés */
.dd-presentation__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 24px);
	margin-bottom: clamp(56px, 8vw, 96px);
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background: color-mix(in srgb, var(--dd-bg-color) 88%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dd-presentation__fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: clamp(12px, 2vw, 20px) 8px;
	text-align: center;
	border-right: 1px solid var(--dd-color-border);
}

.dd-presentation__fact:last-child {
	border-right: 0;
}

.dd-presentation__fact-value {
	font-family: var(--dd-serif);
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--dd-color-accent);
}

.dd-presentation__fact-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

/* --- Split image / texte */
.dd-presentation__split {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: stretch;
	margin-bottom: clamp(56px, 8vw, 96px);
}

/* L'image du split épouse automatiquement la hauteur du bloc de texte (desktop) */
.dd-presentation__split .dd-presentation__figure {
	align-self: stretch;
	min-height: 240px;
}

.dd-presentation__split-content p,
.dd-presentation__card p,
.dd-presentation__closing-text p {
	margin: 0 0 16px;
	font-size: clamp(15px, 1.5vw, 17px);
	font-weight: 300;
	line-height: 1.75;
	color: var(--dd-color-text-muted);
}

.dd-presentation__split-content p:last-child,
.dd-presentation__card p:last-child,
.dd-presentation__closing-text p:last-child {
	margin-bottom: 0;
}

.dd-presentation__kicker {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-presentation__subtitle {
	margin: 0 0 18px;
	font-family: var(--dd-serif);
	font-weight: 500;
	font-size: clamp(26px, 3.5vw, 38px);
	line-height: 1.15;
}

/* --- Citation patrimoniale */
.dd-presentation__heritage {
	position: relative;
	margin: 0 0 clamp(56px, 8vw, 96px);
	padding: clamp(32px, 5vw, 52px) clamp(28px, 5vw, 64px);
	text-align: center;
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--dd-primary-color) 8%, transparent), transparent 55%),
		color-mix(in srgb, var(--dd-bg-color) 90%, transparent);
}

.dd-presentation__heritage::before {
	content: '«';
	position: absolute;
	top: 12px;
	left: clamp(16px, 3vw, 28px);
	font-family: var(--dd-serif);
	font-size: clamp(48px, 8vw, 72px);
	line-height: 1;
	color: color-mix(in srgb, var(--dd-primary-color) 35%, transparent);
}

.dd-presentation__heritage-text {
	margin: 0;
	font-family: var(--dd-serif);
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 400;
	font-style: italic;
	line-height: 1.55;
	color: var(--dd-color-text);
}

.dd-presentation__heritage-cite {
	display: block;
	margin-top: 18px;
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

/* --- Grille éditoriale */
.dd-presentation__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 40px);
	margin-bottom: clamp(56px, 8vw, 96px);
}

.dd-presentation__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background: color-mix(in srgb, var(--dd-bg-color) 86%, transparent);
}

/* --- Clôture + points forts */
.dd-presentation__closing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: start;
	padding-top: clamp(24px, 4vw, 40px);
	border-top: 1px solid var(--dd-color-border);
}

.dd-presentation__highlights-title {
	margin: 0 0 18px;
	font-family: var(--dd-serif);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 500;
}

.dd-presentation__highlights-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.dd-presentation__highlights-list li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--dd-color-text-muted);
}

.dd-presentation__highlights-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 1px;
	background: var(--dd-color-accent);
}

/* --- Révélation au scroll */
.dd-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.85s ease,
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Blocs avec image : pas de transform (évite un composite coûteux pendant le decode) */
.dd-reveal:has(.dd-presentation__figure) {
	transform: none;
}

.dd-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 900px) {
	.dd-presentation__hero,
	.dd-presentation__split,
	.dd-presentation__grid,
	.dd-presentation__closing {
		grid-template-columns: 1fr;
	}

	.dd-presentation__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Empilé : chaque figure reprend un emplacement à ratio fixe (plus de reflow au lazy-load) */
	.dd-presentation__hero .dd-presentation__figure--main,
	.dd-presentation__split .dd-presentation__figure {
		min-height: 0;
		height: auto;
	}

	.dd-presentation__hero .dd-presentation__figure--main .dd-presentation__figure-slot,
	.dd-presentation__split .dd-presentation__figure-slot {
		position: relative;
		inset: auto;
		height: auto;
		aspect-ratio: var(--dd-ar, 16 / 10);
	}

	.dd-presentation__split .dd-presentation__figure {
		order: -1;
	}

	.dd-presentation__fact {
		border-right: 0;
		border-bottom: 1px solid var(--dd-color-border);
	}

	.dd-presentation__fact:nth-child(odd) {
		border-right: 1px solid var(--dd-color-border);
	}

	.dd-presentation__fact:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.dd-presentation__crest {
		width: clamp(40px, 7vw, 58px);
		left: calc(100% + clamp(6px, 1.4vw, 16px));
	}
}

/* --- Légende du manoir : tient sur une seule ligne sur petit écran (typo + tracking réduits pour éviter le rognage) */
@media (max-width: 600px) {
	.dd-presentation__caption {
		left: 12px;
		bottom: 12px;
		padding: 6px 10px;
		font-size: clamp(8px, 2.4vw, 11px);
		letter-spacing: 0.08em;
	}
}

@media (max-width: 520px) {
	.dd-presentation__facts {
		grid-template-columns: 1fr;
	}

	.dd-presentation__fact,
	.dd-presentation__fact:nth-child(odd) {
		border-right: 0;
		border-bottom: 1px solid var(--dd-color-border);
	}

	.dd-presentation__fact:last-child {
		border-bottom: 0;
	}

	.dd-presentation__crest {
		display: none;
	}
}

/* ============================================================== Galerie — mur mosaïque + visionneuse */
.dd-gallery {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 64px) clamp(80px, 11vw, 150px);
	background:
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 7%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color-deep) 0%, var(--dd-bg-color) 16%, var(--dd-bg-color) 100%);
}

/* Filet doré décoratif en ouverture de section */
.dd-gallery::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(280px, 60vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-gallery__inner {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
}

.dd-gallery__intro {
	margin-bottom: clamp(26px, 4vw, 44px);
}

/* --- Barre de filtres */
.dd-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	margin-bottom: clamp(30px, 4vw, 52px);
}

.dd-gallery__filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
	transition:
		color 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.dd-gallery__filter:hover {
	color: var(--dd-color-text);
	transform: translateY(-1px);
	border-color: var(--dd-color-border-strong);
}

.dd-gallery__filter.is-active {
	color: var(--dd-bg-color-deep);
	border-color: transparent;
	background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.85);
}

.dd-gallery__filter-count {
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--dd-color-accent);
	opacity: 0.85;
}

.dd-gallery__filter.is-active .dd-gallery__filter-count {
	color: color-mix(in srgb, var(--dd-bg-color-deep) 70%, transparent);
	opacity: 1;
}

/* --- Mur justifié : chaque rangée remplit toute la largeur (style Flickr).
       Résultat : un rectangle parfait, bas parfaitement droit, zéro vide —
       y compris sur la dernière rangée qui s'étire pour combler le bord. */
.dd-gallery__grid {
	--dd-gal-h: clamp(155px, 16vw, 210px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 0.85vw, 14px);
}

/* --- Tuile = bouton plein cadre ; flex-grow étire chaque tuile jusqu'au bord */
.dd-gallery__item {
	position: relative;
	height: var(--dd-gal-h);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: min(calc(var(--dd-gal-h) * 1.4), 47%);
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background: var(--dd-bg-color-deep);
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition:
		box-shadow 0.45s ease,
		border-color 0.45s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-gallery__item.is-hidden {
	display: none;
}

/* --- Vues extérieures du manoir (placées en tête) : photos quasi carrées → tuile
       carrée pour voir toute la hauteur de la bâtisse (image complète, pas un
       bandeau rogné). flex-basis ~47% = 2 par rangée → elles occupent leur propre
       rangée et la remplissent jusqu'aux bords (pas de mélange avec les intérieurs). */
.dd-gallery__item[data-dd-category="exterieur"] {
	flex-basis: 47%;
	height: auto;
	aspect-ratio: 1 / 1;
	align-self: stretch;
}

.dd-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.96) brightness(0.94);
	transform: scale(1.001);
	will-change: transform;
	transition:
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.5s ease;
}

/* --- Voile dégradé qui se révèle au survol */
.dd-gallery__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background:
		linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--dd-bg-color-deep) 72%, transparent) 100%),
		radial-gradient(120% 100% at 50% 50%, transparent 55%, color-mix(in srgb, var(--dd-bg-color-deep) 40%, transparent) 100%);
	transition: opacity 0.45s ease;
}

/* --- Pastille « + » dorée au centre */
.dd-gallery__plus {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--dd-color-text);
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 42%, transparent);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Survol (uniquement sur appareils à pointeur fin) */
@media (hover: hover) {
	.dd-gallery__item:hover {
		border-color: color-mix(in srgb, var(--dd-primary-color-light) 38%, transparent);
		box-shadow:
			0 30px 60px -28px rgba(0, 0, 0, 0.9),
			0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 26%, transparent);
	}
	.dd-gallery__item:hover .dd-gallery__img {
		transform: scale(1.07);
		filter: saturate(1.04) brightness(1);
	}
	.dd-gallery__item:hover .dd-gallery__shade {
		opacity: 1;
	}
	.dd-gallery__item:hover .dd-gallery__plus {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.dd-gallery__item:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow:
		0 0 0 2px var(--dd-bg-color),
		0 0 0 4px color-mix(in srgb, var(--dd-primary-color) 55%, transparent);
}

.dd-gallery__item:focus-visible .dd-gallery__plus {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ============================================================== Visionneuse (lightbox) */
.dd-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

.dd-gallery__lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		visibility 0s;
}

.dd-gallery__lb-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.dd-gallery__lb-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2vw, 22px);
	margin: 0;
	max-width: 100%;
}

.dd-gallery__lb-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(94vw, 1500px);
	max-height: 82vh;
	object-fit: contain;
	border-radius: 2px;
	background: var(--dd-bg-color-deep);
	box-shadow:
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px var(--dd-color-border);
	opacity: 0;
	transform: scale(0.965);
	transition:
		opacity 0.45s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-gallery__lightbox.is-open .dd-gallery__lb-img {
	opacity: 1;
	transform: scale(1);
}

.dd-gallery__lb-img.is-swapping {
	opacity: 0;
	transform: scale(0.99);
}

.dd-gallery__lb-caption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
}

.dd-gallery__lb-cat {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-gallery__lb-counter {
	font-family: var(--dd-serif);
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--dd-color-text-soft);
}

/* --- Boutons de la visionneuse */
.dd-gallery__lb-btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--dd-color-text);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color) 58%, transparent);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	transition:
		color 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease,
		transform 0.25s ease;
}

.dd-gallery__lb-btn:hover {
	color: var(--dd-color-accent);
	border-color: var(--dd-color-border-strong);
	background: color-mix(in srgb, var(--dd-bg-color) 78%, transparent);
	transform: scale(1.06);
}

.dd-gallery__lb-btn:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

.dd-gallery__lb-close {
	top: clamp(14px, 3vw, 30px);
	right: clamp(14px, 3vw, 30px);
}

.dd-gallery__lb-nav {
	top: 50%;
	transform: translateY(-50%);
}
.dd-gallery__lb-nav:hover {
	transform: translateY(-50%) scale(1.06);
}
.dd-gallery__lb-prev {
	left: clamp(10px, 3vw, 36px);
}
.dd-gallery__lb-next {
	right: clamp(10px, 3vw, 36px);
}

body.dd-lightbox-open {
	overflow: hidden;
}

/* --- Galerie responsive : le nombre de tuiles par rangée s'adapte tout seul
       (flex justifié) ; on n'ajuste que la hauteur de rangée par palier. */
@media (max-width: 760px) {
	.dd-gallery__grid {
		--dd-gal-h: clamp(128px, 33vw, 172px);
	}
	.dd-gallery__plus {
		width: 44px;
		height: 44px;
	}
	.dd-gallery__lb-nav {
		width: 46px;
		height: 46px;
	}
	.dd-gallery__lb-prev {
		left: 10px;
	}
	.dd-gallery__lb-next {
		right: 10px;
	}
}

@media (max-width: 420px) {
	.dd-gallery__filter {
		padding: 9px 16px;
		letter-spacing: 0.12em;
	}
}

/* ============================================================== Vidéo — scène de projection (film du domaine) */
.dd-video {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 11vw, 150px) clamp(20px, 5vw, 64px) clamp(88px, 12vw, 164px);
	background: var(--dd-bg-color);
}

/* Image plein cadre, ghost doré désaturé — visible en bas, fondu vers le haut (transition galerie) */
.dd-video::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../../img/photos/interieur/54.lg.webp') center 55% / cover no-repeat;
	opacity: 0.32;
	filter: saturate(0.4) brightness(0.52) contrast(1.05);
	pointer-events: none;
	z-index: -2;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 14%, rgba(0, 0, 0, 0.48) 38%, #000 58%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 14%, rgba(0, 0, 0, 0.48) 38%, #000 58%, #000 100%);
}

/* Voile marron : sombre en haut (jointure galerie), s'éclaircit vers le bas */
.dd-video::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(110% 78% at 50% 88%, color-mix(in srgb, var(--dd-primary-color) 10%, transparent), transparent 60%),
		linear-gradient(180deg,
			var(--dd-bg-color) 0%,
			color-mix(in srgb, var(--dd-bg-color) 88%, transparent) 22%,
			color-mix(in srgb, var(--dd-bg-color) 62%, transparent) 52%,
			color-mix(in srgb, var(--dd-bg-color) 42%, transparent) 100%);
	pointer-events: none;
	z-index: -1;
}

.dd-video__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.dd-video__intro {
	margin-bottom: clamp(40px, 6vw, 72px);
}

/* --- Scène : cadre doré façon tableau de château, médaillon en surplomb */
.dd-video__stage {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(10px, 1.4vw, 20px);
	border: 1px solid transparent;
	border-radius: 4px;
	/* Cadre doré dégradé (border-box) sur un passe-partout sombre (padding-box) */
	background:
		linear-gradient(var(--dd-bg-color-deep), var(--dd-bg-color-deep)) padding-box,
		linear-gradient(155deg, var(--dd-primary-color-lighter) 0%, var(--dd-primary-color) 42%, var(--dd-primary-color-dark) 100%) border-box;
	box-shadow:
		0 50px 110px -36px rgba(0, 0, 0, 0.92),
		0 0 0 1px color-mix(in srgb, var(--dd-bg-color-deep) 80%, transparent),
		0 0 70px -12px color-mix(in srgb, var(--dd-primary-color) 26%, transparent);
}

/* --- Médaillon blason en surplomb du cadre (fleur de lys dorée) */
.dd-video__crest {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: clamp(50px, 6vw, 78px);
	aspect-ratio: 1;
	transform: translate(-50%, -52%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--dd-bg-color) 86%, transparent), var(--dd-bg-color-deep) 78%);
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 40%, transparent);
	box-shadow:
		0 10px 26px -10px rgba(0, 0, 0, 0.85),
		inset 0 0 14px color-mix(in srgb, var(--dd-primary-color) 22%, transparent);
}

/* Halo doré diffus qui respire derrière le blason */
.dd-video__crest::before {
	content: '';
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--dd-primary-color) 55%, transparent) 0%, transparent 68%);
	filter: blur(8px);
	opacity: 0.5;
	z-index: -1;
	animation: dd-crest-glow 6s ease-in-out infinite;
}

.dd-video__crest-svg {
	width: 58%;
	height: 58%;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

/* --- Cadre intérieur : l'écran 16:9 */
.dd-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--dd-bg-color-deep);
	/* Fin filet doré intérieur (double encadrement) + profondeur */
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 26%, transparent),
		inset 0 0 50px rgba(0, 0, 0, 0.6);
}

/* --- Écran d'accueil cliquable : ouvre le film en grand (cinéma) */
.dd-video__poster {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
}

.dd-video__poster-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) brightness(0.82);
	transform: scale(1.02);
	/* Lent travelling avant (Ken Burns) sur l'image d'accueil */
	animation: dd-video-kenburns 22s ease-in-out infinite alternate;
}

.dd-video__poster-veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(72% 64% at 50% 46%, transparent 30%, color-mix(in srgb, var(--dd-bg-color-deep) 52%, transparent) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--dd-bg-color) 32%, transparent) 0%, transparent 34%, transparent 58%, color-mix(in srgb, var(--dd-bg-color-deep) 76%, transparent) 100%);
}

.dd-video__poster-cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 1.8vw, 22px);
}

/* --- Bouton lecture doré + halo qui se propage */
.dd-video__play {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(76px, 8.5vw, 112px);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	color: var(--dd-bg-color-deep);
	cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-lighter) 60%, transparent);
	border-radius: 50%;
	background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow:
		0 24px 50px -18px rgba(0, 0, 0, 0.9),
		0 0 0 1px color-mix(in srgb, var(--dd-bg-color-deep) 30%, transparent),
		0 0 40px -6px color-mix(in srgb, var(--dd-primary-color) 55%, transparent);
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s ease,
		box-shadow 0.4s ease;
}

.dd-video__play-icon {
	position: relative;
	z-index: 1;
	width: clamp(28px, 3vw, 38px);
	height: auto;
	margin-left: 6%; /* recentrage optique du triangle */
	filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--dd-bg-color-deep) 40%, transparent));
}

/* Halo « radar » qui se propage en continu */
.dd-video__play-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 60%, transparent);
	pointer-events: none;
	animation: dd-video-ping 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@media (hover: hover) {
	.dd-video__poster:hover .dd-video__play {
		transform: scale(1.07);
		background: linear-gradient(180deg, var(--dd-primary-color-lighter), var(--dd-primary-color-light));
		box-shadow:
			0 28px 60px -18px rgba(0, 0, 0, 0.95),
			0 0 0 1px color-mix(in srgb, var(--dd-bg-color-deep) 30%, transparent),
			0 0 56px -4px color-mix(in srgb, var(--dd-primary-color) 70%, transparent);
	}
	.dd-video__poster:hover .dd-video__poster-img {
		filter: saturate(1) brightness(0.9);
	}
}

.dd-video__poster:focus-visible {
	outline: none;
}

.dd-video__poster:focus-visible .dd-video__play {
	box-shadow:
		0 0 0 3px var(--dd-bg-color),
		0 0 0 6px color-mix(in srgb, var(--dd-primary-color) 60%, transparent);
}

.dd-video__hint {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dd-color-text);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* --- Coins ornementaux façon viseur (s'effacent à la lecture) */
.dd-video__corner {
	position: absolute;
	z-index: 3;
	width: clamp(24px, 3.2vw, 46px);
	height: clamp(24px, 3.2vw, 46px);
	pointer-events: none;
	border: 0 solid color-mix(in srgb, var(--dd-primary-color-light) 70%, transparent);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
	opacity: 0.9;
	transition: opacity 0.5s ease;
}

.dd-video__corner--tl {
	top: clamp(10px, 1.4vw, 18px);
	left: clamp(10px, 1.4vw, 18px);
	border-top-width: 1px;
	border-left-width: 1px;
}

.dd-video__corner--tr {
	top: clamp(10px, 1.4vw, 18px);
	right: clamp(10px, 1.4vw, 18px);
	border-top-width: 1px;
	border-right-width: 1px;
}

.dd-video__corner--bl {
	bottom: clamp(10px, 1.4vw, 18px);
	left: clamp(10px, 1.4vw, 18px);
	border-bottom-width: 1px;
	border-left-width: 1px;
}

.dd-video__corner--br {
	bottom: clamp(10px, 1.4vw, 18px);
	right: clamp(10px, 1.4vw, 18px);
	border-bottom-width: 1px;
	border-right-width: 1px;
}

/* --- Légende sous l'écran */
.dd-video__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: clamp(22px, 3vw, 36px) 0 0;
	padding: 0;
}

.dd-video__caption-rule {
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-video__caption-text {
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

@keyframes dd-video-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.1); }
}

@keyframes dd-video-ping {
	0%   { transform: scale(1); opacity: 0.7; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* --- Cinéma : lecture du film en grand écran (overlay façon visionneuse) */
.dd-video__cinema {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

.dd-video__cinema.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		visibility 0s;
}

.dd-video__cinema-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 90%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.dd-video__cinema-player {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	max-width: min(94vw, 1600px);
	max-height: 84vh;
	border-radius: 2px;
	background: #000;
	/* Fin filet doré + halo : on garde l'identité château jusque dans le lecteur */
	box-shadow:
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 38%, transparent),
		0 0 80px -16px color-mix(in srgb, var(--dd-primary-color) 30%, transparent);
	opacity: 0;
	transform: scale(0.965);
	transition:
		opacity 0.45s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-video__cinema.is-open .dd-video__cinema-player {
	opacity: 1;
	transform: scale(1);
}

/* --- Bouton fermeture du cinéma (même langage que la visionneuse galerie) */
.dd-video__cinema-close {
	position: absolute;
	top: clamp(14px, 3vw, 30px);
	right: clamp(14px, 3vw, 30px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--dd-color-text);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color) 58%, transparent);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	transition:
		color 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease,
		transform 0.25s ease;
}

.dd-video__cinema-close:hover {
	color: var(--dd-color-accent);
	border-color: var(--dd-color-border-strong);
	background: color-mix(in srgb, var(--dd-bg-color) 78%, transparent);
	transform: scale(1.06);
}

.dd-video__cinema-close:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

/* --- Vidéo responsive : on retire les coins ornementaux sur petit écran */
@media (max-width: 600px) {
	.dd-video__corner {
		display: none;
	}
}

/* ============================================================== Visite virtuelle — fond vidéo scrubé + Giraffe360 360° */
.dd-tour {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: 0 0 clamp(200px, 24vw, 360px);
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 6%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color-deep) 0%, var(--dd-bg-color) 18%, var(--dd-bg-color) 100%);
	--dd-p: 0;
	--dd-light: 0;
}

.dd-tour::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	width: min(280px, 60vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
	pointer-events: none;
}

/* --- Vidéo de fond pilotée par le scroll */
.dd-tour__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.dd-tour__media-sticky {
	position: sticky;
	top: 0;
	width: 100vw;
	height: 100vh;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: var(--dd-bg-color-deep);
}

.dd-tour__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Aucun filtre par image (cf. .dd-presentation-2__video) : décodage seul, pas de re-rastérisation
	   du calque à chaque frame → scrub plus fluide + image native plus nette. Révélation via le voile. */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}

.dd-tour__media-veil {
	position: absolute;
	inset: 0;
	/* Même logique que .dd-presentation-2__media-veil : sombre pendant le texte, révélation en fin de piste. */
	background:
		radial-gradient(135% 95% at 50% 35%, transparent 18%, color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 100%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--dd-bg-color) 98%, transparent) 0%,
			color-mix(in srgb, var(--dd-bg-color) 82%, transparent) 18%,
			color-mix(in srgb, var(--dd-bg-color) 76%, transparent) 50%,
			color-mix(in srgb, var(--dd-bg-color) 80%, transparent) 82%,
			color-mix(in srgb, var(--dd-bg-color) 98%, transparent) 100%);
	opacity: calc(0.97 - 0.97 * var(--dd-light));
}

.dd-tour__runway {
	height: clamp(110vh, 150vh, 190vh);
	pointer-events: none;
}

.dd-tour__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(80px, 11vw, 150px) clamp(20px, 5vw, 64px) 0;
}

/* Lisibilité du texte sur la vidéo sombre en entrée de section */
.dd-tour .dd-presentation__intro,
.dd-tour .dd-tour__switcher,
.dd-tour .dd-tour__caption-text {
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--dd-bg-color) 88%, transparent),
		0 2px 14px color-mix(in srgb, var(--dd-bg-color) 80%, transparent),
		0 0 34px color-mix(in srgb, var(--dd-bg-color) 70%, transparent);
}

.dd-tour__intro {
	margin-bottom: clamp(26px, 4vw, 44px);
}

/* --- Sélecteur bâtiment principal / annexes (même langage que la galerie) */
.dd-tour__switcher {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	margin-bottom: clamp(30px, 4vw, 52px);
}

.dd-tour__filter {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
	transition:
		color 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.dd-tour__filter:hover {
	color: var(--dd-color-text);
	transform: translateY(-1px);
	border-color: var(--dd-color-border-strong);
}

.dd-tour__filter.is-active {
	color: var(--dd-bg-color-deep);
	border-color: transparent;
	background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.85);
}

.dd-tour__filter:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

.dd-tour__panels {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.dd-tour__panel {
	display: none;
	width: 100%;
	max-width: 100%;
}

.dd-tour__panel.is-active {
	display: block;
}

.dd-tour__stage {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(10px, 1.4vw, 20px);
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 4px;
	background:
		linear-gradient(var(--dd-bg-color-deep), var(--dd-bg-color-deep)) padding-box,
		linear-gradient(155deg, var(--dd-primary-color-lighter) 0%, var(--dd-primary-color) 42%, var(--dd-primary-color-dark) 100%) border-box;
	box-shadow:
		0 50px 110px -36px rgba(0, 0, 0, 0.92),
		0 0 0 1px color-mix(in srgb, var(--dd-bg-color-deep) 80%, transparent),
		0 0 70px -12px color-mix(in srgb, var(--dd-primary-color) 22%, transparent);
}

.dd-tour__frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background:
		radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--dd-primary-color) 12%, transparent) 0%, transparent 62%),
		var(--dd-bg-color-deep);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 26%, transparent),
		inset 0 0 50px rgba(0, 0, 0, 0.6);
}

.dd-tour__frame::before {
	content: '360°';
	position: absolute;
	top: clamp(12px, 2vw, 18px);
	left: clamp(12px, 2vw, 18px);
	z-index: 1;
	padding: 6px 12px;
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 42%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 78%, transparent);
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.85);
}

.dd-tour__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--dd-bg-color-deep);
}

.dd-tour__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: clamp(22px, 3vw, 34px);
	text-align: center;
}

.dd-tour__caption-rule {
	display: block;
	width: min(120px, 28vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-tour__caption-text {
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

/* ============================================================== Plans — modèles 3D Giraffe360 + plans détaillés */
.dd-plans {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 64px) clamp(80px, 11vw, 150px);
	background:
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 6%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color) 0%, var(--dd-bg-color-deep) 12%, var(--dd-bg-color-deep) 100%);
}

.dd-plans::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(280px, 60vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-plans__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.dd-plans__intro {
	margin-bottom: clamp(26px, 4vw, 44px);
}

.dd-plans__switcher {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	margin-bottom: clamp(30px, 4vw, 52px);
}

.dd-plans__filter {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
	transition:
		color 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.dd-plans__filter:hover {
	color: var(--dd-color-text);
	transform: translateY(-1px);
	border-color: var(--dd-color-border-strong);
}

.dd-plans__filter.is-active {
	color: var(--dd-bg-color-deep);
	border-color: transparent;
	background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.85);
}

.dd-plans__filter:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

.dd-plans__viewer {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto clamp(48px, 6vw, 80px);
	padding: clamp(10px, 1.4vw, 20px);
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 4px;
	background:
		linear-gradient(var(--dd-bg-color-deep), var(--dd-bg-color-deep)) padding-box,
		linear-gradient(155deg, var(--dd-primary-color-lighter) 0%, var(--dd-primary-color) 42%, var(--dd-primary-color-dark) 100%) border-box;
	box-shadow:
		0 50px 110px -36px rgba(0, 0, 0, 0.92),
		0 0 0 1px color-mix(in srgb, var(--dd-bg-color-deep) 80%, transparent),
		0 0 70px -12px color-mix(in srgb, var(--dd-primary-color) 22%, transparent);
}

.dd-plans__panels {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.dd-plans__panel {
	display: none;
	width: 100%;
	max-width: 100%;
}

.dd-plans__panel.is-active {
	display: block;
}

.dd-plans__frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 2px;
	background:
		radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--dd-primary-color) 12%, transparent) 0%, transparent 62%),
		var(--dd-bg-color-deep);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 26%, transparent),
		inset 0 0 50px rgba(0, 0, 0, 0.6);
}

.dd-plans__frame::before {
	content: '3D';
	position: absolute;
	top: clamp(12px, 2vw, 18px);
	left: clamp(12px, 2vw, 18px);
	z-index: 1;
	padding: 6px 12px;
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 42%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 78%, transparent);
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.85);
}

.dd-plans__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--dd-bg-color-deep);
}

.dd-plans__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: clamp(22px, 3vw, 34px);
	text-align: center;
}

.dd-plans__caption-rule {
	display: block;
	width: min(120px, 28vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-plans__caption-text {
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

.dd-plans__gallery-title {
	margin: 0 0 clamp(22px, 3vw, 34px);
	font-family: var(--dd-serif);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--dd-color-text);
}

.dd-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}

.dd-plans__item {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(10px, 1.2vw, 16px);
	overflow: hidden;
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--dd-bg-color) 88%, transparent), var(--dd-bg-color-deep));
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition:
		box-shadow 0.45s ease,
		border-color 0.45s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-plans__item.is-hidden {
	display: none;
}

.dd-plans__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: color-mix(in srgb, var(--dd-bg-color) 92%, #ffffff 8%);
	border-radius: 1px;
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.45s ease;
}

.dd-plans__item-label {
	display: block;
	margin-top: clamp(10px, 1.2vw, 14px);
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--dd-color-text-soft);
}

.dd-plans__shade {
	position: absolute;
	inset: clamp(10px, 1.2vw, 16px);
	bottom: calc(clamp(10px, 1.2vw, 16px) + 28px);
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	border-radius: 1px;
	background:
		linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--dd-bg-color-deep) 72%, transparent) 100%),
		radial-gradient(120% 100% at 50% 50%, transparent 55%, color-mix(in srgb, var(--dd-bg-color-deep) 40%, transparent) 100%);
	transition: opacity 0.45s ease;
}

.dd-plans__plus {
	position: absolute;
	top: calc(50% - 14px);
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--dd-color-text);
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 42%, transparent);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.dd-plans__item:hover {
		border-color: color-mix(in srgb, var(--dd-primary-color-light) 38%, transparent);
		box-shadow:
			0 30px 60px -28px rgba(0, 0, 0, 0.9),
			0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 26%, transparent);
	}
	.dd-plans__item:hover .dd-plans__img {
		transform: scale(1.02);
		filter: brightness(1.03);
	}
	.dd-plans__item:hover .dd-plans__shade {
		opacity: 1;
	}
	.dd-plans__item:hover .dd-plans__plus {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.dd-plans__item:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow:
		0 0 0 2px var(--dd-bg-color),
		0 0 0 4px color-mix(in srgb, var(--dd-primary-color) 55%, transparent);
}

.dd-plans__item:focus-visible .dd-plans__plus {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* --- Visionneuse de plans */
.dd-plans__lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

.dd-plans__lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		visibility 0s;
}

.dd-plans__lb-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 88%, transparent);
	backdrop-filter: blur(12px);
}

.dd-plans__lb-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2vw, 22px);
	width: min(96vw, 1200px);
	max-height: calc(100vh - clamp(32px, 8vw, 80px));
	margin: 0;
}

.dd-plans__lb-img {
	display: block;
	width: 100%;
	max-height: calc(100vh - clamp(120px, 16vw, 180px));
	object-fit: contain;
	border-radius: 2px;
	background: color-mix(in srgb, var(--dd-bg-color) 92%, #ffffff 8%);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.92);
	opacity: 0;
	transform: scale(0.98);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.dd-plans__lightbox.is-open .dd-plans__lb-img {
	opacity: 1;
	transform: scale(1);
}

.dd-plans__lb-img.is-swapping {
	opacity: 0.35;
	transform: scale(0.985);
}

.dd-plans__lb-caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	text-align: center;
}

.dd-plans__lb-label {
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-color-text);
}

.dd-plans__lb-counter {
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--dd-color-text-soft);
}

.dd-plans__lb-btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--dd-color-text);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 78%, transparent);
	backdrop-filter: blur(8px);
	transition:
		color 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease,
		transform 0.3s ease;
}

.dd-plans__lb-btn:hover {
	color: var(--dd-color-accent);
	border-color: var(--dd-primary-color-light);
	transform: scale(1.05);
}

.dd-plans__lb-btn:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

.dd-plans__lb-close {
	top: clamp(16px, 3vw, 28px);
	right: clamp(16px, 3vw, 28px);
}

.dd-plans__lb-nav {
	top: 50%;
	transform: translateY(-50%);
}

.dd-plans__lb-nav:hover {
	transform: translateY(-50%) scale(1.05);
}

.dd-plans__lb-prev {
	left: clamp(12px, 2vw, 24px);
}

.dd-plans__lb-next {
	right: clamp(12px, 2vw, 24px);
}

@media (max-width: 760px) {
	.dd-plans__lb-nav {
		display: none;
	}
}

/* ============================================================== Contact — formulaire de demande */
.dd-contact {
	display: none;
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 64px) clamp(80px, 11vw, 150px);
	background:
		radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--dd-primary-color) 7%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--dd-bg-color-deep) 0%, var(--dd-bg-color) 18%, var(--dd-bg-color) 100%);
}

.dd-contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(280px, 60vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent);
}

.dd-contact__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

.dd-contact__intro {
	margin-bottom: clamp(30px, 4vw, 48px);
	text-align: center;
}

.dd-contact__form {
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--dd-bg-color) 88%, transparent) 0%, color-mix(in srgb, var(--dd-bg-color-deep) 94%, transparent) 100%);
	box-shadow:
		0 40px 90px -36px rgba(0, 0, 0, 0.88),
		0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 18%, transparent),
		0 0 70px -16px color-mix(in srgb, var(--dd-primary-color) 16%, transparent);
}

.dd-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 24px);
}

.dd-contact__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dd-contact__field--full {
	grid-column: 1 / -1;
}

.dd-contact__label {
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

.dd-contact__input,
.dd-contact__textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--dd-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--dd-color-text);
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 72%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		background 0.3s ease;
}

.dd-contact__input::placeholder,
.dd-contact__textarea::placeholder {
	color: color-mix(in srgb, var(--dd-color-text-soft) 72%, transparent);
}

.dd-contact__input:hover,
.dd-contact__textarea:hover {
	border-color: var(--dd-color-border-strong);
}

.dd-contact__input:focus,
.dd-contact__textarea:focus {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 28%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dd-contact__textarea {
	min-height: 160px;
	resize: vertical;
}

/* --- input_tel (intl-tel-input) — alignement sur le thème contact */
.dd-contact__field .iti {
	display: block;
	width: 100%;
}

.dd-contact[data-iti-theme-scope="dark"] .iti {
	--iti-surface: var(--dd-bg-color-deep);
	--iti-border: var(--dd-color-border-strong);
	--iti-text: var(--dd-color-text);
	--iti-muted: var(--dd-color-text-soft);
	--iti-hover: color-mix(in srgb, var(--dd-primary-color) 14%, var(--dd-bg-color-deep));
	--iti-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
}

.dd-contact__field .iti .dd-contact__input {
	padding-left: 52px;
}

.dd-contact__field .iti__selected-flag {
	border-radius: 2px 0 0 2px;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 72%, transparent);
}

.dd-contact__field .iti__arrow {
	border-top-color: var(--dd-color-text-soft);
}

.dd-contact__field .iti__arrow--up {
	border-top: none;
	border-bottom-color: var(--dd-color-text-soft);
}

.dd-contact__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 3vw, 34px);
}

.dd-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, 280px);
	padding: 14px 28px;
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-bg-color-deep);
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--dd-primary-color-light), var(--dd-primary-color));
	box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.85);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		filter 0.3s ease;
}

.dd-contact__submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.9);
}

.dd-contact__submit:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent),
		0 12px 28px -14px rgba(0, 0, 0, 0.85);
}

@media (max-width: 640px) {
	.dd-contact__grid {
		grid-template-columns: 1fr;
	}

	.dd-contact__submit {
		width: 100%;
	}
}

/* ============================================================== Modale brochure — téléchargement FR / EN */
.dd-brochure {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

.dd-brochure.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		visibility 0s;
}

.dd-brochure__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--dd-bg-color-deep) 90%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.dd-brochure__close {
	position: absolute;
	top: clamp(14px, 3vw, 30px);
	right: clamp(14px, 3vw, 30px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--dd-color-text);
	cursor: pointer;
	border: 1px solid var(--dd-color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color) 58%, transparent);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	transition:
		color 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease,
		transform 0.25s ease;
}

.dd-brochure__close:hover {
	color: var(--dd-color-accent);
	border-color: var(--dd-color-border-strong);
	background: color-mix(in srgb, var(--dd-bg-color) 78%, transparent);
	transform: scale(1.06);
}

.dd-brochure__close:focus-visible {
	outline: none;
	border-color: var(--dd-primary-color-light);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-primary-color) 45%, transparent);
}

.dd-brochure__panel {
	position: relative;
	z-index: 1;
	width: min(100%, 760px);
	padding: clamp(28px, 5vw, 48px);
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--dd-bg-color) 92%, transparent) 0%, color-mix(in srgb, var(--dd-bg-color-deep) 96%, transparent) 100%);
	box-shadow:
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 22%, transparent),
		0 0 80px -20px color-mix(in srgb, var(--dd-primary-color) 24%, transparent);
	opacity: 0;
	transform: translateY(12px) scale(0.975);
	transition:
		opacity 0.45s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-brochure.is-open .dd-brochure__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.dd-brochure__head {
	margin-bottom: clamp(24px, 4vw, 36px);
	text-align: center;
}

.dd-brochure__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-brochure__title {
	margin: 0 0 12px;
	font-family: var(--dd-serif);
	font-size: clamp(28px, 4.2vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--dd-color-text);
}

.dd-brochure__lead {
	margin: 0;
	font-size: clamp(14px, 1.8vw, 16px);
	line-height: 1.6;
	color: var(--dd-color-text-soft);
}

.dd-brochure__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 2.4vw, 22px);
}

.dd-brochure__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 3vw, 26px);
	min-height: clamp(220px, 28vw, 260px);
	padding: clamp(28px, 4vw, 36px) clamp(20px, 3vw, 28px);
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	color: inherit;
	border: 1px solid var(--dd-color-border);
	border-radius: 2px;
	background:
		radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 10%, transparent) 0%, transparent 58%),
		var(--dd-bg-color-deep);
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
	transition:
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s ease;
}

.dd-brochure__tile:hover {
	border-color: color-mix(in srgb, var(--dd-primary-color-light) 42%, transparent);
	background:
		radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--dd-primary-color) 18%, transparent) 0%, transparent 62%),
		var(--dd-bg-color-deep);
	box-shadow:
		0 24px 48px -24px rgba(0, 0, 0, 0.9),
		0 0 0 1px color-mix(in srgb, var(--dd-primary-color) 28%, transparent);
	transform: translateY(-4px);
}

.dd-brochure__tile-flag {
	display: grid;
	place-items: center;
	width: clamp(84px, 11vw, 104px);
	height: clamp(84px, 11vw, 104px);
	border-radius: 50%;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	border: 2px solid color-mix(in srgb, var(--dd-primary-color-light) 34%, transparent);
	box-shadow:
		0 0 0 6px color-mix(in srgb, var(--dd-primary-color) 10%, transparent),
		0 16px 36px -16px rgba(0, 0, 0, 0.85);
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.dd-brochure__tile-flag svg {
	display: block;
	width: clamp(52px, 7vw, 64px);
	height: clamp(52px, 7vw, 64px);
}

.dd-brochure__tile:hover .dd-brochure__tile-flag {
	transform: scale(1.06);
	border-color: color-mix(in srgb, var(--dd-primary-color-light) 62%, transparent);
	box-shadow:
		0 0 0 8px color-mix(in srgb, var(--dd-primary-color) 16%, transparent),
		0 20px 42px -14px rgba(0, 0, 0, 0.9);
}

.dd-brochure__tile-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.dd-brochure__tile-lang {
	font-family: var(--dd-serif);
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--dd-color-text);
}

.dd-brochure__tile-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
	transition: color 0.3s ease, gap 0.3s ease;
}

.dd-brochure__tile:hover .dd-brochure__tile-cta {
	color: var(--dd-primary-color-lighter);
	gap: 12px;
}

@media (max-width: 620px) {
	.dd-brochure__grid {
		grid-template-columns: 1fr;
	}
	.dd-brochure__panel {
		padding: clamp(22px, 5vw, 32px);
	}
}

/* ============================================================== Footer */
.dd-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 56px);
	background: var(--dd-bg-color);
	border-top: 1px solid var(--dd-color-border);
}

/* Image plein cadre, ghost doré — visible en bas, fondu vers le haut (transition contact) */
.dd-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../../img/photos/interieur/36.lg.webp') center 62% / cover no-repeat;
	opacity: 0.2;
	filter: saturate(0.28) brightness(0.38) contrast(1.02);
	pointer-events: none;
	z-index: -2;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 20%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.72) 68%, #000 82%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 20%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.72) 68%, #000 82%, #000 100%);
}

/* Voile marron : sombre en haut (jointure contact), s'éclaircit vers le bas */
.dd-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent, var(--dd-primary-color-light), transparent) 50% 0 / min(220px, 50vw) 1px no-repeat,
		radial-gradient(110% 78% at 50% 92%, color-mix(in srgb, var(--dd-primary-color) 10%, transparent), transparent 60%),
		linear-gradient(180deg,
			var(--dd-bg-color) 0%,
			color-mix(in srgb, var(--dd-bg-color) 90%, transparent) 24%,
			color-mix(in srgb, var(--dd-bg-color) 68%, transparent) 54%,
			color-mix(in srgb, var(--dd-bg-color) 38%, transparent) 100%);
	pointer-events: none;
	z-index: -1;
}

.dd-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 3vw, 34px);
	text-align: center;
}

.dd-footer__eyebrow {
	margin: 0;
	font-family: var(--dd-serif);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--dd-color-text);
}

.dd-footer__lead {
	margin: 8px 0 0;
	font-family: var(--dd-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
}

.dd-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.dd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
}

.dd-footer__legal a {
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
	transition: color 0.3s ease;
}

.dd-footer__legal a:hover {
	color: var(--dd-color-accent);
}

.dd-footer__copy {
	margin: 0;
	font-family: var(--dd-sans);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--dd-color-text-soft) 72%, transparent);
}

.dd-footer__credit {
	margin: 0;
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--dd-color-text-soft) 82%, transparent);
}

.dd-footer__credit a {
	color: var(--dd-color-text-soft);
	transition: color 0.3s ease;
}

.dd-footer__credit a:hover {
	color: var(--dd-color-accent);
}

/* ============================================================== Pages légales */
body.page-legal {
	background: var(--dd-bg-color);
}

.dd-legal {
	min-height: 100vh;
	padding: clamp(24px, 4vw, 40px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 72px);
}

.dd-legal__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 24px;
	max-width: 820px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	padding-bottom: clamp(18px, 3vw, 28px);
	border-bottom: 1px solid var(--dd-color-border);
}

.dd-legal__brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.dd-legal__logo {
	width: clamp(52px, 8vw, 72px);
	height: auto;
	border-radius: 50%;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dd-primary-color-light) 28%, transparent);
}

.dd-legal__brand-label {
	font-family: var(--dd-serif);
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--dd-color-text);
}

.dd-legal__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	flex-shrink: 0;
	margin-left: auto;
}

.dd-legal__actions .dd-lang-switch--compact {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
	z-index: auto;
	min-width: auto;
	width: auto;
	align-self: flex-end;
}

.dd-legal__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	box-sizing: border-box;
	padding: 9px 18px;
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-color-text-soft);
	border: 1px solid var(--dd-color-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-bg-color) 72%, transparent);
	transition:
		color 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease;
}

.dd-legal__back:hover {
	color: var(--dd-color-text);
	border-color: var(--dd-color-border-strong);
}

.dd-legal__main {
	max-width: 720px;
	margin: 0 auto;
}

.dd-legal__head {
	margin-bottom: clamp(28px, 4vw, 42px);
	text-align: center;
}

.dd-legal__eyebrow {
	margin: 0 0 12px;
	font-family: var(--dd-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dd-color-accent);
}

.dd-legal__title {
	margin: 0;
	font-family: var(--dd-serif);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--dd-color-text);
}

.dd-legal__content {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 34px);
}

.dd-legal__section h2 {
	margin: 0 0 12px;
	font-family: var(--dd-serif);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--dd-color-text);
}

.dd-legal__section p,
.dd-legal__section li {
	font-family: var(--dd-sans);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--dd-color-text-muted);
}

.dd-legal__section p {
	margin: 0 0 12px;
}

.dd-legal__section p:last-child {
	margin-bottom: 0;
}

.dd-legal__section ul {
	margin: 0;
	padding-left: 1.1em;
	list-style: disc;
}

.dd-legal__section li + li {
	margin-top: 6px;
}

.dd-legal__section a {
	color: var(--dd-color-accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--dd-primary-color-light) 45%, transparent);
	text-underline-offset: 0.18em;
	transition: color 0.3s ease;
}

.dd-legal__section a:hover {
	color: var(--dd-primary-color-lighter);
}

@media (max-width: 620px) {
	.dd-legal__top {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"brand lang"
			"back back";
		align-items: center;
		gap: 12px 16px;
	}

	.dd-legal__brand {
		grid-area: brand;
		min-width: 0;
	}

	.dd-legal__actions {
		display: contents;
	}

	.dd-legal__actions .dd-lang-switch--compact {
		grid-area: lang;
		justify-self: end;
		align-self: center;
	}

	.dd-legal__back {
		grid-area: back;
		width: 100%;
	}

	.dd-footer__legal {
		flex-direction: column;
		gap: 12px;
	}
}

/* ==============================================================
   MODE MÉDIA STATIQUE — mobile / tablette / connexion économe / mouvement réduit
   .dd-static-media posée dès le parse de root.js + filet @media (CSS sans attendre le JS).
   Zéro vidéo scrubée : background-image simple, pas de sticky ni de couche GPU vidéo. */

/* --- Règles partagées : classe JS (save-data desktop…) + media queries (mobile / tablette / touch) */
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
	/* --- Héro : un seul écran, image de fond à la place de la vidéo */
	.dd-hero {
		height: 100vh;
	}

	.dd-hero__sticky {
		background: var(--dd-bg-color-deep) url('../../movie/posters/hero.md.webp') center / cover no-repeat;
	}

	.dd-hero__video,
	.dd-presentation-2__video,
	.dd-tour__video {
		display: none !important;
	}

	/* --- Présentation & visite : fond figé (plus de sticky → scroll plus léger) */
	.dd-presentation-2__media-sticky,
	.dd-tour__media-sticky {
		position: absolute;
		inset: 0;
		top: auto;
		width: 100%;
		height: 100%;
		margin-left: 0;
		transform: none;
		will-change: auto;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.dd-presentation-2__media-sticky {
		background-image: url('../../movie/posters/presentation.md.webp');
	}

	.dd-tour__media-sticky {
		background-image: url('../../movie/posters/visite.md.webp');
	}

	.dd-presentation-2__media-veil,
	.dd-tour__media-veil {
		opacity: 1;
		background:
			radial-gradient(135% 95% at 50% 35%, transparent 18%, color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 100%),
			linear-gradient(180deg,
				color-mix(in srgb, var(--dd-bg-color) 92%, transparent) 0%,
				color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 22%,
				color-mix(in srgb, var(--dd-bg-color) 72%, transparent) 55%,
				color-mix(in srgb, var(--dd-bg-color) 85%, transparent) 100%);
	}

	.dd-presentation-2__headline-layer,
	.dd-tour__headline-layer {
		display: none;
	}

	.dd-presentation-2__runway,
	.dd-tour__runway {
		height: 0;
	}

	/* --- Flou d'arrière-plan : trop coûteux au scroll sur mobile / tablette */
	*,
	*::before,
	*::after {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.dd-header.is-scrolled {
		background: color-mix(in srgb, var(--dd-bg-color) 94%, transparent);
	}

	.dd-presentation-1 .dd-presentation__facts {
		background: color-mix(in srgb, var(--dd-bg-color) 90%, transparent);
	}
}

/* --- Même rendu via .dd-static-media (save-data / réseau lent sur desktop large) */
.dd-static-media .dd-hero {
	height: 100vh;
}

.dd-static-media .dd-hero__sticky {
	background: var(--dd-bg-color-deep) url('../../movie/posters/hero.md.webp') center / cover no-repeat;
}

.dd-static-media .dd-hero__video,
.dd-static-media .dd-presentation-2__video,
.dd-static-media .dd-tour__video {
	display: none !important;
}

/* --- Backdrop poster mobile : sticky 1 écran (PAS étiré sur toute la section)
   En absolute + height:100%, le poster couvrait toute la section (≈390×3721 = 1170×11163 px @dpr3,
   soit ~13 MP, cover upscale ×8.6 d'un poster 768×433) : couche GPU géante re-rasterisée tuile par
   tuile à chaque frame de scroll → saccade sur mobile (le desktop la masque grâce à son GPU).
   En sticky 100vh on ne peint qu'UN écran (~3 MP) collé au viewport, composité comme la vidéo desktop
   (le `overflow: clip` de .dd-presentation-2 n'établit pas de conteneur de défilement → le sticky
   s'accroche bien au viewport). */
.dd-static-media .dd-presentation-2__media-sticky,
.dd-static-media .dd-tour__media-sticky {
	position: sticky;
	inset: auto;
	top: 0;
	width: 100%;
	height: 100vh;
	margin-left: 0;
	transform: none;
	will-change: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.dd-static-media .dd-presentation-2__media-sticky {
	background-image: url('../../movie/posters/presentation.md.webp');
}

.dd-static-media .dd-tour__media-sticky {
	background-image: url('../../movie/posters/visite.md.webp');
}

.dd-static-media .dd-presentation-2__media-veil,
.dd-static-media .dd-tour__media-veil {
	opacity: 1;
	background:
		radial-gradient(135% 95% at 50% 35%, transparent 18%, color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 100%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--dd-bg-color) 92%, transparent) 0%,
			color-mix(in srgb, var(--dd-bg-color) 78%, transparent) 22%,
			color-mix(in srgb, var(--dd-bg-color) 72%, transparent) 55%,
			color-mix(in srgb, var(--dd-bg-color) 85%, transparent) 100%);
}

.dd-static-media .dd-presentation-2__headline-layer,
.dd-static-media .dd-tour__headline-layer {
	display: none;
}

.dd-static-media .dd-presentation-2__runway,
.dd-static-media .dd-tour__runway {
	height: 0;
}

.dd-static-media *,
.dd-static-media *::before,
.dd-static-media *::after {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.dd-static-media .dd-header.is-scrolled {
	background: color-mix(in srgb, var(--dd-bg-color) 94%, transparent);
}

.dd-static-media .dd-presentation-1 .dd-presentation__facts {
	background: color-mix(in srgb, var(--dd-bg-color) 90%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.dd-hero__scroll-line {
		animation: none;
	}
	.dd-nav__frame::after {
		animation: none;
		opacity: 0;
	}
	.dd-nav__brand:hover .dd-nav__frame {
		transform: none;
	}
	.dd-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.dd-presentation__crest-orb,
	.dd-presentation__crest-orb::before {
		animation: none;
	}
	.dd-presentation-2__video {
		will-change: auto;
	}
	.dd-tour__video {
		will-change: auto;
	}
	.dd-presentation-2__headline,
	.dd-tour__headline {
		transform: none;
		will-change: auto;
	}
	.dd-presentation__figure-slot img {
		opacity: 1;
		transition: none;
	}
	.dd-gallery__img,
	.dd-gallery__shade,
	.dd-gallery__plus,
	.dd-gallery__lb-img,
	.dd-gallery__item,
	.dd-plans__img,
	.dd-plans__shade,
	.dd-plans__plus,
	.dd-plans__lb-img,
	.dd-plans__item {
		transition: none;
	}
	.dd-video__poster-img,
	.dd-video__play-ring,
	.dd-video__crest::before {
		animation: none;
	}
	.dd-video__play-ring {
		opacity: 0;
	}
	.dd-video__cinema-player {
		transform: none;
		transition: opacity 0.3s ease;
	}
	.dd-brochure__panel,
	.dd-brochure__tile,
	.dd-brochure__tile-flag {
		transition: none;
	}
	.dd-brochure__tile:hover {
		transform: none;
	}
	.swal2-popup.swal2-toast.swal2-show,
	.swal2-popup.swal2-toast.swal2-hide {
		animation: none !important;
	}
}

/* ============================================================== Toast (SweetAlert2) — surcharge thème */
/*
 * Le toast Maestra (ms.toast / ms.toasts) repose sur SweetAlert2, dont le CSS est
 * injecté en JS (vendors.bundle.js) → on force la surcharge avec [!important] et on
 * scope STRICTEMENT [.swal2-toast]. Les popups modales restent gérées par
 * maestra.css (sélecteurs [:not(.swal2-toast)] + tokens --mm-swal-*), donc aucun conflit.
 * Couleur d'accent dérivée du type via :has() (best practice 2026), or doré par défaut.
 */

/* --- Accent sémantique par type (doré = warning, on-brand) */
.swal2-popup.swal2-toast {
	--dd-toast-accent: var(--dd-primary-color-light);
}
.swal2-popup.swal2-toast:has(.swal2-error)    { --dd-toast-accent: #e07a80; }
.swal2-popup.swal2-toast:has(.swal2-success)  { --dd-toast-accent: #a3c48f; }
.swal2-popup.swal2-toast:has(.swal2-warning)  { --dd-toast-accent: var(--dd-primary-color-light); }
.swal2-popup.swal2-toast:has(.swal2-info)     { --dd-toast-accent: #8fbcd6; }
.swal2-popup.swal2-toast:has(.swal2-question) { --dd-toast-accent: var(--dd-primary-color-lighter); }

/* --- Conteneur : dégagement des bords du viewport */
.swal2-container:has(.swal2-toast) {
	padding: 1.15rem !important;
}

/* --- Carte du toast : verre sombre + filet doré */
.swal2-popup.swal2-toast {
	position: relative;
	overflow: hidden;
	align-items: center !important;
	max-width: min(92vw, 360px) !important;
	padding: 14px 18px !important;
	font-family: var(--dd-sans);
	color: var(--dd-color-text);
	background:
		linear-gradient(158deg,
			color-mix(in srgb, var(--dd-primary-color) 8%, #1d1811) 0%,
			color-mix(in srgb, var(--dd-primary-color) 3%, #13100a) 100%) !important;
	border: 1px solid color-mix(in srgb, var(--dd-primary-color-light) 22%, transparent) !important;
	border-radius: 14px !important;
	box-shadow:
		0 22px 55px -20px rgba(0, 0, 0, 0.85),
		0 6px 18px -10px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	cursor: pointer;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.swal2-popup.swal2-toast:hover {
	border-color: color-mix(in srgb, var(--dd-primary-color-light) 32%, transparent) !important;
	box-shadow:
		0 24px 60px -20px rgba(0, 0, 0, 0.85),
		0 8px 22px -10px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* --- Filet d'accent vertical (couleur sémantique) */
.swal2-popup.swal2-toast::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg,
		var(--dd-toast-accent),
		color-mix(in srgb, var(--dd-toast-accent) 45%, transparent));
}

/* --- Titre */
/* L'icône SweetAlert occupe grid-row 1/99 (centrée sur toute la hauteur) alors que
 * le titre n'est placé que sur la 1re ligne → décalage vertical. On fait donc spanner
 * le titre sur les mêmes lignes que l'icône pour un vrai centrage commun. */
.swal2-popup.swal2-toast .swal2-title {
	grid-row: 1 / 99 !important;
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--dd-sans) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: 0.012em;
	text-align: left !important;
	color: var(--dd-color-text) !important;
}
.swal2-popup.swal2-toast .swal2-title strong {
	font-weight: 500;
	color: var(--dd-color-accent);
}

/* --- Contenu HTML (toast multi-lignes : ms.toasts) */
.swal2-popup.swal2-toast .swal2-html-container {
	margin: 4px 0 0 !important;
	font-family: var(--dd-sans) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	text-align: left !important;
	color: var(--dd-color-text-muted) !important;
}

/* --- Icône : recolorisation + halo discret (dimensions natives conservées) */
.swal2-popup.swal2-toast .swal2-icon {
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dd-toast-accent) 35%, transparent));
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
	color: var(--dd-toast-accent) !important;
}

/* error */
.swal2-popup.swal2-toast .swal2-icon.swal2-error {
	border-color: color-mix(in srgb, var(--dd-toast-accent) 55%, transparent) !important;
}
.swal2-popup.swal2-toast .swal2-x-mark-line-left,
.swal2-popup.swal2-toast .swal2-x-mark-line-right {
	background-color: var(--dd-toast-accent) !important;
}

/* success (masques blancs natifs → transparents pour éviter les arcs clairs sur fond sombre) */
.swal2-popup.swal2-toast .swal2-icon.swal2-success {
	border-color: transparent !important;
}
.swal2-popup.swal2-toast .swal2-success-ring {
	border-color: color-mix(in srgb, var(--dd-toast-accent) 35%, transparent) !important;
}
.swal2-popup.swal2-toast .swal2-success-line-tip,
.swal2-popup.swal2-toast .swal2-success-line-long {
	background-color: var(--dd-toast-accent) !important;
}
.swal2-popup.swal2-toast .swal2-success-fix,
.swal2-popup.swal2-toast .swal2-success-circular-line-left,
.swal2-popup.swal2-toast .swal2-success-circular-line-right {
	background: transparent !important;
}

/* warning / info / question */
.swal2-popup.swal2-toast .swal2-icon.swal2-warning,
.swal2-popup.swal2-toast .swal2-icon.swal2-info,
.swal2-popup.swal2-toast .swal2-icon.swal2-question {
	border-color: color-mix(in srgb, var(--dd-toast-accent) 50%, transparent) !important;
	color: var(--dd-toast-accent) !important;
}

/* --- Barre de progression du timer (dégradé sémantique) */
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
	height: 3px !important;
	border-radius: 0 0 14px 14px !important;
	overflow: hidden;
	background: color-mix(in srgb, var(--dd-color-text) 9%, transparent) !important;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
	height: 3px !important;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--dd-toast-accent) 55%, transparent),
		var(--dd-toast-accent)) !important;
}

/* --- Bouton(s) éventuel(s) (ms.toasts) */
.swal2-popup.swal2-toast .swal2-actions {
	margin: 10px 0 0 !important;
}
.swal2-popup.swal2-toast .swal2-confirm {
	padding: 6px 15px !important;
	font-family: var(--dd-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	color: var(--dd-bg-color-deep) !important;
	background: linear-gradient(135deg, var(--dd-primary-color-light), var(--dd-primary-color)) !important;
	border: none !important;
	border-radius: 9px !important;
	box-shadow: 0 6px 18px -8px var(--dd-color-primary-glow) !important;
}
.swal2-popup.swal2-toast .swal2-confirm:hover {
	background: linear-gradient(135deg, var(--dd-primary-color-lighter), var(--dd-primary-color-light)) !important;
}

/* --- Bouton de fermeture éventuel */
.swal2-popup.swal2-toast .swal2-close {
	color: var(--dd-color-text-soft) !important;
}
.swal2-popup.swal2-toast .swal2-close:hover {
	color: var(--dd-color-accent) !important;
}

/* --- Animations d'entrée / sortie (glisse depuis la droite) */
.swal2-popup.swal2-toast.swal2-show {
	animation: dd-toast-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.swal2-popup.swal2-toast.swal2-hide {
	animation: dd-toast-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
@keyframes dd-toast-in {
	from {
		opacity: 0;
		transform: translateX(26px) translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateX(0) translateY(0);
	}
}
@keyframes dd-toast-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(26px);
	}
}