/* =============================================================
   Tisséo — Roue de la fortune
   ============================================================= */

/* ---- Animations (inspirées du module mod_ogham_bandit) ---- */

@keyframes tisseo-wiggle {
	5%,  50% { transform: scale(1); }
	10%      { transform: scale(0.9); }
	15%      { transform: scale(1.15); }
	20%      { transform: scale(1.15) rotate(-5deg); }
	25%      { transform: scale(1.15) rotate(5deg); }
	30%      { transform: scale(1.15) rotate(-3deg); }
	35%      { transform: scale(1.15) rotate(2deg); }
	40%      { transform: scale(1.15) rotate(0); }
}

@keyframes tisseo-btn-disappear {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.7); }
}

@keyframes tisseo-popup-in {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Conteneur principal ---- */

.tisseo-wheel-game {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             2rem;
	padding:         1.5rem 1rem;
	width:           100%;
}

/* ---- Roue ---- */

.tisseo-wheel-wrap {
	position: relative;
	width:    300px;
	height:   300px;
}

.tisseo-wheel-el {
	width:         100%;
	height:        100%;
	border-radius: 50%;
	will-change:   transform;
	transition:    transform 0s;

	/* Placeholder coloré affiché quand aucune image n'est configurée */
	background: conic-gradient(
		#e82575 0deg    60deg,
		#f7941d 60deg   120deg,
		#1a2b6e 120deg  180deg,
		#e82575 180deg  240deg,
		#f7941d 240deg  300deg,
		#1a2b6e 300deg  360deg
	);

	box-shadow: rgba(10, 36, 7, 0.55) 0 0 60px 15px;
}

.tisseo-wheel-img {
	position:      absolute;
	inset:         0;
	width:         100%;
	height:        100%;
	object-fit:    contain;
	border-radius: 50%;
	display:       block;
}

/* ---- Bouton "Je lance la roue" ---- */

.tisseo-spin-btn {
	padding:       1rem 2.5rem;
	background:    linear-gradient(135deg, #f7941d 0%, #e82575 100%);
	color:         #fff;
	border:        none;
	border-radius: 50px;
	font-size:     1.1rem;
	font-weight:   700;
	cursor:        pointer;
	box-shadow:    0 4px 20px rgba(232, 37, 117, 0.4);
	transition:    opacity 0.4s ease, transform 0.3s ease;
}

.tisseo-spin-btn:hover:not(.tisseo-btn-hide) {
	transform: scale(1.06);
}

.tisseo-btn-wiggle {
	animation: tisseo-wiggle 3s 1.5s infinite;
}

.tisseo-btn-hide {
	animation:      tisseo-btn-disappear 0.4s ease forwards !important;
	pointer-events: none;
}

/* ---- Overlay ---- */

.tisseo-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, 0.65);
	z-index:         9998;
	backdrop-filter: blur(3px);
}

/* ---- Popup ---- */

.tisseo-popup {
	position:      fixed;
	top:           50%;
	left:          50%;
	transform:     translate(-50%, -50%) scale(0.75);
	z-index:       9999;
	background:    #fff;
	border-radius: 20px;
	padding:       2rem 2rem 1.75rem;
	max-width:     480px;
	width:         90%;
	text-align:    center;
	box-shadow:    0 20px 60px rgba(0, 0, 0, 0.35);
	opacity:       0;
	transition:    opacity 0.3s ease, transform 0.3s ease;
}

.tisseo-popup.tisseo-popup-show {
	animation: tisseo-popup-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tisseo-close-btn {
	position:    absolute;
	top:         0.9rem;
	right:       1rem;
	background:  none;
	border:      none;
	font-size:   1.4rem;
	cursor:      pointer;
	color:       #999;
	line-height: 1;
	padding:     0.2rem 0.4rem;
	transition:  color 0.2s;
}
.tisseo-close-btn:hover { color: #333; }

/* Contenu "Gagné" */

.tisseo-popup-congrats {
	margin:         0 0 0.4rem;
	color:          #f7941d;
	font-weight:    700;
	font-size:      0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.tisseo-popup-vous-avez-gagne {
	margin:    0 0 0.25rem;
	color:     #555;
	font-size: 1rem;
}

.tisseo-popup-lot-name {
	margin:      0 0 1.25rem;
	color:       #1a2b6e;
	font-size:   1.4rem;
	line-height: 1.2;
}

.tisseo-popup-lot-img {
	display:       block;
	margin:        0 auto 1.25rem;
	max-width:     180px;
	max-height:    180px;
	object-fit:    contain;
	border-radius: 12px;
}

.tisseo-popup-partner {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.75rem;
	border-top:      1px solid #eee;
	padding-top:     1rem;
	margin-top:      0.5rem;
}

.tisseo-popup-partner-logo {
	max-width:  80px;
	max-height: 55px;
	object-fit: contain;
}

.tisseo-popup-offert-par {
	color:          #999;
	font-size:      0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space:    nowrap;
}

.tisseo-popup-partner-name {
	margin:    0;
	color:     #555;
	font-size: 0.9rem;
}

/* Contenu "Plus de stock" / "Erreur" */

.tisseo-popup-nostock p,
.tisseo-popup-error p {
	color:       #555;
	font-size:   1.05rem;
	line-height: 1.6;
	margin:      0;
}

/* ---- Responsive ---- */

@media screen and (max-width: 480px) {
	.tisseo-wheel-wrap {
		width:  240px;
		height: 240px;
	}
	.tisseo-spin-btn {
		font-size:  1rem;
		padding:    0.85rem 2rem;
	}
	.tisseo-popup-lot-name {
		font-size: 1.2rem;
	}
}