:root{
  --bg:#f6f5f1;--card:#fff;--ink:#1b1f23;--mut:#6a7178;--line:#e4e2da;
  --brand:#0f6b5c;--brand-d:#0b5448;--brand-l:#e3f1ee;--warn:#b42318;--warn-l:#fdecea;--amber:#b54708;--amber-l:#fff4e5;
  --r:14px;
}
:root{--on-brand:#fff}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"]){--bg:#121413;--card:#1b1e1d;--ink:#eceeed;--mut:#9aa3a0;--line:#2b302f;--brand:#3fb89f;--brand-d:#5fd0b8;--brand-l:#173029;--warn-l:#3a1b18;--amber-l:#3a2a12;--on-brand:#0b1210}}
:root[data-mode="dark"]{--bg:#121413;--card:#1b1e1d;--ink:#eceeed;--mut:#9aa3a0;--line:#2b302f;--brand:#3fb89f;--brand-d:#5fd0b8;--brand-l:#173029;--warn-l:#3a1b18;--amber-l:#3a2a12;--on-brand:#0b1210}
/* Palettes d'accent choisies par l'utilisateur (data-accent) et mode (data-mode : light | dark ; absent = automatique) */
:root[data-accent="bleu"]{--brand:#1d5fbf;--brand-d:#164a96;--brand-l:#e5eefb}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="bleu"]{--brand:#6aa5f5;--brand-d:#8bbcf8;--brand-l:#16263d}}
:root[data-mode="dark"][data-accent="bleu"]{--brand:#6aa5f5;--brand-d:#8bbcf8;--brand-l:#16263d}
:root[data-accent="violet"]{--brand:#6d3fc0;--brand-d:#55309a;--brand-l:#efe8fa}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="violet"]{--brand:#a98af0;--brand-d:#bda3f4;--brand-l:#261c3d}}
:root[data-mode="dark"][data-accent="violet"]{--brand:#a98af0;--brand-d:#bda3f4;--brand-l:#261c3d}
:root[data-accent="bordeaux"]{--brand:#9c2f57;--brand-d:#7c2345;--brand-l:#f9e8ef}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="bordeaux"]{--brand:#e07a9f;--brand-d:#e99ab6;--brand-l:#3a1a27}}
:root[data-mode="dark"][data-accent="bordeaux"]{--brand:#e07a9f;--brand-d:#e99ab6;--brand-l:#3a1a27}
:root[data-accent="orange"]{--brand:#b45309;--brand-d:#8f4207;--brand-l:#fdf0e3}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="orange"]{--brand:#f0a050;--brand-d:#f4b878;--brand-l:#3a2812}}
:root[data-mode="dark"][data-accent="orange"]{--brand:#f0a050;--brand-d:#f4b878;--brand-l:#3a2812}
:root[data-accent="ardoise"]{--brand:#3f4e5f;--brand-d:#2f3b49;--brand-l:#e8ecf0}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="ardoise"]{--brand:#9fb3c8;--brand-d:#b7c7d8;--brand-l:#222b35}}
:root[data-mode="dark"][data-accent="ardoise"]{--brand:#9fb3c8;--brand-d:#b7c7d8;--brand-l:#222b35}
.theme-pick{position:relative;display:inline-block}.theme-pick>summary{list-style:none;cursor:pointer;font-size:1.05rem;padding:2px 6px;border-radius:8px;border:1px solid var(--line);background:var(--card)}.theme-pick>summary::-webkit-details-marker{display:none}.theme-pick[open]>summary{border-color:var(--brand)}
.theme-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:210px;text-align:left}.theme-pop b{display:block;font-size:.78rem;color:var(--mut);margin:0 0 6px;font-weight:600}.theme-sw{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.theme-sw button{width:28px;height:28px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.theme-sw button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}.theme-md{display:flex;gap:4px}.theme-md button{flex:1;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer}.theme-md button[aria-pressed=true]{background:var(--brand-l);border-color:var(--brand);color:var(--brand);font-weight:700}.theme-note{font-size:.72rem;color:var(--mut);margin:8px 0 0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--brand)}
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo-img{height:34px;width:auto;max-width:200px;object-fit:contain;display:block}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-size:1rem}
.top nav a{font-size:.92rem;text-decoration:none;font-weight:600}
.hero{padding:28px 0 8px}
.hero h1{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.2;margin:0 0 8px;letter-spacing:-.01em;max-width:22ch}
.hero p{color:var(--mut);margin:0;max-width:60ch}
.notice{background:var(--amber-l);color:var(--amber);border-radius:10px;padding:8px 12px;margin:14px 0 0;font-size:.9rem}
.grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;margin:20px 0 40px}
@media(max-width:860px){.grid{grid-template-columns:1fr}.col-side{order:-0}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card h2{font-size:1.05rem;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand-l);color:var(--brand);font-size:.85rem}
.locked{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.field{margin-bottom:14px;flex:1;min-width:0}
.field>label,.sub>label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
small{color:var(--mut);font-weight:400}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>.field{flex:1 1 200px}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.sub{margin-top:10px;padding:12px;background:var(--bg);border-radius:10px}
.qty{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{width:44px;border:0;background:var(--bg);font-size:1.2rem;color:var(--ink);cursor:pointer}
.qty input{border:0;border-radius:0;text-align:center;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
/* dropzone */
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:26px 16px;text-align:center;cursor:pointer;transition:.15s;position:relative}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-l)}
.drop-ico{font-size:1.6rem;color:var(--brand)}
.drop small{display:block;margin-top:4px}
.drop-file{display:flex;align-items:center;gap:14px;text-align:left}
.file-ico{font-size:2rem}.file-meta{flex:1;min-width:0}
.file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-sub{color:var(--mut);font-size:.9rem}.file-sub b{color:var(--brand)}
.link{color:var(--brand);font-weight:600;font-size:.9rem;text-decoration:none;background:none;border:0;cursor:pointer}
.progress{margin-top:12px}
.progress .p-top{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;margin-bottom:6px}
.progress .p-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress .bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden;position:relative}
.progress .bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.progress.ind .bar i{position:absolute;width:40%;animation:slide 1s infinite ease-in-out}
.progress.wait .bar i{background:var(--amber)}
.progress .p-sub{display:block;margin-top:5px;color:var(--mut);font-size:.82rem;min-height:1.1em}
@keyframes slide{0%{left:-40%}100%{left:100%}}
.hint{font-size:.85rem;color:var(--amber);margin:8px 0 0}
.err{color:var(--warn);background:var(--warn-l);border-radius:8px;padding:8px 10px;font-size:.9rem;margin:10px 0 0}
/* choice cards */
.seg3,.seg2,.binds{display:grid;gap:8px}
.seg3{grid-template-columns:repeat(3,1fr)}.seg2{grid-template-columns:repeat(2,1fr)}
.binds{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media(max-width:560px){.seg3{grid-template-columns:1fr}}
.seg3 label,.seg2 label,.binds label{position:relative;cursor:pointer;display:block}
.seg3 input,.seg2 input,.binds input{position:absolute;opacity:0}
.seg3 span,.seg2 span,.binds span{display:block;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;height:100%;transition:.12s}
.seg3 b,.seg2 b,.binds b{display:block;font-size:.93rem}
.seg3 small,.seg2 small,.binds small{font-size:.8rem}
.seg3 input:checked+span,.seg2 input:checked+span,.binds input:checked+span{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand) inset}
.seg3 input:focus-visible+span,.seg2 input:focus-visible+span,.binds input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.switch{display:flex;gap:12px;align-items:center;margin:4px 0 18px;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch i{flex:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:.15s}
.switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+i{background:var(--brand)}.switch input:checked+i:after{left:21px}
.switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
.switch b{display:block;font-size:.93rem}.switch small{font-size:.82rem}
/* summary */
.col-side{position:sticky;top:76px}
@media(max-width:860px){.col-side{position:static}}
.summary h2{margin-bottom:10px}
.empty{color:var(--mut);font-size:.92rem;padding:6px 0 14px}
dl{margin:0}dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
dt{color:var(--mut)}dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 10px}
.total strong{font-size:1.6rem;color:var(--brand);letter-spacing:-.01em}
.btn{display:block;width:100%;text-align:center;padding:14px;border:0;border-radius:12px;background:var(--brand);color:var(--on-brand);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;margin-top:10px}
.btn:hover:not(:disabled){background:var(--brand-d)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.fine{font-size:.8rem;color:var(--mut);margin:10px 0 0;text-align:center}
.foot{padding:20px 16px 40px;color:var(--mut);font-size:.85rem;text-align:center}
/* modal */
.modal{position:fixed;inset:0;background:rgba(10,14,13,.6);display:grid;place-items:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.modal-box{background:var(--card);border-radius:18px;padding:28px 24px;max-width:420px;width:100%;text-align:center}
.modal-box h3{margin:12px 0 6px}.modal-box p{color:var(--mut);margin:6px 0}
.spinner{width:44px;height:44px;border:4px solid var(--brand-l);border-top-color:var(--brand);border-radius:50%;margin:0 auto;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ok,.ko{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;margin:0 auto;font-weight:700}
.ok{background:var(--brand-l);color:var(--brand)}.ko{background:var(--warn-l);color:var(--warn)}
.code{font-family:ui-monospace,Menlo,monospace;background:var(--bg);padding:2px 8px;border-radius:6px;color:var(--ink)}
.modal .link{display:inline-block;margin-top:12px}
.modal .field{text-align:left;margin-top:14px}
/* tracking */
.track{max-width:560px;margin:30px auto}
.steps{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0}
.steps li{display:flex;gap:12px;padding:10px 0;position:relative;color:var(--mut)}
.steps li:before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);margin-top:5px;background:var(--card);z-index:1}
.steps li:not(:last-child):after{content:"";position:absolute;left:6px;top:24px;bottom:-10px;width:2px;background:var(--line)}
.steps li.done{color:var(--ink)}.steps li.done:before{background:var(--brand);border-color:var(--brand)}
.steps li.now{font-weight:700;color:var(--brand)}.steps li.now:before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-l)}

/* ---------- Aperçu du document ---------- */
.pv-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pv-head h2{margin:0}
.pv-tools{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:20px;padding:6px 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--brand)}
.chip-accent{background:var(--brand-l);border-color:var(--brand);color:var(--brand)}
.chip:disabled{opacity:.5;cursor:wait}
.pv-hint{margin:4px 0 12px;font-size:.88rem;color:var(--mut);min-height:1.3em}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.thumb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.t-main{display:block;width:100%;padding:0;border:2px solid var(--line);border-radius:8px;background:#fff;cursor:zoom-in;overflow:hidden;aspect-ratio:210/297;position:relative}
.t-main img{display:block;width:100%;height:100%;object-fit:contain;background:var(--card)}
.t-main:hover{border-color:var(--mut)}
.t-main:focus-visible,.t-zoom:focus-visible,.pv-nav:focus-visible,.pv-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.t-num{font-size:.78rem;color:var(--mut);font-weight:600}
.t-zoom{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(20,24,23,.7);color:#fff;font-size:.8rem;cursor:pointer;display:none;place-items:center;padding:0}
.thumb:hover .t-zoom,.t-zoom:focus-visible{display:grid}
@media(hover:none){.t-zoom{display:grid}}
.t-badge{position:absolute;left:4px;bottom:4px;background:var(--brand);color:var(--on-brand);font-size:.62rem;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:4px;display:none}
.pv-grid[data-mode=bw] .t-main img,.pv-grid[data-mode=mixed] .thumb:not(.on) .t-main img,.pv-img-gray{filter:grayscale(1)}
.pv-grid[data-mode=mixed] .t-main{cursor:pointer}
.pv-grid[data-mode=mixed] .thumb.on .t-main{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.pv-grid[data-mode=mixed] .thumb.on .t-badge{display:block}
.t-ph{display:grid;place-items:center;height:100%;color:var(--mut);font-size:.75rem}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.pager button{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;min-width:38px;height:36px;font:inherit;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.pager span{font-size:.85rem;color:var(--mut)}
/* visionneuse */
.pv-viewer{background:var(--card);border-radius:16px;width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.pv-vtop{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.pv-x{border:0;background:none;color:var(--ink);font-size:1.1rem;cursor:pointer;width:34px;height:34px;border-radius:50%}
.pv-x:hover{background:var(--bg)}
.pv-vbody{display:flex;align-items:center;gap:6px;padding:12px;min-height:0;flex:1;background:var(--bg)}
.pv-page{flex:1;min-width:0;display:grid;place-items:center;min-height:300px;overflow:auto;max-height:calc(100vh - 220px)}
.pv-page img{max-width:100%;height:auto;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.2);border-radius:2px}
.pv-nav{flex:none;width:40px;height:56px;border:0;border-radius:10px;background:var(--card);color:var(--ink);font-size:1.6rem;cursor:pointer;border:1px solid var(--line)}
.pv-nav:disabled{opacity:.3;cursor:default}
.pv-vfoot{display:flex;gap:10px;align-items:center;justify-content:center;padding:12px;border-top:1px solid var(--line);font-weight:600;cursor:pointer}
.pv-vfoot[hidden]{display:none}
.pv-vfoot input{width:18px;height:18px;accent-color:var(--brand)}

/* l'attribut hidden doit toujours l'emporter sur les display:flex/grid des composants */
[hidden]{display:none!important}

/* --- comptes clients --- */
.pnav{display:flex;gap:16px;align-items:center}.pnav a{font-size:.92rem;text-decoration:none;font-weight:600}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;align-items:start}
@media(max-width:760px){.auth-grid{grid-template-columns:1fr}}
.acct{margin:22px 0 50px}.acct-h{font-size:1.5rem;margin:0 0 14px}.sec-h{font-size:1.1rem;margin:26px 0 10px}
.stats2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
@media(max-width:620px){.stats2{grid-template-columns:1fr 1fr}.stats2 .btn{grid-column:1/-1;padding:14px}}
.stat{padding:14px 16px;margin:0}.stat small{display:block}.stat strong{font-size:1.4rem}
.ord{padding:16px;margin-bottom:12px}.ord-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ord-total{font-size:1.1rem;color:var(--brand);white-space:nowrap}.ord-doc{margin:8px 0 2px;font-weight:600;overflow-wrap:anywhere}
.ord-meta{font-size:.88rem;color:var(--mut)}.ord-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn.sm2{display:inline-block;width:auto;margin:0;padding:9px 16px;font-size:.92rem}
.btn.sec2{display:inline-block;width:auto;margin:0;padding:8px 14px;font-size:.92rem;background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.danger2{color:var(--warn);margin-top:6px}
.two-c{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:760px){.two-c{grid-template-columns:1fr}}
.pager .pg{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:8px;margin-right:6px;text-decoration:none;color:var(--ink)}.pager .pg.cur{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.danger-zone summary{cursor:pointer;font-weight:600;color:var(--warn)}
.acct-sw{margin:14px 0 10px}
.notice.ok-n{background:var(--brand-l);color:var(--brand);margin:14px 0 0}.notice.err-n{background:var(--warn-l);color:var(--warn)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:700;white-space:nowrap}
.s-pending_payment{background:#eee;color:#555}.s-paid{background:#fff0d6;color:#b54708}.s-printing{background:#e0ecff;color:#1d4ed8}
.s-ready{background:#d9f2e6;color:#067647}.s-delivered{background:var(--brand-l);color:var(--brand)}.s-cancelled{background:var(--warn-l);color:var(--warn)}
.pnav a{white-space:nowrap}

/* remises, codes promo */
dl .disc dt{color:var(--brand)}dl .disc dd{color:var(--brand)}
.nudge{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--amber-l);color:var(--amber);font-size:.85rem}
.saving{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--brand-l);color:var(--brand);font-size:.85rem;font-weight:600}
.promo{margin:12px 0 0}
.promo-toggle{background:none;border:0;padding:0;color:var(--brand);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.promo-form{display:flex;gap:8px;margin-top:6px}
.promo-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;text-transform:uppercase;letter-spacing:.04em}
.promo-form .btn{width:auto;margin:0;padding:10px 14px}
.promo-msg{margin:8px 0 0;padding:8px 10px;border-radius:8px;font-size:.85rem}
.promo-msg.good{background:var(--brand-l);color:var(--brand)}.promo-msg.bad{background:var(--warn-l);color:var(--warn)}.promo-msg.warn{background:var(--amber-l);color:var(--amber)}
.promo-clear{margin-top:4px}

/* ---------- Plusieurs fichiers par commande ---------- */
.files{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.files:empty{display:none}
.fcard{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:var(--card)}
.fcard.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.fhead{display:flex;align-items:center;gap:10px}
.fhead .file-ico{font-size:1.6rem}
.f-del{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--mut);cursor:pointer;font-size:.9rem}
.f-del:hover{border-color:#c0392b;color:#c0392b}
.fopts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin-top:10px}
.fo{display:flex;flex-direction:column;gap:4px;min-width:0}
.fo-l{font-size:.78rem;font-weight:600;color:var(--mut)}
.fo .qty{width:132px}
.fo select{padding:9px 10px;min-width:170px}
.fo-chk{flex-direction:row;align-items:center;gap:8px;cursor:pointer;padding-bottom:9px}
.fo-chk input{width:18px;height:18px}
.fo-chk small{color:var(--mut)}
.fmixed{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:10px}
.fmixed label{display:block;font-weight:600;font-size:.88rem}
.fmixed input{margin-top:6px;width:100%}
.drop.compact{padding:14px 16px}
.drop.compact .drop-ico{display:none}
.sfiles{display:block!important;padding:0!important;border:0!important}
.sfile{display:flex!important;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.sfile .sf-n{min-width:0;overflow:hidden}
.sfile .sf-n b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sfile .sf-n small{color:var(--mut)}
.sfile>b{white-space:nowrap}
.sfile .sf-n{flex:1}

/* Livraison : créneaux */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.slot{display:block;cursor:pointer}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1.5px solid var(--line,#d9dee7);border-radius:10px;font-size:.92rem;background:var(--card)}
.slot input:checked+span{border-color:var(--brand,#2457d6);box-shadow:0 0 0 2px rgba(36,87,214,.15);font-weight:600}
.slot input:focus-visible+span{outline:2px solid var(--brand,#2457d6);outline-offset:2px}
.slot.off span{opacity:.55;cursor:not-allowed;background:var(--bg)}
.slot small{font-size:.78rem;color:var(--amber)}
.gap{color:var(--amber);font-weight:600}
#addrBox select{width:100%}
.eta{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--brand-l);color:var(--brand-d);font-size:.95rem;line-height:1.35}
.eta small{display:block;font-size:.78rem;opacity:.8;margin-top:2px}

/* Comptage des pages en arrière-plan */
.fcard.counting .f-pages{color:var(--amber);animation:pulse 1.4s infinite ease-in-out}
.fcard.failed{border-color:var(--warn)}.fcard.failed .f-pages{color:var(--warn)}
.err.wait{color:var(--amber);background:var(--amber-l)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Code de retrait */
.pickup{margin:16px 0 4px;padding:16px;border:2px dashed var(--brand);border-radius:14px;text-align:center;background:var(--brand-l)}
.pickup .pk-title{margin:0;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}
.pickup .pk-code{margin:4px 0 8px;font-size:2.6rem;font-weight:800;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:var(--ink,#111)}
.pickup svg{display:block;margin:0 auto 8px;background:#fff;border-radius:8px;max-width:100%;height:auto}
.pickup .fine{margin:0;text-align:center}
@media print{.pickup{border-color:#000}}
/* Crédit prépayé, points, parrainage */
.w-bal{margin:2px 0 8px;font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.acct .tbl-wrap{overflow-x:auto}.acct .tbl{width:100%;border-collapse:collapse;font-size:.9rem}.acct .tbl th{text-align:left;font-size:.78rem;color:var(--mut);padding:6px 8px;border-bottom:1px solid var(--line)}.acct .tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.paychoice{margin:12px 0 4px;display:grid;gap:8px}.paychoice label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:.92rem}
.paychoice label:has(input:checked){border-color:var(--brand);background:var(--brand-l)}.paychoice label.off{opacity:.6;cursor:not-allowed}.paychoice small{display:block;color:var(--mut)}
/* Pages légales et données personnelles */
.legal{margin:22px 0 50px;max-width:860px}.legal h1{font-size:1.5rem;margin:0 0 6px}.legal h2{font-size:1.05rem;margin:22px 0 6px}.legal p,.legal li{line-height:1.55}
.legal .tbl-wrap,.acct .tbl-wrap{overflow-x:auto}.legal .tbl{width:100%;border-collapse:collapse;font-size:.86rem}.legal .tbl th{text-align:left;font-size:.78rem;color:var(--mut);padding:6px 8px;border-bottom:1px solid var(--line)}.legal .tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
mark.todo{background:var(--amber-l);color:var(--amber);padding:1px 6px;border-radius:6px;font-size:.9em}
.consent{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;font-size:.88rem;line-height:1.4}.consent input{margin-top:3px;flex:none}
.legal-foot{margin-top:6px}.foot a{color:inherit;text-decoration:underline}

/* Contrôle automatique des fichiers */
.f-alert{margin:8px 0 0;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:.9rem}
.f-alert ul{margin:6px 0 4px 18px;padding:0}.f-alert li{margin:3px 0}.f-alert small{display:block;color:var(--mut);margin-top:4px}
.f-alert.lv-warn{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--card))}
.f-alert.lv-bad{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card))}
.f-alert li.info{color:var(--mut)}
.chk-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-size:.78rem;font-weight:600;background:color-mix(in srgb,var(--amber) 25%,var(--card));color:var(--ink)}
.chk-badge.bad{background:color-mix(in srgb,var(--warn) 25%,var(--card))}
.chk-box{margin:4px 0 0;padding:6px 10px;border-left:3px solid var(--amber);font-size:.88rem}.chk-box.bad{border-color:var(--warn)}.chk-box ul{margin:2px 0 0 16px;padding:0}

/* Autres produits */
.tabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.tab{flex:1 1 220px;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 14px;font:inherit;font-weight:600;cursor:pointer}
.tab small{display:block;font-weight:400;color:var(--mut);font-size:.82rem}
.tab.on{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand) inset}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font:inherit;cursor:pointer}
.pcard:hover,.pcard:focus-visible{border-color:var(--brand)}.pcard small{color:var(--mut);font-size:.82rem}.pcard em{font-style:normal;color:var(--brand);font-weight:600;font-size:.88rem;margin-top:4px}
.pico{font-size:1.5rem;line-height:1}.pcat-t{margin:0 0 8px;font-weight:600}
.plines{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pline{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.pl-t{flex:1;min-width:0}.pl-t small{color:var(--mut)}.pl-a{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pconf{border:1.5px solid var(--brand);border-radius:12px;padding:14px;background:var(--card)}.pconf h3{margin:0 0 10px;display:flex;gap:8px;align-items:center}
.qrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.qrow input{max-width:120px}
.ptxt{display:block;margin:0 0 6px;width:100%}.artname{margin-left:8px;font-size:.9rem}.pbtns{display:flex;gap:8px;margin-top:10px}
.pl-t>small{display:block;margin-top:2px}

/* Publicités de l'accueil */
.ads{display:grid;gap:12px;margin:14px 0 4px}
.ad{position:relative;display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--brand-l);padding:12px 14px;color:var(--ink);text-decoration:none;overflow:hidden}
a.ad:hover,a.ad:focus-visible{border-color:var(--brand)}
.ad img{width:150px;max-width:38%;height:96px;object-fit:cover;border-radius:10px;flex:none}
.ad-t{display:grid;gap:3px;min-width:0}.ad-t b{font-size:1.05rem}.ad-t span{color:var(--mut);font-size:.92rem}
.ad-cta{font-style:normal;font-weight:700;color:var(--on-brand);background:var(--brand);border-radius:99px;padding:4px 14px;font-size:.85rem;justify-self:start;margin-top:4px}
.ad-tag{position:absolute;top:4px;right:10px;font-size:.68rem;color:var(--mut)}
.ad-img{padding:0;background:var(--card)}.ad-img img{width:100%;max-width:none;height:auto;max-height:200px;border-radius:0}
@media(max-width:560px){.ad{flex-direction:column;align-items:flex-start}.ad img{width:100%;max-width:none;height:130px}}

.notify-chk{display:flex;gap:8px;align-items:flex-start;margin:4px 0 12px;font-size:.92rem;cursor:pointer}.notify-chk input{margin-top:4px}

/* Détail du calcul (récapitulatif et page Nos tarifs) */
.calc{margin:10px 0 0;font-size:.88rem}
.calc summary{cursor:pointer;color:var(--brand);font-weight:600}
.calc>div{margin:8px 0;border:1px solid var(--line);border-radius:10px;padding:4px 10px}
.calc .cl,.calc .cl-file{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .cl-file span{grid-column:1;color:var(--mut);font-size:.82rem}
.calc .cl-file b{grid-column:1}.calc .cl-file em{grid-column:2;grid-row:1/3;align-self:center}
.calc em{font-style:normal;font-weight:600;white-space:nowrap}
.calc .disc em{color:var(--ok,#1a7f37)}
.calc .tot{border-bottom:0;font-weight:700;font-size:1rem}
/* Page Nos tarifs */
.tarifs{margin:22px 0 50px;max-width:860px}.tarifs h1{font-size:1.6rem;margin:0 0 6px}.tarifs h2{font-size:1.1rem;margin:26px 0 8px}
.tarifs .lead{color:var(--mut);margin:0 0 6px;line-height:1.5}
.tarifs .tbl-wrap{overflow-x:auto}.tarifs .tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tarifs .tbl th,.tarifs .tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tarifs .tbl thead th{font-size:.78rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.tarifs .tbl tbody th{font-weight:600}.tarifs .tbl small{display:block;color:var(--mut);font-weight:400;font-size:.82rem}
.tarifs .tbl td{white-space:nowrap;font-weight:600}.tarifs .tbl td small{white-space:normal}
.tarifs .note{color:var(--mut);font-size:.88rem;margin:8px 0}
.tarifs .plain{padding-left:18px;line-height:1.7;margin:0}
.est{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:10px 0}
.est label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--mut)}
.est input,.est select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg,inherit);min-height:44px}
.tarifs .calc>div{font-size:.95rem}
/* Aide : bouton WhatsApp flottant + FAQ */
.wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:#128c4a;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.28);min-height:48px}
.wa-fab:hover,.wa-fab:focus-visible{background:#0e6f3a;color:#fff;outline:3px solid #fff;outline-offset:-5px}
@media (max-width:520px){.wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.wa-fab{padding:14px}}
@media print{.wa-fab{display:none}}
.faq{margin:22px 0 80px;max-width:760px}.faq h1{font-size:1.5rem;margin:0 0 12px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;line-height:1.4}
.faq .ans{padding:0 0 12px;line-height:1.6;color:var(--fg,inherit)}.faq .ans p{margin:0 0 8px}.faq .ans ul{margin:0 0 8px;padding-left:20px}
.faq-more{margin-top:18px}