/* =====================================================================================================
   NYBA Finances : une seule feuille de style, même langage visuel que NYBA Asso (barre latérale gris perle,
   bandeau bleu avec les onglets de la rubrique, cartes calmes, Poppins pour les titres, Inter pour le texte).

   Règle : les couleurs passent TOUJOURS par les variables ci-dessous. Le mode nuit ne fait que les redéfinir
   (html[data-theme="dark"], posé par theme.js) : jamais de « background: #fff » ni de texte foncé en dur.
   Plan : 1. variables · 2. base · 3. mise en page · 4. composants · 5. formulaires · 6. tableaux ·
          7. pages de connexion · 8. téléphone · 9. impression
   ===================================================================================================== */

/* ---------- 1. Variables ---------- */
:root{
  --marque:#0057B8;--marque-fonce:#004A9C;--nuit:#0F2D5B;--vert-nyba:#1E7E34;
  --texte:#16233D;--texte-doux:#3C4A63;--gris:#5B6B82;--gris-clair:#94A3B8;
  --fond:#F3F6FB;--carte:#FFFFFF;--fond-doux:#F8FAFC;--fond-2:#EEF2F8;
  --bordure:#E3E9F2;--bordure-forte:#CDD8EA;--ligne:#EEF1F5;
  --menu-fond:#E9EEF5;--menu-bordure:#D5DDE8;--menu-texte:#334155;--menu-icone:#64748B;--menu-survol:rgba(15,45,91,.06);
  --menu-actif:#FFFFFF;--menu-actif-texte:#0057B8;
  --vert:#1E7E34;--vert-fond:#E7F8F0;--vert-texte:#05603F;
  --rouge:#B42318;--rouge-fond:#FDECEC;--rouge-texte:#8F1F1F;
  --ambre:#B7791F;--ambre-fond:#FFF5E1;--ambre-texte:#7A4B00;
  --bleu-fond:#EAF0FC;--bleu-texte:#1D4FA3;
  --rayon:12px;--rayon-petit:8px;--largeur-menu:248px;
  --titres:'Poppins','Segoe UI',Arial,sans-serif;--corps:'Inter','Segoe UI',Arial,sans-serif;
  --focus:0 0 0 4px rgba(0,87,184,.14);
}
@media screen{
  :root[data-theme="dark"]{color-scheme:dark;
    --marque:#3B82F6;--marque-fonce:#2563EB;--vert-nyba:#4ADE80;
    --texte:#E5EAF2;--texte-doux:#C3CCDA;--gris:#9AA6B8;--gris-clair:#6B778A;
    --fond:#0B1220;--carte:#141C2B;--fond-doux:#182235;--fond-2:#1A2333;
    --bordure:#2A3446;--bordure-forte:#3A4659;--ligne:#222C3D;
    --menu-fond:#111827;--menu-bordure:#1F2937;--menu-texte:#C7CDD8;--menu-icone:#8A93A6;--menu-survol:rgba(255,255,255,.06);
    --menu-actif:#1F2A3D;--menu-actif-texte:#FFFFFF;
    --vert:#4ADE80;--vert-fond:rgba(52,211,153,.14);--vert-texte:#86EFAC;
    --rouge:#F87171;--rouge-fond:rgba(248,113,113,.14);--rouge-texte:#FCA5A5;
    --ambre:#FBBF24;--ambre-fond:rgba(251,191,36,.14);--ambre-texte:#FCD34D;
    --bleu-fond:rgba(96,165,250,.14);--bleu-texte:#BFDBFE;
    --focus:0 0 0 4px rgba(96,165,250,.18);
  }
}

/* ---------- 2. Base ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.barre-laterale{view-transition-name:barre-laterale}
.barre-haut{view-transition-name:barre-haut}
.barre-bas{view-transition-name:barre-bas}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);background:var(--fond);color:var(--texte);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--marque)}
p{margin:0 0 .8rem}
h1,h2,h3{font-family:var(--titres);color:var(--texte);letter-spacing:-.2px;line-height:1.25}
h1{font-size:24px;font-weight:700;margin:0 0 18px}
h2{font-size:17px;font-weight:600;margin:0 0 14px}
h3{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gris);margin:18px 0 10px}
svg.ic,.ic{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.petit{font-size:12.5px;color:var(--gris)}
.mono,td,th,.bande-chiffres b{font-variant-numeric:tabular-nums}
.erreur{color:var(--rouge)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--marque);outline-offset:2px}

/* ---------- 3. Mise en page : barre latérale, barre du haut, contenu, onglets ---------- */
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.barre-laterale{position:fixed;inset:0 auto 0 0;width:var(--largeur-menu);z-index:40;display:flex;flex-direction:column;
  background:var(--menu-fond);color:var(--menu-texte);border-right:1px solid var(--menu-bordure);transition:transform .25s ease}
.barre-laterale .marque{display:flex;align-items:center;gap:10px;padding:20px 22px 0;text-decoration:none;color:var(--nuit)}
.barre-laterale .embleme{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#fff;border:1px solid var(--menu-bordure)}
.barre-laterale .embleme img{width:26px;height:auto}
.nom-app{font-family:var(--titres);font-weight:700;font-size:17px;letter-spacing:.3px}
.nom-app em{font-style:normal;font-weight:600;color:var(--vert-nyba)}
[data-theme="dark"] .barre-laterale .marque{color:#fff}
.selecteur{display:flex;flex-direction:column;gap:2px;margin:18px 14px 4px;padding:9px 12px;border-radius:9px;background:var(--fond-doux);border:1px solid var(--menu-bordure)}
.selecteur small{display:block;font-size:11px;color:var(--gris);font-weight:600}
.selecteur b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selecteur select{border:0;background:transparent;padding:0;font-weight:700;min-height:0}
.menu{flex:1;overflow-y:auto;padding:14px 14px 12px}
.menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;color:var(--menu-texte)}
.menu a .ic{color:var(--menu-icone)}
.menu a:hover{background:var(--menu-survol)}
.menu a.actif{background:var(--menu-actif);color:var(--menu-actif-texte);box-shadow:0 1px 2px rgba(15,45,91,.08)}
.menu a.actif .ic{color:var(--menu-actif-texte)}
.menu.menu-bas{flex:none;border-top:1px solid var(--menu-bordure)}
.compteur{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#2FB457;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.voile,.barre-bas{display:none}

.principal{margin-left:var(--largeur-menu);min-height:100vh;display:flex;flex-direction:column}
.barre-haut{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 32px;background:var(--carte);border-bottom:1px solid var(--bordure)}
.barre-haut .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.titre-mobile{display:none}

.bouton-rond,.bouton-menu{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--bordure);background:var(--carte);color:var(--texte);cursor:pointer;padding:0}
.bouton-menu{display:none}
form.langue{display:inline-flex;border:1px solid var(--bordure);border-radius:8px;overflow:hidden;margin:0}
form.langue button{font:700 11.5px var(--corps);padding:7px 10px;border:0;background:transparent;color:var(--gris);cursor:pointer}
form.langue button.actif{background:var(--nuit);color:#fff}
[data-theme="dark"] form.langue button.actif{background:var(--marque)}
details.compte-menu{position:relative}
details.compte-menu>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:3px 6px 3px 3px;border-radius:10px}
details.compte-menu>summary::-webkit-details-marker{display:none}
details.compte-menu>summary:hover{background:var(--fond)}
.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font:700 12.5px var(--titres);background:var(--bleu-fond);color:var(--marque);text-transform:uppercase}
.petit-avatar{width:32px;height:32px;font-size:12px}
details.compte-menu .qui{display:flex;flex-direction:column;line-height:1.3;max-width:160px}
details.compte-menu .qui b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.compte-menu .qui span{font-size:12px;color:var(--gris)}
.menu-deroulant{position:absolute;right:0;top:calc(100% + 6px);min-width:270px;z-index:50;padding:6px;border-radius:12px;background:var(--carte);border:1px solid var(--bordure);box-shadow:0 12px 30px rgba(16,33,66,.12)}
.menu-deroulant a,.menu-deroulant .sortir,.menu-deroulant .installer{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;font:14px var(--corps);color:var(--texte);text-decoration:none;cursor:pointer}
.menu-deroulant a:hover,.menu-deroulant .installer:hover{background:var(--fond-2)}
.menu-deroulant form{margin:4px 0 0;border-top:1px solid var(--bordure);padding-top:4px}
.menu-deroulant .sortir{color:var(--rouge);font-weight:600}
.menu-deroulant .sortir:hover{background:var(--rouge-fond)}
.installer-ios{font-size:12.5px;padding:6px 12px;color:var(--texte-doux)}
.installer-ios ol{margin:4px 0 0;padding-left:18px}
.choix-theme{display:flex;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid var(--bordure);margin-top:4px}
.choix-theme span{flex:1;font-size:13px;font-weight:600;color:var(--texte-doux)}
.choix-theme button{border:1px solid var(--bordure);background:transparent;color:var(--texte-doux);border-radius:999px;padding:4px 10px;font:600 12px var(--corps);cursor:pointer}
.choix-theme button.actif{background:var(--marque);border-color:var(--marque);color:#fff}

main.contenu{display:flex;flex-direction:column;flex:1;min-width:0;padding:0 32px 56px}
main.contenu:not(:has(>.bandeau)){padding-top:28px}
.bandeau{order:-2;position:relative;overflow:hidden;margin:0 -32px 24px;padding:24px 32px;color:#fff;
  background:linear-gradient(135deg,#0B2A5B 0%,#1D4FA3 60%,#1570EF 100%);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bandeau::before{content:'';position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:36px 36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.bandeau>*{position:relative}
.bandeau .texte{flex:1;min-width:240px}
.bandeau h1{color:#fff;font-size:26px;font-weight:600;margin:0}
.bandeau .infos{font-size:13px;color:#CFE2FA;margin:2px 0 0}
.bandeau .infos.dessus{margin:0 0 4px;font-weight:600}
.onglets-rubrique{order:-1;display:flex;gap:26px;margin:-48px -32px 24px;padding:0 32px;height:48px;align-items:flex-end;position:relative;z-index:1;overflow-x:auto;scrollbar-width:none}
.onglets-rubrique a{display:inline-flex;align-items:center;gap:8px;padding:10px 2px 12px;color:#CFE2FA;font-weight:700;font-size:14px;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.onglets-rubrique a:hover{color:#fff}
.onglets-rubrique a.actif{color:#fff;border-bottom-color:#fff}
main.contenu:has(>.onglets-rubrique)>.bandeau{margin-bottom:0;padding-bottom:62px}
main.contenu:not(:has(>.bandeau))>.onglets-rubrique{margin:0 0 20px;padding:0;border-bottom:1px solid var(--bordure)}
main.contenu:not(:has(>.bandeau))>.onglets-rubrique a{color:var(--texte-doux)}
main.contenu:not(:has(>.bandeau))>.onglets-rubrique a.actif{color:var(--marque);border-bottom-color:var(--marque)}
.retour-page{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin:0 0 10px;padding:6px 12px 6px 8px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--texte);background:var(--carte);border:1px solid var(--bordure);text-decoration:none}
.retour-page:hover{border-color:var(--marque);color:var(--marque)}
.retour-page .ic{width:16px;height:16px}
.entete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.entete h1{margin-bottom:4px}

/* ---------- 4. Composants : cartes, chiffres, boutons, pastilles, messages ---------- */
.carte{position:relative;background:var(--carte);border:1px solid var(--bordure);border-radius:var(--rayon);padding:20px 22px;margin-bottom:18px}
.carte>h2:first-child{margin-top:0}
.carte p:last-child{margin-bottom:0}
.bande-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--carte);border:1px solid var(--bordure);border-radius:var(--rayon);margin-bottom:24px;overflow:hidden}
.bande-chiffres>*{padding:18px 20px;border-right:1px solid var(--ligne);display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none}
.bande-chiffres>*:last-child{border-right:0}
.bande-chiffres span{font-size:13px;font-weight:600;color:var(--gris)}
.bande-chiffres b{font-family:var(--titres);font-size:22px;font-weight:600;color:var(--texte)}
.bande-chiffres small{font-size:12px;color:var(--gris)}
.bande-chiffres .resultat{background:var(--fond-doux)}
b.vert,.bande-chiffres b.vert,td.plus{color:var(--vert)}
b.rouge,.bande-chiffres b.rouge,td.moins{color:var(--rouge)}
.vide-accueil{text-align:center;padding:36px 24px}
.vide-accueil p{max-width:560px;margin-left:auto;margin-right:auto;color:var(--texte-doux)}
.grande-icone{width:40px;height:40px;color:var(--marque);margin-bottom:8px}
.actions-carte{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--rayon-petit);border:1px solid var(--bordure);
  background:var(--carte);color:var(--texte-doux);text-decoration:none;font:600 13.5px/1.2 var(--corps);cursor:pointer}
.btn:hover{border-color:var(--bordure-forte);color:var(--marque)}
.btn.plein{background:var(--marque);border-color:var(--marque);color:#fff}
.btn.plein:hover{background:var(--marque-fonce);color:#fff}
.btn.danger{color:var(--rouge);border-color:var(--rouge-fond)}
.btn.danger:hover{background:var(--rouge-fond)}
.btn.large{width:100%;padding:12px 18px;font-size:14.5px;margin-top:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.pastille{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--fond-2);color:var(--gris)}
.pastille.ok{background:var(--vert-fond);color:var(--vert-texte)}
.pastille.alerte{background:var(--rouge-fond);color:var(--rouge-texte)}
.messages p{padding:11px 14px;border-radius:12px;margin:0 0 14px;font-size:13.5px;border:1px solid transparent}
.messages .success{background:var(--vert-fond);color:var(--vert-texte)}
.messages .error{background:var(--rouge-fond);color:var(--rouge-texte)}
.messages .info,.messages .warning{background:var(--bleu-fond);color:var(--bleu-texte)}
.bandeau-info{padding:11px 14px;border-radius:12px;background:var(--bleu-fond);color:var(--bleu-texte)}
.membre-cellule{display:flex;align-items:center;gap:10px}
tr.inactif td{opacity:.6}
.bandeau .actions{display:flex;gap:10px;flex-wrap:wrap}
.bandeau .actions a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font:700 14px var(--corps);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.bandeau .actions .principal-action{background:#fff;color:var(--marque);border-color:#fff}
.actions-entete{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-lien{border:0;background:none;padding:0;font:600 13px var(--corps);color:var(--marque);cursor:pointer;text-decoration:none}
.btn-lien.danger{color:var(--rouge)}
/* listes du tableau de bord et du journal */
.tableau-deux{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.tableau-deux.egal{grid-template-columns:1fr 1fr}
.tableau-deux>.carte{margin:0}
.carte.liste{padding:0;overflow:hidden}
.tete-liste{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px}
.tete-liste h2{margin:0}
.tete-liste a{font-size:13px;font-weight:700;text-decoration:none}
.liste-vide{padding:4px 20px 18px;color:var(--gris)}
.pied-liste{padding:12px 20px;border-top:1px solid var(--ligne);margin:0;font-size:13px}
.pied-liste a{text-decoration:none;font-weight:600}
.liste-ops,.liste-comptes{list-style:none;margin:0;padding:0}
.ligne-op,.liste-comptes li{display:flex;align-items:center;gap:12px;padding:11px 20px;border-top:1px solid var(--ligne)}
.liste-ops li.jour{padding:14px 20px 6px;font-size:12px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;border-top:1px solid var(--ligne)}
.liste-ops li.jour:first-child{border-top:0}
.pastille-sens{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;background:var(--rouge-fond);color:var(--rouge)}
.pastille-sens.revenu{background:var(--vert-fond);color:var(--vert)}
.pastille-sens.vir{background:var(--bleu-fond);color:var(--marque)}
.ic-compte{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--bleu-fond);color:var(--marque)}
.op-texte{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.op-texte b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-texte .petit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-montant{flex:none;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;display:flex;flex-direction:column}
.op-montant small{font-weight:500;color:var(--gris)}
.op-montant.plus,td.plus{color:var(--vert)}
.op-montant.moins,td.moins{color:var(--rouge)}
.op-action{flex:none;margin:0}
/* journal */
.nav-mois{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.nav-mois b{font:600 16px var(--titres);min-width:140px;text-align:center}
.nav-mois .btn{padding:6px 12px}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filtres input,.filtres select{width:auto;flex:1 1 150px}
.filtres .btn{flex:none}
/* saisie d'une opération */
.raccourcis{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.puce{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--fond-2);color:var(--texte);text-decoration:none;border:1px solid var(--bordure)}
.puce:hover{border-color:var(--marque);color:var(--marque)}
.carte.saisie form.formulaire{max-width:760px}
.bascule-sens{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;max-width:420px}
.bascule-sens label{display:flex;justify-content:center;align-items:center;padding:11px;border-radius:10px;border:1.5px solid var(--bordure-forte);font-weight:700;cursor:pointer;color:var(--texte-doux)}
.bascule-sens input{position:absolute;opacity:0;pointer-events:none}
.bascule-sens .sens-depense:has(input:checked){background:var(--rouge-fond);border-color:var(--rouge);color:var(--rouge)}
.bascule-sens .sens-revenu:has(input:checked){background:var(--vert-fond);border-color:var(--vert);color:var(--vert)}
.bascule-sens label:has(input:focus-visible){outline:2px solid var(--marque);outline-offset:2px}
.champ-montant input{font:700 28px var(--titres);padding:12px 14px;max-width:420px}
.grille-saisie{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grille-saisie .champ.large{grid-column:1/-1}
.actions-saisie{display:flex;gap:10px;flex-wrap:wrap}
.zone-suppression{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne)}
/* factures et échéances */
.pastille.attention{background:var(--ambre-fond);color:var(--ambre-texte)}
.pastille-date{flex:none;width:44px;height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fond-2);line-height:1.05}
.pastille-date b{font:700 16px var(--titres)}
.pastille-date small{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--gris)}
.echeance.en_retard .pastille-date{background:var(--rouge-fond);color:var(--rouge)}
.echeance.aujourdhui .pastille-date{background:var(--ambre-fond);color:var(--ambre-texte)}
.echeance.payee .op-texte b,.echeance.sautee .op-texte b{color:var(--gris)}
.echeance.sautee .op-montant{text-decoration:line-through;color:var(--gris)}
.actions-echeance{display:flex;align-items:center;gap:12px}
.actions-echeance form{margin:0}
.btn.petit-btn{padding:6px 12px;font-size:12.5px}
.carte.alerte-liste{border-color:var(--rouge-fond)}
.calendrier-grille{padding:0;overflow:hidden}
.cal-tete,.cal-semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-tete span{padding:8px;font-size:12px;font-weight:700;color:var(--gris);text-transform:capitalize;background:var(--fond-doux);border-bottom:1px solid var(--bordure)}
.cal-jour{min-height:92px;padding:6px;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-jour:nth-child(7n){border-right:0}
.cal-jour.hors{background:var(--fond-doux);color:var(--gris-clair)}
.cal-jour.aujourdhui .cal-num{background:var(--marque);color:#fff;border-radius:999px;padding:0 7px}
.cal-num{align-self:flex-start;font-size:12.5px;font-weight:700}
.cal-ev{display:block;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--bleu-fond);color:var(--bleu-texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.payee{background:var(--vert-fond);color:var(--vert-texte)}
.cal-ev.sautee{background:var(--fond-2);color:var(--gris);text-decoration:line-through}
.cal-ev.en_retard{background:var(--rouge-fond);color:var(--rouge-texte)}
/* bilans et prévision */
.barres{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.barre-tete{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:5px}
.barre-nom a{color:var(--texte);text-decoration:none;font-weight:600}
.barre-nom a:hover{color:var(--marque)}
.barre-montant{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.barre-montant small{font-weight:600;color:var(--gris);margin-left:4px}
.barre-fond{height:8px;border-radius:99px;background:var(--fond-2);overflow:hidden}
.barre-fond i{display:block;height:100%;border-radius:99px;background:var(--marque)}
.barre-fond i.rouge{background:#E5484D}.barre-fond i.vert{background:#2FB457}
.barre-ecart{display:block;margin-top:3px;font-size:12px;color:var(--gris)}
.barre-ecart.hausse{color:var(--rouge)}.barre-ecart.baisse{color:var(--vert)}
.liste-simple{list-style:none;margin:0 0 6px;padding:0}
.liste-simple li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--ligne)}
.liste-simple li:first-child{border-top:0}
.liste-simple small{color:var(--gris);font-weight:600;margin-left:4px}
.graphique-annee{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:190px;margin:8px 0 6px}
.g-mois{display:flex;flex-direction:column;align-items:center;height:100%;text-decoration:none;color:var(--gris);border-radius:8px;padding:4px 0}
.g-mois:hover{background:var(--fond-doux)}
.g-mois.futur{opacity:.35}
.g-barres{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.g-barres i{width:min(16px,38%);border-radius:4px 4px 0 0;min-height:2px}
.g-barres i.vert{background:#2FB457}.g-barres i.rouge{background:#E5484D}
.g-nom{font-size:11.5px;font-weight:600;margin-top:4px;text-transform:capitalize}
.legende-graphique{font-size:12.5px;color:var(--gris);display:flex;gap:14px;align-items:center}
.puce-couleur{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-8px}
.puce-couleur.vert{background:#2FB457}.puce-couleur.rouge{background:#E5484D}
.tableau-annee{margin-top:14px}
.grand-chiffre{font:700 32px var(--titres);margin:4px 0 0;letter-spacing:-.5px}
.grand-chiffre.rouge{color:var(--rouge)}
.encadre-info{display:inline-block;padding:6px 12px;border-radius:10px;background:var(--bleu-fond);color:var(--bleu-texte);font-weight:600;font-size:13.5px}
.calcul{list-style:none;margin:14px 0 8px;padding:0}
.calcul li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--ligne);font-size:13.5px}
.calcul li.detail{border-top:0;padding:2px 0 2px 14px;font-size:12.5px;color:var(--gris)}
.calcul b{font-variant-numeric:tabular-nums}
.calcul .plus{color:var(--vert)}.calcul .moins{color:var(--rouge)}
.bande-prevision{display:grid;grid-template-columns:1fr 1fr;background:var(--carte);border:1px solid var(--bordure);border-radius:var(--rayon);margin-bottom:24px;overflow:hidden;text-decoration:none;color:inherit}
.bande-prevision>span{display:flex;flex-direction:column;gap:2px;padding:16px 20px}
.bande-prevision>span+span{border-left:1px solid var(--ligne)}
.bande-prevision small{font-size:12.5px;color:var(--gris);font-weight:600}
.bande-prevision b{font:600 22px var(--titres);color:var(--texte)}
.bande-prevision b.rouge{color:var(--rouge)}
.bande-prevision b.lien-texte{font-size:16px;color:var(--marque)}
.bande-prevision:hover{border-color:var(--bordure-forte)}
/* activités */
.grille-activites{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:18px}
.carte-activite{display:block;margin:0;text-decoration:none;color:inherit}
.carte-activite:hover{border-color:var(--bordure-forte)}
.ca-tete{display:flex;align-items:center;gap:10px;font:600 16px var(--titres);margin-bottom:6px}
.ca-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ca-chiffres span{display:flex;flex-direction:column}
.ca-chiffres small{font-size:12px;color:var(--gris);font-weight:600}
.ca-chiffres b{font:600 16px var(--titres);font-variant-numeric:tabular-nums}
.choix-periode{display:flex;gap:6px;margin-bottom:10px}
.puce.actif{background:var(--nuit);border-color:var(--nuit);color:#fff}
[data-theme="dark"] .puce.actif{background:var(--marque);border-color:var(--marque)}
.raccourcis.pad,.liste-simple.pad{padding:0 20px 14px}
.carte.liste>table{border:0;border-top:1px solid var(--ligne);border-radius:0}
.formulaire.grille-saisie-form{max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.formulaire.grille-saisie-form>.champ:has(textarea),.formulaire.grille-saisie-form>.actions-saisie,.formulaire.grille-saisie-form>p{grid-column:1/-1}
/* budget et objectifs */
.enveloppes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.enveloppes .barre-fond{position:relative;height:10px;overflow:visible}
.enveloppes .barre-fond i{background:#2FB457}
.enveloppes .attention .barre-fond i{background:#F5A524}
.enveloppes .depasse .barre-fond i{background:#E5484D}
.enveloppes .depasse .barre-ecart{color:var(--rouge);font-weight:600}
.repere-mois{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--texte);opacity:.45;border-radius:2px}
.barre-fond.grande{height:14px;margin-bottom:18px}
.objectif-chiffres{margin:6px 0}
.objectif-chiffres b{font:600 20px var(--titres)}
.saisie-enveloppes input{max-width:180px}
/* patrimoine */
.liste-cartes{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:16px}
.liste-cartes li.alerte .barre-nom b{color:var(--rouge)}
.barre-fond i.orange{background:#F5A524}
.actions-ligne{margin:6px 0 0}
/* import */
.tableau-import select{min-width:170px;padding:6px 8px;font-size:13px}
.tableau-import td{vertical-align:top}
/* catégories */
.liste-categories{list-style:none;margin:0;padding:0 0 8px}
.liste-categories>li{border-top:1px solid var(--ligne);padding:10px 20px}
.liste-categories ul{list-style:none;margin:6px 0 0;padding:0 0 0 16px;border-left:2px solid var(--ligne)}
.liste-categories ul li{padding:3px 0 3px 10px;font-size:13.5px;color:var(--texte-doux)}
.cat-ligne{display:flex;align-items:center;gap:8px}
.cat-ligne .btn-lien{margin-left:auto}
.liste-categories li.inactif>.cat-ligne{opacity:.6}
input.montant{font-variant-numeric:tabular-nums}
.premiers-comptes td input[type=checkbox]{width:20px;height:20px}
/* double authentification */
.code-saisie{font:600 22px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:.35em;text-align:center}
.qr img{width:200px;height:200px;border:1px solid var(--bordure);border-radius:14px;padding:8px;background:#fff;margin:10px 0}
.etapes{padding-left:20px;display:grid;gap:18px}
.codes-secours{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:8px;margin:16px 0}
.codes-secours span{font-family:ui-monospace,Menlo,Consolas,monospace;padding:8px 11px;border:1px dashed var(--bordure-forte);border-radius:10px;text-align:center}

/* ---------- 5. Formulaires ---------- */
input,select,textarea{width:100%;font:13.5px var(--corps);color:var(--texte);background:var(--carte);padding:9px 12px;border:1.5px solid var(--bordure-forte);border-radius:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marque);box-shadow:var(--focus)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--marque);padding:0;vertical-align:middle}
textarea{min-height:100px;resize:vertical}
form.formulaire{max-width:680px}
.champ{margin:0 0 16px}
.champ>label{display:block;font-size:13px;font-weight:600;color:var(--texte-doux);margin-bottom:6px}
.helptext{display:block;margin-top:5px;font-size:12px;color:var(--gris);line-height:1.45}
.helptext ul{margin:4px 0 0;padding-left:18px}
small.erreur{display:block;margin-top:5px;font-size:12.5px;font-weight:500}
fieldset.choix-cartes{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
fieldset.choix-cartes legend{font-size:13px;font-weight:600;color:var(--texte-doux);margin-bottom:6px;padding:0}
.choix-carte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--bordure-forte);border-radius:12px;background:var(--carte);cursor:pointer;font-size:13.5px;font-weight:500;color:var(--texte)}
.choix-carte input{margin-top:2px}
.choix-carte:has(input:checked){border-color:var(--marque);background:var(--bleu-fond)}
.auth fieldset.choix-cartes legend{color:#2A3854}
.auth .choix-carte{background:#fff;border-color:#DFE5EF;color:#16233D}
.auth .choix-carte:has(input:checked){border-color:#3D6FD1;background:#EEF3FC}
label.case{display:flex;gap:8px;align-items:center;margin:6px 0 10px;font-size:13.5px;font-weight:500;cursor:pointer}
.champ-mdp{position:relative;display:block}
.champ-mdp>input{padding-right:46px}
.oeil-mdp{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--gris);cursor:pointer;padding:0}
.oeil-mdp:hover{color:var(--texte);background:var(--fond-2)}

/* ---------- 6. Tableaux ---------- */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{text-align:left;padding:12px 14px;font-size:13.5px;vertical-align:middle}
th{font-size:12px;font-weight:700;color:var(--gris);background:var(--fond-doux);border-bottom:1px solid var(--bordure)}
td{border-top:1px solid var(--ligne);color:var(--texte)}
tbody tr:first-child td{border-top:none}
tr:hover td{background:var(--fond-doux)}
.carte>table{border:1px solid var(--bordure);border-radius:10px;overflow:hidden}
th.d,td.d{text-align:right}
td form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}

/* ---------- 7. Pages de connexion (vitrine bleu nuit à gauche, formulaire à droite), page hors ligne ---------- */
body.auth{display:flex;min-height:100vh;background:#F5F7FB;color:#16233D}
.auth .vitrine{flex:1.25;position:relative;overflow:hidden;color:#fff;padding:48px 56px;display:flex;flex-direction:column;
  background:radial-gradient(1200px 600px at 10% -10%,#1F3F7A 0%,transparent 60%),linear-gradient(160deg,#0B1A33 0%,#13284F 55%,#1B3B78 100%)}
.auth .grille{position:absolute;inset:0;opacity:.07;pointer-events:none;background-size:44px 44px;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
.auth .halo{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.auth .halo.un{width:420px;height:420px;background:#2F63D6;opacity:.35;right:-120px;top:18%}
.auth .halo.deux{width:300px;height:300px;background:#12A37A;opacity:.18;left:-80px;bottom:-60px}
.auth .entete-vitrine,.auth .accroche{position:relative;z-index:1}
.auth .marque{display:flex;align-items:center;gap:14px}
.auth .marque .embleme{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff}
.auth .marque .embleme img{width:34px;height:auto}
.auth .marque .nom{font:700 19px var(--titres);letter-spacing:.8px}
.auth .marque .produit{font-weight:600;color:#8FE24A}
.auth .baseline{font-size:12px;color:#8FB4FF;margin-top:2px}
.auth .lisere{display:flex;width:54px;height:4px;border-radius:4px;overflow:hidden;margin-top:18px}
.auth .lisere span{flex:1}.auth .lisere .l1{background:#1570EF}.auth .lisere .l2{background:#8FB4FF}.auth .lisere .l3{background:#2FB457}
.auth .accroche{margin:auto 0;padding:40px 0 24px;max-width:560px}
.auth .pastille-vitrine{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#DBE6FF;margin-bottom:22px}
.auth .pastille-vitrine .point{width:7px;height:7px;border-radius:50%;background:#34D399}
.auth .accroche h1{font:800 clamp(28px,2.7vw,42px)/1.12 var(--titres);letter-spacing:-.8px;color:#fff;margin:0}
.auth .accroche h1 em{font-style:normal;background:linear-gradient(90deg,#9CC0FF,#6EE7B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth .accroche p{margin:18px 0 0;font-size:15.5px;line-height:1.65;color:#C5D3EE;max-width:500px}
.auth .atouts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.auth .atout{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.auth .atout .icone{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(143,180,255,.14);color:#8FB4FF}
.auth .atout strong{display:block;font:700 14px var(--titres);margin-bottom:3px}
.auth .atout span{font-size:12.5px;line-height:1.5;color:#AEBFDF}
.auth .connexion{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px 64px;position:relative}
.auth .carte-connexion{width:100%;max-width:420px}
.auth .haut-connexion{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.auth .salutation{font-size:13.5px;font-weight:600;color:#2F5496}
.auth .carte-connexion h1{font:800 28px/1.2 var(--titres);letter-spacing:-.5px;margin:0;color:#16233D}
.auth .carte-connexion h1+.petit{color:#6B7A93;font-size:14.5px;margin:8px 0 26px}
.auth .carte-connexion .champ>label{color:#2A3854}
.auth .carte-connexion input:not([type=checkbox]),.auth .carte-connexion select{font-size:15px;padding:13px 14px;border-radius:12px;border-color:#DFE5EF;background:#fff;color:#16233D}
.auth .carte-connexion .btn.plein{padding:14px 18px;border-radius:12px;font:700 15.5px var(--titres);background:linear-gradient(135deg,#2F5496 0%,#3D6FD1 100%);border:0}
.auth .auth-lien{text-align:center;margin:14px 0 0}
.auth .aide-connexion{margin-top:20px;padding:14px 16px;border-radius:12px;background:#fff;border:1px dashed #DFE5EF;font-size:13px;color:#6B7A93}
.auth .aide-connexion p{margin:0}
.auth .securite{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#8B98AE}
.auth .securite .ic{width:14px;height:14px}
.auth .pied{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:11.5px;color:#A4AFC1;margin:0}
.auth form.langue{background:#fff}
.auth .installer{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:10px;border:1px dashed #DFE5EF;border-radius:12px;background:none;color:#2F5496;font:600 13px var(--corps);cursor:pointer}
body.hors-ligne{display:grid;place-items:center;min-height:100vh;padding:24px}
.hors-ligne-boite{max-width:440px;text-align:center;background:var(--carte);border:1px solid var(--bordure);border-radius:var(--rayon);padding:32px}
.hors-ligne-marque{font:700 18px var(--titres)}.hors-ligne-marque em{font-style:normal;color:var(--vert-nyba)}

/* ---------- 8. Écrans moyens et téléphone ---------- */
@media(max-width:1000px){
  .barre-laterale{transform:translateX(-100%)}
  .menu-toggle:checked~.barre-laterale{transform:none}
  .menu-toggle:checked~.voile{display:block;position:fixed;inset:0;z-index:35;background:rgba(11,26,51,.45)}
  .principal{margin-left:0}
  .bouton-menu{display:grid}
  .barre-haut{padding:10px 16px}
  main.contenu{padding:0 16px 40px}
  main.contenu:not(:has(>.bandeau)){padding-top:18px}
  .bandeau,.onglets-rubrique{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .tableau-deux,.tableau-deux.egal{grid-template-columns:1fr}
  .auth .vitrine{padding:40px 36px}
}
@media(max-width:860px){
  body:not(.auth){padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .barre-haut{background:var(--nuit);border-bottom:0;color:#fff}
  .barre-haut .bouton-menu,.barre-haut .bouton-rond{background:rgba(255,255,255,.15);border:0;color:#fff}
  .titre-mobile{display:block;flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barre-haut form.langue{display:none}
  details.compte-menu .qui{display:none}
  details.compte-menu .menu-deroulant{position:fixed;left:12px;right:12px;top:60px;width:auto}
  .barre-bas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:var(--carte);border-top:1px solid var(--bordure)}
  .barre-bas a,.barre-bas label{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px;color:var(--gris);text-decoration:none;font-size:11px;font-weight:600;cursor:pointer;min-width:0}
  .barre-bas span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barre-bas .ic{width:21px;height:21px}
  .barre-bas a.actif{color:var(--marque)}
  .bandeau h1{font-size:22px}
  .bande-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bande-chiffres>*{border-bottom:1px solid var(--ligne)}
  .carte{padding:16px}
  .carte.liste{padding:0}
  .ligne-op,.liste-comptes li,.tete-liste{padding-left:14px;padding-right:14px}
  .ligne-op{flex-wrap:wrap}
  .ligne-op .op-action{width:100%;padding-left:44px}
  .grille-saisie,.formulaire.grille-saisie-form{grid-template-columns:1fr}
  .calendrier-grille{display:none}  /* sur téléphone, la liste des échéances du mois suffit */
  .bande-prevision{grid-template-columns:1fr}
  .bande-prevision>span+span{border-left:0;border-top:1px solid var(--ligne)}
  .graphique-annee{height:150px;gap:2px}
  .g-nom{font-size:10px}
  .champ-montant input{max-width:none}
  .actions-saisie .btn{flex:1 1 100%}
  .bandeau .actions,.bandeau .actions a{width:100%;justify-content:center}
  input,select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
  .btn{min-height:42px}
  /* tableaux -> cartes (mobile.js) */
  table.en-cartes,table.en-cartes tbody{display:block}
  table.en-cartes thead{display:none}
  .carte:has(>table.en-cartes){background:transparent;border:0;padding:0}
  .carte>table.en-cartes{border:0;overflow:visible}
  table.en-cartes tr{display:block;background:var(--carte);border:1px solid var(--bordure);border-radius:14px;padding:8px 14px;margin-bottom:10px}
  table.en-cartes td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 0;border:0;text-align:right}
  table.en-cartes td+td{border-top:1px dashed var(--ligne)}
  table.en-cartes td::before{content:attr(data-label);flex:none;max-width:46%;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gris)}
  table.en-cartes td:first-child{text-align:left;font-size:14.5px;font-weight:700}
  table.en-cartes td:first-child::before,table.en-cartes td.sans-titre::before{display:none}
  table.en-cartes td.sans-titre{display:block;text-align:left}
  tr:hover td{background:transparent}
  body.auth{flex-direction:column}
  .auth .vitrine{flex:none;padding:28px 24px 34px}
  .auth .accroche{padding-top:26px}
  .auth .accroche h1{font-size:27px}
  .auth .atouts{display:none}
  .auth .connexion{padding:32px 20px 72px}
}
@media(max-width:600px){
  .auth .vitrine{padding:22px 20px 24px}
  .auth .pastille-vitrine,.auth .accroche p{display:none}
  .auth .accroche h1{font-size:22px}
  .auth .carte-connexion h1{font-size:23px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- 9. Impression : toujours claire ---------- */
@media print{
  .barre-laterale,.barre-haut,.barre-bas,.voile,.retour-page,.onglets-rubrique,.messages{display:none!important}
  .principal{margin-left:0}main.contenu{padding:0}
  .bandeau{color:#000;background:none;margin:0 0 12px;padding:0}.bandeau h1,.bandeau .infos{color:#000}
  @page{size:A4;margin:14mm}
}