/* Finance EmotionWay : rendu repris des maquettes validees de docs/ (bandeau, cartes, Reglages).
   Aucune information ne repose sur la couleur seule : chaque pastille, etat ou sens porte son texte. */

/* ===== Police : fichiers locaux (public/assets/fonts/), jamais Google Fonts (CSP) ===== */
@font-face{font-family:"Sora";src:url("assets/fonts/Sora-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/Sora-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/Sora-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/Sora-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ===== Jetons ===== */
:root{
  --encre:#22262b;          /* fond de marque, texte principal */
  --encre-2:#2e333a;
  --papier:#f5f6fa;         /* fond de l'espace de travail */
  --surface:#ffffff;
  --trait:#e2e5ee;
  --texte:#22262b;
  --texte-2:#5b6070;
  --texte-3:#8a8f9e;
  --violet:#dc80ff;         /* EWC : remplissages */
  --violet-texte:#8f35c4;   /* EWC : texte lisible sur fond clair */
  --violet-fond:#f7ebff;
  --bleu:#89aeff;           /* EWA : remplissages */
  --bleu-texte:#2f5bc4;     /* EWA : texte lisible sur fond clair */
  --bleu-fond:#eaf0ff;
  --degrade:linear-gradient(90deg,#dc80ff 0%,#89aeff 100%);
  /* Palette des graphiques : chaque serie a aussi sa legende ecrite, sa valeur et un title au survol */
  --c-violet-fonce:#8f35c4;
  --c-violet:#dc80ff;
  --c-lavande:#b497ff;
  --c-violet-clair:#efc8ff;
  --c-bleu-fonce:#2f5bc4;
  --c-bleu:#89aeff;
  --c-bleu-clair:#c9d8ff;
  --c-gris:#b9bdc9;
  --c-encre:#22262b;
  /* Etats : deux seulement, toujours avec une icone et un mot ("✓ OK", "! Alerte") */
  --ok:#7dc242; --ok-fond:#eaf6df; --ok-texte:#2f5d12;
  --alerte:#e5484d; --alerte-fond:#fde8e8; --alerte-texte:#9b1c1f;
  --ombre:0 1px 2px rgba(34,38,43,.04),0 4px 14px rgba(34,38,43,.05);
  --rayon-s:6px; --rayon-m:10px;
  --police:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--police);font-size:14px;line-height:1.45;color:var(--texte);background:var(--papier)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bleu-texte);outline-offset:2px}
[hidden]{display:none !important}

/* ===== Bandeau de marque : logo, onglets, Réglages à droite, fin trait dégradé ===== */
/* Fixe en haut au defilement ; les barres de filtres (.barre-filtres) se placent juste dessous (--haut-bandeau, app.js) */
.bandeau{background:var(--encre);color:#fff;position:sticky;top:0;z-index:8}
/* Une seule ligne a partir de 1024 px : logo, onglets, puis a droite synchro, Reglages, menu Compte. Tous les elements
   ont la meme hauteur (--haut-ligne-bandeau) et le meme alignement vertical. */
.bandeau-haut{--haut-ligne-bandeau:52px;position:relative;max-width:1280px;margin:0 auto;padding:0 24px;min-height:var(--haut-ligne-bandeau);display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.bandeau-haut img{height:24px;width:auto;display:block;flex:none}
nav.onglets{display:flex;align-self:stretch;gap:0;flex:0 1 auto;min-width:0}
nav.onglets button,.lien-reglages,.bouton-compte{display:inline-flex;align-items:center;gap:6px;height:var(--haut-ligne-bandeau);background:none;border:0;border-top:2px solid transparent;border-bottom:2px solid transparent;color:#b9bdc9;padding:0 10px;cursor:pointer;font-weight:500;white-space:nowrap}
nav.onglets button[aria-selected="true"],.lien-reglages.actif,.bouton-compte.actif{color:#fff;border-bottom-color:#fff}
nav.onglets button:hover,.lien-reglages:hover,.bouton-compte:hover,.bouton-compte[aria-expanded="true"]{color:#fff}
.menu-onglets{display:none}
nav .badge{font-size:11px;background:#3a3f48;border-radius:999px;padding:1px 7px;margin-left:6px;color:#fff;font-weight:600}
.trait{height:3px;background:var(--degrade)}

/* ===== Espace de travail ===== */
main{max-width:1280px;margin:0 auto;padding:28px 24px 64px}
h1{font-size:24px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.chapo{color:var(--texte-2);margin:0 0 22px;max-width:72ch}

/* Résumé en trois colonnes, sans cartes empilées */
.resume{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);margin-bottom:20px}
.resume>div{padding:14px 18px}
.resume>div+div{border-left:1px solid var(--trait)}
.resume .t{font-size:12px;color:var(--texte-2)}
.resume .v{font-size:18px;font-weight:600;margin-top:2px}
.resume .s{font-size:12px;color:var(--texte-3)}

/* Graphiques SVG (axes) */
.titre-bloc{font-size:16px;font-weight:600;margin:28px 0 10px}
svg.graphique{display:block;width:100%;height:auto}
.graduation{stroke:var(--trait);stroke-width:1}
.etiquette-axe{font-size:12px;fill:var(--texte-2);font-variant-numeric:tabular-nums}
.axe-zero{stroke:var(--texte-2);stroke-width:1.5}
table.compact{min-width:0}
.alerte-solde{margin:0 0 10px;font-weight:600;color:var(--texte)}
tr.inactive td{color:var(--texte-3)}
.montant-charge{width:110px;border:1px solid var(--trait);border-radius:var(--rayon-s);padding:5px 8px;text-align:right;background:var(--surface)}
td label.case{display:inline-flex;gap:6px;align-items:center;font-size:13px}

/* ===== Cartes (maquette) ===== */
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:18px 20px;min-width:0}
.carte h2{font-size:16px;font-weight:600;margin:0 0 2px}
.carte h3{font-size:14px;font-weight:600;margin:18px 0 6px}
.h2s{color:var(--texte-2);font-size:13px;margin:0 0 12px}
.discret{font-size:13px;color:var(--texte-2)}
.gros{font-size:26px;font-weight:700}
.badge-auto{display:inline-block;font-size:11px;font-weight:600;background:var(--bleu-fond);color:var(--bleu-texte);border:1px solid var(--c-bleu-clair);border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:1px}
.lien.action{color:var(--violet-texte);font-weight:600;font-size:13px}

/* ===== Trésorerie ===== */
.equation{margin-bottom:16px}
.termes{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.terme .t{font-size:12px;color:var(--texte-2)}
.terme .v{font-size:22px;font-weight:600}
.terme.resultat{padding:8px 16px;border-radius:12px;background:var(--papier)}
.terme.resultat .t{font-weight:600;color:var(--texte)}
.terme.resultat .v{font-size:34px;font-weight:700;letter-spacing:-.01em}
.operateur{font-size:24px;color:var(--texte-3);font-weight:300}
.verification{margin:12px 0 0;font-size:13px;color:var(--texte-2);font-weight:500}
.a-faire{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;background:linear-gradient(135deg,#fff 60%,var(--violet-fond))}
.a-faire p{margin:2px 0 0;font-size:13px;color:var(--texte-2)}
/* Deux poches ; le liseré de couleur est décoratif, le nom et la pastille texte disent laquelle */
.poches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}
.poches.une{grid-template-columns:minmax(0,560px);justify-content:center}
.poche{border-top:4px solid var(--violet)}
.poche.ewa{border-top-color:var(--bleu)}
.poche-entete{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.poche .t{font-size:12px;color:var(--texte-2)}
.poche .disponible{font-size:38px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.poche .runway{margin:4px 0 14px;font-size:14px;font-weight:500}
.poche .dont-non-repartis{margin:2px 0 0;font-size:13px;color:var(--texte-2)}
.poche .avance{margin:2px 0 0;font-size:13px;font-weight:600}
/* "Comprendre ce chiffre" : jamais la couleur seule (operateurs, mots, barre hachuree pour "depense") */
.lien.comprendre-lien{display:inline-block;margin:6px 0 0;font-size:13px;color:var(--texte);font-weight:600}
.comprendre{margin:10px 0 14px;padding:12px 14px;background:var(--papier);border-radius:10px;font-size:13px}
.comprendre h3{margin:16px 0 6px}
.comprendre .tableau table{min-width:0;font-size:12px}
table.cascade{min-width:0;width:100%;font-size:14px}
table.cascade th,table.cascade td{position:static;background:none;border-bottom:1px solid var(--trait);padding:6px 4px;font-size:14px;color:var(--texte);font-weight:400}
table.cascade td.op{width:1.5em;font-weight:700;text-align:center}
table.cascade tr.total th,table.cascade tr.total td{font-weight:700;border-bottom:0;border-top:2px solid var(--texte)}
table.cascade tr.total.etat-alerte td.num{color:var(--alerte-texte)}
.phrase-comprendre{margin:12px 0 0;font-size:14px;line-height:1.5}
.familles-comprendre details{border-bottom:1px solid var(--trait)}
.familles-comprendre summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;cursor:pointer;padding:7px 0;font-weight:600}
.familles-comprendre summary .num{text-align:right}
.familles-comprendre ul{list-style:none;margin:0 0 8px;padding:0}
.familles-comprendre li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0 4px 14px;border-top:1px dashed var(--trait)}
.total-familles{display:flex;justify-content:space-between;margin:8px 0 0;font-weight:700}
.legende-mois{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 4px;font-size:12px}
.legende-mois .pastille{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border-radius:2px}
.pastille.rentre{background:var(--ok)}
.pastille.depense{background:repeating-linear-gradient(45deg,var(--alerte) 0 2px,var(--alerte-fond) 2px 5px);border:1px solid var(--alerte)}
.barres-mois rect.rentre{fill:var(--ok)}
.barres-mois rect.depense{stroke:var(--alerte);stroke-width:1}
.barres-mois .fond-depense{fill:var(--alerte-fond)}
.barres-mois .trait-depense{fill:var(--alerte)}
.lexique{margin-top:14px}
.lexique summary{cursor:pointer;font-weight:600}
.lexique dl{margin:8px 0 0}
.lexique dt{font-weight:600;margin-top:8px}
.lexique dd{margin:2px 0 0;color:var(--texte-2)}
.trois-lignes{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0;font-size:14px;border-top:1px solid var(--trait);padding-top:12px}
.trois-lignes dt{color:var(--texte-2)}
.trois-lignes dd{margin:0;text-align:right}
.achat{border-top:1px solid var(--trait);margin-top:14px;padding-top:2px}
.achat-saisie{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--texte-2)}
.achat-saisie .montant-charge{width:140px}
.reponse-achat{margin:8px 0 0;font-size:14px;font-weight:500;min-height:1.5em}
.projection{border-top:1px solid var(--trait);margin-top:14px;padding-top:2px}
.barres-projection{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;text-align:center}
.barres-projection li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.barres-projection .zone{position:relative;display:block;width:100%;height:110px;margin-bottom:4px}
.barres-projection .zero{position:absolute;left:0;right:0;border-top:1px solid var(--texte-3)}
.barres-projection .barre{position:absolute;left:22%;right:22%;background:var(--violet);border-radius:3px}
.poche.ewa .barres-projection .barre{background:var(--bleu)}
.barres-projection .barre.negatif,.poche.ewa .barres-projection .barre.negatif{background:repeating-linear-gradient(45deg,var(--alerte) 0 2px,var(--alerte-fond) 2px 6px);border:1px solid var(--alerte)}
.barres-projection .mois{font-size:12px;color:var(--texte-2)}
.barres-projection .montant{font-size:11px;font-weight:600}
.barres-projection .sous-zero{font-size:11px;font-weight:700}
/* Etat Alerte : montant ou phrase en rouge franc sur fond clair, toujours precede de "!" ou ecrit en toutes lettres */
.etat-alerte{color:var(--alerte-texte)}
.poche .disponible.etat-alerte,.chiffre .v.etat-alerte{display:inline-block;background:var(--alerte-fond);border-left:4px solid var(--alerte);border-radius:6px;padding:0 10px}
.badge-etat{display:inline-block;font-size:12px;font-weight:700;border:1px solid;border-radius:999px;padding:2px 10px;white-space:nowrap}
.badge-etat.ok{background:var(--ok-fond);color:var(--ok-texte);border-color:var(--ok)}
.badge-etat.alerte{background:var(--alerte-fond);color:var(--alerte-texte);border-color:var(--alerte);white-space:normal}
/* Detail du cout par mois, ouvert sous la ligne */
.lien.voir-detail{margin-left:10px;font-size:12px}
.trois-lignes dd.detail-cout{grid-column:1 / -1;text-align:left;background:var(--papier);border-radius:10px;padding:8px 12px}
.detail-cout ul{list-style:none;margin:0;padding:0;font-size:13px}
.detail-cout li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--trait)}
.detail-cout li:last-child{border-bottom:0}
.detail-cout li.total{font-weight:600}
.detail-cout .lien{display:block;margin-top:2px}
.echeances{border-top:1px solid var(--trait);margin-top:14px;padding-top:2px}
.liste-echeances{list-style:none;margin:0;padding:0}
.liste-echeances li{display:grid;grid-template-columns:1fr auto auto;gap:4px 14px;align-items:center;padding:7px 0;border-bottom:1px solid var(--trait);font-size:13px}
.liste-echeances .nom{display:block;font-weight:500}
.liste-echeances .quand{color:var(--texte-2);white-space:nowrap}
.liste-echeances .combien{text-align:right;font-weight:600}
.total-retard{font-size:13px;font-weight:600;margin:0 0 6px}
.retard-quand{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.detail-cout .badge-etat,.plus-payee .badge-etat{margin-left:8px;font-size:11px;padding:1px 8px}
.plus-payee{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.plus-payee .badge-etat{margin-left:0}
.plus-payee .lien{margin:0}
.devis-replies{margin-top:12px}
.devis-replies summary{cursor:pointer;font-weight:600;font-size:13px}
.liste-devis{list-style:none;margin:6px 0 0;padding:0}
.liste-devis li{display:grid;grid-template-columns:1fr auto auto;gap:4px 14px;align-items:center;padding:7px 0;border-bottom:1px solid var(--trait);font-size:13px}
.liste-devis .nom{display:block;font-weight:500}
.liste-devis .sous{display:block;color:var(--texte-2);font-size:12px}
.lien.voir-tout{margin-top:10px;font-size:13px;color:var(--texte);font-weight:600}
.tout-voir h2{font-size:20px;font-weight:600;margin:10px 0 0}
.tout-voir h2:focus{outline:none}
.lien.retour{font-size:13px}
.tout-voir .tableau table{min-width:0}
.mois-charges{border-bottom:1px solid var(--trait);padding:4px 0}
.mois-charges:last-child{border-bottom:0}
.mois-charges summary{display:flex;gap:14px;align-items:baseline;cursor:pointer;padding:8px 0;font-weight:500}
.mois-charges .sous-titre-mois{font-size:12px;color:var(--texte-3);font-weight:400}
.mois-charges .total-mois{margin-left:auto}
.liste-charges{list-style:none;margin:0 0 8px;padding:0 0 0 18px;font-size:13px}
.liste-charges li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--texte-2)}

/* ===== Tableau de bord ===== */
.selecteurs{display:flex;gap:10px;flex-wrap:wrap}
.avertissement-bord{margin:0 0 14px;padding:10px 14px;border-radius:var(--rayon-m);background:var(--violet-fond);border:1px solid var(--c-violet-clair);font-size:13px;font-weight:500}
.chiffres-bord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.chiffre{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:16px 18px;box-shadow:var(--ombre);position:relative;overflow:hidden}
.chiffre::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--degrade)}
.chiffre .t{font-size:12px;color:var(--texte-2);font-weight:500}
.chiffre .v{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:4px 0 4px;white-space:normal}
.chiffre .s{font-size:12.5px;color:var(--texte-2)}
.titre-bord{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 4px}
.titre-bord h1{margin:0}
.liste-alertes{position:relative}
.liste-alertes summary{cursor:pointer;list-style:none}
.liste-alertes summary::-webkit-details-marker{display:none}
.liste-alertes ul{position:absolute;z-index:9;top:calc(100% + 6px);left:0;min-width:min(380px,90vw);list-style:none;margin:0;padding:8px 14px;background:var(--surface);border:1px solid var(--trait);border-radius:12px;box-shadow:var(--ombre)}
.liste-alertes li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--trait);font-size:13px;color:var(--alerte-texte)}
.liste-alertes li:last-child{border-bottom:0}
.liste-alertes .lien{font-size:13px;color:var(--texte)}
#bord [id]{scroll-margin-top:calc(var(--haut-bandeau,64px) + 72px)}
.chiffre .badge-etat{margin:6px 0 0}
#bord .carte h3+.badge-etat{margin:4px 0 6px}
.devis{margin-top:14px}
.champ-court{width:56px;border:1px solid var(--trait);border-radius:var(--rayon-s);padding:5px 8px;text-align:right;background:var(--surface)}
.champ-date{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:4px 8px;background:var(--surface);color:var(--texte)}
.pied-carte{margin:10px 0 0;font-size:13px;font-weight:600;white-space:normal}
.tableau-mois{margin-top:12px}
.tableau-mois table{font-size:12px}
.tableau-mois th,.tableau-mois td{padding:7px 8px}
.tableau-mois td.nom{font-weight:600;white-space:nowrap}
.tableau-mois tfoot td,.tableau-mois td.total{font-weight:700}
.tableau-mois tfoot td{border-top:1px solid var(--trait);background:#fafbfd}
#bord .carte{box-shadow:var(--ombre)}
#bord .carte h3{font-size:15px;margin:0 0 2px}
.scenario{margin-bottom:6px;background:linear-gradient(180deg,#fff 70%,#fcf8ff)}
.curseurs{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:4px 0 8px}
.curseur{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;align-content:start}
.curseur .nom-curseur{font-size:13px;color:var(--texte);font-weight:600}
.curseur .aide-curseur{grid-column:1 / -1;margin:0;font-size:12.5px;color:var(--texte-2)}
.curseur .piste{grid-column:1 / -1;position:relative;padding-bottom:20px}
.curseur input[type=range]{width:100%;accent-color:var(--c-violet-fonce);height:22px;cursor:pointer;margin:0}
.curseur .repere{position:absolute;bottom:0;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--texte-2);white-space:nowrap;pointer-events:none}
.curseur .lien{grid-column:1 / -1;justify-self:start}
.calcul-scenario{margin:4px 0 8px;font-size:14px;font-weight:600;white-space:normal}
.curseur .valeur-curseur{font-size:16px;font-weight:700;color:var(--c-violet-fonce)}
.phrase-scenario{margin:6px 0 0;font-size:15px;font-weight:600}
.ligne-scenario{fill:none;stroke:var(--c-violet-fonce);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.ligne-devis{fill:none;stroke:var(--c-bleu);stroke-width:3;stroke-dasharray:1 7;stroke-linecap:round}
.ligne-sans-vente{fill:none;stroke:var(--c-gris);stroke-width:2.5;stroke-dasharray:9 6}
.degrade-haut{stop-color:var(--c-violet);stop-opacity:.42}
.degrade-bas{stop-color:var(--c-violet);stop-opacity:0}
.point{stroke:var(--surface);stroke-width:1.5}
.marque-scenario{fill:var(--c-violet-fonce)}
.marque-devis{fill:var(--c-bleu-fonce)}
.marque-sans-vente{fill:#8a8f9e}
.marque-depart{fill:var(--c-encre)}
.marque-recurrent{fill:var(--c-violet-fonce)}
.losange{stroke:var(--surface);stroke-width:1.5}
.nom-serie{font-size:13px;font-weight:700}
.nom-serie .valeur-serie{font-size:12px;font-weight:500;fill:var(--texte-2);font-variant-numeric:tabular-nums}
.nom-scenario{fill:var(--c-violet-fonce)}
.nom-devis{fill:var(--c-bleu-fonce)}
.nom-sans-vente{fill:var(--texte-2)}
.halo{paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.total-barre{font-size:11px;font-weight:600;fill:var(--texte);font-variant-numeric:tabular-nums}
.ligne-point-mort,.ligne-objectif{stroke:var(--texte);stroke-width:1.5;stroke-dasharray:5 4}
.texte-point-mort,.texte-objectif{font-size:12px;font-weight:600;fill:var(--texte)}
.fond-point-mort{fill:var(--surface)}
.ligne-recurrent{fill:none;stroke:var(--c-violet-fonce);stroke-width:2.5;stroke-linejoin:round}
.deux-tiers{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start}
.deux-tiers .colonne{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Couleurs de serie : --couleur porte la teinte, chaque forme l'applique a sa facon */
.c-violet-fonce{--couleur:var(--c-violet-fonce)}
.c-violet{--couleur:var(--c-violet)}
.c-lavande{--couleur:var(--c-lavande)}
.c-violet-clair{--couleur:var(--c-violet-clair)}
.c-bleu-fonce{--couleur:var(--c-bleu-fonce)}
.c-bleu{--couleur:var(--c-bleu)}
.c-bleu-clair{--couleur:var(--c-bleu-clair)}
.c-gris{--couleur:var(--c-gris)}
.c-encre{--couleur:var(--c-encre)}
.segment{fill:var(--couleur);stroke:var(--surface);stroke-width:1}
.arc{fill:none;stroke:var(--couleur)}
.fond-anneau{fill:none;stroke:#f0f1f5}
svg.anneau{display:block;width:min(220px,100%);height:auto;margin:6px auto 8px}
.centre-anneau{font-size:19px;font-weight:700;fill:var(--texte);font-variant-numeric:tabular-nums}
.sous-centre{font-size:12px;fill:var(--texte-2)}
.legende-series{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.legende-series li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.pastille-couleur{width:12px;height:12px;border-radius:3px;background:var(--couleur);box-shadow:inset 0 0 0 1px rgba(34,38,43,.12)}
.legende-series .valeur{color:var(--texte-2)}
.hausses{list-style:none;margin:8px 0 0;padding:0}
.hausses li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--trait);font-size:13px}
.hausses li:last-child{border-bottom:0}
.hausses .nom{font-weight:600}
.hausses .ecart{font-weight:700;text-align:right}
.hausses .ecart.hausse{color:var(--c-violet-fonce)}
.hausses .ecart.baisse{color:var(--bleu-texte)}
.hausses .avant-apres{grid-column:1 / -1;color:var(--texte-2);font-size:12px}
.barres-clients{border:0;margin-top:8px}
.barres-clients td.nom{font-weight:600}
.barres-clients .barre{display:block;height:10px;margin-top:4px;background:#f0f1f5;border-radius:6px;overflow:hidden}
.barres-clients .barre span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-violet-fonce),var(--c-violet));border-radius:6px}
.familles-charges{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.familles-reste{margin:-4px 0 14px;font-size:13px;color:var(--texte-2)}
.familles-reste:empty{display:none}
.avertissement-bord .lien{font-size:13px}
.fournisseurs{margin-top:14px}
.fournisseurs .tableau{border:0}
.fournisseurs td.nom{font-weight:600}
.pied-bord{margin:22px 0 0;font-size:11.5px;color:var(--texte-3);max-width:110ch}

/* ===== Réglages ===== */
.reg{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.reg>.carte{box-shadow:var(--ombre);padding:22px 24px}
.reg>.carte>h2{font-size:17px;display:flex;align-items:center;gap:10px}
.reg>.carte>h2::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--degrade)}
.carte.large{grid-column:1 / -1}
#reglage-separation .gros,#reglage-tva .gros{font-size:30px;letter-spacing:-.01em;margin:2px 0 6px}
#reglage-remuneration hr{border:0;border-top:1px solid var(--trait);margin:14px 0}
.comptes{list-style:none;margin:0;padding:0}
.comptes li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--trait);font-size:13px}
.comptes li:last-child{border-bottom:0}
.comptes .identifiant{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.comptes .provisoire{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--trait);border-radius:10px;background:var(--papier)}
.comptes .provisoire strong{font-size:16px;letter-spacing:.04em}
.carte .champ input[type=password]{border:1px solid var(--trait);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--texte);min-width:260px;max-width:100%}
#compte .carte{max-width:520px;box-shadow:var(--ombre);padding:22px 24px}
.comptes .role{color:var(--texte-2);white-space:nowrap}
.comptes .etat-compte{font-weight:500;white-space:nowrap}
.comptes li.inactif .identifiant,.comptes li.inactif .role{color:var(--texte-3)}
.carte .champ{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:12px 0}
.carte .champ label{font-size:12px;color:var(--texte-2)}
.carte .champ input[type=date]{border:1px solid var(--trait);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--texte)}
.carte .champ .montant-charge{width:200px;border-radius:10px;padding:8px 12px}
.partage{display:flex;height:40px;border-radius:12px;overflow:hidden;margin:12px 0 6px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(34,38,43,.06)}
.partage div{display:flex;align-items:center;padding:0 10px;white-space:nowrap;min-width:max-content}
.partage .c{background:var(--violet);color:#3d0f58;flex:0 0 50%;border-right:2px solid var(--surface)}
.partage .a{background:var(--bleu);color:#0f2a6b;flex:1}
.etat-reglage{margin:12px 0 0;font-size:13px}
#reglage-tva hr{border:0;border-top:1px solid var(--trait);margin:14px 0}
.autres-depenses{display:flex;gap:28px;flex-wrap:wrap}
.autres-depenses .champ{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0}

/* Barre d'outils ; .barre-filtres : reste fixee juste sous le bandeau au defilement */
.barre-filtres{position:sticky;top:var(--haut-bandeau,64px);z-index:7;background:var(--papier);padding:10px 0;margin:0 0 12px;box-shadow:0 1px 0 var(--trait)}
.outils{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.bascule{display:inline-flex;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:3px}
.bascule button{border:0;background:none;padding:6px 12px;border-radius:4px;cursor:pointer;color:var(--texte-2)}
.bascule button[aria-pressed="true"]{background:var(--encre);color:#fff}
.outils select,.outils input[type=search]{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:7px 10px}
.outils input[type=search]{min-width:240px}
.outils label.case{display:flex;gap:8px;align-items:center;color:var(--texte-2);font-size:13px;margin-left:auto}
.outils label.case.seulement-lignes{margin-left:0}

.filtre-groupe{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--texte-2)}
.filtre-groupe b{color:var(--texte)}

/* Messages : le préfixe texte ("Fait :", "Erreur :", "Attention :") porte l'information */
.message{margin:0 0 12px;min-height:1.45em;font-size:13px;color:var(--texte-2)}
.message:empty{min-height:0;margin:0}
.resume-filtre{margin:0 0 8px;font-size:13px;color:var(--texte-2)}
.resume-filtre:empty{display:none}
.message[data-type="erreur"],.message[data-type="attention"]{color:var(--texte);font-weight:500}

/* Tableau */
.tableau{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:1080px}
th{font-size:12px;font-weight:500;color:var(--texte-2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--trait);background:#fafbfd;position:sticky;top:0}
td{padding:9px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.droite,th.droite{text-align:right}
/* Tri : bouton dans l'en-tete, "▲" / "▼" sur la colonne active (aria-sort et title en plus) */
th .tri{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
th .tri:hover{color:var(--texte);text-decoration:underline}
th[aria-sort] .tri .fleche{color:var(--texte)}
th .tri.autre{margin-left:8px;font-size:11px}
th[aria-sort]{color:var(--texte);font-weight:600}
/* Largeur : poignee sur le bord droit de chaque en-tete */
th .poignee{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;touch-action:none;user-select:none}
th .poignee:hover{background:var(--trait)}
table.redimensionne{table-layout:fixed;min-width:0}
table.redimensionne td{overflow:hidden}
.mesure-colonne{position:absolute;left:0;top:0;visibility:hidden;width:max-content;white-space:nowrap;pointer-events:none}
.outils-tableau{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:16px;padding:0 12px;font-size:12px;color:var(--texte-2)}
.outils-tableau>*{margin:6px 0}
.outils-tableau .trier-par{display:none;align-items:center;gap:8px;margin-right:auto}
.outils-tableau select{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:6px 8px;background:var(--surface);color:var(--texte)}
.outils-tableau label.case{display:inline-flex;gap:6px;align-items:center}
/* "Libellés complets" : le libellé s'affiche en entier sur plusieurs lignes */
table.libelles-complets td{white-space:normal}
table.libelles-complets .tronque,table.libelles-complets .libelle-court{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.vide{padding:28px 18px;color:var(--texte-2);margin:0}
.partenaire{font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.partenaire .ouvrir{display:inline-block;width:14px;color:var(--texte-3);font-weight:400}
.sous{display:block;font-size:12px;color:var(--texte-3);font-weight:400}
.sens{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--trait);color:var(--texte-2);white-space:nowrap}
td select{width:100%;max-width:240px;border:1px solid var(--trait);border-radius:var(--rayon-s);padding:6px 8px;background:var(--surface)}
/* Répartition en un clic : le bouton actif porte "✓" et aria-pressed, pas seulement une couleur */
.repart{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.boutons-repart{display:inline-flex;gap:4px;white-space:nowrap}
.choix{border:1px solid var(--trait);background:var(--surface);color:var(--encre);border-radius:var(--rayon-s);padding:4px 8px;font-size:12px;cursor:pointer;white-space:nowrap}
.choix[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff;font-weight:600}
.choix:disabled{opacity:.55;cursor:default}
.saisie-autre{display:inline-flex;align-items:center;gap:6px}
.repart input.pct-ewa{width:64px;border:1px solid var(--trait);border-radius:var(--rayon-s);padding:4px 6px;text-align:right;font-size:12px}
.repart .complement{font-size:12px;color:var(--texte-2);white-space:nowrap}
td select.choix-categorie{min-width:220px;max-width:none}
.lien{background:none;border:0;padding:0;color:var(--texte-2);text-decoration:underline;cursor:pointer;font-size:12px;text-align:left}
.lien:hover{color:var(--texte)}
.automatisme{display:block;margin:4px 0 0 14px;font-size:12px}
.btn{border:1px solid var(--encre);background:var(--encre);color:#fff;border-radius:var(--rayon-s);padding:7px 14px;cursor:pointer;font-weight:500;white-space:nowrap}
.btn.discret{background:var(--surface);color:var(--encre);border-color:var(--trait)}
.btn.petit{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.55;cursor:default}
.deja{font-size:11px;color:var(--texte-3);display:block;margin-top:2px}

/* Aperçu sous une ligne */
tr.apercu td{background:#fbf8ff;border-bottom:1px solid var(--trait)}
.apercu-contenu{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.apercu-contenu p{margin:0;max-width:80ch}
.apercu-contenu label.motif{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--texte-2)}
.apercu-contenu label.motif input{width:220px;border:1px solid var(--trait);border-radius:var(--rayon-s);padding:6px 8px;background:var(--surface);color:var(--texte)}

/* Lignes dépliées */
tr.detail td{background:#fafbfd;padding:0}
.detail-liste{width:100%;border-collapse:collapse;min-width:0}
.detail-liste td{padding:6px 12px 6px 40px;border-bottom:1px dashed var(--trait);font-size:13px;color:var(--texte-2)}
.detail-liste tr:last-child td{border-bottom:0}

/* Vue ligne par ligne : une ligne = une hauteur de texte ; largeurs fixes, aucun défilement horizontal à 1280 px.
   Le libellé prend la place restante et est tronqué ; texte complet en title et dans le panneau. */
table.lignes{table-layout:fixed;min-width:0}
.lignes th,.lignes td{padding-left:8px;padding-right:8px}
.lignes td{white-space:nowrap;overflow:hidden}
.lignes .col-date{width:88px}
.lignes .col-partenaire{width:200px;max-width:200px}
.lignes .col-sens{width:80px}
.lignes .col-montant{width:120px}
.lignes .col-categorie{width:236px}
.lignes .col-repartition{width:264px}
.tronque{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lignes .libelle-court{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--texte)}
.lignes .libelle-court:hover{text-decoration:underline}
.lignes td select.choix-categorie{width:100%}
.groupes .col-categorie{width:250px}
.groupes .col-repartition{width:280px}
.pied-liste{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:var(--texte-2)}
.pied-liste:empty{display:none}
.pagination{display:flex;gap:8px;align-items:center}

/* Pastilles EWC / EWA : toujours avec le texte */
.ent{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.ent.ewc{background:var(--violet-fond);color:var(--violet-texte)}
.ent.ewa{background:var(--bleu-fond);color:var(--bleu-texte)}
.ent+.ent{margin-left:4px}
.non-defini{font-size:12px;color:var(--texte-3)}
.split{display:flex;height:6px;border-radius:3px;overflow:hidden;width:90px;margin-top:4px}
.split .c{background:var(--violet)}.split .a{background:var(--bleu)}

/* Projets */
.marge-barre{height:6px;background:#eef0f5;border-radius:3px;width:120px;overflow:hidden;margin-top:4px;margin-left:auto}
.marge-barre span{display:block;height:100%;width:0;background:var(--encre)}
.frais{padding:16px 20px 18px 40px}
.frais h3{font-size:14px;margin:0 0 10px;font-weight:600}
.frais table{min-width:0}
.frais td,.frais th{font-size:13px}
.frais .actions{justify-content:flex-end}
.ajout{display:grid;grid-template-columns:1.1fr 1.6fr .6fr 1.4fr auto;gap:8px;margin-top:12px;align-items:end}
.ajout label{font-size:12px;color:var(--texte-2);display:flex;flex-direction:column;gap:4px}
.ajout input,.ajout select{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:7px 8px;background:var(--surface);min-width:0}
.ajout .boutons{display:flex;gap:6px}
.ajout .recherche-fournisseur{font-size:12px;padding:5px 8px}
.alerte{font-size:12px;color:var(--texte);margin-top:10px}
.alerte b{font-weight:600}

/* Automatismes */
.regles{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m)}
.regle{display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--trait)}
.regle:last-child{border-bottom:0}
.regle .ordre{font-size:12px;color:var(--texte-3)}
.regle p{margin:0}
.regle .meta{font-size:12px;color:var(--texte-3);margin-top:2px}
.regle .etat{font-size:12px;color:var(--texte-2);white-space:nowrap}
.regle.inactive p{color:var(--texte-3)}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* Panneau de détail d'une ligne */
.panneau{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);border-left:1px solid var(--trait);box-shadow:-8px 0 24px rgba(34,38,43,.12);display:flex;flex-direction:column;z-index:10}
.panneau-entete{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--trait)}
.panneau-entete h2{font-size:16px;font-weight:600;margin:0}
.panneau-corps{padding:16px 20px;overflow-y:auto;font-size:13px}
.panneau-corps dl{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;margin:0 0 16px}
.panneau-corps dt{color:var(--texte-2)}
.panneau-corps dd{margin:0;overflow-wrap:anywhere}
.panneau-corps h3{font-size:13px;font-weight:600;margin:16px 0 6px}
.panneau-corps ul{margin:0;padding-left:18px}
.panneau-corps li{margin:2px 0}
.panneau-classer{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.panneau-classer label,.panneau-classer .etiquette-champ{display:flex;flex-direction:column;gap:4px;color:var(--texte-2)}
.panneau-classer select{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:6px 8px;background:var(--surface);color:var(--texte)}
.panneau-classer .lien{align-self:flex-start}

/* Bandeau "Annuler" après chaque enregistrement (10 s) */
.bandeau-annuler{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:var(--encre);color:#fff;border-radius:var(--rayon-m);padding:10px 12px 10px 18px;box-shadow:0 8px 24px rgba(34,38,43,.25);z-index:20;max-width:calc(100% - 32px)}
.bandeau-annuler .btn{background:#fff;color:var(--encre);border-color:#fff}

@media (max-width:820px){
  main{padding:20px 16px 48px}
  .poches,.reg{grid-template-columns:1fr}
  .barres-projection{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .liste-echeances li{grid-template-columns:1fr auto}
  .liste-echeances .quand{grid-column:1;grid-row:2}
  .resume{grid-template-columns:1fr}.resume>div+div{border-left:0;border-top:1px solid var(--trait)}
  .chiffres-bord{grid-template-columns:1fr 1fr}
  .deux-tiers{grid-template-columns:1fr}
  .familles-charges{grid-template-columns:1fr}
  .curseurs{grid-template-columns:1fr}
  .comptes li{grid-template-columns:1fr}
  /* Telephone : les graphiques gardent une taille lisible et defilent dans leur carte */
  #scenario-bord,#ca-barres,#charges-barres{overflow-x:auto}
  #graphique-scenario{min-width:680px}
  #ca-barres svg.graphique,#charges-barres svg.graphique{min-width:560px}
  .outils label.case{margin-left:0}
  .outils input[type=search]{min-width:0;flex:1 1 100%}
  .ajout{grid-template-columns:1fr}
  .regle{grid-template-columns:1fr;gap:8px}
  /* Téléphone : chaque ligne devient une fiche, chaque cellule porte son intitulé */
  .tableau{background:none;border:0;overflow:visible}
  .tableau table{min-width:0}
  .tableau thead{display:none}
  .tableau table,.tableau tbody,.tableau tr,.tableau td{display:block;width:100%}
  .tableau tbody>tr{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);margin-bottom:10px;padding:8px 0}
  .tableau tbody>tr.apercu,.tableau tbody>tr.detail{margin-top:-14px;border-top:0;border-radius:0 0 var(--rayon-m) var(--rayon-m)}
  .tableau td{border-bottom:0;padding:6px 14px;white-space:normal}
  .tableau td[data-libelle]::before{content:attr(data-libelle);display:block;font-size:11px;color:var(--texte-3);margin-bottom:2px}
  .tableau td.droite{text-align:left}
  .tableau td:empty{display:none}
  .lignes .libelle-court{max-width:100%;white-space:normal}
  .detail-liste td{padding-left:14px}
  .frais{padding:12px 14px}
  .marge-barre{margin-left:0}
  td select{max-width:none}
  table.lignes{table-layout:auto}
  .lignes td{overflow:visible}
  .lignes .col-partenaire{max-width:none}
  .lignes .libelle-court{white-space:normal}
  td select.choix-categorie{min-width:0;width:100%}
  /* Téléphone : tri par la liste "Trier par", pas de poignées ni de largeurs mémorisées */
  .outils-tableau .trier-par{display:flex}
  .outils-tableau .reinit-colonnes{display:none}
  .tableau table.redimensionne{width:100% !important}
  .tableau table.redimensionne th,.tableau table.redimensionne td{width:auto !important}
}

/* ===== Liens du bandeau : synchro, Reglages, menu Compte (Mon compte, Se deconnecter) ===== */
.bandeau-liens{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;height:var(--haut-ligne-bandeau)}
.menu-compte{position:relative;display:flex;align-items:center;height:100%}
.icone-compte{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.nom-compte{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.fleche-compte{font-size:10px}
.liste-compte{position:absolute;right:0;top:100%;z-index:12;min-width:190px;display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);box-shadow:0 8px 24px rgba(34,38,43,.18)}
.liste-compte button{background:none;border:0;border-radius:var(--rayon-s);padding:8px 12px;text-align:left;color:var(--texte);font-size:14px;cursor:pointer;white-space:nowrap}
.liste-compte button:hover{background:var(--papier)}
/* Texte lu par les lecteurs d'ecran seulement */
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Recuperation Odoo (bandeau) : zone compacte, detail dans le title ; sous 1024 px, icone seule ===== */
.synchro{display:flex;align-items:center;gap:8px;height:var(--haut-ligne-bandeau);font-size:11px;color:#b9bdc9;padding:0 6px}
.synchro-texte{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.lien-synchro{display:inline-flex;align-items:center;height:28px;background:none;border:1px solid #474c56;border-radius:999px;color:#fff;padding:0 10px;cursor:pointer;font-size:12px;white-space:nowrap}
.lien-synchro:hover{border-color:#fff}
.lien-synchro:disabled{opacity:.55;cursor:default}
.synchro-icone{margin-right:4px}
.synchro-anim{display:inline-block;flex:none;width:12px;height:12px;border:2px solid #474c56;border-top-color:#fff;border-radius:50%;animation:tourner 1s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
/* Fine barre d'avancement sous le trait degrade (largeur posee par app.js) */
.synchro-barre{height:2px;background:#33373f}
.synchro-barre>span{display:block;height:100%;width:0;background:#fff;transition:width .4s ease}
@media (prefers-reduced-motion: reduce){.synchro-anim{animation:none}.synchro-barre>span{transition:none}}
/* Entre 820 et 1024 px : synchro reduite a son icone (texte au survol), nom du compte reduit a l'icone */
@media (max-width:1023px){
  .bandeau-haut{gap:12px}
  .synchro-texte,.synchro-libelle,.nom-compte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .synchro-icone{margin-right:0}
  .lien-synchro{padding:0 9px}
}
/* Sous 820 px : menu "☰" qui contient les onglets, deplie sous le bandeau */
@media (max-width:820px){
  .bandeau-haut{padding:0 16px;gap:10px}
  .bandeau-haut img{height:20px}
  .menu-onglets{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:36px;background:none;border:1px solid #474c56;border-radius:var(--rayon-s);color:#fff;font-size:18px;cursor:pointer}
  .menu-onglets[aria-expanded="true"]{border-color:#fff}
  nav.onglets{display:none;position:absolute;left:0;right:0;top:100%;z-index:12;flex-direction:column;padding:6px 16px 12px;background:var(--encre);box-shadow:0 8px 24px rgba(34,38,43,.3)}
  .bandeau.onglets-ouverts nav.onglets{display:flex}
  nav.onglets button{height:44px;border:0;border-left:3px solid transparent;padding:0 12px}
  nav.onglets button[aria-selected="true"]{border-left-color:#fff;font-weight:600}
  .bandeau-liens{gap:0}
  .lien-reglages,.bouton-compte{padding:0 8px}
}

/* ===== Page de connexion ===== */
.page-connexion{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:64px 16px}
.connexion{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);overflow:hidden;padding:0}
.connexion-entete{background:var(--encre);padding:20px 24px;display:flex;align-items:center;gap:16px}
.connexion-entete img{height:28px;width:auto;display:block}
.connexion-entete .app{font-size:13px;color:#b9bdc9;border-left:1px solid #474c56;padding-left:16px}
.connexion-trait{height:4px;background:var(--degrade)}
.connexion-corps{padding:24px}
.connexion-corps h1{margin-bottom:14px}
.connexion-corps form{display:flex;flex-direction:column;gap:14px}
.connexion-corps p{margin:0}
.connexion-corps label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--texte-2)}
.connexion-corps input{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:8px 10px;background:var(--surface);color:var(--texte);font-size:15px}
.connexion-corps .btn{align-self:flex-start;padding:9px 18px}
@media (max-width:820px){
  .page-connexion{padding:24px 16px}
}
/* Reglages : clients regroupes */
.suggestions-clients,.membres{list-style:none;margin:0;padding:0}
.groupes-clients{font-size:13px}
.groupes-clients td.nom{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.groupes-clients td.contenu{overflow-wrap:anywhere;color:var(--texte-2)}
.groupes-clients .actions{display:inline-flex;flex-wrap:wrap;gap:8px}
.liste-clients{list-style:none;margin:0;padding:6px 10px;max-height:320px;overflow-y:auto;border:1px solid var(--trait);border-radius:10px;background:var(--surface)}
.liste-clients li{padding:4px 0}
.liste-clients label.case{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.liste-clients li.ailleurs label{color:var(--texte-3);cursor:default}
.creation-groupe .liste-clients input{min-width:0;padding:0;border:0}
.suggestions-clients>li{padding:12px 0;border-bottom:1px solid var(--trait);font-size:13px;display:flex;flex-direction:column;gap:6px}
.suggestions-clients>li:last-child{border-bottom:0}
.suggestions-clients .actions,.creation-groupe .actions,.creation-groupe .choisis,.creation-groupe .resultats{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.suggestions-clients input,.creation-groupe input{border:1px solid var(--trait);border-radius:10px;padding:6px 12px;background:var(--surface);color:var(--texte);min-width:220px;max-width:100%}
.creation-groupe{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* ===== Bulles d'explication : "?" a droite du libelle, bulle sombre au survol, au toucher ou au clavier ===== */
/* Position de la bulle (left, top) posee par app.js (CSSOM), jamais hors de l'ecran. */
.aide{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin:0 0 0 6px;padding:0;border:1px solid var(--trait);border-radius:50%;background:var(--surface);color:var(--texte-2);font-size:11px;font-weight:600;line-height:1;vertical-align:middle;cursor:help;text-transform:none;letter-spacing:0}
.aide::after{content:"";position:absolute;inset:-6px}
.aide:hover,.aide[aria-expanded="true"]{border-color:var(--texte-2);color:var(--texte)}
.bulle{position:fixed;left:0;top:0;z-index:40;width:max-content;max-width:min(320px,calc(100vw - 16px));background:var(--encre);color:#fff;border-radius:var(--rayon-m);padding:10px 12px;font-size:13px;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 6px 20px rgba(34,38,43,.25)}
.bulle p{margin:0}
.bulle p+p{margin-top:6px}
.bulle b{font-weight:600}
.libelle-aide{display:inline-flex;align-items:center}
.aides-courbes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--texte-2)}
.aides-courbes li{display:inline-flex;align-items:center}
/* ===== Reglages : cartes repliables ("▾ / ▸" et aria-expanded), raccourcis, charges compactes ===== */
.raccourcis{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 16px}
.raccourcis button{border:1px solid var(--trait);background:var(--surface);color:var(--texte);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
.raccourcis button:hover{border-color:var(--texte-2)}
.reg>.carte{scroll-margin-top:calc(var(--haut-bandeau,64px) + 12px)}
.reg>.carte.repliee>:not(h2){display:none}
.reg>.carte.repliee>h2{margin:0}
.replier{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.replier:hover{text-decoration:underline}
.replier .fleche{width:12px;font-size:12px;color:var(--texte-2)}
.suggestions-repliees{margin:12px 0}
.suggestions-repliees>summary{cursor:pointer;font-weight:600;font-size:13px;padding:6px 0}

/* ===== Depenses prevues (onglet Depenses) : jamais la couleur seule ("✓", "! à vérifier", motif hachure + legende) ===== */
.bandeau-verifier{margin:0 0 14px;padding:10px 14px;border-radius:var(--rayon-m);background:var(--alerte-fond);border-left:4px solid var(--alerte);font-weight:600}
.bandeau-verifier .lien{color:var(--alerte-texte);font-weight:700}
.calendrier{margin:14px 0 16px}
.entete-calendrier{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.barres-calendrier{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;text-align:center}
.barres-calendrier li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.barres-calendrier .zone{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:120px;margin-bottom:4px;border-bottom:1px solid var(--texte-3)}
.barres-calendrier .barre{display:block;margin:0 18%;min-height:0}
.barres-calendrier .barre.mensuels,.pastille-cal.mensuels{background:var(--violet)}
.barres-calendrier .barre.pics,.pastille-cal.pics{background:repeating-linear-gradient(45deg,var(--c-encre) 0 2px,var(--c-violet-clair) 2px 6px);border:1px solid var(--c-encre)}
.barres-calendrier .barre.pics{border-radius:3px 3px 0 0}
.barres-calendrier .mois{font-size:12px;color:var(--texte-2)}
.barres-calendrier .montant{font-size:11px;font-weight:600;overflow-wrap:anywhere}
.legende-calendrier{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px}
.legende-calendrier li{display:inline-flex;align-items:center;gap:6px}
.pastille-cal{display:inline-block;width:14px;height:14px;border-radius:3px;flex:none}
.titre-pics{margin:8px 0 2px;font-size:13px;font-weight:600}
.mois-charges-liste{margin:0;padding-left:18px;font-size:13px}
/* Liste des depenses : UNE grille (--colonnes-depenses) pour l'en-tete des colonnes, les en-tetes de section, la ligne
   des ponctuels et toutes les lignes. Fournisseur | Rythme | Montant | Categorie | Poche | Par mois | action. */
body[data-ecran="depenses"] main{max-width:1400px}
.liste-depenses{--colonnes-depenses:minmax(220px,1fr) 300px 170px 190px 230px 110px 40px;--marge-depenses:12px}
.grille-depenses{display:grid;grid-template-columns:var(--colonnes-depenses);column-gap:8px;align-items:center}
.cellule-depense{position:relative;min-width:0}
.cellule-depense.par-mois{text-align:right}
.cellule-depense.action{display:flex;justify-content:center}
.entete-depenses{position:sticky;top:var(--haut-bandeau,64px);z-index:5;margin:0 0 8px;padding:8px calc(var(--marge-depenses) + 1px);background:var(--papier);box-shadow:0 1px 0 var(--trait);font-size:12px;font-weight:600;color:var(--texte-2)}
.entete-depenses .cellule-depense{display:flex;align-items:center}
.entete-depenses .par-mois{justify-content:flex-end}
.section-depenses{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-m);margin:0 0 10px}
.section-depenses>summary,.ponctuels-depenses>summary{list-style:none;cursor:pointer}
.section-depenses>summary::-webkit-details-marker,.ponctuels-depenses>summary::-webkit-details-marker{display:none}
.section-depenses>summary{padding:12px var(--marge-depenses);font-weight:600}
.titre-section{grid-column:1 / 6;display:flex;align-items:center;gap:12px;min-width:0}
.titre-section::before,.titre-ponctuels::before{content:"▸";flex:none;width:12px;font-size:12px;color:var(--texte-2)}
.section-depenses[open]>summary .titre-section::before,.ponctuels-depenses[open]>summary .titre-ponctuels::before{content:"▾"}
.compte-section{font-size:13px;font-weight:400;color:var(--texte-2);white-space:nowrap}
.section-depenses .sous-total{grid-column:6;text-align:right}
.lignes-depenses{list-style:none;margin:0;padding:0}
/* Lignes : hauteur constante, separateur fin, fond tres legerement grise une ligne sur deux */
.ligne-depense{height:56px;padding:0 var(--marge-depenses);border-top:1px solid var(--trait);font-size:13px}
.lignes-depenses>.ligne-depense:nth-child(even of .ligne-depense){background:#fafbfd}
.ligne-depense .qui{display:flex;flex-direction:column;justify-content:center;gap:2px}
.nom-ligne{display:flex;align-items:center;gap:6px;min-width:0}
.ligne-depense .nom{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne-depense .sous{display:block;color:var(--texte-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nom cliquable : ouvre les paiements du fournisseur sous la ligne */
.ligne-depense .lien-nom{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.ligne-depense .lien-nom:hover{text-decoration-style:solid}
.paiements-depense{padding:8px var(--marge-depenses) 12px;border-top:1px solid var(--trait);background:var(--papier);font-size:12px;overflow-x:auto}
.table-paiements{width:100%;border-collapse:collapse;margin-bottom:8px}
.table-paiements th{text-align:left;font-weight:600;color:var(--texte-3);padding:4px 8px}
.table-paiements td{padding:4px 8px;border-top:1px solid var(--trait);vertical-align:top}
.table-paiements .num{text-align:right;white-space:nowrap}
.table-paiements .libelle-bancaire{word-break:break-word}
.badge-etat.alerte.pastille-verifier{flex:none;font-size:11px;padding:0 7px;line-height:18px;white-space:nowrap}
/* Boutons Rythme et Poche : meme hauteur (32 px), meme taille de texte */
.ligne-depense .boutons-repart{display:flex;gap:3px;flex-wrap:nowrap}
.ligne-depense .choix{height:32px;padding:0 6px;font-size:12px;line-height:1}
.ligne-depense .rythmes .choix{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ligne-depense .repart{position:relative;flex-wrap:nowrap}
.ligne-depense .saisie-autre{display:none}
.ligne-depense .saisie-autre:has(.pct-ewa:not([hidden])){display:inline-flex;position:absolute;top:calc(100% + 4px);left:0;z-index:3;padding:6px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-s);box-shadow:var(--ombre)}
.ligne-depense select,.ligne-depense .montant-charge{height:32px;border:1px solid var(--trait);border-radius:var(--rayon-s);background:var(--surface);color:var(--texte);font-size:13px}
.ligne-depense .choix-categorie{width:100%;min-width:0;padding:0 6px}
/* Montant puis l'emplacement du mois, reserve meme vide */
.montant-et-mois{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:8px;align-items:center}
.montant-et-mois .emplacement{position:relative;display:block;min-width:0}
.ligne-depense .montant-charge{width:100%;padding:0 8px}
.mois-depense{width:100%;padding:0 4px}
.total-ponctuel{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cellule-depense.par-mois .num{font-weight:600}
.ligne-depense.ponctuel .nom,.ligne-depense.ponctuel .par-mois .num,.ligne-depense.ponctuel .total-ponctuel{color:var(--texte-3)}
.barre-texte{text-decoration:line-through}
/* "Ton choix" : petit point (forme, pas seulement couleur) dans le coin du champ force, texte au survol */
.point-choix{position:absolute;top:-4px;right:-4px;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--violet-texte);border:2px solid var(--surface);cursor:help}
.point-choix::after{content:"";position:absolute;inset:-5px}
.action-ligne{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--trait);border-radius:var(--rayon-s);background:var(--surface);color:var(--texte);font-size:15px;cursor:pointer}
.action-ligne:hover{border-color:var(--texte-2)}
/* Ponctuels : une seule ligne repliee par defaut, memes colonnes une fois depliee */
.ponctuels-depenses{border-top:1px solid var(--trait)}
.ponctuels-depenses>summary{padding:10px var(--marge-depenses);font-size:13px;color:var(--texte-2)}
.titre-ponctuels{grid-column:1 / -1;display:flex;align-items:center;gap:6px}
/* Ecran moyen : memes colonnes, plus etroites ; sous 1178 px la liste defile en largeur */
@media (max-width:1381px){
  .liste-depenses{--colonnes-depenses:minmax(140px,1fr) 290px 150px 140px 210px 90px 36px}
}
@media (min-width:821px) and (max-width:1177px){
  .liste-depenses{overflow-x:auto}
  .liste-depenses>*{min-width:1130px}
}
.ajout-depense{margin-bottom:14px}
.champs-ajout{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:10px}
.champ-ajout{display:flex;flex-direction:column;gap:4px;font-size:13px}
.champ-ajout input:not(.montant-charge):not(.pct-ewa),.champ-ajout select{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:5px 8px;background:var(--surface);color:var(--texte);max-width:100%}
.lien-onglet-depenses{margin:0;font-size:14px}
.detail-cout li.categorie-cout{font-weight:600;padding-top:10px}
.detail-cout li.ligne-cout{padding-left:12px}
.liste-gros-frais{list-style:none;margin:0 0 8px;padding:0}
.liste-gros-frais li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--trait);font-size:13px}
.liste-gros-frais .quoi{display:flex;flex-direction:column;min-width:0}
.liste-gros-frais .sous{color:var(--texte-2);font-size:12px;overflow-wrap:anywhere}
.gros-frais{margin-top:16px}
/* Reglages > Categories */
.deux-listes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.liste-categories ol{list-style:none;margin:0;padding:0}
/* Memes colonnes pour toutes les lignes : nom | monter | descendre | fusionner | supprimer ; une case vide tient la
   place d'une action absente. En dessous de 1178 px : le nom sur sa ligne, les actions alignees dessous. */
.ligne-categorie{display:grid;grid-template-columns:minmax(0,1fr) auto auto 150px 72px;align-items:center;gap:6px 8px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--trait);font-size:13px}
.ligne-categorie .nom{display:flex;flex-direction:column;font-weight:600;min-width:0}
.ligne-categorie select{width:100%;min-width:0}
.ligne-categorie .case-supprimer{justify-self:end}
.ligne-categorie .confirmer-fusion{grid-column:1 / -1}
.ligne-categorie .sous{font-weight:400;color:var(--texte-3);font-size:12px}
.nom-categorie,.ajout-categorie input{border:1px solid var(--trait);border-radius:var(--rayon-s);padding:5px 8px;background:var(--surface);color:var(--texte);min-width:0;width:220px;max-width:100%}
.confirmer-fusion{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ajout-categorie{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (max-width:820px){
  /* Telephone : chaque ligne devient une fiche, chaque champ garde son intitule (data-libelle) */
  .liste-depenses{--colonnes-depenses:minmax(0,1fr) auto}
  .entete-depenses{display:none}
  .titre-section{grid-column:1;flex-wrap:wrap;gap:4px 10px}
  .section-depenses .sous-total{grid-column:2}
  .ligne-depense{display:flex;flex-direction:column;align-items:stretch;gap:10px;height:auto;padding:12px var(--marge-depenses)}
  .ligne-depense .cellule-depense[data-libelle]::before{content:attr(data-libelle);display:block;margin-bottom:4px;font-size:11px;color:var(--texte-3)}
  .ligne-depense .nom,.ligne-depense .sous{white-space:normal}
  .ligne-depense .boutons-repart{flex-wrap:wrap}
  .ligne-depense .rythmes .choix{flex:0 0 auto}
  .montant-et-mois{grid-template-columns:minmax(0,160px) 100px}
  .cellule-depense.par-mois{text-align:left}
  .ligne-depense .cellule-depense.action:empty{display:none}
  .barres-calendrier{grid-template-columns:repeat(6,minmax(0,1fr))}
  .deux-listes{grid-template-columns:1fr}
}
@media (max-width:1177px){
  .ligne-categorie{grid-template-columns:auto auto minmax(0,1fr) 72px}
  .ligne-categorie>.nom,.ligne-categorie>.nom-categorie{grid-column:1 / -1}
}
/* Reglages : export comptable */
.actions-export{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.actions-export a.btn{text-decoration:none}
#reglage-export progress{display:block;width:100%;margin-top:6px}
.verdict-export{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0}
.verdict-export .badge-etat{font-size:13px}
.liste-controle{border-bottom:1px solid var(--trait)}
.liste-controle summary{cursor:pointer;font-weight:600;padding:7px 0}
.liste-controle.information summary{font-weight:500;color:var(--texte-2)}
.liste-controle ul{margin:0 0 8px;padding-left:18px;font-size:13px}
.liste-controle li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:3px 0;overflow-wrap:anywhere}
/* Passe generale : une seule hauteur de bouton (et de petit bouton) et une seule marge interieure de carte, sur tous
   les ecrans ; un lien en forme de bouton a la meme hauteur qu'un bouton. */
:root{--haut-btn:34px;--haut-btn-petit:28px;--marge-carte:20px 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--haut-btn);line-height:1.2;text-decoration:none}
.btn.petit{min-height:var(--haut-btn-petit)}
.carte,.reg>.carte,#compte .carte{padding:var(--marge-carte)}
/* Page 404 */
.connexion-corps .chapo{margin:0 0 18px}