/* Quiz « Je débute » (page-je-debute.php, inc/woocommerce/quiz.php, assets/js/quiz.js) ----------------------- */

.quiz { max-width: 760px; margin: 28px auto 0; padding: 26px 32px 24px; border: 1px solid var(--c-creme); background: var(--c-creme-clair); }
.quiz__barre { height: 4px; border-radius: 2px; background: var(--c-creme); overflow: hidden; }
.quiz__jauge { display: block; width: 0; height: 100%; background: var(--c-vert); transition: width 0.3s ease; }
.quiz__etape { margin: 14px 0 6px; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-texte-doux); }
.quiz:not(.quiz--js) .quiz__barre, .quiz:not(.quiz--js) .quiz__etape { display: none; }

.quiz__question { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.quiz:not(.quiz--js) .quiz__question + .quiz__question { padding-top: 20px; border-top: 1px solid var(--c-creme); }
.quiz--js .quiz__question { display: none; }
.quiz--js .quiz__question.is-active { display: block; }
.quiz__titre { margin: 0 0 16px; padding: 0; font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--f-titre); color: var(--c-texte); text-wrap: balance; }
.quiz__chapo { margin: -8px 0 16px; font-size: var(--t-courant); line-height: 1.5; color: var(--c-texte-doux); }

.quiz__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.quiz__options--nombreuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz__option { position: relative; display: block; cursor: pointer; }
.quiz__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.quiz__libelle {
	display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 13px 18px;
	border: 1px solid var(--c-champ); border-radius: var(--rayon); background: #fff;
	font-size: var(--t-courant); line-height: 1.3; color: var(--c-texte); transition: border-color var(--duree), background var(--duree);
}
.quiz__precision { font-size: var(--t-petit); color: var(--c-texte-doux); }
.quiz__option:hover .quiz__libelle { border-color: var(--c-vert); }
.quiz__option input:checked + .quiz__libelle { border-color: var(--c-vert); background: var(--c-vert-pale); box-shadow: inset 0 0 0 1px var(--c-vert); }
.quiz__option input:focus-visible + .quiz__libelle { outline: 2px solid var(--c-prune); outline-offset: 2px; }
.quiz__option input:disabled + .quiz__libelle { opacity: 0.5; }

.quiz__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.quiz__precedent { padding: 6px 0; border: 0; background: none; font: 400 var(--t-petit)/1.3 var(--f-texte); color: var(--c-prune); cursor: pointer; }
.quiz__precedent:hover { text-decoration: underline; text-underline-offset: 3px; }
.quiz__envoyer { margin-left: auto; }
/* Avec JavaScript, une réponse fait passer à la suite (Entrée au clavier) : le bouton ne sert qu'au formulaire sans script. */
.quiz--js .quiz__envoyer { display: none; }
.quiz__envoyer:disabled { opacity: 0.45; cursor: default; }

/* Entrée vers l'assistant, au-dessus du quiz (inc/woocommerce/assistant.php) */
.quiz-assistant {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
	max-width: 760px; margin: 28px auto 0; padding: 14px 18px 14px 32px; border: 1px solid var(--c-creme); background: #fff;
}
.quiz-assistant + .quiz { margin-top: 14px; }
.quiz-assistant__texte { margin: 0; font: 600 var(--t-courant)/1.3 var(--f-texte); color: var(--c-texte); }
.quiz-assistant__bouton {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
	border: 1px solid var(--c-vert); border-radius: var(--rayon); background: #fff;
	font: 600 var(--t-compact)/1.2 var(--f-texte); color: var(--c-vert-fonce); cursor: pointer; transition: background var(--duree);
}
.quiz-assistant__bouton svg { flex: none; color: var(--c-vert); }
.quiz-assistant__bouton:hover { background: var(--c-vert-pale); }
.quiz-assistant__bouton:focus-visible { outline: 2px solid var(--c-prune); outline-offset: 2px; }

/* Résultat */
.quiz-resultat { margin-top: 26px; }
.quiz-resultat__titre { margin: 0; text-align: center; font: 600 clamp(24px, 2.8vw, 32px)/1.2 var(--f-titre); color: var(--c-texte); }
.quiz-resultat__profil { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 26px; padding: 0; list-style: none; }
.quiz-resultat__profil li { padding: 5px 12px; border: 1px solid var(--c-creme); border-radius: 999px; background: #fff; font-size: var(--t-petit); color: var(--c-texte-2); }
ul.products.grille-produits.quiz-resultat__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: 0 auto; }
/* L'extension de favoris ne charge ses fichiers que dans la boutique : pas de bouton favori ici. */
.quiz-resultat .carte-cat__favori { display: none; }
.quiz-resultat__role {
	margin: 0; padding: 8px 10px; border-bottom: 1px solid #dbe6c2; background: var(--c-vert-pale);
	font: 600 var(--t-label)/1.2 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--c-vert-fonce);
}
.quiz-resultat__vide { max-width: 640px; margin: 0 auto; text-align: center; color: var(--c-texte-2); }
.quiz-resultat__suite { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 26px 0 0; font-size: var(--t-compact); }
.quiz-resultat__rayon { color: var(--c-vert-fonce); font-weight: 600; text-decoration: none; }
.quiz-resultat__refaire { color: var(--c-prune); }
.quiz-resultat__rayon:hover, .quiz-resultat__refaire:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 999px) {
	.quiz { margin-top: 18px; padding: 18px 16px 16px; }
	.quiz-assistant { margin-top: 18px; padding: 12px 16px; }
	ul.products.grille-produits.quiz-resultat__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.quiz__options--nombreuses { grid-template-columns: minmax(0, 1fr); }
	/* Texte sur deux lignes à 320 px : l'icône suit le texte au lieu de rester seule à gauche. */
	.quiz-assistant__bouton { display: block; width: 100%; text-align: center; line-height: 1.35; }
	.quiz-assistant__bouton svg { display: inline-block; margin-right: 6px; vertical-align: -3px; }
	.quiz__libelle { min-height: 48px; padding: 11px 14px; }
	.quiz-resultat__role { letter-spacing: 0.08em; }
	/* Rappel des réponses en une ligne de texte : les pastilles s'empilaient avant les produits. */
	.quiz-resultat__profil { display: block; margin: 10px auto 18px; text-align: center; line-height: 1.5; }
	.quiz-resultat__profil li { display: inline; padding: 0; border: 0; background: none; font-size: var(--t-petit); color: var(--c-texte-doux); }
	/* Le point reste accroché à la réponse qu'il suit : il ne commence jamais une ligne. */
	.quiz-resultat__profil li:not(:last-child)::after { content: "\00a0·"; margin-right: 0.45em; color: var(--c-texte-discret); }
}
@media (prefers-reduced-motion: reduce) {
	.quiz__jauge { transition: none; }
}