/* =====================================================================
 * Dômes Pharma US — header & footer
 * Couleurs pilotées par les variables CSS injectées via wp_add_inline_style()
 * ===================================================================== */

/* ---------- Reset léger ---------- */
.dp-body * { box-sizing: border-box; }

/*
 * Neutralise les couleurs rose/rouge (#c36) du reset Hello Elementor.
 * Ces règles restent assez faibles pour que les widgets et composants ayant
 * leurs propres couleurs puissent continuer à les surcharger.
 */
:where(.dp-body) a {
	color: var(--dp-link, var(--dp-primary, #0E6E7E));
}
:where(.dp-body) a:hover,
:where(.dp-body) a:active {
	color: var(--dp-link-hover, var(--dp-primary-dark, #0A4F5A));
}
/* Hello Elementor peint tout bouton en #c36 (bordure, texte, et aplat rouge au
   survol) dans son reset. On neutralise ce rouge partout, y compris sur la page
   d'accès vétérinaire — un document autonome qui ne porte pas la classe
   .dp-body et affichait donc les boutons en rose. */
:where(.dp-body, .dp-vet-gate-body) :is([type="button"], [type="submit"], button) {
	background-color: transparent;
	border-color: var(--dp-button, var(--dp-primary, #0E6E7E));
	color: var(--dp-button, var(--dp-primary, #0E6E7E));
	/* Le reset impose aussi white-space: nowrap, ce qui fait deborder tout
	   bouton portant un libelle un peu long — un choix sur plusieurs lignes,
	   par exemple. On laisse le texte revenir a la ligne. */
	white-space: normal;
}
:where(.dp-body, .dp-vet-gate-body) :is([type="button"], [type="submit"], button):hover,
:where(.dp-body, .dp-vet-gate-body) :is([type="button"], [type="submit"], button):focus {
	background-color: var(--dp-button-hover, var(--dp-primary-dark, #0A4F5A));
	border-color: var(--dp-button-hover, var(--dp-primary-dark, #0A4F5A));
	color: var(--dp-button-hover-text, #FFFFFF);
}
.dp-skip-link {
	position: absolute;
	left: -9999px;
}
.dp-skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: #fff;
	color: var(--dp-primary, #0E6E7E);
	padding: .5rem 1rem;
	z-index: 100000;
	border-radius: 4px;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* La largeur vient du Customizer, qui par défaut recopie celle du contenu
   Elementor : en-tête, pied de page et contenu doivent tomber sur les mêmes
   bords. Le repli à 1280px vaut pour un rendu sans la variable. */
.dp-container {
	max-width: var(--dp-container, 1280px);
	margin: 0 auto;
	padding: 0 24px;
}

/* =====================================================================
 * HEADER
 * ===================================================================== */
.dp-site-header {
	font-family: var(--dp-font-base, 'Segoe UI', system-ui, -apple-system, sans-serif);
	color: var(--dp-text, #0A4F5A);
	width: 100%;
}
.dp-site-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--dp-header-bg, #fff);
	box-shadow: 0 1px 0 rgba(10, 79, 90, .06);
	transition: box-shadow .25s ease;
}

/*
 * Le header collant recouvre le haut de la zone visible : sans marge de
 * défilement, tout saut d'ancre — lien d'évitement, sommaire, ancre dans
 * l'URL — dépose sa cible derrière lui. La hauteur est publiée par main.js
 * dans --dp-header-height ; le repli à 0 laisse le comportement d'origine si
 * le script n'a pas encore tourné ou si le header n'est pas collant.
 */
html {
	scroll-padding-top: calc(var(--dp-header-height, 0px) + 16px);
}
.dp-site-header.is-sticky.is-scrolled {
	box-shadow: 0 2px 16px rgba(10, 79, 90, .10);
}

/* ---------- Top bar ---------- */
.dp-topbar {
	background: var(--dp-topbar-bg, #EFF4F7);
	color: var(--dp-topbar-text, #0E6E7E);
	font-size: 13px;
	border-bottom: 1px solid rgba(14, 110, 126, .08);
}
.dp-topbar__inner {
	display: flex;
	justify-content: flex-end;
}
.dp-topbar__list {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 8px 0;
}
.dp-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: opacity .2s;
}
.dp-topbar__link:hover { opacity: .7; }
.dp-topbar__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.dp-topbar__icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- Header bar ---------- */
.dp-header {
	background: var(--dp-header-bg, #fff);
	position: relative; /* ancre pour le drawer absolu */
}
.dp-header__inner {
	display: grid;
	grid-template-columns: auto minmax(40px, 1fr) auto;
	align-items: center;
	gap: 24px;
	min-height: 88px;
	width: 100%;
}
.dp-header__brand {
	display: flex;
	align-items: center;
}
.dp-header__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.dp-header__brand img {
	max-height: 56px;
	width: auto;
	display: block;
}
.dp-header__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--dp-primary-dark, #0A4F5A);
	text-decoration: none;
}

/* ---------- Actions (CTA + burger) ---------- */
.dp-header__actions {
	display: flex;
	align-items: center;
	justify-self: end;
	margin-left: auto;
	gap: 12px;
}

/* ---------- Navigation desktop ---------- */
.dp-header__nav {
	display: flex;
	justify-content: flex-end;
}
.dp-menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dp-menu > li {
	position: relative;
}
.dp-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--dp-text, #0A4F5A);
	text-decoration: none;
	padding: 28px 0;
	white-space: nowrap;
	transition: color .2s;
}
.dp-menu > li > a:hover,
.dp-menu > li.current-menu-item > a,
.dp-menu > li.current-menu-ancestor > a {
	color: var(--dp-primary, #0E6E7E);
}

/* Chevron desktop */
.dp-menu > li.dp-has-dropdown > a::after,
.dp-menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 6px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='1 1 5 5 9 1' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='1 1 5 5 9 1' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	transition: transform .22s ease;
}
.dp-menu > li.dp-has-dropdown:hover > a::after,
.dp-menu > li.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

/* Sous-menu desktop */
.dp-menu .sub-menu {
	position: absolute;
	top: calc(100% - 4px);
	left: 0;
	min-width: 230px;
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	border-radius: 8px;
	border: 1px solid rgba(14, 110, 126, .08);
	box-shadow: 0 8px 32px rgba(10, 79, 90, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 1001;
}
.dp-menu > li:hover > .sub-menu,
.dp-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.dp-menu .sub-menu a {
	display: block;
	padding: 10px 18px;
	color: var(--dp-text, #0A4F5A);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background .15s, color .15s;
}
.dp-menu .sub-menu a:hover {
	background: rgba(14, 110, 126, .06);
	color: var(--dp-primary, #0E6E7E);
}

/* ---------- CTA Vet Vault ---------- */
.dp-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--dp-primary, #0E6E7E);
	color: var(--dp-primary, #0E6E7E);
	background: transparent;
	padding: 11px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .2s, color .2s;
	white-space: nowrap;
}
.dp-header__cta:hover {
	background: var(--dp-primary-fill, var(--dp-primary, #0E6E7E));
	color: var(--dp-on-primary, #fff);
}

/* ---------- Burger ---------- */
.dp-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--dp-burger-bg, var(--dp-primary, #0E6E7E));
	border: 1.5px solid var(--dp-burger-border, var(--dp-primary-dark, #0A4F5A));
	border-radius: 8px;
	padding: 9px 10px;
	cursor: pointer;
	color: var(--dp-burger-icon, #fff);
	transition: border-color .2s, background .2s;
	-webkit-tap-highlight-color: transparent;
}
.dp-header__toggle:hover {
	border-color: var(--dp-burger-border, var(--dp-primary-dark, #0A4F5A));
	background: var(--dp-button-hover, var(--dp-primary-dark, #0A4F5A));
}
.dp-header__toggle-bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 22px;
	height: 15px;
}
.dp-header__toggle-bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform .25s ease, opacity .2s ease, width .2s ease;
}
/* Animation croix */
.dp-header__toggle[aria-expanded="true"] .dp-header__toggle-bars span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.dp-header__toggle[aria-expanded="true"] .dp-header__toggle-bars span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.dp-header__toggle[aria-expanded="true"] .dp-header__toggle-bars span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* =====================================================================
 * DRAWER MOBILE / TABLETTE
 * ===================================================================== */
.dp-drawer {
	position: fixed;
	inset: 0;
	z-index: 1002;
	display: flex;
	flex-direction: column;
	background: var(--dp-header-bg, #fff);
	color: var(--dp-text, #0A4F5A);
	font-family: var(--dp-font-base, 'Segoe UI', system-ui, -apple-system, sans-serif);
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1),
	            opacity .2s ease,
	            visibility 0s linear .28s;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.dp-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1),
	            opacity .2s ease,
	            visibility 0s linear 0s;
}
.dp-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 86px;
	padding: 16px 20px 16px 17px;
	border-bottom: 1px solid rgba(10, 79, 90, .16);
}
.dp-drawer__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}
.dp-drawer__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.dp-drawer__brand img {
	display: block;
	width: auto;
	max-width: min(240px, calc(100vw - 100px));
	max-height: 54px;
}
.dp-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: 16px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dp-primary-dark, #0A4F5A);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dp-drawer__close svg {
	width: 30px;
	height: 30px;
	stroke-width: 2;
}
.dp-drawer__nav {
	padding: 36px 0 0;
}
.dp-drawer__menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dp-drawer__menu > li {
	margin: 0;
}
.dp-drawer__menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 54px;
	padding: 0 22px;
	color: var(--dp-primary-dark, #0A4F5A);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	letter-spacing: 0;
}
.dp-drawer__menu > li.current-menu-item > a,
.dp-drawer__menu > li.current-menu-ancestor > a,
.dp-drawer__menu > li > a:hover {
	color: var(--dp-primary, #0E6E7E);
}
.dp-drawer__menu > li.menu-item-has-children > a::after,
.dp-drawer__menu > li.dp-has-dropdown > a::after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 19px;
	margin-left: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 19'><polyline points='2 2 9 9.5 2 17' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 19'><polyline points='2 2 9 9.5 2 17' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	transition: transform .22s ease;
}
.dp-drawer__menu > li.is-open > a::after {
	transform: rotate(90deg);
}
.dp-drawer__menu .sub-menu {
	position: static;
	min-width: 0;
	max-height: 0;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(14, 110, 126, .035);
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: max-height .25s ease;
}
.dp-drawer__menu > li.is-open > .sub-menu {
	max-height: 640px;
}
.dp-drawer__menu .sub-menu a {
	display: block;
	padding: 10px 34px;
	color: var(--dp-text, #0A4F5A);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}
.dp-drawer__menu .sub-menu a:hover {
	color: var(--dp-primary, #0E6E7E);
}

/* Backdrop semi-transparent */
.dp-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 997;
	background: rgba(6, 40, 48, .20);
	opacity: 0;
	pointer-events: none;
	transition: opacity .32s ease;
}
.dp-nav-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Scroll lock */
body.dp-menu-open {
	overflow: hidden;
	padding-right: var(--dp-scrollbar-w, 0px);
}

.dp-drawer__cta {
	display: flex;
	padding: 28px 22px 0;
}
.dp-drawer__cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 21px;
	border: 1.4px solid var(--dp-primary-dark, #0A4F5A);
	border-radius: 999px;
	color: var(--dp-primary-dark, #0A4F5A);
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}
.dp-drawer__utils {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 118px;
	padding: 0 26px 36px;
}
.dp-drawer__util-link {
	color: var(--dp-primary-dark, #0A4F5A);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

/* =====================================================================
 * RESPONSIVE
 * ===================================================================== */

/* ---- ≤ 1024px : tablette paysage + petits desktops ---- */
@media (max-width: 1024px) {

	/* Affiche le burger */
	.dp-header__toggle { display: inline-flex; }
	.dp-header__nav--desktop { display: none; }

	.dp-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 16px;
		min-height: 76px;
	}
	.dp-header__brand {
		grid-column: 1;
		min-width: 0;
	}
	.dp-header__brand img {
		max-width: 100%;
	}
	.dp-header__actions {
		grid-column: 3;
		justify-content: flex-end;
	}
	.dp-header__cta {
		padding: 9px 18px;
		font-size: 14px;
	}

	/* ---- Conversion de la nav en drawer ---- */
	.dp-header__nav {
		/* Sort du flux */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 998;
		/* Apparence */
		background: var(--dp-header-bg, #fff);
		border-top: 1px solid rgba(14, 110, 126, .08);
		box-shadow: 0 12px 32px rgba(10, 79, 90, .13);
		/* Slide depuis le haut via clip-path */
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path .32s cubic-bezier(.4, 0, .2, 1),
		            visibility 0s linear .32s;
		/* Scroll interne */
		max-height: calc(100svh - 76px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.dp-header__nav.is-open {
		clip-path: inset(0 0 0% 0);
		visibility: visible;
		transition: clip-path .32s cubic-bezier(.4, 0, .2, 1),
		            visibility 0s linear 0s;
	}

	/* ---- Menu list en colonne ---- */
	.dp-header__nav .dp-menu {
		flex-direction: column;
		gap: 0;
		padding: 6px 0 8px;
	}
	.dp-header__nav .dp-menu > li {
		border-bottom: 1px solid rgba(14, 110, 126, .06);
	}
	.dp-header__nav .dp-menu > li:last-child { border-bottom: 0; }
	.dp-header__nav .dp-menu > li > a {
		padding: 15px 24px;
		font-size: 16px;
		justify-content: space-between;
		white-space: normal;
	}
	.dp-header__nav .dp-menu > li > a:hover {
		background: rgba(14, 110, 126, .04);
	}

	/* ---- Sous-menu mobile : accordéon ---- */
	.dp-header__nav .dp-menu .sub-menu {
		position: static;
		min-width: 0;
		background: rgba(14, 110, 126, .025);
		border: none;
		border-top: 1px solid rgba(14, 110, 126, .06);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		/* Accordéon */
		max-height: 0;
		overflow: hidden;
		transition: max-height .28s ease;
		padding: 0;
	}
	.dp-header__nav .dp-menu > li.is-open > .sub-menu {
		max-height: 600px;
	}
	.dp-header__nav .dp-menu .sub-menu a {
		padding: 12px 24px 12px 38px;
		border-bottom: 1px solid rgba(14, 110, 126, .05);
		font-size: 14px;
	}
	.dp-header__nav .dp-menu .sub-menu li:last-child a { border-bottom: 0; }

	/* Chevron mobile : tourne sur .is-open */
	.dp-header__nav .dp-menu > li.is-open > a::after { transform: rotate(180deg); }
	/* Désactive le hover desktop (le sous-menu ne doit pas apparaître au survol) */
	.dp-header__nav .dp-menu > li:hover > .sub-menu:not(.sub-menu--desktop) {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* ---- ≤ 768px : tablette portrait ---- */
@media (max-width: 768px) {
	.dp-topbar__text { display: none; }
	.dp-topbar__list { gap: 18px; padding: 7px 0; }
	.dp-header__inner { min-height: 68px; }
	.dp-header__brand img {
		max-height: 46px;
		max-width: min(280px, 48vw);
	}
	.dp-header__nav { max-height: calc(100svh - 68px); }
}

/* ---- ≤ 600px : mobile ---- */
@media (max-width: 600px) {
	/* Topbar masquée */
	.dp-topbar { display: none; }

	.dp-container { padding: 0 16px; }
	.dp-header__inner {
		min-height: 60px;
		gap: 8px;
	}
	.dp-header__brand img {
		max-height: 38px;
		max-width: 42vw;
	}

	.dp-header__actions { gap: 8px; }
	.dp-header__cta {
		display: inline-flex;
		padding: 8px 12px;
		font-size: 12px;
	}

	.dp-header__nav { max-height: calc(100svh - 60px); }

	/* Burger légèrement plus compact */
	.dp-header__toggle { padding: 8px 9px; }
	.dp-header__toggle-bars { width: 20px; height: 14px; }
}

/* ---- ≤ 360px : très petits mobiles ---- */
@media (max-width: 360px) {
	.dp-header__brand img { max-width: 52vw; }
	.dp-header__cta { display: none; }
}

/* =====================================================================
 * FOOTER
 * ===================================================================== */
.dp-site-footer {
	background: var(--dp-footer-bg, #fff);
	color: var(--dp-footer-text, #3A4A52);
	font-family: var(--dp-font-base, 'Segoe UI', system-ui, sans-serif);
	font-size: 14px;
	padding: 56px 0 24px;
	border-top: 1px solid rgba(10, 79, 90, .08);
}
.dp-footer__inner {
	position: relative;
}
.dp-back-to-top {
	position: absolute;
	top: 0;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dp-primary, #0E6E7E);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.dp-back-to-top svg {
	width: 14px;
	height: 14px;
}
.dp-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	padding: 32px 0 56px;
}
.dp-footer__brand img {
	max-height: 64px;
	width: auto;
	display: block;
}
.dp-footer__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--dp-primary-dark, #0A4F5A);
	text-decoration: none;
}
.dp-socials {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dp-socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--dp-social-bg, #0A4F5A);
	color: var(--dp-social-icon, #fff);
	border-radius: 4px;
	text-decoration: none;
	transition: background .2s, transform .2s;
}
.dp-socials__link:hover {
	background: var(--dp-primary-fill, var(--dp-primary, #0E6E7E));
	color: var(--dp-on-primary, #fff);
	transform: translateY(-2px);
}
.dp-socials__link svg {
	width: 16px;
	height: 16px;
}

/* ---------- Bas du footer ---------- */
.dp-footer__legal-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 16px;
	padding: 16px 0 0;
	border-top: 1px solid rgba(10, 79, 90, .08);
	font-size: 13px;
}
.dp-footer__legal-menu a {
	color: var(--dp-footer-text, #3A4A52);
	text-decoration: none;
}
.dp-footer__legal-menu a:hover { color: var(--dp-primary, #0E6E7E); }

.dp-footer__copyright {
	font-size: 13px;
	padding: 16px 0 0;
	border-top: 1px solid rgba(10, 79, 90, .08);
	color: var(--dp-footer-text, #3A4A52);
	line-height: 1.6;
}
.dp-footer__copyright a {
	color: var(--dp-primary, #0E6E7E);
	text-decoration: none;
	font-weight: 600;
}
.dp-footer__copyright a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.dp-back-to-top {
		position: static;
		margin-bottom: 16px;
	}
	.dp-footer__top {
		flex-direction: column;
		align-items: flex-start;
		padding: 8px 0 32px;
	}
}

/* =====================================================================
 * IDENTITÉ 2026
 * ---------------------------------------------------------------------
 * Ce qui suit reprend l'en-tête et le pied de page sur la nouvelle charte.
 * Les règles arrivent après celles d'origine et les remplacent là où le
 * dessin a changé, plutôt que de réécrire le fichier : les réglages du
 * Customizer déjà en place continuent de fonctionner.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * En-tête posé sur le héros
 * ---------------------------------------------------------------------
 * Sur une page qui porte le héros dôme, l'en-tête est transparent et son
 * logotype passe en négatif : une barre blanche couperait la photo en deux dès
 * le premier écran.
 *
 * Le retour au blanc opaque est piloté par le bloc, qui pose
 * `dp-dome-covered` sur <html> quand le dôme a recouvert l'écran. Le thème ne
 * décide que de l'état de départ — et ne suit surtout pas le scroll de son
 * côté : deux sources de vérité pour le même basculement finiraient par se
 * contredire d'une frame.
 * --------------------------------------------------------------------- */

/* Deux classes dans le sélecteur, et ce n'est pas décoratif : l'en-tête porte
   aussi `is-sticky`, dont la règle `.dp-site-header.is-sticky` pèse deux
   classes. Avec une seule, `position: sticky` gagnait — l'en-tête gardait sa
   place dans le flux et poussait le héros de sa propre hauteur vers le bas. Le
   dôme démarrait alors 89 px trop bas et la photo ne touchait pas le haut de
   l'écran. */
.dp-site-header.dp-site-header--over {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid transparent;
	transition: background var(--dp-duration-slow, .25s) ease, border-color var(--dp-duration-slow, .25s) ease;
}

/* Le fond blanc ne vient pas que de l'en-tête : la barre intérieure
   `.dp-header` porte le sien, et c'est lui qui restait visible en bande de
   89 px sur la photo — avec, pour seul indice, un logotype négatif devenu
   invisible sauf son dôme en dégradé, la seule partie colorée du fichier. */
.dp-site-header--over .dp-header {
	background: transparent;
}

.dp-dome-covered .dp-site-header--over .dp-header {
	background: transparent;
}

/* Le topbar utilitaire n'a pas de fond à lui sur la photo : il se fondrait en
   bandeau clair au-dessus d'un en-tête transparent. */
.dp-site-header--over .dp-topbar {
	background: transparent;
	color: rgba(255, 255, 255, .82);
}

.dp-site-header--over .dp-topbar__link,
.dp-site-header--over .dp-menu > li > a,
.dp-site-header--over .dp-header__title {
	color: #ffffff;
}

.dp-site-header--over .dp-header__brand {
	position: relative;
}

/* Les deux logotypes sont dans le DOM et se superposent : le positif s'efface,
   le négatif apparaît. Échanger le fichier au moment du basculement ferait
   clignoter le logo le temps du chargement de la seconde image. */
.dp-header__logo-negative {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dp-duration-slow, .25s) ease;
}

.dp-site-header--over .dp-header__logo-negative {
	opacity: 1;
}

.dp-site-header--over .dp-header__brand img:not(.dp-header__logo-negative),
.dp-site-header--over .dp-header__brand .custom-logo {
	opacity: 0;
	transition: opacity var(--dp-duration-slow, .25s) ease;
}

.dp-site-header--over .dp-header__toggle-bars span {
	background: #ffffff;
}

/* Le dôme a recouvert l'écran : l'en-tête reprend son fond et son logo positif.
   Le fond est translucide et flouté — c'est le seul endroit du site, avec les
   voiles de photo, où la charte autorise la transparence. */
.dp-dome-covered .dp-site-header.dp-site-header--over {
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: var(--dp-blur-panel, saturate(140%) blur(14px));
	backdrop-filter: var(--dp-blur-panel, saturate(140%) blur(14px));
	border-bottom-color: var(--dp-color-border, #dedede);
}

.dp-dome-covered .dp-site-header--over .dp-topbar {
	background: var(--dp-topbar-bg, #EFF4F7);
	color: var(--dp-topbar-text, #0E6E7E);
}

.dp-dome-covered .dp-site-header--over .dp-topbar__link {
	color: var(--dp-topbar-text, #0E6E7E);
}

.dp-dome-covered .dp-site-header--over .dp-menu > li > a,
.dp-dome-covered .dp-site-header--over .dp-header__title {
	color: var(--dp-color-text, #303030);
}

.dp-dome-covered .dp-site-header--over .dp-header__logo-negative {
	opacity: 0;
}

.dp-dome-covered .dp-site-header--over .dp-header__brand img:not(.dp-header__logo-negative),
.dp-dome-covered .dp-site-header--over .dp-header__brand .custom-logo {
	opacity: 1;
}

.dp-dome-covered .dp-site-header--over .dp-header__toggle-bars span {
	background: var(--dp-color-text, #303030);
}

/* Le menu ouvert impose le fond opaque quel que soit l'état du dôme : un menu
   déroulant sur une photo est illisible. */
.dp-site-header--over:has(.dp-header__toggle[aria-expanded="true"]) {
	background: rgba(255, 255, 255, .98);
	border-bottom-color: var(--dp-color-border, #dedede);
}

/* ---------------------------------------------------------------------
 * Navigation : capitales suivies, bouton en pilule
 * --------------------------------------------------------------------- */

.dp-menu > li > a {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
}

.dp-header__cta {
	border-radius: var(--dp-radius-pill, 999px);
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	/* La charte a calculé la couleur du texte pour cet aplat : sur un pastel
	   elle vaut l'encre, sur un foncé le blanc. Le thème ne la devine pas. */
	background: var(--dp-primary-fill, var(--dp-color-primary-fill, #61c2d0));
	color: var(--dp-on-primary, var(--dp-color-on-primary, #303030));
	border-color: transparent;
}

.dp-header__cta:hover,
.dp-header__cta:focus-visible {
	background: var(--dp-button-hover, var(--dp-color-primary-dark, #52a5b1));
	color: var(--dp-button-hover-text, var(--dp-color-on-primary-dark, #303030));
	transform: var(--dp-lift-hover, translateY(-2px));
}

/* Sur la photo, le bouton reste lisible en contour blanc : l'aplat pastel de la
   charte s'y verrait à peine. La règle qui suit le remet en aplat une fois le
   dôme refermé — elle porte une classe de plus, donc elle gagne sans !important
   et sans :not() à sélecteur complexe, que Safari a longtemps ignoré. */
.dp-site-header--over .dp-header__cta {
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, .7);
}

.dp-dome-covered .dp-site-header--over .dp-header__cta {
	background: var(--dp-primary-fill, var(--dp-color-primary-fill, #61c2d0));
	color: var(--dp-on-primary, var(--dp-color-on-primary, #303030));
	border-color: transparent;
}

/* ---------------------------------------------------------------------
 * Pied de page 2026
 * --------------------------------------------------------------------- */

.dp-site-footer {
	padding: 56px 0 0;
	border-top: 0;
}

.dp-footer__top {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(30px, 4vw, 60px);
	align-items: start;
	padding: 0 0 36px;
}

.dp-footer__heading {
	margin: 18px 0 12px;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-footer-heading, var(--dp-color-text-faint, #8A8A8A));
}

.dp-footer__heading--inline {
	margin: 0;
}

.dp-footer__columns {
	display: grid;
	grid-template-columns: repeat(var(--dp-footer-cols, 4), minmax(0, 1fr));
	gap: 24px;
}

.dp-footer__column .dp-footer__heading {
	margin-top: 0;
}

.dp-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dp-footer__menu a {
	font-size: 14px;
	text-decoration: none;
	color: var(--dp-link, var(--dp-color-link, #417e88));
}

.dp-footer__menu a:hover,
.dp-footer__menu a:focus-visible {
	color: var(--dp-link-hover, var(--dp-color-link-hover, #325f66));
	text-decoration: underline;
}

/* Les réseaux sont des liens nommés, pas des pastilles à icône : la charte
   n'a pas de jeu d'icônes pour eux, et une pastille par réseau ferait cinq
   aplats de marque dans un coin du pied de page. */
.dp-socials {
	flex-wrap: wrap;
	gap: 12px;
}

.dp-socials__link {
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	font-size: 13px;
	color: var(--dp-link, var(--dp-color-link, #417e88));
}

.dp-socials__link:hover,
.dp-socials__link:focus-visible {
	background: transparent;
	color: var(--dp-link-hover, var(--dp-color-link-hover, #325f66));
	transform: none;
	text-decoration: underline;
}

.dp-footer__bottom {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	padding: 24px 0 28px;
	border-top: 1px solid var(--dp-footer-rule, var(--dp-color-border, #dedede));
}

.dp-footer__locations {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-footer__locations img {
	height: 26px;
	width: auto;
	display: block;
}

.dp-footer__locations span {
	font-size: 13px;
	color: var(--dp-footer-heading, var(--dp-color-text-faint, #8A8A8A));
}

/* Le copyright part à droite de la même ligne, et redescend seul quand la
   ligne ne tient plus. */
.dp-footer__copyright {
	margin-left: auto;
	font-size: 12px;
	color: var(--dp-footer-heading, var(--dp-color-text-faint, #8A8A8A));
}

/* Le filet de dégradé ferme la page : c'est la seule bande de couleur pleine
   du pied de page, et elle est pleine largeur — pas dans le conteneur. */
.dp-footer__rule {
	height: 8px;
	background: var(--dp-gradient-primary, linear-gradient(120deg, #61c2d0 0%, #98d0c1 34%, #a9cf8e 63%, #fff399 100%));
}

@media (max-width: 1080px) {
	.dp-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.dp-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.dp-footer__columns { grid-template-columns: 1fr; }

	.dp-footer__copyright { margin-left: 0; }
}

/* =====================================================================
 * SÉLECTEUR DE LANGUE
 * ---------------------------------------------------------------------
 * Deux formes. **En ligne** jusqu'à deux langues : l'aller-retour FR / EN
 * tient en un clic, et ouvrir un menu pour choisir entre deux entrées coûte
 * un geste de trop. **En liste déroulante** au-delà : quatre codes alignés
 * dans la barre deviennent un rang de bruit.
 *
 * Les libellés sont des codes en capitales suivies — le vocabulaire de la
 * charte pour les petits libellés. « Français » serait trop long pour la barre,
 * et le nom complet reste lu par les lecteurs d'écran.
 * ===================================================================== */

.dp-lang {
	--dp-lang-text: var(--dp-color-text-muted, #5b5b5b);
	--dp-lang-text-active: var(--dp-color-text, #303030);
	--dp-lang-bg-active: var(--dp-color-primary-soft, #ecf8f9);
	--dp-lang-rule: var(--dp-color-border, #dedede);

	display: flex;
	align-items: center;
	font-family: var(--dp-font-heading, inherit);
}

.dp-lang__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Un filet à gauche, dans l'en-tête seulement : sans lui, « FR EN » se lit
   comme deux dernières entrées du menu principal. */
.dp-lang--header.dp-lang--inline {
	padding-left: 14px;
	margin-left: 4px;
	border-left: 1px solid var(--dp-lang-rule);
}

.dp-lang__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-radius: var(--dp-radius-pill, 999px);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dp-lang-text);
	transition: var(--dp-transition-base, all .2s ease);
}

.dp-lang__link:hover,
.dp-lang__link:focus-visible {
	color: var(--dp-lang-text-active);
	background: var(--dp-lang-bg-active);
}

.dp-lang__link:focus-visible {
	outline: none;
	box-shadow: var(--dp-focus-ring, 0 0 0 3px rgba(65, 126, 136, .28));
}

/* La langue courante est marquée par un aplat, pas par un simple gras : entre
   deux codes de deux lettres, une différence de graisse ne se voit pas. */
.dp-lang__item.is-current .dp-lang__link {
	color: var(--dp-lang-text-active);
	background: var(--dp-lang-bg-active);
	cursor: default;
}

/* La page n'existe pas dans cette langue : le lien reste actif — il mène à
   l'accueil de la langue, ce qui vaut mieux qu'une impasse — mais il est
   atténué pour ne pas promettre la même page ailleurs. */
.dp-lang__item.is-untranslated .dp-lang__link {
	opacity: .55;
}

.dp-lang__item.is-untranslated .dp-lang__link:hover,
.dp-lang__item.is-untranslated .dp-lang__link:focus-visible {
	opacity: 1;
}

.dp-lang__flag img {
	display: block;
	width: 16px;
	height: auto;
	border-radius: 2px;
}

/* ---------- Forme en liste déroulante ---------- */

.dp-lang--dropdown {
	position: relative;
}

.dp-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--dp-lang-rule);
	border-radius: var(--dp-radius-pill, 999px);
	background: transparent;
	color: var(--dp-lang-text-active);
	font-family: inherit;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--dp-transition-base, all .2s ease);
}

.dp-lang__toggle:hover,
.dp-lang__toggle:focus-visible {
	background: var(--dp-lang-bg-active);
}

.dp-lang__toggle:focus-visible {
	outline: none;
	box-shadow: var(--dp-focus-ring, 0 0 0 3px rgba(65, 126, 136, .28));
}

.dp-lang__caret {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	/* Tracé plutôt qu'écrit : Graphie n'a pas le glyphe « ▾ », et le navigateur
	   y substitue un carré. Le triangle en bordures suit la couleur du texte et
	   ne dépend d'aucune police. */
	transform: rotate(45deg) translateY(-2px);
	transform-origin: center;
	transition: transform var(--dp-duration, .2s) ease;
}

.dp-lang__toggle[aria-expanded="true"] .dp-lang__caret {
	transform: rotate(225deg) translateY(-2px);
}

/* La liste est masquée par `display: none` et non par l'opacité : transparente,
   elle resterait dans l'ordre de tabulation et annoncée aux lecteurs d'écran. */
.dp-lang--dropdown .dp-lang__list {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 148px;
	padding: 6px;
	background: var(--dp-color-surface, #fff);
	border-radius: var(--dp-radius-md, 16px);
	box-shadow: var(--dp-shadow-md, 0 10px 28px rgba(16, 51, 96, .10));
}

.dp-lang--dropdown.is-open .dp-lang__list {
	display: flex;
}

.dp-lang--dropdown .dp-lang__link {
	border-radius: var(--dp-radius-sm, 10px);
	padding: 9px 12px;
	justify-content: flex-start;
}

/* En liste, le nom complet reprend sa place : il y a la largeur pour lui, et
   « Français » se choisit plus sûrement que « FR ». */
.dp-lang--dropdown .dp-lang__link .screen-reader-text {
	position: static !important;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, .12em);
}

.dp-lang--dropdown .dp-lang__list .dp-lang__code {
	display: none;
}

/* ---------- Posé sur le héros ---------- */

/* Sur la photo, un aplat blanc à 18 % ne se voit pas : les deux codes se
   ressemblent et on ne sait plus dans quelle langue on est. On écarte donc les
   deux états — la langue courante passe en aplat franc, l'autre s'atténue
   nettement. C'est le seul endroit du sélecteur où les valeurs diffèrent de la
   version sur fond blanc, et c'est la surface qui l'impose. */
.dp-site-header--over .dp-lang {
	--dp-lang-text: rgba(255, 255, 255, .62);
	--dp-lang-text-active: #ffffff;
	--dp-lang-bg-active: rgba(255, 255, 255, .3);
	--dp-lang-rule: rgba(255, 255, 255, .5);
}

.dp-dome-covered .dp-site-header--over .dp-lang {
	--dp-lang-text: var(--dp-color-text-muted, #5b5b5b);
	--dp-lang-text-active: var(--dp-color-text, #303030);
	--dp-lang-bg-active: var(--dp-color-primary-soft, #ecf8f9);
	--dp-lang-rule: var(--dp-color-border, #dedede);
}

/* La liste déroulante, elle, reste sur fond blanc même sur la photo : une liste
   translucide posée sur une image ne se lit pas. */
.dp-site-header--over .dp-lang--dropdown .dp-lang__list {
	--dp-lang-text: var(--dp-color-text-muted, #5b5b5b);
	--dp-lang-text-active: var(--dp-color-text, #303030);
	--dp-lang-bg-active: var(--dp-color-primary-soft, #ecf8f9);
}

/* ---------- Dans le tiroir mobile ---------- */

.dp-lang--drawer {
	padding: 0 0 18px;
	border-bottom: 1px solid var(--dp-lang-rule);
	margin-bottom: 6px;
}

/* Dans le tiroir, toujours en ligne et en grand : la place ne manque pas, et
   une liste déroulante dans un tiroir déjà ouvert est un menu dans un menu. */
.dp-lang--drawer .dp-lang__toggle {
	display: none;
}

.dp-lang--drawer .dp-lang__list {
	display: flex;
	flex-direction: row;
	position: static;
	min-width: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	gap: 8px;
}

.dp-lang--drawer .dp-lang__link {
	padding: 12px 18px;
	font-size: 13px;
}

.dp-lang--drawer .dp-lang__code { display: inline; }

.dp-lang--drawer .dp-lang__link .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Sous 420 px, seul le design barre déplace les langues dans le tiroir.
   Le design produit garde le sélecteur dans l'en-tête, sans CTA mobile. */
@media (max-width: 420px) {
	.dp-site-header--bar .dp-lang--header { display: none; }
}

/* =====================================================================
 * PROFILS DE SITE — deux en-têtes, un seul balisage
 * =====================================================================
 * `dp-site-header--bar` est la barre d'origine, inchangée : c'est l'en-tête du
 * **site groupe**. `dp-site-header--frame` est le passe-partout C7 — encadré
 * blanc fixe sur les quatre côtés, navigation en capsule dans la marge haute —
 * et c'est l'en-tête des **sites produits**.
 *
 * Les deux classes nomment le design, jamais le site. Nommées d'après les
 * sites, elles avaient été attribuées à l'envers, et rien dans le CSS ne
 * permettait de s'en apercevoir : il fallait ouvrir la page.
 *
 * Une troisième classe, `dp-site-header--mat`, dit que le cadre est réellement
 * dessiné. Le design peut être choisi sans lui — la capsule tient aussi dans
 * une barre ordinaire.
 *
 * Tout ce qui n'apparaît pas ici est commun aux deux : c'est la raison d'être
 * d'un thème unique.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Réseaux sociaux dans l'en-tête
 * ---------------------------------------------------------------------
 * Des pastilles et non des libellés : dans une barre déjà chargée d'un menu,
 * d'un sélecteur de langue et d'un bouton, « LinkedIn » écrit en toutes
 * lettres se lit comme une sixième entrée de menu.
 * --------------------------------------------------------------------- */
.dp-header-socials {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.dp-header-socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--dp-radius-pill, 999px);
	color: var(--dp-primary, #0E6E7E);
	background: transparent;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.dp-header-socials__link svg {
	width: 17px;
	height: 17px;
	display: block;
}
.dp-header-socials__link:hover,
.dp-header-socials__link:focus-visible {
	background: var(--dp-topbar-bg, #EFF4F7);
	color: var(--dp-primary-dark, #0A4F5A);
	transform: translateY(-1px);
}

/* Sur le héros dôme, l'en-tête est posé sur la photo : la pastille passe en
   blanc, comme le reste de la barre, jusqu'à ce que le dôme recouvre l'écran. */
.dp-site-header--over .dp-header-socials__link { color: #fff; }
.dp-site-header--over .dp-header-socials__link:hover,
.dp-site-header--over .dp-header-socials__link:focus-visible {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}
.dp-dome-covered .dp-site-header--over .dp-header-socials__link {
	color: var(--dp-primary, #0E6E7E);
}

/* Dans le tiroir, les pastilles sont posées sur du blanc et alignées à gauche
   avec le reste : elles y gagnent leur fond, sans quoi elles flottent. */
.dp-header-socials--drawer {
	padding: 18px 24px 4px;
	gap: 10px;
}
.dp-header-socials--drawer .dp-header-socials__link {
	width: 40px;
	height: 40px;
	background: var(--dp-topbar-bg, #EFF4F7);
}

@media (max-width: 1024px) {
	/* L'en-tête mobile n'a place que pour le logo et le burger ; les réseaux
	   restent dans le tiroir. */
	.dp-header-socials--header { display: none; }
}

/* ---------------------------------------------------------------------
 * Design « barre »
 * ---------------------------------------------------------------------
 * Rien ici, et c'est volontaire.
 *
 * C'est l'en-tête d'origine, inchangé : il est décrit plus haut dans cette
 * feuille, dans les sections HEADER et Top bar, exactement comme avant l'ajout
 * du second design. Lui donner des règles propres — même cosmétiques — le
 * ferait diverger de ce que rendent les pages publiées.
 *
 * La classe `dp-site-header--bar` existe quand même : elle sert de prise à une
 * surcharge de site, et elle rend lisible dans l'inspecteur lequel des deux
 * designs est actif.
 * --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Design « passe-partout » — la navigation en capsule
 * ---------------------------------------------------------------------
 * Une capsule claire enveloppe les entrées, et l'entrée courante y prend une
 * pastille blanche. Le bouton d'appel à l'action est une pilule d'encre, à
 * l'autre bout de la marge.
 *
 * La navigation est CENTRÉE et non poussée à droite : dans le passe-partout,
 * la marge haute est une surface, pas une barre d'outils. Le logo tient un
 * bord, le bouton l'autre, et la capsule flotte entre les deux.
 * --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/* Trois colonnes de largeurs égales aux extrémités : c'est la seule façon
	   de centrer la capsule sur la page et non sur l'espace qui reste entre un
	   logo et un bouton de largeurs différentes. */
	.dp-site-header--frame .dp-header__inner {
		grid-template-columns: 1fr auto 1fr;
		min-height: 0;
	}
	.dp-site-header--frame .dp-header__nav--desktop {
		justify-content: center;
	}
	.dp-site-header--frame .dp-header__actions {
		justify-self: end;
	}

	/*
	 * La capsule et la pastille sont deux pilules concentriques : l'anneau de
	 * fond a la même épaisseur sur les quatre côtés, sinon l'œil lit deux formes
	 * décalées plutôt qu'une dans l'autre. C'était `5px 6px` — l'asymétrie ne
	 * causait pas l'aplatissement (voir la règle `--mat` plus bas), mais elle ne
	 * l'arrangeait pas.
	 */
	.dp-site-header--frame .dp-menu--pill {
		background: var(--dp-menu-pill-bg, #F4F6F6);
		border-radius: var(--dp-radius-pill, 999px);
		padding: var(--dp-menu-pill-ring, 7px);
		gap: 0;
	}
	.dp-site-header--frame .dp-menu--pill > li > a {
		border-radius: var(--dp-radius-pill, 999px);
		padding: var(--dp-menu-pill-pad-y, 12px) var(--dp-menu-pill-pad-x, 17px);
		/*
		 * L'interligne est fixé ici, et il compte autant que les rembourrages.
		 *
		 * Sans lui, la pastille prend l'interligne hérité du corps de page, que
		 * le thème parent, Elementor et la charte se disputent — et que l'un des
		 * trois pose en pixels, donc sans rapport avec les 11 px du libellé :
		 * mesurée, elle faisait 24 px de haut là où 11 × 1.2 en donne 13.
		 *
		 * Fixé, la hauteur ne dépend plus que des rembourrages ci-dessus, donc
		 * des réglages. 1.2 laisse la place aux capitales accentuées — ESPÈCES,
		 * À PROPOS — qu'un interligne serré ferait rogner.
		 */
		line-height: 1.2;
		font-family: var(--dp-font-heading, inherit);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: var(--dp-tracking-caps, .08em);
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--dp-menu-pill-text, var(--dp-text, #303030));
		transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
	}
	.dp-site-header--frame .dp-menu--pill > li > a:hover {
		color: var(--dp-primary, #0E6E7E);
	}
	/* L'entrée courante : une pastille blanche dans la capsule claire. Elle
	   porte une ombre courte — sans elle, sur une capsule très claire, la
	   pastille ne se détache pas et l'entrée courante ne se voit plus. */
	.dp-site-header--frame .dp-menu--pill > li.current-menu-item > a,
	.dp-site-header--frame .dp-menu--pill > li.current-menu-ancestor > a {
		background: var(--dp-menu-pill-active-bg, #fff);
		color: var(--dp-menu-pill-active-text, var(--dp-text, #303030));
		/* Deux plans : un trait net qui pose l'arête de la pastille, un halo
		   diffus qui la soulève. L'ombre courte seule se voyait sur le bleu
		   d'avant ; sur le gris très clair elle disparaissait. */
		box-shadow: 0 1px 2px rgba(48, 48, 48, .06), 0 4px 10px rgba(48, 48, 48, .08);
	}

	/* Le chevron des sous-menus alourdit une capsule de cinq entrées en
	   capitales : il ne paraît qu'au survol. */
	.dp-site-header--frame .dp-menu--pill > li.dp-has-dropdown > a::after,
	.dp-site-header--frame .dp-menu--pill > li.menu-item-has-children > a::after {
		opacity: 0;
		width: 0;
		margin-left: -5px;
		transition: opacity .2s ease, width .2s ease, margin .2s ease, transform .22s ease;
	}
	.dp-site-header--frame .dp-menu--pill > li:hover > a::after,
	.dp-site-header--frame .dp-menu--pill > li:focus-within > a::after {
		opacity: 1;
		width: 10px;
		margin-left: 0;
	}

	/*
	 * Le bouton : une pilule d'encre, pleine. C'est le seul aplat foncé de la
	 * marge haute, et c'est ce qui en fait l'action principale sans qu'aucune
	 * autre couleur n'ait à intervenir.
	 */
	.dp-site-header--frame .dp-header__cta {
		background: var(--dp-cta-bg, var(--dp-text, #303030));
		color: var(--dp-cta-text, #fff);
		border-color: transparent;
		padding: 11px 22px;
		font-size: 13px;
		font-weight: 700;
	}
	.dp-site-header--frame .dp-header__cta:hover,
	.dp-site-header--frame .dp-header__cta:focus-visible {
		background: var(--dp-primary-fill, #0E6E7E);
		color: var(--dp-on-primary, #fff);
		border-color: transparent;
	}
}

/* ---------------------------------------------------------------------
 * Le passe-partout — C7
 * ---------------------------------------------------------------------
 * « Un encadré blanc fixe encadre tout le site, logo et navigation vivent dans
 * la marge blanche, le contenu défile dans des panneaux arrondis séparés par
 * des respirations blanches. »
 *
 * Les valeurs sont celles de la direction C7 telle qu'elle a été validée
 * (`ui_kits/website-concepts/ImmMat.jsx`) : 22 px sur les flancs, 76 en haut,
 * 54 en bas ; panneaux à 26 px de rayon, séparés par 14 px de blanc.
 *
 * Trois pièces, et il faut les trois :
 *
 *   1. le rembourrage de <body>, qui réserve la place du cadre ;
 *   2. les quatre bandes fixes, qui referment le cadre par-dessus le contenu —
 *      une section Elementor en pleine largeur se pose en `width: 100vw` avec
 *      une marge négative et sortirait sinon par les flancs ;
 *   3. les panneaux, qui sont ce qui distingue un passe-partout d'une simple
 *      marge : sans eux, le contenu touche les quatre bords et le cadre ne se
 *      lit pas.
 * --------------------------------------------------------------------- */
.dp-body {
	--dp-frame-side: 22px;
	--dp-frame-top: 76px;
	/*
	 * La marge basse vaut celle des flancs, et non plus 54 px.
	 *
	 * Elle était haute parce qu'elle portait une barre : copyright et liens
	 * légaux, les mêmes que le pied de page quelques centimètres plus haut.
	 * Cette barre est retirée — le rembourrage de `<body>` vaut
	 * `frame-bottom + frame-side`, donc la seule marge des flancs — et le cadre
	 * se referme d'un trait égal sur trois côtés, comme dans la direction C7.
	 */
	--dp-frame-bottom: 0px;
	--dp-frame-radius: 26px;
	--dp-frame-gutter: 14px;
}

@media (max-width: 1024px) {
	/* Sur téléphone, le cadre mangerait un tiers de la largeur utile : les
	   flancs se réduisent et la marge haute devient celle d'une barre. */
	.dp-body {
		--dp-frame-side: 10px;
		--dp-frame-top: 64px;
		--dp-frame-radius: 18px;
		--dp-frame-gutter: 10px;
	}
}

/* ── 1. La place du cadre ── */
.dp-frame-on {
	padding: var(--dp-frame-top) var(--dp-frame-side) calc(var(--dp-frame-bottom) + var(--dp-frame-side));
	background: var(--dp-header-bg, #fff);
}

/*
 * Le décalage d'ancre : `scroll-padding-top` vit sur <html>, hors de portée
 * d'une variable posée sur <body>. C'est donc le script qui publie la hauteur
 * de l'en-tête fixe dans --dp-header-height, exactement comme il le fait pour
 * l'en-tête collant — la règle générale plus haut suffit alors.
 */

/* ── 2. L'en-tête, qui EST la marge haute ── */
.dp-site-header--mat {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--dp-frame-top);
	z-index: 1000;
	background: var(--dp-header-bg, #fff);
	display: flex;
	align-items: center;
	/* Pas d'ombre : le cadre est une surface continue, et une ombre sous
	   l'en-tête y dessinerait une ligne qui n'existe pas dans le passe-partout. */
	box-shadow: none;
}
.dp-site-header--mat .dp-header,
.dp-site-header--mat .dp-header__inner {
	width: 100%;
}
.dp-site-header--mat .dp-container {
	max-width: none;
	/* Le retrait du kit : la marge du cadre, plus 14 px. Le logo tombe ainsi
	   sur la même verticale que le bord gauche des panneaux, décalé d'une
	   gouttière. */
	padding: 0 calc(var(--dp-frame-side) + var(--dp-frame-gutter));
}
/*
 * L'en-tête du cadre est bas : la navigation ne peut pas garder les 28 px de
 * rembourrage vertical de la barre d'origine, qui la feraient déborder.
 *
 * `:not(.dp-menu--pill)` n'est pas une précaution, c'est le correctif.
 *
 * Écrite sans lui, cette règle visait aussi la capsule — même spécificité que
 * celle qui la dessine, mais plus bas dans la feuille, donc gagnante — et lui
 * remettait le rembourrage vertical à zéro. La pastille de l'entrée courante ne
 * gardait alors que son interligne : 24 px de haut pour 110 de long. Un rayon de
 * 999 px n'y dessine que des bouts minuscules au regard de la longueur, et la
 * pilule se lit comme un rectangle. C'est l'aplatissement constaté, et le rayon
 * n'y était pour rien — il valait déjà 999 px.
 *
 * Et la règle ne pouvait viser QUE la capsule : `--mat` n'est posé que sur le
 * design passe-partout, dont le menu porte toujours `--pill` (header.php). La
 * barre des 28 px qu'elle prétendait corriger n'a jamais rencontré cette classe.
 * On la garde scopée plutôt que supprimée, pour le jour où les deux se croisent.
 */
.dp-site-header--mat .dp-menu:not(.dp-menu--pill) > li > a {
	padding-top: 0;
	padding-bottom: 0;
}

/* Le logotype tient dans la marge : 34 px, comme dans le kit. À 56 px — la
   valeur de la barre d'origine — il touche les deux bords du cadre et la
   marge cesse de se lire comme une marge. */
.dp-site-header--mat .dp-header__brand img {
	max-height: var(--dp-frame-logo, 34px);
}

/* Le bouton d'appel à l'action, à la hauteur de la marge lui aussi — et à celle
   de la capsule, qui retrouve ses rembourrages ci-dessus. Un bouton de 40 px à
   côté d'une capsule de 51 se lit comme un oubli. */
.dp-site-header--mat .dp-header__cta {
	padding: 13px 22px;
	font-size: 13px;
}

/* ── 3. La fenêtre, découpée d'un seul tenant ──
 *
 * Le passe-partout est un rectangle blanc percé d'une ouverture arrondie. On le
 * dessine donc comme tel : un élément fixe aux dimensions de l'ouverture, avec
 * le rayon voulu, dont une ombre portée de très grande extension peint le blanc
 * tout autour.
 *
 * Trois bandes droites auraient fait le même travail sur les côtés, mais
 * laissé les quatre coins carrés — et ce sont les coins qui font lire un
 * passe-partout. Une ouverture, une règle, quatre coins justes.
 *
 * `pointer-events: none` : l'ombre couvre toute la fenêtre du navigateur, et
 * sans ça plus rien ne serait cliquable. */
.dp-frame__window {
	position: fixed;
	top: var(--dp-frame-top);
	left: var(--dp-frame-side);
	right: var(--dp-frame-side);
	bottom: calc(var(--dp-frame-bottom) + var(--dp-frame-side));
	z-index: 998;

	border-radius: var(--dp-frame-radius);
	/* `100vmax` couvre toujours la plus grande dimension de la fenêtre, quelle
	   que soit l'orientation. Une valeur en pixels finirait par être trop
	   courte sur un écran plus large que prévu. */
	box-shadow: 0 0 0 100vmax var(--dp-header-bg, #fff);
	pointer-events: none;
}

/* ── 4. La marge basse ──
 * Du blanc, et rien d'autre. Elle a porté une barre de mentions légales,
 * doublon de celle du pied de page ; la réserver au silence est ce qui
 * distingue une marge d'un bandeau.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * 5. Les panneaux
 * ---------------------------------------------------------------------
 * C'est la pièce qui fait le passe-partout. Chaque section de premier niveau
 * du contenu devient un panneau arrondi, et une respiration blanche les sépare.
 *
 * Le sélecteur vise les deux formes qu'Elementor produit : `.elementor-section`
 * pour les pages construites en sections, `.e-con` pour celles construites en
 * conteneurs. Lister les deux plutôt que d'employer un joker : un joker
 * attraperait aussi les colonnes et les conteneurs imbriqués, qui prendraient
 * chacun un arrondi.
 *
 * `overflow: clip` et non `hidden` : `hidden` fabrique un conteneur de
 * défilement, ce qui casse tout `position: sticky` posé dans la section — la
 * colonne de filtres du catalogue, par exemple. `clip` rogne sans rien créer.
 * --------------------------------------------------------------------- */
.dp-frame-on.dp-frame-panels .dp-content > .elementor > .elementor-section,
.dp-frame-on.dp-frame-panels .dp-content > .elementor > .e-con.e-parent {
	border-radius: var(--dp-frame-radius);
	overflow: clip;
	margin-bottom: var(--dp-frame-gutter);
}

/* La dernière respiration est portée par le rembourrage de <body> : la laisser
   ici ajouterait 14 px sous le dernier panneau, et le cadre serait plus épais
   en bas qu'en haut. */
.dp-frame-on.dp-frame-panels .dp-content > .elementor > .elementor-section:last-child,
.dp-frame-on.dp-frame-panels .dp-content > .elementor > .e-con.e-parent:last-child {
	margin-bottom: 0;
}

/*
 * Les sections « étirées ».
 *
 * Elementor les étire en JavaScript : il écrit en style inline la largeur de la
 * fenêtre et un décalage négatif, mesurés sur `document.documentElement`. Le
 * cadre n'existe pas pour ce calcul, et la section sort donc par les deux
 * flancs, d'exactement la largeur du cadre.
 *
 * Dans le passe-partout, la pleine largeur est celle du cadre : c'est ce que
 * veut dire encadrer. Les `!important` sont ici légitimes — ils ne priment pas
 * sur une feuille, mais sur un style inline écrit après coup.
 *
 * On ne vise que ce qui est réellement étiré : `.elementor-section-full_width`
 * et `.e-con-full` désignent autre chose — un contenu qui occupe toute la
 * largeur de sa section — et les toucher casserait des mises en page justes.
 */
.dp-frame-on .dp-content .elementor-section-stretched,
.dp-frame-on .dp-content .e-con[data-settings*="stretch"] {
	width: 100% !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Le pied de page complet est un panneau comme les autres. */
.dp-frame-on.dp-frame-panels .dp-site-footer {
	border-radius: var(--dp-frame-radius);
	overflow: clip;
}

/* =====================================================================
 * BOUTON FLOTTANT « REVENIR EN HAUT »
 * =====================================================================
 * Il se pose au-dessus du contenu, à droite, au-dessus de la marge basse du
 * cadre quand celui-ci est là. `hidden` est retiré par le script : la
 * transition part donc d'un élément déjà présent dans la mise en page, et
 * l'apparition est une opacité, pas un saut.
 * ===================================================================== */
.dp-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: calc(clamp(16px, 3vw, 32px) + var(--dp-to-top-offset, 0px));
	z-index: 998;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;

	border: 1px solid var(--dp-primary, #0E6E7E);
	border-radius: var(--dp-radius-pill, 999px);
	background: var(--dp-surface, #fff);
	color: var(--dp-primary, #0E6E7E);
	cursor: pointer;

	box-shadow: 0 8px 24px rgba(10, 79, 90, .16);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease, background-color .2s ease, color .2s ease;
}
.dp-to-top.is-visible {
	opacity: 1;
	transform: none;
}
.dp-to-top svg {
	width: 20px;
	height: 20px;
	display: block;
}
.dp-to-top:hover,
.dp-to-top:focus-visible {
	background: var(--dp-primary-fill, #0E6E7E);
	color: var(--dp-on-primary, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.dp-to-top { transition: opacity .01ms linear; transform: none; }
	.dp-header-socials__link:hover { transform: none; }
}

/* ---------------------------------------------------------------------
 * Mégamenu du design groupe
 * ---------------------------------------------------------------------
 * Le site groupe a une arborescence large — le groupe, l'impact, les
 * expertises, nous rejoindre — que la liste déroulante de 230 px du design
 * produits ne sait pas porter : elle en fait une colonne de quinze lignes.
 *
 * Le panneau descend donc sous la marge haute du passe-partout, arrondi en bas
 * comme les panneaux de contenu, et répartit les entrées en colonnes. Il est
 * `fixed` et non `absolute` : il doit s'aligner sur les bords du cadre, pas
 * sur l'entrée de menu qui l'ouvre.
 * --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.dp-site-header--mat .dp-menu--pill .sub-menu {
		position: fixed;
		/*
		 * Le panneau se pose sous l'en-tête, et l'en-tête n'est pas toujours
		 * au bord de la fenêtre : la barre d'administration le descend de sa
		 * propre hauteur. Le décalage est déjà mesuré pour l'en-tête et pour
		 * la fenêtre du cadre — il manquait ici, et le panneau remontait sous
		 * la capsule qui l'ouvre, à 32 px d'un administrateur connecté.
		 *
		 * `fixed` se mesure sur la fenêtre, pas sur l'en-tête : tout ce qui
		 * s'aligne sur le bas du cadre doit donc refaire la même somme.
		 */
		top: calc(var(--dp-frame-top) + var(--dp-adminbar-offset, 0px));
		left: var(--dp-frame-side);
		right: var(--dp-frame-side);
		min-width: 0;

		display: grid;
		grid-template-columns: repeat(var(--dp-mega-cols, 4), 1fr);
		gap: 8px 30px;
		align-content: start;

		padding: 30px clamp(30px, 4.4vw, 72px) 34px;
		border: 0;
		border-top: 1px solid var(--dp-footer-rule, rgba(48, 48, 48, .15));
		border-radius: 0 0 var(--dp-radius-xl, 26px) var(--dp-radius-xl, 26px);
		box-shadow: 0 26px 50px rgba(48, 48, 48, .14);
		transform: none;
	}
	.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu,
	.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu {
		transform: none;
	}
	.dp-site-header--mat .dp-menu--pill .sub-menu a {
		padding: 7px 0;
		font-family: var(--dp-font-heading, inherit);
		font-weight: 700;
		font-size: 16px;
		border-radius: 0;
	}
	.dp-site-header--mat .dp-menu--pill .sub-menu a:hover {
		background: transparent;
		text-decoration: underline;
		text-decoration-color: var(--dp-primary, #0E6E7E);
		text-underline-offset: 3px;
	}

	/* Le troisième niveau reste dans sa colonne, en texte courant, marqué par
	   un filet — c'est ce qui distingue une rubrique de ses pages. */
	.dp-site-header--mat .dp-menu--pill .sub-menu .sub-menu {
		position: static;
		display: block;
		opacity: 1;
		visibility: visible;
		padding: 0 0 0 12px;
		margin-top: 6px;
		border: 0;
		border-left: 2px solid var(--dp-topbar-bg, #EFF4F7);
		border-radius: 0;
		box-shadow: none;
	}
	.dp-site-header--mat .dp-menu--pill .sub-menu .sub-menu a {
		font-family: var(--dp-font-base, inherit);
		font-weight: 400;
		font-size: 14px;
		padding: 5px 0;
		color: var(--dp-footer-text, #3A4A52);
	}

	/* ── Le pont ──
	 *
	 * Entre le bas de l'entrée et le haut du panneau il y a 19 px de marge
	 * haute, et cette bande n'appartient à personne : la souris qui descend
	 * vers « Une seule santé » y perd le survol, l'entrée cesse d'être
	 * survolée, le panneau se referme sous le curseur. Le menu était
	 * inatteignable à la souris — seul le clavier y arrivait, par
	 * `:focus-within`.
	 *
	 * L'entrée s'étend donc jusqu'au panneau. La hauteur n'est pas un nombre
	 * relevé sur une capture mais la mesure elle-même : la capsule est centrée
	 * dans la marge haute, ce qui reste sous une entrée vaut donc la moitié de
	 * ce que la marge a de plus que l'entrée. Elle suit le réglage du cadre, y
	 * compris quand la barre d'administration décale les deux ensemble.
	 *
	 * Le pont n'existe qu'une fois l'entrée survolée : posé en permanence, il
	 * ferait de chaque bande sous une entrée une zone qui ouvre le menu. Au
	 * moment où la souris franchit le bord, l'entrée est encore survolée et le
	 * pont est déjà là pour la recevoir.
	 */
	.dp-site-header--mat .dp-menu--pill > li:hover::after,
	.dp-site-header--mat .dp-menu--pill > li:focus-within::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc((var(--dp-frame-top, 76px) - 100%) / 2 + 2px);
	}

	/* ── L'ouverture ──
	 *
	 * Le panneau ne s'ouvrait pas, il apparaissait : `transform: none` avait
	 * neutralisé le petit glissement de la liste déroulante d'origine, et il
	 * ne restait qu'un fondu de 0,2 s sur une surface qui fait toute la largeur
	 * du cadre. Un aplat de cette taille qui se matérialise sur place ne se lit
	 * pas comme un menu qui s'ouvre — il se lit comme un défaut d'affichage.
	 *
	 * Il se déroule donc, depuis le bas de la marge haute. C'est le geste du
	 * tiroir mobile, qui emploie déjà `clip-path` pour la même raison, et c'est
	 * le seul qui dise d'où vient le panneau.
	 *
	 * Les débords négatifs ne sont pas une marge de sécurité : une découpe
	 * posée sur la boîte couperait aussi l'ombre portée, et le panneau
	 * arriverait sans elle. 80 px couvrent les 50 px de diffusion.
	 */
	.dp-site-header--mat .dp-menu--pill > li > .sub-menu {
		clip-path: inset(0 -80px 100% -80px);
		/* La fermeture est deux fois plus brève que l'ouverture : on attend
		   qu'un menu s'ouvre, jamais qu'il se referme. */
		transition: clip-path .17s ease-in,
		            opacity .1s ease-in .07s,
		            visibility 0s linear .17s;
	}
	.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu,
	.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu {
		clip-path: inset(0 -80px -80px -80px);
		transition: clip-path .34s cubic-bezier(.22, .61, .36, 1),
		            opacity .1s linear,
		            visibility 0s linear 0s;
	}

	/*
	 * Les colonnes montent derrière le déroulé au lieu d'attendre en place
	 * dessous, décalées de 45 ms l'une après l'autre : c'est ce qui donne au
	 * panneau un sens de lecture, de la gauche vers la droite, que le fondu ne
	 * donnait pas.
	 *
	 * Au repos la transition est quasi nulle, et c'est voulu : les colonnes
	 * doivent être revenues à leur point de départ avant la réouverture, sans
	 * quoi passer d'une entrée à l'autre les prend en vol.
	 */
	.dp-site-header--mat .dp-menu--pill > li > .sub-menu > li {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .01s linear, transform .01s linear;
	}
	.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu > li,
	.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu > li {
		opacity: 1;
		transform: none;
		transition: opacity .28s ease-out, transform .34s cubic-bezier(.22, .61, .36, 1);
		transition-delay: calc(60ms + var(--dp-col, 0) * 45ms);
	}

	/* Le rang de la colonne, que le CSS ne sait pas compter autrement. Au-delà
	   de huit, le décalage cesse de croître plutôt que de s'emballer. */
	.dp-menu--pill > li > .sub-menu > li:nth-child(2) { --dp-col: 1; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(3) { --dp-col: 2; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(4) { --dp-col: 3; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(5) { --dp-col: 4; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(6) { --dp-col: 5; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(7) { --dp-col: 6; }
	.dp-menu--pill > li > .sub-menu > li:nth-child(n+8) { --dp-col: 7; }

	/* Le chevron accompagne l'ouverture au lieu de la précéder : même courbe,
	   même durée que le déroulé. */
	.dp-site-header--frame .dp-menu--pill > li.dp-has-dropdown > a::after,
	.dp-site-header--frame .dp-menu--pill > li.menu-item-has-children > a::after {
		transition: opacity .2s ease, width .2s ease, margin .2s ease,
		            transform .34s cubic-bezier(.22, .61, .36, 1);
	}

	/*
	 * Mouvement réduit : le panneau garde son fondu — un fondu n'est pas un
	 * mouvement — mais ne se déroule plus et ne décale plus ses colonnes.
	 */
	@media (prefers-reduced-motion: reduce) {
		.dp-site-header--mat .dp-menu--pill > li > .sub-menu,
		.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu,
		.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu {
			clip-path: none;
			transition: opacity .15s linear, visibility 0s linear .15s;
		}
		.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu,
		.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu {
			transition: opacity .15s linear, visibility 0s linear 0s;
		}
		.dp-site-header--mat .dp-menu--pill > li > .sub-menu > li,
		.dp-site-header--mat .dp-menu--pill > li:hover > .sub-menu > li,
		.dp-site-header--mat .dp-menu--pill > li:focus-within > .sub-menu > li {
			transform: none;
			transition: opacity .15s linear;
			transition-delay: 0s;
		}
	}
}

/* Le tiroir mobile passe au-dessus du cadre, et son voile aussi : les bandes
   blanches sont posées à 998, soit au-dessus du voile à 997. Sans cette
   descente, le voile s'arrêterait net aux flancs du cadre. */
.dp-menu-open .dp-frame__window {
	z-index: 996;
}

/* Design produit : le CTA reste accessible dans le tiroir mobile. */
@media (max-width: 1024px) {
	.dp-site-header--frame .dp-header__cta { display: none; }
}

/* La barre WordPress occupe 32/46 px avant la mesure JS. Sur téléphone,
   son décalage diminue lorsqu'elle quitte la fenêtre au défilement. */
.dp-header-design-frame.admin-bar { --dp-adminbar-offset: 32px; }
@media (max-width: 782px) {
	.dp-header-design-frame.admin-bar { --dp-adminbar-offset: 46px; }
}
.dp-header-design-frame .dp-site-header--mat,
.dp-header-design-frame .dp-site-header.is-sticky,
.dp-header-design-frame .dp-site-header--over,
.dp-header-design-frame .dp-drawer {
	top: var(--dp-adminbar-offset, 0px);
}
.dp-header-design-frame .dp-frame__window {
	top: calc(var(--dp-frame-top) + var(--dp-adminbar-offset, 0px));
}

/* =====================================================================
 * L'EN-TÊTE SE RESSERRE, PUIS PASSE AU TIROIR
 * =====================================================================
 * Le menu principal ne se coupe pas : ses entrées portent `nowrap`, et la
 * colonne qui les tient garde 40 px de minimum. Quand la somme des entrées
 * dépasse la place restée entre le logo et les boutons, la liste ne rétrécit
 * donc pas — elle sort de sa colonne par la gauche et se pose sur le logo.
 * C'est ce qu'on voyait entre 1025 px et ~1220 px, là où la barre est encore
 * en mode bureau : le point de rupture à 1024 px avait été calé sur un menu
 * plus court que celui d'aujourd'hui.
 *
 * Deux temps, et aucun des deux ne retire d'entrée au menu :
 *
 * 1. Ici, la rangée se resserre. Tout ce qui est de l'espace — gouttières,
 *    rembourrages, hauteur du logotype, pastilles — descend de sa valeur de
 *    confort à son plancher entre 1420 px et 1025 px. La typographie ne bouge
 *    pas : la chasse des capitales est une décision de charte, pas une
 *    réserve d'espace où puiser.
 *
 *    Les valeurs hautes elles-mêmes ont été retaillées, et c'est le point
 *    important : à pleine largeur, le conteneur offre 1 132 px et la rangée en
 *    demandait 1 147 — logotype 172, menu 664, boutons 263, deux gouttières de
 *    24. Elle ne tenait donc à AUCUNE largeur, puisque le conteneur plafonne à
 *    1 180 px et qu'élargir l'écran n'ajoute plus rien. Les espaces d'origine
 *    avaient été dessinés pour un menu plus court que celui-ci ; l'écart entre
 *    entrées passe de 28 à 22, la gouttière de 24 à 20, les rembourrages du
 *    bouton de 24 à 20. La rangée demande alors 1 098 px et respire de 54.
 *
 * 2. Quand le resserrement ne suffit plus — une entrée ajoutée, une traduction
 *    plus longue — le script mesure le débordement réel et pose
 *    `is-nav-compact` : l'en-tête bascule sur le tiroir, celui-là même qui
 *    sert déjà sous 1024 px.
 *
 * `min(réglage, …)` plutôt que `clamp()` partout où la valeur haute vient du
 * Customizer : le resserrement ne doit jamais remonter au-dessus de ce qui a
 * été réglé.
 * ===================================================================== */

@media (min-width: 1025px) {

	/* La gouttière de la grille. Le script s'en sert aussi comme distance
	   minimale exigée entre le logo, le menu et les boutons : ce qui sépare
	   les trois colonnes est ce qui définit qu'elles ne se touchent pas. */
	.dp-site-header .dp-header__inner {
		gap: clamp(12px, 1.6vw, 20px);
	}

	.dp-site-header .dp-menu:not(.dp-menu--pill) {
		gap: clamp(11px, 1.55vw, 22px);
	}

	/* Le design produits n'a pas de gouttière entre ses pastilles — elles se
	   touchent dans la capsule. C'est leur rembourrage qui fait l'espace, et
	   c'est donc lui qui se resserre. */
	.dp-site-header--frame .dp-menu--pill > li > a {
		padding-left: min(var(--dp-menu-pill-pad-x, 17px), max(9px, 1.15vw));
		padding-right: min(var(--dp-menu-pill-pad-x, 17px), max(9px, 1.15vw));
	}

	/* Le passe-partout garde son logotype de 34 px et son bouton de marge :
	   les deux sont mesurés sur la hauteur du cadre, pas sur la largeur. */
	.dp-site-header:not(.dp-site-header--mat) .dp-header__brand img {
		max-height: clamp(44px, 4.3vw, 56px);
	}
	.dp-site-header:not(.dp-site-header--mat) .dp-header__cta {
		padding-left: clamp(12px, 1.5vw, 20px);
		padding-right: clamp(12px, 1.5vw, 20px);
	}

	.dp-site-header .dp-header__actions {
		gap: clamp(6px, .8vw, 12px);
	}

	.dp-site-header .dp-lang--header.dp-lang--inline {
		padding-left: clamp(8px, .9vw, 12px);
	}
	.dp-site-header .dp-lang__link {
		padding-left: clamp(5px, .7vw, 9px);
		padding-right: clamp(5px, .7vw, 9px);
	}

	.dp-site-header .dp-header-socials--header {
		gap: clamp(2px, .4vw, 5px);
	}
	.dp-site-header .dp-header-socials--header .dp-header-socials__link {
		width: clamp(26px, 2.4vw, 32px);
		height: clamp(26px, 2.4vw, 32px);
	}
}

/* ── La bascule mesurée ──
 *
 * Les deux seules règles que `is-nav-compact` a besoin de poser : le tiroir,
 * lui, est déjà indépendant du point de rupture. Trois classes de
 * spécificité, pour passer devant les règles de bureau des deux designs.
 */
.dp-site-header.is-nav-compact .dp-header__nav--desktop { display: none; }
.dp-site-header.is-nav-compact .dp-header__toggle { display: inline-flex; }

@media (min-width: 1025px) {
	/* Sur un écran large, le tiroir plein cadre couvrirait 1 200 px de blanc
	   pour sept liens. Il se range contre le bord droit, à la largeur d'un
	   panneau — le glissement depuis la droite reste le même. */
	.dp-drawer {
		left: auto;
		width: min(440px, 100vw);
		box-shadow: -18px 0 48px rgba(10, 79, 90, .16);
	}
}

/* =====================================================================
 * LE MARQUEUR DES ENTRÉES À SOUS-MENU
 * =====================================================================
 * Le chevron dit « il y a autre chose dessous » dans le vocabulaire de tout le
 * monde. Le chapeau le dit dans celui de la maison : c'est l'arc du logotype,
 * l'accent du Ô — et non la coupole pleine qu'il coiffe. Les deux se
 * ressemblent de loin et ne sont pas le même signe ; c'est l'arc seul que la
 * marque emploie détaché, et le plugin le publie en picto. Le tracé ci-dessous
 * en est la copie, `viewBox` compris, donc les proportions du fichier de marque
 * et non une courbe approchée : 14,379 de haut pour 32,244 de large.
 *
 * Il remplace le chevron, il ne s'y ajoute pas : deux marqueurs pour une seule
 * fonction feraient deux vocabulaires dans une même barre. Le réglage vit dans
 * « En-tête principal », et le chevron reste à un clic.
 *
 * En masque et non en image : le picto existe en six couleurs de charte, et
 * aucune ne suit l'entrée qu'elle accompagne. Découpé dans un aplat de
 * `currentColor`, l'arc passe en négatif avec le reste du menu quand l'en-tête
 * se pose sur une photo — ce qu'un fichier de couleur fixe ne sait pas faire.
 * C'est déjà la technique du chevron, on ne change donc que le tracé.
 * ===================================================================== */

.dp-menu-marker-arc .dp-menu > li.dp-has-dropdown > a::after,
.dp-menu-marker-arc .dp-menu > li.menu-item-has-children > a::after {
	height: 4.46px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.244 14.379'><path d='M16.122 0C9.776 0 4.045 2.678 0 6.962L0 14.379 0.137 14.379C4.17 10.175 9.844 7.554 16.122 7.554 22.4 7.554 28.074 10.175 32.107 14.379L32.244 14.379 32.244 6.962C28.199 2.678 22.468 0 16.122 0Z' fill='black'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.244 14.379'><path d='M16.122 0C9.776 0 4.045 2.678 0 6.962L0 14.379 0.137 14.379C4.17 10.175 9.844 7.554 16.122 7.554 22.4 7.554 28.074 10.175 32.107 14.379L32.244 14.379 32.244 6.962C28.199 2.678 22.468 0 16.122 0Z' fill='black'/></svg>") center/contain no-repeat;
}

/*
 * Le chapeau se retourne à l'ouverture, comme le chevron avant lui.
 *
 * Il faut savoir ce qu'on y gagne et ce qu'on y perd : en capsule le marqueur
 * ne paraît qu'au survol, et le survol EST l'état retourné — le chapeau à
 * l'endroit ne se voit donc que pendant le retournement, et l'état posé est
 * l'arc renversé. C'est un choix de lecture assumé : le renversement dit
 * l'ouverture, là où l'apparition seule disait seulement « il y a quelque
 * chose ». Il suit la courbe et la durée du panneau qui se déroule dessous, si
 * bien que les deux gestes n'en font qu'un.
 *
 * `:focus-within` rejoint `:hover` : le panneau s'ouvre aussi à la tabulation,
 * et son marqueur restait alors à l'endroit sur un menu ouvert — l'état affiché
 * dépendait de la façon d'y arriver.
 */
.dp-menu > li.dp-has-dropdown:focus-within > a::after,
.dp-menu > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}