/* Dômes Pharma — la bannière « Coming Soon »
   ===========================================================================
   Une seule feuille pour les cinq blocs qui affichent des produits. Le dessin
   d'un produit à venir doit être le même partout : cinq bannières écrites bloc
   par bloc donneraient cinq bannières voisines, jamais la même.

   Le vocabulaire est celui de la charte — capitales suivies, police de titre,
   aplat de marque avec l'encre que la charte a calculée pour lui, et le dôme du
   logotype en tête. Rien n'y est figé : chaque valeur passe par la chaîne à
   trois niveaux (variable locale du bloc → jeton de charte → repli), si bien
   qu'une charte réglée sur d'autres couleurs emporte la bannière avec elle.

   Portée : la feuille est chargée globalement, sans préfixe `.dp-nc`. Ce
   qu'elle décrit n'est pas un habillage mais un état — « ce produit n'est pas
   encore ouvert » — et un état ne peut pas dépendre du conteneur dans lequel le
   bloc se trouve.
   =========================================================================== */

/* ── La bannière ───────────────────────────────────────────────────────────
   Elle se pose en premier enfant du corps de la carte. Toutes les cartes
   produits sont des colonnes flex en `overflow: hidden` : la bannière y va donc
   bord à bord, et l'arrondi de la carte la découpe — elle n'a à connaître ni la
   largeur ni le rayon de son hôte.

   L'aplat est la SECONDE teinte de la charte, pas la première : la primaire
   porte déjà les boutons et les liens de la page, et une annonce qui prend la
   couleur de l'action se lit comme une action. Le texte, lui, n'est jamais
   décidé ici — `--dp-color-on-secondary` est calculé par la charte pour cet
   aplat précis, et c'est ce qui garantit qu'un pastel ne porte pas du blanc. */

.dp-cs-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100%;
	padding: 11px 18px;

	background: var(--dp-cs-banner-bg, var(--dp-color-secondary-fill, #98d0c1));
	color: var(--dp-cs-banner-text, var(--dp-color-on-secondary, #303030));

	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	text-align: center;
}

/* Le dôme du logotype, réduit à sa silhouette. C'est la signature de
   l'identité, et c'est ce qui distingue cette bannière d'une étiquette
   quelconque en capitales.

   Son rayon est écrit en dur, et c'est voulu : c'est une forme décorative, pas
   une surface. Lui brancher `--dp-radius-*` la déformerait au premier réglage
   d'arrondi — la charte le dit, les silhouettes gardent leur dessin. */
.dp-cs-banner__dome {
	flex: none;
	width: 13px;
	height: 8px;
	border-radius: 999px 999px 2px 2px;
	background: currentColor;
}

.dp-cs-banner__label {
	min-width: 0;
}

/* Les cartes dont le haut est une vignette portent la bannière PAR-DESSUS
   elle, et non au-dessus d'elle dans le flux.
   ---------------------------------------------------------------------------
   Une rangée du catalogue aligne ses vignettes, ses titres et ses textes — sa
   feuille y consacre plusieurs règles, parce que trois titres qui démarrent à
   trois hauteurs se lisent comme un gabarit cassé. Une bannière posée dans le
   flux décalait toute la colonne d'une hauteur de bannière : on lisait le
   défaut avant l'annonce.

   Par-dessus la vignette, la rangée reste d'aplomb, et la bannière y gagne —
   elle barre l'image au lieu de la surmonter. C'est le bloc qui choisit, parce
   que lui seul sait ce qu'il y a en haut de sa carte : une vignette (ici) ou un
   titre (la grille, où la bannière reste dans le flux, faute de quoi elle
   recouvrirait le nom du produit). */

.dp-cs-card {
	position: relative;
}

.dp-cs-banner--overlay {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
}

/* La bannière de la fiche produit : même dessin, une taille au-dessus. Elle
   traverse une carte de six cents pixels, pas une vignette. */
.dp-cs-banner--wide {
	padding: 15px 28px;
	font-size: 12px;
	gap: 11px;
}

.dp-cs-banner--wide .dp-cs-banner__dome {
	width: 15px;
	height: 9px;
}

/* La fiche produit dessine sa carte en deux colonnes. La bannière les traverse
   toutes les deux — et continue de le faire quand la grille retombe à une
   colonne sur petit écran. */
.dp-ps__card > .dp-cs-banner {
	grid-column: 1 / -1;
}

/* ── La carte qui n'attend plus de clic ────────────────────────────────────
   Le `<a>` est remplacé par un `<span>` qui garde les mêmes classes : la mise
   en page de la carte ne change pas d'une ligne. Restent deux promesses de clic
   à retirer, le curseur et la levée au survol. */

.dp-cs-card__inert {
	cursor: default;
}

/* La levée au survol est posée deux fois : par la feuille du bloc, en (0,2,0),
   et par celle de la charte, en (0,3,0) — `.dp-nc :is(…):hover`. La classe
   répétée passe devant la première, le conteneur de charte devant la seconde,
   et aucun `!important` n'est nécessaire.

   L'ombre revient à celle du repos plutôt qu'à `none` : une carte qui perd son
   ombre au survol se lit comme un défaut d'affichage, alors qu'on veut
   seulement qu'il ne se passe rien. */
.dp-cs-card.dp-cs-card:hover,
.dp-nc .dp-cs-card.dp-cs-card:hover {
	transform: none;
	box-shadow: var(--dp-nc-card-shadow, var(--dp-shadow-sm, 0 4px 16px rgba(16, 51, 96, 0.06)));
}

/* Le liseré de gamme de la charte se pose en `::before` sur le haut de la
   carte, à l'endroit exact où passe maintenant la bannière. Il resterait
   visible comme un trait de six pixels posé sur l'aplat — deux signaux
   superposés, dont un illisible. La bannière prend la place. */
.dp-nc--lisere .dp-cs-card.dp-cs-card::before {
	content: none;
}