/* =====================================================================
   COMMANDE CSE + ESPACE ÉQUIPE
   S'appuie sur les jetons de site.css (navy, or, crème, --bg, --alt…).
   Mobile d'abord : chaque bloc est pensé à 360 px puis élargi.
   ===================================================================== */
:root{
  --card:#FFFFFF; --field:#FFFFFF; --soft:#F3EEE6; --shadow:rgba(15,36,88,.14);
  --err:#A12C2C; --ok:#24774A; --warn:#A35A12; --mid:#2A4A9C;
  --st-recue:#B4532A; --st-prise:#2A4A9C; --st-prepa:#8A6A3E; --st-prete:#24774A; --st-retiree:#5E6782; --st-annulee:#9B2C2C;
  --price:#0F2458; --save:#8A6A3E;
  --r:6px; --gap:clamp(14px,2.4vw,22px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --card:#13295F; --field:#0E214F; --soft:#1A3270; --shadow:rgba(0,0,0,.45);
    --err:#F4A6A6; --ok:#8BD6A8; --warn:#F2BE7C; --mid:#A9BDF5;
    --st-recue:#F0A07A; --st-prise:#A9BDF5; --st-prepa:#E2C08F; --st-prete:#8BD6A8; --st-retiree:#B4BCD3; --st-annulee:#F4A6A6;
    --price:#F3EBDD; --save:#E2C08F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --card:#13295F; --field:#0E214F; --soft:#1A3270; --shadow:rgba(0,0,0,.45);
  --err:#F4A6A6; --ok:#8BD6A8; --warn:#F2BE7C; --mid:#A9BDF5;
  --st-recue:#F0A07A; --st-prise:#A9BDF5; --st-prepa:#E2C08F; --st-prete:#8BD6A8; --st-retiree:#B4BCD3; --st-annulee:#F4A6A6;
  --price:#F3EBDD; --save:#E2C08F; color-scheme:dark;
}

/* ---------- Bases communes ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.order-page,.staff-page{overflow-x:clip}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;text-align:left}
.linkish:hover{color:var(--gold-dark)}
.linkish.danger{color:var(--err);text-decoration-color:currentColor}
.err{margin:0;color:var(--err);font-size:.92rem;font-weight:500}
.small{font-size:.86rem;color:var(--muted);margin:0}
.hint{color:var(--muted);margin:0 0 20px;max-width:70ch}
.btn{cursor:pointer;font-family:inherit;text-align:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{padding:9px 16px;font-size:.86rem}
.btn.wide{width:100%}
.btn > span{position:relative;z-index:2}
.btn.busy > span{visibility:hidden}
.btn.busy::before{content:"";position:absolute;inset:50% auto auto 50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;transform:none;background:none;animation:spin .7s linear infinite;z-index:3}
@keyframes spin{to{rotate:360deg}}
/* Boutons « line » lisibles sur fond clair comme sombre */
.order-page .btn.line,.staff-page .btn.line{color:var(--ink);border-color:color-mix(in oklab,var(--ink) 55%,transparent)}
.order-page .btn.line::after,.staff-page .btn.line::after{background:var(--ink)}
@media (hover:hover){.order-page .btn.line:hover,.staff-page .btn.line:hover{color:var(--bg);border-color:var(--ink)}}
.btn.gold{color:var(--navy)}
body.noscroll{overflow:hidden}
input,select,textarea{font:inherit}
.order-page :is(input,select,textarea):focus-visible,.staff-page :is(input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}

/* Interrupteur (corrigé : la piste ne peut plus être écrasée par un style de label) */
label.switch{display:inline-flex!important;align-items:center;gap:12px;cursor:pointer;font-size:.95rem;color:var(--ink);font-weight:500;margin:0!important;position:relative;min-height:28px}
label.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
label.switch .sw{position:relative;display:inline-block;flex:none;width:46px;height:26px;border-radius:999px;background:color-mix(in oklab,var(--muted) 45%,transparent);transition:background .3s}
label.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
label.switch input:checked + .sw{background:var(--ok)}
label.switch input:checked + .sw::after{transform:translateX(20px)}
label.switch input:focus-visible + .sw{outline:3px solid var(--gold);outline-offset:2px}
label.switch .swt{line-height:1.3}
label.switch.sm{font-size:.86rem;font-weight:400;gap:10px}
label.switch.sm .sw{width:40px;height:22px}label.switch.sm .sw::after{width:16px;height:16px}label.switch.sm input:checked + .sw::after{transform:translateX(18px)}

/* Lien « Commande CSE » dans la navigation */
header.site nav a.nav-order{border:1px solid rgba(213,180,137,.7);padding:6px 14px;border-radius:999px;color:var(--gold)}
header.site nav a.nav-order[aria-current="page"]::before{content:none}
header.site nav a.nav-order:hover{transform:scale(1.08)}
@media (min-width:1080px) and (max-width:1219px){header.site nav ul{gap:14px}header.site nav a{font-size:.85rem;letter-spacing:.02em}}

.demo-ribbon{margin:0;background:var(--gold);color:var(--navy);font-size:.82rem;font-weight:500;padding:7px 16px;text-align:center}

/* =====================================================================
   PAGE COMMANDE
   ===================================================================== */
.order-hero .grid{align-items:start}
@media (min-width:900px){.order-hero .grid{grid-template-columns:1.05fr 1fr}}
.flow{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;max-width:520px}
@media (min-width:560px){.flow{display:flex;flex-wrap:wrap;gap:12px 24px}}
.flow li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--muted);transition:color .4s;min-width:0}
.flow .n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--muted) 45%,transparent);font-weight:500;font-size:.88rem;transition:background .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.flow li.on{color:var(--ink);font-weight:500}
.flow li.on .n{background:var(--navy);border-color:var(--gold);color:var(--gold);transform:scale(1.1)}
.flow li.done .n{background:var(--gold);border-color:var(--gold);color:var(--navy);font-size:0}
.flow li.done .n::before{content:"✓";font-size:.9rem}

.gate,.welcome{background:var(--card);border:1px solid var(--line);padding:clamp(22px,4vw,32px);display:grid;gap:14px;box-shadow:0 30px 60px -40px var(--shadow);position:relative;border-radius:var(--r)}
.gate h2,.welcome h2{font-size:clamp(1.3rem,3vw,1.5rem);font-weight:500}
.gate p,.welcome p{margin:0;color:var(--muted)}
.gate input{width:100%;font-size:1.15rem;font-weight:500;letter-spacing:.1em;text-align:center;color:var(--ink);background:var(--field);border:1px solid var(--line);padding:12px;height:58px;border-radius:var(--r)}
.gate input::placeholder{letter-spacing:.05em;font-size:.9rem;font-weight:400;color:var(--muted)}
.gate .btn{width:100%}
.demo-hint{font-size:.88rem;text-align:center}
.lock{width:44px;height:52px;color:var(--navy)}
.lock svg{width:100%;height:100%;overflow:visible}
.lock .hole{fill:var(--gold)}
.lock .shackle{transform-origin:34px 24px;transition:transform .55s cubic-bezier(.5,-0.4,.3,1.6)}
.gate.unlocking .lock .shackle{transform:translateY(-6px) rotate(32deg)}
.gate.unlocking{animation:gateOut .65s .2s cubic-bezier(.6,0,.4,1) both}
@keyframes gateOut{to{opacity:0;transform:translateY(-12px) scale(.97)}}
.gate.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lock{color:var(--gold)}:root:not([data-theme="light"]) .lock .hole{fill:var(--navy)}}
:root[data-theme="dark"] .lock{color:var(--gold)} :root[data-theme="dark"] .lock .hole{fill:var(--navy)}

.welcome{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.welcome .badge{justify-self:start;margin:0}
.welcome.closed .badge{background:var(--err);color:var(--bg)}
.welcome h2 span{color:var(--gold-dark)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .welcome h2 span{color:var(--gold)}}
:root[data-theme="dark"] .welcome h2 span{color:var(--gold)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perks li{position:relative;padding-left:26px;color:var(--text);font-size:.95rem}
.perks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.perks strong{color:var(--ink)}
.countdown{display:flex;align-items:center;gap:16px;border-left:3px solid var(--gold);background:var(--alt);padding:12px 16px;border-radius:0 var(--r) var(--r) 0}
.cd-day{font-size:2.4rem;font-weight:500;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;min-width:2ch}
.cd-txt{display:grid;font-size:.9rem;color:var(--muted)}
.cd-txt strong{color:var(--ink);font-weight:500;font-size:1rem}
.welcome .cta-row{margin-top:4px}
@media (max-width:600px){.welcome .cta-row .btn{flex:1 1 100%}}

/* Aperçu avant connexion */
.teaser .vitrine{margin-top:0}
.teaser .vitrine img{height:clamp(84px,14vw,120px)}
.terms{list-style:none;margin:48px auto 0;padding:0;display:grid;gap:22px;max-width:980px}
@media (min-width:760px){.terms{grid-template-columns:repeat(3,1fr)}}
.terms li{border-top:2px solid var(--gold);padding-top:14px;color:var(--muted);font-size:.95rem}
.terms strong{display:block;color:var(--ink);font-weight:700;font-size:1.02rem;margin-bottom:2px}

/* ---------- Catalogue ---------- */
.catalogue-cse{padding-bottom:150px}
.cat-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 16px;margin:-12px -16px 20px;background:var(--bg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
@media (min-width:760px){.cat-nav{margin:-12px 0 24px;padding:12px 0;-webkit-mask-image:none;mask-image:none}}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--gold);color:var(--ink);font-weight:500;font-size:.9rem;padding:7px 15px;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.cat-nav a.on,.cat-nav a:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cat-nav .cn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:.76rem;font-weight:700}
.cat-nav .cn:empty{display:none}
.cat{scroll-margin-top:150px;padding-top:28px}
.cat + .cat{margin-top:32px;border-top:1px solid var(--line)}
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-bottom:20px}
.cat-head h3{font-size:clamp(1.3rem,3vw,1.6rem);font-weight:500}
.cat-head p{margin:0;color:var(--muted);font-size:.95rem}
.pgrid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media (max-width:560px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .35s,box-shadow .45s,transform .45s cubic-bezier(.3,1.4,.5,1);min-width:0}
.pcard.sel{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 20px 40px -30px var(--shadow)}
@media (hover:hover){.pcard:not(.soldout):hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px var(--shadow)}}
.pstage{position:relative;height:clamp(130px,22vw,170px);display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 60% at 50% 48%,color-mix(in oklab,var(--gold) 30%,var(--alt)) 0%,var(--alt) 75%)}
.pstage img{max-height:76%;max-width:76%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(15,36,88,.28));transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover){.pcard:not(.soldout):hover .pstage img{transform:translateY(-6px) rotate(-4deg) scale(1.05)}}
.ptag{position:absolute;left:10px;top:10px;background:var(--gold);color:var(--navy);font-weight:700;font-size:.78rem;padding:3px 8px;border-radius:999px}
.pq{position:absolute;top:10px;right:10px;min-width:38px;padding:3px 10px;border-radius:999px;background:var(--navy);color:var(--gold);font-weight:700;font-size:.88rem;text-align:center;font-variant-numeric:tabular-nums;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.pcard.sel .pq{transform:scale(1)}
.pcard.soldout .pstage img{filter:grayscale(1) opacity(.5)}
.sold{position:absolute;inset:auto 0 14px;margin:auto;width:max-content;background:var(--ink);color:var(--bg);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;rotate:-4deg}
.pbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pbody h4{margin:0;font-size:1rem;font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.pdet{margin:0;font-size:.85rem;color:var(--muted)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:8px}
.price .now{font-size:1.25rem;font-weight:700;color:var(--price);font-variant-numeric:tabular-nums}
.price s{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}
.price .off{font-size:.78rem;font-weight:700;color:var(--save)}
.pact{margin-top:auto;padding-top:12px}
.add{width:100%;height:44px;font-weight:500;font-size:.92rem;letter-spacing:.03em;color:var(--ink);background:none;border:1.5px solid var(--gold);border-radius:var(--r);cursor:pointer;transition:background .3s,color .3s}
.add:hover:not([disabled]){background:var(--gold);color:var(--navy)}
.add[disabled]{border-color:var(--line);color:var(--muted);cursor:not-allowed}
.pcard .stepper{display:none}
.pcard.sel .add{display:none}
.pcard.sel .stepper{display:flex}
.stepper{display:flex;align-items:stretch;height:44px;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--field)}
.stepper button{flex:none;width:44px;border:0;background:var(--ink);color:var(--bg);font-size:1.3rem;line-height:1;cursor:pointer;transition:opacity .25s}
.stepper button:hover{opacity:.85}
.stepper input{flex:1;min-width:0;width:100%;border:0;text-align:center;font-weight:700;font-size:1.05rem;color:var(--ink);background:transparent;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.sm{height:36px;width:112px;border-width:1px}
.stepper.sm button{width:34px;font-size:1.1rem}
/* Entrée en cascade : état visible par défaut, animation seulement si le script l'active */
.cat.pre .pcard{opacity:0;transform:translateY(24px)}
.cat.in .pcard{animation:cardIn .7s cubic-bezier(.2,.8,.2,1) var(--d) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cat.pre .pcard{opacity:1;transform:none}.cat.in .pcard{animation:none}}

/* ---------- Barre panier ---------- */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none;transform:translateY(130%);transition:transform .6s cubic-bezier(.2,.9,.25,1.1)}
.cartbar.up{transform:none}
.cartbar-in{pointer-events:auto;max-width:880px;margin:0 auto;display:flex;align-items:center;gap:14px;background:var(--navy);color:#DCE1EE;padding:10px 10px 10px 12px;box-shadow:0 24px 50px -18px rgba(5,13,36,.6);border:1px solid rgba(213,180,137,.35);border-radius:calc(var(--r) + 4px)}
.cart-ic{position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(213,180,137,.6);background:none;color:var(--gold);cursor:pointer;display:grid;place-items:center}
.cart-ic svg{width:24px;height:24px}
.cart-ic .count{position:absolute;top:-4px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:.76rem;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.count.bump{animation:bump .55s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
.cartbar-txt{flex:1;min-width:0;display:grid;line-height:1.3}
.cartbar-txt strong{color:#fff;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.cartbar-txt span{font-size:.84rem;color:#B7C0D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartbar .btn{flex:none;padding:13px 22px;border-radius:var(--r)}
@media (max-width:480px){.cartbar-in{gap:10px}.cartbar .btn{padding:12px 14px;font-size:.86rem}.cart-ic{width:44px;height:44px}}
.flyer{position:fixed;z-index:60;pointer-events:none;display:grid;place-items:center}
.flyer img{max-width:100%;max-height:100%;filter:drop-shadow(0 10px 12px rgba(15,36,88,.35))}

/* ---------- Panneau latéral ---------- */
.drawer-bg{position:fixed;inset:0;z-index:70;background:rgba(5,13,36,.55);opacity:0;transition:opacity .35s}
.drawer-bg.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(540px,100%);background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px);transform:translateX(105%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.85,.25,1),visibility 0s .5s;box-shadow:-30px 0 60px -30px rgba(5,13,36,.5)}
.drawer.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.85,.25,1),visibility 0s}
.drawer-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;background:var(--navy);color:#fff}
.drawer-top .dt{flex:1;min-width:0}
.drawer-top h2{color:#fff;font-size:1.25rem;font-weight:500}
.dstep{display:block;color:var(--gold);font-size:.78rem;letter-spacing:.06em;margin-bottom:2px}
.x,.back{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .4s,background .3s,color .3s}
.x svg,.back svg{width:18px;height:18px}
.x:hover{background:var(--gold);color:var(--navy);transform:rotate(90deg)}
.back:hover{background:var(--gold);color:var(--navy)}
.pane{display:flex;flex-direction:column;gap:18px;padding:20px clamp(16px,4vw,26px) 26px;flex:1;animation:paneIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){.pane{animation:none}}
.pane-foot{margin-top:auto;display:grid;gap:14px;padding-top:8px}
.lines{list-style:none;margin:0;padding:0;display:grid}
.lines li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"img name rm" "img qty qty";align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
@media (min-width:460px){.lines li{grid-template-columns:56px minmax(0,1fr) auto auto;grid-template-areas:"img name qty rm"}}
.lt{grid-area:img;width:52px;height:52px;display:grid;place-items:center;background:var(--alt);border-radius:var(--r)}
.lt img{max-width:42px;max-height:44px}
.ln{grid-area:name;min-width:0;display:grid;line-height:1.35}
.ln strong{color:var(--ink);font-weight:500;font-size:.95rem}
.ln small{color:var(--muted);font-size:.82rem}
.ln small s{opacity:.8}
.lq{grid-area:qty;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lsum{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
.rm{grid-area:rm;width:32px;height:32px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:50%}
.rm svg{width:16px;height:16px}
.rm:hover{color:var(--err);background:var(--alt)}
.empty{margin:0;color:var(--muted);text-align:center;padding:30px 0}
.sum{margin:0;display:grid;gap:6px;border-top:2px solid var(--gold);padding-top:12px}
.sum > div{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}
.sum dt{color:var(--muted)}
.sum dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.sum .save dd,.sum .save dt{color:var(--save)}
.sum .tot{margin-top:4px}
.sum .tot dt{color:var(--ink);font-weight:700;font-size:1.05rem}
.sum .tot dd{font-weight:700;font-size:1.4rem}

/* Modes de récupération */
.modes{border:0;margin:0;padding:0;display:grid;gap:12px}
.mode{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .3s,box-shadow .3s,background .3s}
.mode input{position:absolute;opacity:0;pointer-events:none}
.mode:hover:not(.dis){border-color:var(--gold)}
.mode.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:color-mix(in oklab,var(--gold) 8%,var(--card))}
.mode:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.mode.dis{cursor:not-allowed;opacity:.6}
.mi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--alt);color:var(--ink);transition:background .3s,color .3s}
.mi svg{width:24px;height:24px}
.mode.on .mi{background:var(--ink);color:var(--bg)}
.mt{min-width:0;display:grid;gap:2px}
.mt strong{color:var(--ink);font-size:1rem}
.mt span{color:var(--muted);font-size:.86rem;line-height:1.4}
.mp{font-weight:700;color:var(--ink);font-size:.9rem;white-space:nowrap}
.mode.on::after{content:"";position:absolute;right:-1px;top:-1px;width:26px;height:26px;background:var(--gold);border-radius:0 var(--r) 0 var(--r);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M0 0h26v26z'/%3E%3C/svg%3E")}
@media (max-width:420px){.mode{grid-template-columns:40px minmax(0,1fr);padding:14px}.mi{width:40px;height:40px}.mp{grid-column:2}}
.addr{display:grid;gap:10px;animation:paneIn .35s}
.addr > label{font-size:.9rem;font-weight:500;color:var(--ink)}
.acw{position:relative}
.acw input{width:100%;height:50px;padding:0 14px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r)}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;list-style:none;margin:0;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 40px -20px var(--shadow);max-height:260px;overflow-y:auto}
.ac-list li{padding:10px 12px;border-radius:4px;cursor:pointer;font-size:.92rem;color:var(--text)}
.ac-list li:hover,.ac-list li.hl{background:var(--alt);color:var(--ink)}
.ac-list li.none{cursor:default;color:var(--muted)}
.zone-res{margin:0;padding:10px 14px;border-radius:var(--r);font-size:.9rem;font-weight:500}
.zone-res.ok{background:color-mix(in oklab,var(--ok) 14%,transparent);color:var(--ok)}
.zone-res.bad{background:color-mix(in oklab,var(--err) 12%,transparent);color:var(--err)}
.zones{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.zones caption{text-align:left;color:var(--muted);font-size:.8rem;padding-bottom:6px}
.zones th,.zones td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;color:var(--text)}
.zones td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.zones tr.on{background:color-mix(in oklab,var(--gold) 18%,transparent)}
.zones tr.on th{color:var(--ink)}

/* Formulaire */
.recap-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--alt);border-left:3px solid var(--gold);padding:12px 14px;font-size:.9rem;border-radius:0 var(--r) var(--r) 0}
.recap-mini span{min-width:0;overflow-wrap:anywhere}
.fields{display:grid;gap:14px}
@media (min-width:460px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.fields > div{min-width:0}
.fields label{display:block;font-size:.9rem;font-weight:500;color:var(--ink);margin-bottom:6px}
.fields .opt{font-weight:400;color:var(--muted);font-size:.8rem}
.fields input,.fields textarea{width:100%;color:var(--text);background:var(--field);border:1px solid var(--line);padding:12px 14px;border-radius:var(--r)}
.fields input{height:50px}
.fields small{display:block;margin-top:6px;font-size:.8rem;color:var(--muted)}
.fields .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.fields .check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem}
.fields .check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--gold-dark)}
.fields .check label{margin:0;font-weight:400;color:var(--text)}
.pays{border:0;margin:0;padding:0;display:grid;gap:10px}
.pays legend{font-size:.9rem;font-weight:500;color:var(--ink);margin-bottom:8px;padding:0}
.pay{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .3s}
.pay:has(input:checked){border-color:var(--gold);background:color-mix(in oklab,var(--gold) 8%,var(--card))}
.pay input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold-dark)}
.pay span{display:grid;gap:2px;min-width:0}
.pay strong{color:var(--ink);font-size:.95rem}
.pay small{color:var(--muted);font-size:.84rem}
.pay-note{margin:0;font-size:.88rem;color:var(--muted);background:var(--alt);padding:10px 14px;border-radius:var(--r)}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:.8rem;color:var(--muted);text-align:center}
.secure svg{width:16px;height:16px;flex:none}

.done{text-align:center;align-items:center}
.done h3{font-size:1.6rem;font-weight:500}
.done p{margin:0}
.done .num{font-size:1.05rem;color:var(--muted)}
.done .num strong{color:var(--ink);letter-spacing:.06em}
.seal{width:110px;height:110px}
.seal svg{width:100%;height:100%;overflow:visible}
.seal .ring{fill:none;stroke:var(--gold);stroke-width:4;stroke-dasharray:327;stroke-dashoffset:327;transform:rotate(-90deg);transform-origin:center}
.seal .tick{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70}
.seal.go .ring{animation:draw .9s cubic-bezier(.6,0,.2,1) forwards}
.seal.go .tick{animation:draw .5s .75s cubic-bezier(.3,1.4,.5,1) forwards}
.seal.go{animation:sealPop .6s 1.1s cubic-bezier(.3,1.6,.5,1)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sealPop{50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.seal .ring,.seal .tick{stroke-dashoffset:0;animation:none}}
.next{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:10px;text-align:left;width:100%}
.next li{background:var(--alt);padding:12px 16px;font-size:.92rem;color:var(--muted);border-radius:var(--r)}
.next strong{display:block;color:var(--ink);font-weight:500}

/* =====================================================================
   ESPACE ÉQUIPE
   ===================================================================== */
.staff-hero{padding-bottom:36px}
.staff-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px}
.st-text{min-width:0;flex:1 1 320px}
.staff-top .lead{margin-bottom:0}
.staff-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sync{font-size:.85rem;color:var(--muted);width:100%}
@media (min-width:600px){.sync{width:auto}}
.staff-gate{max-width:420px;margin:28px 0 0}
.kpis{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis li:last-child{grid-column:1/-1}
@media (min-width:760px){.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.kpis li:last-child{grid-column:auto}}
.kpi{width:100%;height:100%;text-align:left;display:grid;align-content:start;gap:6px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:var(--r);cursor:pointer;color:var(--text);transition:transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px var(--shadow)}
.kpi.on{box-shadow:inset 0 0 0 2px var(--c)}
.kn{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:500;line-height:1;color:var(--c);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kl{font-size:.85rem;color:var(--muted);line-height:1.3}
.k-recue{--c:var(--st-recue)}.k-prepa{--c:var(--st-prepa)}.k-prete{--c:var(--st-prete)}.k-warn{--c:var(--warn)}.k-money{--c:var(--ink)}

section.staff-main{padding-top:36px}
.tabs-bar{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 -16px 26px;padding:0 16px;scroll-margin-top:90px}
@media (min-width:760px){.tabs-bar{margin:0 0 28px;padding:0}}
.tabs-bar::-webkit-scrollbar{display:none}
.tabs-bar button{flex:none;font-weight:500;font-size:.95rem;color:var(--muted);background:none;border:0;padding:12px 14px;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:8px}
.tabs-bar button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .35s cubic-bezier(.7,0,.3,1)}
.tabs-bar button[aria-selected="true"]{color:var(--ink)}
.tabs-bar button[aria-selected="true"]::after{transform:none}
.tc{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:.75rem;font-weight:700}
.tc:empty{display:none}
.panel{animation:paneIn .35s}

.toolbar{display:grid;gap:10px;margin-bottom:12px}
@media (min-width:760px){.toolbar{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
.toolbar input,.toolbar select,.prep-f select{width:100%;color:var(--text);background:var(--field);border:1px solid var(--line);height:46px;padding:0 12px;border-radius:var(--r);min-width:0}
.chips-f{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:2px 16px 6px}
@media (min-width:760px){.chips-f{flex-wrap:wrap;margin:0 0 6px;padding:2px 0 6px}}
.chips-f::-webkit-scrollbar{display:none}
.chips-f button{flex:none;font-size:.85rem;font-weight:500;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.chips-f button:hover{border-color:var(--gold)}
.chips-f button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.list-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;margin:6px 0 12px}
.list-info{font-size:.85rem;color:var(--muted);margin:0}
.list-head .linkish{font-size:.88rem}

/* Cartes commande */
.orders{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.orders.enter .ocard{animation:cardIn .6s cubic-bezier(.2,.8,.2,1) var(--d) both}
.ocard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r);transition:box-shadow .3s,opacity .3s;min-width:0}
.st-recue{--c:var(--st-recue)}.st-prise{--c:var(--st-prise)}.st-prepa{--c:var(--st-prepa)}.st-prete{--c:var(--st-prete)}.st-retiree{--c:var(--st-retiree)}.st-annulee{--c:var(--st-annulee)}
.ocard.saving{opacity:.55;pointer-events:none}
.ocard.just{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.ocard.open{box-shadow:0 20px 40px -30px var(--shadow)}
.ocard.st-annulee{opacity:.75}
.o-head{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;grid-template-areas:"id pill tog" "who n n" "tags tags tags";align-items:center;gap:8px 12px;padding:14px 14px 8px;cursor:pointer}
@media (min-width:980px){.o-head{grid-template-columns:118px minmax(0,1.2fr) minmax(0,1.3fr) 100px 140px 36px;grid-template-areas:"id who tags n pill tog";gap:14px;padding:14px 16px 8px}}
.o-head>*{min-width:0}
.o-id{grid-area:id}.o-who{grid-area:who}.o-tags{grid-area:tags}.o-n{grid-area:n}.pill{grid-area:pill}.o-toggle{grid-area:tog}
.o-id strong,.o-who strong{display:block;color:var(--ink);font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.o-id strong{letter-spacing:.04em}
.o-id span,.o-who span{display:block;font-size:.82rem;color:var(--muted)}
.o-tags{display:flex;flex-wrap:wrap;gap:6px}
.mb,.pb{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.4}
.mb{background:var(--alt);color:var(--ink)}
.mb svg{width:14px;height:14px}
.pb{border:1px solid currentColor}
.pb.ok{color:var(--ok)}.pb.warn{color:var(--warn)}.pb.bad{color:var(--err)}.pb.wait{color:var(--muted)}
.o-n{text-align:right;line-height:1.15}
.o-n strong{display:block;font-size:1.1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.o-n span{font-size:.78rem;color:var(--muted)}
.pill{justify-self:start;font-size:.8rem;font-weight:700;color:var(--c);border:1px solid currentColor;border-radius:999px;padding:3px 10px;white-space:nowrap}
@media (max-width:979px){.pill{justify-self:end}}
.o-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.o-toggle svg{width:18px;height:18px;transition:transform .35s}
.ocard.open .o-toggle svg{transform:rotate(180deg)}
.o-warn{margin:0 14px 6px;padding:8px 12px;border-radius:var(--r);background:color-mix(in oklab,var(--warn) 14%,transparent);color:var(--warn);font-size:.86rem;font-weight:500}
.modal .o-warn{margin:8px 0 0}
.o-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:4px 14px 14px}
@media (min-width:980px){.o-act{padding:4px 16px 14px}}
.o-track{display:flex;align-items:center;flex:1 1 460px;min-width:0}
.o-track .bar{flex:1 1 14px;min-width:8px;height:2px;background:var(--line);position:relative;overflow:hidden}
.o-track .bar::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.3,1)}
.o-track .tstep.done + .bar::after{transform:none}
.tstep{flex:none;display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:500;color:var(--muted);background:none;border:0;padding:6px;cursor:pointer;border-radius:999px;transition:color .3s,background .3s}
.tstep:hover{background:var(--alt);color:var(--ink)}
.tstep .dot{width:24px;height:24px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--muted) 50%,transparent);display:grid;place-items:center;transition:background .35s,border-color .35s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.tstep .dot svg{width:14px;height:14px;fill:none;stroke:var(--card);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s .1s}
.tstep.done{color:var(--ink)}
.tstep.done .dot{background:var(--c);border-color:var(--c)}
.tstep.done .dot svg{stroke-dashoffset:0}
.tstep.cur .dot{transform:scale(1.12)}
@media (max-width:640px){.o-track{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;flex-basis:100%}.o-track .bar{display:none}.tstep{font-size:.82rem}}
.cancelled{margin:0;color:var(--st-annulee);font-weight:500;font-size:.9rem}
.o-act .btn.nxt{border-radius:var(--r);white-space:nowrap}
@media (max-width:640px){.o-act .btn.nxt{width:100%;padding:12px 16px}}
.done-tag{font-size:.85rem;font-weight:700;color:var(--st-retiree)}
.o-detail{border-top:1px solid var(--line);padding:16px 14px 18px;animation:paneIn .35s}
@media (min-width:980px){.o-detail{padding:18px 16px 20px}}
.o-cols{display:grid;gap:22px}
@media (min-width:980px){.o-cols{grid-template-columns:1.4fr 1fr}}
.o-cols>*{min-width:0}
.o-side{display:grid;gap:16px;align-content:start;font-size:.92rem}
.o-side strong{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.o-side p{margin:0 0 8px;color:var(--muted);overflow-wrap:anywhere}
.o-side a{color:var(--text)}
.o-note{background:var(--alt);border-left:3px solid var(--gold);padding:12px 14px;border-radius:0 var(--r) var(--r) 0}
.o-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:4px}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hist li{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.85rem;border-bottom:1px dashed var(--line);padding:4px 0}

/* Tableaux */
.table-scroll{overflow-x:auto;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.table-scroll.flat{background:none}
table.it,table.prep,table.homes{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
:is(table.it,table.prep,table.homes) :is(th,td){text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
:is(table.it,table.prep,table.homes) thead th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
:is(table.it,table.prep,table.homes) .q{text-align:center;width:70px}
table.it .r{text-align:right;white-space:nowrap}
table.it .b{font-weight:700;color:var(--ink)}
table.prep td.q{font-weight:700;color:var(--ink);font-size:1.05rem}
table.it tfoot td,table.it tfoot th{border-bottom:0;color:var(--text)}
table.it tfoot tr:first-child td{border-top:2px solid var(--gold)}
table.it tr.tt th{color:var(--ink);font-weight:700;font-size:1rem}
tr.cat-r th{background:var(--alt);color:var(--save);font-weight:500;font-size:.82rem;letter-spacing:.04em}
:is(table.it,table.prep,table.homes) small{color:var(--muted);font-size:.78rem;display:inline}
table.homes small{display:block}
table.prep tfoot th{border-top:2px solid var(--gold);border-bottom:0;color:var(--ink);font-weight:700}
.none{padding:32px 20px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.none strong{display:block;color:var(--ink);font-weight:500}
.none p{margin:6px 0 0}
td.none{border:0;border-radius:0}

.prep-head{display:grid;gap:12px;margin-bottom:16px}
@media (min-width:860px){.prep-head{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.prep-head p{margin:0;color:var(--muted);max-width:62ch}
.prep-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prep-f select{width:auto;flex:1 1 180px}
td.barc,th.barc{width:38%}
td.barc span{display:block;height:10px;width:var(--w);background:linear-gradient(to right,var(--color-gold-dark),var(--color-gold-light));border-radius:0 5px 5px 0;animation:grow .9s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{width:0}}
@media (max-width:620px){td.barc,th.barc{display:none}}

/* Livraisons */
.ph3{font-size:1.2rem;font-weight:500;margin:0 0 6px}
.ph3-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:40px 0 14px}
.ph3-row .ph3{margin:0}
.row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.deliv-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px;align-content:start}
.dc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.dc-top h4{margin:0;font-size:1.1rem;color:var(--ink)}
.dc-date{margin:0;color:var(--muted);font-size:.92rem}
.dc-date strong{color:var(--ink)}
.dc-stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--muted)}
.dc-stats strong{color:var(--ink);font-size:1.1rem}
.meter{height:8px;border-radius:999px;background:var(--alt);overflow:hidden}
.meter span{display:block;height:100%;width:var(--w);background:var(--ok);border-radius:999px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.warn-t{color:var(--warn)}
.zb{display:inline-block;font-size:.78rem;font-weight:700;color:var(--navy);background:var(--gold);padding:2px 8px;border-radius:999px;white-space:nowrap}

/* Articles */
.arts{display:grid;gap:26px}
.art-cat h4{margin:0 0 10px;font-size:1rem;color:var(--save);font-weight:500;letter-spacing:.03em}
.art{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"img name name" "img f1 f2" "img ac sw";align-items:center;gap:8px 14px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;transition:opacity .3s,border-color .3s}
@media (min-width:860px){.art{grid-template-columns:52px minmax(0,1fr) 130px 110px 120px 150px;grid-template-areas:"img name f1 f2 ac sw"}}
.art.off{opacity:.62}
.art.saving{opacity:.5;pointer-events:none}
.art.flash{animation:rowIn 1.4s ease}
.ai{grid-area:img;width:48px;height:48px;display:grid;place-items:center;background:var(--alt);border-radius:var(--r)}
.ai img{max-width:40px;max-height:42px}
.an{grid-area:name;min-width:0;display:grid}
.an strong{color:var(--ink);font-size:.95rem}
.an small{color:var(--muted);font-size:.8rem}
.af{display:grid;gap:3px;font-size:.75rem;color:var(--muted)}
.af:nth-of-type(1){grid-area:f1}.af:nth-of-type(2){grid-area:f2}
.af input{width:100%;height:38px;padding:0 10px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r);font-variant-numeric:tabular-nums}
.apc{grid-area:ac;display:flex;align-items:baseline;gap:8px;font-size:.78rem;color:var(--muted)}
@media (min-width:860px){.apc{display:grid;gap:3px}}
.apc strong{font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.art label.switch{grid-area:sw;justify-self:end}
@keyframes rowIn{0%{background:color-mix(in oklab,var(--gold) 40%,var(--card))}100%{background:var(--card)}}

/* Entreprises */
.co-form{background:var(--alt);padding:clamp(16px,3vw,24px);margin-bottom:24px;display:grid;gap:16px;border-radius:var(--r);border:1.5px solid transparent;transition:border-color .3s;scroll-margin-top:100px}
.co-form.editing{border-color:var(--gold)}
.cf-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.cf-head h3{font-size:1.15rem;margin:0}
.cf-grid{display:grid;gap:14px}
@media (min-width:700px){.cf-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cf-grid{grid-template-columns:repeat(3,1fr)}}
.fld{display:grid;gap:6px;align-content:start;min-width:0;transition:opacity .3s}
.fld.dim{opacity:.45}
.fld > label,.fld > .lbl{font-size:.88rem;font-weight:500;color:var(--ink)}
.fld input:not([type="checkbox"]),.fld select{width:100%;height:46px;padding:0 12px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.sw-fld label.switch{min-height:46px}
.code-in{position:relative}
.code-in input{padding-right:84px!important;letter-spacing:.05em;font-weight:500}
.code-in .linkish{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.85rem}
.cf-foot{display:flex;justify-content:flex-start}
@media (max-width:600px){.cf-foot .btn{width:100%}}
.cos{display:grid;gap:12px}
.cocard{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
@media (min-width:980px){.cocard{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:20px}}
.cocard.off{opacity:.6}
.cocard.just{animation:rowIn 1.6s ease}
.cc-main h4{margin:0 0 4px;font-size:1.05rem;color:var(--ink);overflow-wrap:anywhere}
.cc-code{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cc-code .linkish{font-size:.88rem}
.cc-code code{font:500 .9rem/1 "Ubuntu",monospace;letter-spacing:.06em;color:var(--ink);background:var(--alt);padding:6px 9px;border-radius:4px}
.cc-facts{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:.88rem;color:var(--muted)}
.cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Réglages */
.settings{display:grid;gap:18px}
@media (min-width:900px){.settings{grid-template-columns:1fr 1fr}}
.set-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,24px);display:grid;gap:16px;align-content:start;min-width:0}
.set-card h3{font-size:1.15rem;margin:0}
.set-card p{margin:0;color:var(--muted)}
.set-card > .btn{justify-self:start}
@media (max-width:600px){.set-card > .btn{justify-self:stretch}}
.state{font-weight:500}
.state.ok{color:var(--ok)!important}.state.ko{color:var(--err)!important}.state.mid{color:var(--mid)!important}
.zone-grid{display:grid;gap:10px}
.zg{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:10px}
.zg label{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);min-width:0}
.zg input{width:100%;min-width:0;height:40px;padding:0 8px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r);font-variant-numeric:tabular-nums}
@media (max-width:420px){.zg{grid-template-columns:1fr 1fr}.zg .zb{grid-column:1/-1;justify-self:start}}
.set-card a{color:var(--ink)}

/* Fenêtre, message */
.modal-bg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(5,13,36,.6);opacity:0;transition:opacity .25s}
.modal-bg.on{opacity:1}
.modal{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--bg);border-top:4px solid var(--gold);border-radius:var(--r);padding:clamp(18px,4vw,26px);display:grid;gap:14px;transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.modal-bg.on .modal{transform:none}
.modal h3{font-size:1.25rem;font-weight:500}
.modal p{margin:0 0 8px}
.modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
@media (max-width:520px){.modal-foot .btn{flex:1 1 100%}}
.check-line{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:.92rem;color:var(--text);cursor:pointer}
.check-line input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold-dark)}
.mail-prev{border:1px solid var(--line);font-size:.9rem;background:var(--card);border-radius:var(--r);overflow:hidden}
.mp-h{display:flex;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}
.mp-h span{width:44px;flex:none;color:var(--muted)}
.mp-h strong{font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.mp-b{padding:12px 14px}
.mp-b p{margin:0 0 8px}
.mp-dim{color:var(--muted);font-style:italic}
.copybox{width:100%;font-size:.88rem;border:1px solid var(--line);padding:10px;background:var(--field);color:var(--text);border-radius:var(--r)}
.toast{visibility:hidden;opacity:0;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,140%);background:var(--navy);color:#fff;border-left:4px solid var(--gold);border-radius:var(--r);padding:12px 18px;font-size:.92rem;box-shadow:0 18px 40px -16px rgba(5,13,36,.6);transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s,visibility .45s}
.toast.on{visibility:visible;opacity:1;transform:translate(-50%,0)}
.toast.bad{border-left-color:#E07070}

/* Impressions (étiquettes, bons de livraison, feuille de route) */
#printArea{display:none}
@media print{
  body.print-mode > *:not(main),body.print-mode main > *:not(#printArea){display:none!important}
  body.print-mode #printArea{display:block!important;color:#000;background:#fff;font:11pt/1.4 "Ubuntu",Arial,sans-serif}
  body.print-mode{background:#fff!important}
  @page{size:A4;margin:12mm}
  .pr-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}
  .pr-head strong{display:block;font-size:14pt}.pr-head span{font-size:9pt}
  .pr-head h1{font-size:16pt;margin:0;text-align:right}.pr-head p{margin:2px 0 0;text-align:right;font-size:10pt}
  .pr-t{width:100%;border-collapse:collapse}
  .pr-t th,.pr-t td{border:1px solid #777;padding:5px 7px;vertical-align:top;text-align:left;font-size:10pt}
  .pr-t thead th{background:#eee}
  .pr-t .q{text-align:center}
  .pr-t .sig{width:22%}
  .pr-t tr{page-break-inside:avoid}
  .pr-t tr.cat-r th{background:#f3f3f3;color:#000}
  .pr-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
  .pr-sign div{border-top:1px solid #000;padding-top:6px;height:60px;font-size:10pt}
  .labels{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
  .label{border:1px dashed #555;padding:4mm 5mm;height:38mm;display:flex;flex-direction:column;gap:1mm;page-break-inside:avoid;overflow:hidden}
  .lb-top{display:flex;justify-content:space-between;font-size:10pt}
  .lb-name{font-size:15pt;font-weight:700;line-height:1.15}
  .lb-co{font-size:10pt;flex:1;overflow:hidden}
  .lb-foot{display:flex;justify-content:space-between;font-size:9pt;border-top:1px solid #999;padding-top:1mm}
}

/* Détail commande sur téléphone : prix unitaire sous le nom, tableau sans défilement */
.u-m{display:none}
@media (max-width:560px){
  table.it .pc{display:none}
  table.it .u-m{display:block;font-size:.8rem;color:var(--save);margin-top:2px}
  table.it td,table.it th{padding:8px 6px}
  table.it .q{width:44px}
  .tstep{text-align:left}
}

table.it tr.sv td{color:var(--save)}

/* Accès équipe depuis la page Commande CSE */
.staff-access{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 16px 10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);text-decoration:none;max-width:100%;transition:border-color .3s,transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.staff-access svg{width:22px;height:22px;flex:none;color:var(--gold-dark)}
.staff-access span{display:grid;line-height:1.3;font-size:.85rem;color:var(--muted);min-width:0}
.staff-access strong{color:var(--ink);font-size:.92rem}
.staff-access .arr{width:18px;height:18px;color:var(--ink);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.staff-access:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 28px -20px var(--shadow)}
.staff-access:hover .arr{transform:translateX(4px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .staff-access svg{color:var(--gold)}}
:root[data-theme="dark"] .staff-access svg{color:var(--gold)}

/* ---------- Page CGV ---------- */
.legal-page{padding-top:56px}
.legal-doc{max-width:820px}
.legal-doc .head{margin-bottom:32px}
.legal-doc h1{font-size:clamp(2rem,4.6vw,3rem)}
.legal-doc .toc{border:1px solid var(--line);background:var(--alt);padding:18px 22px;margin:0 0 40px}
.legal-doc .toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:32px;font-size:.95rem}
.legal-doc .toc li{break-inside:avoid;padding:3px 0}
.legal-doc .toc a,.legal-doc article a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.legal-doc article h2{font-size:1.35rem;font-weight:500;margin:40px 0 12px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:110px}
.legal-doc article h2:first-child{margin-top:0}
.legal-doc article p,.legal-doc article li{font-size:1rem;overflow-wrap:anywhere}
.legal-doc article p{margin:0 0 12px}
.legal-doc article ul,.legal-doc article ol{margin:0 0 12px;padding-left:1.3em}
.legal-doc article li{margin:4px 0}
@media (max-width:620px){.legal-doc .toc ol{columns:1}.legal-page{padding-top:32px}}
.fields .check label a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* Mail « prête » modifiable */
.mail-prev.editing{border-color:var(--gold)}
.mp-h .mp-in{flex:1;min-width:0;font:inherit;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:-4px 0}
.mp-ta{display:block;width:100%;box-sizing:border-box;font:inherit;line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:0 0 10px;resize:vertical;min-height:180px}
.mp-in:focus,.mp-ta:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.mp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:12px 0 0}
.mp-ta[hidden],.check-line[hidden],.mp-tools [hidden],.mp-h [hidden]{display:none!important}
.mode[hidden]{display:none!important}