/* =====================================================================
 * DP – Panneau éditorial
 * =====================================================================
 * Un encadré blanc posé au centre d'un dégradé de marque.
 *
 * ── Un rectangle arrondi, et rien d'autre ──
 *
 * Le manifeste porte le même encadré dans le même dégradé, mais son bord haut
 * est courbé : la courbe reprend la silhouette du dôme pour que le raccord avec
 * le héros qui le précède ne se voie pas. Elle n'a de sens qu'à cet endroit de
 * la page. Ici, les quatre coins sont des arrondis ordinaires — c'est la seule
 * différence de géométrie, et c'est elle qui justifie deux blocs.
 *
 * ── Le grain ──
 *
 * Posé sur le dégradé, pas sur le panneau, et seulement sur un dégradé : une
 * teinte pleine n'en a jamais porté. Le montage — pseudo-élément isolé en
 * `soft-light` — est celui de `nouvelle-charte.css` §9, et le contenu est
 * remonté d'un cran pour que la couche ne lui passe pas dessus.
 * ===================================================================== */

.dp-ep {
	position: relative;
	isolation: isolate;
	padding: var(--dp-ep-outer, clamp(24px, 4vw, 72px));
	border-radius: var(--dp-ep-outer-radius, var(--dp-radius-xl, 32px));
	background: var(--dp-ep-surface, var(--dp-gradient-mesh));
	font-family: var(--dp-font-base, inherit);
}

.dp-ep--grained::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;

	background-image: var(--dp-grain);
	background-repeat: repeat;
	background-size: var(--dp-grain-size, 128px);
	image-rendering: pixelated;

	mix-blend-mode: soft-light;
	opacity: var(--dp-grain-opacity, 55%);
	pointer-events: none;
}

.dp-ep__panel {
	position: relative;
	text-align: center;
	padding: var(--dp-ep-pad, clamp(28px, 5vw, 76px));
	border-radius: var(--dp-ep-radius, var(--dp-radius-lg, 20px));
	background: var(--dp-ep-panel-bg, var(--dp-color-surface, #ffffff));
	color: var(--dp-ep-text, var(--dp-color-text, #303030));
}

.dp-ep--left .dp-ep__panel {
	text-align: left;
}

/* ── L'axe du panneau ───────────────────────────────────────────────────
   `text-align` range les mots, pas les boîtes. Trois d'entre elles sont plus
   étroites que leur module — le titre, borné à 30 ch, et les deux rangées flex
   des pastilles et des boutons — et se rangeraient à gauche pendant que leurs
   mots, eux, seraient centrés. On fait donc suivre la boîte au texte : une
   variable héritée du panneau, qu'un module redéfinit quand il quitte l'axe
   commun. */

.dp-ep__panel { --dp-ep-items: center; }
.dp-ep--left .dp-ep__panel { --dp-ep-items: flex-start; }

.dp-ep__layout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--dp-ep-gap, clamp(16px, 2vw, 26px));
	width: 100%;
}

/* La largeur tient sur la ligne de FIN, et jamais sur le raccourci
   `grid-column` : celui-ci pose le `span` sur la ligne de DÉBUT et laisse la
   fin en `auto`. Le `grid-column-start: 1` d'une nouvelle ligne écrasait alors
   ce début — il ne restait aucune largeur, le module tombait à une colonne sur
   douze, et tout le panneau se serrait contre le bord gauche. En longhand, le
   début et la fin ne se marchent plus dessus. */

.dp-ep__module {
	grid-column-end: span var(--dp-ep-span-desktop, 12);
	min-width: 0;
}

.dp-ep__module--new-row { grid-column-start: 1; }
.dp-ep__module--h-left { text-align: left; --dp-ep-items: flex-start; }
.dp-ep__module--h-center { text-align: center; --dp-ep-items: center; }
.dp-ep__module--h-right { text-align: right; --dp-ep-items: flex-end; }
.dp-ep__module--v-start { align-self: start; }
.dp-ep__module--v-center { align-self: center; }
.dp-ep__module--v-end { align-self: end; }
.dp-ep__module--v-stretch { align-self: stretch; }

.dp-ep__header {
	display: flex;
	flex-direction: column;
	align-items: var(--dp-ep-items, center);
	gap: clamp(8px, 1vw, 14px);
}

.dp-ep__media,
.dp-ep__media picture { display: block; width: 100%; margin: 0; }
.dp-ep__media-link { display: block; color: inherit; text-decoration: none; }

img.dp-ep__image {
	display: block;
	width: 100%;
	height: var(--dp-ep-image-height, 360px);
	object-fit: var(--dp-ep-image-fit, cover);
	object-position: var(--dp-ep-image-position, center center);
	border-radius: var(--dp-ep-image-radius, var(--dp-radius-md, 16px));
}

.dp-ep__caption {
	margin-top: 8px;
	font-size: var(--dp-text-caption, 13px);
	color: var(--dp-color-text-muted, #5b5b5b);
}

.dp-ep__text-block > :first-child { margin-top: 0; }
.dp-ep__text-block > :last-child { margin-bottom: 0; }

/* ── Le sur-titre ───────────────────────────────────────────────────────
   Capitales suivies, en couleur de marque soutenue : sur du blanc, la teinte
   brute d'un pastel plafonne à 1,8:1 et ne se lit pas. */

.dp-ep__eyebrow {
	margin: 0;
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	line-height: 1.4;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-ep-eyebrow, var(--dp-color-primary-strong, #417e88));
}

.dp-ep__title {
	margin: 0;
	max-width: var(--dp-ep-title-width, 30ch);
	font-family: var(--dp-font-heading, inherit);
	font-weight: var(--dp-font-heading-weight, 700);
	font-size: clamp(24px, min(3.2vw, 5vh), 42px);
	line-height: 1.18;
	letter-spacing: -.01em;
	/* Couleur explicite : beaucoup de thèmes posent `h1–h6 { color: inherit }`,
	   et le titre remonterait alors jusqu'à la couleur globale d'Elementor. */
	color: var(--dp-ep-title, var(--dp-color-text, #303030));
	text-wrap: balance;
}

.dp-ep__text {
	margin: 0;
	font-size: var(--dp-text-body-sm, 15px);
	line-height: var(--dp-leading-relaxed, 1.65);
	color: var(--dp-ep-text, var(--dp-color-text-muted, #5b5b5b));
}

/* ── Les mots de la marque ──────────────────────────────────────────────
   Des pastilles pleines, une par couleur de la charte, dans l'ordre : la
   rangée bariolée de l'identité.

   Le texte de chacune est celui que la charte a calculé pour son aplat —
   `--dp-color-on-*` — jamais un blanc écrit ici : les quatre teintes sont des
   pastels, et « GROUNDED » en blanc sur un vert pâle ne se lirait pas. */

.dp-ep__words {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--dp-ep-items, center);
	gap: var(--dp-ep-words-gap, 10px);
}

.dp-ep__word {
	display: inline-flex;
	align-items: center;
	padding: var(--dp-ep-word-pad, 9px 20px);
	border-radius: var(--dp-ep-word-radius, var(--dp-radius-pill, 999px));
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	line-height: 1;
}

.dp-ep__word--primary {
	background: var(--dp-color-primary-fill, var(--dp-color-primary, #61c2d0));
	color: var(--dp-color-on-primary, #303030);
}

.dp-ep__word--secondary {
	background: var(--dp-color-secondary-fill, var(--dp-color-secondary, #98d0c1));
	color: var(--dp-color-on-secondary, #303030);
}

.dp-ep__word--tertiary {
	background: var(--dp-color-tertiary-fill, var(--dp-color-tertiary, #a9cf8e));
	color: var(--dp-color-on-tertiary, #303030);
}

.dp-ep__word--quaternary {
	background: var(--dp-color-quaternary-fill, var(--dp-color-quaternary, #fff399));
	color: var(--dp-color-on-quaternary, #303030);
}

/* ── Les boutons ────────────────────────────────────────────────────────
   Deux classes sur chaque règle : le thème repeint tout élément de bouton en
   couleur de marque, et sa règle pèse une classe — à égalité, c'est l'ordre de
   chargement qui trancherait. */

.dp-ep__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--dp-ep-items, center);
	gap: 12px;
}

.dp-ep .dp-ep__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--dp-radius-pill, 999px);
	background-color: var(--dp-btn-bg, var(--dp-ep-btn-bg, var(--dp-color-primary-fill, #61c2d0)));
	/* `on-primary`, pas du blanc : un aplat pastel ne porte pas de libellé
	   blanc, et la charte a calculé lequel se lit. */
	color: var(--dp-btn-text, var(--dp-ep-btn-text, var(--dp-color-on-primary, #303030)));
	border: 1px solid transparent;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-ep .dp-ep__btn:hover {
	filter: brightness(.94);
	background-color: var(--dp-btn-bg-hover, var(--dp-btn-bg, var(--dp-ep-btn-bg, var(--dp-color-primary-fill, #61c2d0))));
	color: var(--dp-btn-text-hover, var(--dp-ep-btn-text, var(--dp-color-on-primary, #303030)));
}

.dp-ep .dp-ep__btn--outline {
	background-color: var(--dp-btn-bg, transparent);
	border-color: var(--dp-btn-bg, var(--dp-color-border, #dedede));
	color: var(--dp-btn-text, var(--dp-ep-title, var(--dp-color-text, #303030)));
}

.dp-ep .dp-ep__btn--outline:hover {
	filter: none;
	/* Le contour reste un contour : sans réglage il garde son fond transparent,
	   là où la règle commune du bouton lui poserait l'aplat du bouton plein. */
	background-color: var(--dp-btn-bg-hover, var(--dp-btn-bg, transparent));
	border-color: var(--dp-btn-bg-hover, var(--dp-color-primary-strong, #417e88));
	color: var(--dp-btn-text-hover, var(--dp-color-primary-strong, #417e88));
}

.dp-ep .dp-ep__btn:focus-visible {
	outline: 3px solid var(--dp-color-primary-strong, #417e88);
	outline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.dp-ep__module { grid-column-end: span var(--dp-ep-span-tablet, 12); }
	img.dp-ep__image {
		height: var(--dp-ep-image-height-tablet, var(--dp-ep-image-height, 360px));
		object-position: var(--dp-ep-image-position-tablet, var(--dp-ep-image-position, center center));
	}
}

@media (max-width: 767px) {
	.dp-ep__module { grid-column-end: span var(--dp-ep-span-mobile, 12); }
	img.dp-ep__image {
		height: var(--dp-ep-image-height-mobile, var(--dp-ep-image-height-tablet, var(--dp-ep-image-height, 360px)));
		object-position: var(--dp-ep-image-position-mobile, var(--dp-ep-image-position-tablet, var(--dp-ep-image-position, center center)));
	}
}

@media (max-width: 620px) {
	.dp-ep {
		padding: var(--dp-ep-outer, 14px);
	}

	.dp-ep__actions {
		width: 100%;
		flex-direction: column;
	}

	.dp-ep .dp-ep__btn {
		width: 100%;
	}
}

/* Elementor blanchit les fonds d'image — donc les dégradés — des conteneurs de
   premier niveau au-delà du troisième tant qu'ils n'ont pas croisé la fenêtre.
   Sa règle vise l'élément et ses descendants, pas les pseudo-éléments : la
   couche de grain y resterait seule, grise, sur le blanc de la page. */
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) .dp-ep--grained::before {
	display: none;
}

@media print {
	.dp-ep {
		background: none;
		padding: 0;
	}

	.dp-ep--grained::before {
		display: none;
	}

	.dp-ep__word {
		border: 1px solid var(--dp-color-border, #dedede);
	}
}