/*
 * LP Pré-accès Automne-Hiver 2026 — reprise fidèle de la maquette.
 *
 * ISOLATION, DANS LES DEUX SENS
 *
 * Vers l'extérieur : chaque sélecteur est préfixé par #lpg-ah26. Aucune règle
 * ne peut donc atteindre le header ou le footer du thème.
 *
 * Vers l'intérieur : le thème applique ses propres règles à nos éléments (via
 * des sélecteurs de classe, spécificité ~0,0,x,y). Le bloc « neutralisation »
 * ci-dessous les écrase en utilisant #lpg-ah26 + sélecteur d'élément
 * (spécificité 1,0,0,1), qui gagne sur toute règle de classe du thème sans
 * recourir à !important. Toutes les propriétés héritables sont redéclarées
 * explicitement plutôt que laissées à l'héritage.
 */

/* ------------------------------------------------------------------ */
/*  Neutralisation de l'héritage du thème                              */
/* ------------------------------------------------------------------ */

#lpg-ah26 {
	/* Palette de la maquette */
	--or: #D9A93B;
	--or-fonce: #C0902B;
	--bronze: #B0763F;
	--bronze-fonce: #8E5C2C;
	--encre: #2E2B26;
	--gris: #55504A;
	--gris-clair: #8C857B;
	--gris-note: #A29B90;
	--creme: #FCF5EA;
	--bord: #F0EBE2;
	--bord-carte: #EFE9DF;
	--bord-champ: #DDD6CA;
	--bord-compteur: #EFE8DC;
	--separateur: #F2EDE4;
	--jaune-bandeau: #E9BB4C;
	--vert: #4E7A3E;
	--rouge: #B3422B;

	/*
	 * Teintes relevées sur la maquette que le client a fournie avec ses
	 * retours : le rouge brique de « ouvert ! », la terre cuite des boutons
	 * d'achat, le brun profond et l'or du bloc de compte à rebours final.
	 */
	--rouge-titre: #9E2B25;
	--terre: #C4501E;
	--terre-fonce: #A63F13;
	--terre-pale: #FEF5F0;
	--brun: #3B2A1E;
	--or-vif: #F2C75C;
	--or-vif-fonce: #E7B63C;
	--creme-ouv: #F7EFD6;
	--creme-doux: #FBF4E2;
	--creme-texte: #F7F1E4;
	--degrade-chaud: linear-gradient(180deg, #FFFFFF 0%, #FDF8F0 62%, #FBF3E7 100%);
	--fond-collection: #FDFAF5;

	--serif: Lora, Georgia, "Times New Roman", serif;
	--sans: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

	/* Base explicite : rien n'est laissé à l'héritage du thème */
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--encre);
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;

	/*
	 * Ni isolation ni overflow sur ce conteneur, et c'est délibéré.
	 *
	 * `isolation: isolate` créerait un contexte d'empilement : nos z-index
	 * resteraient confinés à l'intérieur du bloc, et le footer du thème —
	 * postérieur dans le DOM — se peindrait par-dessus les modales. C'est
	 * exactement ce qui se produisait.
	 *
	 * Un `overflow` autre que visible ferait rogner les descendants en
	 * position fixed par plusieurs navigateurs : les deux overlays et le CTA
	 * collant en font partie.
	 *
	 * Les couches vivent donc dans le contexte racine, au-dessus du thème
	 * (qui monte jusqu'à 100 000 000).
	 */
	--z-collant: 999999998;
	--z-fiche: 1000000000;
	--z-form: 1000000001;
}

/* ------------------------------------------------------------------ */
/*  Variante B2B                                                       */
/* ------------------------------------------------------------------ */

/*
 * Seule la palette bascule : la structure, les espacements et la typographie
 * sont identiques. Les bleus sont repris des variables du thème
 * pro.lepetitgrassois.com — #7E9CD6, #AFCBE7, #F2F9FF, #C7CEDD.
 *
 * Une nuance assumée : #7E9CD6 sert d'accent clair, pas de fond de bouton.
 * Du texte blanc sur ce bleu plafonne à 2,9:1 de contraste, très en dessous
 * du minimum lisible. Les éléments actionnables et les petits textes en
 * capitales utilisent donc #4A6BA0, dérivé plus sombre du même bleu, qui
 * atteint 5,6:1 sur blanc.
 */
#lpg-ah26.lpg--b2b {
	--or: #4A6BA0;
	--or-fonce: #3A5788;
	--bronze: #4A6BA0;
	--bronze-fonce: #3A5788;
	--jaune-bandeau: #AFCBE7;
	--creme: #F2F9FF;
	--bord: #E4EDF7;
	--bord-carte: #E1EAF5;
	--bord-champ: #CBD7E6;
	--bord-compteur: #DFE9F5;
	--separateur: #EAF1F9;
	--degrade-chaud: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 62%, #F2F9FF 100%);
	--fond-collection: #F8FBFE;

	/* Équivalents bleus des teintes de la maquette, mêmes rôles. */
	--rouge-titre: #26456F;
	--terre: #3A5788;
	--terre-fonce: #2C4470;
	--terre-pale: #F2F7FE;
	--brun: #22334D;
	--or-vif: #AFCBE7;
	--or-vif-fonce: #93B6DA;
	--creme-ouv: #EFF6FE;
	--creme-doux: #F6FAFE;
	--creme-texte: #F2F9FF;
}

/* L'accent clair du site garde un rôle décoratif, sans porter de texte. */
#lpg-ah26.lpg--b2b .lpg-frag:hover,
#lpg-ah26.lpg--b2b .lpg-frag:focus-visible { border-color: #7E9CD6; }

#lpg-ah26.lpg--b2b .lpg-promesse__num { color: #4A6BA0; }

/*
 * Sur fond bleu profond, l'or de la maquette B2C n'a plus sa place : le
 * compteur final emprunte le bleu clair du thème professionnel, dont le
 * contraste sur #22334D reste largement lisible.
 */
#lpg-ah26.lpg--b2b .lpg-fin__panneau::before {
	background-image: radial-gradient(rgba(175, 203, 231, 0.28) 1.4px, transparent 1.4px);
}
#lpg-ah26.lpg--b2b .lpg-ouv__intro { color: #3F4A5C; }
#lpg-ah26.lpg--b2b .lpg-rarete__point { box-shadow: 0 0 0 4px rgba(38, 69, 111, 0.14); }
#lpg-ah26.lpg--b2b .lpg-pastille { box-shadow: 0 12px 26px -14px rgba(38, 69, 111, 0.6); }

#lpg-ah26 div,
#lpg-ah26 section,
#lpg-ah26 main,
#lpg-ah26 article,
#lpg-ah26 header,
#lpg-ah26 h1,
#lpg-ah26 h2,
#lpg-ah26 h3,
#lpg-ah26 p,
#lpg-ah26 span,
#lpg-ah26 a,
#lpg-ah26 strong,
#lpg-ah26 form,
#lpg-ah26 label,
#lpg-ah26 input,
#lpg-ah26 button,
#lpg-ah26 img {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	text-shadow: none;
	max-width: none;
	min-width: 0;
	float: none;
	position: static;
	transform: none;
}

#lpg-ah26 *,
#lpg-ah26 *::before,
#lpg-ah26 *::after {
	box-sizing: border-box;
}

/*
 * L'attribut hidden doit gagner sur tout.
 *
 * Le display:none que le navigateur associe à [hidden] a une spécificité
 * nulle : la moindre règle qui déclare un display l'écrase. Nos overlays sont
 * en display:flex, ils resteraient donc affichés en permanence malgré leur
 * attribut hidden. Cette règle est le seul !important du fichier, et il est
 * nécessaire : masquer est un état, pas une suggestion de mise en page.
 */
#lpg-ah26 [hidden] { display: none !important; }

#lpg-ah26 img {
	display: block;
	max-width: 100%;
	height: auto;
}

#lpg-ah26 button,
#lpg-ah26 input {
	font-family: var(--sans);
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

#lpg-ah26 button { cursor: pointer; }

#lpg-ah26 input::placeholder { color: #A8A29A; opacity: 1; }

#lpg-ah26 a {
	color: var(--bronze);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#lpg-ah26 a:hover { color: var(--bronze-fonce); }

#lpg-ah26 a:focus-visible,
#lpg-ah26 button:focus-visible,
#lpg-ah26 input:focus-visible,
#lpg-ah26 [tabindex]:focus-visible {
	outline: 2px solid var(--encre);
	outline-offset: 3px;
}

@keyframes lpg-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/*  Typographie et blocs communs                                       */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

#lpg-ah26 .lpg-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 0 0 20px;
}

#lpg-ah26 .lpg-h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.018em;
	margin: 0 0 28px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

#lpg-ah26 .lpg-h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(29px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

#lpg-ah26 .lpg-h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 12px;
	overflow-wrap: break-word;
}

#lpg-ah26 .lpg-texte {
	font-size: 16px;
	line-height: 1.68;
	color: var(--gris);
	margin: 0;
}

#lpg-ah26 .lpg-texte--mesure { max-width: 54ch; margin-bottom: 16px; }
#lpg-ah26 .lpg-texte--espace { margin-bottom: 32px; }

#lpg-ah26 .lpg-note {
	font-size: 13px;
	line-height: 1.65;
	color: var(--gris-clair);
	margin: 0;
}
#lpg-ah26 .lpg-note--centre { text-align: center; font-size: 12.5px; }

#lpg-ah26 .lpg-legale {
	font-size: 13px;
	line-height: 1.65;
	color: var(--gris-clair);
	margin: 28px 0 0;
}

#lpg-ah26 .lpg-barre { text-decoration: line-through; }

/* ------------------------------------------------------------------ */
/*  Boutons                                                            */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: 2px;
	font-family: var(--sans);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

#lpg-ah26 .lpg-btn--or { background: var(--or); color: #FFFFFF; }
#lpg-ah26 .lpg-btn--or:hover { background: var(--or-fonce); color: #FFFFFF; }

#lpg-ah26 .lpg-btn--large { font-size: 15.5px; padding: 18px 38px; }

#lpg-ah26 .lpg-btn--pleine {
	display: flex;
	width: 100%;
	font-size: 15px;
	padding: 17px 20px;
	min-height: 50px;
}

#lpg-ah26 .lpg-btn--soumettre { font-size: 15.5px; padding: 20px; }

#lpg-ah26 .lpg-btn[aria-busy="true"] { background: var(--or-fonce); }
#lpg-ah26 .lpg-btn[disabled] { cursor: not-allowed; }

#lpg-ah26 .lpg-lien-souligne {
	margin-top: 10px;
	color: var(--encre);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid #DCD4C8;
	padding-bottom: 4px;
}
#lpg-ah26 .lpg-lien-souligne:hover { color: var(--encre); border-bottom-color: var(--encre); }

/* ------------------------------------------------------------------ */
/*  Bandeau campagne                                                   */
/* ------------------------------------------------------------------ */

/* Bandeau d'aperçu administrateur : délibérément hors charte, pour qu'on ne
   puisse pas le confondre avec un élément de la page. */
#lpg-ah26 .lpg-apercu {
	background: #2E2B26;
	color: #FFFFFF;
	padding: 12px 24px;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
}
#lpg-ah26 .lpg-apercu strong { color: var(--jaune-bandeau); }
#lpg-ah26 .lpg-apercu a { color: #FFFFFF; margin-left: 8px; }

#lpg-ah26 .lpg-bandeau {
	background: var(--jaune-bandeau);
	color: var(--encre);
	padding: 12px 24px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.5;
}

#lpg-ah26 .lpg-bandeau a {
	color: var(--encre);
	font-weight: 700;
}

/* L'emoji ne suit ni la casse ni l'interlettrage de l'intitulé : il est posé
   à côté, à sa taille propre. Pile de fontes système, aucune marque n'en a. */
#lpg-ah26 .lpg-eyebrow__emoji {
	display: inline-block;
	margin-left: 6px;
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: -1px;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ------------------------------------------------------------------ */
/*  Hero                                                               */
/* ------------------------------------------------------------------ */

/*
 * « Trop de marge », disait le client du hero précédent, qui empilait tout sur
 * une colonne centrée. Deux colonnes règlent la remarque et logent au passage le
 * formulaire dans la page, son autre demande : la hauteur totale baisse d'un
 * bon tiers sans rien retirer.
 */
#lpg-ah26 .lpg-hero {
	background: var(--degrade-chaud);
	padding: clamp(44px, 5.5vw, 76px) 24px clamp(52px, 6.5vw, 88px);
}

#lpg-ah26 .lpg-hero__duo {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(330px, 0.98fr);
	gap: clamp(34px, 4.5vw, 72px);
	align-items: center;
	position: relative;
	z-index: 1;
}

#lpg-ah26 .lpg-hero .lpg-eyebrow { margin-bottom: 16px; }

#lpg-ah26 .lpg-hero--duo .lpg-h1 {
	font-size: clamp(32px, 4vw, 55px);
	line-height: 1.04;
	margin-bottom: 18px;
}

/* Seconde ligne du titre en italique rouge, comme sur la maquette client. */
#lpg-ah26 .lpg-hero--duo .lpg-h1 em {
	display: block;
	font-style: italic;
	color: var(--rouge-titre);
}

#lpg-ah26 .lpg-accent {
	color: var(--rouge-titre);
	font-weight: 700;
	white-space: nowrap;
}

/* Rareté : « ajouter la rareté “disponible uniquement pour les 200 premières
   personnes” ». Annoncée, jamais simulée par un faux décompte. */
#lpg-ah26 .lpg-rarete {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #FFFFFF;
	border: 1px solid var(--bord-carte);
	border-radius: 100px;
	padding: 8px 17px 8px 13px;
	font-size: 13px;
	color: var(--gris);
	margin: 0 0 20px;
}
#lpg-ah26 .lpg-rarete strong { color: var(--encre); font-weight: 700; }

#lpg-ah26 .lpg-rarete__point {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rouge-titre);
	box-shadow: 0 0 0 4px rgba(158, 43, 37, 0.13);
	flex: none;
}

/* Carte du formulaire, posée dans le hero. */
#lpg-ah26 .lpg-hero__carte {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--bord-carte);
	border-radius: 6px;
	padding: clamp(22px, 2.6vw, 34px);
	box-shadow: 0 18px 48px -28px rgba(46, 43, 38, 0.32);
	scroll-margin-top: 96px;
}

/* Pastille de remise : le client trouvait l'offre « pas assez visible ». */
#lpg-ah26 .lpg-pastille {
	position: absolute;
	z-index: 2;
	/*
	 * Posée à cheval sur l'angle, et surtout assez haut pour ne pas mordre sur la
	 * première ligne de champs — c'est le défaut que le client relevait.
	 *
	 * Les valeurs sont fixes plutôt que liées à la largeur d'écran : le champ
	 * « Prénom » commence à une distance constante du haut de la carte, ce n'est
	 * donc pas la fenêtre qui doit dicter le retrait. Un palier plus bas rentre la
	 * pastille là où la section, qui rogne ce qui dépasse, la couperait.
	 *
	 * Cercle un peu réduit : moins large, il déborde moins tout en gardant
	 * « avant-première » à l'aise, la corde du cercle se resserrant vite dès qu'on
	 * s'écarte du centre.
	 */
	top: -54px;
	right: -42px;
	width: 112px;
	height: 112px;
	padding: 0 11px;
	border-radius: 50%;
	background: var(--rouge-titre);
	color: #FFF6EC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	transform: rotate(-9deg);
	box-shadow: 0 12px 26px -14px rgba(158, 43, 37, 0.6);
}

#lpg-ah26 .lpg-pastille__haut,
#lpg-ah26 .lpg-pastille__bas {
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0.86;
	line-height: 1.3;
	/* Une césure ici couperait « avant-première » en deux : la taille est
	   choisie pour que le mot tienne, il ne doit donc jamais se replier. */
	white-space: nowrap;
}

#lpg-ah26 .lpg-pastille__haut {
	font-size: 8.5px;
	letter-spacing: 0.12em;
}

/*
 * Plus petit et moins espacé que l'intitulé du haut, parce qu'il est plus long
 * et surtout plus bas : la corde du cercle s'y resserre, la place utile n'est
 * pas la même en haut et en bas.
 */
#lpg-ah26 .lpg-pastille__bas {
	font-size: 7px;
	letter-spacing: 0.05em;
}

#lpg-ah26 .lpg-pastille__valeur {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1;
	padding: 2px 0;
}

/* Dans le hero, le compteur cesse d'être un bloc centré autonome. */
#lpg-ah26 .lpg-hero--duo .lpg-compteur {
	max-width: none;
	margin: 0 0 22px;
	padding: 20px 22px 18px;
}
#lpg-ah26 .lpg-hero--duo .lpg-compteur__label { margin-bottom: 16px; }
#lpg-ah26 .lpg-hero--duo .lpg-compteur__valeur { font-size: clamp(27px, 3.2vw, 40px); }
#lpg-ah26 .lpg-hero--duo .lpg-compteur__echeance { margin-top: 16px; }
#lpg-ah26 .lpg-hero--duo .lpg-dateline { margin-bottom: 20px; }
#lpg-ah26 .lpg-formbloc--hero .lpg-form { gap: 17px; }
#lpg-ah26 .lpg-formbloc--hero .lpg-alerte { margin-bottom: 18px; }

#lpg-ah26 .lpg-intro {
	font-size: clamp(17px, 1.4vw, 18.5px);
	line-height: 1.6;
	color: var(--gris);
	margin: 0 auto 14px;
	max-width: 60ch;
	text-wrap: pretty;
}

#lpg-ah26 .lpg-dateline {
	font-size: 16px;
	font-weight: 700;
	color: var(--encre);
	margin: 0 auto 40px;
}

/* ------------------------------------------------------------------ */
/*  Décors : éléments aquarelle                                        */
/* ------------------------------------------------------------------ */

/*
 * Le client a écarté les pyramides olfactives du décor — « notamment celle du
 * croissant qui est trop explicite » — et demandé « simplement des éléments en
 * aquarelles rappelant l'hiver et contenu dans nos parfums ». Ces visuels sont
 * les colonnes d'ingrédients des éclatés de la marque, détourées de leur fond.
 *
 * Purement ornementaux : aucun texte n'en dépend, ils n'interceptent jamais le
 * pointeur, et ils disparaissent sous 1100 px — en une colonne ils passeraient
 * derrière le contenu au lieu de l'encadrer.
 */
#lpg-ah26 .lpg-aqua {
	position: absolute;
	z-index: 0;
	width: clamp(118px, 12.5vw, 196px);
	height: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0.72;
}

/*
 * Les décors sont posés à cheval sur le bord de la section : ils entrent dans
 * le cadre par un angle, comme un motif imprimé qui court sous le contenu.
 * Le débordement reste faible pour qu'on lise l'ingrédient, pas un fragment.
 */
/*
 * Posés en bas de section, où le contenu s'arrête : entrer par le haut les
 * faisait couper net contre le bandeau, ce qui se lisait comme un accident.
 */
#lpg-ah26 .lpg-aqua--hero-g {
	left: clamp(-34px, -1.6vw, -10px);
	bottom: clamp(-46px, -2.2vw, -14px);
	width: clamp(104px, 10.5vw, 168px);
	transform: rotate(-9deg);
	opacity: 0.62;
}
#lpg-ah26 .lpg-aqua--hero-d {
	right: clamp(-30px, -1.4vw, -8px);
	bottom: clamp(-40px, -1.9vw, -12px);
	width: clamp(112px, 11.5vw, 182px);
	transform: rotate(9deg) scaleX(-1);
	opacity: 0.62;
}

#lpg-ah26 .lpg-aqua--acces-d {
	right: clamp(-44px, -2vw, -10px);
	top: 6%;
	width: clamp(104px, 10.5vw, 160px);
	opacity: 0.55;
	transform: rotate(6deg);
}

@media (max-width: 1100px) {
	#lpg-ah26 .lpg-aqua { display: none; }
}

/* Les sections qui portent un décor le recadrent. */
#lpg-ah26 .lpg-hero,
#lpg-ah26 .lpg-acces,
#lpg-ah26 .lpg-promesse,
#lpg-ah26 .lpg-ouv {
	position: relative;
	overflow: hidden;
}

#lpg-ah26 .lpg-acces__grille { position: relative; z-index: 1; }

/* Pyramide olfactive dans la fiche : fond transparent, donc posée sur un
   aplat doux plutôt que sur du blanc pur. */
#lpg-ah26 .lpg-fiche__pyramide {
	margin: 26px 0 0;
	padding: 18px;
	background: var(--fond-collection);
	border: 1px solid var(--bord);
	border-radius: 3px;
	text-align: center;
}

#lpg-ah26 .lpg-fiche__pyramide img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/*  Compte à rebours                                                   */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-compteur {
	max-width: 620px;
	margin: 0 auto 44px;
	background: #FFFFFF;
	border: 1px solid var(--bord-compteur);
	border-radius: 3px;
	padding: clamp(26px, 3.4vw, 34px) clamp(20px, 3vw, 40px);
	box-shadow: 0 1px 2px rgba(46, 43, 38, 0.03);
}

#lpg-ah26 .lpg-compteur__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 0 0 22px;
}

#lpg-ah26 .lpg-compteur__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(8px, 2vw, 20px);
}

#lpg-ah26 .lpg-compteur__unite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
#lpg-ah26 .lpg-compteur__unite + .lpg-compteur__unite {
	border-left: 1px solid var(--separateur);
}

#lpg-ah26 .lpg-compteur__valeur {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--encre);
}

#lpg-ah26 .lpg-compteur__legende {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-compteur__echeance {
	font-size: 13px;
	line-height: 1.6;
	color: var(--gris-clair);
	margin: 22px 0 0;
}

/* ------------------------------------------------------------------ */
/*  Promesse                                                           */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-promesse {
	background: #FFFFFF;
	padding: clamp(56px, 7vw, 96px) 24px clamp(60px, 7.4vw, 100px);
}

/* Avec visuel de fond, un aplat crème sert de repli si l'image tarde. */
#lpg-ah26 .lpg-promesse--visuel { background: var(--creme); }

#lpg-ah26 .lpg-promesse__fond {
	position: absolute;
	inset: 0;
	z-index: 0;
}

#lpg-ah26 .lpg-promesse__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Flou permanent, indépendant de la révélation : le visuel joue ici le rôle
   d'une texture sur laquelle les cartes blanches se détachent. Net, il
   entrerait en concurrence avec elles. */
#lpg-ah26 .lpg-promesse__img--floute {
	filter: blur(26px) saturate(1.08);
	transform: scale(1.1);
}

/*
 * Voile clair sur le haut de la section, là où se tiennent l'intitulé et le
 * titre. Le visuel reste visible, mais cesse de leur disputer le contraste.
 */
#lpg-ah26 .lpg-promesse__fond::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 46%;
	/*
	 * z-index explicite, et il est nécessaire : le visuel porte un `transform`,
	 * qui le promeut dans la couche des éléments positionnés. Sans cette
	 * déclaration, le voile s'y retrouvait au même niveau et disparaissait
	 * derrière lui.
	 */
	z-index: 1;
	background: linear-gradient(180deg, rgba(255, 250, 242, 0.86) 0%, rgba(255, 250, 242, 0.46) 58%, rgba(255, 250, 242, 0) 100%);
}

#lpg-ah26 .lpg-promesse > .lpg-wrap {
	position: relative;
	z-index: 1;
}

/* Le client a demandé un titre à cette section : « mettre un titre. Exemple :
   “avantages exclusifs du pré-accès” ». */
#lpg-ah26 .lpg-promesse__entete {
	max-width: 640px;
	margin: 0 0 clamp(28px, 3.6vw, 46px);
}

/* Le titre est en gros corps, mais il repose lui aussi sur le visuel : un halo
   très doux suffit à le décoller du fond sans l'entourer d'un cadre. */
#lpg-ah26 .lpg-promesse--visuel .lpg-promesse__entete .lpg-h2 {
	text-shadow: 0 1px 18px rgba(255, 255, 255, 0.55);
}

#lpg-ah26 .lpg-promesse__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

/* Quatre cartes : la rareté s'ajoute aux trois avantages. */
#lpg-ah26 .lpg-promesse__grille--quatre {
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

/* La carte de rareté se distingue par un filet, pas par une couleur criarde. */
#lpg-ah26 .lpg-promesse__item--rarete { border-color: rgba(158, 43, 37, 0.28); }
#lpg-ah26 .lpg-promesse__item--rarete .lpg-promesse__num { color: var(--rouge-titre); }
#lpg-ah26.lpg--b2b .lpg-promesse__item--rarete { border-color: rgba(38, 69, 111, 0.26); }
#lpg-ah26.lpg--b2b .lpg-promesse__item--rarete .lpg-promesse__num { color: var(--rouge-titre); }

#lpg-ah26 .lpg-hero__texte { min-width: 0; }
#lpg-ah26 .lpg-parfum__corps { min-width: 0; }
#lpg-ah26 .lpg-achat__form { display: block; }

/*
 * Cartes blanches franches : le contraste vient d'elles, pas d'un voile
 * assombrissant le visuel. Le texte reste ainsi sur du blanc pur, quel que
 * soit le visuel placé en fond.
 */
#lpg-ah26 .lpg-promesse__item {
	background: #FFFFFF;
	border: 1px solid var(--bord);
	border-radius: 3px;
	padding: clamp(24px, 3vw, 34px);
}

#lpg-ah26 .lpg-promesse--visuel .lpg-promesse__item {
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 2px 14px rgba(46, 43, 38, 0.06);
}

#lpg-ah26 .lpg-promesse__num {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--bronze);
	margin: 0 0 18px;
}

/* ------------------------------------------------------------------ */
/*  Collection                                                         */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-collection {
	background: var(--fond-collection);
	padding: clamp(52px, 6.4vw, 86px) 24px clamp(58px, 7vw, 94px);
}

#lpg-ah26 .lpg-collection__entete {
	max-width: 620px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

/*
 * « Pouvez-vous centrer les produits svp. » Une grille laissait la dernière
 * rangée alignée à gauche ; un enroulement centré règle le cas quel que soit
 * le nombre de cartes.
 */
#lpg-ah26 .lpg-collection__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	align-items: stretch;
}

#lpg-ah26 .lpg-collection__grille > .lpg-frag {
	flex: 1 1 216px;
	max-width: 268px;
}

/* Carte fragrance ---------------------------------------------------- */

#lpg-ah26 .lpg-frag {
	background: #FFFFFF;
	border: 1px solid var(--bord-carte);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: border-color 150ms ease-out;
}
#lpg-ah26 .lpg-frag:hover,
#lpg-ah26 .lpg-frag:focus-visible { border-color: var(--or); }

#lpg-ah26 .lpg-frag__media {
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
}

#lpg-ah26 .lpg-frag__img {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.08);
	filter: saturate(1.03);
}
/*
 * Ingrédients détourés : aucun flou, l'image est posée entière dans le cadre
 * plutôt que recadrée. Rien à cacher, donc rien à brouiller — la remarque
 * « l'image est très floue » n'a plus d'objet.
 */
#lpg-ah26 .lpg-frag__img--ingredients {
	position: absolute;
	inset: 9% 12%;
	width: auto;
	height: 82%;
	max-width: 76%;
	margin: 0 auto;
	object-fit: contain;
	object-position: center bottom;
	transform: none;
	filter: drop-shadow(0 8px 16px rgba(80, 58, 32, 0.14));
}

/* Repli : si les ingrédients n'ont pas été livrés, le visuel « base » reste
   légèrement adouci — son flacon n'a pas à être détaillé avant l'ouverture. */
#lpg-ah26 .lpg-frag__img--voile { filter: blur(3.5px) saturate(1.05); }

#lpg-ah26 .lpg-frag__badge {
	position: absolute;
	z-index: 1;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, 0.9);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 7px 11px;
	border-radius: 2px;
}

/* Les visuels ne se glissent pas hors de la page. Friction volontairement
   légère : le flou étant décoratif, il n'y a rien à verrouiller ici. */
#lpg-ah26 .lpg-frag__img,
#lpg-ah26 .lpg-aqua,
#lpg-ah26 .lpg-parfum__img,
#lpg-ah26 .lpg-promesse__img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#lpg-ah26 .lpg-frag__corps {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

#lpg-ah26 .lpg-frag__famille {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-frag__notes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gris);
	min-height: 96px;
}

#lpg-ah26 .lpg-frag__note { display: flex; gap: 10px; }

#lpg-ah26 .lpg-frag__niveau {
	min-width: 44px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-note);
	padding-top: 2px;
}

#lpg-ah26 .lpg-frag__pied {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 12px;
}

#lpg-ah26 .lpg-frag__avant { font-size: 12px; color: var(--gris-clair); }

#lpg-ah26 .lpg-frag__prix {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

#lpg-ah26 .lpg-frag__economie {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--vert);
}

#lpg-ah26 .lpg-frag__lien {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bronze);
}

/* ------------------------------------------------------------------ */
/*  Accès réservé + calendrier                                         */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-acces {
	background: #FFFFFF;
	padding: clamp(56px, 7vw, 96px) 24px clamp(60px, 7.4vw, 100px);
}

#lpg-ah26 .lpg-acces__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}

#lpg-ah26 .lpg-acces .lpg-h2 { margin-bottom: 22px; }
#lpg-ah26 .lpg-acces .lpg-texte--mesure:last-of-type { margin-bottom: 32px; }

#lpg-ah26 .lpg-calendrier { display: flex; flex-direction: column; }

#lpg-ah26 .lpg-calendrier__ligne {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-top: 1px solid var(--bord);
}
#lpg-ah26 .lpg-calendrier__ligne:last-child { border-bottom: 1px solid var(--bord); }

#lpg-ah26 .lpg-calendrier__quand { font-size: 14px; font-weight: 700; }
#lpg-ah26 .lpg-calendrier__quoi { font-size: 15.5px; color: var(--gris); }

/* ------------------------------------------------------------------ */
/*  CTA collant mobile                                                 */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-collant {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-collant);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--bord);
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Réserve la hauteur du CTA collant pour qu'il ne masque jamais la fin
   de la page. Retiré au-delà du seuil où le CTA disparaît. */
@media (max-width: 1039px) {
	#lpg-ah26 .lpg-acces { padding-bottom: calc(clamp(60px, 7.4vw, 100px) + 70px); }
	#lpg-ah26 .lpg-fin { padding-bottom: calc(clamp(56px, 7vw, 96px) + 70px); }
}

@media (min-width: 1040px) {
	#lpg-ah26 .lpg-collant { display: none; }
}

/* ------------------------------------------------------------------ */
/*  Modales                                                            */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
}

#lpg-ah26 .lpg-overlay--fiche {
	z-index: var(--z-fiche);
	background: rgba(46, 43, 38, 0.42);
	align-items: center;
}

#lpg-ah26 .lpg-modale {
	background: #FFFFFF;
	border-radius: 3px;
	width: 100%;
	animation: lpg-rise 200ms ease-out;
}

#lpg-ah26 .lpg-modale--fiche {
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
}

#lpg-ah26 .lpg-modale__barre { display: flex; justify-content: flex-end; margin-bottom: 8px; }
#lpg-ah26 .lpg-modale--fiche .lpg-modale__barre { padding: 16px 16px 0; margin-bottom: 0; }

#lpg-ah26 .lpg-fermer {
	border: 1px solid var(--bord-carte);
	border-radius: 2px;
	width: 44px;
	height: 44px;
	font-size: 17px;
	color: var(--gris);
	transition: background-color 150ms ease-out;
}
#lpg-ah26 .lpg-fermer:hover { background: #F6F2EB; }

/* Formulaire --------------------------------------------------------- */

#lpg-ah26 .lpg-form__entete { text-align: center; margin-bottom: 40px; }
#lpg-ah26 .lpg-form__entete .lpg-h2 { margin-bottom: 16px; }

#lpg-ah26 .lpg-form { display: flex; flex-direction: column; gap: 22px; }

#lpg-ah26 .lpg-label {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--encre);
}

#lpg-ah26 .lpg-label input {
	border: 1px solid var(--bord-champ);
	border-radius: 2px;
	padding: 16px;
	/* 16 px minimum : en dessous, iOS zoome à l'ouverture du clavier. */
	font-size: 16px;
	font-weight: 400;
	color: var(--encre);
	background: #FFFFFF;
	width: 100%;
}

#lpg-ah26 .lpg-label input[aria-invalid="true"] { border-color: var(--rouge); }

#lpg-ah26 .lpg-form__duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}

#lpg-ah26 .lpg-consent {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gris);
}

#lpg-ah26 .lpg-consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 2px 0 0;
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: var(--encre);
}

#lpg-ah26 .lpg-erreur {
	font-size: 13px;
	font-weight: 600;
	color: var(--rouge);
	line-height: 1.5;
}
#lpg-ah26 .lpg-erreur--consent { margin-top: -12px; }

#lpg-ah26 .lpg-alerte {
	padding: 16px 18px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
}
#lpg-ah26 .lpg-alerte--erreur {
	border-left: 2px solid var(--rouge);
	background: #FBF3F0;
	color: #7A2E1D;
}
#lpg-ah26 .lpg-alerte--info {
	border-left: 2px solid var(--or);
	background: #FDF8EC;
	color: #6B4E12;
}
#lpg-ah26 .lpg-alerte a { color: inherit; }

/* Succès ------------------------------------------------------------- */

#lpg-ah26 .lpg-succes {
	border: 1px solid var(--bord-carte);
	border-radius: 3px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	animation: lpg-rise 220ms ease-out;
}

#lpg-ah26 .lpg-succes__kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--vert);
	margin: 0 0 22px;
}

/*
 * Piège à robots. Sorti du flux sans display:none ni visibility:hidden :
 * certains robots ignorent les champs ainsi masqués, alors qu'ils remplissent
 * ceux simplement déplacés hors écran.
 */
#lpg-ah26 .lpg-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#lpg-ah26 .lpg-succes .lpg-h2 { margin-bottom: 20px; }
#lpg-ah26 .lpg-succes__annonce { font-weight: 600; color: var(--encre); }
#lpg-ah26 .lpg-succes .lpg-texte { margin-bottom: 14px; }
#lpg-ah26 .lpg-succes .lpg-note { margin-top: 22px; color: #7C766E; }

/* Fiche fragrance ---------------------------------------------------- */

#lpg-ah26 .lpg-modale__contenu { padding: 8px 40px 40px; }

#lpg-ah26 .lpg-fiche__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gris-clair);
	margin: 0 0 12px;
}
#lpg-ah26 .lpg-fiche__kicker--contenances { margin: 28px 0 8px; }

#lpg-ah26 .lpg-fiche__titre {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 8px;
}

#lpg-ah26 .lpg-fiche__mention {
	font-size: 15px;
	line-height: 1.65;
	color: var(--gris);
	margin: 0 0 28px;
}

#lpg-ah26 .lpg-fiche__notes { border-top: 1px solid var(--bord); }

#lpg-ah26 .lpg-fiche__note {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--bord);
	font-size: 15px;
}

#lpg-ah26 .lpg-fiche__niveau {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gris-note);
}

#lpg-ah26 .lpg-fiche__grille {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 10px 20px;
	font-size: 14.5px;
	align-items: baseline;
}
#lpg-ah26 .lpg-fiche__grille--simple { grid-template-columns: 1fr auto; }

#lpg-ah26 .lpg-fiche__contenance { color: var(--gris); }
#lpg-ah26 .lpg-fiche__grille .lpg-barre { color: var(--gris-clair); }
#lpg-ah26 .lpg-fiche__prix { font-weight: 800; }

#lpg-ah26 .lpg-modale__contenu .lpg-btn--pleine { margin-top: 32px; padding: 18px; }

#lpg-ah26 .lpg-fiche__legale {
	font-size: 12.5px;
	color: #7C766E;
	margin: 14px 0 0;
	text-align: center;
	line-height: 1.6;
}

/* ================================================================== */
/*  PAGE D'OUVERTURE                                                   */
/*                                                                     */
/*  Reprise de la maquette fournie par le client avec ses retours, qui  */
/*  jugeait l'annonce précédente « trop simple, pas assez détaillée et  */
/*  non immersive ».                                                    */
/* ================================================================== */

/* Retour d'ajout au panier après un envoi sans JavaScript ------------- */

#lpg-ah26 .lpg-flash {
	padding: 13px 24px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
}
#lpg-ah26 .lpg-flash--ok { background: #EDF5E9; color: #2F5A22; }
#lpg-ah26 .lpg-flash--ko { background: #FBF0EC; color: #7A2E1D; }
#lpg-ah26 .lpg-flash a { color: inherit; }

/* 1. Hero ------------------------------------------------------------ */

#lpg-ah26 .lpg-ouv {
	background: var(--creme-ouv);
	padding: clamp(38px, 4.6vw, 62px) 24px 0;
}

#lpg-ah26 .lpg-ouv__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(22px, 3.6vw, 52px);
	align-items: center;
	position: relative;
	z-index: 1;
}

#lpg-ah26 .lpg-ouv__texte { padding-bottom: clamp(38px, 4.6vw, 62px); }

#lpg-ah26 .lpg-ouv__eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--terre);
	margin: 0 0 18px;
}

#lpg-ah26 .lpg-ouv__titre {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(42px, 6.2vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.022em;
	margin: 0 0 22px;
	overflow-wrap: break-word;
}

/* « Pré-accès » en noir, « ouvert ! » en italique rouge sur la ligne
   suivante, légèrement décalé : la composition de la maquette client. */
#lpg-ah26 .lpg-ouv__titre em {
	display: block;
	font-style: italic;
	color: var(--rouge-titre);
	padding-left: 0.12em;
}

#lpg-ah26 .lpg-ouv__intro {
	font-family: var(--serif);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.62;
	color: #4A4239;
	margin: 0 0 26px;
	max-width: 44ch;
	text-wrap: pretty;
}
#lpg-ah26 .lpg-ouv__intro strong {
	color: var(--rouge-titre);
	font-weight: 700;
	white-space: nowrap;
}

#lpg-ah26 .lpg-ouv__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px 22px;
	margin-bottom: 20px;
}

#lpg-ah26 .lpg-btn--encre {
	background: var(--encre);
	color: #FBF6EC;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 17px 26px;
}
#lpg-ah26 .lpg-btn--encre:hover { background: #1E1B17; color: #FBF6EC; }
#lpg-ah26 .lpg-btn__fleche { font-size: 15px; letter-spacing: normal; }

#lpg-ah26 .lpg-ouv__mention {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bronze);
	line-height: 1.75;
	margin: 0;
}

#lpg-ah26 .lpg-ouv__echeance {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--encre);
	margin: 0;
}

/* Composition de visuels, à la façon des panneaux inclinés de la maquette. */
#lpg-ah26 .lpg-ouv__vitrine {
	position: relative;
	min-height: clamp(290px, 33vw, 450px);
	align-self: stretch;
}

#lpg-ah26 .lpg-ouv__panneau {
	position: absolute;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 26px 60px -32px rgba(60, 42, 24, 0.55);
}
#lpg-ah26 .lpg-ouv__panneau img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#lpg-ah26 .lpg-ouv__panneau--1 { width: 55%; aspect-ratio: 3 / 4; top: 4%;    right: 5%;  transform: rotate(3deg);  z-index: 3; }
#lpg-ah26 .lpg-ouv__panneau--2 { width: 43%; aspect-ratio: 3 / 4; top: 21%;   left: 1%;   transform: rotate(-6deg); z-index: 2; }
#lpg-ah26 .lpg-ouv__panneau--3 { width: 37%; aspect-ratio: 1 / 1; bottom: 3%; right: 25%; transform: rotate(7deg);  z-index: 1; }

/*
 * Entre 1 040 et 1 330 px, la zone de contenu touche presque le bord de la
 * fenêtre : la pastille doit rentrer, sans redescendre sur les champs.
 */
@media (max-width: 1330px) {
	#lpg-ah26 .lpg-hero__carte .lpg-pastille { right: -16px; }
}

#lpg-ah26 .lpg-pastille--ouv {
	top: -1%;
	right: -1%;
	width: clamp(104px, 10.2vw, 136px);
	height: clamp(104px, 10.2vw, 136px);
	padding: 0 12px;
	z-index: 4;
}
#lpg-ah26 .lpg-pastille--ouv .lpg-pastille__valeur { font-size: clamp(24px, 2.5vw, 32px); }

/* 2. Carrousel des parfums ------------------------------------------- */

#lpg-ah26 .lpg-carrousel {
	background: var(--creme-doux);
	padding: clamp(54px, 6.6vw, 88px) 24px clamp(44px, 5.4vw, 70px);
}

#lpg-ah26 .lpg-carrousel__entete {
	max-width: 640px;
	margin-bottom: clamp(30px, 3.8vw, 46px);
}

/*
 * Intitulé posé sur un visuel : le fond blanc lui rend le contraste que le
 * bronze sur photo floutée ne pouvait pas tenir.
 */
#lpg-ah26 .lpg-eyebrow--puce {
	display: inline-block;
	background: #FFFFFF;
	color: var(--bronze-fonce);
	padding: 9px 16px;
	border-radius: 100px;
	box-shadow: 0 2px 10px rgba(46, 43, 38, 0.1);
}

#lpg-ah26 .lpg-eyebrow--filet {
	display: flex;
	align-items: center;
	gap: 14px;
}
#lpg-ah26 .lpg-eyebrow--filet::before {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.65;
	flex: none;
}

/*
 * La piste défile déjà sans script : c'est un débordement horizontal. Le
 * JavaScript n'ajoute que le glisser à la souris.
 */
#lpg-ah26 .lpg-carrousel__piste {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 4px 0 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
#lpg-ah26 .lpg-carrousel__piste.is-glisse { cursor: grabbing; user-select: none; }

#lpg-ah26 .lpg-vignette {
	flex: 0 0 clamp(186px, 18.5vw, 228px);
	scroll-snap-align: start;
	list-style: none;
	margin: 0;
}

#lpg-ah26 .lpg-vignette__lien {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #FFFFFF;
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
#lpg-ah26 .lpg-vignette__lien:hover,
#lpg-ah26 .lpg-vignette__lien:focus-visible {
	color: #FFFFFF;
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -20px rgba(60, 42, 24, 0.5);
}

#lpg-ah26 .lpg-vignette__media { position: absolute; inset: 0; display: block; }
#lpg-ah26 .lpg-vignette__media img { width: 100%; height: 100%; object-fit: cover; }

#lpg-ah26 .lpg-vignette__voile {
	position: absolute;
	inset: 0;
	display: block;
	/* Les visuels sont clairs : le voile doit monter haut et finir franc pour
	   que le nom en blanc reste lisible sur toutes les fragrances. */
	background: linear-gradient(180deg, rgba(45, 32, 22, 0) 20%, rgba(45, 32, 22, 0.5) 52%, rgba(45, 32, 22, 0.88) 100%);
}

#lpg-ah26 .lpg-vignette__corps {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 15px 15px;
}

#lpg-ah26 .lpg-vignette__famille {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

#lpg-ah26 .lpg-vignette__nom {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.2;
}

#lpg-ah26 .lpg-vignette__prix {
	align-self: flex-start;
	margin-top: 7px;
	background: rgba(255, 255, 255, 0.93);
	color: var(--encre);
	font-size: 11.5px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 100px;
}

/* 3. Bloc détaillé par parfum ---------------------------------------- */

#lpg-ah26 .lpg-parfums {
	background: #FFFFFF;
	padding: clamp(38px, 4.6vw, 62px) 24px clamp(60px, 7.4vw, 100px);
}

#lpg-ah26 .lpg-parfum {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.18fr) minmax(296px, 0.96fr);
	gap: clamp(18px, 2.2vw, 30px);
	align-items: start;
	background: #FFFFFF;
	border: 1px solid var(--bord-carte);
	border-radius: 16px;
	padding: clamp(16px, 1.9vw, 24px);
	/* L'ancre du carrousel ne doit pas coller le bloc au bord haut. */
	scroll-margin-top: 96px;
}
#lpg-ah26 .lpg-parfum + .lpg-parfum { margin-top: clamp(22px, 2.8vw, 38px); }

#lpg-ah26 .lpg-parfum__media {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
#lpg-ah26 .lpg-parfum__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nom poétique en pastille sur le visuel, comme dans la maquette client. */
#lpg-ah26 .lpg-parfum__etiquette {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--encre);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 8px 13px;
	border-radius: 100px;
}

#lpg-ah26 .lpg-parfum__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--terre);
	margin: 2px 0 10px;
}

#lpg-ah26 .lpg-parfum__nom {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(25px, 2.5vw, 35px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	margin: 0 0 8px;
	text-wrap: balance;
}

#lpg-ah26 .lpg-parfum__accroche {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--terre);
	margin: 0 0 16px;
}

#lpg-ah26 .lpg-parfum__desc {
	font-size: 15px;
	line-height: 1.72;
	color: var(--gris);
	margin: 0 0 20px;
	text-wrap: pretty;
}

#lpg-ah26 .lpg-parfum__notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

#lpg-ah26 .lpg-parfum__note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--bord);
	border-radius: 8px;
	padding: 11px 12px;
}

#lpg-ah26 .lpg-parfum__niveau {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gris-note);
}

#lpg-ah26 .lpg-parfum__valeur { font-size: 13.5px; line-height: 1.4; color: var(--encre); }

#lpg-ah26 .lpg-parfum__traits {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 9px 22px;
	margin: 0;
	padding: 0;
}
#lpg-ah26 .lpg-parfum__traits li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--gris);
}
#lpg-ah26 .lpg-parfum__puce {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--terre);
	opacity: 0.7;
	flex: none;
}

/* Mentions réglementaires : la demande « infos produits (UFI etc) ».
   Repliées par défaut, elles ne prennent la place que si on les ouvre. */
#lpg-ah26 .lpg-parfum__infos {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bord);
}

#lpg-ah26 .lpg-parfum__infos-titre {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gris-clair);
	margin: 0 0 6px;
}

#lpg-ah26 .lpg-repli { border-bottom: 1px solid var(--separateur); }

#lpg-ah26 .lpg-repli__tete {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 11px 28px 11px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--encre);
}
#lpg-ah26 .lpg-repli__tete::-webkit-details-marker { display: none; }
#lpg-ah26 .lpg-repli__tete::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	font-weight: 400;
	color: var(--gris-clair);
}
#lpg-ah26 .lpg-repli[open] .lpg-repli__tete::after { content: "–"; }

#lpg-ah26 .lpg-repli__corps {
	padding: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.68;
	color: var(--gris);
}
#lpg-ah26 .lpg-repli__corps p { margin: 0 0 10px; }
#lpg-ah26 .lpg-repli__corps p:last-child { margin: 0; }
#lpg-ah26 .lpg-repli__corps strong { font-weight: 700; color: var(--encre); }

/* Bloc d'achat ------------------------------------------------------- */

#lpg-ah26 .lpg-achat {
	background: var(--creme);
	border: 1px solid var(--bord);
	border-radius: 12px;
	padding: clamp(13px, 1.5vw, 18px);
	position: sticky;
	top: 96px;
}

#lpg-ah26 .lpg-achat__onglets {
	display: flex;
	gap: 4px;
	background: rgba(46, 43, 38, 0.055);
	border-radius: 100px;
	padding: 4px;
	margin-bottom: 16px;
}

#lpg-ah26 .lpg-achat__onglet {
	flex: 1;
	border-radius: 100px;
	padding: 11px 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gris);
	background: transparent;
	transition: background-color 140ms ease-out, color 140ms ease-out;
}
#lpg-ah26 .lpg-achat__onglet[aria-selected="true"] {
	background: #FFFFFF;
	color: var(--encre);
	box-shadow: 0 1px 4px rgba(46, 43, 38, 0.13);
}

#lpg-ah26 .lpg-achat__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
#lpg-ah26 .lpg-achat__consigne { font-size: 13px; font-weight: 700; color: var(--encre); }
#lpg-ah26 .lpg-achat__nb { font-size: 11.5px; color: var(--gris-clair); }

#lpg-ah26 .lpg-achat__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
	gap: 8px;
}

#lpg-ah26 .lpg-format {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #FFFFFF;
	border: 1px solid var(--bord-champ);
	border-radius: 9px;
	padding: 10px 11px;
	text-align: left;
	transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
#lpg-ah26 .lpg-format:hover:not([disabled]) { border-color: var(--terre); }

/* La bordure épaissit sans déplacer le contenu : le padding compense. */
#lpg-ah26 .lpg-format.is-actif {
	border-width: 2px;
	border-color: var(--terre);
	background: var(--terre-pale);
	padding: 9px 10px;
}

#lpg-ah26 .lpg-format__vol { font-size: 12.5px; font-weight: 700; color: var(--encre); }

#lpg-ah26 .lpg-format__prix {
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
#lpg-ah26 .lpg-format.is-actif .lpg-format__prix { color: var(--terre-fonce); }

#lpg-ah26 .lpg-format__avant { font-size: 11px; color: var(--gris-clair); }
#lpg-ah26 .lpg-format[disabled] { opacity: 0.5; cursor: not-allowed; }
#lpg-ah26 .lpg-format__epuise {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rouge);
}

/* Le prix, à l'endroit exact où le client l'a réclamé. */
#lpg-ah26 .lpg-achat__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 12px;
	padding-top: 13px;
	border-top: 1px solid var(--bord);
}

#lpg-ah26 .lpg-achat__total-lib {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-achat__total-val {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
#lpg-ah26 .lpg-achat__total-val strong {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1;
	color: var(--encre);
	font-variant-numeric: tabular-nums;
}
#lpg-ah26 .lpg-achat__total-avant { font-size: 11.5px; color: var(--gris-clair); }

#lpg-ah26 .lpg-achat__action { display: flex; align-items: stretch; gap: 10px; }

#lpg-ah26 .lpg-qte {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 1px solid var(--bord-champ);
	border-radius: 9px;
	flex: none;
}
#lpg-ah26 .lpg-qte__btn { width: 36px; height: 46px; font-size: 17px; color: var(--gris); }
#lpg-ah26 .lpg-qte__btn:hover { color: var(--encre); }

#lpg-ah26 .lpg-qte__champ {
	width: 36px;
	height: 46px;
	text-align: center;
	/* 16 px : en dessous, iOS zoome à l'ouverture du clavier. */
	font-size: 16px;
	font-weight: 700;
	color: var(--encre);
	-moz-appearance: textfield;
}
#lpg-ah26 .lpg-qte__champ::-webkit-outer-spin-button,
#lpg-ah26 .lpg-qte__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#lpg-ah26 .lpg-btn--panier {
	flex: 1;
	background: var(--terre);
	color: #FFFFFF;
	border-radius: 9px;
	font-size: 14px;
	padding: 13px 16px;
	min-height: 46px;
	gap: 9px;
}
#lpg-ah26 .lpg-btn--panier:hover:not([disabled]) { background: var(--terre-fonce); color: #FFFFFF; }
#lpg-ah26 .lpg-btn--panier[disabled] { background: #C6BFB4; }
#lpg-ah26 .lpg-btn--panier[aria-busy="true"] { background: var(--terre-fonce); }

/* Bandeau de test, réservé aux gestionnaires : volontairement hors charte,
   pour qu'on ne puisse pas le confondre avec un élément de la page. */
#lpg-ah26 .lpg-achat__test {
	margin: 10px 0 0;
	padding: 9px 11px;
	border-left: 3px solid var(--rouge);
	background: #FBF0EC;
	font-size: 11.5px;
	line-height: 1.5;
	color: #7A2E1D;
}

#lpg-ah26 .lpg-achat__retour {
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--vert);
}
#lpg-ah26 .lpg-achat__retour.is-erreur { color: var(--rouge); }

#lpg-ah26 .lpg-achat__legale {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-achat__vide { font-size: 13.5px; line-height: 1.65; color: var(--gris); margin: 0; }

#lpg-ah26 .lpg-legale--parfums { margin-top: clamp(24px, 3vw, 38px); }

/* 4. Compte à rebours de fin ----------------------------------------- */

#lpg-ah26 .lpg-fin {
	background: var(--creme-doux);
	padding: clamp(44px, 5.4vw, 80px) 24px clamp(56px, 7vw, 96px);
}

#lpg-ah26 .lpg-fin__panneau {
	position: relative;
	overflow: hidden;
	background: var(--brun);
	border-radius: 22px;
	padding: clamp(28px, 3.6vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: clamp(26px, 3.6vw, 46px);
	align-items: center;
}

/* Semis de points, repris de la maquette : une trame, pas un motif. */
#lpg-ah26 .lpg-fin__panneau::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(240, 206, 140, 0.3) 1.4px, transparent 1.4px);
	background-size: 22px 22px;
	opacity: 0.6;
	pointer-events: none;
}

#lpg-ah26 .lpg-fin__texte,
#lpg-ah26 .lpg-fin__compteur { position: relative; z-index: 1; }

#lpg-ah26 .lpg-eyebrow--or { color: var(--or-vif); }

#lpg-ah26 .lpg-fin__titre {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(29px, 3.4vw, 48px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--creme-texte);
	margin: 0 0 16px;
	text-wrap: balance;
}

#lpg-ah26 .lpg-fin__intro {
	font-size: 15px;
	line-height: 1.66;
	color: rgba(247, 241, 228, 0.74);
	margin: 0 0 26px;
	max-width: 42ch;
}

#lpg-ah26 .lpg-btn--or-plein {
	background: var(--or-vif);
	color: #3B2A1E;
	border-radius: 100px;
	padding: 15px 28px;
	font-size: 14px;
}
#lpg-ah26 .lpg-btn--or-plein:hover { background: var(--or-vif-fonce); color: #3B2A1E; }

#lpg-ah26 .lpg-compteur--sombre {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__grille { gap: clamp(8px, 1.3vw, 14px); }

#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__unite {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(240, 206, 140, 0.18);
	border-radius: 12px;
	padding: 18px 6px 14px;
	gap: 7px;
}
/* Le séparateur du compteur clair n'a plus de sens entre des tuiles. */
#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__unite + .lpg-compteur__unite {
	border-left: 1px solid rgba(240, 206, 140, 0.18);
}

#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__valeur {
	color: var(--or-vif);
	font-size: clamp(27px, 3.2vw, 42px);
}
#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__legende { color: rgba(247, 241, 228, 0.6); }

#lpg-ah26 .lpg-fin__echeance {
	text-align: right;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(247, 241, 228, 0.62);
	margin: 14px 0 0;
}

/* Titre de fiche sans nom : la famille olfactive prend le relais ------ */

#lpg-ah26 .lpg-fiche__titre--famille {
	font-size: 24px;
	letter-spacing: 0.01em;
}

#lpg-ah26 .lpg-fiche__accroche {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.45;
	color: var(--bronze);
	margin: 0 0 14px;
}

/* ------------------------------------------------------------------ */
/*  Écrans intermédiaires et étroits, blocs de l'ouverture             */
/* ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	#lpg-ah26 .lpg-parfum {
		grid-template-columns: minmax(0, 1fr) minmax(276px, 0.86fr);
	}
	/* En deux colonnes, le visuel passe en bandeau au-dessus du texte. */
	#lpg-ah26 .lpg-parfum__media {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 1039px) {
	#lpg-ah26 .lpg-hero__duo { grid-template-columns: 1fr; gap: 32px; }
	#lpg-ah26 .lpg-pastille { top: -30px; right: -14px; width: 108px; height: 108px; }
	#lpg-ah26 .lpg-ouv__inner { grid-template-columns: 1fr; }
	/* Le visuel passe en tête : sur un écran étroit, il porte l'annonce. */
	#lpg-ah26 .lpg-ouv__vitrine { order: -1; min-height: 62vw; }
	#lpg-ah26 .lpg-ouv__texte { padding-bottom: clamp(38px, 4.6vw, 62px); }
	#lpg-ah26 .lpg-achat { position: static; }
	#lpg-ah26 .lpg-fin__panneau { grid-template-columns: 1fr; }
	#lpg-ah26 .lpg-fin__echeance { text-align: left; }
}

@media (max-width: 860px) {
	#lpg-ah26 .lpg-parfum { grid-template-columns: 1fr; }
	#lpg-ah26 .lpg-parfum__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
	#lpg-ah26 .lpg-parfum__notes { grid-template-columns: 1fr; }
	#lpg-ah26 .lpg-achat__grille { grid-template-columns: repeat(2, 1fr); }
	#lpg-ah26 .lpg-achat__action { flex-direction: column; }
	#lpg-ah26 .lpg-qte { justify-content: space-between; }
	#lpg-ah26 .lpg-qte__champ { flex: 1; }
	#lpg-ah26 .lpg-ouv__titre { font-size: clamp(38px, 12vw, 56px); }
	#lpg-ah26 .lpg-parfum__media { aspect-ratio: 4 / 3; }
	/* Quatre tuiles de compteur ne tiennent pas : deux par deux. */
	#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__grille { grid-template-columns: repeat(2, 1fr); }
	#lpg-ah26 .lpg-compteur--sombre .lpg-compteur__unite:nth-child(3) { border-left: 1px solid rgba(240, 206, 140, 0.18); }
}

/* ------------------------------------------------------------------ */
/*  Écrans étroits                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 620px) {
	#lpg-ah26 .lpg-modale__contenu { padding: 8px 22px 32px; }
	#lpg-ah26 .lpg-overlay { padding: 12px; }
	#lpg-ah26 .lpg-calendrier__ligne { grid-template-columns: 110px 1fr; gap: 14px; }
	/* Quatre unités de compteur ne tiennent pas sur un écran étroit. */
	#lpg-ah26 .lpg-compteur__grille { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; }
	#lpg-ah26 .lpg-compteur__unite:nth-child(3) { border-left: 0; }
}

/* ------------------------------------------------------------------ */
/*  Préférences utilisateur                                            */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#lpg-ah26 *,
	#lpg-ah26 *::before,
	#lpg-ah26 *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ------------------------------------------------------------------ */
/*  Mise en avant d'une autre gamme — pied de la page de collection    */
/*                                                                     */
/*  Entièrement construite sur les variables de charte : la variante   */
/*  B2B se colore d'elle-même, sans une seule règle en double.         */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-pousse {
	background: var(--fond-collection);
	border-top: 1px solid var(--separateur);
	padding: clamp(44px, 5.4vw, 80px) 24px clamp(52px, 6.4vw, 88px);
}

#lpg-ah26 .lpg-pousse__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

#lpg-ah26 .lpg-pousse__titre {
	font-family: var(--serif);
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.15;
	color: var(--encre);
	margin: 0;
	text-wrap: balance;
}

#lpg-ah26 .lpg-pousse__texte {
	max-width: 52ch;
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gris);
}

#lpg-ah26 .lpg-pousse__lien {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/*
 * Le bouton reprend la pastille dorée du CTA principal de la page — même forme,
 * même texte encre. `.lpg-btn` ne porte aucun rembourrage : il vient toujours
 * d'un modificateur de taille, et ce bloc a le sien.
 */
#lpg-ah26 .lpg-pousse__lien {
	padding: 14px 26px;
	font-size: 14px;
	border-radius: 100px;
}

/*
 * Compte de produits, sur fond clair : une teinte sombre translucide, et non du
 * blanc — le bouton est doré côté B2C, bleu pâle côté B2B, et du blanc s'y
 * effacerait dans les deux cas.
 */
#lpg-ah26 .lpg-pousse__compte {
	display: inline-block;
	min-width: 22px;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(59, 42, 30, 0.16);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}

/*
 * Piste défilante. `scroll-snap` aligne les cartes sans JavaScript ; les flèches
 * ne font que provoquer un défilement que le doigt et la molette déclenchent
 * déjà. Le cadre est en `position: relative` pour porter les flèches.
 */
#lpg-ah26 .lpg-pousse__piste-cadre {
	position: relative;
}

#lpg-ah26 .lpg-pousse__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(232px, 1fr);
	gap: clamp(14px, 1.6vw, 24px);
	margin: 0;
	padding: 4px 2px 12px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

/* Quatre cartes visibles au large, sans étirer les dernières s'il y en a moins. */
@media (min-width: 1080px) {
	#lpg-ah26 .lpg-pousse__piste {
		grid-auto-columns: calc((100% - 3 * clamp(14px, 1.6vw, 24px)) / 4);
	}
}

#lpg-ah26 .lpg-pousse__item {
	scroll-snap-align: start;
}

#lpg-ah26 .lpg-pousse__fleche {
	position: absolute;
	top: calc(50% - 26px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bord-carte);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--encre);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(46, 43, 38, 0.12);
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

#lpg-ah26 .lpg-pousse__fleche:hover,
#lpg-ah26 .lpg-pousse__fleche:focus-visible {
	border-color: var(--or);
	background: var(--creme);
}

#lpg-ah26 .lpg-pousse__fleche--avant { left: -10px; }
#lpg-ah26 .lpg-pousse__fleche--apres { right: -10px; }

@media (max-width: 1320px) {
	#lpg-ah26 .lpg-pousse__fleche--avant { left: 4px; }
	#lpg-ah26 .lpg-pousse__fleche--apres { right: 4px; }
}

#lpg-ah26 .lpg-pousse__carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 14px 18px;
	border: 1px solid var(--bord-carte);
	border-radius: 16px;
	background: #FFFFFF;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#lpg-ah26 .lpg-pousse__carte:hover,
#lpg-ah26 .lpg-pousse__carte:focus-visible {
	border-color: var(--or);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(46, 43, 38, 0.08);
}

#lpg-ah26 .lpg-pousse__visuel {
	display: block;
	margin-bottom: 14px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--creme);
	aspect-ratio: 1 / 1;
}

#lpg-ah26 .lpg-pousse__visuel img,
#lpg-ah26 .lpg-pousse__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

#lpg-ah26 .lpg-pousse__nom {
	display: block;
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.3;
	color: var(--encre);
	margin-bottom: 8px;
}

#lpg-ah26 .lpg-pousse__prix {
	display: block;
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--bronze);
	font-variant-numeric: tabular-nums;
}

#lpg-ah26 .lpg-pousse__rupture {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--gris-clair);
}

@media (max-width: 520px) {
	#lpg-ah26 .lpg-pousse__entete {
		align-items: flex-start;
	}

	#lpg-ah26 .lpg-pousse__lien {
		width: 100%;
		justify-content: center;
	}
}

/*
 * Filet : le texte que WooCommerce ajoute aux fourchettes de prix pour les
 * lecteurs d'écran (« Plage de prix : … ») doit rester inaudible à l'œil. Le
 * thème définit bien `.screen-reader-text`, mais ce bloc peut se retrouver sur
 * une page où la feuille de WooCommerce n'est pas chargée — et le libellé
 * s'afficherait alors deux fois.
 */
#lpg-ah26 .lpg-pousse .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

#lpg-ah26 .lpg-pousse__prix {
	position: relative;
	line-height: 1.35;
	text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/*  CTA par carte, et nom flouté des fragrances                        */
/* ------------------------------------------------------------------ */

#lpg-ah26 .lpg-pousse__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bronze);
}

#lpg-ah26 .lpg-pousse__fleche-cta {
	transition: transform 150ms ease-out;
}

#lpg-ah26 .lpg-pousse__carte:hover .lpg-pousse__fleche-cta,
#lpg-ah26 .lpg-pousse__carte:focus-visible .lpg-pousse__fleche-cta {
	transform: translateX(3px);
}

/*
 * Nom flouté : une image, pas du texte. Hauteur fixée pour que la carte ne
 * saute pas pendant le chargement.
 */
#lpg-ah26 .lpg-frag__nom-voile {
	display: block;
	width: 100%;
	max-width: 300px;
	height: 54px;
	margin: 0 auto 6px;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	user-select: none;
}

/* ------------------------------------------------------------------ */
/*  Mentions réglementaires du bloc parfum                             */
/* ------------------------------------------------------------------ */

/*
 * Les mentions de danger restent affichées, en petit et en sobre. Elles ne sont
 * pas là pour l'esthétique : le CLP impose de mentionner les types de danger sur
 * une offre à distance permettant de conclure l'achat.
 */
#lpg-ah26 .lpg-parfum__danger {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--bord-carte);
	border-radius: 10px;
	background: var(--creme);
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-parfum__danger-titre {
	display: block;
	margin-bottom: 4px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gris);
}

#lpg-ah26 .lpg-achat__reglement {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--gris-clair);
}

#lpg-ah26 .lpg-achat__reglement a {
	color: var(--bronze);
	text-decoration: underline;
}