/*
 * ============================================================================
 *  Habillage du quiz LearnDash d'après la maquette « Section_Figma »
 * ============================================================================
 *  Chargée UNIQUEMENT sur les quiz listés dans inc/config.php, clé
 *  « quiz_design » / « quiz_ids ». Aucune autre page du site ne la reçoit.
 *
 *  Principe : le balisage du quiz est produit par WpProQuiz et n'est pas
 *  reconstruit — on ne fait que l'habiller. C'est ce qui garde la progression,
 *  la validation, le retour et l'enregistrement de la tentative intacts.
 *
 *  Les couleurs viennent des couleurs globales du kit Elementor
 *  (--e-global-color-primary / -secondary). Les valeurs de géométrie viennent
 *  de inc/config.php, par les variables --utmb-quiz-* posées en ligne.
 *
 *  LA RÈGLE DU JEU, ET POURQUOI LES SÉLECTEURS SONT CE QU'ILS SONT
 *  ---------------------------------------------------------------
 *  LearnDash habille le quiz avec des sélecteurs en TROIS classes :
 *
 *      .learndash-wrapper .wpProQuiz_content .wpProQuiz_button        (0,3,0)
 *      .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(…) label
 *                                                                    (0,4,1)
 *
 *  En phase 3b nos règles étaient en « .utmb-quiz input.wpProQuiz_button »,
 *  soit (0,2,1) : elles PERDAIENT, et c'est LearnDash qui imposait la petite
 *  pilule, le .75em, le rayon 20 px et le display:flex.
 *
 *  La correction consiste donc à poser EXACTEMENT la même spécificité, pas
 *  davantage, et à laisser l'ordre de chargement trancher : cette feuille est
 *  servie après learndash.min.css ET après le bloc <style> en ligne de
 *  LearnDash. À spécificité égale, le dernier gagne. D'où les sélecteurs en
 *  « .utmb-quiz .wpProQuiz_content … » : un cran de plus que LearnDash sur
 *  l'ancêtre, zéro cran de plus sur la cible, aucun !important.
 *
 *  Les seuls !important portent sur « float » et « margin » : WpProQuiz les
 *  écrit EN LIGNE sur ses boutons et son fieldset, et un style en ligne ne se
 *  bat pas autrement.
 *
 *  Sommaire
 *    1. Repères de couleur dérivés du kit
 *    2. Cadre : fond photo, rayon
 *    3. Barre de titre en verre
 *    4. Carte blanche et ombre intérieure
 *    5. Barre de progression segmentée
 *    6. Énoncé
 *    7. Réponses en cartes
 *    8. Boutons
 *    9. Écrans de démarrage, d'envoi et de résultats
 *   10. Ce que la maquette ne montre pas : titre de page, fil d'Ariane, onglets
 * ============================================================================
 */

/* -------------------------------------- 1. repères de couleur du kit ----- */

.utmb-quiz {
	/*
	 * Le bleu de charte et le blanc viennent du kit. Les variantes à 20 % sont
	 * calculées à partir de la même source par color-mix() ; la valeur littérale
	 * qui précède sert de repli aux navigateurs sans color-mix().
	 */
	--utmb-quiz-primary: var( --e-global-color-primary, #396277 );
	--utmb-quiz-surface: var( --e-global-color-secondary, #ffffff );
	--utmb-quiz-primary-20: rgba( 57, 98, 119, 0.2 );
	--utmb-quiz-primary-20: color-mix( in srgb, var( --utmb-quiz-primary ) 20%, transparent );
}

/* ------------------------------------------------- 2. cadre et fond ------ */

.utmb-quiz {
	/*
	 * L'image est posée ici et pas dans Elementor : sa valeur est le résultat
	 * d'une cascade à trois niveaux (quiz, cours, repli du kit) calculée en PHP.
	 * Le rayon et le recadrage restent dans cette feuille, pour n'avoir qu'une
	 * seule source de vérité.
	 */
	background-image: var( --utmb-quiz-bg, none );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var( --utmb-quiz-radius-frame, 18px );
	overflow: hidden;

	/*
	 * Hauteur : la fenêtre MOINS l'en-tête du site, avec un plancher. C'est ce
	 * qui met la barre de titre, la progression, l'énoncé, les réponses et les
	 * boutons au-dessus de la ligne de flottaison. Les valeurs viennent de
	 * inc/config.php (quiz_design/frame_offset et frame_min_height).
	 *
	 * 100svh et non 100vh : sur mobile, vh compte la fenêtre barre d'adresse
	 * dépliée, ce qui pousse le contenu hors de l'écran. Le repli en vh est posé
	 * d'abord pour les navigateurs qui ignorent svh.
	 */
	min-height: max( 520px, calc( 100vh - 248px ) );
	min-height: var( --utmb-quiz-frame-h, max( 520px, calc( 100svh - 248px ) ) );
}

/* La barre d'administration de WordPress prend 32 px de plus. */
body.admin-bar .utmb-quiz {
	min-height: calc( var( --utmb-quiz-frame-h, max( 520px, calc( 100svh - 248px ) ) ) - 32px );
}

@media ( max-width: 1024px ) {
	.utmb-quiz {
		min-height: var( --utmb-quiz-frame-h-tab, max( 520px, calc( 100svh - 200px ) ) );
	}

	body.admin-bar .utmb-quiz {
		min-height: calc( var( --utmb-quiz-frame-h-tab, max( 520px, calc( 100svh - 200px ) ) ) - 46px );
	}
}

@media ( max-width: 767px ) {
	.utmb-quiz {
		min-height: var( --utmb-quiz-frame-h-mob, max( 480px, calc( 100svh - 160px ) ) );
	}

	body.admin-bar .utmb-quiz {
		min-height: calc( var( --utmb-quiz-frame-h-mob, max( 480px, calc( 100svh - 160px ) ) ) - 46px );
	}
}

/* ------------------------------------- 3. barre de titre en verre -------- */

.utmb-quiz .utmb-quiz__label {
	background-color: var( --utmb-glass-fill, rgba( 255, 255, 255, 0.1 ) );
	-webkit-backdrop-filter: blur( var( --utmb-glass-blur, 18px ) ) saturate( var( --utmb-glass-saturate, 140% ) );
	backdrop-filter: blur( var( --utmb-glass-blur, 18px ) ) saturate( var( --utmb-glass-saturate, 140% ) );
	border-radius: var( --utmb-quiz-radius-label, 12px ) var( --utmb-quiz-radius-label, 12px ) 0 0;
	box-sizing: border-box;
	color: var( --utmb-quiz-surface );
	font-size: var( --utmb-quiz-label-size, 24px );
	/* PHASE 5A : interligne unique, inc/config.php. */
	line-height: var( --utmb-quiz-line-height, 20px );
	padding: 15px 20px;
	width: 100%;
}

/*
 * Repli : sans backdrop-filter, un blanc à 10 % sur une photo ne garantit aucune
 * lisibilité du titre blanc. L'aplat de bleu de charte assure 4,6:1 même sur une
 * photo entièrement blanche. Il cache la photo : c'est le prix d'un repli sûr.
 */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.utmb-quiz .utmb-quiz__label {
		background-color: var( --utmb-glass-fallback, rgba( 57, 98, 119, 0.85 ) );
	}
}

/* ------------------------------ 4. carte blanche, ombre intérieure ------- */

.utmb-quiz .utmb-quiz__card {
	background-color: var( --utmb-quiz-surface );
	box-shadow: var( --utmb-quiz-inner-shadow, inset 0 -5px 31.2px rgba( 0, 0, 0, 0.15 ) );
}

/* --------------------------- 5. barre de progression segmentée ----------- */

.utmb-quiz .utmb-quiz__progress {
	display: flex;
	gap: var( --utmb-quiz-progress-gap, 8px );
	width: 100%;
}

.utmb-quiz .utmb-quiz__segment {
	background-color: var( --utmb-quiz-primary-20 );
	border-radius: 100px;
	flex: 1 1 0;
	height: var( --utmb-quiz-progress-h, 3px );
	transition: background-color 0.2s ease;
}

.utmb-quiz .utmb-quiz__segment.is-current,
.utmb-quiz .utmb-quiz__segment.is-done {
	background-color: var( --utmb-quiz-primary );
}

/* ----------------------------------------------------- 6. énoncé --------- */

/*
 * (0,3,0) : même spécificité que .learndash-wrapper .wpProQuiz_content …,
 * servie après, donc gagnante. La taille et la couleur sont celles de la
 * maquette (18 px, #396277), la graisse celle du panneau du designer (Demi/500).
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_question_text {
	color: var( --utmb-quiz-primary );
	display: block;
	float: none;
	font-family: var( --utmb-quiz-font );
	font-size: var( --utmb-quiz-answer-size, 18px );
	font-weight: var( --utmb-quiz-answer-weight, 500 );
	/* PHASE 5A : interligne unique, inc/config.php. */
	line-height: var( --utmb-quiz-line-height, 20px );
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Le texte visible est dans un <p> à l'intérieur du <legend> : on y pose la
 * taille aussi, pour qu'aucune règle sur « p » ne puisse la reprendre.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_question_text p {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/*
 * Le fieldset porte l'alignement du texte : à gauche en mobile, centré en
 * desktop comme dans la maquette. Il le porte, et pas le <li>, parce que le
 * <li> est aligné à droite pour ses boutons (§ 8).
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_question {
	border: 0;
	margin: 0 !important; /* WpProQuiz écrit la marge en ligne. */
	padding: 0;
	text-align: left;
}

@media ( min-width: 768px ) {
	.utmb-quiz .wpProQuiz_content .wpProQuiz_question {
		text-align: center;
	}
}

/* -------------------------------------------- 7. réponses en cartes ------ */

/*
 * Répartition des rôles, pour n'avoir qu'UN seul contour :
 *   .wpProQuiz_questionListItem  = l'enveloppe, qui ne porte que la mise en
 *                                  page (taille mini, souplesse) ;
 *   label                        = la carte visible, qui porte le fond, la
 *                                  bordure, le rayon et le rembourrage.
 *
 * C'est LearnDash qui habille déjà le <label> (bordure 2 px grise, rayon 6,
 * rembourrage 1em) : en phase 3b nous habillions l'enveloppe EN PLUS, d'où les
 * deux contours. On reprend donc son élément plutôt que d'en empiler un second.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList {
	display: flex;
	flex-direction: column;
	gap: var( --utmb-quiz-answer-gap, 12px );
	list-style: none;
}

/*
 * L'espace entre l'énoncé et la première réponse — 20 px, Frame 1725.
 *
 * Il FAUT cinq classes ici, et c'est la seule raison : LearnDash écrit
 *
 *   .learndash-wrapper .wpProQuiz_content .wpProQuiz_listItem
 *     .wpProQuiz_question .wpProQuiz_questionList { margin: 0 ; padding: 0 }   (0,5,0)
 *
 * En phase 3c la marge était posée sur « .utmb-quiz .wpProQuiz_content
 * .wpProQuiz_questionList », soit (0,3,0) : elle était écrasée, et l'espace
 * tombait à zéro. C'est le défaut constaté. Même spécificité, servie après.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList {
	margin: var( --utmb-quiz-list-gap, 20px ) 0 0;
	padding: 0;
}

/* Desktop : rangée centrée qui passe à la ligne, comme Frame 1728. */
@media ( min-width: 768px ) {
	.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/*
 * (0,4,0) : autant que « .learndash-wrapper .wpProQuiz_content
 * .wpProQuiz_questionListItem:not(.ld-sortable__item) », servie après.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem {
	background: none;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	list-style: none;
	margin: 0;
	min-height: var( --utmb-quiz-answer-h, 40px );
	min-width: var( --utmb-quiz-answer-w, 304px );
	padding: 0;
}

/* Mobile : colonne, pleine largeur, alignée sur le bord gauche de l'énoncé. */
@media ( max-width: 767px ) {
	.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem {
		min-height: var( --utmb-quiz-answer-h-mob, 44px );
		min-width: 0;
		width: 100%;
	}
}

/*
 * (0,4,1) : autant que la règle de LearnDash sur le label, servie après.
 * C'est elle qui portait la bordure grise de 2 px, le rayon 6 et le 1em.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem label {
	align-items: center;
	background-color: var( --utmb-quiz-surface );
	border: 1px solid var( --utmb-quiz-primary-20 );
	border-radius: var( --utmb-quiz-radius-answer, 8px );
	box-sizing: border-box;
	color: var( --utmb-quiz-primary );
	cursor: pointer;
	display: flex;
	font-family: var( --utmb-quiz-font );
	font-size: var( --utmb-quiz-answer-size, 18px );
	font-weight: var( --utmb-quiz-answer-weight, 500 );
	/* PHASE 5A : interligne unique, inc/config.php. */
	line-height: var( --utmb-quiz-line-height, 20px );
	margin: 0;
	min-height: inherit;
	padding: 8px 14px;
	text-align: left;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	width: 100%;
}

/*
 * Le bouton radio est retiré de l'affichage mais RESTE dans le flux du clavier :
 * ni display:none ni visibility:hidden, qui le sortiraient de la navigation.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput {
	height: 1px;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 1px;
}

/*
 * Réponse choisie : fond et bordure #396277, texte blanc. Deux écritures,
 * volontairement — .utmb-selected est posée par utmb-quiz.js, :has() fait la
 * même chose sans JavaScript là où il est reconnu. (0,5,1) chacune.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.utmb-selected label,
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem label:has( input.wpProQuiz_questionInput:checked ) {
	background-color: var( --utmb-quiz-primary );
	border-color: var( --utmb-quiz-primary );
	color: var( --utmb-quiz-surface );
}

/*
 * UN SEUL anneau, et seulement au clavier.
 *
 * Deux choses produisaient le double contour bleu de la phase 3b :
 *   - notre « outline » sur l'enveloppe EN PLUS de la bordure du label ;
 *   - la règle de LearnDash « label:focus-within { border-color: #396277 } »,
 *     qui se déclenche aussi au CLIC, puisque cliquer un label donne le focus au
 *     bouton radio.
 *
 * On neutralise donc :focus-within (0,5,1 contre 0,4,1 chez LearnDash) et on
 * met l'anneau sur :focus-visible, qui ne répond qu'au clavier.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem label:focus-within {
	border-color: var( --utmb-quiz-primary-20 );
}

.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.utmb-selected label:focus-within {
	border-color: var( --utmb-quiz-primary );
}

.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem label:has( input.wpProQuiz_questionInput:focus-visible ),
.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.utmb-focus-visible label {
	outline: 2px solid var( --utmb-quiz-primary );
	outline-offset: 2px;
}

/* Survol, seulement sur les pointeurs qui savent survoler. */
@media ( hover: hover ) {
	.utmb-quiz .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem:not( .utmb-selected ) label:hover {
		border-color: var( --utmb-quiz-primary );
	}
}

/* -------------------------------------------------- 8. boutons ----------- */

.utmb-quiz .wpProQuiz_content .wpProQuiz_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Les boutons sont alignés à droite. Ils sont « inline-flex » (§ ci-dessous),
 * donc text-align sur le <li> suffit — et c'est pour cela qu'il fallait
 * reprendre « display » à LearnDash, qui les met en « flex », un bloc, que
 * text-align n'atteint pas. C'était la cause du bouton collé à gauche.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_listItem {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

/*
 * Style plein : Suivant, Vérifier, Commencer, Terminer, Recommencer, Voir les
 * questions. (0,3,0), comme LearnDash, servie après.
 *
 * Le chevron est une image de fond : un <input> est un élément remplacé, il ne
 * peut pas porter de ::after. Le rembourrage droit lui réserve sa place — c'est
 * ce qui manquait en phase 3b, d'où le chevron par-dessus le texte.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_button,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button2 {
	align-items: center;
	background-color: var( --utmb-quiz-primary );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 4.5 13 10l-5.5 5.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border: 1px solid var( --utmb-quiz-primary );
	border-radius: var( --utmb-quiz-radius-button, 10px );
	box-shadow: none;
	color: var( --utmb-quiz-surface );
	cursor: pointer;
	display: inline-flex;
	float: none !important; /* WpProQuiz écrit le float en ligne. */
	font-family: var( --utmb-quiz-font );
	font-size: var( --utmb-quiz-button-size, 16px );
	font-weight: var( --utmb-quiz-button-weight, 500 );
	height: auto;
	justify-content: center;
	/* PHASE 5A : interligne unique, inc/config.php. */
	line-height: var( --utmb-quiz-line-height, 20px );
	margin: 20px 0 0;
	max-width: none;
	min-height: 40px;
	opacity: 1;
	padding: 8px 46px 8px 24px;
	text-align: center;
	text-shadow: none;
	text-transform: none; /* la maquette écrit « Next », pas « NEXT ». */
	white-space: normal;
	width: auto;
}

/* Retour : pilule sans fond, chevron à gauche. */
.utmb-quiz .wpProQuiz_content .wpProQuiz_button[name="back"] {
	background-color: transparent;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.5 4.5 7 10l5.5 5.5' stroke='%23396277' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: left 14px center;
	border-color: transparent;
	border-radius: 9999px;
	color: var( --utmb-quiz-primary );
	margin-right: var( --utmb-quiz-answer-gap, 12px );
	padding: 8px 24px 8px 46px;
}

/*
 * États. Le bloc <style> en ligne de LearnDash pose, en (0,6,0), un
 * « background-color: #396277 » au survol de TOUS les boutons du quiz : sans
 * cette reprise, le Retour se remplirait au survol et son texte bleu
 * disparaîtrait. (0,6,0) de notre côté aussi, servie après.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_button:hover,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button:focus,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button2:hover,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button2:focus {
	background-color: var( --e-global-color-utmbbleusurvol, #2c4b5b );
	border-color: var( --e-global-color-utmbbleusurvol, #2c4b5b );
	color: var( --utmb-quiz-surface );
	opacity: 1;
}

/*
 * Retour : les DEUX seuls !important de couleur de cette feuille, et ils sont
 * imposés. Le bloc <style> en ligne de LearnDash écrit, pour tous les boutons du
 * quiz sauf « Voir les questions » et « Recommencer » :
 *
 *   .learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not([disabled])
 *       :not(.wpProQuiz_button_reShowQuestion):not(.wpProQuiz_button_restartQuiz)
 *   { background-color: #396277 !important; color: #ffffff; }        (0,6,0)
 *
 * Un !important ne se bat qu'avec un !important. Et entre deux !important, ce
 * sont la spécificité puis l'ordre qui tranchent : il faut donc AUSSI atteindre
 * (0,6,0). D'où la chaîne d'ancêtres réels ci-dessous — cinq classes et un
 * attribut — et non un cran de plus que nécessaire.
 * Le « color: #ffffff » de LearnDash, lui, n'est pas !important : notre
 * !important suffit à le passer, quelle que soit sa spécificité.
 */
.utmb-quiz .wpProQuiz_content .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_button[name="back"],
.utmb-quiz .wpProQuiz_content .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_button[name="back"]:hover,
.utmb-quiz .wpProQuiz_content .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_button[name="back"]:focus {
	background-color: transparent !important;
	color: var( --utmb-quiz-primary ) !important;
}

/* Le retour visuel au survol passe donc par la bordure, pas par le fond. */
.utmb-quiz .wpProQuiz_content .wpProQuiz_button[name="back"]:hover,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button[name="back"]:focus {
	border-color: var( --utmb-quiz-primary-20 );
}

/* Anneau de focus, au clavier seulement. */
.utmb-quiz .wpProQuiz_content .wpProQuiz_button:focus-visible,
.utmb-quiz .wpProQuiz_content .wpProQuiz_button2:focus-visible {
	outline: 2px solid var( --utmb-quiz-primary );
	outline-offset: 2px;
}

/*
 * Mobile : Retour et Suivant sur la même ligne si la largeur le permet. Le <li>
 * reste aligné à droite ; les boutons se replient d'eux-mêmes sinon, étant
 * « inline-flex » dans un bloc.
 */
@media ( max-width: 767px ) {
	.utmb-quiz .wpProQuiz_content .wpProQuiz_button,
	.utmb-quiz .wpProQuiz_content .wpProQuiz_button2 {
		padding: 10px 40px 10px 20px;
	}

	.utmb-quiz .wpProQuiz_content .wpProQuiz_button[name="back"] {
		padding: 10px 20px 10px 40px;
	}
}

/* ------------------- 9. démarrage, envoi, résultats --------------------- */

.utmb-quiz .wpProQuiz_content .wpProQuiz_text,
.utmb-quiz .wpProQuiz_content .wpProQuiz_results,
.utmb-quiz .wpProQuiz_content .wpProQuiz_sending,
.utmb-quiz .wpProQuiz_content .wpProQuiz_infopage,
.utmb-quiz .wpProQuiz_content .wpProQuiz_checkPage {
	color: var( --utmb-quiz-primary );
	font-family: var( --utmb-quiz-font );
	text-align: left;
}

/* Le bouton de démarrage est aligné à droite, comme Suivant. */
.utmb-quiz .wpProQuiz_content .wpProQuiz_text > div,
.utmb-quiz .wpProQuiz_content .ld-quiz-actions {
	text-align: right;
}

.utmb-quiz .wpProQuiz_content .wpProQuiz_header,
.utmb-quiz .wpProQuiz_content .wpProQuiz_infopageHeader {
	color: var( --utmb-quiz-primary );
	font-family: var( --utmb-quiz-font );
	font-size: var( --utmb-quiz-answer-size, 18px );
	font-weight: var( --utmb-quiz-answer-weight, 500 );
	margin: 0 0 10px;
}

/* ------- 10. ce que la maquette ne montre pas : titre, fil, onglets ----- */

/*
 * Le grand titre de page vient du thème parent, le fil d'Ariane du code court
 * ld_infobar de LearnDash, et le bloc d'onglets est vide (le quiz n'a pas de
 * description). Aucun des trois n'existe dans la maquette.
 */
body.utmb-quiz-design .page-header,
body.utmb-quiz-design .entry-title {
	display: none;
}

.utmb-quiz .ld-quiz-status,
.utmb-quiz .ld-breadcrumbs,
.utmb-quiz .ld-tabs {
	display: none;
}