/**
 * La page d'une marque — `/ma-trottinette/<marque>/` (refonte du 01/10/2026, demande de David : « un design
 * moderne, épate-moi ») — et, depuis le même soir, sa sœur : la page de toutes les marques, `/ma-trottinette/`
 * (« Trouvez les pièces de votre trottinette », section « Page de toutes les marques » en fin de feuille).
 *
 * Chargée sur ces seules pages, après `lupeo-modeles.css` (encadrés « vide » et « secours », carte de repli
 * `.lupeo-mt__photo-txt`). Versionnée par la date du fichier (voir `Lupeo_Modeles::styles()`).
 *
 * ─ Trois temps ────────────────────────────────────────────────────────────────
 *  A. Le bandeau « vitrine », de nuit : la même encre vert nuit, le même halo et les mêmes bandes réfléchissantes
 *     en filigrane que la section « Sécurité du pilote » de l'accueil. Le nom de la marque, en très grand et en
 *     contour, passe derrière. À droite, les modèles les mieux fournis en cartes blanches déployées en éventail.
 *  B. Le choix du modèle : chaque photo est posée sur une scène claire (dégradé menthe, quadrillage d'atelier,
 *     ombre portée au sol) ; une jauge mesure ses pièces propres face au mieux fourni de la marque.
 *  C. Guide et encadré « secours » : ceux du parcours, inchangés.
 *
 * ─ Portée ─────────────────────────────────────────────────────────────────────
 * Tout commence par `.lupeo-mq` (posé sur `.lupeo-mt`), sauf l'espace que le thème réserve au-dessus du
 * contenu, sous `body.lupeo-ecran-marque`. Deux classes au moins dans chaque sélecteur : les règles du design
 * system (`body .lupeo-mt__…`, spécificité 0,1,1, chargées après nous) ne repassent pas dessus.
 * ⚠️ Blocksy peint tout `a` aux couleurs du thème : le nom d'élément figure dans le sélecteur des liens.
 *
 * ─ Mouvement ──────────────────────────────────────────────────────────────────
 * Tout ce qui bouge est sous `prefers-reduced-motion: no-preference`. Les états d'attente (cartes à venir,
 * jauges vides) ne sont posés que par le script (`.est-anime`) : sans lui, la page est complète d'emblée.
 * Le jaune ne décore jamais.
 */

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

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

/* Le bas de l'écran porte sa propre marge (sous l'encadré « secours ») : celle du thème la doublait. */
body.lupeo-ecran-marque .ct-container-full[data-vertical-spacing] {
	padding-bottom: 0;
}

.lupeo-mt.lupeo-mq {
	--mq-in: min(var(--lp-wrap, 1290px), calc(100vw - 2 * var(--lp-gouttiere, 20px)));
	--mq-nuit: #06110E;
	--mq-eclat: var(--lp-green-400, #00D36B);
	--mq-menthe: #9FE8C4;
	--mq-encre: var(--lp-ink, #0A0F0D);
	--mq-trait: var(--lp-line, #E4E8E6);
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-bottom: 0;
	color: var(--mq-encre);
	font-family: var(--lp-sans, "Schibsted Grotesk", Helvetica, Arial, sans-serif);
}

.lupeo-mq .lupeo-mq__in {
	width: var(--mq-in);
	margin-inline: auto;
}

.lupeo-mq .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 « vitrine »
   ========================================================= */
.lupeo-mq .lupeo-mq__bandeau {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(55% 75% at 10% 8%, rgba(0, 211, 107, .22) 0%, rgba(0, 211, 107, 0) 60%),
		radial-gradient(45% 65% at 78% 55%, rgba(0, 168, 150, .26) 0%, rgba(0, 168, 150, 0) 70%),
		linear-gradient(160deg, #06110E 0%, #0B1F1A 55%, #08231D 100%);
}

/* Bandes réfléchissantes en filigrane : blanches à 5 %, jamais de jaune. */
.lupeo-mq .lupeo-mq__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;
}

/* Le nom de la marque, en contour, très grand, en pied de bandeau. */
.lupeo-mq .lupeo-mq__filigrane {
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -.2em;
	transform: translateX(-50%);
	font-size: clamp(110px, 17vw, 300px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .075);
	pointer-events: none;
	user-select: none;
}

.lupeo-mq .lupeo-mq__bandeau-in {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
	min-height: 540px;
	padding-block: clamp(48px, 6vw, 96px);
}

.lupeo-mq .lupeo-mq__bandeau--seul .lupeo-mq__bandeau-in {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.lupeo-mq .lupeo-mq__contexte {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 24px;
	padding: 6px 13px 6px 11px;
	border: 1px solid rgba(0, 211, 107, .35);
	border-radius: 999px;
	background: rgba(0, 211, 107, .10);
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7CF0B5;
}

.lupeo-mq .lupeo-mq__contexte i {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mq-eclat);
}

/* L'onde du point : un disque qui grandit et s'efface (transform et opacité seulement : pas de recalcul de style par image). */
.lupeo-mq .lupeo-mq__contexte i::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0, 211, 107, .6);
	opacity: 0;
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__titre {
	margin: 0 0 22px;
	font-family: inherit;
	color: #fff;
}

.lupeo-mq .lupeo-mq__titre-pre {
	display: block;
	margin-bottom: 10px;
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: rgba(255, 255, 255, .66);
}

.lupeo-mq .lupeo-mq__titre-nom {
	display: block;
	font-size: clamp(52px, 7.2vw, 112px);
	font-weight: 700;
	line-height: .94;
	letter-spacing: -.05em;
	overflow-wrap: anywhere;
	background: linear-gradient(100deg, #fff 0%, #fff 52%, var(--mq-menthe) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: .06em;
}

/* L'introduction (celle de la marque, ou la phrase générique) garde sa typographie, en clair sur la nuit. */
.lupeo-mq .lupeo-mq__bandeau .lupeo-mt__chapo {
	max-width: 56ch;
	margin: 0 0 32px;
	font-size: clamp(16px, 1.15vw, 18px);
	line-height: 1.62;
	color: rgba(255, 255, 255, .76);
}

.lupeo-mq .lupeo-mq__bandeau .lupeo-mt__chapo strong {
	color: #fff;
}

.lupeo-mq .lupeo-mq__bandeau .lupeo-mt__chapo a {
	color: var(--mq-menthe);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Les chiffres : tuiles de verre, valeur écrite par le serveur, comptée depuis zéro par le script. */
.lupeo-mq .lupeo-mq__chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 10px;
	max-width: 640px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.lupeo-mq .lupeo-mq__chiffres li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 14px 16px 15px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.lupeo-mq .lupeo-mq__chiffres b {
	position: relative;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.lupeo-mq .lupeo-mq__chiffres li:first-child b {
	color: var(--mq-eclat);
}

.lupeo-mq .lupeo-mq__chiffres li > span {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.lupeo-mq .lupeo-mq__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

.lupeo-mq a.lupeo-mq__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px 15px 26px;
	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(--lp-green-400-ink, #06231A);
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}

.lupeo-mq a.lupeo-mq__cta .lupeo-i {
	width: 18px;
	height: 18px;
	transform: rotate(90deg);
	transition: transform .22s ease;
}

.lupeo-mq a.lupeo-mq__cta:hover,
.lupeo-mq a.lupeo-mq__cta:focus-visible {
	color: var(--lp-green-400-ink, #06231A);
	transform: translateY(-2px);
	box-shadow: 0 0 0 6px rgba(0, 211, 107, .2), 0 18px 36px -12px rgba(0, 211, 107, .7);
}

.lupeo-mq a.lupeo-mq__cta:hover .lupeo-i {
	transform: rotate(90deg) translateX(3px);
}

.lupeo-mq a.lupeo-mq__cta:focus-visible,
.lupeo-mq a.lupeo-mq__lien:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.lupeo-mq a.lupeo-mq__lien {
	padding-bottom: 3px;
	border-bottom: 2px solid var(--mq-eclat);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

.lupeo-mq a.lupeo-mq__lien:hover {
	color: var(--mq-menthe);
	border-color: var(--mq-menthe);
}

/* ---- La vitrine : logo sur plaque blanche, modèles en éventail ---- */
.lupeo-mq .lupeo-mq__vitrine {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: 0;
	min-height: 420px;
}

/* Halo sous l'éventail : la lumière vient d'en bas, comme sur une scène. */
.lupeo-mq .lupeo-mq__vitrine::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 8%;
	right: 8%;
	bottom: 6%;
	height: 46%;
	background: radial-gradient(closest-side, rgba(0, 211, 107, .32), rgba(0, 211, 107, 0));
	filter: blur(10px);
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__plaque {
	position: absolute;
	z-index: 5;
	top: 2%;
	right: 2%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 76px;
	padding: 12px 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .5) inset;
	transform: rotate(4deg);
}

.lupeo-mq .lupeo-mq__plaque-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Marque sans photo de modèle : la plaque du logo occupe seule la vitrine, en grand. */
.lupeo-mq .lupeo-mq__vitrine--0 .lupeo-mq__plaque {
	position: relative;
	top: auto;
	right: auto;
	width: min(340px, 80%);
	height: 190px;
	padding: 28px 36px;
	border-radius: 24px;
	transform: rotate(-3deg);
}

.lupeo-mq .lupeo-mq__vitrine-titre {
	margin: 0 0 18px;
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.lupeo-mq .lupeo-mq__eventail {
	--volet: clamp(168px, 13.5vw, 232px);
	position: relative;
	width: 100%;
	height: calc(var(--volet) * 1.5);
}

.lupeo-mq a.lupeo-mq__volet {
	--pose: translateX(0) rotate(0deg);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: var(--volet);
	padding: 10px 10px 14px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .25);
	color: var(--mq-encre);
	text-decoration: none;
	transform: translate(-50%, -50%) var(--pose);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

/* Trois volets : le mieux fourni au centre et devant, les deux suivants de part et d'autre. */
.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="0"] {
	--pose: translateY(-4%) rotate(0deg);
	z-index: 3;
}

.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="1"] {
	--pose: translateX(-88%) translateY(5%) rotate(-8deg);
}

.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="2"] {
	--pose: translateX(88%) translateY(5%) rotate(8deg);
}

.lupeo-mq .lupeo-mq__vitrine--2 a.lupeo-mq__volet[data-rang="0"] {
	--pose: translateX(-34%) rotate(-5deg);
	z-index: 3;
}

.lupeo-mq .lupeo-mq__vitrine--2 a.lupeo-mq__volet[data-rang="1"] {
	--pose: translateX(34%) translateY(5%) rotate(6deg);
}

/* Le volet de droite passe sous celui du centre par sa gauche : sa légende se range à droite, côté visible. */
.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="2"],
.lupeo-mq .lupeo-mq__vitrine--2 a.lupeo-mq__volet[data-rang="1"] {
	align-items: flex-end;
	text-align: right;
}

.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="2"] .lupeo-mq__volet-photo,
.lupeo-mq .lupeo-mq__vitrine--2 a.lupeo-mq__volet[data-rang="1"] .lupeo-mq__volet-photo {
	align-self: stretch;
}

.lupeo-mq .lupeo-mq__vitrine--1 a.lupeo-mq__volet {
	--pose: rotate(-3deg);
}

/* L'éventail s'ouvre un peu plus au survol ; le volet visé se redresse et passe devant. */
.lupeo-mq .lupeo-mq__vitrine--3 .lupeo-mq__eventail:hover a.lupeo-mq__volet[data-rang="1"] {
	--pose: translateX(-97%) translateY(6%) rotate(-11deg);
}

.lupeo-mq .lupeo-mq__vitrine--3 .lupeo-mq__eventail:hover a.lupeo-mq__volet[data-rang="2"] {
	--pose: translateX(97%) translateY(6%) rotate(11deg);
}

.lupeo-mq .lupeo-mq__eventail a.lupeo-mq__volet:hover,
.lupeo-mq .lupeo-mq__eventail a.lupeo-mq__volet:focus-visible {
	z-index: 4;
	box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .85), 0 0 0 3px var(--mq-eclat);
	color: var(--mq-encre);
}

.lupeo-mq .lupeo-mq__eventail a.lupeo-mq__volet:focus-visible {
	outline: none;
}

.lupeo-mq .lupeo-mq__volet-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin-bottom: 6px;
	padding: 8px;
	border-radius: 14px;
	background: radial-gradient(75% 70% at 50% 40%, #fff 0%, #F1FAF5 70%, #E6F5EF 100%);
	overflow: hidden;
}

.lupeo-mq .lupeo-mq__volet-photo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.lupeo-mq .lupeo-mq__volet-nom {
	padding-inline: 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
}

.lupeo-mq .lupeo-mq__volet-nb {
	padding-inline: 6px;
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--lp-green-600, #007C75);
}

/* =========================================================
   B. Le choix du modèle
   ========================================================= */
.lupeo-mq .lupeo-mq__modeles {
	scroll-margin-top: 110px;
	padding-top: clamp(44px, 5vw, 76px);
	margin-bottom: clamp(40px, 5vw, 64px);
}

.lupeo-mq .lupeo-mq__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	margin-bottom: 28px;
}

.lupeo-mq .lupeo-mq__h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--mq-encre);
}

.lupeo-mq .lupeo-mq__compte {
	position: relative;
	top: -.18em;
	margin-left: 12px;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--lp-green-100, #E6F5EF);
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--lp-green-800, #005F59);
}

.lupeo-mq .lupeo-mq__note {
	max-width: 62ch;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--lp-ink-2, #59635F);
}

.lupeo-mq .lupeo-mq__outils {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

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

.lupeo-mq .lupeo-mq__filtre {
	position: relative;
	display: block;
	margin: 0;
}

.lupeo-mq .lupeo-mq__filtre svg {
	position: absolute;
	top: 50%;
	left: 15px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--lp-ink-3, #64706B);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__filtre input[type="search"] {
	width: 260px;
	height: 46px;
	margin: 0;
	padding: 0 16px 0 42px;
	border: 1px solid var(--lp-line-forte, #D5DBD8);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--mq-encre);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lupeo-mq .lupeo-mq__filtre input[type="search"]:focus {
	outline: none;
	border-color: var(--lp-green-600, #007C75);
	box-shadow: 0 0 0 4px rgba(0, 124, 117, .14);
}

.lupeo-mq .lupeo-mq__tri {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: var(--lp-surface-2, #F6F8F7);
	border: 1px solid var(--lp-line, #E4E8E6);
}

.lupeo-mq .lupeo-mq__tri button {
	height: 36px;
	margin: 0;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--lp-ink-2, #59635F);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.lupeo-mq .lupeo-mq__tri button:hover {
	color: var(--mq-encre);
}

.lupeo-mq .lupeo-mq__tri button[aria-pressed="true"] {
	background: #fff;
	color: var(--mq-encre);
	box-shadow: 0 1px 2px rgba(10, 15, 13, .08), 0 4px 12px -6px rgba(10, 15, 13, .25);
}

.lupeo-mq .lupeo-mq__tri button:focus-visible {
	outline: 2px solid var(--lp-green-600, #007C75);
	outline-offset: 2px;
}

/* ---- Les cartes ---- */
.lupeo-mq .lupeo-mq__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 18px;
}

.lupeo-mq a.lupeo-mq__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--mq-trait);
	border-radius: 20px;
	background: #fff;
	color: var(--mq-encre);
	text-decoration: none;
	overflow: hidden;
	box-shadow: var(--lp-ombre-1, 0 1px 2px rgba(10, 15, 13, .05));
	transition:
		transform .35s cubic-bezier(.2, .7, .2, 1),
		box-shadow .35s ease,
		border-color .35s ease;
}

.lupeo-mq a.lupeo-mq__carte[hidden] {
	display: none;
}

.lupeo-mq a.lupeo-mq__carte:hover {
	color: var(--mq-encre);
	transform: translateY(-6px);
	border-color: rgba(0, 124, 117, .45);
	box-shadow: 0 26px 48px -26px rgba(1, 60, 56, .5), 0 2px 6px rgba(10, 15, 13, .05);
}

.lupeo-mq a.lupeo-mq__carte:focus-visible {
	outline: 2px solid var(--lp-green-600, #007C75);
	outline-offset: 3px;
}

/* La scène : dégradé menthe, quadrillage d'atelier qui s'efface vers les bords, ombre portée au sol. */
.lupeo-mq .lupeo-mq__scene {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / .86;
	padding: 18px 18px 26px;
	background: radial-gradient(72% 66% at 50% 40%, #fff 0%, #F1FAF5 58%, #E3F2EA 100%);
	overflow: hidden;
}

.lupeo-mq .lupeo-mq__scene::before {
	content: "";
	position: absolute;
	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: 28px 28px;
	background-position: center center;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
	mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__scene::after {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: 11%;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(6, 35, 26, .24), rgba(6, 35, 26, 0));
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease;
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__scene img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.lupeo-mq a.lupeo-mq__carte:hover .lupeo-mq__scene img {
	transform: translateY(-7px) scale(1.045);
}

.lupeo-mq a.lupeo-mq__carte:hover .lupeo-mq__scene::after {
	transform: scaleX(.82);
	opacity: .65;
}

/* Pas de photo : le nom du modèle tient lieu de visuel (règle de David), sur la scène — sans ombre au sol. */
.lupeo-mq .lupeo-mq__scene--nom::after {
	display: none;
}

.lupeo-mq .lupeo-mq__scene .lupeo-mt__photo-txt {
	position: relative;
	z-index: 1;
	background: transparent;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--lp-green-800, #005F59);
}

.lupeo-mq .lupeo-mq__badge {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px 5px 9px;
	border-radius: 999px;
	background: var(--lp-green-900, #013C38);
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.lupeo-mq .lupeo-mq__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mq-eclat);
}

.lupeo-mq .lupeo-mq__corps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 18px;
	border-top: 1px solid var(--lp-line-2, #EEF1F0);
}

.lupeo-mq .lupeo-mq__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lupeo-mq .lupeo-mq__nom {
	min-width: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}

.lupeo-mq .lupeo-mq__fleche {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--mq-trait);
	border-radius: 50%;
	color: var(--mq-encre);
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}

.lupeo-mq .lupeo-mq__fleche .lupeo-i {
	width: 17px;
	height: 17px;
}

.lupeo-mq a.lupeo-mq__carte:hover .lupeo-mq__fleche {
	border-color: var(--mq-eclat);
	background: var(--mq-eclat);
	color: var(--lp-green-400-ink, #06231A);
	transform: translateX(3px);
}

/* La jauge : les pièces propres au modèle, rapportées au mieux fourni de la marque (`--part`, de 0 à 1). */
.lupeo-mq .lupeo-mq__jauge {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--lp-line-2, #EEF1F0);
	overflow: hidden;
}

.lupeo-mq .lupeo-mq__jauge i {
	display: block;
	width: calc(var(--part, 0) * 100%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--lp-green-500, #00A896) 0%, var(--mq-eclat) 100%);
	transform-origin: left center;
}

.lupeo-mq .lupeo-mq__nb {
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--lp-ink-2, #59635F);
}

.lupeo-mq .lupeo-mq__nb b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mq-encre);
}

.lupeo-mq .lupeo-mq__aucun {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 6px 0 0;
	padding: 22px 24px;
	border: 1px dashed var(--lp-line-forte, #D5DBD8);
	border-radius: 16px;
	font-size: 15.5px;
	color: var(--lp-ink-2, #59635F);
}

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

.lupeo-mq .lupeo-mq__aucun button {
	margin: 0;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 2px solid var(--lp-green-600, #007C75);
	border-radius: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--mq-encre);
	cursor: pointer;
}

/* =========================================================
   C. Guide et secours, sous la grille
   ========================================================= */
.lupeo-mq .lupeo-mq__in > .lupeo-mt__secours {
	margin-bottom: clamp(40px, 5vw, 72px);
}

/* =========================================================
   Mouvement (jamais si l'on a demandé à en avoir moins)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	.lupeo-mq .lupeo-mq__contexte i::after {
		animation: lupeo-mq-pouls 1.8s ease-out infinite;
	}

	/* L'éventail s'ouvre à l'arrivée : les volets partent empilés, droits. */
	.lupeo-mq a.lupeo-mq__volet {
		animation: lupeo-mq-eventail .9s cubic-bezier(.2, .7, .2, 1) backwards;
		animation-delay: calc(.15s + var(--rang, 0) * .08s);
	}

	.lupeo-mq .lupeo-mq__plaque {
		animation: lupeo-mq-plaque .8s cubic-bezier(.2, .7, .2, 1) .45s backwards;
	}

	/* Posés par le script seulement : cartes en attente, puis révélées en cascade au passage. */
	.lupeo-mq .lupeo-mq__grille.est-anime a.lupeo-mq__carte {
		opacity: 0;
		transform: translateY(22px);
	}

	.lupeo-mq .lupeo-mq__grille.est-anime a.lupeo-mq__carte.est-visible {
		opacity: 1;
		transform: none;
		transition:
			opacity .6s ease calc(min(var(--ordre, 0), 12) * 45ms),
			transform .7s cubic-bezier(.2, .7, .2, 1) calc(min(var(--ordre, 0), 12) * 45ms),
			box-shadow .35s ease,
			border-color .35s ease;
	}

	.lupeo-mq .lupeo-mq__grille.est-anime a.lupeo-mq__carte.est-visible:hover {
		transform: translateY(-6px);
		transition-delay: 0s;
	}

	.lupeo-mq .lupeo-mq__grille.est-anime .lupeo-mq__jauge i {
		transform: scaleX(0);
		transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(.25s + min(var(--ordre, 0), 12) * 45ms);
	}

	.lupeo-mq .lupeo-mq__grille.est-anime .est-visible .lupeo-mq__jauge i {
		transform: scaleX(1);
	}
}

@keyframes lupeo-mq-pouls {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(3.57); opacity: 0; }
}

@keyframes lupeo-mq-eventail {
	from {
		opacity: 0;
		transform: translate(-50%, -38%) rotate(0deg);
	}
}

@keyframes lupeo-mq-plaque {
	from {
		opacity: 0;
		transform: translateY(-14px) rotate(-6deg) scale(.9);
	}
}

/* =========================================================
   Tablette et téléphone
   ========================================================= */
@media (max-width: 1099px) {
	.lupeo-mq .lupeo-mq__bandeau-in {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 36px;
	}

	.lupeo-mq .lupeo-mq__vitrine {
		min-height: 0;
	}

	.lupeo-mq .lupeo-mq__eventail {
		--volet: clamp(150px, 26vw, 210px);
		max-width: 640px;
	}

	/* La plaque du logo rejoint le flux, au-dessus de l'éventail : en coin, elle flottait sans repère. */
	.lupeo-mq .lupeo-mq__plaque {
		position: relative;
		top: auto;
		right: auto;
		margin-bottom: 18px;
		transform: rotate(-3deg);
	}
}

@media (max-width: 640px) {
	.lupeo-mq .lupeo-mq__bandeau-in {
		padding-block: 40px 48px;
	}

	.lupeo-mq .lupeo-mq__contexte {
		margin-bottom: 18px;
	}

	/* Trois chiffres : une rangée de trois ; quatre : deux rangées de deux. Jamais de tuile orpheline. */
	.lupeo-mq .lupeo-mq__chiffres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 28px;
	}

	.lupeo-mq .lupeo-mq__chiffres--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lupeo-mq .lupeo-mq__chiffres--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.lupeo-mq .lupeo-mq__chiffres li {
		padding: 12px 11px;
	}

	.lupeo-mq .lupeo-mq__chiffres b {
		font-size: 26px;
	}

	.lupeo-mq .lupeo-mq__chiffres li > span {
		font-size: 9.5px;
		letter-spacing: .06em;
		overflow-wrap: anywhere;
	}

	.lupeo-mq .lupeo-mq__vitrine-titre {
		margin-bottom: 10px;
	}

	.lupeo-mq .lupeo-mq__eventail {
		--volet: min(35vw, 160px);
	}

	.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="1"] {
		--pose: translateX(-72%) translateY(5%) rotate(-8deg);
	}

	.lupeo-mq .lupeo-mq__vitrine--3 a.lupeo-mq__volet[data-rang="2"] {
		--pose: translateX(72%) translateY(5%) rotate(8deg);
	}

	.lupeo-mq .lupeo-mq__plaque {
		width: 112px;
		height: 62px;
		margin-bottom: 16px;
		padding: 10px 12px;
		border-radius: 12px;
	}

	.lupeo-mq .lupeo-mq__vitrine--0 .lupeo-mq__plaque {
		width: min(280px, 86%);
		height: 150px;
	}

	.lupeo-mq .lupeo-mq__volet-nom {
		font-size: 14.5px;
	}

	.lupeo-mq .lupeo-mq__barre {
		margin-bottom: 20px;
	}

	.lupeo-mq .lupeo-mq__outils,
	.lupeo-mq .lupeo-mq__filtre {
		width: 100%;
	}

	.lupeo-mq .lupeo-mq__filtre input[type="search"] {
		width: 100%;
	}

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

	.lupeo-mq a.lupeo-mq__carte {
		border-radius: 16px;
	}

	.lupeo-mq .lupeo-mq__scene {
		padding: 10px 10px 16px;
	}

	.lupeo-mq .lupeo-mq__corps {
		gap: 8px;
		padding: 12px 12px 14px;
	}

	.lupeo-mq .lupeo-mq__nom {
		font-size: 16px;
	}

	.lupeo-mq .lupeo-mq__fleche {
		display: none;
	}

	.lupeo-mq .lupeo-mq__nb {
		font-size: 12.5px;
	}

	.lupeo-mq .lupeo-mq__badge {
		top: 8px;
		left: 8px;
		padding: 4px 8px 4px 7px;
		font-size: 9px;
	}
}

/* =========================================================
   Page de toutes les marques — `/ma-trottinette/`
   ========================================================= */

/* Le bandeau ne rogne plus ce qui dépasse : la liste des résultats de recherche doit pouvoir descendre sur la
   grille des marques. Les bandes réfléchissantes restent donc dans ses bords, et le bandeau passe au-dessus de la
   suite (z-index). */
.lupeo-mq .lupeo-mq__bandeau--racine {
	z-index: 5;
	overflow: visible;
}

.lupeo-mq .lupeo-mq__bandeau--racine::before {
	top: 0;
	right: 0;
	height: 100%;
}

.lupeo-mq .lupeo-mq__bandeau--racine .lupeo-mq__bandeau-in {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	min-height: 620px;
}

.lupeo-mq .lupeo-mq__titre--racine {
	max-width: 15ch;
	margin-bottom: 22px;
	padding-bottom: .05em;
	font-size: clamp(42px, 5.4vw, 84px);
	font-weight: 700;
	line-height: .97;
	letter-spacing: -.045em;
	background: linear-gradient(100deg, #fff 0%, #fff 45%, var(--mq-menthe) 80%, var(--mq-eclat) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- La recherche instantanée ---- */
.lupeo-mq .lupeo-mq__recherche {
	position: relative;
	max-width: 640px;
	margin: 0 0 22px;
}

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

.lupeo-mq .lupeo-mq__recherche-champ {
	position: relative;
	display: block;
	margin: 0;
}

.lupeo-mq .lupeo-mq__recherche-champ svg {
	position: absolute;
	z-index: 1; /* Au-dessus du champ : son flou d'arrière-plan brouillait la loupe. */
	top: 50%;
	left: 22px;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--mq-menthe);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.lupeo-mq .lupeo-mq__recherche-champ input[type="search"] {
	width: 100%;
	height: 66px;
	margin: 0;
	padding: 0 24px 0 60px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font: inherit;
	font-size: 17px;
	color: #fff;
	box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .8);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.lupeo-mq .lupeo-mq__recherche-champ input[type="search"]::placeholder {
	color: rgba(255, 255, 255, .5);
}

.lupeo-mq .lupeo-mq__recherche-champ input[type="search"]:focus {
	outline: none;
	border-color: var(--mq-eclat);
	background: rgba(255, 255, 255, .12);
	box-shadow: 0 0 0 5px rgba(0, 211, 107, .18), 0 24px 48px -24px rgba(0, 211, 107, .55);
}

.lupeo-mq .lupeo-mq__resultats {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	max-height: min(440px, 60vh);
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	list-style: none;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(10, 15, 13, .06);
	color: var(--mq-encre);
}

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

.lupeo-mq .lupeo-mq__resultats li {
	margin: 0;
}

/* Résultats et pastilles sont des blocs cliquables, pas des liens dans une phrase : pas de soulignement. Le thème
   souligne les liens en <p>/<li> des pages (WCAG 1.4.1) et exclut ces deux composants (`lupeo-ds-pages.css`) ; ici on
   neutralise aussi la variable de Blocksy que les descendants relisent. */
.lupeo-mq ul.lupeo-mq__resultats li > a,
.lupeo-mq .lupeo-mq__phares ul li > a {
	--theme-text-decoration: none;
	text-decoration: none;
}

.lupeo-mq .lupeo-mq__resultats a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 12px 9px 9px;
	border-radius: 14px;
	color: var(--mq-encre);
	text-decoration: none;
}

.lupeo-mq .lupeo-mq__resultats li[aria-selected="true"] a,
.lupeo-mq .lupeo-mq__resultats a:hover {
	background: var(--lp-green-50, #F1FAF5);
	color: var(--mq-encre);
}

.lupeo-mq .lupeo-mq__res-vig {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 12px;
	background: radial-gradient(75% 70% at 50% 42%, #fff 0%, #F1FAF5 70%, #E6F5EF 100%);
	font-weight: 800;
	color: var(--lp-green-800, #005F59);
}

.lupeo-mq .lupeo-mq__res-vig img {
	max-width: 88%;
	max-height: 88%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

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

.lupeo-mq .lupeo-mq__res-txt b {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
}

.lupeo-mq .lupeo-mq__res-txt b mark {
	padding: 0;
	background: none;
	color: var(--lp-green-600, #007C75);
	font-weight: 800;
}

.lupeo-mq .lupeo-mq__res-txt small {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--lp-ink-3, #64706B);
}

.lupeo-mq .lupeo-mq__res-type {
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--lp-ink, #0A0F0D);
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.lupeo-mq .lupeo-mq__resultats-vide {
	padding: 16px 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lp-ink-2, #59635F);
}

.lupeo-mq .lupeo-mq__resultats-vide a {
	display: inline;
	padding: 0;
	color: var(--lp-green-600, #007C75);
	text-decoration: underline;
}

/* ---- Les modèles les mieux couverts, en liens directs ---- */
.lupeo-mq .lupeo-mq__phares {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 32px;
}

.lupeo-mq .lupeo-mq__phares-t {
	margin: 0;
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.lupeo-mq .lupeo-mq__phares ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lupeo-mq .lupeo-mq__phares li {
	margin: 0;
}

.lupeo-mq .lupeo-mq__phares a {
	display: inline-flex;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.lupeo-mq .lupeo-mq__phares a:hover,
.lupeo-mq .lupeo-mq__phares a:focus-visible {
	border-color: var(--mq-eclat);
	background: rgba(0, 211, 107, .14);
	color: #fff;
}

.lupeo-mq .lupeo-mq__chiffres--2 {
	max-width: 440px;
}

/* ---- Le mur des logos : trois colonnes qui défilent, à contre-sens ---- */
.lupeo-mq .lupeo-mq__mur {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	height: 560px;
	overflow: hidden;
	transform: rotate(-5deg);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.lupeo-mq .lupeo-mq__mur-piste {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lupeo-mq .lupeo-mq__mur-col--1 {
	padding-top: 60px;
}

.lupeo-mq .lupeo-mq__mur-plaque {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding: 18px 22px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}

.lupeo-mq .lupeo-mq__mur-plaque img {
	display: block;
	max-width: 86%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---- Toutes les marques ---- */
.lupeo-mq .lupeo-mq__marques {
	scroll-margin-top: 110px;
	padding-top: clamp(44px, 5vw, 76px);
	margin-bottom: clamp(32px, 4vw, 56px);
}

.lupeo-mq .lupeo-mq__grille-marques {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 16px;
}

.lupeo-mq a.lupeo-mq__marque {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--mq-trait);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--lp-ombre-1, 0 1px 2px rgba(10, 15, 13, .05));
	color: var(--mq-encre);
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.lupeo-mq a.lupeo-mq__marque:hover {
	color: var(--mq-encre);
	transform: translateY(-6px);
	border-color: rgba(0, 124, 117, .45);
	box-shadow: 0 26px 48px -26px rgba(1, 60, 56, .5), 0 2px 6px rgba(10, 15, 13, .05);
}

.lupeo-mq a.lupeo-mq__marque:focus-visible {
	outline: 2px solid var(--lp-green-600, #007C75);
	outline-offset: 3px;
}

.lupeo-mq .lupeo-mq__marque-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 124px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--lp-line-2, #EEF1F0);
	background: radial-gradient(72% 70% at 50% 45%, #fff 0%, #F4FAF7 65%, #EAF6F0 100%);
}

.lupeo-mq .lupeo-mq__marque-logo img {
	display: block;
	max-width: 78%;
	max-height: 62px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.lupeo-mq a.lupeo-mq__marque:hover .lupeo-mq__marque-logo img {
	transform: scale(1.07);
}

.lupeo-mq .lupeo-mq__marque-txt {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-align: center;
	color: var(--lp-green-800, #005F59);
}

.lupeo-mq .lupeo-mq__marque-corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.lupeo-mq .lupeo-mq__marque--sans-logo .lupeo-mq__ligne {
	justify-content: flex-end;
}

.lupeo-mq .lupeo-mq__marque-nom {
	min-width: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.lupeo-mq .lupeo-mq__marque-nb {
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--lp-ink-3, #64706B);
}

/* Les modèles phares tiennent sur UNE ligne, qui s'estompe à droite : un nom long (« Outsider E-Volution 8,5
   Phoenix ») ne grandit plus sa carte ni ne creuse un vide dans les autres de la rangée. */
.lupeo-mq .lupeo-mq__marque-modeles {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	margin-top: auto;
	padding-top: 4px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}

.lupeo-mq .lupeo-mq__marque-modeles span {
	flex: none;
	white-space: nowrap;
	padding: 3px 9px;
	border: 1px solid var(--lp-line, #E4E8E6);
	border-radius: 999px;
	background: var(--lp-surface-2, #F6F8F7);
	font-size: 12px;
	font-weight: 600;
	color: var(--lp-ink-2, #59635F);
}

.lupeo-mq a.lupeo-mq__marque:hover .lupeo-mq__fleche {
	border-color: var(--mq-eclat);
	background: var(--mq-eclat);
	color: var(--lp-green-400-ink, #06231A);
	transform: translateX(3px);
}

/* ---- Le chemin en trois étapes ---- */
.lupeo-mq .lupeo-mq__etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 clamp(32px, 4vw, 48px);
	padding: 0;
	list-style: none;
	counter-reset: lupeo-mq-etape;
}

.lupeo-mq .lupeo-mq__etapes li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 22px 22px 22px 74px;
	border-radius: 20px;
	background:
		radial-gradient(70% 140% at 0% 0%, rgba(0, 211, 107, .18) 0%, rgba(0, 211, 107, 0) 60%),
		linear-gradient(150deg, #0B1F1A 0%, #08231D 100%);
	color: #fff;
	counter-increment: lupeo-mq-etape;
}

.lupeo-mq .lupeo-mq__etapes li::before {
	content: counter(lupeo-mq-etape, decimal-leading-zero);
	content: counter(lupeo-mq-etape, decimal-leading-zero) / "";
	position: absolute;
	top: 20px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, #3BF09A 0%, #00B85D 100%);
	box-shadow: 0 0 0 4px rgba(0, 211, 107, .14);
	font-family: var(--lp-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 600;
	color: var(--lp-green-400-ink, #06231A);
}

.lupeo-mq .lupeo-mq__etapes b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.lupeo-mq .lupeo-mq__etapes span {
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

@media (prefers-reduced-motion: no-preference) {
	.lupeo-mq .lupeo-mq__mur-piste {
		animation: lupeo-mq-defile 48s linear infinite;
	}

	.lupeo-mq .lupeo-mq__mur-col--1 .lupeo-mq__mur-piste {
		animation-duration: 60s;
		animation-direction: reverse;
	}

	.lupeo-mq .lupeo-mq__mur-col--2 .lupeo-mq__mur-piste {
		animation-duration: 54s;
	}

	/* Au survol du mur, il ralentit jusqu'à s'arrêter : on peut lire les logos. */
	.lupeo-mq .lupeo-mq__mur:hover .lupeo-mq__mur-piste {
		animation-play-state: paused;
	}

	.lupeo-mq .lupeo-mq__recherche {
		animation: lupeo-mq-monte .8s cubic-bezier(.2, .7, .2, 1) .2s backwards;
	}
}

@keyframes lupeo-mq-monte {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

/* Deux passages identiques dans la piste : avancer d'un passage (la moitié, plus un demi-écart) boucle sans saut. */
@keyframes lupeo-mq-defile {
	to { transform: translateY(calc(-50% - 8px)); }
}

@media (max-width: 1099px) {
	.lupeo-mq .lupeo-mq__bandeau--racine .lupeo-mq__bandeau-in {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.lupeo-mq .lupeo-mq__mur {
		width: 100%;
		max-width: 720px;
		height: 300px;
		margin-inline: auto;
		transform: rotate(-3deg);
	}

	.lupeo-mq .lupeo-mq__mur-plaque {
		height: 92px;
	}
}

@media (max-width: 760px) {
	.lupeo-mq .lupeo-mq__etapes {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/* Le surtitre passe à la ligne comme un texte (en boîte flexible, chaque morceau partait dans sa colonne). */
	.lupeo-mq .lupeo-mq__bandeau--racine .lupeo-mq__contexte {
		display: inline-block;
		border-radius: 16px;
		line-height: 1.7;
	}

	.lupeo-mq .lupeo-mq__bandeau--racine .lupeo-mq__contexte i {
		display: inline-block;
		margin-right: 6px;
		vertical-align: 1px;
	}

	.lupeo-mq .lupeo-mq__recherche-champ input[type="search"] {
		height: 58px;
		padding-left: 52px;
		font-size: 16px;
	}

	.lupeo-mq .lupeo-mq__recherche-champ svg {
		left: 18px;
	}

	.lupeo-mq .lupeo-mq__mur {
		height: 220px;
		gap: 10px;
	}

	.lupeo-mq .lupeo-mq__mur-piste {
		gap: 10px;
	}

	.lupeo-mq .lupeo-mq__mur-plaque {
		height: 72px;
		padding: 12px 14px;
		border-radius: 16px;
	}

	.lupeo-mq .lupeo-mq__mur-plaque img {
		max-height: 40px;
	}

	.lupeo-mq .lupeo-mq__grille-marques {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.lupeo-mq .lupeo-mq__marque-logo {
		height: 92px;
		padding: 14px 16px;
	}

	.lupeo-mq .lupeo-mq__marque-logo img {
		max-height: 44px;
	}

	.lupeo-mq .lupeo-mq__marque-corps {
		padding: 12px;
	}

	.lupeo-mq .lupeo-mq__marque-nom {
		font-size: 16px;
	}

	.lupeo-mq .lupeo-mq__marque-modeles span:nth-child(3) {
		display: none;
	}
}


/* =========================================================
   Page des marques : la boîte de recherche est révélée par le script
   ========================================================= */
/* Sans espace réservé, sa révélation poussait les modèles phares de 88 px (décalage de mise en page de 0,026 sur ordinateur).
   Avec un script actif, la place est tenue dès le premier rendu ; sans script, le comportement ne change pas. */
@media (scripting: enabled) {
	.lupeo-mq .lupeo-mq__recherche[hidden] {
		display: block;
		visibility: hidden;
		min-height: 66px;
	}
}

@media (scripting: enabled) and (max-width: 767px) {
	.lupeo-mq .lupeo-mq__recherche[hidden] {
		min-height: 58px;
	}
}