/* =====================================================================
 * DP – Fil d'ariane
 * =====================================================================
 * Le dessin commun aux quatre blocs qui affichent un fil : la fiche produit,
 * la grille, le catalogue, et le bloc autonome.
 *
 * ── Pourquoi une feuille à part ──
 *
 * Le fil se pose au-dessus d'un bloc, donc sur ce que l'auteur a mis derrière :
 * un blanc, un dégradé de gamme, un panneau profond, une photo. Un seul dessin
 * ne peut pas être lisible sur tous — et c'est bien ce qui se produisait, le
 * gris atténué disparaissant sur le dégradé d'une gamme claire.
 *
 * Les trois dessins sont donc écrits une fois ici, sous la classe commune
 * `dp-bc`, et non quatre fois dans les feuilles de blocs.
 *
 * Les feuilles de blocs gardent ce qui leur appartient : la marge du fil dans
 * leur mise en page. Elles posent aussi une couleur, sous leur propre préfixe
 * — `.dp-ps__breadcrumbs` — donc à spécificité (0,1,0). Les règles d'ici en
 * comptent deux : elles gagnent, et seulement quand un dessin est choisi.
 * ===================================================================== */

/* ── La structure, pour le bloc autonome seulement ──────────────────────
   Les trois blocs qui portaient déjà un fil ont la leur dans leur propre
   feuille, à la même spécificité que celle-ci. La redéfinir ici les mettrait à
   égalité, et c'est alors l'ordre de chargement qui déciderait du gap et des
   séparateurs — donc rien de stable. Seul le bloc autonome, qui n'a pas de
   feuille à lui, reçoit sa structure ici. */

.dp-bc--seul ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dp-bc-gap, 8px);
}

.dp-bc--seul li {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-bc-gap, 8px);
	color: inherit;
}

.dp-bc--seul li:not(:last-child)::after {
	content: '\203A';
	color: var(--dp-bc-separator-color, currentColor);
	opacity: .55;
	font-size: .85em;
}

.dp-bc--seul {
	color: var(--dp-bc-text, var(--dp-color-text-muted, #5b5b5b));
}

.dp-bc--seul a {
	color: var(--dp-bc-link, var(--dp-color-primary-strong, #1f7f91));
	text-decoration: none;
	font-weight: 600;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-bc--seul a:hover {
	text-decoration: underline;
}

.dp-bc--seul .is-current span {
	color: var(--dp-bc-current, var(--dp-color-text, #303030));
	font-weight: 700;
}

/* L'écart se règle sur les quatre blocs, pas seulement sur l'autonome : la
   variable, elle, ne rentre en conflit avec rien. */
.dp-bc ul,
.dp-bc li {
	gap: var(--dp-bc-gap, 8px);
}

/* ── 1. Discret ─────────────────────────────────────────────────────────
   Le dessin d'origine : encre atténuée sur du blanc, liens en couleur de
   marque soutenue. C'est le bon choix tant que le fil est posé sur une
   surface claire — et c'est pourquoi il reste le défaut. */

/* Rien à écrire : les feuilles de blocs le portent déjà. */

/* ── 2. Accordé au fond ─────────────────────────────────────────────────
   Le fil prend la couleur du texte de la surface qui le porte.

   C'est la réponse au dégradé de gamme et au panneau profond : la charte y a
   déjà calculé l'encre lisible — `--dp-color-on-gradient`, le blanc des
   panneaux sombres — et l'a posée en `color` sur le conteneur. Hériter, c'est
   suivre ce calcul au lieu d'en refaire un mauvais.

   Les liens ne changent pas de teinte, ils s'affirment par la graisse et
   l'opacité : une couleur de marque posée sur une surface de marque disparaît,
   quelle que soit la charte. */

.dp-bc--accorde,
.dp-bc--accorde a,
.dp-bc--accorde li,
.dp-bc--accorde .is-current span {
	color: inherit;
}

.dp-bc--accorde li:not(:last-child)::after {
	color: currentColor;
	opacity: .55;
}

.dp-bc--accorde a {
	opacity: .78;
}

.dp-bc--accorde a:hover {
	opacity: 1;
}

.dp-bc--accorde .is-current span {
	font-weight: 700;
}

/* ── 3. Pastille ────────────────────────────────────────────────────────
   Le fil est posé sur sa propre surface claire, et se détache donc de tout ce
   qu'on met derrière — y compris une photo, où même une encre calculée finit
   par tomber sur une zone qui la contredit.

   La pastille s'ajuste au contenu : `width: fit-content`, sinon elle barre
   toute la largeur et se lit comme un bandeau. */

.dp-bc--pastille {
	width: fit-content;
	max-width: 100%;
	padding: var(--dp-bc-pad, 8px 16px);
	background: var(--dp-bc-bg, var(--dp-color-surface, #ffffff));
	border-radius: var(--dp-bc-radius, var(--dp-radius-pill, 999px));
	box-shadow: var(--dp-bc-shadow, var(--dp-shadow-xs, 0 1px 3px rgba(16, 51, 96, .06)));
	color: var(--dp-bc-text, var(--dp-color-text-muted, #5b5b5b));
}

.dp-bc--pastille a {
	color: var(--dp-bc-link, var(--dp-color-primary-strong, #1f7f91));
}

.dp-bc--pastille li:not(:last-child)::after {
	color: var(--dp-bc-separator-color, var(--dp-color-border, #dedede));
	opacity: 1;
}

.dp-bc--pastille .is-current span {
	color: var(--dp-bc-current, var(--dp-color-text, #303030));
	font-weight: 700;
}

/* Une pastille centrée ou alignée à droite ne peut pas l'être par le parent :
   `fit-content` la colle à gauche de son conteneur. */
.dp-bc--align-center.dp-bc--pastille { margin-inline: auto; }
.dp-bc--align-right.dp-bc--pastille  { margin-inline: auto 0; }

/* ── Alignement, pour le bloc autonome ──────────────────────────────── */

.dp-bc--align-center ul { justify-content: center; }
.dp-bc--align-right ul  { justify-content: flex-end; }

/* ── Le bloc autonome ───────────────────────────────────────────────────
   Il n'a pas de mise en page à lui : il n'est qu'un fil. La marge vient du
   conteneur Elementor, comme pour n'importe quel bloc. */

.dp-bc--seul {
	font-size: var(--dp-bc-size, var(--dp-text-caption, 13px));
	font-family: var(--dp-font-base, inherit);
}

@media print {
	.dp-bc--pastille {
		box-shadow: none;
		padding: 0;
	}
}