/* Quiz "Retrouver les degrés d'oreille" : habillage cohérent avec la charte du site. */

/* Cadre général : centré, dans l'esprit des encadrés du site (#encadre_infos_formations) */
.qd-outil{
	max-width:850px;
	margin:40px auto;
	padding:30px 25px;
	background-color:var(--GIpurple1);
	border:1px solid var(--GIpurple3);
	border-radius:10px;
	text-align:center;
}

/* Barre du haut : bouton, score, progression, tout centré */
.qd-barre{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px 15px;
	margin-bottom:15px;
}
.qd-score, .qd-progression{
	color:var(--GIpurple);
	font-weight:500;
}

/* Textes : même interligne et centrage que le reste de la page */
.qd-outil p{
	line-height:var(--LineHeight);
	padding:10px 0;
	margin:auto;
}

/* Boutons : comme les boutons violets du site (CTA, #li_formations) */
.qd-outil button{
	color:#fff;
	background-color:var(--GIpurple);
	border:none;
	border-radius:50px;
	padding:12px 30px;
	font-family:var(--GIfont), 'sans-serif';
	font-size:1rem;
	cursor:pointer;
}
.qd-outil button:hover{
	background-color:#2d1e8a;
}
.qd-outil button:disabled{
	background-color:var(--GIpurple4);
	cursor:default;
}

/* Les mesures : petites cartes centrées */
.qd-mesures{
	display:flex;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	margin:20px 0;
}
.qd-mesure{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	min-width:100px;
	padding:12px 16px;
	background-color:#fff;
	border:2px solid var(--GIpurple3);
	border-radius:10px;
}
.qd-num{
	font-size:0.85rem;
	color:#777777;
}
.qd-degre{
	font-size:1.2rem;
	color:var(--GIpurple);
	font-weight:500;
}

/* Menus de réponse : plus grands, pilule, chevron violet, états hover/focus */
.qd-reponse{
	appearance:none;
	-webkit-appearance:none;
	min-width:130px;
	padding:10px 40px 10px 16px;
	font-family:var(--GIfont), 'sans-serif';
	font-size:1.1rem;
	color:var(--GIgreytext);
	text-align:center;
	text-align-last:center;
	background-color:#fff;
	border:2px solid #d6e0ff;
	border-radius:50px;
	cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 32 L50 72 L85 32' stroke='%23422EBD' stroke-width='12' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
	background-size:13px;
}
.qd-reponse:hover{
	border-color:var(--GIpurple3);
}
.qd-reponse:focus{
	outline:none;
	border-color:var(--GIpurple);
	box-shadow:0 0 0 3px var(--GIpurple1);
}

/* Correction : vert des encadrés "résumé", rouge et orangé de la charte */
.qd-bravo{ color:#13b100; font-weight:500; }
.qd-rate{ color:#DD2942; }
.qd-faux{ color:#DD2942; text-decoration:line-through; }
.qd-avertissement, .qd-erreur{ color:#f58916; }
.qd-score-final{ font-size:1.5rem; font-weight:500; color:var(--GIpurple); }