/* Équipement, ProgresPass (2 pistes), profil accueil, animations cosmétiques "vidéo" */

/* ---------------------------------------------------------------------------
 * Profil accueil
 * ------------------------------------------------------------------------ */
.pp-home-profile { padding: 20px 0 0; }

.pp-home-profile__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 2px solid var(--pp-line-soft);
	border-radius: 18px;
	background: linear-gradient(135deg, #f8fbff, #fff);
}

.pp-home-profile__info { flex: 1; min-width: 140px; }
.pp-home-profile__hello { margin: 0 0 6px; font-weight: 800; font-size: 1.1rem; }
.pp-home-profile__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------------------
 * Page équipement
 * ------------------------------------------------------------------------ */
.pp-equip-head { margin-bottom: 16px; }

.pp-equip-profile {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	margin-bottom: 22px;
}
.pp-equip-profile__info { flex: 1; min-width: 120px; }
.pp-equip-profile__info .pp-muted { margin: 8px 0 0; }

.pp-equip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
	align-items: start;
}
@media (max-width: 980px) { .pp-equip-grid { grid-template-columns: 1fr; } }

.pp-equip-col__title {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 800;
}

.pp-equip-empty {
	margin: 0;
	padding: 18px;
	border: 2px dashed var(--pp-line-soft);
	border-radius: 12px;
	color: var(--pp-muted);
	text-align: center;
	font-size: 0.9rem;
}

.pp-equip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.pp-equip-item {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 14px;
	border: 2px solid var(--pp-line-soft);
	background: #fafafa;
}
.pp-equip-item--equipped {
	border-color: var(--pp-blue, #1e6fff);
	background: linear-gradient(90deg, #eef4ff, #fff);
	box-shadow: inset 3px 0 0 var(--pp-blue, #1e6fff);
}
.pp-equip-item--prem {
	border-color: #f5c518;
	background: linear-gradient(90deg, #fff9e6, #fff);
}
.pp-equip-item__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-equip-item__meta strong { font-size: 0.95rem; }
.pp-equip-item__lvl { font-size: 0.76rem; color: var(--pp-muted); display: flex; gap: 6px; align-items: center; }

.pp-tag-prem {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f5c518, #e0a800);
	color: #4a3500;
	font-size: 0.64rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pp-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; }
.pp-tag--ok { background: #e7f7ed; color: #1b8a4b; border: 1px solid #9bd9b3; }

/* aperçu avatar (cercle) */
.pp-equip-preview--avatar {
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 4px;
}
.pp-equip-preview__face {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	font-size: 1.6rem;
}

/* aperçu bouton */
.pp-equip-preview--btn { padding: 6px; }
.pp-equip-preview__btn {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--pp-blue, #1e6fff);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Bordures avatar dynamiques (dégradé + vitesse pilotés inline)
 * ------------------------------------------------------------------------ */
.pp-avatar-border--dyn { padding: 3px; border-radius: 50%; }
.pp-avatar-border--starter { background: #e0e0e0; padding: 3px; border-radius: 50%; }

@keyframes pp-border-spin {
	to { background-position: 280% 50%; }
}

/*
 * Rotation des dégradés CONIQUES (roue, segments, comète) via un angle animé.
 * On anime un custom property au lieu de `transform`/`filter` : l'avatar placé
 * au centre de l'anneau n'est ainsi NI tourné NI teinté.
 */
@property --pp-a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes pp-bd-rotate {
	to { --pp-a: 360deg; }
}

/* ---------------------------------------------------------------------------
 * Animations bouton générer — effets CONTINUS façon vidéo, réalistes
 * Structure : le wrap porte la classe .pp-gen-anim--*. Le bouton
 * .pp-btn--gen-fx est au premier plan (z-index 2). Plusieurs couches
 * animées (wrap ::before/::after + bouton ::before/::after) créent des
 * effets riches et vivants. Le JS ajoute en plus des particules au clic
 * et des particules ambiantes (braises, flocons, étoiles…).
 * ------------------------------------------------------------------------ */
.pp-generate-anim-wrap {
	position: relative;
	display: inline-block;
	padding: 18px 16px;
	isolation: isolate;
}
.pp-btn--gen-fx { position: relative; z-index: 2; overflow: visible; }

/* couches d'effet derrière le bouton */
.pp-generate-anim-wrap::before,
.pp-generate-anim-wrap::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 999px;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
}
/* couches d'effet supplémentaires portées par le bouton lui-même */
.pp-gen-anim--fire .pp-btn--gen-fx::before,
.pp-gen-anim--fire .pp-btn--gen-fx::after,
.pp-gen-anim--phoenix .pp-btn--gen-fx::before,
.pp-gen-anim--phoenix .pp-btn--gen-fx::after,
.pp-gen-anim--ember .pp-btn--gen-fx::before,
.pp-gen-anim--ember .pp-btn--gen-fx::after,
.pp-gen-anim--burst .pp-btn--gen-fx::before,
.pp-gen-anim--lightning .pp-btn--gen-fx::before,
.pp-gen-anim--thunder .pp-btn--gen-fx::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: -1;
}

/* ===== FEU / PHÉNIX / BRAISES / EXPLOSION — grosses flammes réalistes ===== */
.pp-gen-anim--fire .pp-btn--gen-fx,
.pp-gen-anim--phoenix .pp-btn--gen-fx,
.pp-gen-anim--ember .pp-btn--gen-fx,
.pp-gen-anim--burst .pp-btn--gen-fx {
	background: linear-gradient(180deg, #ffd24a 0%, #ff8a1e 40%, #e8470f 75%, #b71c1c 100%) !important;
	color: #fff;
	text-shadow: 0 1px 2px rgba(120, 20, 0, 0.6);
	box-shadow: 0 0 22px rgba(255, 90, 0, 0.6), 0 -6px 26px rgba(255, 150, 0, 0.45);
}
.pp-gen-anim--fire .pp-btn--gen-fx::before,
.pp-gen-anim--fire .pp-btn--gen-fx::after,
.pp-gen-anim--phoenix .pp-btn--gen-fx::before,
.pp-gen-anim--phoenix .pp-btn--gen-fx::after,
.pp-gen-anim--ember .pp-btn--gen-fx::before,
.pp-gen-anim--ember .pp-btn--gen-fx::after,
.pp-gen-anim--burst .pp-btn--gen-fx::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: -1;
}
/* corps de flamme principal — plus haut et plus large */
.pp-gen-anim--fire::before,
.pp-gen-anim--phoenix::before,
.pp-gen-anim--ember::before,
.pp-gen-anim--burst::before {
	opacity: 1;
	inset: auto 4px -6px 4px;
	height: 210%;
	border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
	background:
		radial-gradient(ellipse 34% 78% at 22% 100%, rgba(255,236,150,0.98), rgba(255,150,0,0.65) 42%, transparent 72%),
		radial-gradient(ellipse 40% 92% at 50% 100%, rgba(255,170,20,0.98), rgba(230,70,15,0.6) 48%, transparent 74%),
		radial-gradient(ellipse 34% 80% at 78% 100%, rgba(255,120,0,0.95), transparent 70%);
	filter: blur(4px);
	transform-origin: 50% 100%;
	animation: pp-flame-body 0.45s ease-in-out infinite alternate;
}
/* langue centrale lumineuse */
.pp-gen-anim--fire::after,
.pp-gen-anim--phoenix::after,
.pp-gen-anim--ember::after,
.pp-gen-anim--burst::after {
	opacity: 1;
	inset: auto 16px 0 16px;
	height: 120%;
	border-radius: 50% 50% 46% 46% / 65% 65% 35% 35%;
	background:
		radial-gradient(ellipse 48% 88% at 50% 100%, rgba(255,255,210,0.95), rgba(255,120,0,0.45) 52%, transparent 78%);
	filter: blur(2px);
	transform-origin: 50% 100%;
	mix-blend-mode: screen;
	animation: pp-flame-core 0.28s ease-in-out infinite alternate;
}
/* lueur de chaleur ondulante (couche bouton) */
.pp-gen-anim--fire .pp-btn--gen-fx::after,
.pp-gen-anim--phoenix .pp-btn--gen-fx::after,
.pp-gen-anim--ember .pp-btn--gen-fx::after {
	width: 90%;
	height: 80%;
	bottom: auto;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255,90,0,0.55), transparent 70%);
	filter: blur(12px);
	z-index: -2;
	animation: pp-heat 1.3s ease-in-out infinite;
}
.pp-gen-anim--phoenix .pp-btn--gen-fx {
	background: linear-gradient(180deg, #fff0a8 0%, #ffb020 38%, #ff5a00 72%, #c2185b 100%) !important;
	box-shadow: 0 0 26px rgba(255, 120, 0, 0.7), 0 -8px 30px rgba(255, 60, 120, 0.4);
}
.pp-gen-anim--ember .pp-btn--gen-fx {
	background: linear-gradient(180deg, #ffe08a 0%, #ff7a18 42%, #b32d00 80%) !important;
	box-shadow: 0 0 24px rgba(255, 100, 0, 0.65), 0 -8px 28px rgba(255, 60, 0, 0.4);
}
.pp-gen-anim--burst .pp-btn--gen-fx {
	background: linear-gradient(180deg, #ffc24a, #ff7a18 55%, #d62828) !important;
	box-shadow: 0 0 28px rgba(255, 120, 0, 0.75);
}

@keyframes pp-flame-body {
	0%   { transform: scaleY(1) scaleX(1) skewX(0deg) translateY(0); filter: blur(3px) hue-rotate(0deg) brightness(1); }
	25%  { transform: scaleY(1.12) scaleX(0.96) skewX(3deg) translateY(-4px); }
	50%  { transform: scaleY(1.05) scaleX(1.03) skewX(-2deg) translateY(-2px); filter: blur(4px) hue-rotate(-8deg) brightness(1.1); }
	75%  { transform: scaleY(1.18) scaleX(0.94) skewX(2deg) translateY(-6px); }
	100% { transform: scaleY(1.08) scaleX(1.02) skewX(-3deg) translateY(-3px); filter: blur(3px) hue-rotate(6deg) brightness(1.05); }
}
@keyframes pp-flame-core {
	0%   { transform: scaleY(1) skewX(0deg); opacity: 0.85; }
	50%  { transform: scaleY(1.22) skewX(4deg); opacity: 1; }
	100% { transform: scaleY(1.06) skewX(-5deg); opacity: 0.9; }
}
@keyframes pp-heat {
	0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
	50%      { transform: translate(-50%, -54%) scale(1.18); opacity: 0.85; }
}

/* ===== ÉCLAIR / FOUDRE — flashs + arcs ===== */
.pp-gen-anim--lightning .pp-btn--gen-fx,
.pp-gen-anim--thunder .pp-btn--gen-fx {
	background: linear-gradient(180deg, #1b2a6b, #0a1330) !important;
	color: #fdfdcf;
	box-shadow: 0 0 20px rgba(255, 235, 59, 0.6), inset 0 0 12px rgba(120,200,255,0.4);
	animation: pp-zap-glow 1.6s ease-in-out infinite;
}
/* arcs électriques qui zèbrent le bouton */
.pp-gen-anim--lightning::before,
.pp-gen-anim--thunder::before {
	opacity: 1;
	inset: 4px;
	border-radius: 999px;
	background:
		linear-gradient(105deg, transparent 44%, rgba(255,255,170,0.95) 49%, transparent 53%),
		linear-gradient(72deg, transparent 58%, rgba(130,205,255,0.9) 63%, transparent 67%),
		linear-gradient(140deg, transparent 30%, rgba(200,160,255,0.7) 35%, transparent 39%);
	mix-blend-mode: screen;
	filter: blur(0.4px);
	animation: pp-zap-flash 2.4s steps(1) infinite;
}
/* halo de décharge */
.pp-gen-anim--lightning::after,
.pp-gen-anim--thunder::after {
	opacity: 1;
	inset: -4px;
	background: radial-gradient(circle, rgba(255,255,150,0.0), transparent 70%);
	animation: pp-zap-burst 2.4s steps(1) infinite;
}
@keyframes pp-zap-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(255,235,59,0.5), inset 0 0 12px rgba(120,200,255,0.35); filter: brightness(1); }
	48%      { box-shadow: 0 0 18px rgba(255,235,59,0.5); }
	50%      { box-shadow: 0 0 40px rgba(255,255,160,1), inset 0 0 22px rgba(180,230,255,0.9); filter: brightness(1.5); }
	53%      { box-shadow: 0 0 18px rgba(255,235,59,0.5); filter: brightness(1); }
}
@keyframes pp-zap-flash {
	0%, 47%, 100% { opacity: 0; }
	49%           { opacity: 1; }
	51%           { opacity: 0.2; }
	52%           { opacity: 0.9; }
	55%           { opacity: 0; }
}
@keyframes pp-zap-burst {
	0%, 47%, 100% { opacity: 0; background: radial-gradient(circle, rgba(255,255,150,0.0), transparent 70%); }
	50%           { opacity: 1; background: radial-gradient(circle, rgba(255,255,180,0.7), transparent 70%); }
	56%           { opacity: 0; }
}

/* ===== ÉNERGIE / PLASMA — vortex tournant ===== */
.pp-gen-anim--energy .pp-btn--gen-fx,
.pp-gen-anim--plasma .pp-btn--gen-fx {
	box-shadow: 0 0 22px rgba(66, 165, 245, 0.6);
	animation: pp-pulse 1.4s ease-in-out infinite;
}
.pp-gen-anim--energy::before,
.pp-gen-anim--plasma::before {
	opacity: 1;
	inset: -3px;
	background: conic-gradient(from 0deg, rgba(66,165,245,0) 0%, rgba(66,165,245,0.85) 20%, rgba(124,77,255,0.85) 45%, rgba(0,229,255,0.7) 70%, rgba(66,165,245,0) 100%);
	filter: blur(5px);
	animation: pp-spin 2.2s linear infinite;
}
.pp-gen-anim--energy::after,
.pp-gen-anim--plasma::after {
	opacity: 1;
	inset: 4px;
	background: conic-gradient(from 180deg, rgba(255,255,255,0) 0%, rgba(180,230,255,0.6) 30%, rgba(255,255,255,0) 60%);
	filter: blur(3px);
	animation: pp-spin 1.5s linear infinite reverse;
}
.pp-gen-anim--plasma::before { background: conic-gradient(from 0deg, rgba(224,64,251,0) 0%, rgba(224,64,251,0.85) 22%, rgba(0,229,255,0.8) 55%, rgba(124,77,255,0.7) 78%, rgba(224,64,251,0) 100%); }
@keyframes pp-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ===== NÉON — tube lumineux pulsant ===== */
.pp-gen-anim--neon .pp-btn--gen-fx {
	background: #14021f !important;
	color: #fff;
	border: 2px solid rgba(224,64,251,0.9);
	box-shadow: 0 0 8px #e040fb, 0 0 18px #e040fb, 0 0 34px #7c4dff, inset 0 0 10px rgba(224,64,251,0.6);
	text-shadow: 0 0 6px #fff, 0 0 12px #e040fb;
	animation: pp-neon 1.1s ease-in-out infinite;
}
@keyframes pp-neon {
	0%, 100% { box-shadow: 0 0 8px #e040fb, 0 0 18px #e040fb, 0 0 34px #7c4dff, inset 0 0 10px rgba(224,64,251,0.6); }
	45%      { box-shadow: 0 0 4px #e040fb, 0 0 8px #7c4dff; }
	50%      { box-shadow: 0 0 14px #18ffff, 0 0 30px #18ffff, 0 0 52px #e040fb, inset 0 0 16px rgba(24,255,255,0.7); }
}

/* ===== GLACE / GIVRE — cristaux brillants ===== */
.pp-gen-anim--ice .pp-btn--gen-fx,
.pp-gen-anim--frost .pp-btn--gen-fx {
	background: linear-gradient(180deg, #eafaff, #9ad7ff 55%, #2f8fd6) !important;
	color: #06324f;
	box-shadow: 0 0 18px rgba(127, 219, 255, 0.8), inset 0 0 14px rgba(255,255,255,0.7);
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
.pp-gen-anim--ice::before,
.pp-gen-anim--frost::before {
	opacity: 1;
	inset: 2px;
	border-radius: 999px;
	background:
		linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.85) 45%, transparent 55%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 40%);
	mix-blend-mode: screen;
	animation: pp-ice-sheen 2.6s ease-in-out infinite;
}
.pp-gen-anim--ice::after,
.pp-gen-anim--frost::after {
	opacity: 1;
	inset: -2px;
	background: radial-gradient(circle, rgba(180,240,255,0.5), transparent 70%);
	animation: pp-shimmer 1.8s ease-in-out infinite;
}
@keyframes pp-ice-sheen {
	0%   { background-position: -120% 0, 0 0; opacity: 0.4; }
	50%  { opacity: 0.95; }
	100% { background-position: 220% 0, 0 0; opacity: 0.4; }
}
@keyframes pp-shimmer { 0%,100% { opacity: 0.25; } 50% { opacity: 0.7; } }

/* ===== OR — éclat métallique balayé ===== */
.pp-gen-anim--gold .pp-btn--gen-fx {
	background: linear-gradient(110deg, #c79100 0%, #ffe680 25%, #fff8d6 38%, #ffd700 52%, #c79100 80%) !important;
	background-size: 250% 100% !important;
	color: #4a3500;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	box-shadow: 0 0 22px rgba(255, 215, 0, 0.75);
	animation: pp-gold-sheen 2.4s linear infinite;
}
@keyframes pp-gold-sheen { 0% { background-position: 0 0; } 100% { background-position: -250% 0; } }

/* ===== ARC-EN-CIEL — dégradé défilant ===== */
.pp-gen-anim--rainbow .pp-btn--gen-fx {
	background: linear-gradient(90deg, #ff5e5e, #ffd93d, #6bcb77, #4d96ff, #b14dff, #ff5e5e) !important;
	background-size: 300% 100% !important;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
	animation: pp-rainbow 2.2s linear infinite;
	box-shadow: 0 0 20px rgba(157, 78, 221, 0.55);
}
.pp-gen-anim--rainbow::after {
	opacity: 1;
	inset: -3px;
	background: linear-gradient(90deg, #ff5e5e, #ffd93d, #6bcb77, #4d96ff, #b14dff, #ff5e5e);
	background-size: 300% 100%;
	filter: blur(9px);
	animation: pp-rainbow 2.2s linear infinite;
}
@keyframes pp-rainbow { to { background-position: 300% 0; } }

/* ===== OMBRE — brume ténébreuse ===== */
.pp-gen-anim--shadow .pp-btn--gen-fx {
	background: linear-gradient(180deg, #3a3a5c, #14142a) !important;
	color: #d8d0ff;
	box-shadow: 0 0 20px rgba(80, 60, 140, 0.8), inset 0 0 14px rgba(20,10,40,0.8);
	text-shadow: 0 0 8px rgba(170,130,255,0.8);
}
.pp-gen-anim--shadow::before {
	opacity: 1;
	inset: -4px;
	background: conic-gradient(from 0deg, rgba(60,30,110,0), rgba(120,70,200,0.6), rgba(30,10,60,0), rgba(120,70,200,0.5), rgba(60,30,110,0));
	filter: blur(6px);
	animation: pp-spin 4s linear infinite;
}
.pp-gen-anim--shadow::after {
	opacity: 1;
	background: radial-gradient(circle, rgba(90,60,160,0.55), transparent 70%);
	filter: blur(8px);
	animation: pp-heat 2s ease-in-out infinite;
}

/* ===== GALAXIE — nébuleuse étoilée ===== */
.pp-gen-anim--galaxy .pp-btn--gen-fx {
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0.5px, transparent 1.5px),
		radial-gradient(circle at 70% 60%, rgba(255,255,255,0.8) 0.5px, transparent 1.5px),
		radial-gradient(circle at 45% 80%, rgba(255,255,255,0.7) 0.5px, transparent 1.5px),
		linear-gradient(135deg, #2a0845, #4b1d8a 50%, #6441a5) !important;
	color: #fff;
	box-shadow: 0 0 22px rgba(120, 80, 220, 0.7);
	text-shadow: 0 0 8px rgba(180,140,255,0.9);
}
.pp-gen-anim--galaxy::before {
	opacity: 1;
	inset: -3px;
	background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(180,140,255,0.6), rgba(80,200,255,0.5), rgba(255,120,220,0.5), rgba(255,255,255,0));
	filter: blur(4px);
	animation: pp-spin 3.4s linear infinite;
}
.pp-gen-anim--galaxy::after {
	opacity: 1;
	inset: 6px;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5), transparent 55%);
	animation: pp-shimmer 2s ease-in-out infinite;
}

/* ===== VENT / NATURE (doux) ===== */
.pp-gen-anim--wind .pp-btn--gen-fx {
	background: linear-gradient(180deg, #d9f2ff, #a7dcff 60%, #5aa9e6) !important;
	color: #0b3a57;
	box-shadow: 0 0 16px rgba(150, 220, 255, 0.6);
	animation: pp-pulse 2.4s ease-in-out infinite;
}
.pp-gen-anim--wind::before {
	opacity: 1;
	inset: 4px;
	background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.7) 50%, transparent 65%);
	mix-blend-mode: screen;
	animation: pp-ice-sheen 2.8s ease-in-out infinite;
}
.pp-gen-anim--leaf .pp-btn--gen-fx {
	background: linear-gradient(180deg, #c8efb0, #8fd66a 60%, #3f9d2f) !important;
	color: #16400e;
	box-shadow: 0 0 16px rgba(120, 200, 120, 0.6);
	animation: pp-pulse 2.4s ease-in-out infinite;
}

/* ===== BOUTIQUE — réutilise / étend les effets du pass ===== */
.pp-gen-anim--snowstorm .pp-btn--gen-fx { /* hérite glace */ }
.pp-gen-anim--snowstorm::before,
.pp-gen-anim--snowstorm::after { opacity: 1; }
.pp-gen-anim--snowstorm .pp-btn--gen-fx {
	background: linear-gradient(180deg, #eafaff, #9ad7ff 55%, #2f8fd6) !important;
	color: #06324f;
	box-shadow: 0 0 20px rgba(127, 219, 255, 0.85), inset 0 0 14px rgba(255,255,255,0.7);
}
.pp-gen-anim--snowstorm::before {
	inset: 2px;
	border-radius: 999px;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.85) 45%, transparent 55%);
	mix-blend-mode: screen;
	animation: pp-ice-sheen 2.4s ease-in-out infinite;
}
.pp-gen-anim--snowstorm::after {
	inset: -2px;
	background: radial-gradient(circle, rgba(180,240,255,0.55), transparent 70%);
	animation: pp-shimmer 1.6s ease-in-out infinite;
}

.pp-gen-anim--voltage .pp-btn--gen-fx,
.pp-gen-anim--comet .pp-btn--gen-fx {
	background: linear-gradient(180deg, #1b2a6b, #0a1330) !important;
	color: #fdfdcf;
	box-shadow: 0 0 20px rgba(255, 235, 59, 0.6);
	animation: pp-zap-glow 1.6s ease-in-out infinite;
}
.pp-gen-anim--voltage::before,
.pp-gen-anim--comet::before {
	opacity: 1;
	inset: 4px;
	border-radius: 999px;
	background:
		linear-gradient(105deg, transparent 44%, rgba(255,255,170,0.95) 49%, transparent 53%),
		linear-gradient(72deg, transparent 58%, rgba(130,205,255,0.9) 63%, transparent 67%);
	mix-blend-mode: screen;
	animation: pp-zap-flash 2.2s steps(1) infinite;
}

.pp-gen-anim--aurora .pp-btn--gen-fx,
.pp-gen-anim--vortex .pp-btn--gen-fx {
	box-shadow: 0 0 22px rgba(94, 255, 208, 0.55);
	animation: pp-pulse 1.4s ease-in-out infinite;
}
.pp-gen-anim--aurora::before,
.pp-gen-anim--vortex::before {
	opacity: 1;
	inset: -3px;
	background: conic-gradient(from 0deg, rgba(26,214,160,0) 0%, rgba(26,214,160,0.85) 22%, rgba(123,92,255,0.8) 55%, rgba(25,179,214,0.7) 78%, rgba(26,214,160,0) 100%);
	filter: blur(5px);
	animation: pp-spin 2.4s linear infinite;
}
.pp-gen-anim--vortex::before {
	background: conic-gradient(from 0deg, rgba(106,61,240,0) 0%, rgba(106,61,240,0.85) 25%, rgba(176,107,255,0.8) 55%, rgba(42,26,107,0.7) 78%, rgba(106,61,240,0) 100%);
}

.pp-gen-anim--goldrain .pp-btn--gen-fx {
	background: linear-gradient(110deg, #c79100 0%, #ffe680 25%, #fff8d6 38%, #ffd700 52%, #c79100 80%) !important;
	background-size: 250% 100% !important;
	color: #4a3500;
	animation: pp-gold-sheen 2.2s linear infinite;
	box-shadow: 0 0 22px rgba(255, 215, 0, 0.75);
}

.pp-gen-anim--petal .pp-btn--gen-fx {
	background: linear-gradient(180deg, #ffd0e4, #ff5fa2 55%, #c2185b) !important;
	color: #fff;
	box-shadow: 0 0 18px rgba(255, 120, 180, 0.65);
	animation: pp-pulse 2.2s ease-in-out infinite;
}

.pp-gen-anim--smoke .pp-btn--gen-fx {
	background: linear-gradient(180deg, #6b7280, #4b5563 60%, #2d3748) !important;
	color: #e8edf5;
	box-shadow: 0 0 18px rgba(120, 130, 145, 0.65);
}
.pp-gen-anim--smoke::before {
	opacity: 1;
	inset: -6px;
	background: radial-gradient(circle at 50% 80%, rgba(200,206,216,0.55), transparent 65%);
	filter: blur(8px);
	animation: pp-heat 2.4s ease-in-out infinite;
}

.pp-gen-anim--confetti .pp-btn--gen-fx,
.pp-gen-anim--prism .pp-btn--gen-fx {
	background: linear-gradient(90deg, #ff5e5e, #ffd93d, #6bcb77, #4d96ff, #b14dff, #ff5e5e) !important;
	background-size: 300% 100% !important;
	color: #fff;
	animation: pp-rainbow 2s linear infinite;
	box-shadow: 0 0 20px rgba(157, 78, 221, 0.55);
}

.pp-gen-anim--heart .pp-btn--gen-fx {
	background: radial-gradient(circle at 30% 20%, #ffd5e0, transparent 36%), linear-gradient(135deg, #ff3d6e, #ff8fae, #ff3d6e) !important;
	color: #fff;
	box-shadow: 0 0 20px rgba(255, 80, 130, 0.65);
	animation: pp-pulse 1.8s ease-in-out infinite;
}

.pp-gen-anim--matrix .pp-btn--gen-fx {
	background: linear-gradient(180deg, #001a06, #003d14) !important;
	color: #b6ffce;
	box-shadow: 0 0 16px rgba(57, 255, 94, 0.45), inset 0 0 10px rgba(0, 80, 30, 0.8);
}
.pp-gen-anim--matrix::before {
	opacity: 0.35;
	inset: 4px;
	background: repeating-linear-gradient(0deg, rgba(57,255,94,0.25) 0 2px, transparent 2px 7px);
	animation: pp-matrix-scroll 1.2s linear infinite;
}
@keyframes pp-matrix-scroll {
	to { background-position: 0 14px; }
}

.pp-gen-anim--bubble .pp-btn--gen-fx {
	background: linear-gradient(160deg, #16a6c9, #0d6e9e 60%, #085a82) !important;
	color: #fff;
	box-shadow: 0 0 18px rgba(22, 166, 201, 0.65);
}
.pp-gen-anim--bubble::before {
	opacity: 1;
	inset: 6px;
	border-radius: 999px;
	background: radial-gradient(circle at 28% 26%, rgba(255,255,255,0.75), transparent 42%);
	mix-blend-mode: screen;
	animation: pp-shimmer 2s ease-in-out infinite;
}

.pp-gen-anim--meteor .pp-btn--gen-fx {
	background: radial-gradient(circle at 22% 18%, #fff, transparent 28%), linear-gradient(115deg, #2a1a6b, #6a3df0, #9d5cff) !important;
	color: #fff;
	box-shadow: 0 0 22px rgba(157, 92, 255, 0.65);
}

/* burst au clic (ajouté par JS) — secousse du bouton */
.pp-generate-anim-wrap--burst .pp-btn--gen-fx {
	animation: pp-btn-shake 0.45s ease-out;
}
@keyframes pp-btn-shake {
	0%   { transform: scale(1) rotate(0deg); }
	20%  { transform: scale(1.08) rotate(-1.5deg); }
	40%  { transform: scale(0.98) rotate(1.5deg); }
	60%  { transform: scale(1.05) rotate(-1deg); }
	100% { transform: scale(1) rotate(0deg); }
}

/* onde de choc circulaire au clic (élément JS) */
.pp-gen-shock {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	border: 3px solid var(--pp-shock, rgba(255,255,255,0.9));
	pointer-events: none;
	z-index: 0;
	opacity: 0.9;
	animation: pp-shock-wave 0.6s ease-out forwards;
}
@keyframes pp-shock-wave {
	0%   { transform: scale(0.2); opacity: 0.9; }
	100% { transform: scale(3.2); opacity: 0; }
}

/* ---- Particules (clic + ambiantes) — DERRIÈRE le bouton ---- */
.pp-gen-particle,
.pp-gen-flame {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	will-change: transform, opacity;
}

/* Bassin de flammes ambiantes (JS) */
.pp-gen-flame-pool {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 120%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

/* ===== FLAMME DOM — 3 couches, grande et réaliste ===== */
.pp-gen-flame {
	width: calc(42px * var(--pp-scale, 1));
	height: calc(68px * var(--pp-scale, 1));
	transform: translate(-50%, -100%);
	filter: drop-shadow(0 0 10px rgba(255, 110, 0, 0.55));
}
.pp-gen-flame__outer,
.pp-gen-flame__mid,
.pp-gen-flame__core {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
}
.pp-gen-flame__outer {
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 44% 44% / 68% 68% 32% 32%;
	background:
		radial-gradient(ellipse 58% 82% at 50% 100%, rgba(255,130,0,0.95), rgba(230,55,10,0.55) 52%, transparent 78%),
		radial-gradient(ellipse 35% 70% at 28% 100%, rgba(255,200,50,0.8), transparent 68%),
		radial-gradient(ellipse 35% 70% at 72% 100%, rgba(255,80,0,0.75), transparent 68%);
	animation: pp-flame-layer var(--pp-dur, 0.55s) ease-in-out infinite alternate;
	animation-delay: var(--pp-delay, 0s);
}
.pp-gen-flame__mid {
	width: 72%;
	height: 78%;
	border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%;
	background: radial-gradient(ellipse 52% 78% at 50% 100%, rgba(255,210,80,0.98), rgba(255,100,15,0.5) 50%, transparent 76%);
	animation: pp-flame-layer calc(var(--pp-dur, 0.55s) * 0.82) ease-in-out infinite alternate-reverse;
}
.pp-gen-flame__core {
	width: 40%;
	height: 52%;
	border-radius: 50% 50% 38% 38% / 58% 58% 42% 42%;
	background: radial-gradient(ellipse at 50% 100%, #fffbe8, #ffe566 42%, transparent 82%);
	mix-blend-mode: screen;
	animation: pp-flame-core-layer calc(var(--pp-dur, 0.55s) * 0.65) ease-in-out infinite;
}
.pp-gen-flame--ambient {
	animation: pp-flame-ambient-rise var(--pp-rise-dur, 1.1s) ease-out forwards;
}
.pp-gen-flame--burst {
	animation: pp-flame-burst-rise var(--pp-rise-dur, 0.95s) ease-out forwards;
}
@keyframes pp-flame-layer {
	0%   { transform: translateX(-50%) scaleY(1) scaleX(1) skewX(0deg); }
	100% { transform: translateX(-50%) scaleY(1.18) scaleX(0.92) skewX(var(--pp-skew, 4deg)); }
}
@keyframes pp-flame-core-layer {
	0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleY(1); }
	50%      { opacity: 1; transform: translateX(-50%) scaleY(1.25); }
}
@keyframes pp-flame-ambient-rise {
	0%   { transform: translate(-50%, -20%) scale(var(--pp-scale, 1)); opacity: 0.95; }
	100% { transform: translate(calc(-50% + var(--pp-x, 0px)), calc(-100% - 90px)) scale(calc(var(--pp-scale, 1) * 0.15)); opacity: 0; }
}
@keyframes pp-flame-burst-rise {
	0%   { transform: translate(-50%, 0) scale(calc(var(--pp-scale, 1) * 0.6)); opacity: 1; }
	40%  { opacity: 1; }
	100% { transform: translate(calc(-50% + var(--pp-x, 0px)), calc(-100% - 120px)) scale(calc(var(--pp-scale, 1) * 0.1)); opacity: 0; }
}

/* braises héritées (fallback) — remplacées par .pp-gen-flame en JS */
.pp-gen-particle--flame { display: none; }

/* ===== ÉCLAIRS — trait lumineux + branche ===== */
.pp-gen-particle--spark {
	width: 4px;
	height: 22px;
	margin: -11px 0 0 -2px;
	border-radius: 2px;
	background: linear-gradient(180deg, #ffffff, #fff7a8 40%, #ffd24a);
	box-shadow: 0 0 10px #fff7a8, 0 0 18px rgba(255, 230, 100, 0.8);
	animation: pp-p-spark var(--pp-dur, 0.45s) linear forwards;
}
.pp-gen-particle--spark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 30%;
	width: 14px;
	height: 3px;
	margin-left: -7px;
	background: linear-gradient(90deg, transparent, #fffde0, transparent);
	transform: rotate(var(--pp-branch, 35deg));
	opacity: 0.9;
}
@keyframes pp-p-spark {
	0%   { transform: translate(0,0) rotate(var(--pp-rot,0deg)) scaleY(1); opacity: 1; filter: brightness(1.4); }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-80px)) rotate(var(--pp-rot,0deg)) scaleY(0.2); opacity: 0; }
}

/* ===== NEIGE — flocon cristallin ===== */
.pp-gen-particle--snow {
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background:
		linear-gradient(0deg, transparent 42%, #fff 44%, #fff 56%, transparent 58%),
		linear-gradient(90deg, transparent 42%, #fff 44%, #fff 56%, transparent 58%),
		linear-gradient(45deg, transparent 42%, #cfefff 44%, #cfefff 56%, transparent 58%),
		linear-gradient(135deg, transparent 42%, #cfefff 44%, #cfefff 56%, transparent 58%);
	filter: drop-shadow(0 0 4px rgba(180,240,255,0.95));
	animation: pp-p-snow var(--pp-dur, 1.2s) ease-in forwards;
}
@keyframes pp-p-snow {
	0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,80px)) rotate(280deg) scale(0.6); opacity: 0; }
}

/* ===== CONFETTIS — rectangles colorés ===== */
.pp-gen-particle--confetti {
	width: var(--pp-w, 8px);
	height: var(--pp-h, 12px);
	margin: calc(var(--pp-h, 12px) / -2) 0 0 calc(var(--pp-w, 8px) / -2);
	border-radius: 2px;
	background: var(--pp-color, #ff5e5e);
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	animation: pp-p-confetti var(--pp-dur, 1.1s) ease-out forwards;
}
@keyframes pp-p-confetti {
	0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-90px)) rotate(var(--pp-rot,360deg)); opacity: 0; }
}

/* ===== CŒURS ===== */
.pp-gen-particle--heart {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background: var(--pp-color, #ff5e8a);
	transform: rotate(-45deg);
	animation: pp-p-heart var(--pp-dur, 1s) ease-out forwards;
}
.pp-gen-particle--heart::before,
.pp-gen-particle--heart::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: inherit;
}
.pp-gen-particle--heart::before { top: -7px; left: 0; }
.pp-gen-particle--heart::after  { left: 7px; top: 0; }
@keyframes pp-p-heart {
	0%   { transform: translate(0,0) rotate(-45deg) scale(0.5); opacity: 0; }
	20%  { opacity: 1; transform: translate(0,0) rotate(-45deg) scale(1); }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-70px)) rotate(calc(-45deg + var(--pp-rot,180deg))) scale(0.8); opacity: 0; }
}

/* ===== BULLES ===== */
.pp-gen-particle--bubble {
	width: var(--pp-size, 14px);
	height: var(--pp-size, 14px);
	margin: calc(var(--pp-size, 14px) / -2) 0 0 calc(var(--pp-size, 14px) / -2);
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(127,223,255,0.35) 45%, rgba(13,110,158,0.25) 100%);
	border: 1px solid rgba(255,255,255,0.55);
	box-shadow: inset 0 -2px 4px rgba(13,110,158,0.2);
	animation: pp-p-bubble var(--pp-dur, 1.4s) ease-out forwards;
}
@keyframes pp-p-bubble {
	0%   { transform: translate(0,0) scale(0.4); opacity: 0; }
	15%  { opacity: 0.9; transform: translate(0,0) scale(1); }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-100px)) scale(0.7); opacity: 0; }
}

/* ===== MÉTÉORE / COMÈTE — traînée lumineuse ===== */
.pp-gen-particle--meteor {
	width: 6px;
	height: 28px;
	margin: -14px 0 0 -3px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffffff, var(--pp-color, #b48cff) 35%, transparent);
	box-shadow: 0 0 12px var(--pp-color, #b48cff);
	animation: pp-p-meteor var(--pp-dur, 0.7s) linear forwards;
}
@keyframes pp-p-meteor {
	0%   { transform: translate(0,0) rotate(var(--pp-rot, -35deg)) scaleY(0.5); opacity: 0; }
	20%  { opacity: 1; transform: translate(0,0) rotate(var(--pp-rot, -35deg)) scaleY(1); }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,90px)) rotate(var(--pp-rot, -35deg)) scaleY(0.3); opacity: 0; }
}

/* ===== MATRIX — colonne de code ===== */
.pp-gen-particle--matrix {
	font-family: monospace;
	font-size: 11px;
	font-weight: 700;
	color: #39ff5e;
	text-shadow: 0 0 6px #39ff5e;
	line-height: 1;
	white-space: pre;
	animation: pp-p-matrix var(--pp-dur, 1.3s) linear forwards;
}
@keyframes pp-p-matrix {
	0%   { transform: translate(0,-20px); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,80px)); opacity: 0; }
}

/* étoiles scintillantes */
.pp-gen-particle--star {
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background: var(--pp-color, #fff);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	filter: drop-shadow(0 0 6px var(--pp-color, #fff));
	animation: pp-p-star var(--pp-dur, 0.9s) ease-out forwards;
}
@keyframes pp-p-star {
	0%   { transform: translate(0,0) scale(0.2) rotate(0deg); opacity: 0; }
	25%  { opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-70px)) scale(1.1) rotate(180deg); opacity: 0; }
}

/* feuilles qui voltigent */
.pp-gen-particle--leaf {
	width: 14px;
	height: 10px;
	margin: -5px 0 0 -7px;
	border-radius: 0 100% 0 100%;
	background: linear-gradient(135deg, var(--pp-color, #b9ef9a), #3f9d2f);
	box-shadow: inset -2px -2px 0 rgba(0,0,0,0.08);
	animation: pp-p-leaf var(--pp-dur, 1.3s) ease-in-out forwards;
}
@keyframes pp-p-leaf {
	0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,65px)) rotate(340deg); opacity: 0; }
}

/* fumée — nuage doux */
.pp-gen-particle--smoke {
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220,226,236,0.75), rgba(160,170,185,0.25) 60%, transparent 75%);
	filter: blur(3px);
	animation: pp-p-smoke var(--pp-dur, 1.6s) ease-out forwards;
}
@keyframes pp-p-smoke {
	0%   { transform: translate(0,0) scale(0.5); opacity: 0.7; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-80px)) scale(1.8); opacity: 0; }
}

/* bulle d'énergie */
.pp-gen-particle--orb {
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff, var(--pp-color, #42a5f5) 65%);
	box-shadow: 0 0 10px var(--pp-color, #42a5f5);
	animation: pp-p-orb var(--pp-dur, 0.8s) ease-out forwards;
}
@keyframes pp-p-orb {
	0%   { transform: translate(0,0) scale(1); opacity: 1; }
	100% { transform: translate(var(--pp-x,0px), var(--pp-y,-70px)) scale(0.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-generate-anim-wrap::before,
	.pp-generate-anim-wrap::after,
	.pp-btn--gen-fx,
	.pp-btn--gen-fx::before,
	.pp-btn--gen-fx::after { animation: none !important; }
}

/* ---------------------------------------------------------------------------
 * ProgresPass — frise à 2 pistes (Premium haut / classique bas)
 * ------------------------------------------------------------------------ */
.pp-pass-upsell {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	margin-bottom: 18px;
	border: 2px solid #f5c518;
	border-radius: 14px;
	background: linear-gradient(135deg, #fff9e6, #fff);
}
.pp-pass-upsell__icon { font-size: 1.6rem; }
.pp-pass-upsell p { margin: 0; flex: 1; min-width: 200px; font-size: 0.92rem; }
.pp-btn--gold { background: linear-gradient(135deg, #f5c518, #e0a800); color: #4a3500; border: none; }

.pp-pass-board__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.pp-pass-board__row-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.84rem;
}
.pp-pass-board__row-label--prem { background: linear-gradient(135deg, #fff3c0, #ffe08a); color: #6b4e00; border: 2px solid #f5c518; }
.pp-pass-board__row-label--free { background: #eef4ff; color: #1746a2; border: 2px solid #b9d2ff; }

.pp-pass-board-wrap {
	overflow-x: auto;
	padding: 6px 2px 16px;
	-webkit-overflow-scrolling: touch;
}
.pp-pass-board { position: relative; min-width: max-content; width: max-content; }

.pp-pass-cols {
	display: flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-pass-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 132px;        /* largeur FIXE : nécessaire au calcul proportionnel du marqueur */
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0 6px;
}

/*
 * Hauteur FIXE sur les slots : garantit que tous les marqueurs
 * (et donc tous les rails) sont au même niveau vertical.
 * Sans ça, les slots vides (24px) vs. cartes récompenses (~116px)
 * créent un décalage visible entre le rail bleu et le rail gris.
 */
.pp-pass-slot {
	width: 100%;
	height: 156px;      /* fixe, même valeur partout (assez pour empiler cash + cosmétique) */
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow: visible;  /* la carte ne doit pas être coupée */
}

/*
 * MARQUEUR DE NIVEAU — deux zones superposées
 * ─────────────────────────────────────────────
 * upper : hauteur FIXE (64px), contient l'avatar + "Vous" pour la colonne
 *         courante, sinon vide. Même hauteur pour TOUTES les colonnes.
 * lower : hauteur FIXE (32px), contient uniquement le dot. C'est là que
 *         le rail (::before) est dessiné, centré à 50% → toujours aligné.
 * lvl   : texte de niveau en-dessous, hors du rail.
 */
.pp-pass-marker {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/* ── Zone haute (avatar / vide) ──
 *  Hauteur = avatar(46) + border×2(6) + gap(4) + label-vous(~18) + padding-bas(8)
 *  = 82px. Identique pour TOUTES les colonnes (vide si pas "current").
 *  flex-shrink:0 empêche tout rétrécissement intempestif.
 *  overflow:visible : l'avatar peut légèrement déborder vers le haut sans
 *  déplacer la zone basse (qui contient le rail).
 */
.pp-pass-marker__upper {
	width: 100%;
	height: 82px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding-bottom: 8px;
	overflow: visible;
}

.pp-pass-marker__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid #ff7a18;
	box-shadow: 0 0 0 3px #ffd0a8, 0 2px 8px rgba(0,0,0,0.18);
	display: block;
	object-fit: cover;
	flex-shrink: 0;
	margin: 0; /* supprime tout margin navigateur sur l'img */
}

.pp-pass-marker__you {
	font-size: 0.65rem;
	font-weight: 800;
	color: #fff;
	background: #ff7a18;
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(255,122,24,0.35);
	line-height: 1.6;
	flex-shrink: 0;
}

/* ── Zone basse (dot + rail) ──
 *  Hauteur fixe 28px : le dot (16px) est centré → top:50% du ::before
 *  tombe exactement sur l'axe du dot pour tous les colonnes.
 *  flex-shrink:0 garantit que cette zone ne se compresse jamais.
 */
.pp-pass-marker__lower {
	position: relative;
	width: 100%;
	height: 28px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Rail : se dessine à top:50% de lower → toujours aligné avec le dot */
.pp-pass-marker__lower::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -50%;
	width: 100%;
	height: 8px;
	z-index: 0;
	background: #dde3ed;    /* gris : futur */
}
/* Première colonne : rail part du centre, pas du bord gauche */
.pp-pass-col:first-child .pp-pass-marker__lower::before { left: 0; width: 50%; }

/* Colonnes passées + colonne courante → hachures bleues */
.pp-pass-col.is-reached .pp-pass-marker__lower::before,
.pp-pass-col.is-current .pp-pass-marker__lower::before {
	background: repeating-linear-gradient(
		45deg,
		#1e6fff 0px, #1e6fff 6px,
		#5a9fff 6px, #5a9fff 12px
	);
}

/* ── Dot ── */
.pp-pass-marker__dot {
	position: relative;
	z-index: 2;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #9aa6b6;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px #c4ccd8;
	flex-shrink: 0;
}
.pp-pass-col.is-reached .pp-pass-marker__dot { background: #1e6fff; box-shadow: 0 0 0 2px #1e6fff; }
.pp-pass-col.is-current .pp-pass-marker__dot { background: #ff7a18; box-shadow: 0 0 0 3px #ffd0a8; transform: scale(1.25); }

/* ── Label niveau ── */
.pp-pass-marker__lvl {
	position: relative;
	z-index: 1;
	font-size: 0.74rem;
	font-weight: 800;
	color: var(--pp-fg-soft, #475063);
	white-space: nowrap;
	margin-top: 5px;
	padding-bottom: 6px;
}

/* carte récompense */
.pp-pass-reward {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 110px;
	padding: 12px 8px;
	border-radius: 14px;
	text-align: center;
}
.pp-pass-reward--empty { background: transparent; }
.pp-pass-slot--top .pp-pass-reward { border: 2px solid #f0d97a; background: linear-gradient(180deg, #fffdf3, #fff); }
.pp-pass-slot--bottom .pp-pass-reward { border: 2px solid var(--pp-line-soft, #e3e8ef); background: #fff; }
.pp-pass-slot--top .pp-pass-reward--empty,
.pp-pass-slot--bottom .pp-pass-reward--empty { border-color: transparent; background: transparent; }

.pp-pass-reward.is-locked {
	filter: grayscale(1);
	opacity: 0.55;
	background: #f1f3f7;
	border-style: dashed;
}
.pp-pass-reward.is-unlocked { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.pp-pass-reward__visual {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pp-pass-reward__trophy { font-size: 2rem; }
.pp-pass-reward__ring {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #cdd5e0;
	padding: 4px;
	box-shadow: inset 0 0 0 4px #fff;
}
.pp-pass-reward__anim {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pp-blue, #1e6fff);
	color: #fff;
	font-size: 0.9rem;
}
.pp-pass-reward.is-locked .pp-pass-reward__anim { background: #b6c0cf; }

.pp-pass-reward__name {
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pp-fg, #1d2433);
}

.pp-pass-reward__check {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1b8a4b;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 900;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.pp-pass-reward__lock {
	position: absolute;
	right: 6px;
	top: 6px;
	font-size: 0.9rem;
	z-index: 2;
}

.pp-pass-board--locked-prem .pp-pass-slot--top .pp-pass-reward.is-locked { opacity: 0.45; }

/* Récompense ProgresCash sur la frise (compacte, empilable) */
.pp-pass-reward--cash {
	flex-direction: row;
	gap: 7px;
	width: auto;
	min-width: 96px;
	padding: 7px 12px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fff7da, #ffeead);
	border: 2px solid #f0c94a;
}
.pp-pass-reward--cash .pp-pass-reward__visual { width: auto; height: auto; }
.pp-pass-reward--cash .pp-pass-reward__cash { display: inline-flex; align-items: center; gap: 6px; }
.pp-pass-reward__cash-amount { font-size: 0.95rem; font-weight: 900; color: #7a4a06; }
.pp-pass-reward--cash .pp-pass-reward__name { display: none; }
.pp-pass-reward--cash .pp-pass-reward__lock { position: static; margin-left: 2px; }
/* Check vert « obtenu » : inline dans la pastille cash (comme les autres récompenses) */
.pp-pass-reward--cash .pp-pass-reward__check {
	position: static;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	font-size: 0.66rem;
}

/* compactage des cartes pour tenir l'empilement */
.pp-pass-reward { padding: 10px 8px; }

/* ── Marqueur "Vous" proportionnel (overlay positionné en JS) ── */
.pp-pass-vous {
	position: absolute;
	top: 170px;            /* hauteur du slot haut (156) + demi-zone du dot (14) */
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	transform: translate(-50%, -100%);
	pointer-events: none;
}
.pp-pass-vous[hidden] { display: none; }
.pp-pass-vous__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid #ff7a18;
	box-shadow: 0 0 0 3px #ffd0a8, 0 2px 8px rgba(0,0,0,0.18);
	object-fit: cover;
	background: #fff;
}
.pp-pass-vous__label {
	font-size: 0.62rem;
	font-weight: 800;
	color: #fff;
	background: #ff7a18;
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(255,122,24,0.35);
}
.pp-pass-vous::after {
	content: "";
	width: 2px;
	height: 14px;
	background: #ff7a18;
	border-radius: 2px;
}

/* stats pass */
.pp-pass-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	margin-bottom: 18px;
}
.pp-pass-stat { display: flex; flex-direction: column; gap: 2px; }
.pp-pass-stat--wide { flex: 1; min-width: 200px; }
.pp-pass-stat__label { font-size: 0.78rem; color: var(--pp-muted); }
.pp-pass-stat__value { font-size: 1.6rem; font-weight: 800; color: var(--pp-blue-dark, #1746a2); }
.pp-pass-bar { height: 12px; border-radius: 999px; background: #e7ecf3; overflow: hidden; margin-top: 6px; }
.pp-pass-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1e6fff, #18b0ff); }
.pp-pass-legend { margin-top: 14px; font-size: 0.8rem; }

/* ---------------------------------------------------------------------------
 * Boutique (cartes produits)
 * ------------------------------------------------------------------------ */
.pp-shop-maquette__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.pp-shop-maquette__title { margin: 0; font-size: 2rem; font-weight: 800; }

.pp-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-shop-card {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--pp-line-soft);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease;
}
.pp-shop-card:hover { transform: translateY(-4px); }
.pp-shop-card__media {
	aspect-ratio: 1;
	background: linear-gradient(180deg, #f8f9fb, #eef1f5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pp-shop-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-shop-card__emoji { font-size: 4rem; }
.pp-shop-card__foot { padding: 14px 16px 16px; border-top: 2px solid var(--pp-line-soft); }
.pp-shop-card__price { display: block; font-size: 1.25rem; font-weight: 800; color: var(--pp-blue-dark); }
.pp-shop-card__name { font-size: 0.95rem; font-weight: 600; }
.pp-shop-card__link { text-decoration: none; color: inherit; }

@media (max-width: 560px) {
	.pp-shop-grid { grid-template-columns: 1fr; }
	.pp-pass-col { width: 120px; }
}

/* ---------------------------------------------------------------------------
 * Coupes (trophées boutique) — dessinées en CSS, métal or / argent / bronze.
 * Variables de métal : --cup-grad (corps), --cup-edge (anses), --cup-emblem.
 * ------------------------------------------------------------------------ */
.pp-cup {
	position: relative;
	display: inline-block;
	width: 58px;
	height: 72px;
	vertical-align: middle;
}
.pp-cup__bowl {
	position: absolute;
	left: 50%;
	top: 4px;
	transform: translateX(-50%);
	width: 44px;
	height: 38px;
	background: var(--cup-grad);
	border-radius: 8px 8px 26px 26px / 8px 8px 34px 34px;
	box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.65), inset 0 -7px 10px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.25);
	z-index: 2;
}
.pp-cup__emblem {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	font-size: 0.95rem;
	line-height: 1;
	color: var(--cup-emblem);
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.pp-cup__handle {
	position: absolute;
	top: 8px;
	width: 15px;
	height: 20px;
	border: 4px solid var(--cup-edge);
	border-radius: 50%;
	background: transparent;
	z-index: 1;
}
.pp-cup__handle--l { left: 1px; border-right-color: transparent; border-top-color: transparent; transform: rotate(-28deg); }
.pp-cup__handle--r { right: 1px; border-left-color: transparent; border-top-color: transparent; transform: rotate(28deg); }
.pp-cup__stem {
	position: absolute;
	left: 50%;
	top: 41px;
	transform: translateX(-50%);
	width: 8px;
	height: 13px;
	background: var(--cup-grad);
}
.pp-cup__base {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 34px;
	height: 9px;
	background: var(--cup-grad);
	border-radius: 4px 4px 5px 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.pp-cup__base::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -4px;
	transform: translateX(-50%);
	width: 22px;
	height: 5px;
	background: var(--cup-grad);
	border-radius: 3px;
}

/* Métaux */
.pp-cup--gold   { --cup-grad: linear-gradient(135deg, #fff3b0, #f7c948 45%, #b8860b); --cup-edge: #e0a800; --cup-emblem: #7a5200; }
.pp-cup--silver { --cup-grad: linear-gradient(135deg, #ffffff, #d6dbe2 45%, #9aa3ad); --cup-edge: #b9c0c9; --cup-emblem: #5b626b; }
.pp-cup--bronze { --cup-grad: linear-gradient(135deg, #ffd9a8, #cd7f32 45%, #7a4a1e); --cup-edge: #b5701f; --cup-emblem: #5a3416; }

/* Décor optionnel (couvercle, étoile, pointe…) masqué par défaut */
.pp-cup__deco { display: none; }

/* =========================================================================
 * Modèles de coupe — 24 silhouettes toutes différentes (m0..m23).
 * m0 = valeurs par défaut.
 * ====================================================================== */

/* m1 — Élancée : haute et étroite */
.pp-cup--m1 .pp-cup__bowl { width: 32px; height: 46px; top: 2px; border-radius: 8px 8px 16px 16px / 8px 8px 34px 34px; }
.pp-cup--m1 .pp-cup__handle { top: 6px; height: 16px; width: 12px; }

/* m2 — Large : basse et évasée */
.pp-cup--m2 .pp-cup__bowl { width: 54px; height: 28px; top: 6px; border-radius: 6px 6px 26px 26px; }
.pp-cup--m2 .pp-cup__handle { top: 10px; width: 17px; }

/* m3 — Calice : bol conique en V */
.pp-cup--m3 .pp-cup__bowl { width: 46px; height: 38px; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); }
.pp-cup--m3 .pp-cup__handle { display: none; }

/* m4 — Facettes : pans coupés */
.pp-cup--m4 .pp-cup__bowl { width: 46px; height: 36px; border-radius: 4px; clip-path: polygon(6% 0, 94% 0, 100% 70%, 50% 100%, 0 70%); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 10px, transparent 10px 20px); }

/* m5 — Cannelée : rainures verticales */
.pp-cup--m5 .pp-cup__bowl { width: 44px; height: 40px; border-radius: 8px 8px 40% 40%; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 7px); }

/* m6 — Anneaux : anses en cercles pleins */
.pp-cup--m6 .pp-cup__bowl { width: 42px; height: 40px; border-radius: 10px 10px 50% 50%; }
.pp-cup--m6 .pp-cup__handle { top: 12px; width: 18px; height: 18px; border-radius: 50%; border-color: var(--cup-edge); }
.pp-cup--m6 .pp-cup__handle--l { left: -5px; transform: none; }
.pp-cup--m6 .pp-cup__handle--r { right: -5px; transform: none; }

/* m7 — Double anse : anneau intérieur */
.pp-cup--m7 .pp-cup__bowl { width: 44px; height: 38px; border-radius: 8px 8px 28px 28px; }
.pp-cup--m7 .pp-cup__handle { width: 18px; height: 24px; }
.pp-cup--m7 .pp-cup__handle::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--cup-edge); border-radius: 50%; }

/* m8 — Carrée : bol cubique, sans anses */
.pp-cup--m8 .pp-cup__bowl { width: 42px; height: 40px; border-radius: 4px; }
.pp-cup--m8 .pp-cup__handle { display: none; }

/* m9 — Ovoïde : œuf */
.pp-cup--m9 .pp-cup__bowl { width: 38px; height: 46px; top: 2px; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; }
.pp-cup--m9 .pp-cup__handle { top: 12px; }

/* m10 — À couvercle : dôme + pommeau */
.pp-cup--m10 .pp-cup__bowl { width: 44px; height: 34px; top: 12px; border-radius: 6px 6px 30px 30px; }
.pp-cup--m10 .pp-cup__deco { display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 46px; height: 16px; background: var(--cup-grad); border-radius: 24px 24px 4px 4px; z-index: 3; box-shadow: inset 0 2px 3px rgba(255,255,255,.5); }
.pp-cup--m10 .pp-cup__deco::after { content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--cup-grad); }

/* m11 — Ailée : anses en ailes anguleuses */
.pp-cup--m11 .pp-cup__bowl { width: 40px; height: 38px; border-radius: 8px 8px 26px 26px; }
.pp-cup--m11 .pp-cup__handle { width: 20px; height: 14px; border-width: 4px 4px 0 0; border-radius: 0 60% 0 0; }
.pp-cup--m11 .pp-cup__handle--l { left: -6px; transform: skewY(18deg) scaleX(-1); }
.pp-cup--m11 .pp-cup__handle--r { right: -6px; transform: skewY(-18deg); }

/* m12 — Chalice : petit bol, tige fine, base large */
.pp-cup--m12 .pp-cup__bowl { width: 34px; height: 30px; border-radius: 50% 50% 40% 40%; }
.pp-cup--m12 .pp-cup__handle { display: none; }
.pp-cup--m12 .pp-cup__stem { height: 20px; width: 5px; top: 34px; }
.pp-cup--m12 .pp-cup__base { width: 40px; }

/* m13 — Amphore : haute, fond pointu */
.pp-cup--m13 .pp-cup__bowl { width: 36px; height: 46px; top: 2px; border-radius: 10px; clip-path: polygon(0 0, 100% 0, 86% 60%, 50% 100%, 14% 60%); }
.pp-cup--m13 .pp-cup__handle { top: 4px; height: 14px; width: 12px; }

/* m14 — Étoilée : étoile au sommet */
.pp-cup--m14 .pp-cup__bowl { width: 44px; height: 34px; top: 10px; border-radius: 8px 8px 28px 28px; }
.pp-cup--m14 .pp-cup__deco { display: block; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); width: 16px; height: 16px; background: var(--cup-grad); z-index: 3; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* m15 — Grandes anses : boucles très larges */
.pp-cup--m15 .pp-cup__bowl { width: 40px; height: 38px; border-radius: 8px 8px 26px 26px; }
.pp-cup--m15 .pp-cup__handle { top: 6px; width: 22px; height: 30px; border-width: 5px; }
.pp-cup--m15 .pp-cup__handle--l { left: -8px; }
.pp-cup--m15 .pp-cup__handle--r { right: -8px; }

/* m16 — Moderne : cylindre épuré */
.pp-cup--m16 .pp-cup__bowl { width: 34px; height: 44px; top: 2px; border-radius: 6px; }
.pp-cup--m16 .pp-cup__handle { display: none; }

/* m17 — À gradins : collerette sous le bol */
.pp-cup--m17 .pp-cup__bowl { width: 46px; height: 32px; border-radius: 6px 6px 24px 24px; }
.pp-cup--m17 .pp-cup__deco { display: block; position: absolute; left: 50%; top: 36px; transform: translateX(-50%); width: 30px; height: 6px; background: var(--cup-grad); border-radius: 4px; z-index: 2; }

/* m18 — Perlée : rebord en perles */
.pp-cup--m18 .pp-cup__bowl { width: 44px; height: 38px; border-radius: 8px 8px 28px 28px; border-top: 4px dotted var(--cup-edge); }

/* m19 — Trompette : évasée vers le haut */
.pp-cup--m19 .pp-cup__bowl { width: 48px; height: 38px; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%); background-image: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.4), transparent 60%); }
.pp-cup--m19 .pp-cup__handle { display: none; }

/* m20 — Galbée : profil sinueux */
.pp-cup--m20 .pp-cup__bowl { width: 42px; height: 42px; border-radius: 40% 40% 30% 30% / 60% 60% 40% 40%; }

/* m21 — Hexagonale */
.pp-cup--m21 .pp-cup__bowl { width: 44px; height: 40px; border-radius: 4px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.pp-cup--m21 .pp-cup__handle { display: none; }

/* m22 — Pokal : haute avec pointe au sommet */
.pp-cup--m22 .pp-cup__bowl { width: 34px; height: 42px; top: 8px; border-radius: 8px 8px 20px 20px; }
.pp-cup--m22 .pp-cup__handle { top: 12px; height: 16px; }
.pp-cup--m22 .pp-cup__deco { display: block; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--cup-edge); z-index: 3; }

/* m23 — Championne : très large et haute, grosses anses */
.pp-cup--m23 .pp-cup__bowl { width: 52px; height: 42px; border-radius: 8px 8px 34px 34px; }
.pp-cup--m23 .pp-cup__handle { top: 6px; width: 20px; height: 28px; border-width: 5px; }
.pp-cup--m23 .pp-cup__handle--l { left: -6px; }
.pp-cup--m23 .pp-cup__handle--r { right: -6px; }