/* ============================================================
   RANGEMENT — Mieux Gérer
   Ardoise (encre) + vert « rangé » + papier blanc sur un sous-main gris clair.
   Inter pour tout, Instrument Serif italique pour l'accent du titre.
   ============================================================ */
:root{
  --bg:#F2F4F7; --desk:#E4E9F0; --paper:#fff; --ink:#132235; --mut:#556274; --line:#D5DCE5;
  --ac:#0F7B53; --ac-d:#0A6243; --ac-s:#E2F2EA; --warn:#B4381F;
  --r:14px; --ombre:0 1px 2px rgba(19,34,53,.08),0 6px 18px -8px rgba(19,34,53,.22);
  --ease:cubic-bezier(.22,.9,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

/* ---------- en-tête ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1120px;margin:0 auto;padding:12px 16px}
.logo{display:flex;align-items:center;font:400 26px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.005em;white-space:nowrap}
.logo svg{flex:none;margin-right:9px}
.logo i{color:var(--ac)}
.top-r{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--mut)}

/* ---------- mise en page ---------- */
.app{max-width:1120px;margin:0 auto;padding:0 16px 20px;display:flex;flex-direction:column;gap:12px}
.intro{padding-top:4px}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
h1{font-size:26px;line-height:1.14;font-weight:800;letter-spacing:-.03em}
h1 em{display:block;font:italic 400 30px/1.05 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;margin-top:4px;color:var(--ac-d)}
.sub{margin-top:8px;font-size:14.5px;color:var(--mut)}
.sub b{color:var(--ink);font-weight:600}
body:not([data-ecran="accueil"]) .intro{display:none}

/* ---------- le bureau (la pile) ---------- */
.bureau{position:relative;height:118px;border-radius:var(--r);background:var(--desk);
  background-image:linear-gradient(rgba(19,34,53,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(19,34,53,.045) 1px,transparent 1px);
  background-size:14px 14px;overflow:hidden;transition:height .4s var(--ease)}
body:not([data-ecran="accueil"]) .bureau{height:100px}
body[data-ecran="refus"] .bureau{display:none}
.tas{position:absolute;inset:0 0 22px}
.bureau::after{content:"Votre dossier";position:absolute;left:57%;top:calc(34% * .82 + 0px);width:40%;height:50px;border:1.5px dashed #A9B6C6;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#8A96A6;transition:opacity .3s}
.bureau.clos::after{opacity:0}
.cap{z-index:30;padding:1px 6px;border-radius:5px;background:var(--desk)}
.f{position:absolute;left:var(--x);top:var(--y);width:40%;height:50px;padding:7px 9px;border-radius:5px;background:var(--paper);box-shadow:var(--ombre);
  transform:rotate(var(--r));display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:62% 3px,44% 3px;background-position:9px 9px,9px 16px;background-repeat:no-repeat;
  transition:left .5s var(--ease),top .5s var(--ease),transform .5s var(--ease),box-shadow .3s}
.f i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A96A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f b{font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
.f.r{left:57%;top:calc(34% - var(--k) * 1.5px);transform:rotate(0);background-image:none;border-left:3px solid var(--ac)}
.f.r i{color:var(--ac)}
.cap{position:absolute;bottom:5px;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--mut)}
.cap-g{left:6px}
.cap-d{left:calc(57% - 6px)}
.cap-d i{font-style:normal;color:var(--ac)}
.pince{position:absolute;left:calc(97% - 46px);top:calc(34% * .78 - 4px);width:34px;height:14px;border:3px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;opacity:0;transform:translateY(-10px);transition:.35s var(--ease);z-index:40}
.tampon{position:absolute;left:7%;top:32%;z-index:41;padding:3px 9px;border:2.5px solid var(--ac);border-radius:6px;color:var(--ac);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.7);opacity:0;transform:rotate(-9deg) scale(1.9)}
.onglet{position:absolute;left:57%;top:calc(34% * .78 - 12px);z-index:39;max-width:40%;padding:2px 10px 4px;border-radius:6px 6px 0 0;background:var(--ac);color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.bureau.clos .pince{opacity:1;transform:none}
.bureau.clos .tas .f.r{box-shadow:0 1px 1px rgba(19,34,53,.06);top:calc(34% + 10px - var(--k) * 1.5px)}
.bureau.clos .cap-g{opacity:0}
.bureau.tamponne .tampon{opacity:1;transform:rotate(-9deg) scale(1);transition:transform .28s cubic-bezier(.3,1.6,.5,1),opacity .15s}
.bureau.tamponne .onglet{opacity:1}
.transmis{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ac);opacity:0;transition:opacity .4s .5s}
.bureau.parti .transmis{opacity:1}
.bureau.parti .tampon{opacity:0;transition:opacity .3s}
.bureau.parti .cap-d,.bureau.parti::after{opacity:0}
.bureau.parti .tas,.bureau.parti .pince,.bureau.parti .onglet{transform:translateX(70%);opacity:0;transition:transform .6s var(--ease) .15s,opacity .5s .25s}

/* ---------- carte question ---------- */
.card{background:var(--paper);border-radius:18px;box-shadow:var(--ombre);padding:18px 16px 16px}
.scr{display:none}
.scr.on{display:block}
.scr.entre{animation:entre .32s var(--ease)}
@keyframes entre{from{opacity:0;transform:translateY(8px)}}
.q-top{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--mut)}
.q-left{margin-left:auto;font-weight:500}
.back{display:grid;place-items:center;width:36px;height:36px;margin:-4px 0 -4px -6px;border:0;border-radius:10px;background:var(--bg)}
.back[hidden]{display:none}
h2{font-size:21px;line-height:1.22;font-weight:800;letter-spacing:-.02em}
.q-h{margin-top:6px;font-size:14px;line-height:1.45;color:var(--mut)}
.q-note{margin-top:10px;font-size:13px;font-weight:600;color:var(--ac)}
.q-note:empty{display:none}
.q-note.ko{color:var(--warn)}

.opts{display:grid;gap:8px;margin-top:14px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;transition:border-color .15s,background .15s,transform .12s}
.opt .l{display:flex;flex-direction:column;font-weight:650;font-size:15.5px;line-height:1.25}
.opt small{font-weight:400;font-size:13px;color:var(--mut);margin-top:2px}
.opt::after{content:"";margin-left:auto;flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);transition:.15s}
.opt:hover{border-color:#A9B6C6}
.opt:active{transform:scale(.985)}
.opt.deja{border-color:var(--ac)}
.opt.pris{border-color:var(--ac);background:var(--ac-s)}
.opt.pris::after,.opt.deja::after{border-color:var(--ac);background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5 8.5 13.5 14.5 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.opt.retrait{min-height:46px;border-style:dashed;background:transparent}
.opt.retrait .l{font-weight:500;font-size:14.5px;color:var(--mut)}
.opts.compteur,.opts.bande{grid-template-columns:repeat(3,1fr)}
.opts.compteur .opt,.opts.bande .opt{justify-content:center;text-align:center;min-height:62px;padding:8px}
.opts.compteur .opt .l{font-size:22px;font-weight:800}
.opts.compteur .opt::after,.opts.bande .opt::after{display:none}
.opts.compteur .retrait{grid-column:1/-1;min-height:46px}
.opts.compteur .retrait .l{font-size:14.5px}
.opts.bande{grid-template-columns:repeat(2,1fr)}
.opts.binaire{grid-template-columns:1fr 1fr}
.opts.binaire .retrait{grid-column:1/-1}
.niv{display:flex;align-items:flex-end;gap:2.5px;flex:none;height:20px}
.niv b{width:5px;border-radius:2px;background:var(--line)}
.niv b:nth-child(1){height:6px}.niv b:nth-child(2){height:10px}.niv b:nth-child(3){height:15px}.niv b:nth-child(4){height:20px}
.n1 b:nth-child(-n+1),.n2 b:nth-child(-n+2),.n3 b:nth-child(-n+3),.n4 b{background:var(--ac)}

/* montants : saisie du chiffre réel, arrondi */
.opts.montant{display:block}
.saisie{min-width:0}
.saisie-l{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:6px}
.saisie-in{display:flex;align-items:center;gap:10px;height:64px;padding:0 18px;border:2px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.saisie-in:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px var(--ac-s)}
.saisie-in input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:none;font:700 26px Inter,sans-serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.saisie-in input::placeholder{color:#B3BDC9;font-weight:600}
.saisie-in b{font-size:16px;font-weight:600;color:var(--mut);white-space:nowrap}
.saisie-ex{margin-top:8px;font-size:13px;color:var(--mut)}
.saisie-conf{margin-top:12px;padding:12px 14px;border-radius:12px;background:#FFF7E8;border:1px solid #F2D9A6;font-size:14.5px}
.saisie-conf span{display:flex;gap:8px;margin-top:10px}
.saisie-conf button{flex:1;min-height:44px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:14px}
.saisie-conf .oui{border-color:var(--ac);background:var(--ac);color:#fff}
.saisie-conf[hidden]{display:none}

/* ---------- analyse ---------- */
.an-t{font-weight:800;font-size:18px}
.an-l{margin-top:12px;display:grid;gap:8px}
.an-l li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--mut);opacity:.45;transition:opacity .2s}
.an-l li::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line)}
.an-l li.v{opacity:1;color:var(--ink)}
.an-l li.v::before{border-color:var(--ac);background:var(--ac)}

/* ---------- verdict + formulaire ---------- */
.verdict{padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:14px}
.v-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.v-t{margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.v-s{margin-top:4px;font-size:14px;color:var(--mut)}
.f-n{font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:6px}
.fs{display:none;border:0;margin:0;padding:0;min-width:0}
.fs.on{display:block}
legend{padding:0;font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl{display:block}
.fl span{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:4px}
.fl input{width:100%;height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;font:500 16px Inter,sans-serif;color:var(--ink);background:#fff;outline:0}
.fl input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-s)}
.hint{margin-top:6px;font-size:12.5px;color:var(--mut)}
.err{display:none;margin-top:6px;font-size:13px;font-weight:600;color:var(--warn)}
.err.on{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:12px;margin-top:12px}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ac)}
.consent label{font-size:12.5px;line-height:1.45;color:var(--mut)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:12px;border:0;border-radius:13px;background:var(--ac);color:#fff;font-weight:700;font-size:16.5px;box-shadow:0 2px 0 var(--ac-d);transition:background .15s,transform .1s}
.btn:hover{background:var(--ac-d)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6}
.recap{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:12px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.recap li{display:flex;flex-direction:column;padding:8px 10px;background:#FAFBFC;min-width:0}
.recap span{font-size:11px;font-weight:600;color:var(--mut)}
.recap b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- vérification SMS ---------- */
.code{display:block;width:100%;height:60px;margin-top:14px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font:700 26px/1 Inter,sans-serif;letter-spacing:.4em;color:var(--ink);outline:0}
.code:focus{border-color:var(--ac)}
.lien{display:block;width:100%;min-height:44px;margin-top:6px;border:0;background:none;font-size:14px;font-weight:600;color:var(--mut);text-decoration:underline}
.lien:disabled{text-decoration:none;opacity:.7}

/* ---------- confirmation / refus ---------- */
.coche{width:56px;height:56px;margin-bottom:12px}
.coche svg{fill:none;stroke:var(--ac);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.coche circle{fill:var(--ac-s);stroke-dasharray:151;animation:trait .6s var(--ease) both}
.coche path{stroke-dasharray:40;animation:trait .4s var(--ease) .45s both}
@keyframes trait{from{stroke-dashoffset:151}}
.steps{margin-top:14px;display:grid;gap:10px;counter-reset:s}
.steps li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.45;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac-s);color:var(--ac-d);font-weight:800;font-size:12.5px}
.steps.petit li{font-size:12.5px;color:var(--mut)}
.note-ok{margin-top:14px;padding:12px;border-radius:12px;background:var(--bg);font-size:13.5px;color:var(--mut)}
.note-ok b{color:var(--ink)}
.optin{margin-top:20px;padding:16px;border-radius:14px;background:var(--ac-s);border:1px solid #BFE3CF}
.optin[hidden],.optin-ok[hidden],#refus-retente[hidden]{display:none}
.optin-t{font-weight:800;font-size:17px;letter-spacing:-.01em}
.optin-s{margin:4px 0 12px;font-size:13.5px;color:var(--mut)}
.optin .consent{background:#fff}
.optin-ok{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--ac-s);font-weight:600;color:var(--ac-d)}
.note-rac{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--mut)}
.note-rac-t{font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:4px}
#refus-retente{margin-top:6px}
#refus-retente[hidden]{display:none}
#s-refus h2+.pont-s{margin-top:6px;font-size:14.5px}
.pont-q{margin-top:20px;font-weight:800;font-size:18px}
.pont-s{margin-top:4px;font-size:13.5px;color:var(--mut)}
.offres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.offre{display:none;flex-direction:column;gap:5px;padding:13px 12px;border:1.5px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:#fff}
.offre[data-on="1"]{display:flex}
.offre svg{color:var(--ac)}
.offre b{font-size:14px;line-height:1.25}
.offre span{font-size:12.5px;color:var(--mut);line-height:1.35}
.offre i{margin-top:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--ac)}
.pont-note{margin:10px 0 4px;font-size:12px;color:var(--mut)}

/* ---------- reprise ---------- */
.reprise{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px}
.reprise[hidden]{display:none}
.reprise b{font-weight:600;color:#BFE7D3}
.reprise button{flex:none;margin-left:auto;min-height:40px;padding:0 14px;border:0;border-radius:9px;background:#fff;color:var(--ink);font-weight:700}

/* ---------- preuves (après l'action) ---------- */
.preuves{display:grid;gap:8px;padding:4px 2px}
.preuves li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mut)}
.preuves svg{flex:none;color:var(--ac)}
.preuves b{color:var(--ink);font-weight:600}
body:not([data-ecran="accueil"]) .preuves{display:none}

/* ---------- pied de page, modales, cookies ---------- */
.foot{max-width:1120px;margin:0 auto;padding:18px 16px 28px;font-size:12px;color:var(--mut);border-top:1px solid var(--line)}
.foot p{margin-bottom:6px}
.footer-links{display:flex;gap:16px;margin:8px 0}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.footer-disclaimer p{font-size:11.5px}
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;background:rgba(19,34,53,.6)}
.modal.on{display:flex}
.modal-content{position:relative;background:#fff;border-radius:16px;max-width:680px;width:100%;padding:28px 22px}
.modal-content h2{margin-bottom:4px}
.modal-content h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 6px}
.modal-content p{font-size:14px;color:var(--mut);margin-bottom:8px}
.modal-date{font-size:12px!important}
.modal-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1}
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--ink);color:#DCE3EC;font-size:12.5px;line-height:1.4}
.ck-actions{display:flex;gap:8px;flex:none}
.ck-actions button{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid #3F526A;background:none;color:#fff;font-weight:600;font-size:13.5px}
.ck-actions button.primary{background:#fff;border-color:#fff;color:var(--ink)}
body.has-cookies{padding-bottom:84px}

/* ---------- bureau : deux colonnes ---------- */
@media (min-width:900px){
  .top{padding:20px 24px}
  .app{display:grid;grid-template-columns:1fr 460px;grid-template-rows:auto auto auto 1fr;column-gap:48px;row-gap:18px;padding:12px 24px 48px}
  .intro,.bureau,.preuves{grid-column:1}
  .preuves{align-content:start}
  .stage{grid-column:2;grid-row:1/span 4;align-self:start;position:sticky;top:20px}
  body:not([data-ecran="accueil"]) .intro,body:not([data-ecran="accueil"]) .preuves{display:block}
  body:not([data-ecran="accueil"]) .preuves{display:grid}
  h1{font-size:40px}
  h1 em{font-size:46px}
  .sub{font-size:16px;max-width:520px}
  .bureau,body:not([data-ecran="accueil"]) .bureau{height:230px}
  .f{height:78px;padding:10px 13px}
  .f i{font-size:10.5px}
  .f b{font-size:15px}
  .f.r{top:calc(40% - var(--k) * 4px)}
  .bureau::after{top:calc(40% * .9);height:78px}
  .bureau.clos .tas .f.r{top:calc(40% + 14px - var(--k) * 4px)}
  .onglet{top:calc(40% * .9 - 14px);font-size:13px}
  .pince{top:calc(40% * .9 - 6px)}
  .tampon{font-size:20px;top:38%}
  .card{padding:26px 24px 22px}
  h2{font-size:24px}
  body.has-cookies{padding-bottom:70px}
}
@media (max-width:380px){
  h1{font-size:23px}
  h1 em{font-size:26px}
  .cookies{flex-direction:column;align-items:stretch}
  body.has-cookies{padding-bottom:130px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}