/* Dômes Pharma — nouvelle charte (identité de septembre 2026)
   ===========================================================================
   Cette feuille rhabille les blocs du plugin dans le vocabulaire de l'identité
   2026 : encre sur blanc, quatre pastels, capitales suivies, arches et dômes,
   ombres bleu-gris, arrondis larges.

   ── Pourquoi une feuille par RÔLE et non par bloc ──────────────────────────
   Trente-six blocs redessinés un par un donnent trente-six dessins voisins,
   jamais le même. Or ce qu'on demande ici n'est pas « que chaque bloc soit
   joli », c'est que les blocs se ressemblent. Le seul moyen d'y arriver est de
   décrire une fois ce qu'est un sur-titre, une carte, un bouton, une image, et
   de l'appliquer partout — c'est la définition d'un design system.

   Les sélecteurs sont donc des listes explicites de classes réelles, groupées
   par rôle dans un `:is()`. Pas de joker `[class*="__card"]` : il attraperait
   `__card-title` et repeindrait un titre en carte.

   ── Portée ────────────────────────────────────────────────────────────────
   Tout est préfixé par `.dp-nc`, le conteneur que posent les blocs de la
   catégorie « Dômes Pharma – Nouvelle charte ». Les blocs d'origine, hors de ce
   conteneur, ne voient rien de cette feuille : les deux familles cohabitent sur
   le même site, et une page en production ne change pas d'aspect.

   La spécificité est donc (0,2,0) sur chaque règle — une classe de plus que les
   feuilles d'origine, qui gagnent ainsi toujours quand un bloc n'est pas dans
   la nouvelle charte, et perdent toujours quand il y est. Aucun `!important`.

   ── Ce qui n'est pas touché ───────────────────────────────────────────────
   La structure. Aucune règle ici ne change un `display`, un
   `grid-template-columns` ou un ordre d'éléments en dehors de la section
   Responsive — les blocs ont leurs propres grilles, souvent réglables depuis
   Elementor, et les écraser reviendrait à retirer à l'auteur ce qu'il a réglé.
   =========================================================================== */

.dp-nc {
	/* Les leviers de la nouvelle charte, réglables par bloc depuis Elementor.
	   Chacun retombe sur la charte centrale : rien n'est figé ici. */
	--dp-nc-card-radius: var(--dp-radius-lg, 20px);
	--dp-nc-card-bg: var(--dp-color-surface, #ffffff);
	--dp-nc-card-pad: 26px;
	--dp-nc-card-shadow: var(--dp-shadow-sm, 0 4px 16px rgba(16, 51, 96, 0.06), 0 2px 8px rgba(16, 51, 96, 0.04));
	--dp-nc-card-shadow-hover: var(--dp-shadow-hover, 0 18px 40px rgba(16, 51, 96, 0.16));

	--dp-nc-media-radius: var(--dp-radius-md, 16px);
	--dp-nc-arch-radius: 110px;
	--dp-nc-pebble-radius: 24px 200px 200px 200px;

	--dp-nc-eyebrow: var(--dp-color-primary-strong, #417e88);
	--dp-nc-title: var(--dp-color-text, #303030);
	--dp-nc-text: var(--dp-color-text-muted, #5b5b5b);
	--dp-nc-value: var(--dp-color-primary-strong, #417e88);
	--dp-nc-rule: var(--dp-color-border, #dedede);

	--dp-nc-btn-bg: var(--dp-color-primary-fill, #61c2d0);
	--dp-nc-btn-text: var(--dp-color-on-primary, #303030);
	--dp-nc-btn-bg-hover: var(--dp-color-primary-dark, #52a5b1);
	--dp-nc-btn-text-hover: var(--dp-color-on-primary-dark, #303030);
	--dp-nc-btn-radius: var(--dp-radius-pill, 999px);
	--dp-nc-link: var(--dp-color-link, #417e88);
	--dp-nc-link-hover: var(--dp-color-link-hover, #325f66);

	--dp-nc-field-radius: var(--dp-radius-sm, 10px);
	--dp-nc-gap: 20px;

	font-family: var(--dp-font-base, inherit);
	color: var(--dp-color-text, #303030);
}

/* ── 1. Surfaces ───────────────────────────────────────────────────────────
   Une surface pose son fond ET la couleur de texte que la charte a calculée
   pour elle. C'est la seule façon qu'un bloc posé sur un pastel plein ou sur
   le dégradé ne se retrouve pas avec des libellés blancs illisibles : le bloc
   ne sait pas sur quoi il est posé, la surface le sait. */

.dp-nc--surface-tint {
	background: var(--dp-color-primary-soft, #ecf8f9);
}

.dp-nc--surface-grey {
	background: var(--dp-color-surface-grey, #f4f6f6);
}

.dp-nc--surface-gradient {
	background: var(--dp-gradient-primary);
	color: var(--dp-color-on-gradient, #303030);
}

.dp-nc--surface-mesh {
	background: var(--dp-gradient-mesh);
	color: var(--dp-color-on-gradient, #303030);
}

/* Le dégradé du dôme, avec le bord haut courbé : la section reprend la
   silhouette du Ô plutôt qu'un simple rectangle teinté. */
.dp-nc--surface-dome {
	position: relative;
	background: var(--dp-gradient-dome);
	color: var(--dp-color-on-gradient, #303030);
	border-radius: 50% 50% 0 0 / 120px 120px 0 0;
}

/* Les deux surfaces accordées à la gamme.
   -------------------------------------------------------------------------
   Le fond est calculé au rendu et posé en variable sur le conteneur : la
   palette d'une gamme est une donnée de contenu, il y en a autant que de
   gammes, et les émettre toutes dans cette feuille la ferait grossir à chaque
   gamme ajoutée pour qu'une seule serve sur une page donnée.

   Le repli est le dégradé de marque, pas du blanc : un bloc posé hors d'un
   produit ou d'une page de gamme reste dessiné, au lieu de passer pour une
   panne. */
.dp-nc--surface-range {
	background: var(--dp-nc-range-surface, var(--dp-gradient-primary));
	color: var(--dp-nc-range-on, var(--dp-color-on-gradient, #303030));
}

/* Le dôme de la gamme reprend le bord haut courbé de son homologue de marque :
   c'est la silhouette du Ô, et elle ne dépend pas de la palette. */
.dp-nc--surface-range-dome {
	position: relative;
	background: var(--dp-nc-range-surface, var(--dp-gradient-dome));
	color: var(--dp-nc-range-on, var(--dp-color-on-gradient, #303030));
	border-radius: 50% 50% 0 0 / 120px 120px 0 0;
}

/* Sur une surface colorée, les rôles de texte suivent la couleur calculée
   plutôt que l'encre et le gris : un sur-titre en primaire soutenue sur le
   dégradé de marque disparaîtrait. */
.dp-nc--surface-gradient,
.dp-nc--surface-mesh,
.dp-nc--surface-dome,
.dp-nc--surface-range,
.dp-nc--surface-range-dome {
	--dp-nc-eyebrow: currentColor;
	--dp-nc-title: currentColor;
	--dp-nc-text: currentColor;
	--dp-nc-value: currentColor;
}

.dp-nc--surface-deep,
.dp-nc--surface-ink {
	color: var(--dp-color-text-invert, #ffffff);
	--dp-nc-eyebrow: rgba(255, 255, 255, 0.72);
	--dp-nc-title: #ffffff;
	--dp-nc-text: rgba(255, 255, 255, 0.82);
	--dp-nc-value: #ffffff;
	--dp-nc-rule: rgba(255, 255, 255, 0.24);
	--dp-nc-card-bg: rgba(255, 255, 255, 0.06);
	--dp-nc-link: #ffffff;
	--dp-nc-link-hover: rgba(255, 255, 255, 0.72);
}

.dp-nc--surface-deep { background: var(--dp-color-primary-deep, #325f66); }
.dp-nc--surface-ink  { background: var(--dp-color-text, #303030); }

/* Les surfaces autres que blanche respirent : posées à ras du contenu, elles
   se lisent comme un aplat accidentel et non comme une section. */
.dp-nc--surface-tint,
.dp-nc--surface-grey,
.dp-nc--surface-gradient,
.dp-nc--surface-mesh,
.dp-nc--surface-dome,
.dp-nc--surface-range,
.dp-nc--surface-range-dome,
.dp-nc--surface-deep,
.dp-nc--surface-ink {
	padding: var(--dp-nc-surface-pad, clamp(32px, 4vw, 64px));
	border-radius: var(--dp-nc-surface-radius, var(--dp-radius-xl, 32px));
}

.dp-nc--surface-dome,
.dp-nc--surface-range-dome {
	border-radius: 50% 50% 0 0 / 120px 120px 0 0;
}

/* ── 2. Typographie par rôle ───────────────────────────────────────────────
   Les quatre rôles de texte de la charte. Ils ne changent ni la taille des
   titres — réglée bloc par bloc dans Elementor — ni leur balise : seulement la
   famille, la graisse, l'interlignage, l'interlettrage et la couleur. */

/* Sur-titre : capitales suivies à +0,12 em, trois mots, jamais une phrase. */
.dp-nc :is(
	.dp-cat__eyebrow, .dp-ce__eyebrow, .dp-cl__eyebrow, .dp-dl__eyebrow,
	.dp-kf__eyebrow, .dp-mc__eyebrow, .dp-nl__eyebrow, .dp-ps__eyebrow,
	.dp-ql__eyebrow, .dp-rh__eyebrow, .dp-rs__eyebrow, .dp-sl__eyebrow,
	.dp-st__eyebrow, .dp-vl__eyebrow
) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	color: var(--dp-nc-eyebrow);
}

/* Titres : Graphie bold, interlignage serré, très légère chasse négative.
   La taille reste celle du bloc : c'est un réglage d'auteur. */
.dp-nc :is(
	.dp-ab__card-title, .dp-article__title, .dp-blog__card-title, .dp-blog__title,
	.dp-cat__card-title, .dp-cat__title, .dp-cb__title, .dp-ce__card-title,
	.dp-ce__title, .dp-cl__name, .dp-cl__title, .dp-dist__title, .dp-dl__item-title,
	.dp-dl__title, .dp-ev__title,
	.dp-find-us__title, .dp-form__heading, 	.dp-info-cards__heading, .dp-iti__title, .dp-kf__title, .dp-mc__title,
	.dp-na__title, .dp-nl__title, .dp-pb__title, .dp-pc__card-title, .dp-pc__title,
	.dp-pd__title, .dp-pg__card-title, .dp-pg__title, .dp-ps__title,
	.dp-ql__item-title, .dp-ql__title, .dp-quiz__title,
	.dp-related-products__card-title, .dp-related-products__title,
	.dp-rh__card-title, .dp-rh__title, .dp-rs__title, .dp-sl__title, .dp-st__title,
	.dp-team__name, .dp-team__title, .dp-vl__title
) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--dp-nc-title);
}

/* Les grands titres serrent davantage : à 40 px, 1,15 fait flotter les lignes.
   Le seuil est en em pour suivre la taille réglée par l'auteur. */
.dp-nc :is(.dp-sl__title, .dp-st__title, .dp-mc__title) {
	line-height: 1.06;
}

/* Texte courant : interlignage large, encre atténuée. */
.dp-nc :is(
	.dp-ab__card-desc, .dp-ab__intro, .dp-article__body, .dp-article__text,
	.dp-blog__body, .dp-blog__excerpt, .dp-blog__subtitle, .dp-cat__card-desc,
	.dp-cat__intro, .dp-cb__body, .dp-cb__desc, .dp-ce__card-desc,
	.dp-ce__description, .dp-cl__desc, .dp-cl__intro, .dp-dist__description,
	.dp-dl__desc, .dp-dl__intro,
	.dp-ev__body, .dp-ev__desc, .dp-info-card__text,
	.dp-iti__subtitle, .dp-kf__desc, .dp-kf__text, .dp-mc__text, .dp-nl__desc,
	.dp-pb__text, .dp-pc__description, .dp-pd__subtitle, .dp-pg__description,
	.dp-ps__description, .dp-quiz__desc, .dp-rh__card-desc, .dp-rh__description,
	.dp-rs__text, .dp-sl__text, .dp-sp__intro, .dp-st__intro, .dp-st__text,
	.dp-team__description, .dp-vl__intro
) {
	line-height: var(--dp-leading-relaxed, 1.65);
	color: var(--dp-nc-text);
}

/* Un chapô de section ne dépasse pas une cinquantaine de caractères par ligne :
   au-delà, l'œil perd la ligne suivante. */
.dp-nc :is(.dp-cat__intro, .dp-cl__intro, .dp-dl__intro, .dp-st__intro, .dp-ab__intro, .dp-sp__intro) {
	max-width: 52ch;
}

/* Repères chiffrés : la valeur est le point d'entrée du bloc, plus grosse que
   son libellé et dans la couleur de marque soutenue. */
.dp-nc :is(.dp-cl__numeral, .dp-kf__value, .dp-ql__number) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--dp-nc-value);
}

/* Libellés de repère : capitales suivies, comme les sur-titres. Les libellés de
   champ de formulaire en sont exclus — un champ se lit en casse normale. */
.dp-nc :is(.dp-bt__label, .dp-kf__label, .dp-pg__label) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	color: var(--dp-nc-title);
}

/* ── 3. Cartes ─────────────────────────────────────────────────────────────
   La carte de la charte : blanche, 20 px, **sans bordure**. La séparation vient
   d'une ombre bleu-gris et du blanc autour, jamais d'un filet — un filet plus
   une ombre donne deux fois la même information et alourdit la grille.

   La liste est curatée, pas déduite. Beaucoup de blocs nomment `__item` la
   cellule de grille et `__card` la surface à l'intérieur : peindre les deux
   empilerait deux ombres et deux arrondis. Chaque bloc n'apparaît donc ici
   qu'une fois, sur l'élément qui porte réellement la surface. */

.dp-nc :is(
	.dp-ab__card, .dp-article__card, .dp-blog__card, .dp-cat__card, .dp-cb__item,
	.dp-ce__card, .dp-cl__card, .dp-contact-card, .dp-dist__card, .dp-dl__card,
	.dp-ev__item, .dp-info-card, .dp-kf__item, .dp-na__card, .dp-pc__card, .dp-pg__card,
	.dp-ps__card, .dp-ql__item, .dp-quiz__card, .dp-related-products__card,
	.dp-rh__card, .dp-rs__panel, .dp-sp__panel, .dp-team__card, .dp-vl__panel
) {
	background: var(--dp-nc-card-bg);
	border: 0;
	border-radius: var(--dp-nc-card-radius);
	box-shadow: var(--dp-nc-card-shadow);
	transition: var(--dp-transition-card, transform 0.25s ease, box-shadow 0.25s ease);
}

/* Survol : on lève de 2 px et on descend l'ombre d'un cran. Jamais de
   changement de teinte — la charte l'interdit, et un aplat qui change de
   couleur au survol se lit comme un autre élément. */
.dp-nc :is(
	.dp-ab__card, .dp-article__card, .dp-blog__card, .dp-cat__card, .dp-cb__item,
	.dp-ce__card, .dp-cl__card, .dp-contact-card, .dp-dist__card, .dp-dl__card,
	.dp-ev__item, .dp-info-card, .dp-na__card, .dp-pc__card, .dp-pg__card,
	.dp-ql__item, .dp-related-products__card, .dp-rh__card, .dp-team__card
):hover {
	transform: var(--dp-lift-hover, translateY(-2px));
	box-shadow: var(--dp-nc-card-shadow-hover);
}

/* La fiche produit ne se soulève pas, et pour deux raisons.
   ---------------------------------------------------------------------------
   La première est la même que pour les repères chiffrés : elle ne mène nulle
   part. C'est la page elle-même, pas une vignette qui attend un clic, et une
   surface de six cents pixels qui bouge au passage de la souris se lit comme un
   défaut d'affichage.

   La seconde est une mécanique, et elle cassait quelque chose de visible : un
   `transform` fait de l'élément le conteneur de ses descendants en
   `position: fixed`. La modale du bouton « Acheter », posée en `fixed` pour
   voiler la page entière, se retrouvait donc enfermée dans la carte tant que la
   souris y était — un voile aux dimensions de la fiche — et sautait au cadre de
   la fenêtre dès que la souris en sortait. */
.dp-nc .dp-ps__card:hover {
	transform: none;
}

/* Un repère chiffré ne se survole pas : rien à y cliquer. */
.dp-nc :is(.dp-kf__item, .dp-quiz__card, .dp-rs__panel, .dp-sp__panel, .dp-vl__panel):hover {
	transform: none;
}

/* Le liseré de couleur en haut de carte, motif de la charte pour signaler une
   gamme. Il remplace la bordure : 6 px, arrondi avec la carte. */
.dp-nc--lisere :is(.dp-cat__card, .dp-ce__card, .dp-rh__card, .dp-dist__card, .dp-pg__card) {
	overflow: hidden;
	position: relative;
}

.dp-nc--lisere :is(.dp-cat__card, .dp-ce__card, .dp-rh__card, .dp-dist__card, .dp-pg__card)::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--dp-nc-lisere, var(--dp-gradient-primary));
}

/* Densité compacte : les cartes se resserrent sans changer de dessin. Utile sur
   une page qui en aligne douze. */
.dp-nc--compact {
	--dp-nc-card-pad: 18px;
	--dp-nc-gap: 14px;
}

/* ── 4. Médias et silhouettes ──────────────────────────────────────────────
   Le motif signature de l'identité : l'arche et le dôme. Ils viennent du Ô du
   logotype, et c'est à ça qu'on reconnaît une page Dômes Pharma avant d'avoir
   lu un mot.

   Le sélecteur est préfixé par `img` là où l'élément est une image : Elementor
   pose `.elementor img { border-radius: 0; height: auto }` en (0,1,1), plus
   fort qu'une classe seule. Sans le nom d'élément, l'arche rend un rectangle
   et rien ne le signale. */

.dp-nc :is(
	.dp-article__media, .dp-blog__image, .dp-cb__image, .dp-ev__image,
	.dp-iti__media, .dp-mc__media, .dp-pb__media,
	.dp-pd__image, .dp-pg__thumb, .dp-ps__media, .dp-rs__media, .dp-sl__media,
	.dp-team__photo, .dp-cat__media
) {
	border-radius: var(--dp-nc-media-radius);
	overflow: hidden;
}

.dp-nc :is(
	.dp-article__media, .dp-blog__image, .dp-cb__image, .dp-ev__image,
	.dp-iti__media, .dp-pb__media, .dp-pg__thumb, .dp-ps__media, .dp-rs__media,
	.dp-team__photo, .dp-cat__media
) img,
.dp-nc img:is(.dp-iti__image, .dp-rs__image, .dp-ps__image, .dp-cb__image) {
	border-radius: inherit;
}

/* Une image de COUVERTURE est à ras du bord de la carte : la carte est déjà en
   `overflow: hidden` et porte l'arrondi. Lui ajouter le sien creuse un liseré
   blanc dans les angles hauts — on lit une carte dans une carte.

   Cette règle vaut aussi sous les silhouettes : une arche découpée dans une
   carte de 300 px est rognée par la carte et ne se lit plus comme une arche,
   mais comme une image abîmée. Les silhouettes sont pour les visuels de mise en
   avant, hors carte. */
.dp-nc :is(
	.dp-ab__card, .dp-article__card, .dp-blog__card, .dp-cat__card, .dp-cb__item,
	.dp-ce__card, .dp-cl__card, .dp-contact-card, .dp-dist__card, .dp-ev__item,
	.dp-info-card, .dp-na__card, .dp-pc__card, .dp-pg__card, .dp-ps__card,
	.dp-ql__item, .dp-related-products__card, .dp-rh__card, .dp-team__card
) :is(
	.dp-article__media, .dp-blog__image, .dp-cb__image, .dp-ev__image,
	.dp-pg__thumb, .dp-rs__media, .dp-team__photo, .dp-cat__media
) {
	border-radius: 0;
}

/* La fiche produit fait exception, et c'est la forme de son visuel qui le
   décide : il n'est pas à ras du bord mais posé au centre d'un panneau de
   couleur, à trente-deux pixels des arêtes. Il n'y a donc aucun liseré à
   creuser dans les angles, et la maquette lui donne bien un arrondi. */

/* Le design dôme des catégories fait exception pour l'autre raison : sa carte
   n'est pas une surface. Pas de fond, pas de bord, et surtout plus d'`overflow:
   hidden` — il rognait le lien posé à ras du bord, le « V » de « VOIR LA
   GAMME ». La règle ci-dessus part du principe que la carte porte l'arrondi et
   détoure ; ici personne ne le ferait, et le dôme rendrait un rectangle. C'est
   donc au visuel de le porter, comme le veut sa propre feuille — d'où la chaîne
   qui laisse le contrôle « Arrondi du visuel » primer.
 */
.dp-nc .dp-cat--dome .dp-cat__card .dp-cat__media {
	border-radius: var(--dp-cat-dome-radius, var(--dp-nc-media-radius, var(--dp-radius-lg, 20px)));
}

/* Arche : arrondi haut très marqué, base à peine adoucie. À réserver aux
   visuels de mise en avant — sur une vignette de 80 px, l'arche mange le sujet. */
.dp-nc--arch :is(
	.dp-article__media, .dp-cb__image, .dp-ev__image, .dp-iti__media,
	.dp-mc__media, .dp-pb__media, .dp-ps__media, .dp-rs__media, .dp-team__photo
) {
	border-radius: var(--dp-nc-arch-radius) var(--dp-nc-arch-radius)
	               var(--dp-nc-media-radius) var(--dp-nc-media-radius);
}

/* Dôme : la demi-ellipse du Ô, flancs verticaux. Le visuel doit être plus haut
   que large, sinon la courbe s'aplatit et le motif ne se lit plus. */
.dp-nc--dome :is(
	.dp-article__media, .dp-cb__image, .dp-iti__media, .dp-mc__media,
	.dp-pb__media, .dp-ps__media, .dp-rs__media, .dp-team__photo
) {
	border-radius: var(--dp-radius-dome, 50% 50% 0 0 / 78% 78% 0 0);
}

/* Galet : la découpe asymétrique de la charte — un coin franc, trois flancs
   arrondis. C'est la forme des portraits. */
.dp-nc--pebble :is(.dp-team__photo, .dp-contact-avatar, .dp-ps__media, .dp-pb__media) {
	border-radius: var(--dp-nc-pebble-radius);
}

/* Un logotype de gamme n'est ni recadré ni arrondi : il est détouré sur fond
   transparent, et l'arrondir coupe une lettre. */
.dp-nc :is(.dp-cat__logo, .dp-mc__logo, .dp-dist__card-initials) {
	border-radius: 0;
	overflow: visible;
}

.dp-nc :is(.dp-cat__logo, .dp-mc__logo) img {
	border-radius: 0;
	object-fit: contain;
}

/* ── 5. Badges, pastilles, compteurs ──────────────────────────────────────
   Pill, capitales suivies, fond en teinte claire et texte encre. Les quatre
   pastels de la charte tournent d'une pastille à l'autre quand plusieurs se
   suivent : c'est ce qui fait la rangée bariolée voulue par l'identité, sans
   qu'aucun libellé ne devienne illisible. */

.dp-nc :is(
	.dp-article__badge, .dp-blog__badge, .dp-cat__badge, .dp-cb__tag,
	.dp-ce__pill, .dp-dl__badge, .dp-ev__tag, .dp-mc__badge, .dp-pg__range-pill,
	.dp-related-products__pill, .dp-rh__pill, .dp-sl__badge, .dp-na__range-badge
) {
	display: inline-flex;
	align-items: center;
	border-radius: var(--dp-radius-pill, 999px);
	padding: 7px 14px;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	line-height: 1;
}

/* L'espace entre les étiquettes
   ---------------------------------------------------------------------------
   « Pour les tags refaire l'espace entre. »

   Une rangée d'étiquettes n'a pas un écart mais deux, et ils ne valent pas la
   même chose. Entre deux étiquettes voisines, l'écart sépare deux mots : il
   peut rester serré. Entre deux rangées, il sépare deux lignes de pastilles
   hautes de trente pixels, et le même chiffre les fait se toucher — c'est ce
   qu'on voyait dès qu'une rangée passait à la ligne.

   L'écart vertical vaut donc une fois et demie l'horizontal, et les deux se
   règlent d'un seul endroit. Les conteneurs sont listés explicitement : un
   joker `[class*="tags"]` attraperait aussi les libellés qui portent ce mot.

   `align-items: center` compte autant que l'écart : sans lui, deux étiquettes
   de longueurs inégales s'alignent sur leur base et la plus courte paraît
   remonter. */

.dp-nc :is(
	.dp-ce__pills, .dp-rh__pills, .dp-rh__card-tags, .dp-ps__brand-tags
) {
	--dp-nc-tag-gap: 8px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--dp-nc-tag-gap);
	row-gap: calc(var(--dp-nc-tag-gap) * 1.5);
}

/* Compteurs et dates : même famille, mais sans aplat — ce sont des méta, pas
   des étiquettes. */
.dp-nc :is(
	.dp-article__date, .dp-blog__date, .dp-cat__count, .dp-cb__meta,
	.dp-cl__count, .dp-dl__size, .dp-ev__date, .dp-pc__count, .dp-pg__count,
	.dp-pg__meta
) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	color: var(--dp-color-text-faint, #8a8a8a);
}

/* Les pastilles de gamme gardent la couleur du terme : elle identifie la gamme,
   et le texte lisible arrive avec elle depuis le PHP (--range-on). On ne fait
   ici que la mettre à la forme de la charte. */
.dp-nc :is(.dp-pg__range-pill, .dp-related-products__pill, .dp-na__range-badge)[style] {
	border: 0;
}

/* ── 6. Boutons et liens ───────────────────────────────────────────────────
   Un bouton est une pilule en aplat de marque, avec le texte que la charte a
   calculé pour cet aplat. Un lien est du texte en capitales suivies avec une
   flèche — pas un bouton fantôme : deux niveaux d'action visibles suffisent. */

.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-ce__card-cta,
	.dp-cl__button, .dp-dl__button, .dp-ev__btn, .dp-file-btn, .dp-find-us__map-button,
	.dp-kf__button, .dp-mc__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-pg__all-products, .dp-pg__go-button,
	.dp-quiz__btn, .dp-quiz__submit, .dp-related-products__button, .dp-rs__button,
	.dp-sl__button, .dp-sp__button, .dp-vl__button
) {
	border-radius: var(--dp-nc-btn-radius);
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: var(--dp-transition-base, all 0.2s ease);
}

.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-cl__button,
	.dp-dl__button, .dp-ev__btn, .dp-kf__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-quiz__submit,
	.dp-related-products__button, .dp-vl__button
):hover {
	transform: var(--dp-lift-hover, translateY(-2px));
}

/* Pression : on retombe à plat. Un bouton qui reste soulevé au clic ne dit pas
   qu'il a été pressé. */
.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-cl__button,
	.dp-dl__button, .dp-ev__btn, .dp-kf__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-quiz__submit, .dp-vl__button
):active {
	transform: scale(0.98);
	box-shadow: var(--dp-shadow-xs, 0 1px 3px rgba(16, 51, 96, 0.06));
}

/* Liens d'action : capitales suivies, et la flèche est le caractère « → », pas
   une icône — la charte n'a pas de jeu d'icônes pour ça et n'en veut pas. */
.dp-nc :is(
	.dp-blog__more, .dp-cat__cta, .dp-contact-mail__link, .dp-dl__action,
	.dp-info-card__link, .dp-iti__link, .dp-pg__reset, .dp-ql__cta
) {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dp-nc-link);
	transition: color var(--dp-duration, 0.2s) ease;
}

.dp-nc :is(
	.dp-blog__more, .dp-cat__cta, .dp-contact-mail__link, .dp-dl__action,
	.dp-info-card__link, .dp-iti__link, .dp-pg__reset, .dp-ql__cta
):hover {
	color: var(--dp-nc-link-hover);
}

/* La flèche avance de 4 px au survol de la carte entière, pas seulement du
   lien : c'est la carte qui est cliquable. */
.dp-nc :is(.dp-cat__arrow, .dp-blog__arrow, .dp-dl__arrow, .dp-rh__arrow) {
	transition: transform var(--dp-duration-slow, 0.25s) ease;
}

/* ── 7. Champs de formulaire ───────────────────────────────────────────────
   Filet de 1 px, arrondi court, anneau de focus toujours visible. Le focus
   n'est jamais retiré : c'est la seule affordance des personnes au clavier. */

.dp-nc :is(
	.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
	.dp-pg__select, .dp-pg__custom-select-trigger, .dp-contact-search,
	.dp-contact-zip, .dp-vl__input
) {
	border-radius: var(--dp-nc-field-radius);
	border: 1px solid var(--dp-color-border, #dedede);
	font-family: var(--dp-font-base, inherit);
	transition: border-color var(--dp-duration, 0.2s) ease, box-shadow var(--dp-duration, 0.2s) ease;
}

.dp-nc :is(
	.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
	.dp-pg__select, .dp-contact-search, .dp-contact-zip, .dp-vl__input
):focus {
	outline: none;
	border-color: var(--dp-color-primary-strong, #417e88);
	box-shadow: var(--dp-focus-ring, 0 0 0 3px rgba(65, 126, 136, 0.28));
}

/* La couleur dans les champs
   ---------------------------------------------------------------------------
   « Rajouter des couleurs si possibles. »

   Un formulaire tout en gris passe pour désactivé. Trois endroits prennent la
   couleur de marque sans que le champ cesse d'être un champ :

   — le fond au repos, en teinte très claire plutôt qu'en blanc : le champ se
     détache de la carte blanche qui le porte, ce que le seul filet de 1 px ne
     faisait pas ;
   — le filet au survol, avant même le focus : le champ répond au passage ;
   — l'astérisque des champs requis, qui était rouge — la seule couleur du
     formulaire, et elle disait « erreur » avant qu'on ait rien saisi.

   Le fond reste très clair : à huit pour cent, un texte encre y garde plus de
   quatorze pour un, quelle que soit la couleur de marque. Au focus le champ
   redevient blanc — c'est là qu'on écrit, et c'est le contraste maximal qu'il
   faut. */

.dp-nc :is(
	.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
	.dp-pg__select, .dp-pg__custom-select-trigger, .dp-contact-search,
	.dp-contact-zip, .dp-vl__input
) {
	background-color: var(
		--dp-nc-field-bg,
		color-mix(in srgb, var(--dp-color-primary, #61c2d0) 8%, var(--dp-color-surface, #ffffff))
	);
	color: var(--dp-color-text, #303030);
}

.dp-nc :is(
	.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
	.dp-pg__select, .dp-pg__custom-select-trigger, .dp-contact-search,
	.dp-contact-zip, .dp-vl__input
):hover:not(:focus) {
	border-color: var(--dp-color-primary-strong, #417e88);
}

.dp-nc :is(
	.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
	.dp-pg__select, .dp-contact-search, .dp-contact-zip, .dp-vl__input
):focus {
	background-color: var(--dp-color-surface, #ffffff);
}

/* L'astérisque des champs requis : la couleur de marque et non le rouge. Le
   rouge d'un formulaire est réservé aux erreurs — employé sur l'astérisque, il
   signale une faute avant qu'on ait saisi quoi que ce soit. */
.dp-nc :is(.dp-form__label, .dp-quiz__label, .dp-vl__label) .required,
.dp-nc :is(.dp-form__label, .dp-quiz__label, .dp-vl__label) abbr[title] {
	color: var(--dp-color-primary-strong, #417e88);
	text-decoration: none;
}

/* Repli sans `color-mix()` : le champ reste blanc, comme avant. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.dp-nc :is(
		.dp-input, .dp-select, .dp-textarea, .dp-nl__input, .dp-quiz__input,
		.dp-pg__select, .dp-pg__custom-select-trigger, .dp-contact-search,
		.dp-contact-zip, .dp-vl__input
	) {
		background-color: var(--dp-color-surface, #ffffff);
	}
}

/* Les libellés de champ restent en casse normale : un formulaire se remplit,
   il ne s'annonce pas. */
.dp-nc :is(.dp-form__label, .dp-quiz__label, .dp-vl__label, .dp-contact-search__label) {
	font-family: var(--dp-font-base, inherit);
	font-weight: 600;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dp-color-text, #303030);
}

/* ── 8. En-têtes de section, filets, séparateurs ───────────────────────────
   L'en-tête de section de la charte : l'arc du Ô, le sur-titre, le titre à
   gauche et le chapô à droite alignés par le bas. Le bloc porte déjà les trois
   textes ; on ne fait que les mettre en place et ajouter l'arc. */

.dp-nc :is(
	.dp-blog__header, .dp-cat__header, .dp-ce__header, .dp-cl__header,
	.dp-dist__header, .dp-info-cards__header, .dp-kf__header, .dp-na__header,
	.dp-pc__header, .dp-pg__header, .dp-ql__header, .dp-rh__header,
	.dp-sl__header, .dp-team__header, .dp-ep__header
) {
	position: relative;
	margin-bottom: clamp(26px, 3vw, 40px);
}

/* L'arc du Ô au-dessus du sur-titre. Il est optionnel : sur une page qui
   enchaîne six sections, six arcs font un motif, pas une signature. */
.dp-nc--arc :is(
	.dp-blog__header, .dp-cat__header, .dp-ce__header, .dp-cl__header,
	.dp-dist__header, .dp-kf__header, .dp-na__header, .dp-ql__header,
	.dp-rh__header, .dp-sl__header, .dp-team__header, .dp-ep__header
)::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	background: var(--dp-asset-dome-mark) left center / contain no-repeat;
}

.dp-ep .dp-ep__header { margin-bottom: 0; }

/* Le liseré de dégradé qui ouvre une section : 6 px, pleine largeur, en pilule.
   C'est la seule bande de couleur pleine que la charte autorise hors section
   teintée. */
.dp-nc--rule :is(
	.dp-blog__header, .dp-cat__header, .dp-ce__header, .dp-cl__header,
	.dp-kf__header, .dp-ql__header, .dp-rh__header, .dp-team__header
)::after {
	content: '';
	display: block;
	height: 6px;
	margin-top: clamp(22px, 2.6vw, 34px);
	border-radius: var(--dp-radius-pill, 999px);
	background: var(--dp-gradient-primary);
}

/* Filets : 1 px, gris de la charte, jamais plus sombre. Une ligne à 2 px se lit
   comme une bordure de carte. */
.dp-nc :is(
	.dp-cl__row, .dp-find-us__row, .dp-pd__list, .dp-vl__row, .dp-pb__row
) {
	border-color: var(--dp-nc-rule);
}

/* Onglets : filet sous la bande, l'onglet actif marqué par un trait épais de la
   couleur de marque soutenue — pas par un aplat, qui ferait un bouton. */
.dp-nc :is(.dp-pd__tab, .dp-sp__tab) {
	border-radius: var(--dp-radius-sm, 10px) var(--dp-radius-sm, 10px) 0 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ── 9. Mouvement ──────────────────────────────────────────────────────────
   Court et fonctionnel : 0,2 s sur la couleur, 0,25 s sur l'élévation. Pas de
   rebond, pas de parallaxe, pas d'apparition au défilement. Sous
   prefers-reduced-motion, la charte met déjà les durées à zéro ; on retire en
   plus les transformations, qui ne sont pas des durées. */

@media (prefers-reduced-motion: reduce) {
	.dp-nc *,
	.dp-nc *::before,
	.dp-nc *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.dp-nc :is(
		.dp-ab__card, .dp-article__card, .dp-blog__card, .dp-cat__card, .dp-cb__item,
		.dp-ce__card, .dp-cl__card, .dp-contact-card, .dp-dist__card, .dp-dl__card,
		.dp-ev__item, .dp-info-card, .dp-na__card, .dp-pc__card, .dp-pg__card, .dp-ps__card,
		.dp-ql__item, .dp-related-products__card, .dp-rh__card, .dp-team__card
	):hover {
		transform: none;
	}
}

/* ── 10. Responsive ────────────────────────────────────────────────────────
   Trois seuils, ceux du design system : 1080 px, 860 px, 620 px.

   Le nombre de colonnes des grilles n'est PAS repris ici. Chaque bloc gère
   déjà son effondrement dans ses propres media queries, et la plupart exposent
   le nombre de colonnes en réglage Elementor : le réécrire depuis cette feuille
   retirerait à l'auteur ce qu'il a choisi, et surtout ferait doublon avec une
   règle qui fonctionne. Ce qui est réglé ici est ce que la nouvelle charte
   ajoute — les silhouettes, les rembourrages, les arrondis, les rangées
   d'action — donc ce que les blocs ne peuvent pas connaître. */

@media (max-width: 1080px) {
	/* L'arche se resserre : à 110 px de rayon sur un visuel devenu deux fois
	   moins large, la courbe avale le sujet. */
	.dp-nc--arch {
		--dp-nc-arch-radius: 80px;
	}
}

@media (max-width: 860px) {
	.dp-nc {
		--dp-nc-surface-pad: clamp(22px, 5vw, 34px);
		--dp-nc-card-pad: 20px;
	}

	/* Les en-têtes scindés — titre à gauche, chapô à droite — repassent alignés
	   en haut : alignés par le bas, le chapô flotterait sous un titre devenu
	   deux fois plus haut. */
	.dp-nc :is(
		.dp-blog__header, .dp-cat__header, .dp-cl__header, .dp-kf__header,
		.dp-ql__header, .dp-rh__header, .dp-sl__header, .dp-team__header
	) {
		align-items: start;
	}

	.dp-nc--arch {
		--dp-nc-arch-radius: 70px;
	}

	/* Le dôme de fond de section s'aplatit : une courbe de 120 px sur 390 px de
	   large devient une bosse. */
	.dp-nc--surface-dome {
		border-radius: 50% 50% 0 0 / 60px 60px 0 0;
	}
}

@media (max-width: 620px) {
	.dp-nc {
		--dp-nc-card-radius: var(--dp-radius-md, 16px);
		--dp-nc-surface-radius: var(--dp-radius-lg, 20px);
		--dp-nc-gap: 12px;
	}

	/* Une rangée de boutons à 390 px : chacun prend la largeur, et l'ordre de
	   lecture remplace l'ordre de gauche à droite. */
	.dp-nc :is(
		.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-cl__button,
		.dp-ev__btn, .dp-kf__button, .dp-nl__button,
		.dp-on__button, .dp-pd__button, .dp-quiz__submit,
		.dp-related-products__button, .dp-rs__button, .dp-vl__button
	) {
		width: 100%;
		justify-content: center;
	}

	/* L'arche et le galet redeviennent des cartes : sous 620 px la silhouette
	   n'a plus la place de se lire, et elle coûte la moitié du sujet. */
	.dp-nc--arch,
	.dp-nc--pebble {
		--dp-nc-arch-radius: 48px;
		--dp-nc-pebble-radius: var(--dp-radius-md, 16px);
	}

	/* Un très grand titre resserré à -0,01 em devient illisible une fois réduit
	   par le clamp de la charte : on relâche la chasse. */
	.dp-nc :is(.dp-sl__title, .dp-st__title) {
		letter-spacing: -0.005em;
	}
}

/* ── 11. Impression ───────────────────────────────────────────────────────
   Une fiche produit ou une notice s'imprime. Les ombres et les aplats de
   dégradé n'ont aucun sens sur papier et coûtent de l'encre. */

@media print {
	.dp-nc :is(
		.dp-ab__card, .dp-article__card, .dp-blog__card, .dp-cat__card, .dp-cb__item,
		.dp-ce__card, .dp-cl__card, .dp-contact-card, .dp-dist__card, .dp-ev__item,
		.dp-info-card, .dp-kf__item, .dp-na__card, .dp-pc__card, .dp-pg__card,
		.dp-ps__card, .dp-ql__item, .dp-related-products__card, .dp-rh__card,
		.dp-team__card
	) {
		box-shadow: none;
		border: 1px solid var(--dp-color-border, #dedede);
	}

	.dp-nc--surface-gradient,
	.dp-nc--surface-mesh,
	.dp-nc--surface-dome,
	.dp-nc--surface-range,
	.dp-nc--surface-range-dome {
		background: none;
		color: var(--dp-color-text, #303030);
	}
}

/* ── 6 bis. Le survol des boutons : les couleurs du logo ──────────────────
   « Imaginer une animation avec les couleurs du logo qui apparaissent sur les
   côtés du bouton quand on le survole. »

   ── Ce qui n'a pas marché, et pourquoi ──

   Première exécution : deux barres verticales, une par flanc, qui sortaient de
   dessous le bouton en s'écartant. Sur un bouton de formulaire — une pilule de
   quatre-vingts pixels — ça ne se lisait pas comme une signature de marque mais
   comme deux éléments égarés à côté du bouton. Le geste demandait une largeur
   que ces boutons n'ont pas.

   ── Ce qui le remplace ──

   Un halo : le dégradé de marque affleure tout autour du bouton, à trois pixels
   de son bord, en épousant sa forme. Il ne se détache jamais de lui, donc il ne
   peut pas se lire comme autre chose. Sur une pilule large il souligne les
   flancs — c'est là que le halo est le plus épais visuellement — et sur un petit
   bouton il reste un liseré.

   Trois décisions valent d'être écrites.

   Le halo est *derrière* le bouton, dans un contexte d'empilement isolé. Posé à
   côté, il aurait élargi le bouton au survol et déplacé ses voisins dans la
   rangée — une rangée de boutons qui se réorganise quand le curseur la traverse.

   Il ne touche ni la taille ni la couleur du bouton. Un bouton dont l'aplat
   change au survol dit « je suis pressable » ; celui-ci dit « je suis de cette
   marque ». Les deux messages cohabitent parce qu'ils passent par deux
   propriétés différentes.

   `--dp-btn-flank-on` vaut 0 ou 1, publié par la charte. Il multiplie l'opacité,
   ce qui éteint l'effet sans dupliquer la règle. */

.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-ce__card-cta,
	.dp-cl__button, .dp-ev__btn, .dp-file-btn, .dp-find-us__map-button,
	.dp-kf__button, .dp-mc__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-pg__all-products, .dp-pg__go-button,
	.dp-quiz__btn, .dp-quiz__submit, .dp-related-products__button, .dp-rs__button,
	.dp-sl__button, .dp-sp__button, .dp-vl__button
) {
	/* --dp-btn-flank-on n'est PAS redéclaré ici : la charte le publie sur
	   :root, et une déclaration locale primerait dessus — le réglage
	   « Survol des boutons » deviendrait alors du code mort. Le repli à 1 est
	   porté par chaque `var()` qui le lit. */
	--dp-btn-halo: 3px;

	position: relative;
	/* Sans isolation, le `z-index: -1` du halo le ferait passer derrière le fond
	   de la carte qui porte le bouton, et non derrière le bouton seul : il
	   disparaîtrait purement et simplement. */
	isolation: isolate;
}

.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-ce__card-cta,
	.dp-cl__button, .dp-ev__btn, .dp-file-btn, .dp-find-us__map-button,
	.dp-kf__button, .dp-mc__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-pg__all-products, .dp-pg__go-button,
	.dp-quiz__btn, .dp-quiz__submit, .dp-related-products__button, .dp-rs__button,
	.dp-sl__button, .dp-sp__button, .dp-vl__button
)::before {
	content: "";
	position: absolute;
	inset: calc(var(--dp-btn-halo) * -1);
	z-index: -1;

	/* Le même arrondi que le bouton, élargi du halo : sans le `+`, une pilule
	   verrait son halo prendre des coins plus serrés qu'elle et déborder au
	   milieu des flancs. */
	border-radius: calc(var(--dp-radius-pill, 999px) + var(--dp-btn-halo));

	/* Les quatre couleurs de l'identité, dans l'ordre du dôme du logotype. */
	background: var(--dp-gradient-primary, linear-gradient(120deg, #61c2d0, #98d0c1, #a9cf8e, #fff399));

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s var(--dp-ease, ease);
}

/* Au survol — et au focus clavier, sans quoi l'effet n'existerait que pour la
   souris. */
.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-ce__card-cta,
	.dp-cl__button, .dp-ev__btn, .dp-file-btn, .dp-find-us__map-button,
	.dp-kf__button, .dp-mc__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-pg__all-products, .dp-pg__go-button,
	.dp-quiz__btn, .dp-quiz__submit, .dp-related-products__button, .dp-rs__button,
	.dp-sl__button, .dp-sp__button, .dp-vl__button
):is(:hover, :focus-visible)::before {
	opacity: var(--dp-btn-flank-on, 1);
}

@media (prefers-reduced-motion: reduce) {
	.dp-nc :is(
	.dp-article__button, .dp-blog__button, .dp-btn, .dp-cb__btn, .dp-ce__card-cta,
	.dp-cl__button, .dp-ev__btn, .dp-file-btn, .dp-find-us__map-button,
	.dp-kf__button, .dp-mc__button, .dp-nl__button,
	.dp-on__button, .dp-pd__button, .dp-pg__all-products, .dp-pg__go-button,
	.dp-quiz__btn, .dp-quiz__submit, .dp-related-products__button, .dp-rs__button,
	.dp-sl__button, .dp-sp__button, .dp-vl__button
	)::before {
		transition: none;
	}
}

/* ── 6 ter. Les accordéons d'Elementor ────────────────────────────────────
   « À la place du +, voir si le circonflexe dôme passe mieux. »

   L'accordéon des blocs DP a son propre réglage. Celui d'Elementor — employé
   sur les pages de questions fréquentes — pose un « + » qui devient « − », et
   ce signe n'appartient à aucune charte.

   On le remplace par l'arc du Ô, dessiné en rayons de bordure plutôt qu'en
   icône : Elementor rend son indicateur dans un <span> dont le contenu est une
   icône de sa propre bibliothèque, qu'on ne peut pas remplacer en CSS. On
   masque donc l'icône et on dessine à sa place.

   La règle est volontairement bornée à `.dp-nc` : une page qui n'est pas dans
   la nouvelle charte garde l'indicateur d'Elementor. */

.dp-nc :is(.elementor-accordion-icon, .e-n-accordion-item-title-icon) > :is(i, svg) {
	display: none;
}

.dp-nc :is(.elementor-accordion-icon, .e-n-accordion-item-title-icon) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.dp-nc :is(.elementor-accordion-icon, .e-n-accordion-item-title-icon)::after {
	content: "";
	display: block;
	width: 16px;
	/* Le rapport de l'arc livré avec la charte. */
	aspect-ratio: 32.244 / 14.379;
	background-color: currentColor;
	-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;
	/* Au repos l'arc pointe vers le bas : « ceci se déplie ». */
	transform: rotate(180deg);
	transition: transform 0.25s var(--dp-ease, ease);
}

/* Ouvert, il se retourne et pointe vers le haut : « ceci se replie ». */
.dp-nc .elementor-active .elementor-accordion-icon::after,
.dp-nc [aria-expanded="true"] .e-n-accordion-item-title-icon::after,
.dp-nc details[open] .e-n-accordion-item-title-icon::after {
	transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.dp-nc :is(.elementor-accordion-icon, .e-n-accordion-item-title-icon)::after {
		transition: none;
	}
}

/* ── 9. Le grain des dégradés ──────────────────────────────────────────────
   Les dégradés du design system sont des photographies et portent un grain de
   pellicule. Ceux d'ici sont calculés à partir des quatre couleurs réglées, et
   sortent parfaitement lisses. Cette couche le leur rend.

   Décrit ici et non dans chaque feuille de bloc : il vaut partout où un dégradé
   de charte apparaît — les tuiles de la mosaïque et du bloc image, la surface
   « Identité 2026 » que porte n'importe lequel des blocs DP, et les zones de
   section. Les teintes pleines en sont exclues : un aplat n'a jamais porté de
   grain.

   ── UNE couche, et c'est le résultat d'une erreur ──

   Il y en a eu deux, puis quatre, à des échelles premières entre elles, pour
   diluer la répétition de la tuile. C'était un mauvais diagnostic : quatre
   grilles de périodes différentes BATTENT les unes contre les autres, et ce
   battement se lit comme un tissage — bien plus visible que la répétition qu'il
   prétendait masquer.

   Une seule grille n'a rien contre quoi battre. Elle se répète, mais du bruit
   fin qui se répète tous les cent vingt-huit pixels ne se voit pas ; deux
   grilles qui interfèrent, si.

   Vérifié en composant les deux cas à densité double : quatre couches donnent
   le tissage relevé en recette, une couche donne un grain uni.

   ── Pourquoi une tuile, et non un filtre ──

   Un filtre `feTurbulence` ne se répète jamais : il est évalué sur toute la
   surface. Et il est rasterisé à la taille de l'élément, donc le grain change
   avec la taille du bloc — épars sur une petite carte, dense sur un grand
   panneau. Un grain qui dépend de son cadre n'est pas un grain.

   ── La déclaration sans laquelle rien ne tient ──

   `background-size` est en pixels CSS. Sur un écran à forte densité, une tuile
   de 128 px est peinte sur 256 pixels physiques : le navigateur l'agrandit, et
   il l'INTERPOLE. Chaque pixel de bruit devient une tache floue, et un champ de
   taches floues se lit comme un tissu.

   `image-rendering: pixelated` retire l'interpolation : un pixel de bruit
   devient un carré net. Le grain est deux fois plus gros à densité double, et
   c'est le bon prix — un grain net est du grain, un grain flou est un tissu.

   ── Pourquoi « soft-light » ──

   « Overlay » choisit sa branche d'après le fond : sur un pastel de la charte,
   autour de 0,80, il passe en branche « screen » où un bruit clair sature
   aussitôt — à pleine intensité le dégradé virait au blanc au lieu de se
   texturer. Structurel, et non une question de dosage. « Soft-light » n'a pas
   de branche franche et n'atteint jamais le blanc.

   ── Les deux pièges du pseudo-élément ──

   Le bloc doit s'isoler, sans quoi le mélange déborde sur ce qu'il y a derrière
   lui. Et la couche se glisse entre le fond et le contenu par l'ORDRE DE
   PEINTURE : un pseudo-élément positionné passe devant les enfants restés dans
   le flux, d'où le `position: relative` sur ceux-ci. Un z-index négatif aurait
   semblé plus simple et ne marche pas — un enfant en z-index négatif ne voit
   pas le fond de son parent isolé comme arrière-plan de mélange. */

.dp-bt__tile--grained,
.dp-iti--grained,
.dp-dl--grained,
.dp-rl--grained,
.dp-qt--grained,
.dp-nc--surface-gradient,
.dp-nc--surface-mesh,
.dp-nc--surface-dome,
.dp-nc--surface-range,
.dp-nc--surface-range-dome,
.dp-zone-gradient,
.dp-zone-mesh,
.dp-zone-dome {
	position: relative;
	isolation: isolate;
}

.dp-bt__tile--grained > *,
.dp-iti--grained > *,
.dp-dl--grained > *,
.dp-rl--grained > *,
.dp-qt--grained > *,
.dp-nc--surface-gradient > *,
.dp-nc--surface-mesh > *,
.dp-nc--surface-dome > *,
.dp-nc--surface-range > *,
.dp-nc--surface-range-dome > *,
.dp-zone-gradient > *,
.dp-zone-mesh > *,
.dp-zone-dome > * {
	position: relative;
}

.dp-bt__tile--grained::before,
.dp-iti--grained::before,
.dp-dl--grained::before,
.dp-rl--grained::before,
.dp-qt--grained::before,
.dp-nc--surface-gradient::before,
.dp-nc--surface-mesh::before,
.dp-nc--surface-dome::before,
.dp-nc--surface-range::before,
.dp-nc--surface-range-dome::before,
.dp-zone-gradient::before,
.dp-zone-mesh::before,
.dp-zone-dome::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;
}

/* Elementor blanchit les fonds d'image — donc les dégradés — des conteneurs à
   partir du troisième, tant que son chargement différé n'a pas posé
   « e-lazyloaded ». Sa règle vise l'élément et ses descendants, mais pas les
   pseudo-éléments : la couche de grain y restait seule, grise, sur le blanc de
   la page. Elle attend donc le même signal. */
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) :is(
	.dp-bt__tile--grained, .dp-iti--grained, .dp-dl--grained, .dp-rl--grained, .dp-qt--grained,
	.dp-nc--surface-gradient, .dp-nc--surface-mesh, .dp-nc--surface-dome,
	.dp-nc--surface-range, .dp-nc--surface-range-dome,
	.dp-zone-gradient, .dp-zone-mesh, .dp-zone-dome
)::before {
	display: none;
}