/* =====================================================================
   Système de design – Fondation La Base (chargé en dernier)
   Visuel seulement : aucune fonction ni aucun calcul ne dépend de ce fichier.
   Couleurs :
     Charbon  #1B1E23  couleur principale (menu, sélection, en-têtes)
     Rouge    #B3121B  accent (bouton d'action principal, page active)
     Acier    #5B6470  couleur secondaire (texte d'appoint, icônes)
     Fond     #F4F4F2  · Carte #FFFFFF · Ligne #E3E3DF
     Succès   #1E7A4C  (inclus, enregistré)
   Polices : Barlow Semi Condensed (titres), Inter (texte)
   ===================================================================== */
:root{
 --ds-char:#1B1E23;--ds-char-2:#2A2E35;--ds-red:#B3121B;--ds-red-h:#930F17;--ds-red-t:#FBEAEB;
 --ds-steel:#5B6470;--ds-ink:#16181D;--ds-ink-2:#3F444C;--ds-mut:#6B7079;
 --ds-bg:#F4F4F2;--ds-card:#FFFFFF;--ds-soft:#F7F7F5;--ds-line:#E3E3DF;--ds-line-2:#CDCDC8;
 --ds-ok:#1E7A4C;--ds-ok-t:#E6F3EC;
 --ds-r:10px;--ds-r-sm:8px;--ds-sh:0 1px 2px rgba(17,19,23,.04),0 1px 1px rgba(17,19,23,.03);
 --ds-sh-pop:0 12px 32px rgba(17,19,23,.16),0 2px 6px rgba(17,19,23,.08);
 --ds-h:"Barlow Semi Condensed","Barlow",Inter,system-ui,sans-serif;--ds-t:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
 /* alias des anciennes variables du site */
 --brand:var(--ds-red);--brand-hover:var(--ds-red-h);--brand-text:var(--ds-red);--brand-tint:var(--ds-red-t);
 --ink:var(--ds-ink);--muted:var(--ds-mut);--mut:var(--ds-mut);--line:var(--ds-line);--line-strong:var(--ds-line-2);
 --surface:var(--ds-card);--card:var(--ds-card);--ground:var(--ds-bg);--bg:var(--ds-bg);--soft:var(--ds-soft);
 --acc:var(--ds-red);--hi:var(--ds-red);--chip:var(--ds-char);--chip-text:#fff;--grn:var(--ds-red);--grnd:var(--ds-red-h);
 --font-ui:var(--ds-t);--font-brand:var(--ds-h);--mpbg:#8F959C;color-scheme:light}
body,body.sbon{background:var(--ds-bg)!important;color:var(--ds-ink);font-family:var(--ds-t);-webkit-font-smoothing:antialiased;font-size:14px}

/* ---------- Typographie ---------- */
h1,h2,h3,.card .ch,.mph,.mpname,#qtabs .qtn,#lbtitle{font-family:var(--ds-h);letter-spacing:0;color:var(--ds-ink)}
.card .ch{font-size:19px!important;font-weight:600!important;line-height:1.25;padding-bottom:12px!important;margin-bottom:14px!important;border-bottom:1px solid var(--ds-line)!important}
.hint,small.hint,p.hint{color:var(--ds-mut)!important;font-size:13px;line-height:1.5}
label{color:var(--ds-ink-2)}

/* ---------- En-tête de page (titre + Retour) ---------- */
#lbhead{display:flex;align-items:center;gap:14px;margin:0 0 18px;min-height:36px;max-width:1180px}
#lbhead[hidden]{display:none!important}
#lbtitle{margin:0;font-size:28px;font-weight:700;line-height:1.1}
#lbback{margin:0!important}

/* ---------- Menu latéral ---------- */
#sb{background:var(--ds-char)!important;border-right:1px solid #262A30!important;padding:20px 12px 14px!important}
#sb .sbbrand{padding:2px 8px 22px!important;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:12px}
#sb .sbbrand .sewm{font-family:var(--ds-h)!important;font-size:18px!important}
#sb button{height:40px;padding:0 12px!important;margin:1px 0;border-radius:8px!important;font:500 14px/1 var(--ds-t)!important;color:#C9CED6!important;gap:12px!important}
#sb button svg{width:18px!important;height:18px!important;opacity:.8}
#sb button:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
#sb button.on{background:rgba(179,18,27,.16)!important;color:#fff!important;font-weight:600!important;box-shadow:inset 3px 0 0 var(--ds-red)!important}
#sb button.on svg{opacity:1;color:#fff}
#sb h4{color:#7D848E!important}
#sb .sbfoot{border-top:1px solid rgba(255,255,255,.07)!important}

/* ---------- Cartes et panneaux ---------- */
.card{background:var(--ds-card)!important;border:1px solid var(--ds-line)!important;border-top:1px solid var(--ds-line)!important;border-radius:var(--ds-r)!important;box-shadow:var(--ds-sh)!important;padding:20px!important;margin-bottom:16px!important}
#iabox .dbc,#hm.db .dbc{border-radius:var(--ds-r)!important;border:1px solid var(--ds-line)!important;box-shadow:var(--ds-sh)!important}
#iabox .dbnew{border-top:1px solid var(--ds-line)!important}
#iabox .dbk{font-family:var(--ds-t);letter-spacing:.02em;text-transform:none!important;font-size:13px!important;color:var(--ds-red)!important}
#iabox .dbnew h2{font-family:var(--ds-h)!important;font-size:22px!important;font-weight:700!important}

/* ---------- Boutons : une seule famille ---------- */
.btn,button.btn,label.btn,a.btn,.seg button,#iabox .obtn,#hm.db .obtn{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px!important;
 font:500 14px/1.2 var(--ds-t)!important;border-radius:var(--ds-r-sm)!important;border:1px solid var(--ds-line-2)!important;
 background:var(--ds-card)!important;color:var(--ds-ink)!important;box-shadow:none!important;filter:none!important;cursor:pointer;
 transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.btn:hover:not(:disabled),.seg button:hover:not(.on){background:var(--ds-soft)!important;border-color:#B7B7B1!important}
.btn.sm,button.btn.sm{min-height:30px;padding:0 10px!important;font-size:13px!important;border-radius:7px!important}
.btn.pri,button.btn.pri,label.btn.pri,#iabox .gbtn,#hm.db .gbtn,
#ia #iabox .btn.pri[data-a="plan"]{background:var(--ds-red)!important;border-color:var(--ds-red)!important;color:#fff!important;font-weight:600!important}
.btn.pri:hover:not(:disabled),#iabox .gbtn:hover{background:var(--ds-red-h)!important;border-color:var(--ds-red-h)!important}
.btn:disabled,button:disabled.btn{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.seg button:focus-visible,#sb button:focus-visible{outline:2px solid var(--ds-red)!important;outline-offset:2px!important}
/* barre du haut d'une soumission : mêmes boutons */
body.sbon .top{background:var(--ds-card)!important;border-bottom:1px solid var(--ds-line)!important;padding:10px 36px!important}
body.sbon .top .btn{min-height:36px!important;padding:0 14px!important;border-radius:var(--ds-r-sm)!important;font-size:14px!important;font-weight:500!important;background:var(--ds-card)!important;color:var(--ds-ink)!important;border:1px solid var(--ds-line-2)!important}
body.sbon .top .btn.pri{background:var(--ds-red)!important;border-color:var(--ds-red)!important;color:#fff!important;font-weight:600!important}

/* ---------- Onglets et choix sélectionnés : charbon partout ---------- */
#qtabs{gap:6px!important}
#qtabs button,.seg button,#iabox .chip,#hm.db .chip{min-height:34px;padding:0 14px!important;border-radius:999px!important;border:1px solid var(--ds-line-2)!important;background:var(--ds-card)!important;color:var(--ds-ink)!important;font:500 13.5px var(--ds-t)!important}
#qtabs button.on,.seg button.on,.seg button.on.pri,#iabox .chip.on,#hm.db .chip.on{background:var(--ds-char)!important;border-color:var(--ds-char)!important;color:#fff!important;font-weight:600!important}
#qtabs .qtn{font-size:20px!important;font-weight:700!important;margin-right:12px!important}
/* choix (puces) du calculateur : sélection en charbon, pas en rouge */
#cb .btn.sm.pri:is([data-cbq],[data-cbp],[data-cbair],[data-cbm],[data-cbpx]){background:var(--ds-char)!important;border-color:var(--ds-char)!important}
#cb .btn.sm:is([data-cbq],[data-cbp],[data-cbair],[data-cbm],[data-cbpx]){min-height:30px;border-radius:999px!important}

/* ---------- Champs ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{
 background:var(--ds-card)!important;border:1px solid var(--ds-line-2)!important;border-radius:var(--ds-r-sm)!important;color:var(--ds-ink)!important;
 font:14px/1.35 var(--ds-t)!important;min-height:36px;padding:7px 10px!important;box-shadow:none!important;transition:border-color .12s,box-shadow .12s}
textarea{min-height:80px}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:#B2B2AC!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--ds-red)!important;box-shadow:0 0 0 3px rgba(179,18,27,.14)!important}
input::placeholder,textarea::placeholder{color:#9A9EA5}
input[type=checkbox],input[type=radio]{accent-color:var(--ds-red);width:16px;height:16px}
input:disabled,select:disabled,textarea:disabled{background:var(--ds-soft)!important;color:var(--ds-mut)!important}

/* ---------- Tableaux ---------- */
table{border-collapse:separate!important;border-spacing:0}
th{background:var(--ds-soft)!important;color:var(--ds-mut)!important;font:600 12.5px/1.3 var(--ds-t)!important;text-transform:none!important;letter-spacing:0;padding:9px 10px!important;border-bottom:1px solid var(--ds-line)!important;text-align:left}
th:first-child{border-top-left-radius:8px}th:last-child{border-top-right-radius:8px}
td{padding:8px 10px!important;border-bottom:1px solid var(--ds-line)!important}
tbody tr:hover td,tr:hover>td{background:#FAFAF8}
th.r,td.r{text-align:right}
#lst td b,#lst td a,#lst td .cl{font-weight:600}

/* ---------- Badges et états ---------- */
.incb.on,.incb[data-st="on"],button.incb.on{background:var(--ds-ok)!important;border-color:var(--ds-ok)!important;color:#fff!important}
#mp .mpsvc{background:var(--ds-char)!important}

/* ---------- Fenêtres contextuelles et notifications ---------- */
#mpmod>div,.mpmodal,.modal,dialog,[role=dialog]{border-radius:14px!important;box-shadow:var(--ds-sh-pop)!important;border:1px solid var(--ds-line)!important}
#stoast,#iatoast{font-family:var(--ds-t)}
#stoast>*,#iatoast>*{border-radius:10px!important;box-shadow:var(--ds-sh-pop)!important}

/* ---------- Soumission (éditeur) ---------- */
#own .sech,#own .sh2,#own .sec>.hd{font-family:var(--ds-h)}

/* ---------- Calculateur ---------- */
#cb .kpi,#cbres .kpi,#cb [class*=kpi]{border-top-width:1px!important}

/* ---------- Quoter Plan : mêmes couleurs que le reste ---------- */
#mp{--brand:var(--ds-red);--brand-hover:var(--ds-red-h);--brand-text:var(--ds-red);--brand-tint:var(--ds-red-t);--acc:var(--ds-red);--hi:var(--ds-red);--grn:var(--ds-red);--grnd:var(--ds-red-h)}
#mp .mpbig{border-radius:12px!important;border:1px solid var(--ds-line-2)!important;background:var(--ds-card)!important;box-shadow:var(--ds-sh)!important;color:var(--ds-ink)!important;transition:border-color .12s,box-shadow .12s}
#mp .mpbig:hover{border-color:var(--ds-char)!important;box-shadow:0 4px 14px rgba(17,19,23,.08)!important}
#mp .mpbig .mpbi{color:var(--ds-red)!important}
#mp .mpbig.mpq1{background:var(--ds-char)!important;border-color:var(--ds-char)!important;color:#fff!important}
#mp .mpbig.mpq1 *{color:#fff!important}
#mp .mpbig.mpq1 small{opacity:.78}
#mp .mphero,#mp .mphero>div:first-child{border-radius:12px}
#mp .card{border-top:1px solid var(--ds-line)!important}
#mp .mpdz{border-color:var(--ds-line-2)!important;border-radius:12px!important}
#mp .mpdz.ov{border-color:var(--ds-red)!important;background:var(--ds-red-t)!important}
#mp .mpdi{color:var(--ds-red)!important}
#mp .mpsvi{border-left-color:var(--ds-char)!important}
#mp .mpsvt i{background:var(--ds-red)!important}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- Tablette et téléphone ---------- */
@media (max-width:899px){
 #lbtitle{font-size:24px}
 body.sbon .top{padding:8px 16px!important}
 .card{padding:16px!important}
 .btn,button.btn{min-height:40px}
 .btn.sm{min-height:34px}
}
@media print{#lbhead{display:none!important}}

/* ---------- Ajustements après revue ---------- */
/* onglets de panneau (Client et projet / Mon entreprise) : sélection en charbon */
.pbar .btn.pri[data-a="pn"],.pbar .btn[aria-pressed="true"]{background:var(--ds-char)!important;border-color:var(--ds-char)!important;color:#fff!important}
.pbar{padding:8px!important}
/* puces de choix du calculateur : taille constante */
#cb .btn.sm:is([data-cbq],[data-cbp],[data-cbair],[data-cbm],[data-cbpx]){min-height:30px!important;padding:0 11px!important;font-size:13px!important}
/* liste des soumissions : pas de coupure dans les colonnes courtes */
#lst td{white-space:nowrap}
#lst td:nth-child(4){white-space:normal}
label.btn{vertical-align:middle}
#mp .mphero{border-bottom:1px solid var(--ds-line)!important;border-radius:12px!important}
#mp .mphero>div:first-child{border-radius:10px!important}
#mtop{background:var(--ds-char)!important}
#mtop .mtlogo{width:40px;height:26px;border-radius:5px;overflow:hidden;display:block}
#mtop .mtlogo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:899px){.btn,button.btn{white-space:normal;text-align:center;line-height:1.25!important;padding-top:6px!important;padding-bottom:6px!important}}
@media (max-width:640px){
 #cbprix>div>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;flex:1 1 100%!important}
 #cbprix>div{flex-direction:column}
 #own .card>.ch{flex-wrap:wrap!important;row-gap:6px}
 #own .card>.ch .r{margin-left:auto}
 #own .add label{white-space:normal!important}
}
label.btn,#mp label.btn{display:inline-flex!important;align-items:center}
#lst td,#fil td{background:transparent!important}
#lst tr:hover td,#fil tr:hover td{background:#FAFAF8!important}

/* ===== Suivi soumission + facture + bandeau courriel (v160) ===== */
.suivi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.svst{background:var(--ds-surface,#fff);border:1px solid var(--ds-line,#e5e7eb);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.svst b{display:flex;align-items:center;gap:8px;font-size:14px}
.svst b span{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;background:var(--ds-ink,#1f2937);color:#fff;flex:none}
.svst.done{border-color:#86efac;background:color-mix(in srgb,#22c55e 8%,var(--ds-surface,#fff))}
.svst.done b span{background:#16a34a}
.svst small{color:var(--ds-mut,#6b7280);font-size:12px;line-height:1.3}
.svst .btn{align-self:flex-start;margin-top:auto}
@media(max-width:820px){.suivi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.suivi{grid-template-columns:1fr}}
#facm{display:none;position:fixed;inset:0;z-index:9000;background:rgba(15,23,42,.55);padding:16px;overflow:auto}
#facm.show{display:block}
.facbox{background:var(--ds-bg,#fafaf9);color:var(--ds-ink,#111);max-width:1180px;margin:0 auto;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.fachd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ds-line,#e5e7eb);font-size:18px}
.facgrid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:16px;padding:16px}
.facform h4{margin:14px 0 4px;font-size:14px}
.facform .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.facform input,.facform textarea{width:100%;box-sizing:border-box}
.facx{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.facxr{display:grid;grid-template-columns:1fr 90px auto auto;gap:6px;align-items:center}
.facon{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}.facon input{width:auto}
.factot{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;padding:10px 12px;border-radius:8px;background:var(--ds-surface,#fff);border:1px solid var(--ds-line,#e5e7eb)}
.factot b{font-size:20px}
.facact{display:flex;flex-wrap:wrap;gap:8px}
.facprev{background:#e7e5e4;border-radius:8px;padding:8px;min-width:0;overflow:hidden}
.facsc{overflow:hidden}#facdoc{box-shadow:0 2px 10px rgba(0,0,0,.15)}
@media(max-width:860px){.facgrid{grid-template-columns:1fr}#facm{padding:0}.facbox{border-radius:0}}
#mailbn{display:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9500;max-width:min(680px,calc(100vw - 32px));background:#111827;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);align-items:center;gap:10px;flex-wrap:wrap}
#mailbn.show{display:flex}#mailbn span{flex:1 1 260px;font-size:14px;line-height:1.35}
#mailbn .btn.sm{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
#facdoc table{width:100%!important;min-width:0!important;table-layout:fixed}
#facdoc th:last-child,#facdoc td:last-child{width:150px}
#facdoc th,#facdoc td{background:transparent!important;font-size:14px;color:#111}
@media(max-width:600px){#mailbn{left:12px;right:12px;transform:none;max-width:none;bottom:12px}}
/* ---------- PO dans l'entête du client (v161) ---------- */
.card .ch .pohd{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 18px;font:inherit!important;font-size:inherit!important;font-weight:inherit!important;color:var(--ds-ink)}
.card .ch .pohd input{font:600 19px/1.2 var(--ds-h)!important;width:220px;max-width:46vw;min-height:34px;padding:4px 10px!important}
.popill{display:inline-block;margin:3px 0 0;padding:1px 8px;border-radius:999px;background:var(--ds-char);color:#fff;font:600 12px/1.6 var(--ds-t)}
#lst .rr td b+.popill{margin-left:6px}
@media(max-width:640px){.card .ch .pohd{margin-left:0;flex:1 1 100%}.card .ch .pohd input{flex:1;width:auto;max-width:none}}
#lst td button+.popill{margin-left:8px}
/* ---------- Calculateur : prix sans / avec armature (v162) ---------- */
.cbmet{display:flex;align-items:stretch;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.cbm1{flex:1 1 180px;border:1px solid var(--ds-line);border-radius:10px;padding:12px 14px;background:var(--ds-card);display:flex;flex-direction:column;gap:2px}
.cbm1 small{color:var(--ds-mut);font-size:12.5px}.cbm1 b{font:700 24px/1.15 var(--ds-h)}
.cbm1.cbmt{background:var(--ds-char);border-color:var(--ds-char)}.cbm1.cbmt b,.cbm1.cbmt small{color:#fff}.cbm1.cbmt small{opacity:.8}
.cbmop{align-self:center;font:700 22px var(--ds-h);color:var(--ds-mut)}
@media(max-width:640px){.cbmop{display:none}.cbm1{flex-basis:100%}}
/* ---------- Générateur : classique / sur pieux · Facture en page (v163) ---------- */
#iabox .dbpx{align-items:center;margin:10px 0 2px}
#iabox .dbpxl{font:600 13px var(--ds-t);color:var(--ds-ink-2);margin-right:4px}
#iabox .dbpxh{flex:1 1 100%;font-size:12.5px;color:var(--ds-mut)}
#fac .facpage{box-shadow:none!important;border:1px solid var(--ds-line);background:var(--ds-card);max-width:1240px;margin:0}
#fac .fachd{gap:12px;flex-wrap:wrap;justify-content:flex-start}
#fac .fachd b{font:700 20px var(--ds-h)}
.facir{display:grid;grid-template-columns:minmax(0,1fr) 64px 92px 96px auto;gap:6px;align-items:center}
.faciam{text-align:right;font-size:13.5px;white-space:nowrap}
@media(max-width:520px){.facir{grid-template-columns:1fr 1fr 1fr auto}.facir input:first-child{grid-column:1/-1}.faciam{text-align:left}}
#fac .fachd .facsend1{margin-left:auto}
@media(max-width:640px){#fac .fachd .facsend1{margin-left:0;width:100%}}