/* Charte reprise de docs/maquette.html (maquette interactive v2 — Le Fil Rouge) */
:root{
  --bordeaux:#A02828; --ivoire:#F5F0EB; --charbon:#1A1A1A;
  --papier:#FFFFFF; --ligne:#E3DAD0; --gris:#8A817A;
  --vert:#3D6B4F; --vert-pale:#E8EFE9; --orange:#B8722C; --orange-pale:#F6EDDE;
  --bordeaux-pale:#F6E7E7;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--ivoire);color:var(--charbon);font-size:14px;line-height:1.45}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

/* ------ Barre latérale ------ */
.lat{background:var(--charbon);color:var(--ivoire);padding:22px 0;display:flex;flex-direction:column}
.logo{font-family:var(--serif);font-size:21px;font-weight:600;padding:0 20px 3px}
.logo a{color:inherit;text-decoration:none}
.logo span{color:#D98B8B}
.lat .sous{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C938C;padding:0 20px 16px;border-bottom:1px solid #333}
.lat h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9C938C;padding:16px 20px 8px}
.client{padding:9px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;border-left:3px solid transparent;color:inherit;text-decoration:none}
.client:hover{background:#262626}
.client.actif{background:#2B2222;border-left-color:var(--bordeaux);font-weight:700}
.client .etat{font-size:10px;color:#9C938C;text-align:right}
.lat .pied{margin-top:auto;padding:14px 20px;font-size:11px}
.lat .pied a{color:#9C938C;text-decoration:none}
.lat .pied a:hover{color:var(--ivoire)}

/* ------ Zone principale ------ */
.main{padding:24px 34px 44px;max-width:1080px}
.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.entete h1{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1}
.bornage{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.bornage .lib{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
select,.btn,input[type=text],input[type=password],input[type=number]{font-family:var(--sans);font-size:13px;padding:7px 12px;border-radius:6px;border:1px solid var(--ligne);background:var(--papier)}
select,.btn{cursor:pointer}
select:hover,.btn:hover{border-color:#C9BDB0}
.btn{color:inherit;text-decoration:none;display:inline-block}
.btn-principal{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux);font-weight:500}
.btn-principal:hover{background:#8A2020;border-color:#8A2020}
.btn-petit{font-size:12px;padding:5px 10px}

.onglets{display:flex;gap:2px;border-bottom:1px solid var(--ligne);margin-bottom:20px;flex-wrap:wrap}
.onglet{padding:9px 14px;font-size:13px;color:var(--gris);cursor:pointer;border-bottom:2px solid transparent;text-decoration:none}
.onglet:hover{color:var(--charbon)}
.onglet.actif{color:var(--charbon);font-weight:700;border-bottom-color:var(--bordeaux)}

.carte{background:var(--papier);border:1px solid var(--ligne);border-radius:10px;overflow:hidden;margin-bottom:20px}
.carte h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding:14px 20px 8px}
.carte .corps{padding:0 20px 16px}
table{width:100%;border-collapse:collapse}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);text-align:right;font-weight:500;padding:12px 20px 8px}
th:first-child{text-align:left}
td{padding:10px 20px;border-top:1px solid #F0EAE3;text-align:right;font-variant-numeric:tabular-nums}
td:first-child{text-align:left;font-weight:500}
tr.cliquable{cursor:pointer}
tr.cliquable:hover{background:#FBF8F5}
tr.cliquable td:first-child::after{content:" ▸";color:var(--gris);font-size:11px}
.bon{color:var(--vert);font-weight:700}
.alerte{color:var(--bordeaux);font-weight:700}
.neutre{color:var(--orange);font-weight:700}
.sous-table{background:#FBF8F5}
.sous-table td{font-weight:400;font-size:13px;padding:7px 20px 7px 34px}
.sous-table td:first-child{font-weight:400}

.badge{font-size:10px;border-radius:4px;padding:2px 8px;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.badge-integre{background:var(--vert-pale);color:var(--vert)}
.badge-remplace{background:#EFE9E2;color:var(--gris)}
.badge-a_confirmer{background:var(--orange-pale);color:var(--orange)}

.avertissements{font-size:12px;color:var(--orange);white-space:pre-line}
.note{font-size:12px;color:var(--gris);padding:10px 20px 16px}
.grille-12{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:4px 20px 16px}
.grille-12 label{font-size:10.5px;color:var(--gris);display:block;text-transform:uppercase;letter-spacing:.06em}
.grille-12 input{width:100%}
/* Grille du budget (lignes = catégories, colonnes = 12 mois) : cellules compactes, alignées à droite */
.grille-budget td{padding:4px 6px;white-space:nowrap;font-size:12.5px}
.grille-budget th{padding:8px 6px;font-size:10.5px}
.grille-budget input[type=text]{width:84px;text-align:right;padding:4px 6px;font-size:12px}
.grille-budget tr.calculee td{background:#FBF8F5;font-weight:600;color:var(--gris)}
.grille-budget .btn-petit{padding:2px 6px;font-size:11px}
/* cellules recalculées à l'écran, pas encore enregistrées (grille_budget.js) */
.grille-budget td.en-attente,.grille-budget tr.calculee td.en-attente{color:#B9B1AA;font-style:italic}
.grille-budget input.en-attente{color:#6E6660;background:#F4F0EA}
@media (prefers-reduced-motion:no-preference){.grille-budget td,.grille-budget input{transition:color .25s,background-color .25s}}
.champs-ligne{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:4px 20px 16px}
.champs-ligne label{font-size:10.5px;color:var(--gris);display:block;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.erreur{background:var(--bordeaux-pale);color:var(--bordeaux);border:1px solid var(--bordeaux);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}

/* ------ Login ------ */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ivoire)}
.login .boite{background:var(--papier);border:1px solid var(--ligne);border-radius:12px;padding:40px 44px;width:360px;text-align:center}
.login h1{font-family:var(--serif);font-size:30px;font-weight:600;margin-bottom:4px}
.login h1 span{color:var(--bordeaux)}
.login .sous{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:24px}
.login input{width:100%;margin-bottom:12px}
.login .btn-principal{width:100%}