/* ═══════════════════════════════════════════════════════════════
   OMAR — Page Quiz marin (gabarit template-quiz.php)
   Reprend le design du prototype quizz.html. Chargé uniquement sur
   la page utilisant le modèle « Quiz marin ». Utilise les tokens de main.css.
   ═══════════════════════════════════════════════════════════════ */

.quiz-section {
	background: var(--c-deep);
	color: #fff;
	position: relative;
	overflow: hidden;
	/* padding-top pour dégager la nav fixe */
	padding: 120px 0 clamp(3rem, 7vw, 5rem);
}
.quiz-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('https://images.unsplash.com/photo-1568430462989-44163eb1752f?w=1920&q=20') center/cover;
	opacity: .05;
}
.quiz-inner { position: relative; z-index: 1; }

.quiz-header { text-align: center; margin-bottom: 2.5rem; }
.quiz-header .eyebrow { color: var(--c-sky); }
.quiz-header h1 { color: #fff; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); margin: .5rem 0 .75rem; line-height: 1.1; }
.quiz-header p { color: rgba(255,255,255,.6); max-width: 500px; margin: 0 auto; font-size: .95rem; }

.quiz-card {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--r-xl);
	padding: 2.25rem 2.75rem;
	max-width: 660px;
	margin: 0 auto;
	backdrop-filter: blur(8px);
}

/* Progression */
.quiz-progress { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.6rem; }
.quiz-prog-bar { flex: 1; height: 4px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); overflow: hidden; }
.quiz-prog-fill { height: 100%; background: var(--c-sky); border-radius: var(--r-pill); transition: width .4s ease; }
.quiz-prog-lbl { font-size: .72rem; color: rgba(255,255,255,.45); white-space: nowrap; }

/* Question + options */
.quiz-q { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.45; margin-bottom: 1.4rem; }
.quiz-opts { display: flex; flex-direction: column; gap: .55rem; }
.quiz-opt {
	display: flex; align-items: center; gap: .8rem;
	padding: .8rem 1rem; border: 1.5px solid rgba(255,255,255,.14);
	border-radius: var(--r-md); cursor: pointer;
	background: transparent; color: #fff;
	font: inherit; font-size: .9rem; text-align: left;
	transition: border-color .18s, background .18s;
}
.quiz-opt:hover:not(:disabled) { border-color: rgba(17,171,239,.55); background: rgba(17,171,239,.08); }
.quiz-opt.correct { border-color: #22c55e; background: rgba(34,197,94,.12); }
.quiz-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.10); }
.quiz-opt:disabled { cursor: default; }

.opt-letter {
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(255,255,255,.1);
	display: flex; align-items: center; justify-content: center;
	font-size: .68rem; font-weight: 700; flex-shrink: 0; transition: background .18s;
}
.quiz-opt.correct .opt-letter { background: #22c55e; }
.quiz-opt.wrong .opt-letter { background: #ef4444; }

/* Retour / explication */
.quiz-fb { margin-top: 1.1rem; padding: .8rem 1rem; border-radius: var(--r-md); font-size: .85rem; line-height: 1.55; display: none; }
.quiz-fb.show { display: block; }
.quiz-fb.correct { background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.2); }
.quiz-fb.wrong { background: rgba(239,68,68,.10); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }

.quiz-nav { display: flex; justify-content: flex-end; margin-top: 1.4rem; }

/* Écran de score */
.quiz-score { text-align: center; padding: 1rem 0; }
.score-ring {
	width: 108px; height: 108px; border-radius: 50%;
	background: rgba(17,171,239,.15); border: 3px solid var(--c-sky);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin: 0 auto 1.5rem;
}
.score-ring .big { font-size: 2.2rem; font-weight: 800; color: var(--c-sky); line-height: 1; }
.score-ring .total { font-size: .72rem; color: rgba(255,255,255,.45); }
.quiz-score h3 { font-size: 1.3rem; font-family: var(--f-display); color: #fff; margin-bottom: .5rem; }
.quiz-score p { font-size: .88rem; color: rgba(255,255,255,.6); margin-bottom: 1.5rem; max-width: 420px; margin-inline: auto; }
.quiz-score-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* État vide */
.quiz-empty { text-align: center; color: rgba(255,255,255,.7); }
.quiz-empty-admin { text-align: center; color: rgba(255,255,255,.45); font-size: .82rem; margin-top: .5rem; }

@media (max-width: 560px) {
	.quiz-card { padding: 1.5rem; }
}