/* =========================================================================
   Sondage Coop TB — styles
   Fond crème + halo vert · vert #006633 · or #B98E00 · fork du Diagnostic IA
   Chakra Petch (titres/UI) · Instrument Serif italique (contraste) · Poppins (texte)
   ========================================================================= */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#FAF7F0;--bg2:#F1ECDD;--ink:#2B2B26;--muted:#66705B;--dim:#99A088;
  --orange:#006633;--orange-2:#0A7B3E;--orange-d:#004823;--violet:#B98E00;--blue:#7BAF8A;--indigo:#8FA36A;
  --line:rgba(43,43,38,.12);--line-2:rgba(43,43,38,.22);
  --panel:rgba(255,254,248,.82);--panel-2:rgba(255,254,248,.94);
  --irid:linear-gradient(100deg,#006633 0%,#2E9E5B 24%,#B98E00 50%,#7BAF8A 74%,#006633 100%);
  --irid-c:conic-gradient(from var(--a),#006633,#2E9E5B,#B98E00,#E3C766,#006633);
  --f-title:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --snap:cubic-bezier(.2,.9,.3,1.25);
  --gutter:clamp(16px,3.2vw,44px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px;border-radius:8px}
em{font-style:normal}

/* ------------------------------------------------------------ BACKGROUND */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(70% 55% at 50% 42%,rgba(255,104,29,.16),transparent 70%),
  radial-gradient(40% 40% at 92% 8%,rgba(124,107,255,.10),transparent 70%),
  radial-gradient(40% 45% at 4% 96%,rgba(127,196,255,.07),transparent 70%),var(--bg)}
.bg-halo{position:absolute;left:50%;top:44%;width:min(120vw,1200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,120,45,.22),rgba(255,104,29,.08) 45%,transparent 72%);animation:breathe 7s ease-in-out infinite}
body[data-screen="result"] .bg-halo{top:22%}
.bg-grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
#app{position:relative;z-index:1}

/* ------------------------------------------------------------ SHARED UI */
.irid{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0;background:var(--irid);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite;padding-right:.08em}
@keyframes shimmer{to{background-position:-250% 0}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.led{width:8px;height:8px;background:var(--orange);box-shadow:0 0 10px var(--orange),0 0 22px rgba(255,104,29,.6);animation:blinkLed 1.4s steps(2) infinite}
@keyframes blinkLed{50%{opacity:.35}}
.mini{display:block;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--orange-2);margin-bottom:8px}

.btn-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 22px;border-radius:14px;background:var(--orange);color:#1a0b04;
  font-family:var(--f-title);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;border-bottom:4px solid var(--orange-d);
  box-shadow:0 10px 30px -8px rgba(255,104,29,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s var(--snap),box-shadow .25s,border-width .1s;overflow:hidden;white-space:nowrap}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px -8px rgba(255,104,29,.8),0 0 0 3px rgba(255,179,107,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:active{transform:translateY(2px) scale(.98);border-bottom-width:1px;transition-duration:.05s}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .6s ease}
.btn-arrow{display:inline-block;transition:transform .3s var(--bounce)}
.btn-primary:hover .btn-arrow{transform:translate(3px,-3px) rotate(8deg) scale(1.2)}
.btn-primary.loading{pointer-events:none;background:repeating-linear-gradient(-45deg,var(--orange) 0 12px,#ff8a45 12px 24px);background-size:34px 34px;animation:stripes .5s linear infinite}
@keyframes stripes{to{background-position:34px 0}}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.02);transition:transform .25s var(--snap),border-color .2s,background .2s}
.btn-ghost:hover:not(:disabled){transform:translateY(-2px);border-color:var(--orange);background:rgba(255,104,29,.08)}
.btn-ghost:active:not(:disabled){transform:scale(.96)}
.btn-ghost:disabled{opacity:.3}

.snd{position:fixed;top:14px;right:14px;z-index:40;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:rgba(12,9,8,.75);font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--orange-2);transition:border-color .2s,transform .2s var(--snap)}
.snd svg{width:16px;height:16px}
.snd:hover{border-color:var(--orange);transform:translateY(-1px)}
.snd.off{color:var(--dim)}

/* ------------------------------------------------------------ TV + HALO */
.tv-slot{position:relative;width:100%;height:100%}
.tv-mount{position:absolute;inset:0;touch-action:manipulation}
.tv-mount canvas{display:block;width:100%!important;height:100%!important}
.tv-halo{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;max-height:110%;translate:-50% -48%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,110,40,.34),rgba(255,104,29,.12) 50%,transparent 75%)}
.tv-halo::before{content:'';position:absolute;inset:6%;border-radius:50%;background:conic-gradient(#FF681D,#FFB36B,#D98BFF,#7fc4ff,#7C6BFF,#FF681D);opacity:.22;
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 80%);mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 80%);animation:rot 14s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes spin{to{--a:360deg}}

.speech{position:absolute;left:50%;top:2%;z-index:3;transform:translateX(-50%);max-width:min(300px,86%);padding:10px 14px;border-radius:12px;
  background:#120c09;border:2px solid var(--orange);font-family:var(--f-title);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;
  box-shadow:4px 4px 0 rgba(255,104,29,.35),0 10px 30px rgba(0,0,0,.5)}
.speech.on{opacity:1}
.speech::after{content:'';position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#120c09;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateX(-50%) rotate(45deg)}

/* ------------------------------------------------------------ FX LAYER */
#fx{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
#fx .px{position:absolute;margin:-4px 0 0 -4px;border-radius:1px;will-change:transform}
#fx .ray{position:absolute;height:3px;margin-top:-1.5px;border-radius:3px;transform-origin:0 50%}
.float-txt{position:absolute;font-family:var(--f-title);font-weight:700;font-size:18px;letter-spacing:.06em;color:var(--orange-2);text-shadow:0 0 12px rgba(255,104,29,.8),2px 2px 0 #3a1406;white-space:nowrap}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,179,107,.45),rgba(217,139,255,.18) 60%,transparent);transform:scale(0);animation:ripple .65s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ================================================================ QUIZ */
.quiz{height:100svh;min-height:600px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(8px,1.6vh,18px);padding:14px var(--gutter) 16px;max-width:1440px;margin:0 auto}
.hud{display:flex;align-items:center;gap:18px;padding-right:110px}
.zones{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.zone{display:grid;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color .3s,background .3s,transform .3s var(--snap)}
.zone-name{display:flex;align-items:center;gap:6px;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-idx{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#1c1512;font-size:10px;color:var(--muted);flex:none}
.zone.cur{border-color:rgba(255,104,29,.55);background:rgba(255,104,29,.07);transform:translateY(-1px)}
.zone.cur .zone-name{color:var(--ink)}
.zone.cur .zone-idx{background:var(--orange);color:#1a0b04}
.zone.done .zone-name{color:var(--orange-2)}
.zone.done .zone-idx{background:transparent;color:var(--orange-2);font-size:0}
.zone.done .zone-idx::after{content:'✓';font-size:12px}
.pips{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pips i{height:6px;border-radius:2px;background:#241b16;transform:skewX(-18deg);transition:background .25s,box-shadow .25s}
.pips i.done{background:var(--orange);box-shadow:0 0 10px rgba(255,104,29,.6)}
.zone.done .pips i{background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--violet));box-shadow:0 0 10px rgba(217,139,255,.4)}
.pips i.cur:not(.done){background:#4a3325;animation:pipBlink .9s steps(2) infinite}
@keyframes pipBlink{50%{background:rgba(255,104,29,.55)}}
.hud-meta{display:flex;gap:10px;align-items:center;font-family:var(--f-title);font-weight:600;letter-spacing:.08em}
.hud-q,.hud-xp{display:inline-flex;align-items:baseline;gap:3px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}
.hud-q b{font-size:18px;color:var(--ink);margin-left:3px}
.hud-q small{font-size:12px}
.hud-xp{color:var(--orange-2);border-color:rgba(255,104,29,.35);background:rgba(255,104,29,.07)}
.hud-xp b{font-size:16px;margin-right:4px;min-width:3.2ch;text-align:right;display:inline-block}

.q-head{text-align:center;display:grid;justify-items:center;gap:8px}
.q-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,104,29,.4);background:rgba(255,104,29,.08);font-family:var(--f-title);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-2)}
.chip-zone{padding:2px 7px;border-radius:99px;background:var(--orange);color:#1a0b04}
.chip-dot{opacity:.5}.chip-sub{color:var(--ink)}
.q-title{max-width:980px;min-height:2.16em;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:.26em;font-family:var(--f-title);font-weight:600;font-size:clamp(24px,3.1vw,44px);line-height:1.08;letter-spacing:-.01em;outline:none;min-height:1.1em}
.q-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.q-title .w>span{display:inline-block;will-change:transform}
.q-sub{font-size:13.5px;color:var(--muted)}

.arena{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.35fr) minmax(0,1fr);grid-template-rows:1fr 1fr;grid-template-areas:"a1 tv a2" "a3 tv a4";gap:clamp(10px,1.6vw,22px) clamp(12px,2vw,28px);align-items:center}
.tv-wrap{grid-area:tv;position:relative;height:100%;min-height:260px}
.tv-wrap .tv-slot{position:absolute;inset:8% -2% -2%}
.ans[style*="a1"],.ans[style*="a2"]{align-self:end}.ans[style*="a3"],.ans[style*="a4"]{align-self:start}
.tv-wrap .speech{top:0}

/* Answer cards */
.ans{position:relative;display:block;width:100%;border-radius:18px;text-align:left;perspective:800px;isolation:isolate;will-change:transform}
.ans::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(255,190,150,.28),rgba(255,190,150,.06) 50%,rgba(255,190,150,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .2s}
.ans::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;background:var(--irid-c);opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .25s}
.ans-body{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:clamp(14px,1.6vw,20px) clamp(14px,1.4vw,20px);border-radius:inherit;overflow:hidden;
  background:linear-gradient(160deg,rgba(42,30,24,.92),rgba(15,11,10,.92));box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--snap),box-shadow .3s,background .3s}
.ans-body::before{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,140,70,.16),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.ans-key{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#1a1310;border:1.5px solid var(--line-2);border-bottom-width:4px;font-family:var(--f-title);font-weight:700;font-size:16px;color:var(--muted);transition:all .25s var(--bounce)}
.ans-text{position:relative;font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.42;color:#eadfd5}
.ans-go{position:relative;font-family:var(--f-title);font-size:18px;color:var(--dim);transition:transform .3s var(--bounce),color .2s}
@media (hover:hover){
  .ans:hover::after{opacity:.75;animation:spin 3.2s linear infinite}
  .ans:hover .ans-body{box-shadow:0 20px 40px -14px rgba(0,0,0,.85),0 0 30px -6px rgba(255,104,29,.35)}
  .ans:hover .ans-body::before{opacity:1}
  .ans:hover .ans-key{color:#1a0b04;background:var(--orange);border-color:var(--orange-d);transform:translateY(-2px) rotate(-4deg)}
  .ans:hover .ans-go{color:var(--orange-2);transform:translate(3px,-3px) scale(1.25)}
}
.ans.press .ans-body{transform:perspective(800px) scale(.955);transition-duration:.08s}
.ans.press .ans-key{border-bottom-width:1.5px;transform:translateY(2px)}
.ans.selected::after{opacity:1;animation:spin 3.2s linear infinite}
.ans.selected .ans-body{background:linear-gradient(160deg,rgba(90,40,18,.95),rgba(28,15,12,.95));box-shadow:0 0 0 1px rgba(255,104,29,.4),0 0 36px -2px rgba(255,104,29,.5),0 0 70px -10px rgba(217,139,255,.4)}
.ans.selected .ans-key{color:#1a0b04;background:var(--orange);border-color:var(--orange-d)}
.ans.selected .ans-go{color:var(--orange-2)}
.ans.selected .ans-text{color:#fff}

.zone-banner{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
.zb-inner{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 40px 24px;border-radius:24px;background:rgba(14,10,8,.94);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 80px rgba(255,104,29,.35)}
.zb-inner::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:var(--irid-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 2s linear infinite}
.zb-k{font-family:var(--f-title);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--orange-2)}
.zb-inner strong{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1;background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3s linear infinite}
.zb-next{font-size:13px;color:var(--muted)}

.q-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.keys{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:5px;border:1px solid var(--line-2);border-bottom-width:3px;font:600 11px var(--f-title);color:var(--muted)}

/* ============================================================ FALLBACK TV */
.tv-fallback{display:grid;place-items:center}
.fb-tv{position:relative;width:min(92%,440px);aspect-ratio:1.45;display:grid;grid-template-columns:1fr 22%;gap:5%;padding:6%;border-radius:28px;background:linear-gradient(160deg,#2c221c,#120e0c);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.6),-10px 0 40px rgba(124,107,255,.15),10px 0 40px rgba(127,196,255,.12)}
.fb-screen{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #ff8a4a55;cursor:pointer}
.fb-screen canvas{width:100%;height:100%;object-fit:contain;display:block}
.fb-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);pointer-events:none}
.fb-screen.glitching canvas,.fb-glitch .fb-screen canvas{animation:fbGlitch .45s steps(3) 1}
@keyframes fbGlitch{0%{transform:translate(0);filter:none}33%{transform:translate(-4px,1px) skewX(4deg);filter:drop-shadow(3px 0 #f0f) drop-shadow(-3px 0 #0ff)}66%{transform:translate(3px,-1px);filter:hue-rotate(40deg)}}
.fb-panel{display:grid;align-content:center;gap:14%;justify-items:center}
.fb-panel i{width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a4a40,#1a1310);border:2px solid #b8b0a8}
.fb-panel b{width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}
.fb-jump{animation:fbJump .6s var(--bounce)}.fb-shake{animation:fbShake .4s}.fb-nod{animation:fbNod .5s var(--bounce)}
@keyframes fbJump{30%{transform:translateY(-14%) scaleY(1.05)}60%{transform:translateY(0) scaleY(.92)}}
@keyframes fbShake{20%,60%{transform:translateX(-4%)}40%,80%{transform:translateX(4%)}}
@keyframes fbNod{40%{transform:rotate(-4deg) translateY(-3%)}}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .r-hero{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)}
  .r-score{grid-column:1/-1}
  .zone-name{font-size:10px}
}
@media (max-width:860px){
  body{font-size:14.5px}
  .intro{grid-template-columns:1fr;padding-top:60px;gap:8px}
  .intro-stage{order:-1;height:min(46svh,400px);min-height:280px}
  .intro-stage .tv-slot{inset:13% 0 15%}
  .tv-hint{bottom:4px}
  .intro-stage{margin-bottom:10px}
  .input-row{flex-direction:column}
  .btn-primary{width:100%}
  .quiz{height:auto;min-height:100svh;grid-template-rows:auto auto auto auto;padding-top:60px;gap:12px}
  .hud{position:fixed;top:0;left:0;right:0;z-index:30;padding:10px 120px 10px 14px;background:linear-gradient(#07060a 70%,transparent)}
  .zones{gap:4px}
  .zone{padding:0;border:0;background:none}
  .zone-name{display:none}
  .zone.cur{transform:none;background:none}
  .hud-meta{display:none}
  .snd{top:8px;right:10px}
  .q-title{font-size:clamp(21px,5.8vw,28px)}
  .q-sub{display:none}
  .arena{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"tv" "a1" "a2" "a3" "a4";gap:9px}
  .tv-wrap{height:min(34svh,280px);min-height:220px;margin-bottom:12px}
  .tv-wrap .tv-slot{inset:14% 0 0}
  .speech{font-size:12.5px;padding:7px 11px}
  .ans{border-radius:15px}
  .ans-body{gap:12px;padding:12px 14px}
  .ans-key{width:30px;height:30px;font-size:14px}
  .ans-go{display:none}
  .keys{display:none}
  .q-foot{justify-content:center;padding-bottom:10px}
  .zb-inner{padding:20px 24px}
  .result{padding-top:60px}
  .r-hero{grid-template-columns:1fr}
  .r-tv{height:min(42svh,320px)}
  .r-id{text-align:center}
  .r-id .r-sum{margin-inline:auto}
  .r-badges{justify-content:center}
  .r-grid,.insights{grid-template-columns:1fr}
  .next{flex-direction:column;text-align:center}
  .bottom{flex-direction:column}
  .bottom .btn-ghost,.bottom .btn-primary{width:100%;justify-content:center}
  .curve-labels{font-size:10.5px}
  .curve-labels .full{display:none}.curve-labels .short{display:inline}
  #tip{min-width:180px}
}
@media (max-height:720px) and (min-width:861px){
  .q-sub{display:none}
  .ans-body{padding:12px 14px}
  .ans-text{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media print{
  .bg,.snd,#fx,#tip,.r-tv,.bottom{display:none!important}
  body{background:#fff;color:#111}
  .panel,.insight,.next{background:#fff!important;border-color:#ddd;box-shadow:none;break-inside:avoid}
  .pre{opacity:1!important}
  .irid{color:#FF681D;-webkit-text-fill-color:#FF681D;background:none}
  .r-hero{grid-template-columns:1fr 1fr}
}

/* ================================================================ INTRO */
.intro{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px);padding:72px var(--gutter) 40px;max-width:1360px;margin:0 auto}
.intro-copy{max-width:620px}
.title{margin:18px 0 18px;font-family:var(--f-title);font-weight:700;font-size:clamp(40px,6.2vw,86px);line-height:.96;letter-spacing:-.02em}
.title .irid{font-size:1.1em;line-height:.8}
.lead{max-width:520px;color:#d9ccc1;font-size:clamp(15px,1.2vw,17px)}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.facts li{display:flex;align-items:baseline;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:13px;color:var(--muted);transition:transform .25s var(--snap),border-color .2s}
.facts li:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--orange)}
.facts b{font-family:var(--f-title);font-size:18px;color:var(--ink)}
.gate{display:grid;gap:12px;padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--line);position:relative}
.gate>label:first-child{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.input-row{display:flex;gap:10px}
.input-row input{flex:1;min-width:0;height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:#0c0908;color:var(--ink);font:500 15px var(--f-body);outline:none;transition:border-color .2s,box-shadow .25s}
.input-row input::placeholder{color:#6f6259}
.input-row input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,104,29,.18),0 0 24px rgba(217,139,255,.18)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);cursor:pointer;line-height:1.45}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.check{flex:none;width:20px;height:20px;margin-top:1px;border-radius:5px;border:2px solid var(--line-2);background:#0c0908;display:grid;place-items:center;transition:transform .3s var(--bounce),background .15s,border-color .15s}
.check::after{content:'';width:9px;height:5px;border-left:2.5px solid #1a0b04;border-bottom:2.5px solid #1a0b04;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s var(--bounce)}
.consent input:checked+.check{background:var(--orange);border-color:var(--orange);transform:scale(1.12)}
.consent input:checked+.check::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.consent input:focus-visible+.check{outline:2px solid var(--orange-2);outline-offset:2px}
.trap{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:12px;color:var(--dim)}
.error{min-height:1em;font-size:13px;font-weight:500;color:#ff8a6a}
.error:empty{display:none}
.intro-stage{position:relative;height:min(78svh,700px);min-height:420px}
.intro-stage .tv-slot{position:absolute;inset:6% -4% 10%}
.intro-stage .speech{top:0}
.tv-hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-family:var(--f-title);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{color:var(--orange-2)}}


/* ============================================================ COOP LIGHT THEME
   Overrides du thème sombre du diagnostic : page crème, accents vert/or. */
.bg{background:
  radial-gradient(70% 55% at 50% 42%,rgba(46,158,91,.14),transparent 70%),
  radial-gradient(40% 40% at 92% 8%,rgba(185,142,0,.12),transparent 70%),
  radial-gradient(40% 45% at 4% 96%,rgba(123,175,138,.14),transparent 70%),var(--bg)}
.bg-halo{background:radial-gradient(closest-side,rgba(46,158,91,.20),rgba(46,158,91,.07) 45%,transparent 72%)}
.bg-grain{opacity:.05}
.tv-halo{background:radial-gradient(closest-side,rgba(46,158,91,.30),rgba(185,142,0,.12) 50%,transparent 75%)}
.tv-halo::before{background:conic-gradient(#006633,#2E9E5B,#B98E00,#E3C766,#006633);opacity:.2}
.led{box-shadow:0 0 10px var(--orange),0 0 22px rgba(0,102,51,.5)}

.btn-primary{color:#F7F3E6;box-shadow:0 10px 30px -8px rgba(0,102,51,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 16px 40px -8px rgba(0,102,51,.6),0 0 0 3px rgba(46,158,91,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary.loading{background:repeating-linear-gradient(-45deg,var(--orange) 0 12px,#1d7a47 12px 24px);background-size:34px 34px}
.btn-ghost{background:rgba(255,255,255,.5)}
.btn-ghost:hover:not(:disabled){background:rgba(0,102,51,.08)}

.snd{background:rgba(255,253,246,.85);border-color:var(--line-2)}
.speech{background:#FFFDF6;color:var(--ink);box-shadow:4px 4px 0 rgba(0,102,51,.25),0 10px 30px rgba(43,43,38,.18)}
.speech::after{background:#FFFDF6}
.float-txt{color:var(--orange-2);text-shadow:0 0 12px rgba(0,102,51,.35),1px 1px 0 #fff}
.ripple{background:radial-gradient(closest-side,rgba(46,158,91,.35),rgba(185,142,0,.15) 60%,transparent)}
#fx .px{border-radius:1px}

.lead{color:#55604C}
.facts li{background:rgba(255,255,255,.55)}
.brand-logo{display:block;width:min(250px,64%);height:auto;margin:0 0 22px;mix-blend-mode:multiply}
.start-row{display:flex;gap:12px;margin:4px 0 14px}
.form-note{max-width:520px}
.error{color:#B3261E}

/* HUD : 5 pastilles (pas de zones dans le sondage) */
.hud{padding-right:110px}
.pips5{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pips5 i{height:7px;border-radius:3px;background:#E4DFCC;transform:skewX(-18deg);transition:background .25s,box-shadow .25s}
.pips5 i.done{background:var(--orange);box-shadow:0 0 10px rgba(0,102,51,.4)}
.pips5 i.cur:not(.done){background:#C9C2A4;animation:pipBlink .9s steps(2) infinite}
@keyframes pipBlink{50%{background:rgba(0,102,51,.45)}}
.hud-q,.hud-xp{background:rgba(255,255,255,.55)}
.hud-xp{color:var(--orange-2);border-color:rgba(0,102,51,.3);background:rgba(0,102,51,.06)}

.q-chip{border-color:rgba(0,102,51,.35);background:rgba(0,102,51,.07)}
.chip-zone{color:#F7F3E6}
.q-sub{color:var(--muted)}

/* Cartes réponses en clair */
.ans::before{background:linear-gradient(135deg,rgba(43,43,38,.16),rgba(43,43,38,.05) 50%,rgba(43,43,38,.12))}
.ans-body{background:linear-gradient(160deg,#FFFEFA,#F6F1E3);box-shadow:0 14px 30px -16px rgba(43,43,38,.35);color:var(--ink)}
.ans-body::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(46,158,91,.14),transparent 60%)}
.ans-key{background:#F1ECDD;color:var(--muted)}
.ans-text{color:#3A3A32}
.ans-go{color:var(--dim)}
@media (hover:hover){
  .ans:hover .ans-body{box-shadow:0 20px 40px -16px rgba(43,43,38,.4),0 0 30px -6px rgba(0,102,51,.3)}
  .ans:hover .ans-key{color:#F7F3E6;background:var(--orange);border-color:var(--orange-d)}
}
.ans.selected .ans-body{background:linear-gradient(160deg,#E4F1E4,#F3EFDF);box-shadow:0 0 0 1px rgba(0,102,51,.45),0 0 36px -2px rgba(0,102,51,.35),0 0 70px -10px rgba(185,142,0,.3)}
.ans.selected .ans-key{color:#F7F3E6;background:var(--orange);border-color:var(--orange-d)}
.ans.selected .ans-text{color:#20301F}

kbd{background:#F6F2E4}

/* Question multi : champ « Autre » */
.other-row{grid-column:1/-1;display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:rgba(255,254,248,.9);border:1px solid var(--line-2)}
.other-row[hidden]{display:none}
.other-row label{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-2)}
.other-row input{height:48px;padding:0 14px;border-radius:11px;border:1px solid var(--line-2);background:#FFFDF6;color:var(--ink);font:500 15px var(--f-body);outline:none}
.other-row input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(0,102,51,.15)}

/* Questions à texte libre */
.text-arena{grid-template-columns:minmax(0,1fr) minmax(320px,1.35fr);grid-template-rows:1fr;grid-template-areas:"tv t1"}
.txt-card{display:grid;gap:10px;align-content:start;padding:clamp(16px,2vw,24px);border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(43,43,38,.4)}
.txt-label{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.txt-label small{color:var(--dim);letter-spacing:.06em;text-transform:none}
.txt-card textarea{width:100%;padding:14px;border-radius:13px;border:1px solid var(--line-2);background:#FFFDF6;color:var(--ink);font:500 15px/1.5 var(--f-body);outline:none;resize:vertical;min-height:120px;transition:border-color .2s,box-shadow .25s}
.txt-card textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(0,102,51,.15)}
.txt-card textarea::placeholder{color:#A9AE97}
.txt-count{text-align:right;font-size:11px;color:var(--dim)}
.txt-count b{color:var(--muted)}

/* Relecture + remerciements */
.review{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(20px,4vw,60px);padding:72px var(--gutter) 40px;max-width:1280px;margin:0 auto}
.rev-panel{padding:clamp(20px,3vw,34px);border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(43,43,38,.35)}
.r-name{margin:12px 0 10px;font-family:var(--f-title);font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.02;letter-spacing:-.02em}
.rev-list{display:grid;gap:0;margin:18px 0 6px}
.rev-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.rev-body{min-width:0}
.rev-body small{display:block;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-2);margin-bottom:4px}
.rev-body p{font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.rev-edit{flex:none;font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-2);padding:10px 6px;min-height:40px}
.rev-edit:hover{text-decoration:underline;text-underline-offset:4px}
.rev-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.rev-stage{position:relative;height:min(72svh,620px);min-height:380px}
.rev-stage .tv-slot{position:absolute;inset:8% -4% 8%}
.rev-stage .speech{top:0}
.thanks{min-height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,4vw,60px);padding:72px var(--gutter) 40px;max-width:1280px;margin:0 auto}
.thanks-stage{position:relative;height:min(72svh,620px);min-height:380px}
.thanks-stage .tv-slot{position:absolute;inset:8% -4% 8%}
.thanks-stage .speech{top:0}

@media (max-width:860px){
  .hud{background:linear-gradient(var(--bg) 70%,transparent)}
  .review,.thanks{grid-template-columns:1fr;padding-top:60px;gap:8px}
  .rev-stage,.thanks-stage{order:-1;height:min(38svh,320px);min-height:220px}
  .text-arena{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"t1" "tv"}
  .txt-card textarea{min-height:110px}
  .rev-actions{flex-direction:column-reverse;align-items:stretch}
  .rev-actions .btn-primary{justify-content:center}
}
@media print{.bg,.snd,#fx,.rev-stage,.thanks-stage{display:none!important}body{background:#fff;color:#111}}
.ans[style*="a5"],.ans[style*="a6"]{align-self:start}
.fb-screen{box-shadow:inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px rgba(46,158,91,.4)}
@media print{.irid{color:#006633;-webkit-text-fill-color:#006633}}
@media (max-width:860px){
  .arena .tv-wrap{order:99}
  .text-arena .tv-wrap{order:2}
  .text-arena .txt-card{order:1;width:100%}
}

/* Keep the inherited intro responsive after the theme overrides. */
@media (max-width:860px){
  .intro{grid-template-columns:1fr;padding-top:60px;gap:8px}
  .intro-stage{order:-1;height:min(38svh,320px);min-height:250px;margin-bottom:10px}
  .intro-stage .tv-slot{inset:13% 0 10%}
  .intro-copy{min-width:0}
}
/* Six choices retain the diagnostic cards without implicit grid tracks. */
@media (min-width:861px){
  .arena:has(.ans:nth-of-type(6)){grid-template-rows:repeat(3,1fr);grid-template-areas:"a1 tv a2" "a3 tv a4" "a5 tv a6"}
}
@media (max-width:860px){
  .arena{display:flex;flex-direction:column;align-items:stretch}
  .arena .tv-wrap{order:0;flex:none;width:100%;height:240px;min-height:240px}
  .arena .ans{order:1;width:100%}
  .arena .other-row{order:2;width:100%}
  .text-arena .txt-card{order:1}
  .text-arena .tv-wrap{order:2}
}
@media (max-width:860px){
  .quiz,.arena,.q-head,.q-title,.txt-card,.q-foot{min-width:0;max-width:100%}
  .q-foot{flex-wrap:wrap}
  .q-foot .btn-primary{min-width:0;flex:1;font-size:13px;padding-inline:12px}
}

/* Coop TB imagery — real-site aerial plus deck editorial series, WebP optimized. */
.brand-hero{margin:0 0 22px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 55px -34px rgba(43,43,38,.45);background:#E9E1CB}
.brand-hero img{display:block;width:100%;height:clamp(128px,14vw,168px);object-fit:cover;object-position:center 58%}
.lead-row{display:flex;align-items:center;gap:14px;max-width:560px}
.lead-row .lead{flex:1}
.lead-art{flex:none;width:112px;height:74px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(43,43,38,.35)}
.q-kicker{display:flex;align-items:center;justify-content:center;gap:9px}
.q-art{width:58px;height:39px;object-fit:cover;border-radius:10px;border:1px solid var(--line);box-shadow:0 8px 18px -10px rgba(43,43,38,.35)}
.rev-art,.thanks-art{margin:14px 0 18px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#E9E1CB;box-shadow:0 18px 45px -32px rgba(43,43,38,.42)}
.rev-art img,.thanks-art img{display:block;width:100%;height:clamp(110px,15vw,180px);object-fit:cover}
.thanks-art{margin:0 0 18px}
.thanks-art img{object-position:center 58%}
@media (max-width:860px){
  .brand-hero{margin-bottom:14px;border-radius:16px}
  .brand-hero img{height:96px}
  .lead-art{width:74px;height:50px;border-radius:10px}
  .q-art{width:48px;height:32px;border-radius:8px}
  .rev-art{display:none}
  .thanks-art img{height:112px}
}
@media (max-height:760px) and (min-width:861px){
  .brand-hero img{height:118px}
  .lead-art{width:84px;height:56px}
}

/* Keep the branded intro actionable on ordinary laptop viewports. */
@media (min-width:861px){
  .intro{padding-top:46px;padding-bottom:30px}
  .brand-logo{width:min(190px,52%);margin-bottom:14px}
  .brand-hero{margin-bottom:14px}
  .brand-hero img{height:clamp(96px,10vw,120px)}
  .title{margin:14px 0;font-size:clamp(36px,4.8vw,68px)}
  .lead-art{width:96px;height:64px}
  .facts{margin:16px 0 20px}
  .facts li{padding:7px 10px}
}
@media (max-width:860px){
  .brand-logo{width:min(190px,58%);margin-bottom:12px}
  .brand-hero img{height:82px}
  .facts{margin:14px 0 18px}
}

/* Mobile keeps the TV, site hero and start action within the first scroll. */
@media (max-width:860px){
  .intro{padding-top:42px;gap:4px}
  .intro-stage{height:min(32svh,270px);min-height:220px;margin-bottom:6px}
  .brand-logo{width:160px;margin-bottom:10px}
  .brand-hero{margin-bottom:10px}
  .brand-hero img{height:68px}
  .title{font-size:36px;margin:10px 0}
  .lead-art{display:none}
  .lead-row{display:block}
  .facts{gap:6px;margin:12px 0 14px}
  .facts li{padding:6px 9px;font-size:12px}
  .facts b{font-size:16px}
  .start-row{margin-bottom:8px}
}
@media (max-width:860px){.intro-copy{margin-top:10px}}

/* Six-answer mobile screens need a shorter TV stage for the footer to stay visible. */
@media (max-width:860px){
  .arena .tv-wrap{height:196px;min-height:196px}
  .quiz{gap:6px}
}