/**
 * Bande Métiers FIZZE.
 *
 * FIX-02 — direction éditoriale, pas publicitaire : la bande est fine,
 * contenue dans la même grille que le Header (largeur de contenu par défaut
 * du thème, sans `alignfull`), sa typographie est légère, et les métiers ne
 * sont plus séparés par un caractère mais par un espacement (`gap`).
 *
 * FIX-03 — le fond transparent et le texte en gris générique WordPress
 * (pensés pour du blanc pur) rendaient la bande trop pâle sur l'ivoire du
 * thème : elle se confondait avec la page. Une nuance de surface FIZZE
 * (`--fz-paper-deep`, déjà utilisée ailleurs pour marquer une transition, ex.
 * le fond du tiroir mobile) et un gris chaud à contraste vérifié
 * (`--fz-mute-w`, 6,2:1 sur l'ivoire — les jetons de la direction éditoriale,
 * définis globalement sur `:root`) lui rendent une présence perceptible sans
 * en faire un bandeau : léger ne veut pas dire pâle.
 *
 * Tout reste surchargeable depuis l'inspecteur (fond, bordure, police,
 * taille, couleur de texte, padding) via les `supports` natifs du bloc — ce
 * fichier ne fixe qu'un point de départ.
 */

.fizze-bm {
	--fizze-bm-duration: 34s;
	background-color: var(--fz-paper-deep, var(--wp--preset--color--paper-deep, #EAE3D6));
	border-top: 1px solid var(--fz-rule-w, rgba(26, 25, 23, 0.16));
	border-bottom: 1px solid var(--fz-rule-w, rgba(26, 25, 23, 0.16));
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	overflow: hidden;
}

.fizze-bm__viewport {
	overflow: hidden;
	/*
	 * Fondu en pixels fixes (pas en %) : la largeur de la zone de disparition
	 * reste constante quelle que soit la largeur du conteneur (bande pleine
	 * largeur sur mobile, contenue à ~1260px sur desktop) — un pourcentage
	 * aurait mangé une part disproportionnée du texte sur les petits écrans.
	 */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.fizze-bm__track {
	display: flex;
	width: max-content;
	will-change: transform;
	/*
	 * FIX-02 — la distance de translation n'est plus une fraction fixe de la
	 * piste (`-50%`), qui supposait exactement deux copies. `view.js` mesure
	 * la largeur réelle d'une liste et la pose ici via `--fizze-bm-unit-width`,
	 * puis ajoute autant de copies que necessaire pour ne jamais « vider » le
	 * conteneur. Sans JavaScript, `--fizze-bm-unit-width` reste indéfinie et
	 * l'animation retombe sur `-50%` : correct tant que le conteneur ne
	 * dépasse pas la largeur d'une liste (comportement de LOT2A-FIX-01).
	 */
	animation: fizze-bm-scroll var(--fizze-bm-duration, 34s) linear infinite;
}

.fizze-bm:hover .fizze-bm__track,
.fizze-bm:focus-within .fizze-bm__track {
	animation-play-state: paused;
}

.fizze-bm__group {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	/* Plus de caractère séparateur : le rythme éditorial vient de l'espace. */
	gap: clamp(1.75rem, 4vw, 3.25rem);
	padding-inline-end: clamp(1.75rem, 4vw, 3.25rem);
}

.fizze-bm__item {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.8125rem;
	font-weight: 450;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fz-mute-w, #5C584F);
	white-space: nowrap;
}

@keyframes fizze-bm-scroll {
	to { transform: translateX(calc(-1 * var(--fizze-bm-unit-width, 50%))); }
}

/* La copie décorative n'a pas besoin d'exister pour un lecteur d'écran. */
.fizze-bm__group[aria-hidden="true"] { pointer-events: none; }

/*
 * Repos immobile : le mouvement n'est pas le seul moyen de lire la bande.
 * Les copies décoratives (rendu PHP et clones de `view.js`) disparaissent,
 * la vraie liste peut passer à la ligne dans son conteneur — plus
 * d'overflow masqué à faire défiler à la main.
 */
@media (prefers-reduced-motion: reduce) {
	.fizze-bm__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}
	.fizze-bm__group[aria-hidden="true"] { display: none; }
}

@media (max-width: 599.98px) {
	.fizze-bm__item { font-size: 0.75rem; }
	.fizze-bm__group { gap: 1.5rem; padding-inline-end: 1.5rem; }
	.fizze-bm__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	}
}