/* ==========================================================================
   Surligné · le bilan plein écran, ses résultats et la barre d'action mobile
   Chargée uniquement sur les pages qui contiennent le bloc Bilan.
   ========================================================================== */

/* Boutons du bilan (rendus par le script) */
.qz .btn, .sticky .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3.25rem; padding: 0.9rem 1.6rem; font: 700 1.0625rem/1.2 var(--police); letter-spacing: 0; text-transform: none; text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer; transition: background-color 0.15s, color 0.15s; background: var(--saumon); color: var(--nuit); }
.qz .btn:hover, .sticky .btn:hover { background: var(--saumon-survol); color: var(--nuit); }
.qz .btn-lg { min-height: 3.5rem; padding: 1rem 1.9rem; }
.qz .btn-ghost-w { background: transparent; color: currentColor; border-color: currentColor; }
.qz .btn-ghost-w:hover { background: var(--creme); color: var(--nuit); border-color: var(--creme); }
.qz .btn svg[stroke] { display: none; }
.qz .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--enseigne); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.qz .link-btn:hover { color: var(--brique); }

/* Barre d'action mobile : cachée tant que le hero est visible */
.sticky { position: fixed; inset: auto 0 0 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem var(--gouttiere) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--nuit); color: var(--creme); transform: translateY(110%); transition: transform 0.35s var(--ease); }
.sticky.show { transform: none; }
.sticky span { font-weight: 700; font-size: var(--petit); }
.sticky .btn { flex: none; }
@media (max-width: 47.99rem) { .sticky { display: flex; } body.has-sticky { padding-bottom: 5rem; } }

/* Plein écran */
.qz { position: fixed; inset: 0; z-index: 100000; background: var(--creme); color: var(--nuit); display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--police); font-size: var(--texte); line-height: 1.6; }
.qz.open { display: block; }
.qz-top { position: sticky; top: 0; z-index: 2; background: var(--creme); border-bottom: 1px solid var(--trait); }
.qz-top .wrap { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.qz-top img { width: 120px; max-height: 44px; object-fit: contain; object-position: left center; }
.qz-close { background: none; border: 2px solid var(--nuit); border-radius: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--nuit); transition: background-color 0.15s, color 0.15s; padding: 0; }
.qz-close:hover { background: var(--nuit); color: var(--creme); }
.qz-bar { height: 6px; background: var(--trait); }
.qz-bar i { display: block; height: 100%; width: 0; background: var(--saumon); transition: width 0.5s var(--ease); }
.qz-stage { max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 6vh, 4.5rem) var(--gouttiere) 4rem; }
.qz-step { animation: stepIn 0.4s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.qz h1, .qz h2, .qz h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.qz p { margin: 0; }
.q-count { display: flex; align-items: center; gap: 0.6em; font-size: var(--etiquette); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.q-count::before { content: ""; width: 0.75em; height: 0.75em; background: var(--saumon); flex: none; }
.q-pillar { margin-left: auto; color: var(--gris); }
.q-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin-top: 1.25rem; }
.q-title:focus, .res h1:focus { outline: none; }
.q-help { margin-top: 0.75rem; color: var(--gris); }
.opts { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.opts.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .opts.two { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; min-height: 3.5rem; padding: 0.9rem 1.1rem; border: 2px solid var(--trait); border-radius: 0; background: var(--creme); font: 600 1.0625rem/1.35 var(--police); color: var(--nuit); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.opt:hover { border-color: var(--nuit); }
.opt:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }
.opt .key { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 2px solid var(--nuit); font-weight: 800; font-size: 0.85rem; }
.opt.sel { background: var(--saumon); border-color: var(--nuit); }
.qz-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; min-height: 1.5rem; }
.qz-back { background: none; border: 0; padding: 0.35rem 0; font: 700 var(--petit)/1 var(--police); color: var(--enseigne); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.qz-back:hover { color: var(--brique); }
.qz-hint { font-size: var(--etiquette); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris); }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.1rem; }
.field label { font-weight: 700; font-size: var(--petit); }
.field label span { font-weight: 400; color: var(--gris); }
.field input, .field textarea { width: 100%; font: inherit; min-height: 3.25rem; padding: 0.75rem 1rem; border: 2px solid var(--trait); border-radius: 0; background: var(--creme); color: var(--nuit); box-sizing: border-box; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--nuit); outline-offset: 1px; border-color: var(--nuit); }
.field textarea { min-height: 8rem; resize: vertical; }
.field.err input { border-color: var(--brique); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.1rem; font-size: var(--petit); color: var(--gris); line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--nuit); }
.err-msg { color: var(--brique); font-size: var(--petit); margin-top: 0.75rem; min-height: 1em; font-weight: 600; }
.qz-stage .btn { margin-top: 1.5rem; }
.qz-stage .legal { margin-top: 1rem; }
.qz .legal { font-size: var(--petit); color: var(--gris); line-height: 1.5; }
.qz .alt-link { margin-top: 1.4rem; }

/* Résultats */
.res { max-width: var(--largeur); margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) var(--gouttiere) 5rem; }
.res-hero { display: grid; grid-template-columns: 20rem 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; padding-bottom: 3rem; border-bottom: 1px solid var(--trait); }
.res-hero.solo { grid-template-columns: 1fr; }
.res-hero .shoe { font-size: 1.4rem; max-width: 300px; }
.res-hero h1 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); margin-top: 1rem; }
.res-hero p { margin-top: 1rem; color: var(--gris); font-size: var(--wp--preset--font-size--grand, 1.375rem); max-width: 40em; }
.res-hero .pbars { max-width: 440px; margin-top: 1.5rem; }
.res-hero .bar { grid-template-columns: 8rem 1fr 2.75rem; }
@media (max-width: 760px) { .res-hero { grid-template-columns: 1fr; } .res-hero .shoe { max-width: 230px; } }
.res h2.sec { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-top: 3.5rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.ins { background: var(--sable); padding: 1.5rem 1.5rem 1.6rem; border-top: 4px solid var(--saumon); }
.ins.good { border-top-color: var(--nuit); }
.ins .k { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: var(--etiquette); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.ins .k em { font-style: normal; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; text-transform: none; }
.ins p { margin-top: 0.75rem; font-size: 1rem; color: var(--gris); }
.ins .clos { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--trait); color: var(--nuit); }
.ins .clos b { font-weight: 800; }
@media (max-width: 900px) { .ins-grid { grid-template-columns: 1fr; } }
.obj { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.75rem; margin-top: 1.5rem; background: var(--sable); padding: 1.75rem; }
.obj .k { font-size: var(--etiquette); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brique); }
.obj h3 { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--titre-3, 1.625rem); line-height: 1.15; }
.obj p, .obj .ans { color: var(--gris); font-size: 1rem; }
.obj .ans > * + * { margin-top: 0.75rem; }
@media (max-width: 760px) { .obj { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem; } }
.next { margin-top: 1.5rem; background: var(--nuit); color: var(--creme); padding: clamp(1.75rem, 4vw, 3rem); }
.next .k { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--etiquette); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.next .k::before { content: ""; width: 0.75em; height: 0.75em; background: var(--saumon); flex: none; }
.next h3 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.06; margin-top: 0.75rem; max-width: 22em; }
.next p { margin-top: 0.9rem; color: var(--gris-sur-nuit); max-width: 46em; }
.next-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.next-cta .btn { margin-top: 0; }
.next small { display: block; margin-top: 1rem; font-size: var(--petit); color: var(--gris-sur-nuit); }
@media (max-width: 600px) { .next-cta .btn { width: 100%; } }
.res-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); font-size: var(--petit); color: var(--gris); }
.res-more a { color: var(--enseigne); }