/* Self-hosted or system fonts only. A third-party font origin would have to be
   added to the CSP, which re-opens a hole this policy exists to close — and in
   the EU, loading Google Fonts from the client's browser is a transfer the CNIL
   has already ruled against. Drop Questrial and Lato woff2 into /web/fonts and
   declare them here. */
:root{
  --ink:#14181A; --ink2:#333C41; --green:#197A41; --green-lt:#3AA664;
  --red:#CE2029; --grey:#6E7377; --paper:#fff; --mist:#F3F6F4;
  --line:rgba(20,24,26,.13); --line2:rgba(20,24,26,.30);
  --disp:"Questrial",system-ui,-apple-system,sans-serif;
  --body:"Lato",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;margin:0;line-height:1.1}
a{color:var(--green)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.shell{max-width:1180px;margin:0 auto;padding:0 26px}
.bar{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.95);z-index:5}
.bar__in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:14px 26px}
.mark{font-family:var(--disp);font-size:15px;letter-spacing:.28em;text-transform:uppercase}
.mark b{color:var(--green);font-weight:400}
.tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);padding:4px 9px;color:var(--green)}
.tag--red{color:var(--red);border-color:rgba(206,32,41,.4)}
.who{margin-left:auto;font-size:12px;color:var(--grey);text-align:right}
.who b{display:block;color:var(--ink)}
.kicker{font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin:0 0 14px}
.pane{padding:40px 0 90px}
.card{border:1px solid var(--line);padding:24px 26px 28px;margin-bottom:22px;background:var(--paper)}
.card--mist{background:var(--mist)}
.card__h{font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin:0 0 18px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.auth{max-width:430px;margin:9vh auto;padding:0 24px}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 12px;font:400 15px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:2px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(25,122,65,.14)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 18px}
.grid .c2{grid-column:span 2}.grid .c4{grid-column:1/-1}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}.grid .c2,.grid .c4{grid-column:1/-1}}
button{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:2px}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--small{padding:7px 12px;font-size:10.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.warn{color:var(--red);border-left:2px solid var(--red);padding-left:12px;margin:0 0 16px;font-size:14.5px}
.ok{color:var(--ink);border-left:2px solid var(--green);padding-left:12px;margin:0 0 16px;font-size:14.5px}
.muted{color:var(--grey);font-size:13.5px}
table{width:100%;border-collapse:collapse}
th{font-family:var(--disp);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--line2)}
td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.link{cursor:pointer}tr.link:hover td{background:var(--mist)}
.ref{font-variant-numeric:tabular-nums;color:var(--green);white-space:nowrap}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line2);margin:20px 0 0;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;padding:11px 18px;font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--grey);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green)}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0}
.tally>div{background:var(--mist);padding:16px 18px 18px}
.tally .l{font-family:var(--disp);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.tally .v{font-family:var(--disp);font-size:28px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.tally .s{font-size:11.5px;color:var(--grey);margin-top:8px}
@media(max-width:760px){.tally{grid-template-columns:1fr}}
.flag{display:inline-block;font-family:var(--disp);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line2);color:var(--grey)}
.flag--ok{border-color:var(--green);color:var(--green)}
.flag--low{border-color:var(--red);color:var(--red)}
.flag--pend{border-color:#C08A2A;color:#C08A2A}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(150%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:2px;font-size:13px;transition:transform .3s;z-index:50;max-width:92vw}
.toast.on{transform:translateX(-50%) translateY(0)}

/* Back-office : deux colonnes (liste clients | formulaire nouveau client) */
.bo-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;margin-top:24px}
.bo-col{min-width:0}
@media(max-width:900px){.bo-grid{grid-template-columns:1fr}}

.bo-cat{margin-top:44px}

/* ── back-office : contenu à onglets + devis/factures ───────── */
.bo-content{margin-top:24px}
.bo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.bill-lines{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.bill-line{display:grid;grid-template-columns:1.4fr 2fr .9fr .5fr .9fr auto;gap:10px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:10px}
.bill-line .fld{margin:0}
.bill-lt{display:inline-block;padding-top:10px;font-variant-numeric:tabular-nums}
.bill-totals{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 18px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.bill-line{grid-template-columns:1fr 1fr}}

/* ── impression PDF d'un devis / d'une facture ──────────────── */
.printarea{display:none}
@media print{
  .printarea{display:block}
  body *{visibility:hidden}
  .printarea,.printarea *{visibility:visible}
  .printarea{position:absolute;left:0;top:0;width:100%;padding:28px}
  .pr-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:16px}
  .pr-brand{font-weight:700;letter-spacing:.18em}
  .pr-kind{letter-spacing:.12em}
  .pr-meta{margin-bottom:18px}
  .pr-t{width:100%;border-collapse:collapse;margin-bottom:16px}
  .pr-t th,.pr-t td{border-bottom:1px solid #ccc;padding:7px 8px;text-align:left}
  .pr-t .num{text-align:right;font-variant-numeric:tabular-nums}
  .pr-tot{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .pr-grand{font-size:16px;border-top:2px solid #111;padding-top:6px;margin-top:4px}
  .pr-issuer{font-size:11px;line-height:1.5;margin-top:6px}
  .pr-kind{text-align:right}
  .pr-parties{display:flex;justify-content:space-between;gap:40px;margin-bottom:18px}
  .pr-lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:4px}
  .pr-to{font-size:12px;line-height:1.5}
  .pr-paywrap{margin-top:20px;border-top:1px solid #ccc;padding-top:12px}
  .pr-pay{font-size:11.5px;line-height:1.6}
}
.cat-desc{max-width:520px;margin-top:3px;font-size:11.5px;line-height:1.45}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.grid--2{grid-template-columns:1fr}}
.cms-item{margin-bottom:14px}
.cms-default{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.06em;color:var(--grey);margin-bottom:6px;white-space:normal;line-height:1.4}
.cms-sec{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:18px 0 8px}
.cms-toggle{display:flex;align-items:center;gap:10px;margin:0}
.cms-toggle input{width:auto}
.cms-card{border:1px solid var(--line2);border-radius:3px;padding:12px;margin-bottom:12px}
.cms-card__row{display:grid;grid-template-columns:1fr 160px auto;gap:12px;align-items:end}
.cms-card__btns{display:flex;gap:6px}
@media(max-width:640px){.cms-card__row{grid-template-columns:1fr}}