/*
 * Configurateur de devis Emotion Studio : styles du front.
 * Tout est préfixé « eq- » et limité à .eq-app pour ne jamais entrer en conflit avec le thème.
 * Identité (orange/bleu, Sora/Manrope) reprise de l'application « Diagnostic IA ».
 * Personnalisation : surcharger les variables --eq-* (ex. dans le CSS additionnel du thème).
 */

.eq-app {
	--eq-orange: #fe7f27; --eq-orange-ink: #b4500c; --eq-orange-tint: #fff1e6; --eq-orange-line: #ffc9a3;
	--eq-blue: #076496; --eq-blue-tint: #e7f2f8; --eq-blue-line: #b5d6e8;
	--eq-ink: #0f2a3a; --eq-muted: #587080; --eq-faint: #8aa0ad;
	--eq-paper: #f4f7f9; --eq-surface: #ffffff; --eq-line: #dbe5eb; --eq-line-soft: #e9eff3;
	--eq-good: #1f8a5b; --eq-good-tint: #e5f5ed; --eq-danger: #d9480f;
	--eq-btn-ink: #1f1206;
	--eq-shadow: 0 1px 2px rgba(15,42,58,.05), 0 8px 24px -12px rgba(15,42,58,.18);
	--eq-display: "Sora", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--eq-body: "Manrope", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--eq-ease: cubic-bezier(.22,.8,.26,1);
	--eq-radius: 12px; --eq-radius-lg: 18px;
	--eq-top-offset: 0px;

	position: relative;
	box-sizing: border-box;
	/*max-width: 680px;*/
	margin-inline: auto;
	padding: 0 16px 24vh;
	background: var(--eq-paper);
	color: var(--eq-ink);
	font-family: var(--eq-body);
	font-size: 16px;
	line-height: 1.55;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	border-radius: var(--eq-radius-lg);
}

@media (prefers-color-scheme: dark) {
	.eq-app:not([data-theme="light"]) {
		color-scheme: dark;
		--eq-orange-ink: #ff9d5c; --eq-orange-tint: #33200f; --eq-orange-line: #6b3a14;
		--eq-blue: #4fb0e3; --eq-blue-tint: #0f2a3a; --eq-blue-line: #1d4a63;
		--eq-ink: #e6eef3; --eq-muted: #9bb2bf; --eq-faint: #6f8795;
		--eq-paper: #0b1820; --eq-surface: #11232e; --eq-line: #223b4a; --eq-line-soft: #1a303d;
		--eq-good: #4cc98f; --eq-good-tint: #12302a;
		--eq-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
	}
}
.eq-app[data-theme="dark"] {
	color-scheme: dark;
	--eq-orange-ink: #ff9d5c; --eq-orange-tint: #33200f; --eq-orange-line: #6b3a14;
	--eq-blue: #4fb0e3; --eq-blue-tint: #0f2a3a; --eq-blue-line: #1d4a63;
	--eq-ink: #e6eef3; --eq-muted: #9bb2bf; --eq-faint: #6f8795;
	--eq-paper: #0b1820; --eq-surface: #11232e; --eq-line: #223b4a; --eq-line-soft: #1a303d;
	--eq-good: #4cc98f; --eq-good-tint: #12302a;
	--eq-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
}

.eq-app *, .eq-app *::before, .eq-app *::after { box-sizing: border-box; }
.eq-app [hidden] { display: none !important; }
.eq-app button, .eq-app input, .eq-app select, .eq-app textarea { font: inherit; color: inherit; letter-spacing: normal; }
.eq-app :focus-visible { outline: 2px solid var(--eq-blue); outline-offset: 2px; }
.eq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eq-offline, .eq-loading, .eq-error-box { padding: 24px; text-align: center; color: var(--eq-muted); }
.eq-admin-notice { max-width: 680px; margin: 0 auto 12px; padding: 10px 14px; border-radius: 10px; background: #fff8e1; color: #6b4e00; font-size: 14px; }

/* Barre de progression fixe en haut du site */
.eq-bar { position: fixed; top: 0; inset-inline: 0; z-index: 99999; height: 3px; background: transparent; pointer-events: none; }
body.admin-bar .eq-bar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .eq-bar { top: 46px; } }
.eq-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--eq-blue), var(--eq-orange)); transition: width .5s var(--eq-ease); }

/* En-tête collant */
.eq-top { position: sticky; top: var(--eq-top-offset); z-index: 10; margin-inline: -16px; background: color-mix(in srgb, var(--eq-paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--eq-line-soft); }
body.admin-bar .eq-top { top: calc(var(--eq-top-offset) + 32px); }
@media (max-width: 782px) { body.admin-bar .eq-top { top: calc(var(--eq-top-offset) + 46px); } }
.eq-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; }
.eq-axis { font-family: var(--eq-display); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--eq-blue); transition: opacity .25s; }
.eq-count { font-size: 12px; color: var(--eq-faint); font-variant-numeric: tabular-nums; }

.eq-wrap { padding-block: 28px 0; }

/* Flux de questions */
.eq-flow { display: grid; gap: 10px; }
.eq-q { position: relative; transition: opacity .45s var(--eq-ease) .15s, transform .45s var(--eq-ease) .15s; }
.eq-q.entering { opacity: 0; transform: translateY(16px); }
.eq-q.leaving { opacity: 0; transition: opacity .25s; }
.eq-clp { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s var(--eq-ease), opacity .25s; }
.eq-clp > div { overflow: hidden; min-height: 0; }
.eq-clp.open { grid-template-rows: 1fr; opacity: 1; }
.eq-relance { font-size: 15px; color: var(--eq-muted); margin: 0; padding: 18px 2px 6px; display: flex; gap: 10px; align-items: baseline; }
.eq-relance b { font-family: var(--eq-display); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--eq-blue); white-space: nowrap; }

/* Ligne récapitulative (question refermée) */
.eq-sum { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; text-align: start; background: var(--eq-surface); border: 1px solid var(--eq-line-soft); border-radius: var(--eq-radius); padding: 11px 14px; cursor: pointer; margin: 2px 0; transition: border-color .2s, background .2s; }
.eq-sum:hover { border-color: var(--eq-blue-line); }
.eq-sum-l { font-size: 13px; color: var(--eq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-sum-v { grid-column: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-sum-v::before { content: "✓"; color: var(--eq-good); font-weight: 700; margin-inline-end: 8px; }
.eq-sum-e { grid-column: 2; grid-row: 1 / 3; font-size: 13px; font-weight: 600; color: var(--eq-blue); opacity: 0; transition: opacity .2s; }
.eq-sum:hover .eq-sum-e, .eq-sum:focus-visible .eq-sum-e { opacity: 1; }
@media (hover: none) { .eq-sum-e { opacity: .8; } }

/* Carte de question */
.eq-card { background: var(--eq-surface); border: 1px solid var(--eq-line); border-radius: var(--eq-radius-lg); box-shadow: var(--eq-shadow); padding: 26px 24px; margin: 4px 0; }
.eq-q-eye { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--eq-faint); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.eq-q-eye span:first-child { font-family: var(--eq-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--eq-orange-ink); }
.eq-card h2 { font-family: var(--eq-display); font-weight: 600; font-size: clamp(20px, 4vw, 24px); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 6px; padding: 0; color: var(--eq-ink); text-wrap: balance; }
.eq-hint { font-size: 14px; color: var(--eq-muted); margin: 0 0 16px; }

/* Options */
.eq-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 16px; }
.eq-opts.eq-lg { grid-template-columns: 1fr; }
.eq-group { grid-column: 1 / -1; font-family: var(--eq-display); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--eq-blue); margin: 10px 2px -2px; }
.eq-group:first-child { margin-top: 0; }
.eq-opt { appearance: none; text-align: start; cursor: pointer; background: var(--eq-surface); border: 1.5px solid var(--eq-line); border-radius: var(--eq-radius); padding: 14px 14px 14px 44px; padding-inline: 44px 14px; position: relative; font-size: 15px; font-weight: 500; line-height: 1.35; transition: border-color .18s, background .18s, transform .12s; display: block; width: 100%; }
.eq-opt::before { content: ""; position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid var(--eq-faint); transition: all .18s; }
.eq-opts.multi .eq-opt::before { border-radius: 5px; }
.eq-opt small { display: block; font-weight: 400; font-size: 13px; color: var(--eq-muted); margin-top: 2px; }
.eq-opt .eq-badge { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--eq-blue-tint); color: var(--eq-blue); vertical-align: middle; }
.eq-opt:hover { border-color: var(--eq-orange-line); background: var(--eq-orange-tint); }
.eq-opt:active { transform: scale(.99); }
.eq-opt[aria-pressed="true"] { border-color: var(--eq-orange); background: var(--eq-orange-tint); }
.eq-opt[aria-pressed="true"]::before { border-color: var(--eq-orange); background: var(--eq-orange); box-shadow: inset 0 0 0 3px var(--eq-surface); }
.eq-opts.multi .eq-opt[aria-pressed="true"]::before { box-shadow: none; background: var(--eq-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231f1206' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.eq-opt.pulse { animation: eq-pulse .35s var(--eq-ease); }
@keyframes eq-pulse { 50% { transform: scale(.97); } }

/* Boutons */
.eq-act { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.eq-act .eq-btn { animation: eq-fadeup .3s var(--eq-ease); }
@keyframes eq-fadeup { from { opacity: 0; transform: translateY(6px); } }
.eq-btn { appearance: none; border: 0; cursor: pointer; border-radius: var(--eq-radius); padding: 14px 22px; font-weight: 700; font-size: 16px; line-height: 1.2; background: var(--eq-orange); color: var(--eq-btn-ink); display: inline-flex; align-items: center; gap: 10px; transition: transform .15s, box-shadow .2s, background .2s; }
.eq-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(254,127,39,.7); }
.eq-btn:active { transform: translateY(0); }
.eq-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.eq-btn .k { font-size: 12px; font-weight: 600; opacity: .7; }
.eq-btn-ghost { background: transparent; color: var(--eq-blue); padding: 10px 4px; border-radius: 8px; }
.eq-btn-ghost:hover { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
[dir="rtl"] .eq-arrow { display: inline-block; transform: scaleX(-1); }

/* Champs */
.eq-field { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.eq-field input, .eq-field select, .eq-field textarea { flex: 1 1 240px; min-width: 0; border: 1.5px solid var(--eq-line); border-radius: var(--eq-radius); background: var(--eq-paper); padding: 14px 16px; font-size: 17px; line-height: 1.3; transition: border-color .2s, background .2s; width: 100%; }
.eq-field select { flex: 0 1 150px; }
.eq-field textarea { min-height: 110px; resize: vertical; }
.eq-field input:focus, .eq-field select:focus, .eq-field textarea:focus { outline: none; border-color: var(--eq-blue); background: var(--eq-surface); }
.eq-field [aria-invalid="true"] { border-color: var(--eq-danger); }
.eq-field .eq-btn { padding: 14px 18px; }
.eq-unit { align-self: center; color: var(--eq-muted); font-weight: 600; }
.eq-msg { font-size: 14px; margin: 10px 0 0; min-height: 0; }
.eq-msg.err { color: var(--eq-danger); animation: eq-shake .35s; }
.eq-msg.warn { color: var(--eq-muted); }
@keyframes eq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.eq-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border: 1.5px solid var(--eq-line); border-radius: var(--eq-radius); cursor: pointer; font-size: 14px; color: var(--eq-muted); }
.eq-consent input { width: 20px; height: 20px; accent-color: var(--eq-orange); flex: none; margin-top: 1px; }
.eq-consent a { color: var(--eq-blue); }
.eq-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Récapitulatif */
.eq-recap { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.eq-recap button { width: 100%; display: grid; gap: 2px; text-align: start; background: var(--eq-paper); border: 1px solid var(--eq-line-soft); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.eq-recap button:hover { border-color: var(--eq-blue-line); }
.eq-recap .l { font-size: 12px; color: var(--eq-muted); }
.eq-recap .v { font-weight: 600; font-size: 15px; }

/* Écran de préparation */
.eq-calc { display: grid; justify-items: start; gap: 24px; padding-top: 8vh; }
.eq-calc h2 { font-family: var(--eq-display); font-size: 22px; margin: 0; }
.eq-calc svg { width: 140px; height: auto; }
.eq-inf { fill: none; stroke-width: 9; stroke-linecap: round; }
.eq-inf-a { stroke: var(--eq-orange); stroke-dasharray: 160 400; animation: eq-run 1.6s linear infinite; }
.eq-inf-b { stroke: var(--eq-blue); stroke-dasharray: 160 400; stroke-dashoffset: -280; animation: eq-run2 1.6s linear infinite; }
.eq-inf-bg { stroke: var(--eq-line-soft); }
@keyframes eq-run { to { stroke-dashoffset: -560; } }
@keyframes eq-run2 { to { stroke-dashoffset: -840; } }
.eq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eq-steps li { display: flex; gap: 12px; align-items: center; color: var(--eq-faint); transition: color .3s; font-weight: 500; }
.eq-steps li i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--eq-line); flex: none; transition: all .3s; display: grid; place-items: center; font-style: normal; font-size: 12px; color: transparent; }
.eq-steps li.on { color: var(--eq-ink); }
.eq-steps li.on i { border-color: var(--eq-orange); border-top-color: transparent; animation: eq-spin .8s linear infinite; }
.eq-steps li.ok { color: var(--eq-ink); }
.eq-steps li.ok i { border-color: var(--eq-good); background: var(--eq-good); color: #fff; animation: none; }
@keyframes eq-spin { to { transform: rotate(360deg); } }
.eq-fail { padding: 14px 16px; border-radius: var(--eq-radius); background: var(--eq-orange-tint); color: var(--eq-ink); }

/* Fin du parcours : aucune estimation, le devis est envoyé par e-mail après validation */
.eq-done { display: grid; gap: 16px; padding-top: 6vh; animation: eq-rise .6s var(--eq-ease) both; }
@keyframes eq-rise { from { opacity: 0; transform: translateY(18px); } }
.eq-done-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--eq-good); color: #fff; display: grid; place-items: center; font-size: 28px; }
.eq-done h2 { font-family: var(--eq-display); font-size: clamp(22px, 4.5vw, 28px); line-height: 1.2; margin: 0; }
.eq-done p { margin: 0; color: var(--eq-muted); font-size: 17px; max-width: 58ch; }
.eq-done .eq-note { font-size: 14px; }

/* Panneau du mode test (administrateurs connectés uniquement) */
.eq-test { margin-top: 12px; padding: 14px 16px; border: 2px dashed var(--eq-orange); border-radius: var(--eq-radius); background: var(--eq-orange-tint); font-size: 14px; color: var(--eq-ink); }
.eq-test b { font-family: var(--eq-display); }
.eq-test table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.eq-test td, .eq-test th { padding: 4px 6px; border-bottom: 1px solid var(--eq-orange-line); text-align: start; font-variant-numeric: tabular-nums; }
.eq-test-banner { margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: var(--eq-orange); color: var(--eq-btn-ink); font-size: 13px; font-weight: 700; }

/*
 * Isolation du thème : GeneratePress (et la plupart des thèmes) stylise button:hover / :focus / :active
 * (fond sombre, texte blanc). On fixe donc explicitement chaque état avec une spécificité supérieure.
 */
.eq-app button { text-transform: none; letter-spacing: normal; text-shadow: none; }
.eq-app button.eq-opt, .eq-app button.eq-opt:hover, .eq-app button.eq-opt:focus, .eq-app button.eq-opt:active { color: var(--eq-ink); box-shadow: none; font-family: var(--eq-body); }
.eq-app button.eq-opt { background: var(--eq-surface); border-color: var(--eq-line); }
.eq-app button.eq-opt:hover, .eq-app button.eq-opt:focus { background: var(--eq-orange-tint); border-color: var(--eq-orange-line); }
.eq-app button.eq-opt[aria-pressed="true"], .eq-app button.eq-opt[aria-pressed="true"]:hover, .eq-app button.eq-opt[aria-pressed="true"]:focus { background: var(--eq-orange-tint); border-color: var(--eq-orange); }
.eq-app button.eq-sum, .eq-app button.eq-sum:hover, .eq-app button.eq-sum:focus, .eq-app button.eq-sum:active { background: var(--eq-surface); color: var(--eq-ink); box-shadow: none; }
.eq-app .eq-recap button, .eq-app .eq-recap button:hover, .eq-app .eq-recap button:focus { background: var(--eq-paper); color: var(--eq-ink); box-shadow: none; }
.eq-app button.eq-btn, .eq-app button.eq-btn:focus, .eq-app button.eq-btn:active { background: var(--eq-orange); color: var(--eq-btn-ink); border: 0; }
.eq-app button.eq-btn:hover { background: var(--eq-orange); color: var(--eq-btn-ink); box-shadow: 0 8px 20px -8px rgba(254,127,39,.7); }
.eq-app button.eq-btn.eq-btn-ghost, .eq-app button.eq-btn.eq-btn-ghost:hover, .eq-app button.eq-btn.eq-btn-ghost:focus { background: transparent; color: var(--eq-blue); box-shadow: none; }
.eq-app input, .eq-app select, .eq-app textarea { color: var(--eq-ink); box-shadow: none; }
.eq-app .eq-field input, .eq-app .eq-field select, .eq-app .eq-field textarea { background: var(--eq-paper); border: 1.5px solid var(--eq-line); }
.eq-app .eq-field input:focus, .eq-app .eq-field select:focus, .eq-app .eq-field textarea:focus { background: var(--eq-surface); border-color: var(--eq-blue); color: var(--eq-ink); }
.eq-app h2, .eq-app p { font-family: inherit; }
.eq-app .eq-card h2, .eq-app .eq-done h2, .eq-app .eq-calc h2 { font-family: var(--eq-display); }

@media (prefers-reduced-motion: reduce) {
	.eq-app *, .eq-app *::before, .eq-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; }
	.eq-q.entering { transform: none; }
}