/* FacturePro — CSS local, aucun CDN. Thème clair/sombre automatique. */
:root{
  --bg:#f5f7fb; --surface:#fff; --ink:#1c2230; --muted:#6b7385; --line:#e3e7ef;
  --accent:#2f5bea; --accent-ink:#fff; --accent-soft:#e8eeff;
  --ok:#157f4b; --ok-bg:#e4f6ec; --warn:#8a5a00; --warn-bg:#fff3d6; --err:#b42318; --err-bg:#fde8e6; --info-bg:#e8f1fb;
  --radius:12px; --shadow:0 1px 2px rgba(20,30,60,.06),0 4px 16px rgba(20,30,60,.05);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1320; --surface:#171c2e; --ink:#e8ebf4; --muted:#9aa3b8; --line:#2a3148;
  --accent:#6f93ff; --accent-ink:#0b1020; --accent-soft:#222b4a;
  --ok:#5fd99b; --ok-bg:#12332a; --warn:#f3c463; --warn-bg:#3a2e12; --err:#ff8b80; --err-bg:#3d1b19; --info-bg:#172a42;
  --shadow:0 1px 2px rgba(0,0,0,.4);}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0;letter-spacing:-.01em} h2{font-size:1.05rem;margin:0 0 .75rem}
.muted{color:var(--muted)} .small{font-size:.85rem} .center{text-align:center} .break{word-break:break-all}
.num{text-align:right;font-variant-numeric:tabular-nums} .pre{white-space:pre-wrap}
.ok-text{color:var(--ok)} .danger{color:var(--err)} .dim{opacity:.55}
code,.codes,.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Barre de navigation */
.topbar{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem;color:var(--ink)}
.logo-dot{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,var(--accent),#8a5cf6);display:inline-block}
.topbar nav{display:flex;gap:.25rem;flex-wrap:wrap;margin-left:auto}
.topbar nav a{padding:.45rem .8rem;border-radius:8px;color:var(--ink)} .topbar nav a:hover{background:var(--accent-soft);text-decoration:none}
.topbar nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:.3rem .6rem;font-size:1.2rem;color:var(--ink)}

.container{max-width:1080px;margin:0 auto;padding:1.5rem}
.center-box{max-width:520px;margin:6vh auto;padding:1rem}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .align-end{align-items:flex-end}
.actions.sticky{position:sticky;bottom:0;background:var(--bg);padding:.8rem 0;border-top:1px solid var(--line);margin-top:1rem}
form.inline{display:inline}

/* Cartes */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1rem}
.card.flush{padding:0;overflow-x:auto} .card-pad{padding:.9rem 1rem}
.auth-card{padding:1.75rem} .auth-card.wide{max-width:640px;margin-inline:auto}
.auth-title{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.public{max-width:820px;margin:0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .grid2>.card{margin-bottom:0}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.kpi span{display:block;color:var(--muted);font-size:.82rem} .kpi strong{font-size:1.4rem;letter-spacing:-.01em}
.kpi-warn strong{color:var(--err)}

/* Formulaires */
label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted);font-weight:500}
.lbl{font-size:.85rem;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input[type=color]{padding:.15rem;height:2.4rem;width:5rem}
label.check{flex-direction:row;align-items:center;gap:.5rem;color:var(--ink)} label.check input{width:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem} .form-grid .span2{grid-column:1/-1}
.form-grid>h2{margin:.4rem 0 0}
.code-input{font-size:1.6rem;letter-spacing:.35em;text-align:center;margin-bottom:1rem;font-family:ui-monospace,monospace}
.filters{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center} .filters input[type=search]{max-width:320px} .filters select{width:auto}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:600;padding:.55rem 1rem;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-soft);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn-ghost{background:transparent;border-color:transparent} .btn-sm{padding:.3rem .65rem;font-size:.85rem} .btn-block{width:100%}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.table th.num{text-align:right}
.table td{padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.items td{padding:.5rem .5rem} .items th{padding:.7rem .5rem}
.items textarea{min-width:240px;resize:vertical} .items .n{text-align:right;min-width:70px} .items .u{width:80px}
.items .line-total{white-space:nowrap;padding-top:1rem}

/* Totaux */
.totals{display:flex;flex-direction:column;gap:.35rem;max-width:340px;margin-left:auto;margin-top:1rem}
.totals>div{display:flex;justify-content:space-between;gap:2rem}
.totals .grand{font-size:1.15rem;border-top:1px solid var(--line);padding-top:.5rem;color:var(--accent)}

/* Badges & alertes */
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;vertical-align:middle;background:var(--accent-soft);color:var(--accent)}
.b-draft{background:var(--line);color:var(--muted)} .b-paid,.b-accepted{background:var(--ok-bg);color:var(--ok)}
.b-late,.b-refused,.b-cancelled{background:var(--err-bg);color:var(--err)}
.alert{padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;border:1px solid transparent}
.alert-ok{background:var(--ok-bg);color:var(--ok)} .alert-warn{background:var(--warn-bg);color:var(--warn)}
.alert-err{background:var(--err-bg);color:var(--err)} .alert-info{background:var(--info-bg)}
.alert a{text-decoration:underline}

/* Onglets */
.tabs{display:flex;gap:.25rem;margin-bottom:1rem;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:.6rem 1rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs a.active{color:var(--accent);border-color:var(--accent);font-weight:600} .tabs a:hover{text-decoration:none;color:var(--ink)}

/* 2FA */
.steps{padding-left:1.2rem;color:var(--muted)} .steps li{margin:.35rem 0}
.qr-wrap{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.qr{background:#fff;padding:12px;border-radius:12px;border:1px solid var(--line);line-height:0} .qr svg{width:180px;height:180px}
.secret{font-size:1.05rem;letter-spacing:.06em;background:var(--accent-soft);padding:.4rem .7rem;border-radius:8px;display:inline-block}
.codes{background:var(--accent-soft);padding:1rem;border-radius:10px;font-size:1.05rem;line-height:1.8;columns:2}

/* Divers */
.logo-row{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.logo-preview{width:200px;height:90px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff} .logo-preview img{max-width:100%;max-height:100%}
.copy{font-family:ui-monospace,monospace;font-size:.8rem}
ul.plain{list-style:none;padding:0;margin:0} ul.plain li{padding:.5rem 0;border-bottom:1px solid var(--line)} ul.plain li:last-child{border:0}
.public-head{margin-bottom:1rem}
#sig{width:100%;max-width:600px;height:180px;border:1px dashed var(--muted);border-radius:10px;background:#fff;touch-action:none;display:block;margin:.3rem 0}

@media (max-width:760px){
  .burger{display:block} .topbar nav{display:none;width:100%;flex-direction:column;margin:0} .topbar nav.open{display:flex}
  .kpis{grid-template-columns:1fr 1fr} .grid2,.form-grid{grid-template-columns:1fr} .container{padding:1rem}
  .codes{columns:1}
}
@media print{.topbar,.actions,.btn,.tabs{display:none!important} body{background:#fff;color:#000} .card{box-shadow:none}}

/* ───── Assistant de création ───── */
.wiz{max-width:760px;margin:0 auto}
.wiz-progress{display:flex;list-style:none;padding:0;margin:0 0 1.5rem;gap:.25rem}
.wiz-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;position:relative;font-size:.78rem;color:var(--muted)}
.wiz-progress li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0;transition:background .4s}
.wiz-progress li:first-child::before{display:none}
.wiz-progress li.done::before,.wiz-progress li.now::before{background:var(--accent)}
.wiz-progress .dot{width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;z-index:1;transition:all .3s}
.wiz-progress li.now .dot{border-color:var(--accent);color:var(--accent);transform:scale(1.15);box-shadow:0 0 0 4px var(--accent-soft)}
.wiz-progress li.done .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wiz-progress li.now{color:var(--ink);font-weight:600}
.wiz-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.75rem;box-shadow:var(--shadow)}
.wiz-step[hidden]{display:none}
.wiz-step h1{margin-bottom:.4rem}
.wiz-step.from-right{animation:wizR .35s cubic-bezier(.2,.8,.2,1)} .wiz-step.from-left{animation:wizL .35s cubic-bezier(.2,.8,.2,1)}
@keyframes wizR{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes wizL{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
.choices{display:grid;gap:.8rem;margin:1.2rem 0}
.choices.two{grid-template-columns:1fr 1fr} .choices.three{grid-template-columns:repeat(3,1fr)}
.choice{cursor:pointer;color:var(--ink)} .choice input{position:absolute;opacity:0;pointer-events:none}
.choice>span{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.1rem;border:2px solid var(--line);border-radius:14px;height:100%;transition:all .2s;background:var(--surface)}
.choice b{font-size:1rem} .choice small{color:var(--muted);font-weight:400}
.choice:hover>span{border-color:var(--accent)}
.choice input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.choices.big>.choice>span{padding:1.5rem 1.2rem;text-align:center;align-items:center;font-size:1.05rem}
.panel{margin-top:1rem} .panel[hidden]{display:none}
.wiz-nav{display:flex;align-items:center;gap:1rem;justify-content:space-between;margin-top:1.2rem}
.wiz-nav.shake{animation:shake .35s} @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.wiz-error{color:var(--err);font-size:.9rem;flex:1;text-align:center}
.btn-lg{padding:.8rem 1.6rem;font-size:1.05rem}
.w-item{position:relative;display:flex;flex-direction:column;gap:.7rem;margin:1rem 0;animation:wizR .3s}
.w-del{position:absolute;top:.5rem;right:.5rem}
.w-row{display:grid;grid-template-columns:90px 1fr 1fr 80px auto;gap:.7rem;align-items:end}
.w-total{text-align:right;min-width:100px;display:flex;flex-direction:column;padding-bottom:.55rem}
.recap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .recap>div{display:flex;flex-direction:column}
.mail-preview{margin-top:1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mp-head{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1rem;background:var(--accent-soft)}
#mp-body{padding:1rem;font-size:.92rem}
.ttl{font-weight:600;margin-bottom:.3rem}

/* Écran de réussite */
.done{text-align:center;max-width:560px;margin:4vh auto;padding:2.5rem 1.5rem;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.done-check{width:96px;height:96px;margin-bottom:1rem}
.dc-circle{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:dash .7s .1s ease forwards}
.dc-tick{stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:dash .45s .7s ease forwards}
.done-check.neutral .dc-circle,.done-check.neutral .dc-tick{stroke:var(--accent)}
@keyframes dash{to{stroke-dashoffset:0}}
.center-actions{justify-content:center;margin-top:1.2rem}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
@media (max-width:760px){.choices.two,.choices.three{grid-template-columns:1fr}.w-row{grid-template-columns:1fr 1fr}.wiz-progress .lbl{display:none}.wiz-step{padding:1.1rem}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}