/**
 * La page d'une machine — `/ma-trottinette/<marque>/<modele>/`.
 *
 * Chargée sur ces seules pages, après `lupeo-modeles.css` (encadrés « vide »
 * et « secours ») et `lupeo-boutique.css` (vignette produit, boutons, jetons de
 * rayon et d'ombre). Rien n'est redéclaré : couleurs, polices, rayons et
 * ombres sont les jetons `--lupeo-*` du thème.
 *
 * ─ Portée ─────────────────────────────────────────────────────────────────────
 * Tout sélecteur commence par `.lupeo-machine`, sauf deux réglages hors de
 * l'écran, sous `body.lupeo-ecran-machine` : l'espace que le thème réserve
 * au-dessus du contenu, et la marge sous le fil d'Ariane. Aucun sélecteur nu.
 *
 * ─ Pleine largeur ─────────────────────────────────────────────────────────────
 * L'écran est rendu dans `.lupeo-mt.alignfull` : le thème ne le contraint
 * donc pas à sa largeur de contenu, et chaque bande peint son fond d'un bord à
 * l'autre. Le contenu, lui, revient dans `.lupeo-machine__in`, calé sur le
 * conteneur du thème — le fil d'Ariane au-dessus et la page tombent sur la
 * même verticale.
 *
 * ⚠️ Blocksy ne peint pas un `<button>` nu (seulement `.button`,
 * `[type=submit]`…), mais le navigateur si : fond gris, police système. Chaque
 * bouton de l'écran part donc d'une remise à zéro explicite.
 */

/* =========================================================
   0. Cadre de l'écran
   ========================================================= */
body.lupeo-ecran-machine .ct-container-full[data-vertical-spacing] {
	padding-top: 14px;
}

body.lupeo-ecran-machine .hero-section[data-type="type-1"] {
	margin-bottom: 14px;
}

.lupeo-mt.lupeo-mt--machine {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-bottom: 0;
}

.lupeo-machine {
	--lm-menthe: #EBF6F1;
	--lm-bord: var(--lupeo-bordure, #E4E7E0);
	--lm-in: min(var(--theme-normal-container-max-width, 1290px), 90vw);
	color: var(--lupeo-ink, #1A1A1A);
}

/* Le vert très clair du bandeau est dérivé du vert de marque, pas inventé :
   8 % de #0B996E sur blanc. La valeur ci-dessus est le même mélange, figé,
   pour les navigateurs qui ne savent pas le calculer. */
@supports (background: color-mix(in srgb, red 50%, white)) {
	.lupeo-machine {
		--lm-menthe: color-mix(in srgb, var(--lupeo-vert, #0B996E) 8%, #fff);
	}
}

.lupeo-machine__in {
	width: var(--lm-in);
	margin-inline: auto;
}

.lupeo-machine :where(a) {
	text-decoration: none;
}

/* Blocksy souligne les liens des listes du contenu : sa règle
   `[data-link="type-2"] :where(… .entry-content :where(ul, ol) a …):not(:hover)`
   pose `--theme-text-decoration: underline` sur le LIEN (spécificité 0,2,0),
   et les titres `h3` de la vignette lisent cette variable. Les grilles de cet
   écran sont des listes : sans cette remise à zéro, chaque titre sortait
   souligné. Classe + attribut + éléments (0,2,2) : plus fort que sa règle,
   et limité à cet écran. */
.lupeo-machine[data-lupeo-machine] :is(ul, ol) a {
	--theme-text-decoration: none;
}

.lupeo-machine a.lupeo-lien {
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-align: inherit;
}

.lupeo-machine :where(a, button, summary, input):focus-visible {
	outline: 2px solid var(--lupeo-focus, #076B4E);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--lupeo-focus-halo, rgba(11, 153, 110, .28));
}

.lupeo-machine :where(h2, h3) {
	font-family: var(--lupeo-display, Manrope, Inter, sans-serif);
	color: var(--lupeo-ink, #1A1A1A);
	text-wrap: balance;
}

.lupeo-machine .lupeo-machine__h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.lupeo-machine__sous-titre {
	margin: 10px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lupeo-mute, #6F6A62);
}

/* Petites capitales espacées : le vocabulaire des sur-titres du site. */
.lupeo-machine__etiquette {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lupeo-vert-fonce, #076B4E);
}

/* =========================================================
   A–E. Le bandeau
   ========================================================= */
.lupeo-machine__bandeau {
	background: var(--lm-menthe);
	border-bottom: 1px solid var(--lm-bord);
	overflow: hidden;
}

.lupeo-machine__bandeau-in {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	min-height: 480px;
	padding-block: clamp(36px, 5vw, 64px);
}

.lupeo-machine__contexte {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-machine img.lupeo-machine__logo {
	width: auto;
	height: 26px;
	max-width: 72px;
	object-fit: contain;
	flex: none;
}

.lupeo-machine .lupeo-machine__titre {
	margin: 0;
	font-family: var(--lupeo-display, Manrope, Inter, sans-serif);
	font-size: clamp(36px, 4.6vw, 62px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
	color: var(--lupeo-ink, #1A1A1A);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.lupeo-machine__titre-pre,
.lupeo-machine__titre-nom {
	display: block;
}

.lupeo-machine__intro {
	max-width: 56ch;
	margin-top: 20px;
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-machine__intro > :first-child {
	margin-top: 0;
}

.lupeo-machine__intro > :last-child {
	margin-bottom: 0;
}

.lupeo-machine__intro p {
	margin: 0 0 10px;
}

/* C — les versions */
.lupeo-machine__versions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.lupeo-machine a.lupeo-machine__version {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 132px;
	min-height: 54px;
	padding: 10px 16px;
	background: #fff;
	border: 1.5px solid var(--lm-bord);
	border-radius: var(--lupeo-r-s, 10px);
	color: var(--lupeo-ink, #1A1A1A);
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.lupeo-machine a.lupeo-machine__version:hover {
	border-color: var(--lupeo-vert-fonce, #076B4E);
	transform: translateY(-2px);
}

.lupeo-machine__version b {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
}

.lupeo-machine__version small {
	font-size: 12px;
	line-height: 1.3;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine a.lupeo-machine__version.is-choisie {
	background: var(--lupeo-vert-fonce, #076B4E);
	border-color: var(--lupeo-vert-fonce, #076B4E);
	color: #fff;
}

.lupeo-machine a.lupeo-machine__version.is-choisie small {
	color: rgba(255, 255, 255, .82);
}

/* D — l'appel et le lien d'aide */
.lupeo-machine__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 24px;
}

.lupeo-machine a.lupeo-machine__appel {
	min-height: 48px;
	color: #fff;
}

.lupeo-machine a.lupeo-machine__appel:hover {
	color: #fff;
}

.lupeo-machine a.lupeo-machine__aide {
	display: inline-block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
	transition: color .18s ease;
}

.lupeo-machine a.lupeo-machine__aide:hover {
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__neuve {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--lm-bord);
	border-radius: 999px;
}

.lupeo-machine__neuve a {
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__neuve a:hover {
	text-decoration: underline;
}

.lupeo-machine__neuve .lupeo-i {
	width: 17px;
	height: 17px;
	color: var(--lupeo-vert-fonce, #076B4E);
}

/* E — la machine. Sur ce fond, une photo au fond blanc se découperait en
   rectangle : « multiply » le rend transparent, et laisse intacte une photo
   déjà détourée. */
.lupeo-machine__bandeau-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: 0;
}

.lupeo-machine img.lupeo-machine__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.lupeo-machine__bandeau-photo img.lupeo-machine__img {
	max-height: 500px;
}

.lupeo-machine__photo-txt {
	aspect-ratio: 1;
	max-width: 360px;
	background: rgba(255, 255, 255, .6);
}

/* =========================================================
   F. La bande des caractéristiques
   ========================================================= */
.lupeo-machine__fiche {
	background: #fff;
	border-bottom: 1px solid var(--lm-bord);
}

.lupeo-machine .lupeo-machine__fiche-in {
	display: flex;
	flex-wrap: wrap;
	gap: 16px clamp(28px, 4vw, 64px);
	margin-block: 0;
	padding-block: 22px;
}

.lupeo-machine__fiche dt {
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__fiche dd {
	margin: 5px 0 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
}

/* =========================================================
   3. « Quelle pièce voulez-vous remplacer ? »
   ========================================================= */
.lupeo-machine__choix {
	padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px);
	background: #fff;
}

.lupeo-machine__choix-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
}

.lupeo-machine__choix-tete .lupeo-sur-titre {
	margin-bottom: 14px;
}

/* La version choisie, à droite du titre */
.lupeo-machine__selection {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	min-height: 52px;
	padding: 10px 16px;
	background: #fff;
	border: 1.5px solid var(--lupeo-ink, #1A1A1A);
	border-radius: var(--lupeo-r-s, 10px);
}

.lupeo-machine__selection-cle {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__selection b {
	font-size: 15px;
	font-weight: 700;
}

.lupeo-machine__selection > a {
	font-size: 14px;
	font-weight: 600;
	color: var(--lupeo-vert-fonce, #076B4E);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lupeo-machine__selection--menu {
	padding: 0;
}

.lupeo-machine__selection--menu summary {
	display: flex;
	align-items: center;
	gap: 4px 14px;
	flex-wrap: wrap;
	min-height: 50px;
	padding: 10px 16px;
	list-style: none;
	cursor: pointer;
	border-radius: var(--lupeo-r-s, 10px);
}

.lupeo-machine__selection--menu summary::-webkit-details-marker {
	display: none;
}

.lupeo-machine__selection--menu summary .lupeo-i {
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--lupeo-vert-fonce, #076B4E);
	transition: transform .2s ease;
}

.lupeo-machine__selection--menu[open] summary .lupeo-i {
	transform: rotate(180deg);
}

.lupeo-machine__selection--menu ul {
	position: absolute;
	right: -1.5px;
	top: calc(100% + 6px);
	z-index: 20;
	min-width: calc(100% + 3px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--lm-bord);
	border-radius: var(--lupeo-r-m, 14px);
	box-shadow: var(--lupeo-ombre-2);
}

.lupeo-machine__selection--menu li {
	margin: 0;
}

.lupeo-machine__selection--menu li a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
	white-space: nowrap;
}

.lupeo-machine__selection--menu li a:hover {
	background: var(--lupeo-fond, #F6F8F4);
}

.lupeo-machine__selection--menu li a[aria-current="page"] {
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__selection--menu li a small {
	font-size: 12px;
	font-weight: 500;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__selection--menu li:last-child {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--lupeo-bordure-claire, #F1F3EE);
}

/* =========================================================
   4. L'atelier visuel
   ========================================================= */
.lupeo-machine__atelier {
	margin-top: clamp(28px, 3vw, 40px);
	padding: 26px 26px 30px;
	background: #fff;
	border: 1px solid var(--lm-bord);
	border-radius: var(--lupeo-r-l, 20px);
}

.lupeo-machine__atelier-consigne {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__atelier-plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: repeat(3, auto);
	align-items: center;
	gap: 12px clamp(20px, 3vw, 40px);
	margin-top: 26px;
}

.lupeo-machine__atelier-photo {
	grid-column: 2;
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
}

.lupeo-machine__atelier-photo img.lupeo-machine__img {
	max-height: 290px;
}

/* Deux colonnes de trois : placées une à une, pour que l'ordre du document
   — celui de la lecture au clavier — reste 01 à 06. */
.lupeo-machine__atelier-plan > :nth-child(2) { grid-area: 1 / 1; }
.lupeo-machine__atelier-plan > :nth-child(3) { grid-area: 2 / 1; }
.lupeo-machine__atelier-plan > :nth-child(4) { grid-area: 3 / 1; }
.lupeo-machine__atelier-plan > :nth-child(5) { grid-area: 1 / 3; }
.lupeo-machine__atelier-plan > :nth-child(6) { grid-area: 2 / 3; }
.lupeo-machine__atelier-plan > :nth-child(7) { grid-area: 3 / 3; }

.lupeo-machine button.lupeo-machine__zone {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--lm-bord);
	border-radius: 12px;
	text-align: left;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lupeo-machine button.lupeo-machine__zone:hover {
	border-color: var(--lupeo-vert-fonce, #076B4E);
	transform: translateY(-2px);
	box-shadow: var(--lupeo-ombre-1);
}

.lupeo-machine button.lupeo-machine__zone[aria-pressed="true"] {
	background: var(--lupeo-ok-soft, #EAF9E2);
	border-color: var(--lupeo-vert-fonce, #076B4E);
	box-shadow: inset 0 0 0 1px var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine button.lupeo-machine__zone[aria-disabled="true"] {
	background: var(--lupeo-fond, #F6F8F4);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	border-color: var(--lm-bord);
}

.lupeo-machine__zone-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--lupeo-fond, #F6F8F4);
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__zone-ico .lupeo-i {
	width: 20px;
	height: 20px;
}

.lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-ico {
	background: #fff;
}

.lupeo-machine__zone[aria-disabled="true"] .lupeo-machine__zone-ico {
	color: var(--lupeo-mute, #6F6A62);
	background: #fff;
}

.lupeo-machine__zone-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lupeo-machine__zone-txt small {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__zone-txt b {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lupeo-ink, #1A1A1A);
}

.lupeo-machine__zone-nb {
	font-size: 12.5px;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__zone[aria-disabled="true"] small,
.lupeo-machine__zone[aria-disabled="true"] b {
	color: var(--lupeo-mute, #6F6A62);
}

/* =========================================================
   5. Toutes les familles
   ========================================================= */
.lupeo-machine__familles {
	margin-top: clamp(28px, 3vw, 40px);
	padding-top: 22px;
	border-top: 1px solid var(--lm-bord);
}

.lupeo-machine__familles-liste {
	display: flex;
	gap: 4px 28px;
	margin: 8px 0 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lupeo-machine__familles-liste.is-ouverte {
	flex-wrap: wrap;
	overflow: visible;
}

.lupeo-machine__familles-liste li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.lupeo-machine__familles-liste a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 12px 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.lupeo-machine__familles-liste a:hover,
.lupeo-machine__familles-liste a[aria-current="true"] {
	color: var(--lupeo-vert-fonce, #076B4E);
	border-bottom-color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__familles-liste a span {
	font-size: 12px;
	font-weight: 600;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__familles-liste a.lupeo-machine__familles-universels {
	color: var(--lupeo-ink-2, #4A453E);
	font-weight: 500;
}

.lupeo-machine button.lupeo-machine__familles-tout {
	display: block;
	margin: 12px 0 0 auto;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine button.lupeo-machine__familles-tout:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lupeo-machine button.lupeo-machine__familles-tout[hidden] {
	display: none;
}

/* =========================================================
   6. La zone des pièces
   ========================================================= */
.lupeo-machine__pieces {
	padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px);
	background: var(--lupeo-fond, #F6F8F4);
	border-top: 1px solid var(--lm-bord);
	scroll-margin-top: 12px;
}

.lupeo-machine__banniere {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px 14px 20px;
	background: var(--lupeo-vert-fonce, #076B4E);
	border-radius: var(--lupeo-r-m, 14px);
	color: #fff;
}

.lupeo-machine__banniere-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lupeo-vert-clair, #C0FFA5);
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__banniere-ico .lupeo-i {
	width: 16px;
	height: 16px;
	stroke-width: 2.4;
}

/* La coche dit « référencées pour ce modèle ». En mode « toutes les
   versions », ce n'est plus vrai de chaque pièce : l'icône devient un
   avertissement, comme la couleur. */
.lupeo-machine__banniere-ico > span {
	display: inline-flex;
}

.lupeo-machine__banniere-ico > .lupeo-machine__banniere-ico-toutes,
.lupeo-machine__banniere.is-toutes .lupeo-machine__banniere-ico-ok {
	display: none;
}

.lupeo-machine__banniere.is-toutes .lupeo-machine__banniere-ico-toutes {
	display: inline-flex;
}

.lupeo-machine__banniere-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.lupeo-machine a.lupeo-machine__methode {
	align-self: flex-start;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .86);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.lupeo-machine a.lupeo-machine__methode:hover {
	color: #fff;
}

.lupeo-machine__banniere.is-toutes a.lupeo-machine__methode {
	color: var(--lupeo-warn, #7A5600);
}

.lupeo-machine .lupeo-machine__banniere-titre {
	margin: 0;
	font-family: var(--theme-font-family, Inter, sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: #fff;
}

.lupeo-machine__banniere.is-toutes {
	background: var(--lupeo-warn-soft, #FFF7DA);
	color: var(--lupeo-warn, #7A5600);
	box-shadow: inset 0 0 0 1.5px var(--lupeo-warn-line, #FDD235);
}

.lupeo-machine__banniere.is-toutes .lupeo-machine__banniere-titre {
	color: var(--lupeo-warn, #7A5600);
}

.lupeo-machine__banniere.is-toutes .lupeo-machine__banniere-ico {
	background: var(--lupeo-jaune, #FDD235);
	color: var(--lupeo-ink, #1A1A1A);
}

.lupeo-machine button.lupeo-machine__affiner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	min-height: 42px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: var(--lupeo-r-s, 10px);
	transition: background-color .18s ease, border-color .18s ease;
}

.lupeo-machine button.lupeo-machine__affiner:hover,
.lupeo-machine button.lupeo-machine__affiner[aria-expanded="true"] {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.lupeo-machine button.lupeo-machine__affiner[hidden] {
	display: none;
}

.lupeo-machine__banniere.is-toutes button.lupeo-machine__affiner {
	color: var(--lupeo-warn, #7A5600);
	border-color: rgba(122, 86, 0, .45);
}

/* Le panneau des filtres */
.lupeo-machine__filtres {
	display: grid;
	gap: 18px;
	margin-top: 12px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--lm-bord);
	border-radius: var(--lupeo-r-m, 14px);
}

.lupeo-machine__filtres[hidden] {
	display: none;
}

.lupeo-machine__filtres fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.lupeo-machine__filtres legend {
	margin-bottom: 10px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__filtres-choix {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lupeo-machine .lupeo-machine__filtres-choix button {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	border: 1.5px solid var(--lm-bord);
	border-radius: 999px;
	transition: border-color .18s ease, background-color .18s ease;
}

.lupeo-machine .lupeo-machine__filtres-choix button:hover {
	border-color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine .lupeo-machine__filtres-choix button[aria-pressed="true"] {
	background: var(--lupeo-vert-fonce, #076B4E);
	border-color: var(--lupeo-vert-fonce, #076B4E);
	color: #fff;
}

.lupeo-machine__filtres-choix button span {
	margin-left: 4px;
	font-weight: 500;
	color: var(--lupeo-mute, #6F6A62);
}

/* Blanc à 90 % sur #076B4E : 5,7:1. À 75 %, il tombait à 4,4:1, sous le
   seuil AA du petit texte. */
.lupeo-machine .lupeo-machine__filtres-choix button[aria-pressed="true"] span {
	color: rgba(255, 255, 255, .9);
}

.lupeo-machine .lupeo-machine__filtres-choix button[hidden],
.lupeo-machine__familles-liste li[hidden] {
	display: none;
}

.lupeo-machine__filtres label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	margin-right: 22px;
	font-size: 14.5px;
	cursor: pointer;
}

.lupeo-machine__filtres input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--lupeo-vert-fonce, #076B4E);
}

/* La ligne d'état : combien, et quel filtre */
.lupeo-machine__statut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 18px 0 16px;
	font-size: 14px;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-machine button.lupeo-machine__raz {
	min-height: 32px;
	font-size: 14px;
	font-weight: 700;
	color: var(--lupeo-vert-fonce, #076B4E);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lupeo-machine button.lupeo-machine__raz[hidden] {
	display: none;
}

/* La grille — cinq colonnes sur grand écran, quatre sur portable, trois sur
   tablette, deux sur téléphone. Colonnes souples ici : une rangée incomplète
   s'aligne à gauche, sous la bannière. */
.lupeo-machine .lupeo-machine__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lupeo-machine__item {
	margin: 0;
	min-width: 0;
}

.lupeo-machine__item[hidden] {
	display: none;
}

.lupeo-machine__aucune {
	margin-top: 8px;
}

.lupeo-machine__aucune[hidden] {
	display: none;
}

/* =========================================================
   7. La vignette, sur cette page
   ========================================================= */
.lupeo-machine .lupeo-card {
	border-color: var(--lm-bord);
	border-radius: var(--lupeo-r-m, 14px);
}

.lupeo-machine .lupeo-card--piece .lupeo-card__corps {
	gap: 8px;
	padding: 14px 16px 16px;
}

.lupeo-machine .lupeo-card__famille {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine .lupeo-card__badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	border-radius: 999px;
}

.lupeo-machine .lupeo-card__badge .lupeo-i {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

.lupeo-machine .lupeo-card__badge--ok {
	background: var(--lupeo-ok-soft, #EAF9E2);
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine .lupeo-card__badge--verifier {
	background: var(--lupeo-warn-soft, #FFF7DA);
	color: var(--lupeo-warn, #7A5600);
	box-shadow: inset 0 0 0 1px var(--lupeo-warn-line, #FDD235);
}

.lupeo-machine .lupeo-card__badge--universel {
	background: var(--lupeo-fond, #F6F8F4);
	color: var(--lupeo-ink-2, #4A453E);
	box-shadow: inset 0 0 0 1px var(--lm-bord);
}

.lupeo-machine .lupeo-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lupeo-ok, #15803D);
	white-space: nowrap;
}

.lupeo-machine .lupeo-card__stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.lupeo-machine .lupeo-card__stock--commande {
	color: var(--lupeo-warn, #7A5600);
}

.lupeo-machine .lupeo-card__stock--rupture {
	color: var(--lupeo-mute, #6F6A62);
}

/* =========================================================
   Reconnaître sa version · la trottinette neuve
   ========================================================= */
.lupeo-machine__reconnaitre {
	margin-top: clamp(40px, 5vw, 64px);
	scroll-margin-top: 16px;
}

.lupeo-machine__reconnaitre:focus {
	outline: none;
}

.lupeo-machine__reconnaitre-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.lupeo-machine__reconnaitre-item {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	margin: 0;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--lm-bord);
	border-radius: var(--lupeo-r-m, 14px);
}

.lupeo-machine__reconnaitre-item.is-courante {
	border-color: var(--lupeo-vert-fonce, #076B4E);
	box-shadow: inset 0 0 0 1px var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__reconnaitre-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 8px;
	background: #fff;
	border-radius: 10px;
}

.lupeo-machine__reconnaitre-photo img.lupeo-machine__img {
	max-height: 116px;
	mix-blend-mode: normal;
}

.lupeo-machine .lupeo-machine__reconnaitre-txt h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.015em;
}

.lupeo-machine__reconnaitre-txt p {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-machine .lupeo-machine__reconnaitre-pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__ici {
	padding: 3px 10px;
	font-weight: 600;
	color: var(--lupeo-vert-fonce, #076B4E);
	background: var(--lupeo-ok-soft, #EAF9E2);
	border-radius: 999px;
}

.lupeo-machine__neuve-bloc {
	margin-top: clamp(40px, 5vw, 56px);
}

.lupeo-machine__neuve-grille {
	display: grid;
	grid-template-columns: minmax(0, 320px);
	margin-top: 22px;
}

/* =========================================================
   Les accessoires universels, repliés
   ========================================================= */
.lupeo-machine__universels-zone {
	padding-block: clamp(32px, 4vw, 48px);
	background: #fff;
	border-top: 1px solid var(--lm-bord);
	scroll-margin-top: 12px;
}

.lupeo-machine__universels summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 20px;
	padding: 18px 20px;
	list-style: none;
	cursor: pointer;
	background: var(--lupeo-fond, #F6F8F4);
	border: 1px solid var(--lm-bord);
	border-radius: var(--lupeo-r-m, 14px);
	transition: border-color .18s ease;
}

.lupeo-machine__universels summary:hover {
	border-color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__universels summary::-webkit-details-marker {
	display: none;
}

.lupeo-machine .lupeo-machine__universels-titre {
	margin-bottom: 16px;
	font-size: clamp(22px, 2.4vw, 28px);
}

.lupeo-machine__universels-resume {
	grid-column: 1;
	font-size: 16px;
	font-weight: 700;
	color: var(--lupeo-vert-fonce, #076B4E);
}

.lupeo-machine__universels-note {
	grid-column: 1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-machine__universels summary > .lupeo-i {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	color: var(--lupeo-vert-fonce, #076B4E);
	transition: transform .2s ease;
}

.lupeo-machine__universels[open] summary > .lupeo-i {
	transform: rotate(180deg);
}

.lupeo-machine__universels .lupeo-machine__grille {
	margin-top: 20px;
}

/* =========================================================
   Guide et « Vous ne trouvez pas ? »
   ========================================================= */
.lupeo-machine__fin {
	padding-block: clamp(40px, 5vw, 64px) 8px;
}

.lupeo-machine__fin > :first-child {
	margin-top: 0;
}

/* =========================================================
   Laptop, tablette, téléphone
   ========================================================= */
@media (max-width: 1100px) {
	.lupeo-machine__atelier-plan {
		grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.lupeo-machine__bandeau-in {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 0;
	}

	/* Sous le titre, avant l'introduction : on reconnaît sa machine avant
	   d'avoir à lire. Le bloc de texte s'efface de la grille (`contents`)
	   pour que la photo s'intercale entre ses enfants ; l'ordre du document,
	   celui du clavier, ne change pas — la photo n'est pas focalisable. */
	.lupeo-machine__bandeau-txt {
		display: contents;
	}

	.lupeo-machine__contexte { order: 1; }
	.lupeo-machine .lupeo-machine__titre { order: 2; }
	.lupeo-machine__bandeau-photo { order: 3; margin: 18px 0 4px; }
	.lupeo-machine__intro { order: 4; }
	.lupeo-machine__versions { order: 5; }
	.lupeo-machine__actions { order: 6; }
	.lupeo-machine__neuve { order: 7; justify-self: start; }

	.lupeo-machine__bandeau-photo img.lupeo-machine__img {
		max-height: 300px;
	}

	.lupeo-machine__atelier-plan {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.lupeo-machine .lupeo-machine__atelier-plan > * {
		grid-area: auto;
	}

	.lupeo-machine .lupeo-machine__atelier-photo {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 0;
	}

	.lupeo-machine__atelier-photo img.lupeo-machine__img {
		max-height: 200px;
	}
}

@media (max-width: 640px) {
	.lupeo-machine .lupeo-machine__titre {
		font-size: clamp(32px, 9.4vw, 40px);
	}

	/* Assez grande pour reconnaître sa machine, assez petite pour que le
	   bouton « Voir les pièces » reste à portée de pouce. */
	.lupeo-machine__bandeau-photo img.lupeo-machine__img {
		max-height: 220px;
	}

	.lupeo-machine__intro {
		font-size: 16px;
	}

	.lupeo-machine__versions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lupeo-machine a.lupeo-machine__version {
		min-width: 0;
	}

	.lupeo-machine__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lupeo-machine a.lupeo-machine__appel {
		justify-content: center;
	}

	.lupeo-machine a.lupeo-machine__aide {
		align-self: center;
	}

	.lupeo-machine .lupeo-machine__fiche-in {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 20px;
	}

	.lupeo-machine__choix-tete > div:first-child {
		flex: 1 1 100%;
	}

	.lupeo-machine__selection {
		flex: 1 1 100%;
	}

	.lupeo-machine__atelier {
		padding: 18px 14px 18px;
	}

	.lupeo-machine button.lupeo-machine__zone {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 12px;
	}

	.lupeo-machine__zone-ico {
		width: 34px;
		height: 34px;
	}

	.lupeo-machine__zone-txt b {
		font-size: 14.5px;
	}

	.lupeo-machine__banniere {
		flex-wrap: wrap;
		padding: 14px 16px;
	}

	.lupeo-machine__banniere-txt {
		flex: 1 1 calc(100% - 44px);
	}

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

	.lupeo-machine button.lupeo-machine__affiner {
		flex: 1 1 100%;
		justify-content: center;
	}

	.lupeo-machine .lupeo-machine__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lupeo-machine .lupeo-card--piece .lupeo-card__corps {
		padding: 12px 12px 14px;
	}

	.lupeo-machine .lupeo-card--piece .lupeo-card__titre {
		font-size: 14px;
	}

	.lupeo-machine__reconnaitre-item {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}

	.lupeo-machine__universels summary {
		padding: 16px;
	}
}

@media (max-width: 380px) {
	.lupeo-machine .lupeo-machine__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lupeo-machine *,
	.lupeo-machine *::before {
		transition: none !important;
	}
}