/* Révélation produits — fonds transparents, sans ombre portée : le bloc se fond dans la page. */

.rvp {
	--rvp-couleur: #e4572e;
	--rvp-trait: rgba(128, 128, 128, .22);
	--rvp-scan: 0%;
	--rvp-intro: 0%;
	box-sizing: border-box;
	max-width: 720px;
	margin: 2rem auto;
	padding: 0 16px;
	background: transparent;
	color: inherit;
	text-align: center;
}

.rvp *,
.rvp *::before,
.rvp *::after {
	box-sizing: inherit;
}

/* Chargement : le contenu garde sa place (pas de saut de page) mais reste invisible, le loader s'affiche au centre. */

.rvp {
	position: relative;
}

.rvp > :not(.rvp-chargeur) {
	transition: opacity .5s ease;
}

.rvp-chargement > :not(.rvp-chargeur) {
	opacity: 0;
	pointer-events: none;
}

.rvp-chargeur {
	display: none;
}

.rvp-chargement .rvp-chargeur {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rvp-chargeur-pixels {
	display: grid;
	grid-template-columns: repeat(3, 12px);
	gap: 4px;
}

.rvp-chargeur-pixels span {
	width: 12px;
	height: 12px;
	background: var(--rvp-couleur);
	animation: rvp-pixel 1.2s ease-in-out infinite;
}

.rvp-chargeur-pixels span:nth-child(2),
.rvp-chargeur-pixels span:nth-child(4) { animation-delay: .15s; }
.rvp-chargeur-pixels span:nth-child(3),
.rvp-chargeur-pixels span:nth-child(5),
.rvp-chargeur-pixels span:nth-child(7) { animation-delay: .3s; }
.rvp-chargeur-pixels span:nth-child(6),
.rvp-chargeur-pixels span:nth-child(8) { animation-delay: .45s; }
.rvp-chargeur-pixels span:nth-child(9) { animation-delay: .6s; }

@keyframes rvp-pixel {
	0%, 100% { opacity: .15; transform: scale(.7); }
	50% { opacity: 1; transform: none; }
}

.rvp-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Titres : « avant » pendant le compte à rebours et l'intro, « après » une fois révélé */

.rvp-titre {
	margin: 0 0 .25rem;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	line-height: 1.2;
	color: inherit;
}

.rvp-titre-apres,
.rvp-termine .rvp-titre-avant {
	display: none;
}

.rvp-termine .rvp-titre-apres,
.rvp-intro .rvp-titre-avant {
	display: inline;
}

.rvp-intro .rvp-titre-apres {
	display: none;
}

.rvp-date {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	opacity: .7;
}

.rvp-termine:not(.rvp-intro) .rvp-date {
	display: none;
}

/* Slider */

.rvp-visuel {
	position: relative;
	margin-top: 1rem;
	overflow: hidden;
	background: transparent;
}

.rvp-slides {
	position: absolute;
	inset: 0;
}

.rvp-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .9s ease;
}

.rvp-slide.est-active {
	z-index: 1;
	opacity: 1;
}

.rvp-bruit,
.rvp-crypte,
.rvp-lien,
.rvp-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.rvp-image,
.rvp-crypte {
	max-width: none;
	margin: 0;
	object-fit: contain;
	background: transparent;
}

/* Paliers cryptés empilés : seul celui qui correspond à la position du scan est visible. */
.rvp-crypte {
	opacity: 0;
	transition: opacity .12s linear;
}

.rvp[data-palier="0"] .rvp-palier-0,
.rvp[data-palier="1"] .rvp-palier-1,
.rvp[data-palier="2"] .rvp-palier-2,
.rvp[data-palier="3"] .rvp-palier-3 {
	opacity: 1;
}

/* Le cryptage ne sert plus une fois la révélation terminée (il reste visible pendant l'intro). */
.rvp-termine:not(.rvp-intro) .rvp-bruit,
.rvp-termine:not(.rvp-intro) .rvp-crypte {
	display: none;
}

.rvp-legende {
	min-height: 1.5em;
	margin: .6rem 0 0;
	font-size: clamp(1rem, 2.6vw, 1.25rem);
	font-weight: 700;
}

.rvp-legende:empty {
	min-height: 0;
	margin: 0;
}

.rvp .rvp-fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: -21px 0 0;
	padding: 0 0 4px;
	border: 1px solid var(--rvp-trait);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rvp .rvp-fleche:hover,
.rvp .rvp-fleche:focus-visible {
	border-color: var(--rvp-couleur);
	color: var(--rvp-couleur);
	opacity: 1;
}

.rvp-precedente {
	left: 6px;
}

.rvp-suivante {
	right: 6px;
}

.rvp-points {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.rvp .rvp-point {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--rvp-trait);
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rvp .rvp-point[aria-current="true"] {
	width: 26px;
	background: var(--rvp-couleur);
}

/* Ligne de scan : allers-retours pilotés par le script (variable --rvp-scan) */

.rvp-front {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rvp-scan);
	z-index: 2;
	width: 2px;
	margin-left: -1px;
	background: var(--rvp-couleur);
	pointer-events: none;
}

/* Halo lumineux qui accompagne la ligne (pas une ombre portée) */
.rvp-front::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -14px;
	width: 30px;
	background: linear-gradient(90deg, transparent, var(--rvp-couleur), transparent);
	opacity: .25;
}

.rvp-termine .rvp-front {
	display: none;
}

/* Barre de progression */

.rvp-progression {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 1.25rem 0 1rem;
}

.rvp-barre {
	flex: 1;
	height: 14px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--rvp-trait);
}

.rvp-barre-remplissage {
	height: 100%;
	border-radius: inherit;
	background-color: var(--rvp-couleur);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%);
	background-size: 24px 24px;
	transition: width 1s linear;
	animation: rvp-rayures 1s linear infinite;
}

@keyframes rvp-rayures {
	to { background-position: 24px 0; }
}

.rvp-pourcentage {
	min-width: 5.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Compte à rebours */

.rvp-compteur {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(6px, 2vw, 14px);
	max-width: 480px;
	margin: 0 auto 1.25rem;
}

.rvp-case {
	padding: .4em .3em;
	background: transparent;
}

.rvp-nombre {
	display: block;
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--rvp-couleur);
}

.rvp-unite {
	display: block;
	margin-top: .35em;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
}

.rvp-termine .rvp-progression,
.rvp-termine .rvp-compteur {
	display: none;
}

/* Bouton */

.rvp-action {
	margin-top: 1.25rem;
}

.rvp-action[hidden] {
	display: none;
}

.rvp .rvp-bouton {
	display: inline-block;
	padding: .85em 1.8em;
	border-radius: 999px;
	background: var(--rvp-couleur);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
	transition: transform .2s ease, opacity .2s ease;
}

.rvp .rvp-bouton:hover,
.rvp .rvp-bouton:focus-visible {
	color: #fff;
	opacity: .9;
	transform: translateY(-2px);
}

/* Intro après la date : la barre file jusqu'à 100 % et la ligne dévoile la première photo */

.rvp-intro .rvp-progression {
	display: flex;
}

.rvp-intro .rvp-compteur {
	display: grid;
}

.rvp-intro .rvp-barre-remplissage {
	transition: none;
}

.rvp-intro .rvp-fleche,
.rvp-intro .rvp-points,
.rvp-intro .rvp-legende,
.rvp-intro .rvp-action {
	visibility: hidden;
}

.rvp-intro .rvp-slide.est-active .rvp-bruit,
.rvp-intro .rvp-slide.est-active .rvp-crypte {
	clip-path: inset(0 0 0 var(--rvp-intro));
}

.rvp-intro .rvp-slide.est-active .rvp-image {
	clip-path: inset(0 calc(100% - var(--rvp-intro)) 0 0);
}

.rvp-intro .rvp-front {
	display: block;
	left: var(--rvp-intro);
}

/* Ken Burns : zoom lent sur les photos révélées, 3 mouvements qui alternent d'une gamme à l'autre.
   Zoom depuis le centre, sans jamais dépasser la taille normale (échelle 0,9 à 1) : le produit n'est jamais coupé.
   La photo qui sort (« est-sortante ») continue son mouvement pendant le fondu. */

.rvp-kenburns.rvp-termine:not(.rvp-intro) .rvp-slide:is(.est-active, .est-sortante) .rvp-image {
	animation: rvp-kb-1 var(--rvp-kenburns-duree, 6s) ease-out forwards;
	transform-origin: 50% 50%;
	will-change: transform;
}

.rvp-kenburns.rvp-termine:not(.rvp-intro) .rvp-slide:nth-child(3n+2):is(.est-active, .est-sortante) .rvp-image {
	animation-name: rvp-kb-2;
}

.rvp-kenburns.rvp-termine:not(.rvp-intro) .rvp-slide:nth-child(3n+3):is(.est-active, .est-sortante) .rvp-image {
	animation-name: rvp-kb-3;
}

/* Une seule photo : le mouvement va et vient en continu. */
.rvp-kenburns.rvp-termine:not(.rvp-intro) .rvp-slide:only-child .rvp-image {
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/* Zoom centré sur le milieu de la photo, sans glissement. */

/* 1re gamme (et 4e…) : part de la taille normale (comme à la fin de l'intro) et recule. */
@keyframes rvp-kb-1 {
	from { transform: scale(1); }
	to { transform: scale(.9); }
}

/* 2e gamme (et 5e…) : s'avance jusqu'à la taille normale. */
@keyframes rvp-kb-2 {
	from { transform: scale(.9); }
	to { transform: scale(1); }
}

/* 3e gamme (et 6e…) : s'avance doucement. */
@keyframes rvp-kb-3 {
	from { transform: scale(.92); }
	to { transform: scale(.98); }
}

/* Moment de la révélation */

.rvp-revele .rvp-visuel {
	animation: rvp-flash 1.6s ease;
}

.rvp-revele .rvp-titre,
.rvp-revele .rvp-legende,
.rvp-revele .rvp-points,
.rvp-revele .rvp-action {
	animation: rvp-apparition .8s .3s both;
}

@keyframes rvp-flash {
	0% { filter: brightness(2.4) saturate(0); transform: scale(.98); }
	100% { filter: none; transform: none; }
}

@keyframes rvp-apparition {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
	.rvp-progression {
		gap: 8px;
	}

	.rvp-pourcentage {
		min-width: 4.8em;
		font-size: .9rem;
	}

	.rvp .rvp-fleche {
		width: 34px;
		height: 34px;
		margin-top: -17px;
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rvp *,
	.rvp-revele .rvp-visuel {
		animation: none !important;
		transition: none !important;
	}

	.rvp-front {
		display: none;
	}
}