/* ============================================
   QUIZ - Connaissez-vous l'île Maurice ?
   ============================================ */

/* Variables */
:root {
	--quiz-gold: #c19a5f;
	--quiz-gold-light: #c19a5f2c;
	--quiz-coral: #40B4B0;
	--quiz-coral-light: #E8F6F5;
	--quiz-green: #2ECC71;
	--quiz-red: #E74C3C;
	--quiz-dark: #333;
	--quiz-gray: #666;
	--quiz-light-gray: #f5f5f5;
}

/* Section principale */
.quiz-section {
	background-color: var(--quiz-gold-light);
	padding: 60px 20px;
}

.quiz-container {
	max-width: 800px;
	margin: 0 auto;
}

/* ============================================
   HERO DU QUIZ
   ============================================ */
.quiz-hero {
	text-align: center;
	padding: 40px 20px;
}

.quiz-badge {
	display: inline-block;
	background-color: var(--quiz-coral);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 20px;
	font-family: 'Montserrat', sans-serif;
}

.quiz-badge i {
	margin-right: 6px;
}

.quiz-title {
	font-family: 'REM', sans-serif;
	font-size: 2.2rem;
	font-weight: 600;
	color: var(--quiz-dark);
	margin-bottom: 15px;
	line-height: 1.3;
}

.quiz-title .highlight {
	color: var(--quiz-gold);
}

.quiz-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	color: var(--quiz-gray);
	margin-bottom: 30px;
	line-height: 1.6;
}

.quiz-reassurance {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
}

.quiz-reassurance span {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
	color: var(--quiz-dark);
	display: flex;
	align-items: center;
	gap: 8px;
}

.quiz-reassurance i {
	color: var(--quiz-gold);
}

.quiz-start-btn {
	background-color: var(--quiz-gold);
	color: white;
	border: none;
	padding: 16px 40px;
	font-size: 1.1rem;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.quiz-start-btn:hover {
	background-color: #a0763d;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(193, 154, 95, 0.4);
}

.quiz-start-btn i {
	margin-right: 10px;
}

/* ============================================
   ZONE DE JEU
   ============================================ */
.quiz-game {
	background: white;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Barre de progression */
.quiz-progress {
	margin-bottom: 30px;
}

.quiz-progress-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
	color: var(--quiz-gray);
	margin-bottom: 10px;
	text-align: center;
}

.quiz-progress-bar {
	height: 8px;
	background-color: var(--quiz-light-gray);
	border-radius: 4px;
	overflow: hidden;
}

.quiz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--quiz-coral), var(--quiz-gold));
	border-radius: 4px;
	transition: width 0.4s ease;
}

/* Question */
.quiz-question {
	animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.question-icon {
	text-align: center;
	margin-bottom: 20px;
}

.question-icon i {
	font-size: 2.5rem;
	color: var(--quiz-coral);
}

.question-text {
	font-family: 'REM', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--quiz-dark);
	text-align: center;
	margin-bottom: 30px;
	line-height: 1.4;
}

/* Options */
.quiz-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.quiz-option {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--quiz-light-gray);
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 16px 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: left;
	font-family: 'Montserrat', sans-serif;
}

.quiz-option:hover:not(.disabled) {
	border-color: var(--quiz-gold);
	background: white;
}

.quiz-option:focus {
	outline: none;
	border-color: var(--quiz-gold);
	box-shadow: 0 0 0 3px rgba(193, 154, 95, 0.2);
}

.option-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: white;
	border-radius: 50%;
	font-weight: 600;
	color: var(--quiz-dark);
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.option-text {
	font-size: 1rem;
	color: var(--quiz-dark);
	line-height: 1.4;
}

/* États des options après réponse */
.quiz-option.correct {
	background-color: #D4EDDA;
	border-color: var(--quiz-green);
}

.quiz-option.correct .option-letter {
	background-color: var(--quiz-green);
	color: white;
}

.quiz-option.incorrect {
	background-color: #F8D7DA;
	border-color: var(--quiz-red);
}

.quiz-option.incorrect .option-letter {
	background-color: var(--quiz-red);
	color: white;
}

.quiz-option.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.quiz-option.show-correct {
	background-color: #D4EDDA;
	border-color: var(--quiz-green);
	opacity: 1;
}

.quiz-option.show-correct .option-letter {
	background-color: var(--quiz-green);
	color: white;
}

/* Fun Fact */
.quiz-funfact {
	background: var(--quiz-coral-light);
	border-left: 4px solid var(--quiz-coral);
	border-radius: 0 8px 8px 0;
	padding: 20px;
	margin: 25px 0;
	display: flex;
	gap: 15px;
	animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.funfact-icon {
	flex-shrink: 0;
}

.funfact-icon i {
	font-size: 1.5rem;
	color: var(--quiz-coral);
}

.funfact-content {
	font-family: 'Montserrat', sans-serif;
}

.funfact-content strong {
	display: block;
	font-size: 0.95rem;
	color: var(--quiz-dark);
	margin-bottom: 8px;
}

.funfact-content p {
	font-size: 0.9rem;
	color: var(--quiz-gray);
	line-height: 1.6;
	margin: 0;
}

/* Bouton suivant */
.quiz-next-btn {
	display: block;
	width: 100%;
	background-color: var(--quiz-gold);
	color: white;
	border: none;
	padding: 16px;
	font-size: 1rem;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 20px;
}

.quiz-next-btn:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.quiz-next-btn:not(:disabled):hover {
	background-color: #a0763d;
}

.quiz-next-btn:not(:disabled) {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(193, 154, 95, 0.4); }
	50% { box-shadow: 0 0 0 10px rgba(193, 154, 95, 0); }
}

.quiz-next-btn i {
	margin-left: 8px;
}

.quiz-result-btn i {
	margin-left: 8px;
}

/* ============================================
   BLOC RÉSULTAT
   ============================================ */
.quiz-result {
	animation: fadeInUp 0.5s ease;
}

.result-card {
	background: white;
	border-radius: 12px;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.result-badge {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	margin-bottom: 20px;
}

.result-badge.novice {
	background-color: #FFF3CD;
	color: #856404;
}

.result-badge.initie {
	background-color: #D4EDDA;
	color: #155724;
}

.result-badge.expert {
	background-color: #D1ECF1;
	color: #0C5460;
}

.result-score {
	margin-bottom: 20px;
}

.score-number {
	font-family: 'REM', sans-serif;
	font-size: 4rem;
	font-weight: 700;
	color: var(--quiz-gold);
}

.score-total {
	font-family: 'REM', sans-serif;
	font-size: 1.5rem;
	color: var(--quiz-gray);
}

.result-title {
	font-family: 'REM', sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--quiz-dark);
	margin-bottom: 15px;
}

.result-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	color: var(--quiz-gray);
	line-height: 1.6;
	margin-bottom: 30px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.result-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--quiz-gold);
	color: white;
	text-decoration: none;
	padding: 16px 40px;
	font-size: 1rem;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-transform: uppercase;
}

.result-cta:hover {
	background-color: #a0763d;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(193, 154, 95, 0.4);
}

.quiz-restart-btn {
	display: block;
	margin: 20px auto 0;
	background: none;
	border: none;
	color: var(--quiz-gray);
	font-size: 0.9rem;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	transition: color 0.3s ease;
}

.quiz-restart-btn:hover {
	color: var(--quiz-dark);
}

.quiz-restart-btn i {
	margin-right: 6px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
	.quiz-section {
		padding: 40px 15px;
		margin: 30px 0;
	}
	
	.quiz-title {
		font-size: 1.6rem;
	}
	
	.quiz-subtitle {
		font-size: 1rem;
	}
	
	.quiz-reassurance {
		flex-direction: column;
		gap: 10px;
	}
	
	.quiz-game {
		padding: 20px 15px;
	}
	
	.question-text {
		font-size: 1.2rem;
	}
	
	.quiz-option {
		padding: 14px 16px;
	}
	
	.option-letter {
		width: 32px;
		height: 32px;
		font-size: 0.9rem;
	}
	
	.option-text {
		font-size: 0.95rem;
	}
	
	.quiz-funfact {
		flex-direction: column;
		gap: 10px;
	}
	
	.result-card {
		padding: 30px 20px;
	}
	
	.score-number {
		font-size: 3rem;
	}
	
	.result-title {
		font-size: 1.3rem;
	}
	
	.result-cta {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.quiz-badge {
		font-size: 0.75rem;
		padding: 6px 12px;
	}
	
	.quiz-title {
		font-size: 1.4rem;
	}
	
	.question-icon i {
		font-size: 2rem;
	}
	
	.question-text {
		font-size: 1.1rem;
	}
}