/* BGE Quiz — styles scopés sous .bge-quiz pour ne pas fuiter dans le thème.
   Les variables CSS (--blue, --red, etc.) viennent du design system global BGE.
   Fallback inline pour les sites où le design system ne serait pas encore chargé. */

.bge-quiz {
	--bgeq-blue:        var(--blue,        #0C4A94);
	--bgeq-blue-deep:   var(--blue-deep,   #062A53);
	--bgeq-red:         var(--red,         #D8232A);
	--bgeq-red-deep:    var(--red-deep,    #B11A20);
	--bgeq-green:       var(--green,       #81B32F);
	--bgeq-orange:      var(--orange,      #E68D14);
	--bgeq-sky:         var(--sky,         #8EB5D5);
	--bgeq-ink:         var(--ink,         #0E2238);
	--bgeq-paper:       var(--paper,       #F4F7FB);
	--bgeq-line:        var(--line,        #E1E8F2);
	--bgeq-muted:       var(--muted,       #5A6B82);
	--bgeq-shadow:      var(--shadow,      0 22px 50px -26px rgba(6,42,83,.55));
	--bgeq-radius:      var(--radius,      18px);
	color: var(--bgeq-ink);
	font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	line-height: 1.55;
}

.bge-quiz *,
.bge-quiz *::before,
.bge-quiz *::after {
	box-sizing: border-box;
}

.bge-quiz__card {
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--bgeq-shadow);
	border: 1px solid var(--bgeq-line);
	overflow: hidden;
	max-width: 920px;
	margin: 0 auto;
}

.bge-quiz__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-bottom: 1px solid var(--bgeq-line);
}

.bge-quiz .steps {
	display: flex;
	gap: 10px;
	align-items: center;
}

.bge-quiz .qnode {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--bgeq-line);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: .8rem;
	color: var(--bgeq-muted);
	background: #fff;
	transition: all .3s;
}

.bge-quiz .qnode.on {
	border-color: var(--bgeq-blue);
	background: var(--bgeq-blue);
	color: #fff;
}

.bge-quiz .qline {
	width: 26px;
	height: 2px;
	background: var(--bgeq-line);
	transition: background .3s;
}

.bge-quiz .qline.on {
	background: var(--bgeq-blue);
}

.bge-quiz .qcount {
	font-size: .85rem;
	color: var(--bgeq-muted);
	font-weight: 700;
}

.bge-quiz__body {
	padding: 40px 30px 34px;
}

.bge-quiz__q {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.6rem;
	margin-bottom: 1.6rem;
	line-height: 1.1;
	letter-spacing: -.025em;
}

.bge-quiz__opts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.bge-quiz__opt {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--bgeq-line);
	border-radius: 14px;
	padding: 18px;
	cursor: pointer;
	transition: all .15s;
	font-size: 1rem;
	font-family: inherit;
	color: inherit;
}

.bge-quiz__opt:hover,
.bge-quiz__opt:focus-visible {
	border-color: var(--bgeq-blue);
	transform: translateY(-3px);
	box-shadow: var(--bgeq-shadow);
	outline: none;
}

.bge-quiz__opt .ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	color: #fff;
}

.bge-quiz__opt b {
	display: block;
	font-weight: 700;
	margin-bottom: 2px;
}

.bge-quiz__opt .sub {
	color: var(--bgeq-muted);
	font-size: .9rem;
	line-height: 1.4;
}

.bge-quiz__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 26px;
}

.bge-quiz__back {
	background: none;
	border: none;
	color: var(--bgeq-muted);
	font-weight: 700;
	cursor: pointer;
	font-size: .95rem;
	font-family: inherit;
	padding: 0;
}

.bge-quiz__back:hover,
.bge-quiz__back:focus-visible {
	color: var(--bgeq-blue);
	outline: none;
}

.bge-quiz .eyebrow {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bgeq-red);
}

/* ===== Résultat ===== */
.bge-quiz__result .r-head {
	position: relative;
	background: linear-gradient(135deg, var(--bgeq-blue), var(--bgeq-blue-deep));
	color: #fff;
	padding: 34px 32px;
	overflow: hidden;
}

.bge-quiz__result .r-head .eyebrow {
	color: #ffb3b0;
}

.bge-quiz__result .r-head h3 {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: 2rem;
	font-weight: 800;
	margin: .4rem 0 .5rem;
	letter-spacing: -.025em;
	line-height: 1.05;
}

.bge-quiz__result .r-head p {
	color: #d4e3f6;
	max-width: 54ch;
}

.bge-quiz__result .r-cols {
	display: grid;
	grid-template-columns: 1.3fr .9fr;
}

.bge-quiz__result .r-left {
	padding: 30px;
}

.bge-quiz__result .r-right {
	padding: 30px;
	background: var(--bgeq-paper);
	border-left: 1px solid var(--bgeq-line);
}

.bge-quiz__result .r-block-title {
	font-weight: 800;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: 1.08rem;
	margin-bottom: .9rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.bge-quiz__result .dispo {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px dashed var(--bgeq-line);
}

.bge-quiz__result .dispo:last-of-type {
	border-bottom: none;
}

.bge-quiz__result .dispo .tag {
	font-size: .68rem;
	font-weight: 800;
	background: #eaf1fb;
	color: var(--bgeq-blue);
	border-radius: 6px;
	padding: 3px 7px;
	white-space: nowrap;
	margin-top: 2px;
}

.bge-quiz__result .dispo small {
	color: var(--bgeq-muted);
	display: block;
	font-size: .86rem;
}

.bge-quiz__result .encart {
	background: #eaf1fb;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: .92rem;
	margin-top: 16px;
	border-left: 3px solid var(--bgeq-blue);
}

.bge-quiz__result .encart b {
	color: var(--bgeq-blue);
}

.bge-quiz__result .encart--modalite {
	background: #fff;
	border: 1px solid var(--bgeq-line);
}

.bge-quiz__result .bge-quiz__restart {
	text-align: center;
	padding: 16px;
}

/* Couleur d'accent dynamique selon parcours (appliquée par JS via data-color) */
.bge-quiz__result[data-color="green"]  .r-head { border-bottom: 4px solid var(--bgeq-green); }
.bge-quiz__result[data-color="sky"]    .r-head { border-bottom: 4px solid var(--bgeq-sky); }
.bge-quiz__result[data-color="orange"] .r-head { border-bottom: 4px solid var(--bgeq-orange); }
.bge-quiz__result[data-color="red"]    .r-head { border-bottom: 4px solid var(--bgeq-red); }
.bge-quiz__result[data-color="blue"]   .r-head { border-bottom: 4px solid var(--bgeq-blue); }

.bge-quiz__result[data-color="green"]  .encart--modalite { border-left-color: var(--bgeq-green); }
.bge-quiz__result[data-color="sky"]    .encart--modalite { border-left-color: var(--bgeq-sky); }
.bge-quiz__result[data-color="orange"] .encart--modalite { border-left-color: var(--bgeq-orange); }
.bge-quiz__result[data-color="red"]    .encart--modalite { border-left-color: var(--bgeq-red); }
.bge-quiz__result[data-color="blue"]   .encart--modalite { border-left-color: var(--bgeq-blue); }

/* ===== Indication "form pré-rempli en aval" ===== */
.bge-quiz__cta-hint {
	font-size: .86rem;
	color: var(--bgeq-muted);
	margin-top: 14px;
}

/* Responsive */
@media (max-width: 920px) {
	.bge-quiz__opts { grid-template-columns: 1fr; }
	.bge-quiz__result .r-cols { grid-template-columns: 1fr; }
	.bge-quiz__result .r-right { border-left: none; border-top: 1px solid var(--bgeq-line); }
}

@media (prefers-reduced-motion: reduce) {
	.bge-quiz__opt,
	.bge-quiz .qnode,
	.bge-quiz .qline { transition: none; }
	.bge-quiz__opt:hover { transform: none; }
}