/* ── DP – Bannière média + appel à l'action ──────────────────────────── */

.dp-mc {
	--dp-mc-bg: var(--dp-color-primary-soft, #ecf8f9);

	/* `--dp-mc-on` n'est posé que par les surfaces qui savent quelle encre se
	   lit sur elles : un aplat de teinte, un dégradé, un panneau sombre. Partout
	   ailleurs il n'existe pas, et les trois jetons ci-dessous retombent sur les
	   couleurs de texte de la charte. */
	--dp-mc-eyebrow: var(--dp-mc-on, var(--dp-color-primary-strong, #417e88));
	--dp-mc-title: var(--dp-mc-on, var(--dp-color-text, #303030));
	--dp-mc-text: var(--dp-mc-on, var(--dp-color-text-muted, #5b5b5b));
	--dp-mc-accent: var(--dp-color-primary, #61c2d0);
	--dp-mc-border: var(--dp-color-border, #dedede);
	--dp-mc-inverted-text: #ffffff;

	/* L'aplat du bouton principal. Trois jeux, choisis par une classe posée au
	   rendu — jamais une couleur écrite ici : `--dp-mc-button-text` doit rester
	   indéfini pour que le contrôle Elementor garde la main (cf. dp-charte §3a,
	   un repli sous une variable toujours définie est du code mort). */
	--dp-mc-button-bg: var(--dp-mc-accent);
	--dp-mc-button-fg: var(--dp-color-on-primary, #303030);
	--dp-mc-button-bg-hover: var(--dp-color-primary-dark, #52a5b1);
	--dp-mc-button-fg-hover: var(--dp-color-on-primary-dark, #303030);

	--dp-mc-content-fr: 1.1fr;
	--dp-mc-media-fr: 0.9fr;
	--dp-mc-content-padding: 44px;
	--dp-mc-min-height: 380px;
	--dp-mc-gap: 0px;
	--dp-mc-overlay-opacity: 0.58;
	--dp-mc-object-position: center center;

	position: relative;
	display: grid;
	grid-template-columns: var(--dp-mc-content-fr) var(--dp-mc-media-fr);
	gap: var(--dp-mc-gap);
	min-height: var(--dp-mc-min-height);
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--dp-mc-radius, var(--dp-radius-lg, 20px));
	background: var(--dp-mc-bg);
	font-family: var(--dp-font-base, inherit);
	font-weight: var(--dp-font-base-weight, 400);
}

.dp-mc *,
.dp-mc *::before,
.dp-mc *::after {
	box-sizing: border-box;
}

/* Le visuel est déclaré en premier dans le DOM (il porte l'illustration du
   propos) ; l'ordre visuel se règle ensuite par la position demandée. */
.dp-mc__media { order: 2; }
.dp-mc__content { order: 1; }

.dp-mc--media-left .dp-mc__media { order: 1; }
.dp-mc--media-left .dp-mc__content { order: 2; }

.dp-mc--media-left {
	grid-template-columns: var(--dp-mc-media-fr) var(--dp-mc-content-fr);
}

.dp-mc--no-image {
	grid-template-columns: 1fr;
}

/* ── Surfaces ──
   Une surface pose son fond ET, quand elle est colorée, l'encre que la charte
   a calculée pour elle. C'est le seul moyen qu'une bande en teinte pleine ne
   se retrouve pas avec des libellés blancs illisibles : le bloc ne sait pas
   sur quoi il est posé, la surface le sait.

   Chaque règle écrit `--dp-mc-bg` plutôt que `background` : le contrôle
   « Fond » de l'onglet Style écrit la même variable avec une spécificité plus
   forte, et garde donc la main. */

.dp-mc--bg-soft { --dp-mc-bg: var(--dp-color-primary-soft, #ecf8f9); }
.dp-mc--bg-grey { --dp-mc-bg: var(--dp-color-surface-grey, #f4f6f6); }
.dp-mc--bg-transparent { --dp-mc-bg: transparent; }

.dp-mc--bg-surface {
	--dp-mc-bg: var(--dp-color-surface, #ffffff);
	border: 1px solid var(--dp-mc-border);
}

.dp-mc--bg-primary {
	--dp-mc-bg: var(--dp-color-primary, #61c2d0);
	--dp-mc-on: var(--dp-color-on-primary-base, #303030);
}

.dp-mc--bg-secondary {
	--dp-mc-bg: var(--dp-color-secondary, #98d0c1);
	--dp-mc-on: var(--dp-color-on-secondary-base, #303030);
}

.dp-mc--bg-tertiary {
	--dp-mc-bg: var(--dp-color-tertiary, #a9cf8e);
	--dp-mc-on: var(--dp-color-on-tertiary-base, #303030);
}

.dp-mc--bg-quaternary {
	--dp-mc-bg: var(--dp-color-quaternary, #fff399);
	--dp-mc-on: var(--dp-color-on-quaternary-base, #303030);
}

/* Les dégradés : l'encre lisible tient compte du stop le plus défavorable,
   pas du premier — c'est `--dp-color-on-gradient` qui l'a calculée. */
.dp-mc--bg-gradient {
	--dp-mc-bg: var(--dp-gradient-primary, linear-gradient(120deg, #61c2d0 0%, #98d0c1 34%, #a9cf8e 63%, #fff399 100%));
	--dp-mc-on: var(--dp-color-on-gradient, #303030);
}

.dp-mc--bg-mesh {
	--dp-mc-bg: var(--dp-gradient-mesh, var(--dp-gradient-primary, linear-gradient(120deg, #61c2d0 0%, #fff399 100%)));
	--dp-mc-on: var(--dp-color-on-gradient, #303030);
}

.dp-mc--bg-dome {
	--dp-mc-bg: var(--dp-gradient-dome, var(--dp-gradient-primary, linear-gradient(120deg, #61c2d0 0%, #fff399 100%)));
	--dp-mc-on: var(--dp-color-on-gradient, #303030);
}

/* Panneaux sombres : le jeton `-deep` garantit le contraste, le texte y est
   blanc sans calcul. */
.dp-mc--bg-deep { --dp-mc-bg: var(--dp-color-primary-deep, #325f66); }
.dp-mc--bg-ink { --dp-mc-bg: var(--dp-color-text, #303030); }

/* ── Visuel ── */
.dp-mc__media {
	position: relative;
	overflow: hidden;
	min-height: var(--dp-mc-media-min, 220px);
	max-height: var(--dp-mc-media-max, none);
}

.dp-mc__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.dp-mc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--dp-mc-image-fit, cover);
	object-position: var(--dp-mc-object-position, center center);
}

.dp-mc--fit-contain .dp-mc__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.dp-mc--fit-contain .dp-mc__media img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Halo : détache un packshot posé sur un aplat clair sans recourir à une ombre
   portée, qui jurerait sur un fond déjà teinté. */
.dp-mc--halo .dp-mc__media::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--dp-mc-accent) 22%, transparent) 0%,
		transparent 70%
	);
}

.dp-mc--halo .dp-mc__media img {
	position: relative;
}

/* ── Contenu ── */
.dp-mc__content {
	display: flex;
	align-items: center;
	min-width: 0;
}

.dp-mc__content-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	padding: var(--dp-mc-content-padding);
}

.dp-mc__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.dp-mc__badge {
	padding: 4px 12px;
	border-radius: var(--dp-radius-pill, 999px);
	background: var(--dp-mc-badge-bg, var(--dp-mc-accent));
	/* Le badge est toujours posé sur l'aplat d'accent : son encre est celle que
	   la charte a calculée pour cet aplat, pas celle du bouton — qui, lui, peut
	   être en encre ou en blanc selon la surface. */
	color: var(--dp-mc-badge-text, var(--dp-color-on-primary, #303030));
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
}

.dp-mc__eyebrow {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dp-mc-eyebrow);
	line-height: 1.3;
}

.dp-mc__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--dp-mc-title);
	font-family: var(--dp-font-heading, inherit);
}

.dp-mc__text {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--dp-mc-text);
}

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

/* ── Points clés ── */
.dp-mc__bullets {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.dp-mc__bullet {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--dp-mc-bullet, var(--dp-mc-title));
}

.dp-mc__check {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--dp-mc-marker, var(--dp-mc-accent-strong, var(--dp-color-primary-strong, #417e88)));
}

/* ── Boutons ── */
.dp-mc__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.dp-mc__button {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--dp-mc-button-radius, var(--dp-radius-md, 16px));
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dp-mc__button--primary {
	background: var(--dp-mc-button-bg);
	border-color: var(--dp-mc-button-bg);
	color: var(--dp-mc-button-text, var(--dp-mc-button-fg));
}

.dp-mc__button--primary:hover,
.dp-mc__button--primary:focus-visible {
	background: var(--dp-mc-button-bg-hover);
	border-color: var(--dp-mc-button-bg-hover);
	color: var(--dp-mc-button-text-hover, var(--dp-mc-button-text, var(--dp-mc-button-fg-hover)));
	text-decoration: none;
}

/* ── Les trois aplats de bouton ──
   Le design system en a deux pleins et non un : l'encre, qui est son bouton
   par défaut, et l'aplat de marque, qu'il appelle « accent ». Le blanc est le
   troisième, réservé aux surfaces qui SONT déjà l'aplat de marque. La classe
   est posée au rendu ; le mode automatique choisit selon la surface. */

.dp-mc--btn-ink {
	--dp-mc-button-bg: var(--dp-color-text, #303030);
	--dp-mc-button-fg: var(--dp-color-text-invert, #ffffff);
	--dp-mc-button-bg-hover: var(--dp-color-primary-deep, #325f66);
	--dp-mc-button-fg-hover: var(--dp-color-text-invert, #ffffff);
}

.dp-mc--btn-light {
	--dp-mc-button-bg: var(--dp-color-surface, #ffffff);
	/* Le bouton est blanc : son libellé est de la couleur de marque écrite sur
	   du blanc, donc la version soutenue. La teinte réglée y plafonnerait à
	   1,8:1 depuis qu'elle est un pastel. */
	--dp-mc-button-fg: var(--dp-color-primary-strong, #417e88);
	--dp-mc-button-bg-hover: var(--dp-color-surface, #ffffff);
	--dp-mc-button-fg-hover: var(--dp-color-primary-deep, #325f66);
}

/* Le contour et l'encre du bouton secondaire se règlent ; sans réglage, ils
   suivent la bordure et le titre du bloc. Le survol reprend la couleur réglée
   plutôt que de revenir à l'accent : une couleur choisie ne doit pas sauter
   sous la souris. */
.dp-mc__button--secondary {
	background: transparent;
	border-color: var(--dp-mc-button2-border, var(--dp-mc-border));
	color: var(--dp-mc-button2-text, var(--dp-mc-title));
}

.dp-mc__button--secondary:hover,
.dp-mc__button--secondary:focus-visible {
	border-color: var(--dp-mc-button2-border, var(--dp-mc-accent));
	color: var(--dp-mc-button2-text, var(--dp-mc-accent-strong, var(--dp-color-primary-strong, #417e88)));
	text-decoration: none;
}

.dp-mc__button:focus-visible {
	outline: 2px solid var(--dp-mc-accent);
	outline-offset: 3px;
}

/* Format et poids restent secondaires : même ligne, poids et taille réduits. */
.dp-mc__button-meta {
	font-size: 0.78rem;
	font-weight: 500;
	opacity: 0.75;
	white-space: nowrap;
}

/* ── Design « overlay » ── */
.dp-mc--overlay,
.dp-mc--poster {
	display: block;
}

.dp-mc--overlay .dp-mc__media,
.dp-mc--poster .dp-mc__media {
	position: absolute;
	inset: 0;
	min-height: 0;
	/* Le repli tablette plafonne les médias empilés à 320 px. Ces deux designs
	   restent plein cadre : leur média doit suivre toute la hauteur du contenu. */
	max-height: none;
}

/* ── Le voile ──
   L'encre de la charte, pas un bleu-noir : une photo voilée en 48,48,48 reste
   dans la même famille que le reste de la page. La couleur est un littéral
   assumé — un voile de photo n'est pas un aplat de marque (cf. dp-charte §4e).

   Trois sens. Le latéral est celui de la maquette : le texte occupe une moitié
   du cadre, et c'est cette moitié-là qui doit porter. Un voile bas sur une
   photo de plein jour laisse le titre au milieu de la lumière. */
.dp-mc__overlay {
	position: absolute;
	inset: 0;
	background: var(--dp-mc-scrim-fill, linear-gradient(
		to top,
		rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 0%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.5)) 55%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.25)) 100%
	));
}

.dp-mc--scrim-side {
	/* Le voile latéral est plus dense à sa source que le voile bas : il n'a que
	   la moitié du cadre pour amener le texte au contraste. */
	--dp-mc-overlay-opacity: 0.72;
	--dp-mc-scrim-fill: linear-gradient(
		90deg,
		rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 0%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.42)) 60%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.2)) 100%
	);
}

/* Le voile part du côté du texte : à droite, il se retourne. Au centre, il
   pince les deux bords. */
.dp-mc--scrim-side.dp-mc--h-right {
	--dp-mc-scrim-fill: linear-gradient(
		270deg,
		rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 0%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.42)) 60%,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.2)) 100%
	);
}

.dp-mc--scrim-side.dp-mc--h-center {
	--dp-mc-scrim-fill: linear-gradient(
		180deg,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.35)) 0%,
		rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 100%
	);
}

.dp-mc--scrim-even {
	--dp-mc-scrim-fill: rgba(48, 48, 48, var(--dp-mc-overlay-opacity));
}

.dp-mc--overlay .dp-mc__content,
.dp-mc--poster .dp-mc__content {
	position: relative;
	min-height: var(--dp-mc-min-height);
}

.dp-mc--overlay .dp-mc__content-inner {
	max-width: var(--dp-mc-content-max, 620px);
}

/* Le média plein cadre reprend les coins du bloc. Sans cela, la feuille de la
   charte lui rend son propre arrondi de visuel, et deux blocs collés laissent
   voir quatre lunules de fond à leur jointure. */
.dp-mc.dp-mc--overlay .dp-mc__media {
	border-radius: inherit;
}

/* Position du contenu dans le cadre. La colonne de texte est un élément flex :
   ce sont ses marges automatiques qui la déplacent, pas un `justify-content`
   qui écraserait la largeur maximale. */
.dp-mc--overlay.dp-mc--v-top .dp-mc__content { align-items: flex-start; }
.dp-mc--overlay.dp-mc--v-bottom .dp-mc__content { align-items: flex-end; }

.dp-mc--overlay.dp-mc--h-right .dp-mc__content-inner { margin-inline-start: auto; }

.dp-mc--overlay.dp-mc--h-center .dp-mc__content-inner {
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.dp-mc--overlay.dp-mc--h-center .dp-mc__copy,
.dp-mc--overlay.dp-mc--h-center .dp-mc__buttons {
	align-items: center;
	justify-content: center;
}

/* Le titre d'un overlay ouvre une section : il tient l'échelle d'affiche de la
   maquette, et non celle d'une bannière posée dans une colonne. */
.dp-mc.dp-mc--overlay .dp-mc__title {
	font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3.25rem);
}

/* ── Fond sombre : texte inversé ──
   Une photo voilée ou un panneau d'encre : le texte y est blanc, et c'est la
   surface qui l'impose. Les sélecteurs portent deux fois `.dp-mc` pour passer
   devant la feuille de la charte, qui peint les rôles de texte en (0,2,0). */
.dp-mc--inverted {
	--dp-mc-on: var(--dp-mc-inverted-text, #ffffff);
}

.dp-mc.dp-mc--inverted .dp-mc__title {
	color: var(--dp-mc-title);
}

.dp-mc.dp-mc--inverted .dp-mc__bullet {
	color: var(--dp-mc-bullet, var(--dp-mc-title));
}

.dp-mc.dp-mc--inverted .dp-mc__text {
	color: var(--dp-mc-text);
	opacity: 0.9;
}

.dp-mc.dp-mc--inverted .dp-mc__check {
	color: var(--dp-mc-marker, var(--dp-mc-inverted-text));
}

.dp-mc.dp-mc--inverted .dp-mc__marker {
	background-color: var(--dp-mc-marker, var(--dp-mc-inverted-text));
}

.dp-mc.dp-mc--inverted .dp-mc__badge {
	background: var(--dp-mc-badge-bg, rgba(255, 255, 255, 0.2));
	color: var(--dp-mc-badge-text, var(--dp-mc-inverted-text));
}

/* Le sur-titre sur fond sombre n'est pas du blanc atténué : la maquette le
   pose dans une couleur de marque, et c'est lui qui donne son ton à la bande.
   L'accent (la quatrième teinte) sur une photo, la primaire sur un panneau
   sombre — les deux bandes de la maquette. */
.dp-mc.dp-mc--inverted .dp-mc__eyebrow {
	color: var(--dp-mc-eyebrow-invert, var(--dp-color-accent, #fff399));
}

.dp-mc.dp-mc--bg-ink .dp-mc__eyebrow,
.dp-mc.dp-mc--bg-deep .dp-mc__eyebrow {
	color: var(--dp-mc-eyebrow-invert, var(--dp-color-primary, #61c2d0));
}

/* ── Teinte pleine ou dégradé : l'encre vient de la charte ──
   Rien n'est décidé ici. `--dp-mc-on` porte ce que la charte a calculé pour
   cet aplat précis, et les trois rôles de texte le suivent. */
.dp-mc.dp-mc--tinted .dp-mc__title {
	color: var(--dp-mc-title);
}

.dp-mc.dp-mc--tinted .dp-mc__bullet {
	color: var(--dp-mc-bullet, var(--dp-mc-title));
}

.dp-mc.dp-mc--tinted .dp-mc__text {
	color: var(--dp-mc-text);
	opacity: 0.86;
}

.dp-mc.dp-mc--tinted .dp-mc__eyebrow {
	color: var(--dp-mc-eyebrow);
}

/* Le contour d'un bouton secondaire posé sur un aplat : le filet reprend
   l'encre de la surface, adouci — un filet gris de la charte disparaîtrait
   sur un pastel. */
.dp-mc--tinted .dp-mc__button--secondary {
	border-color: var(--dp-mc-button2-border, color-mix(in srgb, var(--dp-mc-on) 34%, transparent));
	color: var(--dp-mc-button2-text, var(--dp-mc-on));
}

.dp-mc--tinted .dp-mc__button--secondary:hover,
.dp-mc--tinted .dp-mc__button--secondary:focus-visible {
	border-color: var(--dp-mc-button2-border, var(--dp-mc-on));
	color: var(--dp-mc-button2-text, var(--dp-mc-on));
}

.dp-mc--inverted .dp-mc__button--secondary {
	border-color: var(--dp-mc-button2-border, rgba(255, 255, 255, 0.55));
	color: var(--dp-mc-button2-text, var(--dp-mc-inverted-text));
}

.dp-mc--inverted .dp-mc__button--secondary:hover,
.dp-mc--inverted .dp-mc__button--secondary:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--dp-mc-button2-border, var(--dp-mc-inverted-text));
	color: var(--dp-mc-button2-text, var(--dp-mc-inverted-text));
}

.dp-mc--inverted .dp-mc__button:focus-visible {
	outline-color: var(--dp-mc-inverted-text);
}

/* ── Design « strip » ── */
/* Le visuel se dimensionne sur son contenu (colonne `auto`), le texte prend le
   reste. La colonne `auto` doit suivre l'ordre visuel demandé, sinon c'est le
   texte qui se retrouve corseté. */
.dp-mc--strip {
	min-height: 0;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.dp-mc--strip.dp-mc--media-left {
	grid-template-columns: auto 1fr;
}

.dp-mc--strip.dp-mc--no-image {
	grid-template-columns: 1fr;
}

.dp-mc--strip .dp-mc__media {
	min-height: 0;
	width: 132px;
	height: 100%;
	padding: 0;
}

.dp-mc--strip.dp-mc--fit-contain .dp-mc__media {
	padding: 16px;
}

.dp-mc--strip .dp-mc__content-inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding-block: 22px;
}

/* La bande est un rappel : les ornements verticaux (points clés, badge) n'y ont
   pas leur place. */
.dp-mc--strip .dp-mc__bullets,
.dp-mc--strip .dp-mc__badge {
	display: none;
}

.dp-mc--strip .dp-mc__copy {
	flex: 1 1 260px;
	gap: 6px;
}

.dp-mc--strip .dp-mc__title {
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
}

.dp-mc--strip .dp-mc__text {
	font-size: 0.92rem;
}

.dp-mc--strip .dp-mc__buttons {
	margin: 0;
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* ── Repli tablette / mobile ── */
@media (max-width: 1024px) {
	.dp-mc,
	.dp-mc--media-left {
		grid-template-columns: 1fr;
	}

	/* Le visuel repasse au-dessus du contenu : sur une colonne, l'illustration
	   avant l'argumentaire reste la lecture la plus naturelle. */
	.dp-mc__media { order: 1; }
	.dp-mc__content { order: 2; }

	.dp-mc__media {
		min-height: var(--dp-mc-media-min, 240px);
		max-height: var(--dp-mc-media-max, 320px);
	}

	.dp-mc--strip {
		grid-template-columns: 1fr;
	}

	.dp-mc--strip .dp-mc__media {
		width: 100%;
		height: 160px;
	}
}

@media (max-width: 640px) {
	.dp-mc {
		--dp-mc-content-padding: 26px;
		--dp-mc-min-height: 0px;
	}

	.dp-mc--overlay .dp-mc__content,
	.dp-mc--poster .dp-mc__content {
		min-height: 340px;
	}

	.dp-mc__buttons {
		width: 100%;
	}

	.dp-mc__button {
		flex: 1 1 auto;
		justify-content: center;
	}

	.dp-mc--strip .dp-mc__content-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.dp-mc--strip .dp-mc__buttons {
		margin-inline-start: 0;
	}
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.dp-mc--halo .dp-mc__media::before {
		background: radial-gradient(circle, var(--dp-color-primary-soft, #ecf8f9) 0%, transparent 70%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-mc__button {
		transition: none;
	}
}

/* ── Design « arche » ──
   Le visuel devient une arche — arrondi haut très marqué, base à peine
   adoucie — et les points clés deviennent des pastilles pastel. C'est la
   section Tasty Tech de la maquette.

   L'arche n'est pas une décoration interchangeable : c'est la même famille de
   formes que le dôme du logo. La mettre à zéro ne rend pas le bloc plus sobre,
   elle le fait sortir de la charte. */

.dp-mc--arch {
	--dp-mc-arch-radius: 210px;
	--dp-mc-arch-base: 22px;
	--dp-mc-arch-height: 420px;
	align-items: center;
}

.dp-mc--arch .dp-mc__media {
	min-height: 0;
	height: var(--dp-mc-arch-height);
	max-width: var(--dp-mc-media-max, 420px);
	/* La colonne média peut être plus large que le dôme plafonné (grille en
	   1 colonne sur tablette, ou colonne média généreuse sur desktop) : sans
	   marges auto, le dôme reste collé au bord au lieu d'être centré dans son
	   espace. */
	margin-inline: auto;
	border-radius: var(--dp-mc-arch-radius) var(--dp-mc-arch-radius) var(--dp-mc-arch-base) var(--dp-mc-arch-base);
	overflow: hidden;
	/* Une teinte claire derrière le visuel : l'arche est la forme qui rattache
	   ce bloc à la charte, et un PNG détouré — un logo produit, une
	   illustration — la rendrait invisible. Sous une photographie, ce fond ne
	   se voit pas. */
	background: var(--dp-mc-arch-bg, var(--dp-color-primary-soft, #ecf8f9));
}

.dp-mc--arch .dp-mc__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Les points clés en pastilles : la coche disparaît — une pastille pleine dit
   déjà qu'il s'agit d'une liste d'atouts — et chaque pastille prend l'une des
   quatre teintes de la charte, à tour de rôle. */

.dp-mc--arch .dp-mc__bullets {
	display: flex;
	/* La liste de base est en colonne : sans remettre la direction, les
	   pastilles s'empilent au lieu de faire une rangée. */
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 26px 0 28px;
	padding: 0;
}

.dp-mc--arch .dp-mc__bullet {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	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, 0.12em);
	text-transform: uppercase;
	background: var(--dp-mc-bullet-bg, var(--dp-color-primary, #61c2d0));
	color: var(--dp-mc-bullet, var(--dp-color-on-primary-base, #303030));
}

.dp-mc--arch .dp-mc__bullet .dp-mc__check {
	display: none;
}

.dp-mc--arch .dp-mc__bullet:nth-child(4n + 2) {
	background: var(--dp-mc-bullet-bg, var(--dp-color-secondary, #98d0c1));
	color: var(--dp-mc-bullet, var(--dp-color-on-secondary-base, #303030));
}

.dp-mc--arch .dp-mc__bullet:nth-child(4n + 3) {
	background: var(--dp-mc-bullet-bg, var(--dp-color-tertiary, #a9cf8e));
	color: var(--dp-mc-bullet, var(--dp-color-on-tertiary-base, #303030));
}

.dp-mc--arch .dp-mc__bullet:nth-child(4n + 4) {
	background: var(--dp-mc-bullet-bg, var(--dp-color-quaternary, #fff399));
	color: var(--dp-mc-bullet, var(--dp-color-on-quaternary-base, #303030));
}

@media (max-width: 860px) {
	.dp-mc--arch .dp-mc__media {
		/* Seule la hauteur change : la largeur (donc le rayon en demi-cercle,
		   fixé sur .dp-mc--arch) reste celle du bureau. Un rayon différent ici
		   ne correspondrait plus à cette largeur et aplatirait le sommet du
		   dôme au lieu d'un arrondi complet. */
		height: 300px;
	}
}

/* ── Design « affiche » ──
   Visuel plein cadre et contenu centré : la fin de page « Rejoignez-nous ». */

.dp-mc--poster {
	/* L’affiche suit toujours le rayon centralisé. Cela neutralise aussi les
	   anciennes instances Elementor qui ont enregistré --dp-mc-radius: 0px. */
	border-radius: var(--dp-radius-lg, 20px);
}

/* Le média plein cadre reprend exactement le rayon du bloc. Deux rayons
   différents révéleraient le fond du bloc dans les coins. */
.dp-mc--poster .dp-mc__media {
	border-radius: inherit;
}

.dp-mc--poster .dp-mc__content-inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.dp-mc--poster .dp-mc__copy {
	align-items: center;
}

.dp-mc--poster .dp-mc__title,
.dp-mc--poster .dp-mc__text {
	margin-inline: auto;
}

.dp-mc--poster .dp-mc__buttons,
.dp-mc--poster .dp-mc__bullets {
	justify-content: center;
}

/* Sans largeur explicite, la rangée se réduit à celle du bouton : centrer son
   contenu ne déplace alors rien dans le bloc. */
.dp-mc--poster .dp-mc__buttons {
	width: 100%;
}

/* Le voile de l'affiche est plus dense en haut que celui de l'overlay : le
   contenu est centré, il n'a pas le bas sombre du cadre pour le porter. */
.dp-mc--poster .dp-mc__overlay {
	background: linear-gradient(
		180deg,
		rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.5)) 0%,
		rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 100%
	);
}

.dp-mc__logo {
	display: block;
	width: 190px;
	height: 62px;
	margin: 0 auto 18px;
	background: var(--dp-asset-logo-negative) center / contain no-repeat;
}

/* =====================================================================
 * La puce des points clés
 * =====================================================================
 * « Plus le petit chapeau à la place des bullet points. »
 *
 * L'arc du Ô est déjà livré comme masque par la charte : la puce est donc une
 * forme colorée à travers ce masque, et non un SVG répété dans chaque <li>.
 * Elle suit la couleur d'accent du bloc, comme la coche qu'elle remplace.
 * ===================================================================== */
.dp-mc__marker {
	flex: 0 0 auto;
	display: block;
	width: var(--dp-mc-bullet-size, 18px);
	/* Sans rapport déclaré, changer la largeur aplatirait l'arc. */
	aspect-ratio: 32.244 / 14.379;
	background-color: var(--dp-mc-marker, var(--dp-mc-accent-strong, var(--dp-color-primary-strong, #417e88)));
	-webkit-mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
	mask-image: var(--dp-asset-arc, url(../img/pictos/arc-dark.svg));
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/*
 * L'arc est un accent, pas une lettre : il s'aligne sur la hauteur d'x de la
 * première ligne, un peu plus haut qu'une puce ronde ne le ferait. Posé sur la
 * ligne de base il paraîtrait tombé.
 */
.dp-mc__bullets--arc .dp-mc__marker {
	margin-top: 0.42em;
}

.dp-mc__bullets--dot .dp-mc__marker {
	width: var(--dp-mc-bullet-size, 9px);
	aspect-ratio: 1;
	margin-top: 0.52em;
	border-radius: var(--dp-radius-pill, 999px);
	-webkit-mask-image: none;
	mask-image: none;
}

/* Sans puce, le texte reprend la gouttière que la puce occupait : une liste
   qui garde un retrait sans rien y poser se lit comme une puce manquante. */
.dp-mc__bullets--none .dp-mc__bullet {
	gap: 0;
}

/* =====================================================================
 * Design « bande »
 * =====================================================================
 * La bande de la maquette : pas de visuel, un très grand titre d'un côté, le
 * texte et l'action de l'autre, alignés par le bas. C'est le module qui fait
 * la page dans le concept « Bandes » du design system — une suite de bandes
 * pleine largeur, sans conteneur, qui alternent photo, pastel et encre.
 *
 * Le titre y est deux fois le corps d'un titre de bannière. Ce n'est pas un
 * effet : c'est ce qui fait la bande. Deux textes de tailles voisines côte à
 * côte ne donnent qu'un paragraphe coupé en deux.
 * ===================================================================== */

.dp-mc--band {
	display: block;
	--dp-mc-min-height: clamp(280px, 46vh, 460px);
	--dp-mc-gap: clamp(24px, 3.5vw, 48px);
	--dp-mc-content-padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 90px);
}

.dp-mc--band .dp-mc__content {
	min-height: var(--dp-mc-min-height);
}

.dp-mc--band .dp-mc__content-inner {
	display: grid;
	grid-template-columns: var(--dp-mc-content-fr) var(--dp-mc-media-fr);
	gap: var(--dp-mc-gap);
	align-items: var(--dp-mc-band-align, end);
}

.dp-mc--band .dp-mc__copy,
.dp-mc--band .dp-mc__aside {
	min-width: 0;
}

.dp-mc--band .dp-mc__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.dp-mc.dp-mc--band .dp-mc__title {
	font-size: clamp(1.9rem, 1.05rem + 2.8vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.dp-mc--band .dp-mc__text {
	font-size: 1.06rem;
}

.dp-mc--band .dp-mc__buttons {
	margin-top: 0;
}

@media (max-width: 860px) {
	.dp-mc--band {
		--dp-mc-min-height: 0px;
	}

	/* Une colonne : le titre passe au-dessus du texte, dans l'ordre du DOM. Et
	   les deux colonnes ne sont plus alignées par le bas — il n'y a plus de
	   bas commun. */
	.dp-mc--band .dp-mc__content-inner {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* =====================================================================
 * Les coins
 * =====================================================================
 * Deux blocs qui se suivent doivent se lire comme une seule surface : celui du
 * dessus perd ses coins bas, celui du dessous ses coins hauts. Les laisser
 * arrondis creuserait deux lunules de fond à la jointure.
 *
 * Le rayon lui-même n'est pas touché : il reste celui de la charte, ou celui
 * du contrôle « Bloc » de la section Rayons. Ces règles ne font que ramener
 * deux coins à l'angle droit — retirer le réglage rend les quatre.
 *
 * Elles ferment la feuille pour passer devant `.dp-mc--poster`, qui réaffirme
 * le rayon centralisé sur ses quatre coins.
 * ===================================================================== */

.dp-mc--corners-top {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.dp-mc--corners-bottom {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.dp-mc--corners-none {
	border-radius: 0;
}

/* Sans `color-mix`, le filet du bouton secondaire sur un aplat reprend l'encre
   pleine : moins fin, mais lisible — c'est ce qui compte. */
@supports not (border-color: color-mix(in srgb, red 34%, transparent)) {
	.dp-mc--tinted .dp-mc__button--secondary {
		border-color: var(--dp-mc-on);
	}
}

/* Sur un écran étroit, le texte occupe toute la largeur du cadre : un voile
   latéral n'a plus de côté à assombrir, et le titre repasse sur la lumière de
   la photo. Il redevient vertical. */
@media (max-width: 720px) {
	.dp-mc--scrim-side,
	.dp-mc--scrim-side.dp-mc--h-right,
	.dp-mc--scrim-side.dp-mc--h-center {
		--dp-mc-scrim-fill: linear-gradient(
			180deg,
			rgba(48, 48, 48, calc(var(--dp-mc-overlay-opacity) * 0.78)) 0%,
			rgba(48, 48, 48, var(--dp-mc-overlay-opacity)) 100%
		);
	}
}