:root {
    --ink:#2a2e30; --ink-2:#202325; --bg:#f0f0f1; --card:#ffffff;
    --trait:#e2e2e3; --txt:#2a2e30; --gris:#6b6f72; --gris-c:#9a9ea1;
    --accent:#cd0000; --accent-d:#a30000; --accent-bg:#fbe6e6;
    --vert:#cd0000; --vert-bg:#fbe6e6; --ambre:#2a2e30; --ambre-bg:#eceded;
    --rouge:#cd0000; --rouge-bg:#fbe6e6; --bleu:#2a2e30; --bleu-bg:#eceded;
    --gris-bg:#eceded;
    --rayon:12px; --ombre:0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
    --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:var(--sans); font-size:15px; line-height:1.5; }
a { color:var(--accent); }
h1 { font-size:22px; letter-spacing:-.01em; margin:0; }
h2 { font-size:16px; margin:0; }
h3 { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--gris); margin:18px 0 8px; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- Layout ---------- */
.sidebar { position:fixed; top:0; left:0; width:236px; height:100vh; background:var(--ink);
           color:#cdd6e4; display:flex; flex-direction:column; padding:20px 14px; z-index:40; }
.brand { display:flex; align-items:center; gap:10px; padding:6px 8px 20px; }
.brand__mark { width:34px; height:34px; display:grid; place-items:center; flex:none; }
.brand__mark img { width:100%; height:100%; object-fit:contain; }
.brand__txt { color:var(--accent); font-weight:700; font-size:15px; line-height:1.2; }
.nav { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
         color:#c2cddd; text-decoration:none; font-size:14.5px; font-weight:500; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.actif { background:var(--accent); color:#fff; }
.nav__ic { width:18px; text-align:center; opacity:.85; font-size:15px; }
.deconnexion { margin-top:auto; padding:10px 12px; color:var(--gris-c); text-decoration:none; font-size:13.5px; }
.deconnexion:hover { color:#fff; }
.contenu { margin-left:236px; padding:28px 34px 80px; max-width:1180px; }
.topbar { display:none; }

/* ---------- Entête de page ---------- */
.entete-page { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.entete-page__actions { display:flex; gap:10px; }
.fil-retour { font-size:13px; text-decoration:none; color:var(--gris); display:inline-block; margin-bottom:6px; }
.fil-retour:hover { color:var(--accent); }
.intro, .discret.mt { color:var(--gris); font-size:13.5px; margin:-8px 0 18px; }

/* ---------- Boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px;
       border-radius:9px; border:1px solid var(--trait); background:var(--card); color:var(--txt);
       font:inherit; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; transition:.12s; white-space:nowrap; }
.btn:hover { border-color:var(--gris-c); }
.btn--primaire { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--primaire:hover { background:var(--accent-d); border-color:var(--accent-d); }
.btn--secondaire { background:var(--card); color:var(--accent); border-color:#d9ddf4; }
.btn--fantome { background:transparent; border-color:transparent; color:var(--gris); }
.btn--fantome:hover { background:#e7ebf2; color:var(--txt); }
.btn--bloc { width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---------- Cartes ---------- */
.carte { background:var(--card); border:1px solid var(--trait); border-radius:var(--rayon);
         box-shadow:var(--ombre); padding:20px 22px; margin-bottom:20px; }
.carte__tete { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.carte--form label { display:block; margin-bottom:14px; }

/* ---------- Grilles ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat { background:var(--card); border:1px solid var(--trait); border-radius:var(--rayon);
        box-shadow:var(--ombre); padding:16px 18px; }
.stat__label { font-size:12.5px; color:var(--gris); font-weight:600; }
.stat__val { font-size:26px; font-weight:800; margin-top:6px; letter-spacing:-.02em; }
.stat__sub { font-size:12px; color:var(--gris-c); margin-top:3px; }
.stat--alerte { background:var(--rouge-bg); border-color:#f6cccc; }
.stat--alerte .stat__label, .stat--alerte .stat__val { color:var(--rouge); }
.grille-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.grille-doc { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }

/* ---------- Tableaux ---------- */
.tableau { width:100%; border-collapse:collapse; }
.tableau th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
              color:var(--gris); font-weight:700; padding:0 12px 10px; border-bottom:1px solid var(--trait); }
.tableau td { padding:12px; border-bottom:1px solid #eef2f7; font-size:14px; vertical-align:middle; }
.tableau tr:last-child td { border-bottom:none; }
.tableau tr.cliquable { cursor:pointer; }
.tableau tr.cliquable:hover td { background:#f7f9fc; }
.droite { text-align:right; } .centre { text-align:center; } .nowrap { white-space:nowrap; }
.tronque { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discret { color:var(--gris); font-size:12.5px; }
.vide { color:var(--gris); font-size:14px; padding:20px 4px; text-align:center; }

/* ---------- Badges & pastilles ---------- */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.01em; }
.badge--gris  { background:var(--gris-bg); color:#546074; }
.badge--bleu  { background:var(--bleu-bg); color:var(--bleu); }
.badge--vert  { background:var(--vert-bg); color:var(--vert); }
.badge--ambre { background:var(--ambre-bg); color:var(--ambre); }
.badge--rouge { background:var(--rouge-bg); color:var(--rouge); }
.pastille { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
            letter-spacing:.04em; padding:2px 7px; border-radius:5px; margin-right:8px; }
.pastille--devis   { background:var(--accent-bg); color:var(--accent); }
.pastille--facture { background:#e6f4ee; color:var(--vert); }
.mode { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:600; }
.mode--virement { background:var(--bleu-bg); color:var(--bleu); }
.mode--cheque   { background:var(--accent-bg); color:var(--accent); }
.mode--especes  { background:var(--vert-bg); color:var(--vert); }
.mode--autre    { background:var(--gris-bg); color:#546074; }

/* ---------- Liens d'action ---------- */
.lien { color:var(--accent); text-decoration:none; font-weight:600; font-size:13.5px; background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
.lien:hover { text-decoration:underline; }
.lien--danger { color:var(--rouge); margin-left:12px; }
.petit-lien { font-size:12px; color:var(--accent); text-decoration:none; display:inline-block; margin-top:5px; }
.inline { display:inline; }
.rouge-txt { color:var(--rouge); } .du-txt { color:var(--rouge); font-weight:600; } .ok-txt { color:var(--vert); font-weight:600; }
.mt { margin-top:10px; }

/* ---------- Formulaires ---------- */
label { font-size:13px; font-weight:600; color:#41506a; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], select, textarea {
    width:100%; margin-top:5px; padding:9px 11px; border:1px solid #d6dde8; border-radius:9px;
    font:inherit; font-size:14px; background:#fff; color:var(--txt); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
textarea { resize:vertical; }
.deux-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.form-actions--sticky { position:sticky; bottom:0; background:var(--bg); padding:14px 0; margin-top:20px; border-top:1px solid var(--trait); }
.check { display:flex; align-items:center; gap:8px; font-weight:500; }
.check input { width:auto; margin:0; }

/* ---------- Filtres ---------- */
.barre-filtres { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.barre-filtres input[type=search] { flex:1; min-width:200px; margin-top:0; }
.barre-filtres select { width:auto; margin-top:0; }
.filtre-date { display:flex; align-items:center; gap:6px; }
.filtre-date input[type=date] { width:auto; margin-top:0; }

/* ---------- Formulaire document : lignes ---------- */
.ajout-catalogue { display:flex; gap:10px; align-items:flex-end; background:#f7f9fc;
                   padding:12px 14px; border-radius:10px; margin-bottom:16px; flex-wrap:wrap; }
.inline-label { flex:1; min-width:220px; }
.tableau-lignes { width:100%; border-collapse:collapse; margin-bottom:10px; }
.tableau-lignes th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
                     color:var(--gris); font-weight:700; padding:0 8px 8px; }
.tableau-lignes .col-qte { width:80px; } .tableau-lignes .col-pu { width:130px; }
.tableau-lignes .col-tot { width:120px; text-align:right; } .tableau-lignes th:last-child { width:36px; }
.tableau-lignes td { padding:4px 8px; vertical-align:middle; }
.tableau-lignes input { margin-top:0; }
.tableau-lignes .qte, .tableau-lignes .pu { text-align:right; font-family:var(--mono); }
.ligne-total { text-align:right; color:var(--txt); font-weight:600; white-space:nowrap; }
.btn-suppr { border:none; background:none; color:var(--gris-c); cursor:pointer; font-size:15px; padding:6px; border-radius:6px; }
.btn-suppr:hover { color:var(--rouge); background:var(--rouge-bg); }

.totaux { display:flex; justify-content:flex-end; margin-top:14px; }
.totaux__lignes { width:320px; }
.tl { display:flex; justify-content:space-between; align-items:center; padding:6px 4px; font-size:14px; }
.tl span:first-child { color:var(--gris); }
.tl--total { border-top:2px solid var(--ink); margin-top:6px; padding-top:12px; font-size:17px; font-weight:800; }
.tl--total span:first-child { color:var(--txt); }
.mini { width:88px !important; text-align:right; margin-top:0 !important; display:inline-block; padding:5px 8px !important; font-family:var(--mono); }

/* ---------- Fiche document ---------- */
.doc-tete { display:flex; justify-content:space-between; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.doc-tete__client { font-size:17px; font-weight:700; margin-top:2px; }
.doc-tete__dates { text-align:right; font-size:14px; line-height:1.9; }
.doc-objet { background:#f7f9fc; padding:9px 13px; border-radius:8px; font-size:14px; }
.recap { display:flex; flex-direction:column; align-items:flex-end; margin-top:14px; }
.recap__l { display:flex; justify-content:space-between; width:280px; padding:5px 0; font-size:14px; }
.recap__l span:first-child { color:var(--gris); }
.recap__total { border-top:2px solid var(--ink); margin-top:6px; padding-top:12px; font-size:17px; font-weight:800; }
.recap__total span:first-child { color:var(--txt); }
.mention-tva { color:var(--gris); font-size:12px; font-style:italic; margin-top:12px; text-align:right; }
.doc-notes { margin-top:16px; padding-top:14px; border-top:1px solid var(--trait); font-size:13.5px; color:#41506a; }
.solde { font-weight:700; font-size:14px; color:var(--rouge); }
.solde--ok { color:var(--vert); }
.carte--actions { padding:16px 18px; }
.carte--actions h3:first-child { margin-top:4px; }
.carte--actions hr { border:none; border-top:1px solid var(--trait); margin:18px 0 12px; }
.form-statut select, .form-paiement { margin-top:0; }

/* ---------- Ajout paiement ---------- */
.ajout-paiement { margin-top:14px; }
.ajout-paiement summary { display:inline-flex; list-style:none; }
.ajout-paiement summary::-webkit-details-marker { display:none; }
.form-paiement { margin-top:14px; padding:16px; background:#f7f9fc; border-radius:10px; }
.form-paiement label { display:block; margin-bottom:12px; }

/* ---------- Flash ---------- */
.flash { padding:11px 15px; border-radius:9px; margin-bottom:16px; font-size:14px; font-weight:500; }
.flash--ok { background:var(--vert-bg); color:var(--vert); }
.flash--erreur { background:var(--rouge-bg); color:var(--rouge); }

/* ---------- Login ---------- */
.page-login { display:grid; place-items:center; min-height:100vh; background:linear-gradient(160deg,#2a2e30,#161819); padding:20px; }
.carte-login { background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.brand--login { justify-content:center; padding:0 0 6px; }
.login__sous { text-align:center; color:var(--gris); font-size:13.5px; margin:0 0 20px; }
.carte-login label { display:block; margin-bottom:14px; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
    .stats { grid-template-columns:repeat(2,1fr); }
    .grille-2, .grille-doc { grid-template-columns:1fr; }
}
@media (max-width:720px) {
    .sidebar { transform:translateX(-100%); transition:transform .22s; box-shadow:4px 0 24px rgba(0,0,0,.2); }
    #menu-toggle:checked ~ .sidebar { transform:translateX(0); }
    .contenu { margin-left:0; padding:16px 16px 70px; }
    .topbar { display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:30;
              background:var(--ink); color:#fff; padding:12px 16px; }
    .burger { font-size:22px; cursor:pointer; line-height:1; }
    .topbar__titre { font-weight:700; }
    .deux-cols { grid-template-columns:1fr; }
    .entete-page { align-items:stretch; }
}

/* ---------- Acompte (formulaire + fiche) ---------- */
.acompte-case { border-top:1px dashed var(--trait); margin-top:8px; padding-top:12px; }
.acompte-case span { display:flex; align-items:center; gap:8px; font-weight:600; color:#41506a; }
.acompte-case input { width:auto; margin:0; }
.acompte-detail { color:var(--gris); }
.recap__acompte { font-weight:700; color:var(--accent); }

/* ---------- Paiement en ligne Stripe ---------- */
.carte--stripe .carte__tete { align-items:center; }
.stripe-tag { background:#635bff; color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.02em; }
.stripe-creer label { display:block; margin-bottom:14px; }
.stripe-actif { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.stripe-infos { flex:1; min-width:240px; }
.stripe-url { display:block; font-size:12px; word-break:break-all; margin:6px 0 14px; color:var(--accent); text-decoration:none; }
.stripe-url:hover { text-decoration:underline; }
.stripe-boutons { display:flex; align-items:center; gap:16px; }
.stripe-qr { text-align:center; flex:none; }
.stripe-qr #qrcode { display:inline-block; padding:8px; background:#fff; border:1px solid var(--trait); border-radius:10px; }
.stripe-qr #qrcode img, .stripe-qr #qrcode canvas { display:block; }
code { background:#eef1f5; padding:1px 6px; border-radius:5px; font-size:12.5px; font-family:var(--mono); color:#41506a; }

/* ---------- Détail justifié d'une ligne (fiche document) ---------- */
.ligne-desc { margin-top:5px; font-size:12.5px; color:var(--gris); line-height:1.6; text-align:justify; white-space:pre-line; }

/* ---------- Lignes de prestation : bouton + zone de détail ---------- */
.tableau-lignes td:first-child { position:relative; }
.btn-detail { display:block; border:none; background:none; color:var(--accent); cursor:pointer;
              font:inherit; font-size:12px; font-weight:600; padding:4px 0 0; }
.btn-detail:hover { text-decoration:underline; }
.ligne-detail-txt { margin-top:6px; font-size:13px; }

/* ---------- Recherche client (remplace le <select>) ---------- */
.autocomplete { position:relative; }
.autocomplete__liste { position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1px solid var(--trait); border-radius:9px; box-shadow:var(--ombre);
    max-height:240px; overflow-y:auto; }
.autocomplete__item { padding:9px 12px; font-size:14px; cursor:pointer; }
.autocomplete__item:hover { background:var(--accent-bg); color:var(--accent); }

/* ---------- Clients : index alphabétique ---------- */
.index-lettres { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.index-lettres a { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:7px; background:var(--card); border:1px solid var(--trait); color:var(--gris);
    font-size:12.5px; font-weight:700; text-decoration:none; }
.index-lettres a:hover { border-color:var(--accent); color:var(--accent); }
.groupe-lettre { margin-bottom:8px; }
.groupe-lettre:last-child .tableau tr:last-child td { border-bottom:none; }
.lettre-titre { scroll-margin-top:16px; margin:20px 0 6px; }
.groupe-lettre:first-child .lettre-titre { margin-top:4px; }