/* ==========================================================================
   Thème « A · Clair & coloré » : fond gris bleuté, cartes blanches, accent indigo,
   une couleur par domaine (pro orange, perso vert, CCA violet, TVA bleu, IS rose).
   Contrastes : textes courants >= 4,5:1 sur blanc et sur --fond.
   ========================================================================== */
:root {
    --fond: #f4f6fb; --carte: #fff; --texte: #1b2130; --doux: #5d6679; --bord: #e4e8f0; --rayon: 14px;
    --ombre: 0 1px 2px rgba(16, 24, 40, .05); --ombre-survol: 0 8px 24px rgba(16, 24, 40, .08);
    --accent: #4f46e5; --accent-clair: #6366f1; --accent-fonce: #4338ca; --accent-fond: #eef2ff;
    --accent-degrade: linear-gradient(135deg, #6366f1, #06b6d4);
    --menu-survol: #f2f4f7;
    --vert: #16a34a; --vert-texte: #15803d; --vert-fond: #dcfce7; --vert-badge: #166534;
    --rouge: #dc2626; --rouge-fond: #fee2e2;
    --danger: #dc2626; --danger-texte: #b91c1c; --danger-fond: #fef2f2;
    --attention: #b45309; --attention-fond: #fffbeb; --info: #1d4ed8; --info-fond: #eff6ff;
    --c-pro: #f97316; --c-perso: #22c55e; --c-cca: #7c3aed; --c-tva: #0284c7; --c-is: #db2777;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--texte); background: var(--fond); }

/* ---------- Structure et menu ---------- */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--carte); border-right: 1px solid var(--bord); padding: 18px 12px; }
.menu-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 18px; }
.menu-titre { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin: 0 4px 12px; }
.logo-carre { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-degrade); display: grid; place-items: center;
    color: #fff; font-style: normal; font-size: 16px; }
.menu-groupe { color: var(--doux); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 16px 8px 6px; }
.menu-nav a { display: flex; align-items: center; gap: 10px; color: #344054; text-decoration: none; padding: 8px 10px; border-radius: 8px;
    font-size: 14px; transition: background .2s, color .2s, transform .2s; }
.menu-nav a:hover { background: var(--menu-survol); transform: translateX(2px); }
.menu-nav a.active { background: var(--accent-fond); color: var(--accent-fonce); font-weight: 600; }
.menu-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-icone { width: 18px; text-align: center; flex: 0 0 18px; }
/* « Se déconnecter » : un bouton de formulaire (envoi POST), présenté comme les liens du menu. */
.menu-bouton { display: flex; align-items: center; gap: 10px; width: 100%; color: #344054; padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .2s; }
.menu-bouton:hover { background: var(--menu-survol); }
.menu-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.contenu { padding: 22px 28px; min-width: 0; }
h1 { font-size: 22px; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 24px 0 10px; }
.titre-icone { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 17px; font-weight: 400;
    background: var(--accent-fond); color: var(--accent-fonce); flex: 0 0 34px; }
.barre-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--doux); margin-bottom: 14px; }

/* ---------- Cartes et panneaux ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.carte, .panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 16px 18px; transition: transform .2s, box-shadow .2s; }
.panneau { margin-bottom: 16px; }
.carte { position: relative; overflow: hidden; }
.carte:hover, .panneau:hover { box-shadow: var(--ombre-survol); }
/* Légère élévation au survol, limitée aux cartes compactes (un transform sur les grands panneaux gênerait les popups). */
.carte:hover, .echeances .panneau:hover, .blocs-cles .panneau:hover { transform: translateY(-2px); }
.carte-titre { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: 13px; }
.carte-valeur { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.carte-detail { color: var(--doux); font-size: 12px; margin-top: 2px; }
.cartes-principales { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 14px; }
.cartes-principales .carte { padding: 18px 22px 18px 26px; }
.cartes-principales .carte-titre { font-size: 15px; }
.cartes-principales .carte-valeur { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.cartes-principales .carte-detail { font-size: 13px; margin-top: 4px; }
.bande { position: absolute; inset: 0 auto 0 0; width: 5px; }
.pastille-icone { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 17px; flex: 0 0 34px;
    background: var(--accent-fond); color: var(--accent-fonce); }
.c-pro .pastille-icone { background: #fff4e5; color: #ea580c; } .c-pro .bande { background: var(--c-pro); }
.c-perso .pastille-icone { background: #dcfce7; color: #16a34a; } .c-perso .bande { background: var(--c-perso); }
.c-cca .pastille-icone { background: #ede9fe; color: var(--c-cca); }
.c-tva .pastille-icone { background: #e0f2fe; color: var(--c-tva); }
.c-is .pastille-icone { background: #fce7f3; color: var(--c-is); }
/* Variation de solde : la flèche et le signe portent l'information, la couleur ne fait que la souligner. */
.tendance { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle;
    background: var(--accent-fond); color: var(--accent-fonce); }
.tendance-fleche { margin-right: 4px; }
.tendance.seule { margin-left: 0; }
.tendance.hausse { background: var(--vert-fond); color: var(--vert-badge); }
.tendance.baisse { background: var(--rouge-fond); color: var(--danger-texte); }
.negatif { color: var(--rouge); } .positif { color: var(--vert-texte); }

/* Apparition des cartes au chargement (fill-mode backwards : ne bloque pas l'élévation au survol ensuite). */
@keyframes apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.carte, .panneau { animation: apparition .5s ease backwards; }
.panneau-graphe { width: 100%; }
.cartes > :nth-child(2), .echeances > :nth-child(2), .blocs-cles > :nth-child(2) { animation-delay: .06s; }
.echeances > :nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
    .carte, .panneau { animation: none; }
    .carte, .panneau, .menu-nav a { transition: none; }
    .carte:hover, .echeances .panneau:hover, .blocs-cles .panneau:hover, .menu-nav a:hover { transform: none; }
}

/* ---------- Choix du scénario (en-tête du graphe), pied de page ---------- */
.outils-graphe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.outils-bloc { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.choix-scenario { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux); }
.choix-scenario select { padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; font-size: 13px; color: var(--texte); background: var(--carte); }
.choix-scenario input[type=search] { padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; font-size: 13px;
    color: var(--texte); background: var(--carte); width: 170px; }
.pied-page { color: var(--doux); font-size: 12px; text-align: right; margin: -8px 4px 12px; }

/* ---------- Alertes (icône en tête, texte alternatif vide : le message suffit) ---------- */
.alertes { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.alerte { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; border: 1px solid transparent; }
.alerte::before { flex: 0 0 auto; font-weight: 700; }
.alerte a { color: inherit; text-decoration: none; } .alerte a:hover { text-decoration: underline; }
.alerte-danger { background: var(--danger-fond); color: var(--danger-texte); border-color: #fecaca; }
.alerte-danger::before { content: "⛔" / ""; }
.alerte-attention { background: var(--attention-fond); color: var(--attention); border-color: #fde68a; }
.alerte-attention::before { content: "⚠" / ""; }
.alerte-info { background: var(--info-fond); color: var(--info); border-color: #dbeafe; }
.alerte-info::before { content: "ℹ" / ""; }

/* ---------- Formulaires, filtres, tables ---------- */
.actions { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); }
.formulaire label.case { flex-direction: row; align-items: center; gap: 8px; color: var(--texte); }
.formulaire input, .formulaire select, .formulaire textarea, .filtres input, .filtres select {
    padding: 7px 10px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; color: var(--texte); background: var(--carte);
    transition: border-color .15s, box-shadow .15s; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus, .filtres input:focus, .filtres select:focus,
.choix-scenario select:focus, .choix-scenario input:focus { outline: none; border-color: var(--accent-clair); box-shadow: 0 0 0 3px var(--accent-fond); }
.formulaire input[type=checkbox] { accent-color: var(--accent); }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; padding: 12px 14px; background: var(--carte);
    border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.filtres label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); }
.table-simple { width: 100%; border-collapse: collapse; background: var(--carte); font-size: 14px; }
.table-simple th { background: #f8fafc; color: #475467; font-weight: 600; font-size: 13px; }
.table-simple th, .table-simple td { padding: 7px 10px; border-bottom: 1px solid var(--bord); text-align: left; }
.table-simple tbody tr:hover td { background: #f5f7ff; }
.table-simple input { padding: 5px 8px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; color: var(--texte); }
.nombre { text-align: right !important; font-variant-numeric: tabular-nums; }
.aide { color: var(--doux); font-size: 13px; }
.badge { background: var(--accent-fond); color: var(--accent-fonce); border-radius: 20px; padding: 1px 9px; font-size: 11px; font-weight: 600; margin-left: 6px; }
.colonnes { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.liste-scenarios { list-style: none; padding: 0; margin: 0; }
.liste-scenarios li { padding: 7px 8px; border-radius: 8px; transition: background .15s; }
.liste-scenarios li:hover { background: var(--menu-survol); }
.liste-scenarios li.selectionne { background: var(--accent-fond); }
.liste-scenarios li.selectionne .lien { color: var(--accent-fonce); font-weight: 600; }
.lien { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.erreur-globale { border-color: var(--danger); }

/* ---------- Plan prévisionnel : tableau mensuel ---------- */
.tableau-mensuel { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 16px; }
.colonne-mois { flex: 0 0 170px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 8px; min-height: 140px;
    box-shadow: var(--ombre); }
.colonne-mois.colonne-hors { background: var(--fond); opacity: .8; }
.colonne-mois.survol { border-color: var(--accent-clair); box-shadow: 0 0 0 3px var(--accent-fond); }
.colonne-entete { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.colonne-entete .titre { font-weight: 600; } .colonne-entete .net { color: var(--doux); font-variant-numeric: tabular-nums; }
.colonne-entete .net.negatif { color: var(--danger); }
.carte-flux { border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; cursor: grab; font-size: 13px; border: 1px solid transparent;
    transition: box-shadow .15s; }
.carte-flux:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.carte-flux.perso { background: #e7f6ec; border-color: #b7e1c4; } .carte-flux.pro { background: #fff1e0; border-color: #f5cf9f; }
.carte-flux .montant.negatif { color: var(--danger-texte); }
.grille-compacte .e-rowcell, .grille-compacte .e-headercell { padding-top: 2px !important; padding-bottom: 2px !important; font-size: 12.5px !important; }
.grille-compacte .e-headercell { height: 30px !important; }
.carte-flux.desactive { opacity: .45; filter: grayscale(1); }
/* Flux incertain : bordure pointillée grise, fond gardé selon le compte (pro / perso). */
.carte-flux.incertain { border-style: dashed; border-color: #98a2b3; }
.etiquette-incertain { background: #eef0f3; color: #475467; }
/* Flux désactivés : !important car les thèmes Syncfusion recolorent les cellules (survol, sélection). */
.e-grid .e-row.ligne-desactivee td { color: var(--doux) !important; opacity: .55; }
.e-grid .e-row.ligne-desactivee td:has(button) { opacity: 1; }
.carte-flux .libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-flux .montant { font-weight: 600; font-variant-numeric: tabular-nums; }
.etiquette { font-size: 11px; background: var(--accent-fond); color: var(--accent-fonce); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.etiquette-perso { background: #cdeed8; color: #1e6b3a; } .etiquette-pro { background: #fde0bd; color: #8a4b00; }
/* Cartes calculées par le moteur (salaire en bleu clair, cotisations en gris clair) : non déplaçables. */
.carte-flux.calculee { cursor: default; }
.carte-flux.calculee.salaire { background: #e3f0fc; border-color: #a9cdf0; cursor: pointer; }
.carte-flux.calculee.cotisations { background: #eef0f3; border-color: #d3d8df; }
.etiquette-salaire { background: #cfe4f9; color: #0f548c; } .etiquette-cotisations { background: #dde1e7; color: #4a5462; }

/* ---------- Tableau de bord : chiffres clés ---------- */
.blocs-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 1000px) { .blocs-cles { grid-template-columns: minmax(0, 1fr); } }
.blocs-cles .panneau { margin-bottom: 0; }
.bloc-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.bloc-entete h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bloc-entete a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bloc-entete a:hover { text-decoration: underline; }
.bloc-icone { font-size: 17px; }
/* Bascule segmentée (vue prudente / optimiste) : le bouton actif est plein indigo. */
.segments { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; padding: 2px; background: var(--fond); gap: 2px; flex: 0 0 auto; }
.segment { border: 0; background: transparent; color: var(--doux); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px;
    border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.segment:hover:not(.actif):not(:disabled) { background: var(--carte); color: var(--texte); }
.segment.actif { background: var(--accent); color: #fff; }
.segment:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 1px; }
.segment:disabled { cursor: default; }
.note-graphe { margin: 6px 0 0; }
.note-graphe a { color: var(--accent); font-weight: 600; text-decoration: none; }
.chiffre-cle { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bord); }
.chiffre-cle:last-child { border-bottom: none; }
.chiffre-libelle { color: var(--doux); font-size: 14px; }
.chiffre-detail { font-size: 12px; margin-left: 6px; } .chiffre-detail a { color: var(--accent); text-decoration: none; }
.chiffre-valeur { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre-valeur.negatif { color: var(--danger); }
.chiffre-cle.grand .chiffre-libelle { color: var(--texte); font-size: 15px; }
.chiffre-cle.grand .chiffre-valeur { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.chiffres-detail { margin-top: 10px; padding: 6px 12px; background: #f8fafc; border: 1px solid var(--bord); border-radius: 10px; }
.chiffres-detail .chiffre-cle { padding: 4px 0; font-size: 13px; } .chiffres-detail .chiffre-libelle { font-size: 13px; }
.chiffres-detail .chiffre-valeur { font-weight: 500; }

/* ---------- Tableau de bord : échéances (compte courant, TVA, IS) ---------- */
.echeances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 16px; }
@media (max-width: 1000px) { .echeances { grid-template-columns: minmax(0, 1fr); } }
.echeances .panneau { margin-bottom: 0; }
.echeance-valeur { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 6px; letter-spacing: -.01em; }
.echeances-compactes { margin-top: 0; gap: 14px; }
.echeances-compactes .panneau { padding: 12px 16px; }
.echeances-compactes h2 { font-size: 14px; font-weight: 600; margin: 0; color: var(--doux); }
.echeances-compactes .pastille-icone { width: 30px; height: 30px; flex-basis: 30px; font-size: 15px; border-radius: 9px; }
.echeances-compactes .echeance-valeur { font-size: 22px; margin: 6px 0 4px; }
.echeances-compactes .pastille { font-size: 11px; padding: 2px 9px; }
.echeances-compactes .aide, .echeances-compactes .echeance-ligne { font-size: 12px; margin-top: 4px; }
.echeance-ligne { font-size: 13px; color: var(--doux); margin-top: 8px; }
.echeance-ligne strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.pastille { background: var(--accent-fond); color: var(--accent-fonce); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }

/* ==========================================================================
   Surcharges Syncfusion (thème Fluent conservé) : !important seulement là où
   les sélecteurs du thème sont plus spécifiques.
   ========================================================================== */
.e-grid { border-color: var(--bord); border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); }
.e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-headercontent, .e-grid .e-detailheadercell { background-color: #f8fafc !important; }
.e-grid .e-headercell .e-headertext, .e-grid .e-headercell .e-headercelldiv { color: #475467 !important; font-weight: 600 !important; }
.e-grid .e-rowcell { border-color: var(--bord); }
.e-grid.e-gridhover .e-row:not(.e-disable-gridhover):hover .e-rowcell:not(.e-active),
.e-grid .e-row:hover .e-rowcell:not(.e-active) { background-color: #f5f7ff !important; }
.e-grid .e-rowcell.e-active, .e-grid .e-rowcell.e-selectionbackground { background-color: var(--accent-fond) !important; color: var(--texte) !important; }
.e-grid .e-pager .e-currentitem, .e-pager .e-currentitem.e-numericitem { background: var(--accent) !important; color: #fff !important; }

.e-btn.e-primary, .e-css.e-btn.e-primary { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background-color: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.e-btn.e-primary:focus, .e-btn.e-primary:active, .e-btn.e-primary.e-active,
.e-css.e-btn.e-primary:focus, .e-css.e-btn.e-primary:active { background-color: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.e-btn.e-primary:disabled, .e-btn.e-primary.e-disabled { background-color: #a5b4fc; border-color: #a5b4fc; color: #fff; }
.e-btn.e-flat:not(.e-primary) { color: var(--accent-fonce); }
.e-btn { border-radius: 8px; }

.e-tab .e-tab-header .e-indicator { background: var(--accent) !important; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text { color: var(--accent-fonce) !important; font-weight: 600; }
.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text { color: var(--accent) !important; }

.e-dialog { border-radius: var(--rayon) !important; }
.e-dialog .e-dlg-header, .e-dialog .e-dlg-header * { font-weight: 700; }
.e-dialog .e-dlg-header-content { border-bottom: 1px solid var(--bord); }
/* Graphiques : Syncfusion demande « Roboto », absente sous Windows (repli sur une police à empattements). */
.e-chart text { font-family: "Segoe UI", system-ui, sans-serif; }
/* Onglets : une grille plus large que l'écran (plan, 1200px) défile dans l'onglet au lieu d'élargir la page. */
.e-tab > .e-content > .e-item { overflow-x: auto; }

/* ---------- Rentrées et sorties perso ---------- */
.badge.nature-reel { background: var(--vert-fond); color: var(--vert-badge); }
.badge.nature-mixte { background: var(--attention-fond); color: var(--attention); }
.badge.nature-reel, .badge.nature-mixte { margin-left: 0; }
.sous-table tr.interne td { color: var(--doux); }

/* ---------- Détail : exercices, mois et mouvements dépliables ---------- */
/* overflow: clip (et non hidden) : arrondit le cadre sans empêcher l'en-tête collant de suivre le défilement de la page. */
.detail-cadre { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre); overflow: clip; }
.table-detail { font-size: 13px; }
.table-detail > thead th { position: sticky; top: 0; z-index: 1; }
.table-detail > thead th, .table-detail > tbody > tr > td { padding: 5px 12px; }
.table-detail > thead th:first-child { width: 28%; }
.table-detail > tbody > tr.exercice, .table-detail > tbody > tr.mois { cursor: pointer; }
.table-detail > tbody > tr.exercice > td { background: #f8fafc; font-weight: 700; border-top: 1px solid var(--bord); }
.table-detail > tbody > tr.mois > td:first-child { padding-left: 34px; }
.table-detail > tbody > tr.mois.en-cours > td { font-weight: 600; }
.table-detail > tbody > tr.mouvements > td, .table-detail > tbody > tr.mouvements:hover > td { background: #fbfcfe; padding: 4px 12px 12px 56px; }
.deplier { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.deplier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chevron { display: inline-block; width: 12px; color: var(--doux); transition: transform .15s; }
.deplier[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.table-detail .badge { margin-left: 8px; }
.sous-table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); font-size: 12.5px; }
.sous-table th { background: #f8fafc; color: #475467; font-weight: 600; text-align: left; }
.sous-table th, .sous-table td { padding: 3px 10px; border-bottom: 1px solid var(--bord); }
.sous-table .categorie { color: var(--doux); }
.sous-table select { padding: 1px 6px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; color: var(--texte);
    background: var(--carte); max-width: 170px; }
.sous-table select:focus { outline: none; border-color: var(--accent-clair); box-shadow: 0 0 0 3px var(--accent-fond); }
.table-detail > tfoot td { padding: 6px 12px; font-weight: 700; background: #f8fafc; border-top: 2px solid var(--bord); border-bottom: 0; }
.table-projets { max-width: 760px; }
.table-projets input { width: 100%; }
@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }

/* ---------- Pages de compte (connexion, double authentification) et page d'erreur : rendu statique, sans menu ---------- */
.compte { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 32px; }
.compte-carte { width: 100%; max-width: 440px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: var(--ombre-survol); padding: 26px 28px; }
.compte-marque { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.compte-marque .logo-carre { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
.compte h1 { font-size: 18px; }
.compte p, .compte li { color: var(--doux); font-size: 14px; line-height: 1.5; }
.compte a:not(.e-btn) { color: var(--accent); text-decoration: none; font-weight: 500; }
.compte a:not(.e-btn):hover { color: var(--accent-fonce); text-decoration: underline; }
.compte .formulaire { grid-template-columns: minmax(0, 1fr); }
.compte .formulaire input:not([type=checkbox]) { border-color: #d0d5dd; /* plus marqué que --bord : contraste des champs */ padding: 9px 12px; }
.compte .alerte { margin-bottom: 12px; }
.compte .validation-message { color: var(--danger-texte); font-size: 13px; }
.compte-etapes { padding-left: 20px; } .compte-etapes li { margin-bottom: 8px; }
.compte-liens { list-style: none; padding: 0; margin: 0 0 8px; } .compte-liens li { padding: 6px 0; border-bottom: 1px dashed var(--bord); }
.compte kbd { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #f8fafc; border: 1px solid var(--bord); border-radius: 6px;
    padding: 1px 6px; color: var(--texte); }
.qr-code svg { width: 200px; height: 200px; display: block; margin: 8px 0; }
.codes-secours { font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: #f8fafc; border: 1px solid var(--bord);
    border-radius: 10px; padding: 12px 14px; color: var(--texte); }
.alerte-succes { background: var(--vert-fond); color: var(--vert-badge); border-color: #bbf7d0; }
.alerte-succes::before { content: "✓" / ""; }