/**
 * Boutique Lupéo — vignette produit (partagée par l'accueil, la boutique,
 * les pages catégorie et les produits liés) et sections de la page d'accueil.
 *
 * Les couleurs et les polices viennent des jetons du thème (--lupeo-*, définis
 * dans functions.php) ; les valeurs de repli permettent à la page de rester
 * correcte même si le thème enfant est désactivé.
 *
 * Principe de mise en page : chaque vignette a un cadre photo à hauteur fixe
 * et un rail de marque à hauteur fixe. Quelles que soient les images des
 * fournisseurs, les logos, les titres, les prix et les boutons tombent tous à
 * la même hauteur d'une colonne à l'autre.
 */

/* =========================================================
   1. Le gabarit d'accueil sort du conteneur du thème
   ========================================================= */
.page-template-lupeo-accueil main,
.page-template-lupeo-accueil .site-main {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

:root {
	--lupeo-r-s: 10px;
	--lupeo-r-m: 14px;
	--lupeo-r-l: 20px;
	--lupeo-ombre-1: 0 1px 2px rgba(26, 26, 26, .05), 0 6px 18px -10px rgba(26, 26, 26, .18);
	--lupeo-ombre-2: 0 2px 6px rgba(26, 26, 26, .06), 0 22px 44px -22px rgba(0, 90, 85, .34);
}

.lupeo-home {
	color: var(--lupeo-ink, #1A1A1A);
	overflow-x: clip;
}

.lupeo-wrap {
	width: min(100% - 40px, 1240px);
	margin-inline: auto;
}

/* =========================================================
   2. Typographie
   ========================================================= */
.lupeo-home h1,
.lupeo-home h2,
.lupeo-home h3 {
	font-family: var(--theme-font-family-heading, Manrope, Inter, sans-serif);
	font-weight: 800;
	color: var(--lupeo-ink, #1A1A1A);
	text-wrap: balance;
	margin: 0;
}

.lupeo-hero__titre {
	font-size: clamp(34px, 5.2vw, 58px);
	line-height: 1.04;
	letter-spacing: -.025em;
}

.lupeo-home h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.12;
	letter-spacing: -.02em;
}

.lupeo-home h3 {
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -.01em;
	font-weight: 700;
}

.lupeo-sur-titre {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lupeo-teal, #007C75);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.lupeo-sur-titre::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	flex: none;
}

.lupeo-sur-titre--clair {
	color: rgba(255, 255, 255, .78);
}

.lupeo-chapo,
.lupeo-hero__chapo {
	font-size: clamp(16px, 1.5vw, 18.5px);
	color: var(--lupeo-ink-2, #4A453E);
	max-width: 56ch;
	line-height: 1.62;
	margin: 16px 0 0;
}

.lupeo-chapo {
	margin-top: 12px;
}

/* =========================================================
   3. Boutons et liens
   ========================================================= */
.lupeo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 15px 24px;
	border-radius: var(--lupeo-r-s);
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}

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

.lupeo-btn--teal {
	background: var(--lupeo-teal, #007C75);
	color: #fff;
	box-shadow: 0 1px 0 var(--lupeo-teal-deep, #005A55);
}

.lupeo-btn--teal:hover {
	background: var(--lupeo-teal-deep, #005A55);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -12px rgba(0, 90, 85, .7);
}

.lupeo-btn--ligne {
	border-color: var(--lupeo-line, #E6DFD4);
	background: #fff;
	color: var(--lupeo-ink, #1A1A1A);
}

.lupeo-btn--ligne:hover {
	border-color: var(--lupeo-teal, #007C75);
	color: var(--lupeo-teal, #007C75);
	transform: translateY(-2px);
}

.lupeo-home .lupeo-btn--blanc {
	background: #fff;
	color: var(--lupeo-teal-deep, #005A55);
}

.lupeo-home .lupeo-btn--blanc:hover {
	background: var(--lupeo-cream, #FAF7F2);
	color: var(--lupeo-teal-deep, #005A55);
	transform: translateY(-2px);
}

.lupeo-home .lupeo-btn--sur-teal {
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.lupeo-home .lupeo-btn--sur-teal:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transform: translateY(-2px);
}

.lupeo-lien {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lupeo-teal, #007C75);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1.5px solid transparent;
	transition: border-color .18s ease, gap .18s ease;
}

.lupeo-lien:hover {
	border-color: currentColor;
	gap: 11px;
}

.lupeo-lien .lupeo-i {
	width: 15px;
	height: 15px;
}

/* Le jeu d'icônes commun de la boutique. */
.lupeo-i {
	width: 16px;
	height: 16px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =========================================================
   4. Bandeau d'ouverture
   ========================================================= */
.lupeo-hero {
	position: relative;
	padding: clamp(40px, 6vw, 76px) 0 0;
	background: var(--lupeo-cream, #FAF7F2);
	overflow: hidden;
}

.lupeo-hero__halo {
	position: absolute;
	right: -14%;
	top: -28%;
	width: min(76vw, 940px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 34%, #F1F7F6 0%, rgba(226, 239, 238, .55) 46%, rgba(250, 247, 242, 0) 70%);
	pointer-events: none;
}

.lupeo-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}

.lupeo-hero__titre em {
	font-style: normal;
	color: var(--lupeo-teal, #007C75);
	position: relative;
	white-space: nowrap;
}

.lupeo-hero__titre em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .06em;
	height: .11em;
	border-radius: 99px;
	background: currentColor;
	opacity: .22;
}

.lupeo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.lupeo-hero__preuves {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.lupeo-hero__preuves li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--lupeo-ink-2, #4A453E);
	margin: 0;
}

.lupeo-hero__preuves .lupeo-i {
	width: 17px;
	height: 17px;
	color: var(--lupeo-teal, #007C75);
}

.lupeo-hero__scene {
	position: relative;
	padding: 10px 0 clamp(28px, 5vw, 52px);
}

.lupeo-hero__disque {
	position: absolute;
	inset: auto 6% 14% 6%;
	aspect-ratio: 1 / .82;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 45%, var(--lupeo-teal-soft, #E2EFEE) 0%, rgba(226, 239, 238, .35) 55%, rgba(226, 239, 238, 0) 72%);
}

.lupeo-hero__photo {
	position: relative;
	margin: 0;
}

.lupeo-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lupeo-r-l);
	filter: drop-shadow(0 34px 46px rgba(0, 90, 85, .16));
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.lupeo-hero__photo a:hover img {
	transform: translateY(-6px);
}

.lupeo-hero__marque {
	position: absolute;
	right: 2px;
	top: 8%;
	background: #fff;
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-m);
	padding: 11px 15px;
	box-shadow: var(--lupeo-ombre-1);
	line-height: 0;
}

.lupeo-hero__marque img {
	height: auto;
	width: auto;
	max-height: 30px;
	max-width: 110px;
	object-fit: contain;
}

/* L'étiquette déborde volontairement sous le cadre : posée à l'intérieur,
   elle masquait le plateau de la trottinette. */
.lupeo-hero__prix {
	position: absolute;
	left: -10px;
	bottom: -18px;
	background: #fff;
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-m);
	padding: 13px 16px 12px;
	box-shadow: var(--lupeo-ombre-2);
	min-width: 172px;
	display: grid;
	gap: 3px;
}

.lupeo-hero__prix-nom {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-hero__prix-val,
.lupeo-hero__prix-val .amount,
.lupeo-hero__prix-val bdi {
	font-family: var(--theme-font-family-heading, Manrope, Inter, sans-serif);
	font-weight: 800;
	font-size: 25px;
	letter-spacing: -.02em;
	color: var(--lupeo-ink, #1A1A1A);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.lupeo-hero__prix-val .woocommerce-Price-taxLabel,
.lupeo-card__prix .woocommerce-Price-taxLabel {
	font-family: var(--theme-font-family, Inter, sans-serif);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--lupeo-mute, #6F6A62);
	letter-spacing: 0;
	margin-left: 5px;
}

/* Marquage au sol : le fil conducteur de la page. */
.lupeo-route {
	display: block;
	height: 2px;
	margin-top: 6px;
	background: repeating-linear-gradient(to right, var(--lupeo-line, #E6DFD4) 0 22px, transparent 22px 40px);
}

/* =========================================================
   5. Réassurance
   ========================================================= */
.lupeo-confiance {
	background: var(--lupeo-cream, #FAF7F2);
	padding: clamp(30px, 4vw, 46px) 0;
}

.lupeo-confiance__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.lupeo-confiance__item {
	background: #fff;
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-m);
	padding: 19px 18px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 14px;
	align-items: start;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.lupeo-confiance__item:hover {
	border-color: var(--lupeo-teal, #007C75);
	transform: translateY(-3px);
	box-shadow: var(--lupeo-ombre-1);
}

.lupeo-confiance__ico {
	grid-row: span 2;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--lupeo-teal-soft, #E2EFEE);
	color: var(--lupeo-teal, #007C75);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lupeo-confiance__ico .lupeo-i {
	width: 21px;
	height: 21px;
}

.lupeo-confiance__item b {
	font-size: 14.5px;
	font-weight: 600;
}

.lupeo-confiance__item span:last-child {
	font-size: 13px;
	color: var(--lupeo-mute, #6F6A62);
	line-height: 1.5;
}

/* =========================================================
   6. Sections
   ========================================================= */
.lupeo-section {
	padding: clamp(42px, 5.5vw, 74px) 0;
	background: var(--lupeo-cream, #FAF7F2);
}

.lupeo-section--blanche {
	background: #fff;
	border-block: 1px solid var(--lupeo-line, #E6DFD4);
}

.lupeo-entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.lupeo-grille {
	display: grid;
	gap: 22px;
}

.lupeo-grille--trois {
	grid-template-columns: repeat(3, 1fr);
}

.lupeo-grille--quatre {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* =========================================================
   7. Vignette produit
   ========================================================= */
.lupeo-card {
	background: #fff;
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-l);
	overflow: hidden;
	height: 100%;
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), box-shadow .26s ease, border-color .26s ease;
}

.lupeo-card:hover {
	transform: translateY(-6px);
	border-color: #D8CFC0;
	box-shadow: var(--lupeo-ombre-2);
}

.lupeo-card .lupeo-card__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Cadre photo à hauteur fixe : c'est lui qui aligne toute la grille. */
.lupeo-vignette {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #fff;
	border-bottom: 1px solid var(--lupeo-line-2, #F0EBE3);
	overflow: hidden;
}

.lupeo-card--piece .lupeo-vignette {
	aspect-ratio: 1;
}

.lupeo-vignette__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

.lupeo-vignette__img--dos {
	opacity: 0;
}

.lupeo-card:hover .lupeo-vignette__img--dos {
	opacity: 1;
}

/* La photo de face ne s'efface que s'il y a bien une seconde image derrière —
   sinon un produit à une seule photo deviendrait blanc au survol. */
.lupeo-card:hover .lupeo-vignette--double .lupeo-vignette__img--face {
	opacity: 0;
}

.lupeo-card:hover .lupeo-vignette__img {
	transform: scale(1.045);
}

.lupeo-vignette__vide {
	position: absolute;
	inset: 0;
	background: var(--lupeo-line-2, #F0EBE3);
}

.lupeo-card__pastille {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--lupeo-teal, #007C75);
	color: #fff;
}

/* Rail de marque à hauteur imposée : tous les logos s'alignent. */
.lupeo-marque {
	height: 52px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	border-bottom: 1px solid var(--lupeo-line-2, #F0EBE3);
}

.lupeo-card--piece .lupeo-marque {
	height: 44px;
	padding: 0 16px;
}

/* Même écueil que sur la fiche : un logo carré tombait à 26 × 26 px dans un
   rail de 52. La hauteur monte, la largeur reste celle d'avant — un logo
   horizontal garde donc exactement l'encombrement validé. */
.lupeo-marque .lupeo-marque__logo {
	max-height: 34px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	object-position: left center;
}

/* Le rail des pièces est plus bas (44 px) : on laisse la marge de respiration. */
.lupeo-card--piece .lupeo-marque .lupeo-marque__logo {
	max-height: 28px;
}

.lupeo-marque__txt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lupeo-teal, #007C75);
	line-height: 1.3;
}

.lupeo-card__corps {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
}

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

.lupeo-puce {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lupeo-teal-deep, #005A55);
	background: var(--lupeo-teal-soft, #E2EFEE);
	border-radius: 999px;
	padding: 5px 11px;
}

.lupeo-puce .lupeo-i {
	width: 13px;
	height: 13px;
}

/* Deux lignes réservées, même pour un titre court : sans cela les prix ne
   tombent pas à la même hauteur d'une colonne à l'autre. */
.lupeo-card .lupeo-card__titre {
	font-family: var(--theme-font-family, Inter, sans-serif);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.38;
	margin: 0;
	min-height: calc(2 * 1.38em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}

.lupeo-card--piece .lupeo-card__titre {
	font-size: 14.5px;
	line-height: 1.4;
	min-height: calc(2 * 1.4em);
}

.lupeo-card:hover .lupeo-card__titre {
	color: var(--lupeo-teal, #007C75);
}

.lupeo-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px dashed var(--lupeo-line, #E6DFD4);
	font-size: 12.5px;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-specs li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.lupeo-specs .lupeo-i {
	width: 14px;
	height: 14px;
	color: var(--lupeo-teal, #007C75);
}

.lupeo-compat {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--lupeo-ink-2, #4A453E);
	background: var(--lupeo-cream, #FAF7F2);
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: 9px;
	padding: 8px 10px;
	line-height: 1.45;
	min-height: 52px;
	margin: 0;
}

.lupeo-compat .lupeo-i {
	width: 14px;
	height: 14px;
	color: var(--lupeo-teal, #007C75);
	margin-top: 1px;
}

.lupeo-compat b {
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
}

.lupeo-card__pied {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lupeo-card__prix,
.lupeo-card__prix .amount,
.lupeo-card__prix bdi {
	font-family: var(--theme-font-family-heading, Manrope, Inter, sans-serif);
	font-weight: 800;
	font-size: 23px;
	letter-spacing: -.02em;
	color: var(--lupeo-ink, #1A1A1A);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.lupeo-card--piece .lupeo-card__prix,
.lupeo-card--piece .lupeo-card__prix .amount,
.lupeo-card--piece .lupeo-card__prix bdi {
	font-size: 18px;
}

.lupeo-card__prix del {
	font-size: .6em;
	opacity: .6;
	font-weight: 600;
}

.lupeo-card__cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--lupeo-ink, #1A1A1A);
	border: 1.5px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-s);
	padding: 12px 17px;
	line-height: 1;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.lupeo-card:hover .lupeo-card__cta {
	border-color: var(--lupeo-teal, #007C75);
	background: var(--lupeo-teal, #007C75);
	color: #fff;
}

.lupeo-card--piece .lupeo-card__cta {
	font-size: 13px;
	padding: 10px 14px;
}

/* Carte d'appel : occupe les colonnes restantes tant que le catalogue n'est
   pas assez fourni pour remplir la ligne. Elle disparaît toute seule ensuite. */
.lupeo-home .lupeo-appel {
	grid-column: span var(--lupeo-restant, 1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 30px 28px;
	border: 1.5px dashed var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-l);
	background: var(--lupeo-cream, #FAF7F2);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: border-color .24s ease, background-color .24s ease, transform .24s cubic-bezier(.2, .7, .3, 1);
}

.lupeo-home .lupeo-appel:hover {
	border-color: var(--lupeo-teal, #007C75);
	background: #fff;
	transform: translateY(-4px);
}

.lupeo-appel__ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--lupeo-teal-soft, #E2EFEE);
	color: var(--lupeo-teal, #007C75);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lupeo-appel__ico .lupeo-i {
	width: 23px;
	height: 23px;
}

.lupeo-appel p {
	margin: 0;
	font-size: 14px;
	color: var(--lupeo-mute, #6F6A62);
	line-height: 1.55;
	max-width: 42ch;
}

.lupeo-appel .lupeo-lien {
	align-self: flex-start;
}

@media (max-width: 620px) {
	.lupeo-home .lupeo-appel {
		grid-column: span 1;
	}
}

/* =========================================================
   8. Rayons
   ========================================================= */
.lupeo-home .lupeo-rayon {
	position: relative;
	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: var(--lupeo-r-l);
	background: #fff;
	padding: 24px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 210px;
	overflow: hidden;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease, border-color .24s ease;
}

.lupeo-rayon::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: #F1F7F6;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.lupeo-home .lupeo-rayon:hover {
	transform: translateY(-5px);
	border-color: var(--lupeo-teal, #007C75);
	box-shadow: var(--lupeo-ombre-1);
}

.lupeo-rayon:hover::after {
	transform: scale(1.5);
}

.lupeo-rayon__ico {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--lupeo-teal, #007C75);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lupeo-rayon__ico .lupeo-i {
	width: 23px;
	height: 23px;
}

.lupeo-rayon h3,
.lupeo-rayon p,
.lupeo-rayon .lupeo-lien {
	position: relative;
	z-index: 1;
}

.lupeo-rayon p {
	margin: 0;
	font-size: 13.5px;
	color: var(--lupeo-mute, #6F6A62);
	line-height: 1.5;
	flex: 1;
}

.lupeo-rayon .lupeo-lien {
	font-size: 13.5px;
	align-self: flex-start;
}

/* =========================================================
   9. Aide
   ========================================================= */
.lupeo-aide {
	background: var(--lupeo-teal-deep, #005A55);
	color: #fff;
	border-radius: var(--lupeo-r-l);
	overflow: hidden;
	position: relative;
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	align-items: center;
}

.lupeo-aide::before {
	content: "";
	position: absolute;
	left: 38%;
	top: -60%;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 68%);
}

.lupeo-aide__txt {
	padding: clamp(28px, 4vw, 44px);
	position: relative;
}

.lupeo-home .lupeo-aide__txt h2 {
	color: #fff;
}

.lupeo-aide__txt p {
	color: rgba(255, 255, 255, .84);
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: 15.5px;
	line-height: 1.6;
}

.lupeo-aide__txt p b {
	color: #fff;
}

.lupeo-aide__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.lupeo-aide__cote {
	padding: clamp(20px, 3vw, 38px);
	position: relative;
}

.lupeo-aide__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.lupeo-aide__liste li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .9);
	line-height: 1.45;
	margin: 0;
}

.lupeo-aide__liste .lupeo-i {
	width: 17px;
	height: 17px;
	margin-top: 2px;
	opacity: .8;
}

/* =========================================================
   10. Apparition au défilement
   ========================================================= */
/* C'est le script qui pose la classe `lupeo-anime` : sans JavaScript, rien
   n'est masqué et la page reste entièrement lisible. */
.lupeo-home.lupeo-anime .lupeo-monte {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

.lupeo-home.lupeo-anime .lupeo-monte.est-vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lupeo-home *,
	.lupeo-home *::before,
	.lupeo-home *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}

	.lupeo-home.lupeo-anime .lupeo-monte {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   11. Adaptations
   ========================================================= */
@media (max-width: 1080px) {
	.lupeo-grille--trois,
	.lupeo-grille--quatre {
		grid-template-columns: repeat(2, 1fr);
	}

	.lupeo-confiance__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	.lupeo-hero__in {
		grid-template-columns: 1fr;
	}

	.lupeo-hero__scene {
		order: -1;
		max-width: 520px;
		margin-inline: auto;
		width: 100%;
	}

	.lupeo-aide {
		grid-template-columns: 1fr;
	}

	.lupeo-aide__cote {
		padding-top: 0;
	}
}

@media (max-width: 620px) {
	.lupeo-grille--trois,
	.lupeo-grille--quatre,
	.lupeo-confiance__grille {
		grid-template-columns: 1fr;
	}

	.lupeo-hero__prix {
		left: 0;
		bottom: -14px;
		min-width: 0;
	}

	.lupeo-entete {
		align-items: flex-start;
	}
}