/* ---- Badge « sans email » (toutes les pages) ---- */
.noemail-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #9fb8e3;background:#e8eef9;color:#0b3a91;font:600 12px var(--sans);letter-spacing:.01em;white-space:nowrap}
.noemail-badge svg{width:15px;height:15px;flex:none}
.header-right{justify-self:end;display:flex;align-items:center;gap:12px}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #c9c6bd;background:rgba(255,255,255,.55);font:14px var(--serif);color:#26302f}
.hero-pill b{font:700 15px var(--sans);color:var(--blue)}

/* ---- Bandeau promesse ---- */
.promise{background:#101b27;color:#f3f1ec;padding:54px 0}
.promise .section-title{color:#fff;max-width:420px}
.promise .eyebrow{color:#cad0d8}
.promise .section-copy{color:#cfd5dd}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#2b3846;border:1px solid #2b3846}
.promise-item{background:#132131;padding:24px 22px}
.promise-item .big{font:400 54px/1 var(--serif);color:#8fb0ec;letter-spacing:-.04em}
.promise-item h3{font:600 17px/1.25 var(--serif);margin:12px 0 8px;color:#fff}
.promise-item p{font:13px/1.55 var(--serif);color:#b9c2cd;margin:0}
.compare{width:100%;border-collapse:collapse;margin-top:26px;font:14px var(--serif);color:#dfe4ea}
.compare th,.compare td{padding:11px 12px;border-bottom:1px solid #2b3846;text-align:left;vertical-align:top}
.compare thead th{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9aa6b3}
.compare td.yes{color:#9fd3a8;font-weight:600}
.compare td.no{color:#f0a9a0}
.compare-note{font:11px/1.5 var(--sans);color:#8e99a6;margin-top:10px}

/* ---- Étapes et nouveautés ---- */
.steps{padding:52px 0;border-bottom:1px solid var(--line);background:var(--paper)}
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{border-top:2px solid var(--blue);padding-top:16px}
.step .num{font:11px var(--mono);letter-spacing:.14em;color:#7d837f}
.step h3{font:600 19px/1.25 var(--serif);margin:8px 0}
.step p{font:14px/1.55 var(--serif);color:#555956;margin:0}
.feature.is-new{background:#eef3fc}
.tag-new{display:inline-block;margin-bottom:10px;padding:3px 7px;background:var(--blue);color:#fff;font:600 9px var(--mono);letter-spacing:.14em}

/* ---- Page du test ---- */
.app{min-height:calc(100vh - 72px);background:linear-gradient(125deg,#f0ede6 0%,#e9e7e1 61%,#f3f0ea);padding:34px 0 120px}
.app-header .header-inner{grid-template-columns:auto 1fr auto}
.app-header .header-mid{justify-self:center;font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#59605e}
.app-quit{font:13px var(--serif);color:#4a5150;text-decoration:underline;text-underline-offset:4px}
.screen{max-width:1080px;margin:0 auto}
.screen-card{background:#faf9f5;border:1px solid #e2dfd7;box-shadow:0 10px 35px rgba(50,49,43,.05);padding:34px 38px}
.screen h1{font:400 clamp(34px,4vw,52px)/1.05 var(--serif);letter-spacing:-.045em;margin:14px 0}
.screen h2{font:400 clamp(26px,2.6vw,34px)/1.1 var(--serif);letter-spacing:-.03em;margin:0 0 12px}
.screen .lead{font:17px/1.55 var(--serif);color:#434a49;max-width:660px;margin:0}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
.info-box{border:1px solid #dcd9d0;padding:16px 18px;background:#fff}
.info-box h3{font:600 15px var(--serif);margin:0 0 6px}
.info-box p{font:13px/1.55 var(--serif);color:#565b58;margin:0}
.promise-box{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid #9fb8e3;background:#e8eef9;color:#0b2f73;font:15px/1.5 var(--serif);margin:0 0 24px}
.promise-box svg{width:26px;height:26px;flex:none;margin-top:1px}
.promise-box b{font-family:var(--sans)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.resume-box{border:1px solid #d9c9a3;background:#fbf4e3;padding:14px 18px;margin:0 0 22px;font:14px/1.5 var(--serif);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* barre de progression du test */
.run-top{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:18px}
.run-count{font:600 15px var(--serif)}
.run-count span{color:var(--blue)}
.navdots{display:flex;flex-wrap:wrap;gap:4px}
.navdot{width:22px;height:22px;padding:0;border:1px solid #c9c7c0;background:#f9f8f4;font:10px var(--mono);color:#6b706e}
.navdot.done{background:#c9d8f1;border-color:#9fb8e3;color:#0b3a91}
.navdot.current{outline:2px solid var(--blue);outline-offset:1px;color:var(--ink)}
.timer-box{display:flex;align-items:center;gap:10px;font:13px var(--mono);font-variant-numeric:tabular-nums}
.timer-box button{background:none;border:0;padding:0;font:12px var(--serif);color:#5d6463;text-decoration:underline;text-underline-offset:3px}
.timer-box.warn #timer{color:#b4540a;font-weight:700}
.stage{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:34px;align-items:start}
.stage.is-series{grid-template-columns:1fr}
.stage .question-matrix{width:100%;max-width:380px}
.stage-panel h2{font:400 26px/1.15 var(--serif);margin:0 0 8px;letter-spacing:-.02em}
.stage-panel .question-hint{margin:0 0 16px}
.stage .answers.six .answer-visual{height:96px}
.stage .answers.six .answer-visual svg{height:74px;width:74px}
.stage .answers.palette .answer-visual{height:62px}
.stage .answers.palette .answer-visual svg{height:50px;width:50px}
.stage .answers.nums .answer-visual{height:66px;font-size:26px}
.kbd-hint{font:11px var(--sans);color:#7a807d;margin-top:14px}
.kbd-hint kbd{font:10px var(--mono);border:1px solid #c9c7c0;border-bottom-width:2px;padding:1px 5px;background:#fff}
.run-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(250,249,245,.97);backdrop-filter:blur(10px);border-top:1px solid #dcd9d0}
.run-bar-inner{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.run-bar .question-status{flex:1;text-align:center}
.confirm{border:1px solid #e0c48a;background:#fdf6e6;padding:18px 20px;margin-top:20px}
.confirm h3{font:600 17px var(--serif);margin:0 0 6px}
.confirm p{font:14px/1.5 var(--serif);margin:0 0 12px;color:#57503f}
.feedback{margin-top:16px;padding:14px 16px;font:15px/1.5 var(--serif);border:1px solid}
.feedback.ok{border-color:#9fd3a8;background:#ecf7ee;color:#1e5a2b}
.feedback.ko{border-color:#e7b4ad;background:#fbefed;color:#7a2c22}

/* résultat */
.result-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.result-band{font:17px/1.55 var(--serif);color:#3d4443;margin:18px 0 0;max-width:760px}
.journey{margin-top:34px}
.journey svg{width:100%;height:auto;display:block;background:#fff;border:1px solid #dcd9d0}
.journey-legend{display:flex;flex-wrap:wrap;gap:16px;font:12px var(--serif);color:#5b605d;margin-top:8px}
.journey-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.corrections{margin-top:14px;display:grid;gap:8px}
.corr{border:1px solid #dcd9d0;background:#fff}
.corr summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 14px;font:15px var(--serif)}
.corr summary::-webkit-details-marker{display:none}
.corr .mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--sans);color:#fff}
.corr .mark.ok{background:#2f8a4b}
.corr .mark.ko{background:#c0503f}
.corr .lvl{font:11px var(--mono);color:#7a807d;letter-spacing:.06em}
.corr-body{padding:4px 16px 18px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;border-top:1px solid #eeebe4}
.corr-figs{display:flex;gap:14px;flex-wrap:wrap;padding-top:14px;align-items:flex-start}
.corr-fig{text-align:center;font:11px var(--sans);color:#5d6260}
.corr-fig .cell{width:92px;height:92px;border:1px solid #c9c7c0;background:#f9f8f4;display:grid;place-items:center;margin-bottom:5px}
.corr-fig .cell svg{width:80%;height:80%}
.corr-fig .cell.num{font:24px var(--serif);color:var(--ink)}
.corr-expl{font:14px/1.6 var(--serif);color:#3f4645;padding-top:14px}
.corr-expl ul{margin:6px 0 0;padding-left:18px}
.mini-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#b8b9b4;border:1px solid #a9aaa5;width:150px}
.mini-matrix div{aspect-ratio:1;background:#f9f8f4;display:grid;place-items:center}
.mini-matrix svg{width:80%;height:80%}
.section-gap{margin-top:34px}

@media(max-width:960px){
  .promise-grid,.steps-grid,.info-grid{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr;gap:20px}
  .stage .question-matrix{max-width:340px;margin:auto}
  .run-top{grid-template-columns:1fr auto}
  .navdots{grid-column:1/-1;order:3}
  .corr-body{grid-template-columns:1fr;gap:6px}
  .noemail-badge .long{display:none}
}
@media(max-width:650px){
  .screen-card{padding:22px 16px}
  .app{padding:18px 0 110px}
  .compare{font-size:13px}
  .compare th,.compare td{padding:9px 6px}
  .promise{padding:40px 0}
  .stage .answers.six .answer-visual{height:78px}
  .stage .answers.six .answer-visual svg{height:58px;width:58px}
  .stage .answers.palette .answer-visual{height:50px}
  .stage .answers.palette .answer-visual svg{height:40px;width:40px}
  .navdot{width:19px;height:19px;font-size:9px}
  .kbd-hint{display:none}
  .run-bar-inner{padding:10px 14px}
  .run-bar .question-status{display:none}
  .header-right .header-cta{display:none}
  .app-header .header-mid{display:none}
  .result-head .actions{width:100%}
}
button.button:not(.button-primary){background:transparent}
button.button:not(.button-primary):hover{background:#fff}
button.button:disabled{opacity:.45;cursor:default;transform:none}
@media(max-width:650px){.stage .question-matrix{max-width:250px}.stage-panel h2{font-size:21px}.stage-panel .question-hint{font-size:12px;margin-bottom:10px}}