/**
 * Fonds de section — attribut « sectionBg ».
 * Blanc / gris doux / ambre voilé / ambre soutenu / ambre plein / anthracite.
 * La classe est doublée dans les sélecteurs pour passer devant le fond défini par chaque bloc.
 */

.sb-bg--white.sb-bg--white,
.sb-bg--soft.sb-bg--soft,
.sb-bg--amber.sb-bg--amber,
.sb-bg--amber-strong.sb-bg--amber-strong,
.sb-bg--amber-full.sb-bg--amber-full,
.sb-bg--dark.sb-bg--dark {
	background: var(--sb-section-bg);
	background-image: none;
}

.sb-bg--white {
	--sb-section-bg: var(--sb-surface, #fff);
}

.sb-bg--soft {
	--sb-section-bg: var(--sb-surface-soft, #f7f8f8);
}

.sb-bg--amber {
	--sb-section-bg: color-mix(in oklab, var(--lisere, #f9b700) 8%, #fff);
}

.sb-bg--amber-strong {
	--sb-section-bg: color-mix(in oklab, var(--lisere, #f9b700) 22%, #fff);
}

.sb-bg--amber-full {
	--sb-section-bg: var(--lisere, #f9b700);
}

.sb-bg--dark {
	--sb-section-bg: var(--dark, #383E42);
}

/* Cartes claires : elles doivent rester lisibles sur gris doux et sur ambre */
.sb-bg--soft .sb-eng__item,
.sb-bg--amber .sb-eng__item,
.sb-bg--amber-strong .sb-eng__item,
.sb-bg--amber-full .sb-eng__item {
	background: #fff;
}

/* --- Ambre soutenu et ambre plein : le texte reste anthracite, les accents passent en blanc --- */

.sb-bg--amber-strong .sb-metier-points__num,
.sb-bg--amber-full .sb-metier-points__num,
.sb-bg--amber-strong .sb-eng__eyebrow,
.sb-bg--amber-strong .sb-prod__eyebrow,
.sb-bg--amber-strong .sb-metier-intro__eyebrow,
.sb-bg--amber-strong .sb-metier-points__eyebrow,
.sb-bg--amber-full .sb-eng__eyebrow,
.sb-bg--amber-full .sb-prod__eyebrow,
.sb-bg--amber-full .sb-metier-intro__eyebrow,
.sb-bg--amber-full .sb-metier-points__eyebrow {
	background: #fff;
	border-color: color-mix(in oklab, var(--dark, #383E42) 18%, transparent);
	color: var(--dark, #383E42);
}

.sb-bg--amber-strong .sb-metier-intro__body p,
.sb-bg--amber-full .sb-metier-intro__body p,
.sb-bg--amber-strong .sb-metier-points__text,
.sb-bg--amber-full .sb-metier-points__text,
.sb-bg--amber-strong .sb-eng__text,
.sb-bg--amber-full .sb-eng__text,
.sb-bg--amber-strong .sb-prod__text,
.sb-bg--amber-full .sb-prod__text {
	color: color-mix(in oklab, var(--dark, #383E42) 88%, transparent);
}

.sb-bg--amber-strong .sb-metier-intro__chip,
.sb-bg--amber-full .sb-metier-intro__chip {
	background: #fff;
	border-color: color-mix(in oklab, var(--dark, #383E42) 18%, transparent);
}

/* --- Section anthracite : inversion du texte et des surfaces --- */

.sb-bg--dark {
	color: #fff;
}

.sb-bg--dark .sb-metier-intro__title,
.sb-bg--dark .sb-metier-points__title,
.sb-bg--dark .sb-eng__title,
.sb-bg--dark .sb-prod__title,
.sb-bg--dark .sb-metier-points__card-title,
.sb-bg--dark .sb-prod__card-title,
.sb-bg--dark .sb-metier-intro__chip-value {
	color: #fff;
}

.sb-bg--dark .sb-metier-intro__body p,
.sb-bg--dark .sb-metier-points__text,
.sb-bg--dark .sb-metier-points__card-text,
.sb-bg--dark .sb-eng__text,
.sb-bg--dark .sb-eng__item-text,
.sb-bg--dark .sb-prod__text,
.sb-bg--dark .sb-prod__card-text {
	color: color-mix(in oklab, #fff 76%, transparent);
}

.sb-bg--dark .sb-metier-intro__body strong,
.sb-bg--dark .sb-metier-intro__title strong,
.sb-bg--dark .sb-metier-points__text strong,
.sb-bg--dark .sb-eng__text strong {
	color: #fff;
}

.sb-bg--dark .sb-metier-points__card,
.sb-bg--dark .sb-eng__item,
.sb-bg--dark .sb-metier-intro__chip {
	background: color-mix(in oklab, #fff 7%, transparent);
	border-color: color-mix(in oklab, #fff 16%, transparent);
}

.sb-bg--dark .sb-metier-points__card:hover,
.sb-bg--dark .sb-eng__item:hover {
	background: color-mix(in oklab, var(--lisere, #f9b700) 14%, transparent);
	border-color: color-mix(in oklab, var(--lisere, #f9b700) 55%, transparent);
}

.sb-bg--dark .sb-metier-intro__chip-label {
	color: color-mix(in oklab, #fff 62%, transparent);
}

.sb-bg--dark .sb-eng__index,
.sb-bg--dark .sb-metier-points__num {
	background: var(--lisere, #f9b700);
	border-color: transparent;
	color: var(--dark, #383E42);
}

/* Le bloc CTA est déjà une carte anthracite : sur fond anthracite il faut le détacher */
.sb-bg--dark .sb-cta__box {
	background:
		radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in oklab, var(--lisere, #f9b700) 32%, transparent), transparent 60%),
		linear-gradient(145deg, color-mix(in oklab, #fff 9%, var(--dark, #383E42)) 0%, color-mix(in oklab, #fff 4%, var(--dark, #383E42)) 100%);
	border-color: color-mix(in oklab, var(--lisere, #f9b700) 40%, transparent);
}

.sb-bg--dark .sb-eng__eyebrow,
.sb-bg--dark .sb-prod__eyebrow,
.sb-bg--dark .sb-metier-intro__eyebrow,
.sb-bg--dark .sb-metier-points__eyebrow {
	background: color-mix(in oklab, var(--lisere, #f9b700) 20%, transparent);
	border-color: color-mix(in oklab, var(--lisere, #f9b700) 50%, transparent);
	color: #fff;
}