/*
 * Exuvie - Pop-up : fenêtres d'inscription et d'offre.
 * Couleurs réglées dans Personnaliser : --exv-pop-titre, --exv-pop-bouton, --exv-pop-accent (sur :root).
 * Sélecteurs précédés de .exv-pops : le thème Kadence stylise boutons et champs (le champ actif y passe
 * en blanc), ces règles doivent passer devant.
 *
 * Trois styles d'écriture au plus par fenêtre, tous dans la police du site :
 * 1. le titre : 22 px, gras, vert Exuvie (le prix payé d'une offre a ce style) ;
 * 2. le texte : 15 px, normal, même vert (ancien prix barré, stock, jauge ; les mentions en 13 px) ;
 * 3. le bouton : blanc et gras sur la couleur des boutons.
 * La fenêtre des promos remplace le texte par la remise, grande, dans la couleur des boutons.
 */

.exv-pops {
	--exv-pop-fond: #f5f6f7;
	--exv-pop-ligne: #d5dcd9;
	--exv-pop-pale: #e7f3ef;
	--exv-pop-ombre: 0 18px 50px rgba(0, 30, 20, .25);
}

html.exv-pop-bloque {
	overflow: hidden;
}

/* Voile derrière les fenêtres centrales */
.exv-pop-voile {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(0, 30, 20, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility 0s .25s;
}

.exv-pop-voile.is-ouvert {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s;
}

/* Fenêtre */
.exv-pop {
	position: fixed;
	z-index: 99991;
	box-sizing: border-box;
	background: #fff;
	color: var(--exv-pop-titre);
	border-radius: 14px;
	box-shadow: var(--exv-pop-ombre);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}

.exv-pop *,
.exv-pop *::before,
.exv-pop *::after {
	box-sizing: border-box;
}

.exv-pop.is-ouverte {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.exv-pop--coin {
	left: 20px;
	bottom: 20px;
	width: 390px;
	max-width: calc(100vw - 40px);
	transform: translateY(24px);
}

.exv-pop--coin.is-ouverte {
	transform: none;
}

.exv-pop--centre {
	left: 50%;
	top: 50%;
	width: 600px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	transform: translate(-50%, -46%);
}

.exv-pop--centre.is-ouverte {
	transform: translate(-50%, -50%);
}

.exv-pop--petit {
	width: 440px;
}

/* Aperçu : fenêtre désactivée sur le site */
.exv-pop[data-exv-pop-inactive]::before,
.exv-pop-onglet[data-exv-pop-inactive]::before {
	content: "Désactivée : pas affichée sur le site";
	position: absolute;
	top: -12px;
	left: 16px;
	z-index: 2;
	background: #b32d2e;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 999px;
}

.exv-pop-poignee {
	display: none;
}

.exv-pops button.exv-pop-fermer {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--exv-pop-titre);
	cursor: pointer;
}

.exv-pops button.exv-pop-fermer:hover,
.exv-pops button.exv-pop-fermer:focus-visible {
	background: var(--exv-pop-fond);
	color: var(--exv-pop-titre);
}

/* Contenu */
.exv-pop-corps {
	display: flex;
	gap: 18px;
	padding: 22px;
}

.exv-pop-corps--offre {
	display: grid;
	grid-template-columns: 210px 1fr;
	align-items: center;
	gap: 22px;
	padding: 26px;
}

.exv-pop-corps--offre.exv-pop-corps--sans-visuel {
	grid-template-columns: 1fr;
}

.exv-pop-contenu {
	flex: 1;
	min-width: 0;
}

.exv-pop-contenu[hidden] {
	display: none;
}

.exv-pops .exv-pop p {
	margin: 0;
}

.exv-pops .exv-pop p[hidden] {
	display: none;
}

/* Style 1 : le titre */
.exv-pops .exv-pop .exv-pop-titre {
	padding-right: 30px;
	color: var(--exv-pop-titre);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.22;
}

/* Style 2 : le texte */
.exv-pops .exv-pop .exv-pop-texte {
	margin: 8px 0 14px;
	color: var(--exv-pop-titre);
	font-size: 15px;
	font-weight: 400;
}

/* Couverture de l'e-book */
.exv-pop-couverture-image {
	flex: none;
	width: 96px;
	height: auto;
	align-self: flex-start;
	border-radius: 4px;
	box-shadow: 0 6px 14px rgba(0, 30, 20, .25);
}

/* Formulaire */
.exv-pop-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.exv-pops .exv-pop input.exv-pop-email,
.exv-pops .exv-pop input.exv-pop-email:focus {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--exv-pop-ligne);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--exv-pop-titre);
	font: inherit;
	font-size: 15px;
}

.exv-pops .exv-pop input.exv-pop-email:focus {
	border-color: var(--exv-pop-accent);
	outline: 2px solid var(--exv-pop-accent);
	outline-offset: 1px;
}

.exv-pop-piege,
.exv-pop-cache {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.exv-pops .exv-pop .exv-pop-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--exv-pop-bouton);
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.exv-pops .exv-pop .exv-pop-bouton:hover,
.exv-pops .exv-pop .exv-pop-bouton:focus-visible {
	filter: brightness(.9);
	color: #fff;
}

.exv-pops .exv-pop .exv-pop-bouton[disabled] {
	opacity: .6;
	cursor: wait;
}

.exv-pops .exv-pop .exv-pop-erreur {
	color: #b32d2e;
	font-size: 14px;
}

.exv-pops .exv-pop .exv-pop-mentions {
	margin-top: 8px;
	color: var(--exv-pop-titre);
	font-size: 13px;
	font-weight: 400;
}

.exv-pops .exv-pop .exv-pop-mentions a {
	color: inherit;
	text-decoration: underline;
}

/* Après l'inscription */
.exv-pop-merci {
	padding: 8px 0;
	text-align: center;
}

.exv-pops .exv-pop .exv-pop-merci .exv-pop-titre {
	padding-right: 0;
}

.exv-pop-rond {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--exv-pop-pale);
	color: var(--exv-pop-accent);
}

/* Offre */
.exv-pop-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	background: var(--exv-pop-fond);
	object-fit: contain;
}

.exv-pop-image--paysage {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.exv-pop-pictogramme {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 10px;
	background: var(--exv-pop-pale);
	color: var(--exv-pop-titre);
}

/* Prix : l'ancien barré (style du texte), puis le prix payé (style du titre) */
.exv-pops .exv-pop .exv-pop-prix {
	margin: 10px 0 14px;
	color: var(--exv-pop-titre);
	font-size: 15px;
	font-weight: 400;
}

.exv-pop-prix s {
	margin-right: 8px;
}

.exv-pop-prix b {
	font-size: 22px;
	font-weight: 700;
}

.exv-pops .exv-pop .exv-pop-stock {
	margin: -6px 0 14px;
	color: var(--exv-pop-titre);
	font-size: 15px;
	font-weight: 400;
}

.exv-pop-jauge {
	margin: 0 0 14px;
	color: var(--exv-pop-titre);
	font-size: 15px;
}

.exv-pop-jauge[hidden] {
	display: none;
}

.exv-pop-jauge-barre {
	display: block;
	height: 8px;
	margin-bottom: 6px;
	overflow: hidden;
	border-radius: 4px;
	background: #eceff0;
}

.exv-pop-jauge-barre i {
	display: block;
	width: 2%;
	height: 100%;
	border-radius: 4px;
	background: var(--exv-pop-bouton);
	transition: width .6s ease;
}

/* Découvrez nos promos : titre, remise, vignettes des produits, bouton */
.exv-pop--promos {
	width: 540px;
}

.exv-pop-corps--promos {
	display: block;
	padding: 34px 34px 30px;
	text-align: center;
}

.exv-pops .exv-pop--promos .exv-pop-titre {
	padding: 0 24px;
}

/* Style 2 de cette fenêtre : la remise */
.exv-pops .exv-pop .exv-pop-remise {
	margin: 4px 0 20px;
	color: var(--exv-pop-bouton);
	font-size: 46px;
	font-weight: 800;
	line-height: 1.05;
}

.exv-pop-vignettes {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 22px;
}

.exv-pop-vignettes img {
	flex: 0 1 140px;
	min-width: 0;
	height: auto;
	aspect-ratio: 1;
	border: 1px solid var(--exv-pop-ligne);
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
}

/* Onglet après la fermeture de la bienvenue */
.exv-pops button.exv-pop-onglet {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99989;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--exv-pop-titre);
	box-shadow: 0 6px 18px rgba(0, 30, 20, .3);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s, transform .3s, visibility 0s .3s;
}

.exv-pops button.exv-pop-onglet.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .25s, transform .3s, visibility 0s;
}

.exv-pops button.exv-pop-onglet:hover {
	background: var(--exv-pop-accent);
	color: #fff;
}

/* Bouton « Prévenez-moi du retour en stock » sous « En rupture de stock » (fiche d'un produit en réassort).
   Le thème souligne les liens du contenu : soulignement retiré de force. */
.exv-pop-reassort {
	margin: 10px 0 0;
}

.exv-pop-reassort a.exv-pop-lien,
.exv-pop-reassort a.exv-pop-lien:hover,
.exv-pop-reassort a.exv-pop-lien:focus {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--exv-pop-accent, #0c8568);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--exv-pop-titre, #003d2d);
	font-weight: 700;
	text-decoration: none !important;
}

.exv-pop-reassort a.exv-pop-lien:hover,
.exv-pop-reassort a.exv-pop-lien:focus {
	background: #e7f3ef;
}

.exv-pop-reassort a.exv-pop-lien * {
	text-decoration: none !important;
}

/* Téléphone : volet en bas, moins de la moitié de l'écran pour la bienvenue */
@media (max-width: 767px) {
	.exv-pop--coin,
	.exv-pop--centre,
	.exv-pop--petit {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		max-height: 75vh;
		overflow-y: auto;
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
	}

	.exv-pop--coin {
		max-height: 56vh;
	}

	.exv-pop--coin.is-ouverte,
	.exv-pop--centre.is-ouverte,
	.exv-pop--petit.is-ouverte {
		transform: none;
	}

	.exv-pop-poignee {
		display: block;
		width: 42px;
		height: 4px;
		margin: 8px auto 0;
		border-radius: 2px;
		background: #d3dad7;
	}

	.exv-pops button.exv-pop-fermer {
		top: 4px;
		right: 4px;
		width: 44px;
		height: 44px;
	}

	.exv-pop-corps {
		padding: 10px 18px 18px;
	}

	.exv-pop-corps--offre {
		grid-template-columns: 96px 1fr;
		gap: 14px;
		padding: 10px 18px 18px;
	}

	.exv-pop-corps--offre.exv-pop-corps--sans-visuel {
		grid-template-columns: 1fr;
	}

	.exv-pop-couverture-image {
		display: none;
	}

	.exv-pops .exv-pop .exv-pop-titre {
		font-size: 19px;
	}

	.exv-pop-corps--promos {
		padding: 14px 18px 22px;
	}

	.exv-pops .exv-pop .exv-pop-remise {
		margin: 4px 0 16px;
		font-size: 38px;
	}

	.exv-pop-vignettes {
		gap: 8px;
		margin-bottom: 16px;
	}

	.exv-pop-form {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.exv-pops .exv-pop input.exv-pop-email {
		flex: 1 1 160px;
		width: auto;
	}

	.exv-pops .exv-pop .exv-pop-form .exv-pop-bouton {
		flex: 0 0 auto;
		width: auto;
	}

	.exv-pops .exv-pop .exv-pop-erreur {
		flex-basis: 100%;
	}

	.exv-pops button.exv-pop-onglet {
		left: 12px;
		bottom: 12px;
		padding: 8px 14px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.exv-pop,
	.exv-pop-voile,
	.exv-pops button.exv-pop-onglet {
		transition: none;
	}
}