/* KaliXio — devis, factures, frais */
:root{
  --bg:#f3f6f5;--surface:#fff;--sunk:#e8eeec;--line:#d3dcd9;--fg:#14211e;--muted:#5b6b67;
  --accent:#0d6656;--accent-fg:#fff;--accent-soft:#d6ece6;
  --bad:#c42b1c;--bad-soft:#fbe3e0;--warn:#b8650a;--warn-soft:#fbeedd;--ok:#1f7a3d;--ok-soft:#ddf1e3;--info:#2f5f8a;--info-soft:#e1ebf4;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1715;--surface:#16211e;--sunk:#1c2a27;--line:#2b3b37;--fg:#e4ece9;--muted:#93a39f;
  --accent:#4fbfa6;--accent-fg:#06201a;--accent-soft:#18372f;
  --bad:#ff7a6b;--bad-soft:#3a1d1a;--warn:#f0a650;--warn-soft:#36281a;--ok:#6fd08f;--ok-soft:#173222;--info:#7fb2e0;--info-soft:#1a2a3a;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.45 var(--f-body);-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:var(--f-display);font-stretch:85%;margin:0;line-height:1.15}
h1{font-size:28px;font-weight:800}h2{font-size:20px;font-weight:700}h3{font-size:16px;font-weight:700}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}.small{font-size:13.5px}.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.right{text-align:right}.bad{color:var(--bad)}.okc{color:var(--ok)}.warnc{color:var(--warn)}
.boot{display:grid;place-items:center;min-height:80vh;color:var(--muted)}

/* Mise en page : menu à gauche, contenu à droite */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.side .brand{display:flex;align-items:center;gap:10px;padding:0 6px 16px;min-width:0}
.side .brand img{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line)}
.side .brand b{font-family:var(--f-display);font-stretch:85%;font-size:17px;line-height:1.1;display:block;overflow:hidden;text-overflow:ellipsis}
.side .brand small{color:var(--muted);font-size:12px}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:var(--fg);text-decoration:none;font-weight:600}
.side a.nav:hover{background:var(--sunk)}
.side a.nav[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
.side a.nav .n{margin-left:auto;background:var(--bad);color:#fff;border-radius:10px;padding:0 7px;font-size:12px}
.side .bas{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:8px 6px 0;border-top:1px solid var(--line)}
.main{padding:22px 28px 60px;min-width:0;max-width:1240px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--fg)}
.topbar .sub{color:var(--muted);font-size:14px;margin-top:4px}
.btn.burger{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 30% 0 0;z-index:40;transform:translateX(-100%);transition:transform .2s;height:auto;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .side.open{transform:none}
  .main{padding:14px 14px 80px}
  .btn.burger{display:inline-flex}
  h1{font-size:24px}
}

/* Éléments */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:8px 14px;font-weight:600;text-decoration:none;color:var(--fg);transition:background .15s,transform .08s;white-space:nowrap}
.btn:hover{background:var(--sunk)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:5px 10px;font-size:14px}
.btn.ghost{border-color:transparent;background:none}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.spread{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:14px}
.panel>h2,.panel>h3{margin-bottom:10px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f>span,.lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=tel],select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px 10px;min-width:0}
textarea{resize:vertical;min-height:64px}
input:invalid:not(:placeholder-shown),select:invalid{border-color:var(--bad)}
select.req:invalid{border:2px solid var(--bad);background:var(--bad-soft);color:var(--bad);font-weight:600}
.check{display:flex;gap:8px;align-items:center}.check input{width:auto}
.pill{display:inline-block;padding:1px 9px;border-radius:12px;font-size:12.5px;font-weight:600;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.acc{background:var(--accent-soft);color:var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:4px 12px;font-size:14px}
.chips button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* Tableaux */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px;border-bottom:2px solid var(--line);white-space:nowrap}
table.t td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:var(--sunk)}
table.t tfoot td{font-weight:700;border-top:2px solid var(--fg);border-bottom:0}
table.lignes td{padding:4px}
table.lignes input,table.lignes select{padding:6px 7px}
table.lignes tr.titre input{font-weight:700}
.lignes .w-ref{width:110px}.lignes .w-qte{width:72px}.lignes .w-u{width:108px}.lignes .w-pu{width:104px}.lignes .w-rem{width:66px}.lignes .w-tva{width:84px}.lignes .w-tot{width:110px}

/* Accueil */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.kpi span{display:block;font-size:13px;color:var(--muted)}
.kpi b{display:block;font-family:var(--f-display);font-stretch:85%;font-size:28px;margin-top:4px}
.alerte{display:flex;align-items:stretch;border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:6px;margin-bottom:8px;background:var(--surface)}
.alerte.l3{border-left-color:var(--bad)}.alerte.l2{border-left-color:var(--warn)}.alerte.l1{border-left-color:var(--info)}
.alerte .go{all:unset;cursor:pointer;flex:1;padding:10px 12px;min-width:0}
.alerte .go:hover{background:var(--sunk)}
.alerte .go b{display:block}.alerte .go small{color:var(--muted)}
.alerte .x{border:0;border-left:1px solid var(--line);background:none;padding:0 14px;color:var(--muted)}
.alerte .x:hover{background:var(--bad-soft);color:var(--bad)}
.barres{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:10px}
.barres .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.barres .b i{display:block;width:100%;max-width:56px;background:var(--accent);opacity:.35;border-radius:3px 3px 0 0;min-height:2px}
.barres .b.cur i{opacity:.9}
.barres .b small{font-size:12px;color:var(--muted)}.barres .b em{font-style:normal;font-size:12px}

/* Éditeur de pièce */
.totaux{margin-left:auto;min-width:260px}
.totaux div{display:flex;justify-content:space-between;gap:20px;padding:3px 0}
.totaux .ttc{border-top:2px solid var(--fg);margin-top:6px;padding-top:8px;font-weight:700;font-size:18px}
.sugg{position:absolute;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.15);max-height:280px;overflow:auto;min-width:320px}
.sugg button{all:unset;box-sizing:border-box;display:block;width:100%;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugg button:hover,.sugg button.on{background:var(--accent-soft)}
.sugg small{color:var(--muted);display:block}
.lecture table.lignes input,.lecture table.lignes select{border-color:transparent;background:none;pointer-events:none}

/* Dialogues */
.ov{position:fixed;inset:0;z-index:60;background:rgba(10,20,18,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:var(--surface);border-radius:10px;max-width:640px;width:100%;max-height:92vh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dlg.large{max-width:960px}
.dlg h2{margin-bottom:12px}
.pdfv{width:100%;height:72vh;border:1px solid var(--line);border-radius:6px;background:#888}
.fichier{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px}
.fichier span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop{border:2px dashed var(--accent);border-radius:8px;padding:18px;text-align:center;cursor:pointer;background:var(--surface)}
.drop:hover{background:var(--accent-soft)}

/* Connexion */
.login{max-width:420px;margin:8vh auto;padding:0 16px}
.login .panel{padding:24px}
.login h1{margin-bottom:6px}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:8px;z-index:90;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25)}
@media print{.side,.topbar .row,.btn{display:none!important}.shell{display:block}}
table.lignes td[data-tot]{padding-top:18px}
table.lignes{min-width:780px}
/* Marque KaliXio (écran de connexion) */
.marque{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.marque img{width:60px;height:60px;flex:none;filter:drop-shadow(0 4px 10px rgba(13,102,86,.25))}
.marque .mot{font:800 40px/1 var(--f-display);font-stretch:88%;letter-spacing:-.5px;color:var(--fg)}
.marque .mot b{color:#e0a33a;font-weight:800}
.marque .slogan{font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--muted);margin-top:6px}
body:has(.login){background:radial-gradient(1200px 520px at 50% -12%,var(--accent-soft),var(--bg) 70%) var(--bg) no-repeat}
.login>.panel{box-shadow:0 18px 50px -24px rgba(13,60,50,.35)}
.lignes .w-nat{width:104px}table.lignes{min-width:880px}
/* Chatbot d'aide */
#kxAide .kxb{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 6px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:700;box-shadow:0 8px 24px -8px rgba(13,60,50,.55)}
#kxAide .kxb span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);font:800 20px/1 var(--f-display)}
#kxAide .kxb em{font-style:normal}
#kxAide.ouvert .kxb{display:none}
#kxAide .kxpan{display:none;position:fixed;right:18px;bottom:18px;z-index:55;width:380px;height:min(600px,calc(100vh - 36px));flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);overflow:hidden}
#kxAide.ouvert .kxpan{display:flex}
#kxAide header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--accent-soft)}
#kxAide header b{display:block;font-family:var(--f-display);font-size:16px}#kxAide header small{color:var(--muted);font-size:12px}
#kxAide header div{flex:1;min-width:0}
#kxAide .kxx{border:0;background:none;font-size:16px;padding:6px;color:var(--muted)}
#kxAide .kxfil{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
#kxAide .kxm{max-width:88%;padding:9px 12px;border-radius:12px;font-size:14.5px;line-height:1.45}
#kxAide .kxm.bot{background:var(--sunk);align-self:flex-start;border-bottom-left-radius:4px}
#kxAide .kxm.moi{background:var(--accent);color:var(--accent-fg);align-self:flex-end;border-bottom-right-radius:4px}
#kxAide .kxp{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#kxAide .kxp button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:13px;text-align:left}
#kxAide .kxp button:hover{border-color:var(--accent);color:var(--accent)}
#kxAide .attente span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--muted);animation:kxp 1s infinite}
#kxAide .attente span:nth-child(2){animation-delay:.15s}#kxAide .attente span:nth-child(3){animation-delay:.3s}
@keyframes kxp{0%,80%,100%{opacity:.25}40%{opacity:1}}
#kxAide .kxf{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
#kxAide .kxf input{flex:1}
@media (max-width:760px){#kxAide .kxb em{display:none}#kxAide .kxb{padding:0 6px}#kxAide .kxpan{inset:0;width:auto;height:auto;border-radius:0}}
@media print{#kxAide{display:none}}

/* =====================================================================
   Thème de la société (couleurs appliquées par l'application) + animations
   ===================================================================== */
:root{--accent2:#e0a33a;--accent-dk:#0a5244;--ease:cubic-bezier(.2,.8,.2,1)}
.topbar{border-bottom:0;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left}
.main.anim .topbar::after{animation:kxBarre .6s var(--ease) both}
@keyframes kxBarre{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Boutons : relief, survol, appui, reflet, onde au clic */
.btn{position:relative;overflow:hidden;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s,filter .2s;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn:disabled,.btn:disabled:hover{transform:none;box-shadow:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dk));border-color:var(--accent-dk);box-shadow:0 4px 12px -6px var(--accent)}
.btn.primary:hover{filter:none;box-shadow:0 10px 22px -8px var(--accent)}
.btn.primary::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn.primary:hover::before{animation:kxReflet .75s var(--ease)}
@keyframes kxReflet{to{left:130%}}
.btn.danger:hover{background:var(--bad);color:#fff}
.btn.ghost:hover{box-shadow:none;background:var(--sunk)}
.kx-onde{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.25;pointer-events:none;animation:kxOnde .55s ease-out forwards}
@keyframes kxOnde{to{transform:scale(2.6);opacity:0}}

/* Menu latéral */
.side a.nav{position:relative;transition:background-color .2s,color .2s,padding-left .2s var(--ease)}
.side a.nav:hover{padding-left:16px}
.side a.nav[aria-current=page]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:4px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent2));animation:kxApparait .3s var(--ease)}
.side a.nav .n{animation:kxPop .4s var(--ease)}

/* Apparition des écrans */
.main.anim>*{animation:kxMonte .42s var(--ease) both}
.main.anim>*:nth-child(2){animation-delay:.04s}.main.anim>*:nth-child(3){animation-delay:.08s}.main.anim>*:nth-child(4){animation-delay:.12s}.main.anim>*:nth-child(5){animation-delay:.16s}.main.anim>*:nth-child(n+6){animation-delay:.2s}
.kpis .kpi{transition:transform .2s var(--ease),box-shadow .2s;position:relative;overflow:hidden}
.main.anim .kpis .kpi{animation:kxMonte .45s var(--ease) both}
.main.anim .kpis .kpi:nth-child(2){animation-delay:.06s}.main.anim .kpis .kpi:nth-child(3){animation-delay:.12s}.main.anim .kpis .kpi:nth-child(4){animation-delay:.18s}
.kpis .kpi::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.kpis .kpi:hover{transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(0,0,0,.35)}
@keyframes kxMonte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kxApparait{from{opacity:0}to{opacity:1}}
@keyframes kxPop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Alertes, lignes de tableau, puces */
.alerte{transition:transform .18s var(--ease),box-shadow .18s}
.alerte:hover{transform:translateX(4px);box-shadow:0 6px 18px -12px rgba(0,0,0,.4)}
table.t tr.click{transition:background-color .15s}
table.t tr.click:hover{background:var(--accent-soft)}
.chips button{transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.chips button:hover{border-color:var(--accent);transform:translateY(-1px)}
.chips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.pill.acc{background:var(--accent-soft);color:var(--accent)}

/* Graphique : barres qui montent */
.barres .b i{background:linear-gradient(var(--accent),var(--accent-dk));transform-origin:bottom;opacity:.45}
.main.anim .barres .b i{animation:kxPousse .7s var(--ease) both}
.main.anim .barres .b:nth-child(2) i{animation-delay:.05s}.main.anim .barres .b:nth-child(3) i{animation-delay:.1s}.main.anim .barres .b:nth-child(4) i{animation-delay:.15s}.main.anim .barres .b:nth-child(5) i{animation-delay:.2s}.main.anim .barres .b:nth-child(6) i{animation-delay:.25s}
.barres .b.cur i{background:linear-gradient(var(--accent2),var(--accent));opacity:1}
@keyframes kxPousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Fenêtres, notifications, champs */
.ov{animation:kxApparait .18s ease both}
.dlg{animation:kxDlg .28s var(--ease) both}
@keyframes kxDlg{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#toast:not([hidden]){animation:kxToast .3s var(--ease) both}
@keyframes kxToast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);transition:box-shadow .2s,border-color .2s}
.drop{transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.drop:hover{transform:translateY(-1px)}
#kxAide .kxb{background:linear-gradient(135deg,var(--accent),var(--accent-dk));transition:transform .2s var(--ease),box-shadow .2s}
#kxAide .kxb:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px -10px var(--accent)}
#kxAide .kxb span{animation:kxRespire 3.2s ease-in-out infinite}
@keyframes kxRespire{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
#kxAide.ouvert .kxpan{animation:kxDlg .28s var(--ease) both}
#kxAide .kxm{animation:kxMonte .25s var(--ease) both}

/* Échantillons de couleurs (paramètres) */
.nuancier{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.nuancier button{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .15s var(--ease)}
.nuancier button:hover{transform:scale(1.15)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Abonnement */
.bandeau-abo{margin:-4px 0 14px;padding:10px 14px;border-radius:8px;font-size:14.5px;border:1px solid;animation:kxApparait .3s ease}
.bandeau-abo.info{background:var(--info-soft);border-color:var(--info);color:var(--fg)}
.bandeau-abo.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--fg)}
.bandeau-abo.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--fg)}
.bandeau-abo a{font-weight:700}
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.formule{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;border:2px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.formule:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
.formule.choisie{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.formule:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.formule .prix b{font:800 34px var(--f-display)}.formule .prix span{color:var(--muted);margin-left:4px}
.formule ul{margin:12px 0 0;padding:0;list-style:none;font-size:14.5px}
.formule li{padding:4px 0 4px 24px;position:relative}
.formule li::before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:800}
.formule .ruban{position:absolute;top:-11px;right:14px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.main{padding-bottom:96px}
/* Commandes reçues */
.cmd-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.cmd-doc{position:sticky;top:12px}
.cmd-apercu iframe,.cmd-apercu img{width:100%;height:72vh;border:1px solid var(--line);border-radius:6px;background:#fff;object-fit:contain}
#cLig input[data-c=designation]{min-width:220px}
@media (max-width:1000px){.cmd-grille{grid-template-columns:1fr}.cmd-doc{position:static}.cmd-apercu iframe,.cmd-apercu img{height:50vh}}
.cmd-grille{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
#cLig input[data-c=qte]{width:68px;min-width:68px}#cLig select[data-c=unite]{width:96px;min-width:96px}#cLig input[data-c=pu_ht]{width:100px;min-width:100px}
#cLig td{vertical-align:top}#cLig td.num{padding-top:18px}