/* Charte DEEZALITE (« dossier CHARTE - DEEZALITE », capsule com°, reçue de Jérôme le
   11/9/2026) — elle remplace la charte Le Fil Rouge de docs/maquette.html.
   Elle ne compte que deux couleurs : le mauve #C37BB2 et le bleu nuit #00365F (le logo
   est un dégradé de l'un vers l'autre). Répartition retenue :
     - le BLEU NUIT porte le texte, les boutons, la structure — 12,4:1 sur blanc ;
     - le MAUVE porte les accents, les filets, les aplats — 3,1:1 sur blanc, donc
       JAMAIS de texte courant dessus ni en mauve sur fond clair.
   Le vert, l'orange et le rouge ne sont PAS de la charte et restent : sur un document
   de gestion, le verdict se lit à sa couleur avant de se lire en toutes lettres. */
:root{
  --marine:#00365F; --marine-clair:#0A4A7A; --marine-pale:#E7EEF4;
  --mauve:#C37BB2; --mauve-pale:#F7EDF4; --mauve-fonce:#9E5A8F;
  --nuage:#F4F6F8; --charbon:#14202B;
  --papier:#FFFFFF; --ligne:#DDE3EA; --gris:#6E7B87;
  --vert:#2F7D5B; --vert-pale:#E6F2EC; --orange:#B8722C; --orange-pale:#F6EDDE;
  --rouge:#C0392B; --rouge-pale:#FBEAE7;
  /* Caviar Dreams : titres, logo, intitulés. Pas les chiffres — elle n'a pas de
     chasse tabulaire, les colonnes de montants se désalignent. */
  --titre:'Caviar Dreams','Century Gothic','Avenir Next',sans-serif;
  --sans:'DM Sans','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--nuage);color:var(--charbon);font-size:14px;line-height:1.45}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

/* ------ Barre latérale ------ */
/* Fond bleu nuit de la charte : c'est le seul endroit où le logo blanc de Deezalite tient
   en grand, et le mauve y ressort (4,0:1 sur le bleu nuit) comme repère de dossier actif. */
.lat{background:var(--marine);color:#E7EEF4;padding:22px 0;display:flex;flex-direction:column}
.logo{padding:0 20px 10px}
.logo a{color:inherit;text-decoration:none;display:block}
.logo img{width:100%;max-width:150px;height:auto;display:block}
.lat .sous{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9C0D3;padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.16)}
.lat h3{font-family:var(--titre);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A9C0D3;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:var(--marine-clair)}
.client.actif{background:var(--marine-clair);border-left-color:var(--mauve);font-weight:700}
.client .etat{font-size:10px;color:#A9C0D3;text-align:right}
/* « + Nouvelle société » sous la liste des dossiers (Pauline, 10/9 au soir) : même rangée qu'un dossier, en retrait. */
.client.nouveau{color:#A9C0D3;font-size:12.5px;margin-top:4px}
.client.nouveau:hover{color:#FFFFFF}
.lat .pied{margin-top:auto;padding:14px 20px;font-size:11px}
.lat .pied a{color:#A9C0D3;text-decoration:none}
.lat .pied a:hover{color:#FFFFFF}

/* ------ Zone principale ------ */
.main{padding:24px 34px 44px;max-width:none}
.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.entete h1{font-family:var(--titre);font-size:32px;font-weight:700;line-height:1.05;color:var(--marine);letter-spacing:.01em}
.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:#B7C4D1}
.btn{color:inherit;text-decoration:none;display:inline-block}
.btn-principal{background:var(--marine);color:#fff;border-color:var(--marine);font-weight:500}
.btn-principal:hover{background:var(--marine-clair);border-color:var(--marine-clair)}
.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(--marine);font-weight:700;border-bottom-color:var(--mauve)}

.carte{background:var(--papier);border:1px solid var(--ligne);border-radius:10px;overflow:hidden;margin-bottom:20px}
.carte h2{font-family:var(--titre);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marine);padding:14px 20px 8px;font-weight:700}
.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 #EDF1F5;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:#F8FAFC}
tr.cliquable td:first-child::after{content:" ▸";color:var(--gris);font-size:11px}
tr.cliquable.ouvert td:first-child::after{content:" ▾"}
.bon{color:var(--vert);font-weight:700}
.alerte{color:var(--rouge);font-weight:700}
.neutre{color:var(--orange);font-weight:700}
.sous-table{background:#F8FAFC}
.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:#E9EEF3;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:#F8FAFC;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:#5A6670;background:#EEF2F6}
@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(--rouge-pale);color:var(--rouge);border:1px solid var(--rouge);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(--nuage)}
.login .boite{background:var(--papier);border:1px solid var(--ligne);border-radius:12px;padding:40px 44px;width:360px;text-align:center}
.login .marque{margin:0 auto 18px;max-width:180px}
.login .marque img{width:100%;height:auto;display:block}
.login h1{font-family:var(--titre);font-size:22px;font-weight:700;margin-bottom:4px;color:var(--marine)}
.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%}

/* ---- lot 2 : synthèse lisible (recette du 10/9/2026) ---- */
/* Le montant des totaux calculés : le bleu nuit de la charte (il tenait déjà ce rôle
   avec un bleu marine générique avant le 11/9). */
:root{--bleu:#00365F}
/* Point 5 — « distinguo entre ce qui est calculé et les grandes catégories » : les totaux
   (CA, achats directs, marge, salaires, REX, RCAI, résultat) en majuscules, le réel en bleu. */
tr.ligne-total td{font-weight:700}
tr.ligne-total td:first-child{text-transform:uppercase;letter-spacing:.04em}
tr.ligne-total td.reel{color:var(--bleu)}
/* Point 8 — « un tiers de beige inutilisé à droite » : la zone principale s'élargit
   (.main, plus haut) ; un tableau plus large que sa carte défile DANS la carte, et la
   colonne de la grille ne peut plus pousser la page à défiler horizontalement. */
.main{min-width:0}
.carte{overflow-x:auto}
/* Un montant ne se coupe jamais sur deux lignes (« 37 / 500,00 / € ») : sur un écran
   étroit, le tableau de synthèse défile dans sa carte au lieu de plier ses chiffres. */
table.synthese td{white-space:nowrap}

/* ---- lot 3 : architecture du dossier (refait le 10/9 au soir : « pas lisible du tout ») ---- */
/* Trois niveaux visuels : les lignes-parents (CA, Achats directs, Total salaires) en bandeau,
   leurs sous-lignes indentées sous un filet vertical, les lignes calculées (marge, REX, RCAI,
   résultat) en repère grisé. Les comptes sont des pastilles « numéro + libellé » ; la ligne
   entière est la zone de dépôt (.zone-depot, .survol pendant le glisser). */
.arbre{padding:6px 20px 14px}
.arbre .noeud{padding:0 10px;border-radius:8px;transition:background-color .15s}
.arbre .entete-noeud{display:flex;align-items:center;gap:10px;min-height:38px;border-top:1px solid #EDF1F5}
.arbre .noeud.niveau-0 .entete-noeud{min-height:42px}
.arbre .noeud.parent{margin-top:6px}
.arbre .noeud.parent .entete-noeud{border-top:0;background:var(--marine-pale);border-radius:8px;padding:0 10px;margin:0 -10px}
.arbre .noeud.parent .libelle-noeud{font-weight:700;font-size:14px}
.arbre .noeud.niveau-1{margin-left:34px;border-left:2px solid var(--ligne);padding-left:14px;border-radius:0}
.arbre .noeud.niveau-1 .entete-noeud{min-height:34px}
.arbre .noeud.calculee{margin-top:6px}
.arbre .noeud.calculee .entete-noeud{border-top:2px solid var(--ligne);min-height:32px}
.arbre .noeud.calculee .libelle-noeud{text-transform:uppercase;color:var(--gris);font-weight:700;font-size:11px;letter-spacing:.08em}
.arbre .chevron{width:24px;height:24px;border:0;background:none;cursor:pointer;color:var(--gris);font-size:13px;padding:0;text-align:center;flex:none;border-radius:6px}
.arbre .chevron:hover{background:#E4EAF0;color:var(--marine)}
.arbre .chevron.vide{display:inline-block}
.arbre .libelle-noeud{font-weight:500;font-size:13.5px}
.arbre .etiquette{font-size:10px;color:var(--mauve-fonce);background:var(--mauve-pale);border-radius:4px;padding:2px 7px;text-transform:uppercase;letter-spacing:.06em}
.arbre .nb-comptes{font-size:11px;font-weight:600;color:var(--gris);background:#E4EAF0;border-radius:10px;min-width:22px;padding:2px 7px;text-align:center;font-variant-numeric:tabular-nums}
.arbre .nb-comptes.zero{opacity:.45}
.arbre .a-faire{font-size:12px;color:var(--orange);font-weight:600}
.arbre .noeud.a-classer.pleine .entete-noeud{background:var(--orange-pale);border-radius:8px;padding:0 10px;margin:0 -10px;border-top:0}
.arbre .marge-noeud{margin-left:auto;display:flex;gap:6px;align-items:center;opacity:0;transition:opacity .15s}
.arbre .noeud:hover>.entete-noeud .marge-noeud,.arbre .noeud:focus-within>.entete-noeud .marge-noeud{opacity:1}
.arbre .supprimer-ligne{color:var(--rouge);font-weight:700;padding:2px 9px}
.arbre .pastilles{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 12px 34px}
/* Les virgules de ces sélecteurs étaient mal placées (« .arbre .pastille, .arbre-outils
   .pastille b ») : tout le style de b/i/em/.manuel retombait sur la pastille entière.
   Corrigé le 11/9/2026 en même temps qu'on y ajoute le solde. */
.arbre .pastille,.arbre-outils .pastille{display:inline-flex;align-items:baseline;gap:7px;max-width:340px;font-size:12px;padding:4px 10px 4px 8px;border:1px solid var(--ligne);border-radius:8px;background:var(--papier);cursor:grab;user-select:none;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.arbre .pastille b,.arbre-outils .pastille b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--marine)}
.arbre .pastille i,.arbre-outils .pastille i{font-style:normal;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.arbre .pastille em,.arbre-outils .pastille em{font-style:normal;color:var(--vert);font-size:11px}
/* Le solde du compte, dans la pastille : c'est ce que l'ancien tableau « Affectation des
   comptes » était seul à montrer (supprimé le 11/9, il faisait doublon avec le
   glisser-déposer). Tabulaire, poussé à droite, jamais coupé. */
.arbre .pastille u,.arbre-outils .pastille u{margin-left:auto;padding-left:4px;text-decoration:none;font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;color:var(--charbon);white-space:nowrap}
.arbre .pastille u.negatif,.arbre-outils .pastille u.negatif{color:var(--mauve-fonce)}
.arbre .pastille:hover{border-color:#B7C4D1;background:#F8FAFC;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.arbre .pastille.manuel,.arbre-outils .pastille.manuel{border-color:var(--vert);background:var(--vert-pale)}
.arbre .pastille.manuel b,.arbre-outils .pastille.manuel b{color:var(--vert)}
/* Le total de la ligne, à côté du compteur de comptes : la somme des soldes de ses comptes. */
.arbre .total-ligne{font-size:12px;font-weight:700;color:var(--marine);font-variant-numeric:tabular-nums;white-space:nowrap}
.arbre .total-ligne.zero{opacity:.35;font-weight:500}
.arbre .pastille.en-vol{opacity:.4;cursor:grabbing}
.arbre .pastille.filtre-cache{display:none}
.arbre .pastille-vide{font-size:12px;color:var(--gris);font-style:italic;padding:3px 0}
.arbre.glisse .zone-depot>.entete-noeud{background:#F8FAFC}
.arbre .zone-depot.survol>.entete-noeud{background:var(--vert-pale);outline:2px dashed var(--vert);outline-offset:-2px;border-radius:8px}
.arbre .noeud.filtre-vide{opacity:.35}
.arbre .formulaire-ajout{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0 12px 34px}
.arbre .pastilles[hidden],.arbre .formulaire-ajout[hidden]{display:none}  /* display:flex l'emporterait sur l'attribut hidden */
.arbre .formulaire-ajout .case,.arbre .aide-ajout{font-size:12px;color:var(--gris)}
.arbre .arbre-message{margin:0 0 10px;padding:8px 12px;border-radius:6px;background:var(--vert-pale);color:var(--vert);font-size:13px}
/* La barre d'outils de la carte : filtre, tout déplier / replier, légende, réinitialiser. */
.arbre-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 20px 8px}
.arbre-outils input[type=search]{width:340px}
.arbre-outils .legende{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--gris);margin-left:6px}
.arbre-outils .pastille.exemple{cursor:default;pointer-events:none}
.arbre-outils .reinitialiser{margin-left:auto}
.mode-emploi summary{cursor:pointer;font-weight:600;color:var(--marine)}

/* ---- lots 4-5 : budget et atterrissage ---- */
/* « → » : recopier un montant sur les mois suivants — visible au survol de la ligne ou au clavier */
.grille-budget button.pousser{visibility:hidden;border:0;background:none;color:var(--gris);cursor:pointer;padding:0 2px;font-size:12px;line-height:1}
.grille-budget tr:hover button.pousser,.grille-budget td:focus-within button.pousser{visibility:visible}
.grille-budget button.pousser:hover{color:var(--mauve-fonce)}
/* atterrissage : mois échus (réel constaté) sur fond teinté, dans la grille du budget */
.grille-budget th.echu,.grille-budget td.echu{background:var(--orange-pale)}
.grille-budget tr.calculee td.echu{background:#F1E4CF}
.grille-budget th small{display:block;font-size:9px;letter-spacing:0;text-transform:none;color:var(--gris);font-weight:400}
.grille-budget th.echu small{color:var(--orange)}
.legende-att{font-size:11px;color:var(--gris);align-self:center}
.legende-att .pastille{display:inline-block;width:12px;height:12px;border:1px solid var(--ligne);border-radius:3px;vertical-align:-2px;margin-right:4px;background:var(--papier)}
.legende-att .pastille.echu{background:var(--orange-pale)}

/* ---- point 6 du 10/9 : une colonne par mois de la période, dépliable ---- */
table.synthese .col-mois{color:var(--gris);font-size:12px;background:#F8FAFC}
table.synthese th.col-mois{font-size:10px}
table.synthese .basculer-mois{margin-left:6px;font-size:10px;padding:1px 6px;letter-spacing:0;text-transform:none}

/* --- Mot de passe : changement, code de secours, page « oublié » (14/9/2026) --- */
.info{background:var(--vert-pale);color:var(--vert);border:1px solid var(--vert);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.login .aide{font-size:12px;color:var(--gris);margin-top:14px}
.login .aide a{color:var(--marine)}
.code-secours{font-family:var(--titre),monospace;font-size:26px;letter-spacing:.18em;color:var(--marine);background:var(--nuage);border:1px dashed var(--marine);border-radius:8px;padding:14px;text-align:center;margin:10px 0;user-select:all}

/* --- Journal des imports : statut « échec » distinct de « à confirmer » (15/9/2026) --- */
.badge-echec{background:var(--rouge-pale);color:var(--rouge)}