/* Perceptis Flash respondent PWA. Component shapes ported from the validated maquette (prototype/respondent.css).
   Every brand value is a token from packages/brands/brands.json, set on <body> by theme.js. There is deliberately no
   per-brand selector here: a theme that only swapped the logo would fail the FL-BRD-1 check. Defaults = Perceptis. */
/* Outfit (SIL OFL, see fonts/OFL-NOTE.txt): served from this origin, precached with the shell. Used only by packages whose font token is outfit. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/outfit-latin-ext.woff2) format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/outfit-latin.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
body{--ink:#152c49;--page:#f3f7fa;--surface:#fff;--accent:#1da6c2;--action:#17395e;--action-ink:#fff;--selected:#e3f6fa;--edge:#9baeba;--muted:#506675;
 --font:system-ui,-apple-system,sans-serif;--heading-font:var(--font);--heading-weight:750;--heading-spacing:0;--radius-main:12px;--radius-control:12px;--radius-button:9px;
 --button-border:0 solid transparent;--option-border:1px;--header-bg:#fff;--header-ink:var(--ink);--main-border:5px solid var(--accent);--main-shadow:none;
 --landing-bg:var(--page);--landing-ink:var(--ink);--hero-bg:transparent;--hero-ink:var(--ink);--hero-border:0 solid transparent;--hero-size:48px;
 --panel-bg:var(--selected);--panel-ink:var(--ink);--progress-bg:transparent;--progress-ink:var(--muted);
 margin:0;background:var(--page);color:var(--ink);font:18px/1.5 var(--font);-webkit-text-size-adjust:100%;overflow-wrap:break-word}
header,main,.privacy{max-width:620px;margin-left:auto;margin-right:auto}
/* Header: one compact row (mark on the left, nothing else) so logo + banner stay within 96 px (M1). */
header{position:relative;display:flex;align-items:center;gap:10px;background:var(--header-bg);color:var(--header-ink);border-bottom:1px solid var(--edge);padding:8px 12px}
#brand-mark{flex:1;min-width:0}
main{background:var(--surface);color:var(--ink);margin-top:8px;margin-bottom:8px;border-radius:var(--radius-main);border-top:var(--main-border);box-shadow:var(--main-shadow);padding:16px 16px 0}
h1,h2{font-family:var(--heading-font);font-weight:var(--heading-weight);letter-spacing:var(--heading-spacing);line-height:1.2}
h1{font-size:26px;margin:4px 0 12px}
h2{font-size:20px;margin:0 0 8px}
p{margin:12px 0}
[data-step-title]:focus{outline:none}
button,input,select,textarea{font:inherit;color:inherit}
button{min-height:52px;width:100%;margin:0;padding:12px 16px;text-align:center;color:var(--ink);background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-button);cursor:pointer}
button.primary{background:var(--action);color:var(--action-ink);font-weight:700;border:var(--button-border);font-size:20px}
/* A secondary choice is a text link, never a second button (M2). */
button.link{width:auto;min-width:48px;min-height:48px;background:transparent;border:0;color:var(--action);text-decoration:underline;font-size:17px;padding:8px 12px}
button:disabled{opacity:.5}
button[aria-busy=true]:disabled{opacity:.85;cursor:progress;font-size:0}
/* Busy: the button's own text is collapsed (still in the DOM and the accessible name); the action label and spinner are drawn here. */
button[aria-busy=true]::before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
button[aria-busy=true]::after{content:attr(data-busy-label);font-size:var(--busy-size)}
.spin{display:inline-block;width:1em;height:1em;margin-right:.5em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin,button[aria-busy=true]::before{animation:none;border-right-color:currentColor;border-style:dotted}}
.slow-note{display:block;margin:8px 0 0;font-size:15px;color:var(--muted);text-align:center}
.slow-note:empty{display:none}
.option,.rate{display:flex;align-items:center;gap:12px;cursor:pointer;border:solid var(--edge);border-width:var(--option-border);border-radius:var(--radius-control);min-height:52px;padding:10px 14px;margin:0 0 10px;background:var(--surface)}
.option:has(input:checked),.rate:has(input:checked){background:var(--selected);border-color:var(--action);border-width:2px}
.option>input{flex-shrink:0;width:23px;min-height:23px;margin:0;accent-color:var(--action)}
.option-copy{flex:1;min-width:0}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.rate{justify-content:center;margin:0;padding:0;min-height:56px;font-size:22px;font-weight:700;position:relative}
.rate input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.scale-ends{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:15px;color:var(--muted)}
.rating-value{font-weight:700;text-align:center;font-size:20px;margin:8px 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
input,select,textarea{width:100%;padding:12px;min-height:48px;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface)}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:130px}
label{display:block;margin-top:12px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:700}
.block{border:1px solid var(--edge);border-radius:var(--radius-control);padding:12px 14px 14px;margin:0 0 14px}
.block select{margin-top:4px}
.lead{font-size:19px}
.intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.intro:empty{display:none}
.step-head{display:flex;align-items:center;gap:12px}
.step-head h1{flex:1;min-width:0;margin:4px 0}
[data-pictogram]{flex:none;fill:none;stroke:var(--action);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Sticky action bar: the one action stays inside the screen however long the content is (M1). */
.actions{position:sticky;bottom:0;z-index:2;background:var(--surface);margin:12px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--edge)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0 0}
.actions>.links:first-child{margin-top:0}
.chosen{margin:0 0 8px;font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.progress-bar{height:10px;border-radius:999px;background:var(--selected);border:1px solid var(--edge);overflow:hidden;margin:0 0 14px}
.progress-bar span{display:block;height:100%;width:var(--share,0%);background:var(--action)}
.status{background:var(--selected);border-left:4px solid var(--accent);padding:14px;border-radius:var(--radius-control);font-size:16px}
.error{background:#fff0eb;color:#872713;border-left:4px solid #a53220;padding:12px;border-radius:var(--radius-control)}
.error::before{content:"!";content:"!" / "";display:inline-block;width:22px;height:22px;line-height:22px;margin-right:8px;text-align:center;border-radius:50%;background:#872713;color:#fff;font-weight:800;font-size:15px}
.small{font-size:15px;color:var(--muted)}
.progress{font-size:17px;font-weight:700;color:var(--progress-ink);margin:0 0 6px}
.result{border-bottom:1px solid var(--edge);padding:12px 0}
.result-line{font-size:16px;margin:8px 0}
.bar{display:block;height:8px;background:linear-gradient(90deg,var(--action) var(--share,0%),var(--selected) var(--share,0%));border-radius:var(--radius-control);margin-top:4px}
a{color:var(--action)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.theme-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin:0 0 18px}
/* No-network sentence (not a chip): wraps, readable at 360 px, laid over the header row so logo + banner stay within the 96 px budget. Shown only while offline. */
.net-note{position:absolute;top:0;left:0;right:0;z-index:5;margin:0;padding:8px 12px;font-size:14px;line-height:1.35;border-bottom:2px solid #7a5200;background:#fff7e6;color:#5c3d00}
.net-note[hidden]{display:none}
#thanks-status[data-status=recu]{color:#1d6b45}
#thanks-status[data-status=refusee],#thanks-status[data-status=non_comptee]{color:#872713}
/* Phone: the country code is shown, never typed. */
.phone-entry{display:flex;gap:10px;align-items:stretch}
.country-prefix{flex:0 0 96px;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--selected);padding:8px 12px;font-size:14px;line-height:1.4}
.phone-entry input{flex:1;min-width:0;width:auto}
/* Brand marks (structure from the maquette; colours from tokens). */
.perceptis-wordmark,.koba-wordmark{display:flex;align-items:center;gap:12px;line-height:1.2;letter-spacing:.08em;font-size:22px;font-weight:850}
.perceptis-wordmark small,.koba-wordmark small,.neutral-wordmark small{display:block;font-size:12px;letter-spacing:0;font-weight:500;margin-top:6px}
.perceptis-emblem{font-size:38px;font-weight:900;line-height:1;color:var(--header-ink)}
.perceptis-emblem span{color:var(--accent);font-size:26px}
.neutral-wordmark{display:block;font-size:21px;font-weight:650}
.brand-pair{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand-pair .perceptis-wordmark{font-size:17px}
.brand-pair .official-mark{width:64px;height:64px}
.brand-divider{font-size:24px;font-weight:400;color:var(--muted)}
.brand-caption{font-size:13px;margin:14px 0 0;color:var(--muted)}
.client-brandlock{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.client-headline{font-size:16px;font-weight:600}
.official-mark{display:block;object-fit:contain;flex:none;max-width:150px}
.landing-footer{padding:12px 0 4px;font-size:14px}
.landing-footer strong{font-weight:650}
.ios-hint{padding-left:34px}
.ios-hint li{margin:6px 0}
.ios-hint .ios-title{list-style:none;margin-left:-20px;font-weight:700}
.share-icon{display:inline-block;width:14px;height:16px;margin-right:6px;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px;position:relative;vertical-align:-2px}
.share-icon::before{content:"";position:absolute;left:4px;top:-8px;width:2px;height:12px;background:currentColor}
.privacy{padding:12px 24px 24px;font-size:15px;color:var(--ink)}
.privacy summary{min-height:48px;cursor:pointer;padding:10px 0}
#standalone-warning{max-width:620px;margin:12px auto 0;border-left-color:#7a5200}
/* Launch templates: the generated templates/<package>/tokens.css defines --tpl-* on body[data-template]; app variables follow them. */
body[data-template]{--ink:var(--tpl-ink,#152c49);--page:var(--tpl-page,var(--tpl-surface,#f3f7fa));--surface:var(--tpl-surface,#f3f7fa);--landing-bg:var(--tpl-page,var(--tpl-surface,#f3f7fa));--landing-ink:var(--tpl-ink,#152c49);
 --hero-ink:var(--tpl-ink,#152c49);--panel-ink:var(--tpl-ink,#152c49);--action:var(--tpl-action,#17395e);--action-ink:var(--tpl-action-ink,#fff);--accent:var(--tpl-accent,var(--tpl-action,#17395e));
 --muted:var(--tpl-muted,#506675);--header-bg:var(--tpl-header-bg,#fff);--header-ink:var(--tpl-header-ink,#152c49);--font:var(--tpl-font,system-ui,sans-serif);
 --radius-main:var(--tpl-radius,12px);--radius-control:var(--tpl-radius,12px);--radius-button:var(--tpl-radius,9px);--main-border:5px solid var(--tpl-accent,var(--tpl-action,#17395e));
 --selected:color-mix(in srgb,var(--tpl-action,#17395e) 12%,var(--tpl-surface,#f3f7fa));--panel-bg:var(--selected);
 --edge:color-mix(in srgb,var(--tpl-ink,#152c49) 55%,var(--tpl-surface,#f3f7fa));font-size:calc(18px*var(--tpl-text-scale,1))}
.title-mark{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.25;font-weight:650}
header .official-mark{height:36px;width:auto;max-width:150px}
.perceptis-emblem-img{display:block;flex:none;width:36px;height:36px}
body[data-template][data-framed][data-step=landing] main{background:var(--surface);border-top:var(--main-border);border-radius:var(--radius-main)}
body[data-template][data-framed][data-step=landing] header{max-width:1080px}
body[data-template][data-framed] .perceptis-wordmark{font-size:19px}
body[data-template][data-framed] header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.collector{margin:0 0 16px;padding:10px 14px;font-size:15px;border-left:4px solid var(--accent);background:var(--selected);border-radius:var(--radius-control)}
[hidden]{display:none!important}
@media(max-width:480px){
 main{margin:8px;padding:14px 14px 0}
 .actions{margin:12px -14px 0;padding-left:14px;padding-right:14px}
 .client-headline{max-width:150px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* question kinds added for M8 (kinds.js) */
.kind-hint{margin:6px 0 0}
.kind-output{display:block;margin-top:8px;font-weight:700;font-size:1.25rem}
input[type=range]{padding:0;min-height:44px;accent-color:var(--action)}
.rank{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.rank li{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface);padding:6px 8px}
.rank-item{flex:1;min-width:0;overflow-wrap:anywhere}
.rank-move{flex:none;width:48px;min-height:48px;padding:0;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface);cursor:pointer;font-size:1.2rem}
.rank-move:disabled{opacity:.35;cursor:default}
/* Flash display blocks (display.js; Note Affichage §5, contract M5, M6, M10, M11). One component, every state stacked in
   the same grid cell so a switch never moves the page; colours only from the theme tokens (three themes apply). */
.fdisplay{display:grid;gap:14px;margin:16px 0}
.fblock{border:1px solid var(--edge);border-top:4px solid var(--accent);border-radius:var(--radius-control);background:var(--surface);padding:12px 14px 10px;min-width:0}
.ftitle{font-size:18px;margin:0 0 6px}
.fstates{display:grid}
.fstate{grid-area:1/1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.fstate[aria-hidden=true]{visibility:hidden}
/* D9 (client 2026-10-18): the results block stays compact before its threshold; the page grows once, when results open. */
#results-block .fstate[aria-hidden=true]{display:none}
.fcount{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:4px 0 10px}
.fcount .num{font-size:40px;font-weight:750;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fcount .of,.fstat{color:var(--muted)}
.gauge{height:10px;border-radius:10px;background:var(--selected);border:1px solid var(--edge);overflow:hidden;position:relative;margin:8px 0}
.gauge>span{display:block;height:100%;width:var(--p,0%);background:var(--action);border-radius:inherit;transition:width .6s ease}
.gauge.has-mark::after{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--ink)}
.fsub{margin:14px 0 6px;font-weight:700;color:var(--ink)}
.fsplit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:14px;line-height:1.3}
.fstat b{display:block;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.fbars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:15px;line-height:1.3}
.fbar .fpct{font-weight:700;font-variant-numeric:tabular-nums}
.fbar .track{grid-column:1/-1;height:8px;border-radius:8px;background:var(--selected);overflow:hidden}
.fbar .track>span{display:block;height:100%;width:var(--p,0%);background:var(--action);border-radius:inherit}
.fquestions{display:grid;gap:14px;margin-top:8px}
.fqtitle{display:block;font-size:16px;margin-bottom:6px}
.fcounted{margin:0}
.fpicto{display:flex;align-items:center;gap:12px;margin:10px 0}
.fpicto strong{display:block;font-size:18px}
.fpicto .small{display:block}
.fmeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--edge);font-size:14px;color:var(--muted)}
.fmeta .fremaining{font-weight:700;color:var(--ink)}
.fmeta .fremaining:empty,.fmeta .fupdated:empty{display:none}
.fblock[data-stale=true] .fupdated{color:#7a5200;font-weight:700}
.ftrend{border:1px solid var(--edge);border-radius:var(--radius-control);padding:12px 14px;margin:14px 0}
.ftrend h2{font-size:18px}
.share{display:grid;gap:10px;margin:14px 0}
.share-button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border:1px solid var(--action);border-radius:var(--radius-button);color:var(--action);background:var(--surface);font-weight:700;text-decoration:none;text-align:center}
.share-button:hover{background:var(--selected)}
@media(min-width:720px){.share{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}

/* Panel (v4 F4) */
.panel-banner{border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--panel-bg);color:var(--panel-ink);padding:12px 14px;margin:14px 0}
.panel-banner p{margin:0 0 10px}
.panel-history{list-style:none;margin:0;padding:0}
.panel-history li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--edge)}
.panel-history li:first-child{border-top:0}
.panel-balance{font-size:30px;font-weight:750;margin:4px 0}

/* perceptis-logo header (M9): the site lockup alone, one row within 96 px at 360 px. */
.perceptis-logo-img{display:block;height:40px;width:auto;max-width:100%}