/**
 * TutoProgressions - Styles spécifiques
 */

/* ==================== PROGRESSION DISPLAY ==================== */

#progression-display {
	text-align: center;
	margin: 15px auto;
	padding: 10px;
}

#progression-title {
	font-size: 1.4rem;
	font-weight: 600;
	color: #666;
	margin-bottom: 15px;
}

#progression-chords {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto;
	padding: 10px;
}

.chord-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 70px;
	padding: 12px 18px;
	background: #f5f5f5;
	border-radius: 10px;
	border: 3px solid transparent;
	transition: all 0.3s ease;
	cursor: default;
}

.chord-box:hover {
	background: #e8e8e8;
}

.chord-box.active {
	border-color: #3b82f6;
	background: #eff6ff;
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.chord-box.completed {
	background: #dcfce7;
	border-color: #22c55e;
}

.chord-box.feedback-ok {
	background: #22c55e;
	border-color: #16a34a;
	transform: scale(1.1);
	animation: none;
}

.chord-box.feedback-ok .chord-name,
.chord-box.feedback-ok .degree {
	color: white;
}

.chord-box.feedback-error {
	background: #ef4444;
	border-color: #dc2626;
	transform: scale(1.1);
	animation: shake 0.3s ease-in-out;
}

.chord-box.feedback-error .chord-name,
.chord-box.feedback-error .degree {
	color: white;
}

@keyframes shake {
	0%, 100% { transform: scale(1.1) translateX(0); }
	25% { transform: scale(1.1) translateX(-5px); }
	75% { transform: scale(1.1) translateX(5px); }
}

.chord-box .degree {
	font-size: 0.85rem;
	color: #888;
	font-weight: 500;
	margin-bottom: 2px;
}

.chord-box .chord-name {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
}

/* ==================== SHEET CONTAINER ==================== */

#sheet-container {
	max-width: 850px;
	margin: 10px auto;
	padding: 10px;
	background: white;
	border-radius: 8px;
}

#sheet {
	min-height: 150px;
}

#sheet svg {
	display: block;
	margin: 0 auto;
}

/* ==================== BOUTON ÉCOUTER ==================== */

.btn-listen {
	background: #8b5cf6;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	font-size: 0.9rem;
}

.btn-listen:hover {
	background: #7c3aed;
}

.btn-listen:active {
	transform: scale(0.98);
}

.btn-listen.active {
	background: #dc2626;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
	#progression-title {
		font-size: 1.2rem;
	}

	#progression-chords {
		gap: 8px;
	}

	.chord-box {
		min-width: 55px;
		padding: 10px 12px;
	}

	.chord-box .chord-name {
		font-size: 1.2rem;
	}

	.chord-box .degree {
		font-size: 0.75rem;
	}

	#chord-display {
		font-size: 4rem;
	}

	#sheet-container {
		padding: 5px;
	}
}

@media (max-width: 500px) {
	#progression-display {
		margin: 10px auto;
		padding: 5px;
	}

	#progression-title {
		font-size: 1rem;
		margin-bottom: 10px;
	}

	.chord-box {
		min-width: 45px;
		padding: 8px 10px;
	}

	.chord-box .chord-name {
		font-size: 1rem;
	}

	.chord-box.active {
		transform: scale(1.05);
	}

	#chord-display {
		font-size: 3rem;
	}

	#chord-notes {
		font-size: 0.9rem;
	}

	.btn-listen {
		padding: 6px 12px;
		font-size: 0.85rem;
	}
}

/* ==================== DESKTOP LARGE ==================== */

@media (min-width: 1024px) {
	#progression-display {
		margin: 20px auto;
	}

	.chord-box {
		min-width: 80px;
		padding: 15px 22px;
	}

	.chord-box .chord-name {
		font-size: 1.8rem;
	}

	#chord-display {
		font-size: 6rem;
	}

	#sheet-container {
		max-width: 900px;
	}
}

/* ==================== ANIMATIONS ==================== */

@keyframes pulse {
	0%, 100% {
		transform: scale(1.1);
	}
	50% {
		transform: scale(1.15);
	}
}

.chord-box.active {
	animation: pulse 1s ease-in-out infinite;
}

/* Désactiver l'animation si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
	.chord-box.active {
		animation: none;
		transform: scale(1.1);
	}
}