/**
 * Questionnaire Olykan - styles front.
 *
 * Tout est prefixe .oq- et enferme sous .oq-root pour ne jamais entrer en
 * conflit avec le theme ou un page builder.
 */

/* ---------- Theme creme + ambre (identite du questionnaire) ---------- */
.oq-root {
	--oq-surface: #FAF3EA;
	--oq-surface-2: #FFFFFF;
	--oq-surface-3: #F3E8D8;
	--oq-line: #EADFCE;
	--oq-line-strong: #DFD1BB;

	--oq-text: #131313;
	--oq-muted: #6B655D;

	--oq-accent: #E09B2D;
	--oq-accent-text: #B87A16;
	--oq-accent-soft: rgba(224, 155, 45, .12);
	--oq-accent-line: rgba(224, 155, 45, .45);
	--oq-note-bg: rgba(224, 155, 45, .13);

	--oq-cta-bg: #E09B2D;
	--oq-cta-bg-hover: #CE8B22;
	--oq-cta-text: #FFFFFF;

	--oq-decor: #F1E5D3;
	--oq-scene-bg: #EFE7DA;

	--oq-navy: #032D67;
	--oq-hover-bg: #032D67;
	--oq-hover-text: #FFFFFF;

	--oq-shadow: 0 16px 42px rgba(90, 66, 30, .10);
	--oq-shadow-hover: 0 12px 26px rgba(90, 66, 30, .16);

	--oq-radius: 24px;
	--oq-radius-sm: 16px;

	box-sizing: border-box;
	max-width: var(--oq-max-width, 1000px);
	margin: 0 auto;
	font-family: var(--oq-font-body, inherit);
	color: var(--oq-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Theme bleu nuit + or ---------- */
.oq-root.oq-theme-navy {
	--oq-surface: #0B2757;
	--oq-surface-2: rgba(255, 255, 255, .055);
	--oq-surface-3: rgba(255, 255, 255, .09);
	--oq-line: rgba(255, 255, 255, .13);
	--oq-line-strong: rgba(255, 255, 255, .22);

	--oq-text: #FFFFFF;
	--oq-muted: rgba(255, 255, 255, .66);

	--oq-accent: #C6A465;
	--oq-accent-text: #DCC08A;
	--oq-accent-soft: rgba(198, 164, 101, .15);
	--oq-accent-line: rgba(198, 164, 101, .55);
	--oq-note-bg: rgba(198, 164, 101, .20);

	--oq-cta-bg: #C6A465;
	--oq-cta-bg-hover: #D6B87E;
	--oq-cta-text: #0B2757;

	--oq-decor: rgba(255, 255, 255, .07);
	--oq-scene-bg: #071B3D;

	--oq-navy: #7FA6DB;
	--oq-hover-bg: #1E5AA8;
	--oq-hover-text: #FFFFFF;

	--oq-shadow: 0 18px 44px rgba(5, 18, 44, .32);
	--oq-shadow-hover: 0 14px 30px rgba(5, 18, 44, .38);
}

.oq-root *,
.oq-root *::before,
.oq-root *::after {
	box-sizing: border-box;
}

.oq-root p,
.oq-root h2,
.oq-root h3,
.oq-root h4,
.oq-root ul,
.oq-root li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oq-card {
	background: var(--oq-surface);
	border-radius: var(--oq-radius);
	box-shadow: var(--oq-shadow);
	padding: 36px 38px 26px;
	overflow: hidden;
}

/* ---------- Pastilles ---------- */
.oq-badge {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--oq-text);
	background: var(--oq-surface-2);
	border: 1px solid var(--oq-line-strong);
	padding: 9px 20px;
	border-radius: 999px;
}

.oq-badge-accent {
	color: var(--oq-accent-text);
	background: var(--oq-accent-soft);
	border-color: var(--oq-accent-line);
}

/* ---------- Couverture ---------- */
.oq-cover {
	text-align: center;
	animation: oq-in .4s ease both;
}

.oq-cover-badge {
	margin-bottom: 30px !important;
}

/* La taille reglable ne vise que la pastille de couverture : celle de
   l'ecran de resultat garde la sienne. */
.oq-cover-badge .oq-badge {
	font-size: var(--oq-badge-size, 11.5px);
}

.oq-cover-title {
	font-family: var(--oq-font-title, inherit);
	font-size: var(--oq-title-size, clamp(30px, 5vw, 47px));
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--oq-text);
	margin: 0 0 20px !important;
}

.oq-accent-word {
	color: var(--oq-accent);
}

.oq-cover-text {
	font-size: var(--oq-text-size, 16.5px);
	line-height: 1.65;
	color: var(--oq-muted);
	max-width: 430px;
	margin: 0 auto !important;
}

.oq-cover-illustration {
	margin: 6px auto 4px;
	max-width: 480px;
}

.oq-cover-illustration img,
.oq-cover-illustration svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Les variables --oq-btn-* ne sont posees que si le client a reglé
   quelque chose : sans reglage, le bouton garde son apparence d'origine. */
.oq-start {
	/* inline-flex : le bouton se dimensionne sur son texte. En flex simple
	   il redevient un bloc pleine largeur, quelle que soit la largeur reglee. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: var(--oq-btn-width, auto);
	max-width: 100%;
	padding: var(--oq-btn-pad, 15px 30px);
	background: var(--oq-btn-bg, var(--oq-cta-bg));
	color: var(--oq-btn-fg, var(--oq-cta-text));
	font-family: var(--oq-btn-font, inherit);
	font-size: var(--oq-btn-size, clamp(15px, 1.6vw, 17px));
	font-weight: var(--oq-btn-weight, 700);
	text-transform: var(--oq-btn-case, none);
	letter-spacing: var(--oq-btn-tracking, -.005em);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Un assombrissement fonctionne quelle que soit la couleur choisie,
   la ou une seconde couleur codee en dur ne marcherait que pour l'or. */
.oq-start:hover {
	filter: brightness(.93);
	transform: translateY(-2px);
	box-shadow: var(--oq-shadow-hover);
}

.oq-start:focus-visible {
	outline: 3px solid var(--oq-accent);
	outline-offset: 3px;
}

.oq-start-arrow {
	display: inline-flex;
}

.oq-duration {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px !important;
	font-size: var(--oq-duration-size, 15px);
	color: var(--oq-muted);
}

.oq-noscript {
	margin-top: 18px !important;
	font-size: 14px;
	color: var(--oq-muted);
}

/* ---------- Progression ---------- */
.oq-progress-wrapper {
	margin-bottom: 28px;
}

.oq-progress-wrapper[hidden] {
	display: none;
}

.oq-progress-info {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--oq-muted);
	margin-bottom: 9px;
}

.oq-progress-percent {
	color: var(--oq-accent-text);
}

.oq-progress {
	height: 6px;
	background: var(--oq-surface-3);
	border-radius: 999px;
	overflow: hidden;
}

.oq-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--oq-accent);
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Questions ---------- */
.oq-question,
.oq-result {
	animation: oq-in .38s ease both;
}

@keyframes oq-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.oq-cover,
	.oq-question,
	.oq-result {
		animation: none !important;
	}

	.oq-progress-bar {
		transition: none;
	}
}

.oq-question-title {
	font-family: var(--oq-font-title, inherit);
	font-size: var(--oq-q-size, clamp(20px, 2.8vw, 25px));
	font-weight: var(--oq-q-weight, 700);
	color: var(--oq-q-color, inherit);
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 0 7px !important;
}

.oq-question-help {
	font-family: var(--oq-font-body, inherit);
	font-size: var(--oq-help-size, 14.5px);
	font-weight: var(--oq-help-weight, 400);
	line-height: 1.5;
	color: var(--oq-help-color, var(--oq-muted));
	margin: 0 0 22px !important;
}

.oq-options {
	display: grid;
	gap: 10px;
}

.oq-option {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	text-align: left;
	padding: 15px 17px;
	background: var(--oq-surface-2);
	border: 1px solid var(--oq-line);
	border-radius: var(--oq-radius-sm);
	cursor: pointer;
	font: inherit;
	color: var(--oq-text);
	transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {

	/* Une reponse deja choisie garde son etat : sans cette exclusion, le
	   texte passerait en blanc sur le fond ambre du choix. */
	.oq-option:not([aria-pressed="true"]):hover {
		border-color: var(--oq-hover-bg);
		background: var(--oq-hover-bg);
		color: var(--oq-hover-text);
		transform: translateY(-2px);
		box-shadow: var(--oq-shadow-hover);
	}

	.oq-option:not([aria-pressed="true"]):hover .oq-option-label,
	.oq-option:not([aria-pressed="true"]):hover .oq-option-desc {
		color: var(--oq-hover-text);
	}

	.oq-option:not([aria-pressed="true"]):hover .oq-option-icon {
		background: rgba(255, 255, 255, .16);
		color: var(--oq-hover-text);
	}
}

.oq-option:focus-visible {
	outline: 3px solid var(--oq-accent);
	outline-offset: 2px;
}

.oq-option[aria-pressed="true"] {
	border-color: var(--oq-accent);
	background: var(--oq-accent-soft);
	box-shadow: inset 0 0 0 1px var(--oq-accent);
}

.oq-option-icon {
	flex: 0 0 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--oq-surface-3);
	border-radius: 14px;
	color: var(--oq-accent-text);
}

.oq-option-icon svg {
	width: 28px;
	height: 28px;
}

.oq-option-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.oq-option-label {
	font-family: var(--oq-font-title, inherit);
	font-weight: var(--oq-label-weight, 700);
	font-size: var(--oq-label-size, 16px);
	color: var(--oq-label-color, inherit);
	line-height: 1.3;
}

.oq-option-desc {
	font-family: var(--oq-font-body, inherit);
	font-size: var(--oq-desc-size, 13.5px);
	font-weight: var(--oq-desc-weight, 400);
	line-height: 1.45;
	color: var(--oq-desc-color, var(--oq-muted));
}

/* ---------- Pied de carte ---------- */
.oq-footer {
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid var(--oq-line);
}

.oq-footer[hidden] {
	display: none;
}

.oq-nav {
	display: flex;
	margin-bottom: 14px;
}

.oq-nav[hidden] {
	display: none;
}

.oq-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 4px 2px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oq-muted);
	cursor: pointer;
	transition: color .18s ease;
}

.oq-back:hover {
	color: var(--oq-accent-text);
}

.oq-legal {
	text-align: center;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--oq-muted);
	opacity: .85;
	margin: 0 !important;
}

/* ---------- Resultat ---------- */
.oq-result {
	text-align: center;
}

.oq-result-badge {
	margin-bottom: 20px !important;
	text-align: center;
}

.oq-result-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--oq-accent-soft);
	border: 1px solid var(--oq-accent-line);
	color: var(--oq-accent);
}

.oq-result-name {
	text-align: center;
	font-family: var(--oq-font-title, inherit);
	font-size: var(--oq-rname-size, clamp(27px, 4.2vw, 38px));
	font-weight: var(--oq-rname-weight, 800);
	color: var(--oq-rname-color, inherit);
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0 0 12px !important;
}

.oq-result-tagline {
	text-align: center;
	font-size: 16px;
	line-height: 1.62;
	color: var(--oq-muted);
	max-width: 540px;
	margin: 0 auto 26px !important;
}

.oq-result-why {
	text-align: left;
	background: var(--oq-surface-2);
	border: 1px solid var(--oq-line);
	border-left: 3px solid var(--oq-accent);
	border-radius: 5px var(--oq-radius-sm) var(--oq-radius-sm) 5px;
	padding: 22px 24px;
	margin-bottom: 18px;
}

.oq-result-why h4 {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--oq-accent-text);
	margin: 0 0 13px !important;
}

.oq-result-why li {
	position: relative;
	padding-left: 23px;
	font-size: 15px;
	line-height: 1.55;
	margin-bottom: 9px;
}

.oq-result-why li:last-child {
	margin-bottom: 0;
}

.oq-result-why li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--oq-accent);
}

.oq-result-note {
	display: flex;
	gap: 11px;
	text-align: left;
	font-size: 14px;
	line-height: 1.55;
	color: var(--oq-text);
	background: var(--oq-note-bg);
	border: 1px solid var(--oq-accent-line);
	border-radius: var(--oq-radius-sm);
	padding: 15px 17px;
	margin: 0 0 24px !important;
}

.oq-result-note svg {
	flex: 0 0 18px;
	margin-top: 2px;
	color: var(--oq-accent-text);
}

.oq-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 19px 36px;
	background: var(--oq-cta-bg);
	color: var(--oq-cta-text) !important;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 999px;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.oq-cta:hover {
	background: var(--oq-cta-bg-hover);
	transform: translateY(-2px);
	box-shadow: var(--oq-shadow-hover);
	color: var(--oq-cta-text) !important;
}

.oq-cta-arrow {
	display: inline-flex;
}

.oq-cta-missing {
	font-size: 16px;
	font-weight: 700;
	color: var(--oq-accent-text);
	margin: 0 !important;
}

.oq-secondary {
	display: block;
	margin: 20px auto 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oq-muted);
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.oq-secondary:hover {
	color: var(--oq-accent-text);
}

.oq-alt {
	margin-top: 26px !important;
	padding-top: 20px;
	border-top: 1px solid var(--oq-line);
	font-size: 14px;
	line-height: 1.62;
	color: var(--oq-muted);
	text-align: left;
}

.oq-alt strong {
	color: var(--oq-accent-text);
	font-weight: 700;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {

	.oq-card {
		padding: 26px 18px 20px;
		border-radius: 20px;
	}

	.oq-cover-badge {
		margin-bottom: 22px !important;
	}

	/* Une taille fixe choisie pour le bureau deborderait sur un telephone :
	   on la plafonne a la largeur de l'ecran sans l'ignorer. */
	.oq-cover-title {
		font-size: min( var(--oq-title-size, 47px), 10vw );
	}

	.oq-cover-illustration {
		max-width: 320px;
	}

	.oq-start {
		padding: var(--oq-btn-pad, 14px 24px);
		gap: 12px;
	}

	.oq-option {
		padding: 13px;
		gap: 12px;
	}

	.oq-option-icon {
		flex-basis: 46px;
		height: 46px;
	}

	.oq-option-icon svg {
		width: 24px;
		height: 24px;
	}

	.oq-option-label {
		font-size: 15px;
	}

	.oq-option-desc {
		display: none;
	}

	.oq-result-why {
		padding: 18px 19px;
	}

	.oq-cta {
		width: 100%;
		padding: 17px 20px;
		font-size: 15.5px;
	}
}

/* =====================================================================
   CADRES — presenter le questionnaire dans un ecran
   Aucun fichier image : tout est dessine en CSS, donc rien a charger.
   ===================================================================== */
.oq-wrap {
	width: 100%;
}

.oq-frame {
	--oq-bezel: #16181D;

	position: relative;
	margin: 0 auto;
	background: var(--oq-bezel);
	box-shadow:
		0 2px 0 rgba(255, 255, 255, .07) inset,
		0 30px 70px -24px rgba(12, 18, 30, .55);
}

/* La couleur d'ecran est posee explicitement : --oq-surface est declaree
   sur .oq-root, qui est un descendant, donc elle ne remonte pas jusqu'ici. */
.oq-frame-screen {
	position: relative;
	overflow: hidden;
	background: #FAF3EA;
}

.oq-frame-theme-navy .oq-frame-screen {
	background: #0B2757;
}

/* Dans un cadre, la carte perd son propre contour : c'est l'ecran qui
   fait le cadrage, sinon on voit deux bordures imbriquees. */
.oq-frame .oq-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Telephone ---------- */
.oq-frame-phone {
	max-width: 400px;
	padding: 12px;
	border-radius: 46px;
}

.oq-frame-phone .oq-frame-screen {
	border-radius: 36px;
	padding-top: 26px;
}

.oq-frame-notch {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 20px;
	border-radius: 99px;
	background: var(--oq-bezel);
}

/* ---------- Tablette ---------- */
.oq-frame-tablet {
	max-width: 760px;
	padding: 16px;
	border-radius: 30px;
}

.oq-frame-tablet .oq-frame-screen {
	border-radius: 18px;
}

/* ---------- Fenetre de navigateur ---------- */
.oq-frame-browser {
	--oq-bezel: #E7E9EE;

	max-width: 940px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 26px 60px -22px rgba(12, 18, 30, .45);
}

.oq-frame-browser .oq-frame-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	background: var(--oq-bezel);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.oq-frame-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .17);
}

.oq-frame-url {
	flex: 1;
	height: 20px;
	margin-left: 12px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .75);
}

@media (max-width: 600px) {

	.oq-frame-phone,
	.oq-frame-tablet {
		padding: 8px;
		border-radius: 26px;
	}

	.oq-frame-phone .oq-frame-screen,
	.oq-frame-tablet .oq-frame-screen {
		border-radius: 20px;
	}

	/* L'encoche mange de la place utile sur un vrai telephone. */
	.oq-frame-phone .oq-frame-screen {
		padding-top: 0;
	}

	.oq-frame-notch {
		display: none;
	}
}

/* ---------- Cadre personnalise : image importee par le client ---------- */
.oq-frame-custom {
	max-width: 900px;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.oq-mockup-image {
	display: block;
	width: 100%;
	height: auto;
}

/* La zone d'ecran est positionnee en pourcentages : elle suit l'image
   quelle que soit la taille d'affichage. Le contenu du questionnaire ayant
   une hauteur variable, la zone defile quand il depasse. */
.oq-frame-custom .oq-frame-screen {
	position: absolute;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: transparent;
}

.oq-frame-custom .oq-card {
	border-radius: 0;
	min-height: 100%;
}

/* ---------- Squelette affiche quand il n'y a pas d'ecran d'accueil ---------- */
.oq-skeleton {
	display: grid;
	gap: 10px;
}

.oq-skeleton span {
	display: block;
	border-radius: 8px;
	background: var(--oq-surface-3);
}

.oq-skeleton-title { width: 62%; height: 26px; margin-bottom: 2px; }
.oq-skeleton-help { width: 45%; height: 14px; margin-bottom: 12px; }
.oq-skeleton-option { height: 74px; border-radius: var(--oq-radius-sm); }

@media (max-width: 600px) {
	.oq-skeleton-option { height: 62px; }
}

/* =====================================================================
   Presentation Scene
   Le titre du parcours et la progression sortent de la carte : elle ne
   porte plus que la question. Le decor est un panneau interieur a
   .oq-root, et non le fond de la section : les variables de couleur sont
   declarees sur .oq-root, un enfant les recoit, un parent non.
   ===================================================================== */
.oq-root.oq-layout-scene {
	max-width: var(--oq-max-width, 1240px);
}

.oq-scene {
	padding: 54px 26px 62px;
	background: var(--oq-scene-bg);
	border-radius: var(--oq-radius);
}

.oq-scene-head {
	text-align: center;
	margin-bottom: 22px;
}

.oq-layout-scene .oq-progress-wrapper {
	display: none;
}

.oq-scene-title {
	font-family: var(--oq-font-title, inherit);
	font-size: var(--oq-h1-size, clamp(25px, 3vw, 38px));
	font-weight: var(--oq-h1-weight, 700);
	color: var(--oq-h1-color, var(--oq-text));
	text-transform: uppercase;
	line-height: 1.12;
	letter-spacing: .01em;
	margin: 0 0 10px !important;
}

.oq-scene-text {
	font-family: var(--oq-font-body, inherit);
	font-size: var(--oq-sub-size, 15.5px);
	font-weight: var(--oq-sub-weight, 400);
	color: var(--oq-sub-color, var(--oq-muted));
	line-height: 1.5;
	max-width: 48ch;
	margin: 0 auto 22px !important;
}

/* ---------- Pastilles de progression ---------- */
.oq-dots {
	display: flex;
	align-items: center;
	max-width: 470px;
	margin: 0 auto 9px;
}

.oq-dot {
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1.5px solid var(--oq-line-strong);
	background: var(--oq-surface);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.oq-dot-line {
	flex: 1;
	height: 1px;
	background: var(--oq-line-strong);
}

.oq-dot.is-done {
	background: var(--oq-accent);
	border-color: var(--oq-accent);
}

.oq-dot.is-current {
	background: var(--oq-navy);
	border-color: var(--oq-navy);
	box-shadow: 0 0 0 3px var(--oq-scene-bg), 0 0 0 4.5px var(--oq-accent);
}

.oq-dots-label {
	text-align: center;
	margin: 0 !important;
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--oq-accent-text);
}

@media (prefers-reduced-motion: reduce) {
	.oq-dot {
		transition: none;
	}
}

/* ---------- Carte de la scene ---------- */
.oq-layout-scene .oq-card {
	text-align: center;
	max-width: 880px;
	margin: 0 auto;
}

.oq-card-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 16px;
	color: var(--oq-accent);
}

.oq-card-mark i {
	display: block;
	width: 60px;
	height: 1px;
	background: var(--oq-accent-line);
}

.oq-card-mark span {
	display: flex;
}

.oq-layout-scene .oq-options {
	grid-template-columns: 1fr;
	gap: 12px;
	text-align: left;
}

.oq-privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 22px 0 0 !important;
	font-size: 12.5px;
	color: var(--oq-muted);
}

.oq-privacy svg {
	flex: none;
}

@media (max-width: 700px) {
	.oq-scene {
		padding: 30px 16px 40px;
	}

	.oq-dots {
		max-width: 260px;
	}

	.oq-scene-text br {
		display: none;
	}
}

/* ---------- Guide gratuit en fin de parcours ---------- */
.oq-ebook {
	margin-top: 26px;
	padding: 22px 24px;
	background: var(--oq-surface-2);
	border: 1px solid var(--oq-line);
	border-left: 3px solid var(--oq-navy);
	border-radius: 5px var(--oq-radius-sm) var(--oq-radius-sm) 5px;
	text-align: left;
}

.oq-ebook-title {
	font-family: var(--oq-font-title, inherit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 5px !important;
}

.oq-ebook-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--oq-muted);
	margin: 0 0 14px !important;
}

.oq-ebook-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.oq-ebook-form[hidden] {
	display: none;
}

.oq-ebook-input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	background: var(--oq-surface);
	border: 1px solid var(--oq-line-strong);
	border-radius: 10px;
	color: var(--oq-text);
	font: inherit;
	font-size: 15px;
}

.oq-ebook-input:focus {
	outline: none;
	border-color: var(--oq-navy);
	box-shadow: 0 0 0 3px var(--oq-accent-soft);
}

.oq-ebook-submit {
	flex: none;
	padding: 11px 20px;
	background: var(--oq-navy);
	border: none;
	border-radius: 10px;
	color: #FFFFFF;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .18s ease;
}

.oq-ebook-submit:hover {
	filter: brightness(1.25);
}

.oq-ebook-submit[disabled] {
	opacity: .6;
	cursor: default;
}

.oq-ebook-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--oq-muted);
	margin: 12px 0 0 !important;
}

.oq-ebook.is-error {
	border-left-color: #C0392B;
}

.oq-ebook.is-error .oq-ebook-note {
	color: #C0392B;
	font-weight: 600;
}

.oq-ebook.is-done {
	border-left-color: var(--oq-accent);
}

.oq-ebook.is-done .oq-ebook-note {
	color: var(--oq-text);
	font-weight: 600;
}

/* Le libelle du champ existe pour les lecteurs d'ecran sans occuper
   d'espace : le placeholder seul ne fait pas office d'etiquette. */
.oq-root .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 560px) {
	.oq-ebook {
		padding: 18px 16px;
	}

	.oq-ebook-submit {
		flex: 1 1 100%;
	}
}