/**
 * La page d'une machine — habillage « de nuit » (refonte du 01/10/2026, demande de David : « moderne, épate-moi »,
 * après la page de marque qu'il a validée sur le même parti pris).
 *
 * ─ Une COUCHE, pas une réécriture ─────────────────────────────────────────────
 * `lupeo-machine.css` (structure) et la section 5b de `lupeo-ds-pages.css` (couleurs du design system) restent
 * telles quelles ; cette feuille passe par-dessus. Chaque sélecteur commence par `.lupeo-mt--machine .lupeo-machine`
 * (0,2,0 au moins) : plus fort que `body .lupeo-machine …` du thème, chargé après nous. Aucun crochet du script
 * (`data-lupeo-*`, `aria-pressed`, `.is-toutes`, `.is-ouverte`…) n'est renommé : l'habillage les lit, il ne les
 * remplace pas.
 *
 * ─ Ce qui change ──────────────────────────────────────────────────────────────
 *  A. Bandeau de nuit (encre, halo, bandes réfléchissantes — celles de la page de marque et de la section
 *     Sécurité de l'accueil), nom du modèle en contour géant ; la machine posée sur un disque de lumière, entourée
 *     d'étiquettes de chiffres flottantes.
 *  F. Fiche technique : une bande sombre accrochée sous le bandeau.
 *  3–5. Atelier visuel sur fond de plan technique : chaque zone est reliée à la machine par un trait de repère ;
 *     familles en pastilles.
 *  6. Bannière des pièces en dégradé de nuit (l'état « toutes les versions », ambre, reste intact).
 *
 * Versionnée par la date du fichier (`Lupeo_Machine::ressources()`). Le jaune ne décore jamais ; tout ce qui bouge
 * est sous `prefers-reduced-motion: no-preference`.
 */

.lupeo-mt--machine .lupeo-machine {
	--mv-eclat: var(--lp-green-400, #00D36B);
	--mv-menthe: #9FE8C4;
	--mv-encre-eclat: var(--lp-green-400-ink, #06231A);
	--mv-trait: var(--lp-line, #E4E8E6);
}

.lupeo-mt--machine .lupeo-machine .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================
   A. Le bandeau de nuit
   ========================================================= */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 0;
	color: #fff;
	background:
		radial-gradient(55% 75% at 8% 6%, rgba(0, 211, 107, .20) 0%, rgba(0, 211, 107, 0) 60%),
		radial-gradient(42% 62% at 74% 52%, rgba(0, 168, 150, .30) 0%, rgba(0, 168, 150, 0) 70%),
		linear-gradient(160deg, #06110E 0%, #0B1F1A 55%, #08231D 100%);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20%;
	right: -6%;
	width: 52%;
	height: 140%;
	background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .05) 0 18px, rgba(255, 255, 255, 0) 18px 64px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
	pointer-events: none;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__filigrane {
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -.2em;
	transform: translateX(-50%);
	font-size: clamp(96px, 14vw, 250px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .07);
	pointer-events: none;
	user-select: none;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau-in {
	min-height: 580px;
	padding-block: clamp(48px, 6vw, 92px);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__contexte {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
	padding: 5px 14px 5px 5px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .78);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__logo-plaque {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
}

.lupeo-mt--machine .lupeo-machine img.lupeo-machine__logo {
	height: 18px;
	max-width: 76px;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__titre {
	font-size: clamp(42px, 5.4vw, 80px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.045em;
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__titre-pre {
	margin-bottom: 12px;
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: rgba(255, 255, 255, .66);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__titre-nom {
	padding-bottom: .06em;
	background: linear-gradient(100deg, #fff 0%, #fff 55%, var(--mv-menthe) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__intro {
	margin-top: 24px;
	font-size: clamp(16px, 1.15vw, 18px);
	color: rgba(255, 255, 255, .76);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__intro strong {
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__intro a {
	color: var(--mv-menthe);
}

/* Les versions : tuiles de verre ; la version de la page s'allume en vert. */
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version {
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version small {
	color: rgba(255, 255, 255, .6);
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version:hover,
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version:focus-visible {
	border-color: var(--mv-eclat);
	background: rgba(0, 211, 107, .12);
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version.is-choisie {
	border-color: transparent;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 4px rgba(0, 211, 107, .14), 0 12px 26px -12px rgba(0, 211, 107, .6);
	color: var(--mv-encre-eclat);
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version.is-choisie small {
	color: rgba(6, 35, 26, .72);
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version--toutes {
	border-style: dashed;
}

/* L'appel : le bouton vert lumineux de la page de marque. */
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__appel {
	min-height: 52px;
	padding: 0 24px 0 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 4px rgba(0, 211, 107, .14), 0 14px 30px -12px rgba(0, 211, 107, .6);
	font-size: 16px;
	font-weight: 700;
	color: var(--mv-encre-eclat);
	transition: transform .22s ease, box-shadow .22s ease;
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__appel:hover,
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__appel:focus-visible {
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	color: var(--mv-encre-eclat);
	transform: translateY(-2px);
	box-shadow: 0 0 0 6px rgba(0, 211, 107, .2), 0 18px 36px -12px rgba(0, 211, 107, .7);
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__appel:focus-visible,
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__aide:focus-visible,
.lupeo-mt--machine .lupeo-machine a.lupeo-machine__version:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__aide {
	border-bottom-color: var(--mv-eclat);
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine a.lupeo-machine__aide:hover {
	color: var(--mv-menthe);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__neuve {
	border: 1px solid rgba(0, 211, 107, .35);
	background: rgba(0, 211, 107, .10);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__neuve a,
.lupeo-mt--machine .lupeo-machine .lupeo-machine__neuve .lupeo-i {
	color: #7CF0B5;
}

/* ---- La scène : disque de lumière, anneau en pointillé, la machine posée dessus ---- */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau-photo {
	position: relative;
	min-height: 440px;
}

/* ⚠️ Pas de `z-index` ici : la scène ne doit PAS former son propre groupe de fusion. La photo (fond blanc,
   `multiply`) se fond alors avec tout ce qui est derrière elle dans le bandeau — le disque ET la nuit autour :
   ses coins, qui débordent du disque, disparaissent. Avec un groupe à elle, ils restaient blancs. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 560px);
	aspect-ratio: 1;
}

/* Le disque : blanc au cœur, menthe au bord, halo vert autour. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 7%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #fff 0%, #F3FBF7 48%, #D7F1E4 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .3),
		0 0 90px rgba(0, 211, 107, .28),
		inset 0 -40px 70px rgba(0, 124, 117, .14);
}

/* L'anneau, un peu plus grand que le disque. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 1%;
	border: 1.5px dashed rgba(159, 232, 196, .32);
	border-radius: 50%;
	pointer-events: none;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene img.lupeo-machine__img {
	max-width: 70%;
	max-height: 76%;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene .lupeo-machine__photo-txt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66%;
	max-width: none;
	aspect-ratio: auto;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: clamp(22px, 2.4vw, 32px);
}

/* ---- Les étiquettes de chiffres, posées autour du disque ---- */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 132px;
	margin: 0;
	padding: 12px 16px 13px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(9, 30, 25, .9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li:nth-child(1) {
	top: 12%;
	left: 0;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li:nth-child(2) {
	top: 44%;
	right: 0;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li:nth-child(3) {
	bottom: 9%;
	left: 6%;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres b {
	position: relative;
	font-size: clamp(26px, 2.2vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li:first-child b {
	color: var(--mv-eclat);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffre-txt {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* =========================================================
   F. La fiche technique, accrochée sous le bandeau
   ========================================================= */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche {
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 0;
	background: #0A1C18;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche-in {
	gap: 16px 0;
	padding-block: 20px 22px;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche-in > div {
	padding-inline: clamp(18px, 2.4vw, 36px);
	border-left: 1px solid rgba(255, 255, 255, .10);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche-in > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche dt {
	color: #7CF0B5;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche dd {
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}

/* =========================================================
   3–5. « Quelle pièce voulez-vous remplacer ? »
   ========================================================= */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__selection {
	border: 1px solid var(--lp-line-forte, #D5DBD8);
	border-radius: 16px;
	box-shadow: var(--lp-ombre-1, 0 1px 2px rgba(10, 15, 13, .05));
}

/* L'atelier : plan technique quadrillé qui s'efface vers les bords. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier {
	position: relative;
	isolation: isolate;
	padding: 30px 30px 34px;
	border: 1px solid var(--mv-trait);
	border-radius: 24px;
	background: radial-gradient(70% 80% at 50% 55%, #F3FBF7 0%, #fff 72%);
	overflow: hidden;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 124, 117, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 124, 117, .07) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center center;
	-webkit-mask-image: radial-gradient(65% 75% at 50% 55%, #000 25%, transparent 85%);
	mask-image: radial-gradient(65% 75% at 50% 55%, #000 25%, transparent 85%);
	pointer-events: none;
}

/* La machine au centre, sur un disque menthe. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier-photo {
	position: relative;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier-photo::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: min(100%, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, #fff 0%, #EEF9F3 55%, #DDF3E8 100%);
	box-shadow: 0 0 0 10px rgba(0, 124, 117, .04), 0 0 0 11px rgba(0, 124, 117, .10);
	transform: translate(-50%, -50%);
}

/* Les zones : cartes blanches surélevées, reliées à la machine par un trait de repère. */
.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone {
	position: relative;
	min-height: 72px;
	border: 1px solid var(--mv-trait);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(10, 15, 13, .05), 0 10px 24px -18px rgba(1, 60, 56, .35);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone:hover {
	border-color: var(--lp-green-600, #007C75);
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(10, 15, 13, .05), 0 22px 40px -22px rgba(1, 60, 56, .5);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__zone-ico {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--lp-green-50, #F1FAF5);
	color: var(--lp-green-600, #007C75);
	transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone:not([aria-disabled="true"]):hover .lupeo-machine__zone-ico {
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	color: var(--mv-encre-eclat);
	transform: rotate(-6deg);
	box-shadow: 0 8px 18px -8px rgba(0, 211, 107, .7);
}

/* Zone choisie : la carte passe de nuit, l'icône s'allume. */
.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] {
	border-color: transparent;
	background: linear-gradient(150deg, #0B1F1A 0%, #08231D 100%);
	box-shadow: 0 0 0 3px rgba(0, 211, 107, .25), 0 22px 40px -22px rgba(1, 60, 56, .6);
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-ico {
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	color: var(--mv-encre-eclat);
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-txt b {
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-txt small {
	color: #7CF0B5;
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-nb {
	color: rgba(255, 255, 255, .66);
}

.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-disabled="true"] {
	background: rgba(246, 248, 247, .8);
	box-shadow: none;
}

/* Les traits de repère : seulement quand les zones encadrent la machine (trois colonnes). */
@media (min-width: 901px) {
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone::after,
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone::before {
		content: "";
		position: absolute;
		top: 50%;
		pointer-events: none;
		transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
	}

	/* Le trait, sur toute la largeur de la gouttière. */
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone::after {
		width: clamp(20px, 3vw, 40px);
		border-top: 1.5px dashed rgba(0, 124, 117, .32);
	}

	/* Le point d'ancrage, au bout du trait, côté machine. */
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone::before {
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border: 2px solid rgba(0, 124, 117, .45);
		border-radius: 50%;
		background: #fff;
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone--gauche::after {
		left: 100%;
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone--gauche::before {
		left: calc(100% + clamp(20px, 3vw, 40px) - 4px);
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone--droite::after {
		right: 100%;
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone--droite::before {
		right: calc(100% + clamp(20px, 3vw, 40px) - 4px);
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone:not([aria-disabled="true"]):hover::after,
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"]::after {
		border-top-style: solid;
		border-top-color: var(--mv-eclat);
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone:not([aria-disabled="true"]):hover::before,
	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"]::before {
		border-color: var(--mv-eclat);
		background: var(--mv-eclat);
		box-shadow: 0 0 0 5px rgba(0, 211, 107, .18);
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-disabled="true"]::after {
		border-top-color: rgba(10, 15, 13, .12);
	}

	.lupeo-mt--machine .lupeo-machine button.lupeo-machine__zone[aria-disabled="true"]::before {
		border-color: rgba(10, 15, 13, .15);
	}
}

/* Les familles : des pastilles, la famille choisie en encre. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste {
	gap: 8px;
	padding-block: 6px 8px;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a {
	align-items: center;
	gap: 8px;
	padding: 9px 10px 9px 15px;
	border: 1px solid var(--mv-trait);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--lp-surface-2, #F6F8F7);
	color: var(--lp-ink-3, #64706B);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a:hover {
	border-color: var(--lp-green-600, #007C75);
	color: var(--lp-ink, #0A0F0D);
	transform: translateY(-1px);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a[aria-pressed="true"],
.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a[aria-current="true"] {
	border-color: var(--lp-ink, #0A0F0D);
	background: var(--lp-ink, #0A0F0D);
	color: #fff;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a[aria-pressed="true"] span,
.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a[aria-current="true"] span {
	background: var(--mv-eclat);
	color: var(--mv-encre-eclat);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__familles-liste a.lupeo-machine__familles-universels {
	border-style: dashed;
}

/* =========================================================
   6. Les pièces
   ========================================================= */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) {
	position: relative;
	overflow: hidden;
	padding: 18px 18px 18px 22px;
	border-radius: 18px;
	background:
		radial-gradient(60% 140% at 0% 0%, rgba(0, 211, 107, .22) 0%, rgba(0, 211, 107, 0) 60%),
		linear-gradient(150deg, #0B1F1A 0%, #08231D 100%);
	box-shadow: 0 20px 40px -26px rgba(1, 60, 56, .7);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) .lupeo-machine__banniere-ico {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 5px rgba(0, 211, 107, .14);
	color: var(--mv-encre-eclat);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) .lupeo-machine__banniere-ico .lupeo-i {
	width: 19px;
	height: 19px;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere .lupeo-machine__banniere-titre {
	font-size: 18px;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) button.lupeo-machine__affiner {
	border-radius: 999px;
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .06);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) button.lupeo-machine__affiner:hover {
	border-color: var(--mv-eclat);
	background: rgba(0, 211, 107, .14);
}

.lupeo-mt--machine .lupeo-machine .lupeo-card {
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

.lupeo-mt--machine .lupeo-machine .lupeo-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 124, 117, .4);
	box-shadow: 0 24px 44px -26px rgba(1, 60, 56, .45);
}

/* Les accessoires universels : un volet clair, comme une étiquette d'atelier. */
.lupeo-mt--machine .lupeo-machine .lupeo-machine__universels summary {
	padding: 20px 22px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--lp-green-50, #F1FAF5) 0%, #fff 70%);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__universels summary:hover {
	border-color: var(--lp-green-600, #007C75);
	box-shadow: 0 16px 32px -24px rgba(1, 60, 56, .5);
}

.lupeo-mt--machine .lupeo-machine .lupeo-machine__universels summary > .lupeo-i {
	box-sizing: content-box;
	padding: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--mv-trait);
}

/* =========================================================
   Mouvement (jamais si l'on a demandé à en avoir moins)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	/* L'anneau tourne, très lentement. */
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene::after {
		animation: lupeo-mv-anneau 60s linear infinite;
	}

	/* La machine arrive en douceur sur son disque (montée + léger zoom, comme avant). Le fondu part de .01 et non de 0 : à 0 le
	   navigateur ne compte pas l'image dans le LCP avant la fin de l'animation (mesuré le 02/10/2026 : 1 356 ms ; à .01 : 352 ms). */
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene img.lupeo-machine__img {
		animation: lupeo-mv-pose .9s cubic-bezier(.2, .7, .2, 1) .1s backwards;
	}

	/* Les étiquettes entrent l'une après l'autre, puis flottent. */
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li {
		animation:
			lupeo-mv-etiquette .7s cubic-bezier(.2, .7, .2, 1) calc(.35s + var(--rang, 0) * .12s) backwards,
			lupeo-mv-flotte 6s ease-in-out calc(1.2s + var(--rang, 0) * .9s) infinite;
	}
}

@keyframes lupeo-mv-anneau {
	to { transform: rotate(360deg); }
}

@keyframes lupeo-mv-pose {
	from {
		opacity: .01;
		transform: translateY(18px) scale(.96);
	}
}

@keyframes lupeo-mv-etiquette {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.94);
	}
}

@keyframes lupeo-mv-flotte {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* =========================================================
   Tablette et téléphone
   ========================================================= */
@media (max-width: 1100px) {
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li {
		min-width: 0;
		padding: 10px 13px 11px;
	}
}

/* La page passe sur une colonne (`lupeo-machine.css` : `display: contents` et `order`) : la scène suit le titre,
   les étiquettes se rangent en une ligne sous elle. */
@media (max-width: 900px) {
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau-in {
		min-height: 0;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__bandeau-photo {
		flex-direction: column;
		min-height: 0;
		margin: 22px 0 6px;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene {
		width: min(100%, 380px);
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 8px;
		width: 100%;
		margin-top: 8px;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres li {
		position: static;
		animation: none;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__fiche-in > div {
		padding-inline: 0 18px;
		border-left: 0;
	}
}

@media (max-width: 640px) {
	.lupeo-mt--machine .lupeo-machine .lupeo-machine__titre {
		font-size: clamp(34px, 10vw, 44px);
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__scene {
		width: min(100%, 300px);
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffres b {
		font-size: 24px;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__chiffre-txt {
		font-size: 9px;
		letter-spacing: .06em;
		overflow-wrap: anywhere;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier {
		padding: 18px 14px 20px;
		border-radius: 18px;
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__atelier-photo::before {
		width: min(70%, 220px);
	}

	.lupeo-mt--machine .lupeo-machine .lupeo-machine__banniere:not(.is-toutes) {
		padding: 16px;
	}
}