/**
 * Fenêtre de bienvenue et sa pastille.
 *
 * ⚠️ Les couleurs de l'habillage sont regroupées ICI, en tête, et nulle part
 * ailleurs dans le fichier. Le 31/08/2026, le passage à l'habillage blanc/vert
 * a verdi tout le site SAUF les modules qui écrivaient leurs teintes en dur au
 * fil de leurs règles : il avait fallu balayer les feuilles servies et
 * surcharger sélecteur par sélecteur. Un seul bloc à relire, donc.
 *
 * Les jetons du thème sont lus en priorité quand ils existent ; les valeurs
 * écrites ici ne servent que de repli.
 */

.lupeo-popup,
.lupeo-popup-pastille {
	--lp-vert: var(--lupeo-vert, #0b996e);
	--lp-vert-fonce: var(--lupeo-vert-fonce, #076b4e);
	--lp-encre: var(--lupeo-encre, #16211c);
	--lp-gris: #5b6b64;
	--lp-filet: #dfe5e2;
	--lp-fond: #ffffff;
	--lp-rayon: 16px;
}

/* ---------------------------------------------------------------- la fenêtre */

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

.lupeo-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lupeo-popup__voile {
	position: absolute;
	inset: 0;
	background: rgba(12, 26, 21, 0.55);
	animation: lupeo-popup-voile 0.25s ease-out;
}

.lupeo-popup__boite {
	position: relative;
	width: 100%;
	max-width: 430px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--lp-fond);
	border-radius: var(--lp-rayon);
	padding: 34px 30px 26px;
	box-shadow: 0 24px 60px rgba(12, 26, 21, 0.28);
	text-align: center;
	animation: lupeo-popup-entree 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lupeo-popup__croix {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: var(--lp-gris);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.lupeo-popup__croix:hover,
.lupeo-popup__croix:focus-visible {
	background: #f2f5f4;
	color: var(--lp-encre);
}

.lupeo-popup__titre {
	margin: 0 0 10px;
	font-size: 25px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--lp-encre);
}

.lupeo-popup__titre strong {
	color: var(--lp-vert);
	font-weight: 700;
	white-space: nowrap;
}

.lupeo-popup__texte {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lp-gris);
}

/* ------------------------------------------------------------- le formulaire */

.lupeo-popup__champ {
	display: block;
	position: relative;
	margin-bottom: 12px;
	text-align: left;
}

/*
 * Le libellé flotte dans le champ tant qu'il est vide, et remonte dès qu'on
 * écrit ou qu'on met le champ au point.
 *
 * ⚠️ Vu sur téléphone le 31/08/2026 : dans la première version, le libellé
 * était posé en haut du champ et n'en bougeait jamais — le texte saisi
 * s'écrivait par-dessus. C'est `:placeholder-shown` qui distingue le champ
 * vide du champ rempli, et il exige deux choses : un `placeholder` sur
 * l'input (une espace suffit), et le libellé placé APRÈS lui dans le
 * document, puisque le CSS ne sait cibler qu'un frère qui suit.
 *
 * ⚠️ Revu le 07/09/2026 — confirmé chevauchant sur iPhone Safari réel alors
 * que Chrome (desktop et mobile simulé) rendait juste. La cause : le libellé
 * au repos se centrait avec `top: 50%` + `transform: translateY(-50%)`, une
 * moitié de sa PROPRE hauteur de ligne — et l'état remonté écrasait ce
 * transform par une valeur fixe (`-19px`) qui ne recalcule rien. Tant que
 * `line-height` restait sur `normal`, chaque moteur mesurait cette hauteur de
 * ligne à sa façon (WebKit iOS la rend plus haute que Blink pour la même
 * police système), et l'écart se répercutait deux fois : dans le -50% du
 * repos, et dans la position réelle du texte tapé dans l'input, lui aussi en
 * `line-height: normal`. D'où un libellé qui remontait bien, mais pas assez
 * haut sur iPhone pour dégager le texte saisi.
 *
 * Le correctif fixe `top` et `line-height` en dur pour les deux états, et le
 * padding de l'input : plus aucune valeur n'est calculée à partir d'une
 * métrique de police que les moteurs mesurent différemment.
 */
.lupeo-popup__label {
	position: absolute;
	top: 20px;
	left: 16px;
	line-height: 18px;
	font-size: 15px;
	color: var(--lp-gris);
	pointer-events: none;
	transition: top 0.14s ease-out, font-size 0.14s ease-out, line-height 0.14s ease-out;
}

.lupeo-popup__champ input:focus + .lupeo-popup__label,
.lupeo-popup__champ input:not(:placeholder-shown) + .lupeo-popup__label {
	/* Remonté dans le tiers haut du champ, en plus petit — position et
	   interligne fixes, pour dégager le texte saisi quel que soit le moteur. */
	top: 7px;
	line-height: 14px;
	font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
	.lupeo-popup__label {
		transition: none;
	}
}

.lupeo-popup__champ input {
	/* 58 px : le champ reste confortable au pouce, et laisse la place au
	   libellé remonté au-dessus du texte saisi. Le padding-top est monté à
	   26 px (repli du libellé jusqu'à 21 px) pour garder un dégagement net
	   sur iPhone Safari ; line-height fixe pour que le texte saisi démarre
	   au même endroit sur tous les moteurs. */
	width: 100%;
	height: 58px;
	padding: 26px 15px 6px;
	border: 1px solid var(--lp-filet);
	border-radius: 10px;
	background: var(--lp-fond);
	font-size: 16px; /* Sous 16 px, Safari iOS zoome à la mise au point. */
	line-height: 20px;
	color: var(--lp-encre);
	box-sizing: border-box;
}

.lupeo-popup__champ input:focus {
	outline: 2px solid var(--lp-vert);
	outline-offset: 1px;
	border-color: var(--lp-vert);
}

.lupeo-popup__champ--faux input {
	border-color: #d63d3d;
}

.lupeo-popup__erreur {
	margin: 0 0 10px;
	font-size: 13px;
	color: #d63d3d;
	text-align: left;
}

.lupeo-popup__envoi {
	width: 100%;
	height: 54px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-vert);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.lupeo-popup__envoi:hover,
.lupeo-popup__envoi:focus-visible {
	background: var(--lp-vert-fonce);
}

.lupeo-popup__envoi[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.lupeo-popup__mention {
	margin: 16px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--lp-gris);
}

.lupeo-popup__mention a {
	color: var(--lp-gris);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ la suite */

.lupeo-popup__merci .lupeo-popup__titre {
	color: var(--lp-vert);
}

/* ----------------------------------------------------------------- pastille */

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

.lupeo-popup-pastille {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 99998;
	display: flex;
	align-items: center;
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--lp-filet);
	border-radius: 999px;
	background: var(--lp-fond);
	box-shadow: 0 6px 20px rgba(12, 26, 21, 0.16);
	animation: lupeo-popup-entree 0.3s ease-out;
}

.lupeo-popup-pastille:hover {
	border-color: var(--lp-vert);
}

/* La pastille ne porte que le montant : rien d'autre n'a besoin d'être lu. */
.lupeo-popup-pastille__ouvre {
	padding: 8px 6px 8px 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.lupeo-popup-pastille__montant {
	font-size: 15px;
	font-weight: 700;
	color: var(--lp-vert);
	white-space: nowrap;
}

/*
 * La croix écarte l'offre. Elle est petite mais sa zone de clic fait 32 px :
 * en dessous, on la rate au pouce et on ouvre la fenêtre en voulant la fermer.
 */
.lupeo-popup-pastille__croix {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 2px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--lp-gris);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.lupeo-popup-pastille__croix:hover,
.lupeo-popup-pastille__croix:focus-visible {
	background: #f2f5f4;
	color: var(--lp-encre);
}

/*
 * La barre d'achat colle en bas sur la fiche produit : la pastille se relève
 * pour ne pas passer dessous.
 */
body.single-product .lupeo-popup-pastille {
	bottom: 84px;
}

/* ---------------------------------------------------------------- animations */

@keyframes lupeo-popup-entree {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lupeo-popup-voile {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lupeo-popup__boite,
	.lupeo-popup__voile,
	.lupeo-popup-pastille {
		animation: none;
	}
}

@media (max-width: 480px) {
	.lupeo-popup__boite {
		padding: 30px 20px 22px;
	}

	.lupeo-popup__titre {
		font-size: 22px;
	}

	.lupeo-popup-pastille {
		left: 12px;
		bottom: 12px;
	}
}