/* ==========================================================================
   Mes Comptes Faciles — feuille de style de l'application et des pages publiques
   Même famille que l'accueil (papier, encre, or), réglée pour des écrans où l'on
   travaille tous les jours (Taste Skill, règles « app screens ») :
   - une police de texte, Archivo ; le Bodoni ne sert qu'au titre de chaque page ;
   - surfaces séparées par un filet discret ou un pas de ton, jamais d'ombre ni de dégradé ;
   - bouton principal à l'encre ; l'or est réservé aux données ;
   - au plus quatre teintes par écran, gris pour ce qui va bien, couleur pour ce qui alerte.
   ========================================================================== */

:root {
  color-scheme: light;
  --fond: #f4f2ed;          /* papier */
  --surface: #ffffff;
  --surface-2: #ebe7de;     /* un pas sous le papier : survol, champs, aplats */
  --encre: #17140e;
  --encre-2: #57514a;
  --encre-3: #6b655c;       /* le gris le plus clair qui reste lisible (4,5:1) */
  --filet: #e3dfd5;         /* bord des cartes, filets de lignes */
  --filet-fort: #cbc4b6;    /* bord des champs et boutons secondaires */
  --sombre: #17140e;        /* texte posé sur l'or */
  --inverse: #ffffff;       /* texte posé sur l'encre */

  /* l'or : marque et données */
  --or: #dfa43a;
  --or-clair: #e9b85c;
  --or-texte: #8a5d0c;      /* or lisible en texte sur le papier */
  --donnee: #b07a12;        /* barres, courbes : or assez foncé pour se voir sur le papier */
  --donnee-pale: rgba(176, 122, 18, 0.14);

  /* états */
  --vert: #247b50;
  --tomate: #c4242a;
  --orange: #b4540f;
  --bleu: #2f5f9e;
  --violet: #6b5a8e;
  --jaune-pale: #fbf1dc;
  --vert-pale: #e3f3e8;
  --tomate-pale: #fbe9e7;
  --bleu-pale: #e6edf6;
  --texte-vert: #1d5e3e;
  --texte-rouge: #8f1c20;
  --texte-bleu: #23497a;
  --alerte: var(--tomate);
  --survol: #f7f5f0;
  --case: #f8f6f1;

  --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --titrage: 'Bodoni Moda', 'Didot', Georgia, serif;

  /* rayons serrés, choisis une fois : cartes 8, contrôles 6, puces 4 */
  --r-l: 8px;
  --r-m: 8px;
  --r-s: 6px;

  --largeur: 1440px; /* compromis : large, sans s'étirer sur les très grands écrans */
  --gouttiere: 20px;
  --marge: clamp(16px, 3vw, 48px);
}

/* Thème sombre : noirs neutres, pas de bleu nuit */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0f0f10;
  --surface: #171718;
  --surface-2: #222224;
  --encre: #f3eee3;
  --encre-2: #b4b0a8;
  --encre-3: #95918a;
  --filet: #2a2a2c;
  --filet-fort: #46464a;
  --sombre: #14110a;
  --inverse: #0f0f10;
  --or: #e6b04a;
  --or-clair: #efc372;
  --or-texte: #e6b04a;
  --donnee: #e6b04a;
  --donnee-pale: rgba(230, 176, 74, 0.16);
  --vert: #4cc58a;
  --tomate: #ef6a64;
  --orange: #f0a057;
  --bleu: #7ea6e0;
  --violet: #a99ad0;
  --jaune-pale: #2a2416;
  --vert-pale: #16271d;
  --tomate-pale: #2c1a1a;
  --bleu-pale: #18212e;
  --texte-vert: #6fd6a3;
  --texte-rouge: #ff9a94;
  --texte-bleu: #a9c8f0;
  --survol: #1c1c1e;
  --case: #1a1a1c;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--or); color: var(--sombre); }

.feuille { max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge) 64px; }

/* --- Typographie ------------------------------------------------------------ */

h1, h2, h3 { font-family: var(--police); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }

/* Le titre de la page : seul usage du Bodoni dans l'application, à taille d'écran de travail */
.titre-article, .gros-titre {
  font-family: var(--titrage); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2rem); line-height: 1.12;
  letter-spacing: -0.015em; margin-bottom: 6px; font-variation-settings: 'opsz' 28; font-optical-sizing: none;
}
.titre-breve { font-size: 1.05rem; font-weight: 650; margin: 0 0 4px; }
.titre-rubrique { font-size: 1.07rem; font-weight: 650; margin: 0 0 14px; }

/* Ancien sur-titre en capitales espacées : désormais une simple ligne grise en casse normale */
.surtitre { display: block; font-size: 0.87rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--encre-3); margin: 0 0 6px; }
.chapo { font-size: 1.02rem; line-height: 1.55; color: var(--encre-2); margin: 8px 0 0; max-width: 62ch; }
.legende { font-size: 0.85rem; color: var(--encre-3); margin: 8px 0 0; }
.petit { font-size: 0.9rem; }
.discret { color: var(--encre-3); }
.mono, .chiffre { font-variant-numeric: tabular-nums; }
.mono { font-weight: 600; }
.depense, .alerte { color: var(--alerte); }
.positif { color: var(--vert); }
.texte-courant p { margin: 0 0 0.8em; }

/* --- En-tête ---------------------------------------------------------------- */

.entete { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.logo-marque { height: 36px; flex: 0 0 auto; }
.logo-marque img { height: 100%; width: auto; display: block; }
.menu { display: flex; flex-wrap: wrap; gap: 2px; font-weight: 500; font-size: 0.95rem; }
.menu a { text-decoration: none; padding: 7px 11px; color: var(--encre-2); border-radius: var(--r-s); position: relative; }
.menu a:hover { color: var(--encre); background: var(--surface-2); }
.menu a.actif { color: var(--encre); font-weight: 650; }
.menu a.actif::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -17px; height: 2px; background: var(--encre); }
.bascule-theme { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s); border: 1px solid var(--filet-fort); background: transparent; color: var(--encre-2); cursor: pointer; padding: 0; }
.bascule-theme:hover { color: var(--encre); background: var(--surface-2); }
.bascule-theme svg { width: 17px; height: 17px; }
.bascule-langue { margin: 0; display: inline-flex; }
.bascule-langue button { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--r-s); border: 1px solid var(--filet-fort); background: transparent; color: var(--encre-2); font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.bascule-langue button:hover { color: var(--encre); background: var(--surface-2); }
.bascule-theme .lune { display: none; }
:root[data-theme="clair"] .bascule-theme .soleil, :root:not([data-theme]) .bascule-theme .soleil { display: none; }
:root[data-theme="clair"] .bascule-theme .lune, :root:not([data-theme]) .bascule-theme .lune { display: block; }
.icone-lien { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s); color: var(--encre-2); }
.icone-lien:hover { color: var(--encre); background: var(--surface-2); }
.icone-lien svg { width: 20px; height: 20px; }
.entete .a-droite { margin-left: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.entete .a-droite > a:not(.bouton) { text-decoration: none; font-weight: 600; }
.entete form { margin: 0; }
.qui { font-size: 0.9rem; color: var(--encre-2); font-weight: 600; }

.bandeau-demo {
  background: var(--jaune-pale); color: var(--or-texte); font-size: 0.9rem; font-weight: 550;
  padding: 9px 16px; margin: 14px 0 0; border-radius: var(--r-m); text-align: center;
}
.bandeau-demo a { font-weight: 700; text-decoration-color: currentColor; }

/* --- Boutons : à plat ; le principal à l'encre ----------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  font-family: var(--police); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; color: var(--inverse);
  background: var(--encre); border: 1px solid var(--encre); border-radius: var(--r-s);
  padding: 9px 18px; cursor: pointer; line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.bouton:hover { background: var(--encre-2); border-color: var(--encre-2); }
.bouton:active { transform: translateY(1px); }
.bouton-grand { font-size: 1rem; min-height: 46px; padding: 12px 24px; }
.bouton-creux, .bouton-inverse, .bouton-sombre { background: var(--surface); color: var(--encre); border-color: var(--filet-fort); }
.bouton-creux:hover, .bouton-inverse:hover, .bouton-sombre:hover { background: var(--surface-2); color: var(--encre); border-color: var(--filet-fort); }
.bouton-petit { min-height: 32px; padding: 6px 12px; font-size: 0.87rem; }
.bouton-texte { background: none; border: 0; padding: 0; font: inherit; color: var(--encre-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bouton-texte:hover { color: var(--alerte); }
.lien-fleche { font-weight: 600; text-decoration: none; color: var(--encre); }
.lien-fleche::after { content: ' →'; transition: margin 0.15s; }
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche:hover::after { margin-left: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.actions form { margin: 0; }

/* --- Mise en page -------------------------------------------------------------- */

.une-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gouttiere); padding-top: 28px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

/* Début d'écran sans compte : un simple bloc, pas un héros */
.heros { display: grid; gap: 20px; padding: 40px 0; max-width: 720px; }

/* --- Surfaces : un filet discret, pas d'ombre ---------------------------------------- */

.carte, .encadre, .coupon, .panneau, .avec-filet-gauche {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); padding: 20px 22px;
}
.encadre { margin-bottom: 20px; }
.encadre-fonce { background: var(--surface-2); border-color: transparent; }
.encadre-noir { background: var(--surface); border-color: var(--filet-fort); }

.aplat { border-radius: var(--r-l); padding: 20px 22px; }
.aplat-jaune { background: var(--jaune-pale); }
.aplat-bleu { background: var(--bleu-pale); }
.aplat-vert { background: var(--vert-pale); }
.aplat-tomate { background: var(--tomate-pale); }
.aplat-creme { background: var(--surface-2); }

.coupon { margin: 0 0 20px; padding: 24px 24px 26px; }
.coupon-titre { font-weight: 650; font-size: 1.1rem; margin: 0 0 16px; }

/* --- Formulaires --------------------------------------------------------------------- */

.formulaire label, .champ > label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.champ { margin-bottom: 16px; }
.champ .aide, .helptext { display: block; font-size: 0.85rem; color: var(--encre-3); margin-top: 5px; }
.champ ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--encre-2); }

input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=search], input[type=file], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre); min-height: 40px;
  background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-s);
  padding: 8px 11px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
input[type=file] { border-style: dashed; padding: 14px; background: var(--case); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-2) 50%), linear-gradient(135deg, var(--encre-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
input:focus, select:focus, textarea:focus { border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
option { background: var(--surface); color: var(--encre); }
input.mono { text-align: right; }
.errorlist, .erreur { color: var(--alerte); font-size: 0.87rem; font-weight: 600; list-style: none; padding: 0; margin: 6px 0; }

/* --- Messages ---------------------------------------------------------------------------- */

.depeches-flash { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.depeches-flash li { background: var(--vert-pale); color: var(--texte-vert); padding: 11px 16px; font-weight: 600; font-size: 0.92rem; border-radius: var(--r-m); }
.depeches-flash .info { background: var(--bleu-pale); color: var(--texte-bleu); }
.depeches-flash .error, .depeches-flash .warning { background: var(--tomate-pale); color: var(--texte-rouge); }

/* --- Tableaux : en-têtes gris en casse normale, chiffres alignés à droite ---------------- */

.registre { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.registre th { text-align: left; font-size: 0.82rem; font-weight: 600; color: var(--encre-3); border-bottom: 1px solid var(--filet); padding: 8px 10px; white-space: nowrap; }
.registre td { padding: 11px 10px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.registre th:first-child, .registre td:first-child { padding-left: 4px; }
.registre th:last-child, .registre td:last-child { padding-right: 4px; }
.registre tbody tr:last-child td { border-bottom: 0; }
.registre .montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.registre tfoot td { border-top: 1px solid var(--encre); border-bottom: 0; font-weight: 700; }
.registre .date { white-space: nowrap; font-size: 0.88rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.registre .libelle { min-width: 220px; font-weight: 550; }
.registre .libelle small { display: block; color: var(--encre-3); font-size: 0.82rem; font-weight: 400; }
.registre select { font-size: 0.9rem; min-height: 34px; padding: 5px 30px 5px 10px; min-width: 170px; }
.registre select.a-classer { border: 1px dashed var(--tomate); background-color: var(--tomate-pale); }
.registre tbody tr:hover td { background: var(--survol); }
.registre .colonne-action { width: 1%; white-space: nowrap; text-align: right; }
.registre-defilant { overflow-x: auto; }
.carte > .registre-defilant, .carte > .registre { margin: -6px 0; }

.conduite { list-style: none; padding: 0; margin: 0; }
.conduite li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.conduite .points { flex: 1 1 auto; border-bottom: 1px dotted var(--filet-fort); transform: translateY(-4px); min-width: 16px; }
.conduite .valeur { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.conduite .total { border-top: 1px solid var(--filet-fort); margin-top: 6px; padding-top: 11px; font-weight: 700; }

/* --- Chiffres clés : une carte divisée, libellé sur valeur, 24 à 30 px -------------------- */

.gros-chiffre { font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.chiffres-cles { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 28px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); }
.chiffres-cles > div { padding: 16px 20px 18px; background: transparent !important; border-left: 1px solid var(--filet); }
.chiffres-cles > div:first-child { border-left: 0; }
.chiffres-cles .etiquette { font-size: 0.87rem; font-weight: 500; display: block; color: var(--encre-3); }
.chiffres-cles .chiffre { font-weight: 700; font-size: clamp(1.5rem, 2vw, 1.75rem); display: block; margin-top: 4px; line-height: 1.15; letter-spacing: -0.02em; }
.chiffres-cles .note { display: block; font-size: 0.85rem; margin-top: 6px; color: var(--encre-3); }
.chiffres-cles .aplat-tomate .chiffre { color: var(--tomate); }
.chiffres-cles .aplat-vert .chiffre { color: var(--vert); }

/* --- Répartition et barres : une seule teinte de données -------------------------------- */

.repartition { display: flex; gap: 2px; height: 10px; margin: 0 0 18px; }
.repartition span { display: block; height: 100%; border-radius: 2px; min-width: 3px; }

.barres { list-style: none; padding: 0; margin: 0; }
.barres li { display: grid; grid-template-columns: minmax(150px, 42%) 1fr auto; align-items: center; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: 0.95rem; }
.barres li:last-child { border-bottom: 0; }
.barres .nom { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.barres .nom a { text-decoration: none; font-weight: 550; }
.barres .nom a:hover { text-decoration: underline; }
/* Une pastille de couleur par rubrique faisait un arc-en-ciel : on la retire, la barre suffit */
.pastille { display: none; }
.barres .piste { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.barres .plein { position: absolute; left: 0; top: 0; bottom: 0; background: var(--donnee); border-radius: 4px; }
.hachure, .barres .plein.hachure { background: repeating-linear-gradient(135deg, var(--encre-3) 0 2px, transparent 2px 6px) !important; }
.barres .valeur { text-align: right; white-space: nowrap; min-width: 100px; font-weight: 600; font-variant-numeric: tabular-nums; }
.badge-alerte { display: inline-block; background: var(--tomate-pale); color: var(--texte-rouge); font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

/* Les rubriques partagent la teinte des données (c-0 … c-13 restent pour compatibilité) */
.c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12, .c-13 { background: var(--donnee) !important; }

/* Jauges de budget : gris quand tout va bien, couleur seulement quand il faut agir */
.jauge { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; margin: 9px 0 4px; }
.jauge .plein { position: absolute; left: 0; top: 0; bottom: 0; background: var(--encre-3); border-radius: 4px; }
.jauge .plein.attention { background: var(--orange); }
.jauge .plein.depasse { background: var(--tomate); }
.jauge .aujourdhui { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--encre); }

/* --- Graphiques SVG ----------------------------------------------------------------------------- */

.graphique { width: 100%; height: auto; display: block; overflow: visible; }
.graphique text { font-family: var(--police); font-size: 12px; fill: var(--encre-3); }
.graphique .axe { stroke: var(--filet-fort); stroke-width: 1; }
.graphique .grille { stroke: var(--filet); stroke-width: 1; }
.graphique .barre { fill: var(--donnee); }
.graphique .barre.deficit { fill: var(--tomate); }
.graphique .revenu { stroke: var(--vert); stroke-width: 3; }
.graphique .courbe { fill: none; stroke: var(--donnee); stroke-width: 2; stroke-linejoin: round; }
.graphique .aire { fill: var(--donnee-pale); }
.graphique .point { fill: var(--surface); stroke: var(--donnee); stroke-width: 2; }
.graphique .etiquette-mois.actif { font-weight: 700; fill: var(--encre); }

.legende-graphique { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.85rem; color: var(--encre-2); margin: 12px 0 0; }
.legende-graphique span::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; background: var(--donnee); border-radius: 2px; }
.legende-graphique .l-revenu::before { height: 3px; vertical-align: 3px; background: var(--vert); }
.legende-graphique .l-deficit::before { background: var(--tomate); }

/* --- Application ---------------------------------------------------------------------------- */

.navigation-mois { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-m); padding: 5px; }
.navigation-mois a, .navigation-mois strong { white-space: nowrap; }
.navigation-mois strong { font-weight: 650; font-size: 1.02rem; text-transform: capitalize; }
.navigation-mois a { text-decoration: none; font-weight: 550; font-size: 0.9rem; padding: 7px 12px; border-radius: var(--r-s); color: var(--encre-2); }
.navigation-mois a:hover { background: var(--surface-2); color: var(--encre); }

.entete-page { display: flex; justify-content: space-between; align-items: end; gap: 16px 28px; flex-wrap: wrap; padding-top: 28px; }

.filtres { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px 16px; align-items: end; margin: 22px 0 16px; padding: 16px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-l); }
.filtres-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.resultat-filtre { margin: -6px 0 14px; }
.filtres label { font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 6px; color: var(--encre-2); }
.pagination { display: flex; gap: 16px; justify-content: center; margin: 20px 0; font-size: 0.92rem; }

/* Objectifs : chacun réparti sur un ou plusieurs comptes, puis l'épargne libre compte par compte */
.objectifs-mise { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 8px; }
.objectifs-liste { display: grid; gap: 18px; }
.poche-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 16px; flex-wrap: wrap; }
.poche-tete .titre-rubrique { margin: 0; }
.poche-tete p { margin: 2px 0 0; }
.poche-montant { white-space: nowrap; font-size: 1.05rem; }
.objectif .jauge { margin: 12px 0 10px; }
.objectif .jauge .plein { background: var(--encre); }
.objectif .jauge .plein.atteint { background: var(--vert); }
.objectif-parts { list-style: none; margin: 0 0 12px; padding: 0; }
.objectif-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.9rem; color: var(--encre-2); border-bottom: 1px dotted var(--filet-fort); }
.objectif-parts li:last-child { border-bottom: 0; }
.poche-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.poche-somme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.poche-somme select { min-height: 30px; max-width: 240px; font-size: 0.9rem; }
.objectifs-nouveau { position: sticky; top: 16px; }
@media (max-width: 900px) { .objectifs-mise { grid-template-columns: 1fr; } .objectifs-nouveau { position: static; } }

/* Tableau de bord : résumé des objectifs */
.objectifs-resume { margin-top: 18px; }
.objectifs-mini { list-style: none; margin: 0; padding: 0; }
.objectifs-mini li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) auto; align-items: center; gap: 8px 20px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.objectifs-mini li:last-child { border-bottom: 0; }
.objectifs-mini .jauge { display: block; margin: 0; }
.objectifs-mini .jauge .plein { display: block; background: var(--encre); }
.objectifs-mini .jauge .plein.atteint { background: var(--vert); }
@media (max-width: 640px) { .objectifs-mini li { grid-template-columns: 1fr auto; } .objectifs-mini .jauge { grid-column: 1 / -1; order: 3; } }

/* Comptes partagés */
.invitation-partage { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 16px; }
.invitation-partage p { margin: 0; }
.invitation-partage form { margin: 0; }
.mention-partage { display: block; color: var(--encre-3); font-weight: 500; }
.liste-partages { list-style: none; margin: 0; padding: 0; }
.liste-partages li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.liste-partages li:last-child { border-bottom: 0; }
.liste-partages small { display: block; }
.liste-partages form { margin: 0; }

/* Bilan de l'année : page lisible à l'écran et imprimable (ou enregistrable en PDF) */
.bilan-outils [hidden] { display: none; }
.bilan-outils { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 24px 0 8px; }
.bilan-tete { margin: 18px 0 22px; }
.bilan-tete .chapo { max-width: 80ch; }
.bilan-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.bilan-chiffres > div { padding: 16px 18px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-m); }
.bilan-chiffres p { margin: 0; }
.bilan-chiffres .etiquette { font-size: 0.85rem; font-weight: 600; color: var(--encre-3); }
.bilan-chiffres .chiffre { font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin: 4px 0 2px; }
.bilan-bloc { margin-bottom: 28px; }
.bilan-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; align-items: start; }
@media (max-width: 900px) {
  .bilan-chiffres { grid-template-columns: 1fr 1fr; }
  .bilan-deux { grid-template-columns: 1fr; }
}
@media print {
  .entete, .pied, .bandeau-cookies, .bandeau-demo, .messages, .ne-pas-imprimer { display: none !important; }
  body, .bilan-chiffres > div { background: #fff !important; color: #000 !important; }
  .bilan-annuel { font-size: 10.5pt; }
  .bilan-chiffres { grid-template-columns: repeat(4, 1fr); }
  .bilan-chiffres > div { border-color: #bbb; }
  .bilan-chiffres .chiffre { font-size: 15pt; }
  .bilan-deux { grid-template-columns: 1fr 1fr; }
  .registre td { padding: 4px 6px; }
  .registre th { padding: 4px 6px; }
  .bilan-bloc, .registre tr { break-inside: avoid; }
}

/* Tableau de bord : fin du mois estimée */
.prevision { margin-top: 18px; }
.prevision-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.prevision-tete .titre-rubrique { margin: 0 0 2px; }
.prevision-tete p { margin: 0; }
.prevision-chiffre { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.prevision-calcul .intitule { white-space: normal; }

/* Budgets : le résumé du mois, une ligne par budget modifiable sur place, et l'ajout d'une rubrique */
.budget-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin: 28px 0 14px; }
.budget-resume { flex: 1 1 420px; }
.budget-chiffres { margin: 6px 0 0; font-size: 1.05rem; color: var(--encre-2); }
.budget-chiffres b { color: var(--encre); font-size: 1.25rem; }
.budget-reprendre { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; text-align: right; }
.budget-reprendre .bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.jauge-grande { height: 12px; border-radius: 6px; margin: 4px 0 6px; }
.jauge-grande .plein { border-radius: 6px; background: var(--encre); }
.budget-saisie { margin-top: 26px; }

.budget-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: start; }
.budget-colonne-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.budget-colonne-tete .titre-rubrique { margin: 0; }
.budget-colonne-tete b { color: var(--encre); }
.attention-texte { color: var(--orange); }
.champ-euros { position: relative; display: inline-flex; align-items: center; }
.champ-euros input { width: 78px; min-height: 28px; padding: 2px 22px 2px 8px; text-align: right; font-size: 0.92rem; }
.champ-euros span { position: absolute; right: 9px; color: var(--encre-3); pointer-events: none; font-size: 0.9rem; }

/* Toutes les rubriques, une ligne serrée chacune : nom, dépensé, budget, et un trait de progression */
.budget-liste { padding: 4px 16px 8px; columns: 2; column-gap: 28px; column-rule: 1px solid var(--filet); }
.budget-liste ul { list-style: none; margin: 0; padding: 0; }
.budget-groupe { margin: 8px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--encre-3); break-after: avoid; }
.budget-rang { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 3px 0 4px; border-bottom: 1px solid var(--filet); break-inside: avoid; }
@media (max-width: 1300px) { .budget-liste { columns: 1; } }
.budget-rang label { font-size: 0.88rem; font-weight: 550; line-height: 1.25; }
.budget-rang.sans-budget label { font-weight: 450; color: var(--encre-2); }
.budget-depense { text-align: right; font-size: 0.9rem; color: var(--encre-2); }
.budget-rang.depasse .budget-depense { color: var(--alerte); }
.budget-trait { position: absolute; left: 0; right: 96px; bottom: -1px; height: 2px; background: transparent; }
.budget-trait span { display: block; height: 100%; background: var(--encre-3); border-radius: 1px; }
.budget-rang.attention .budget-trait span { background: var(--orange); }
.budget-rang.depasse .budget-trait span { background: var(--tomate); }

.budget-enregistrer { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 12px 0; margin-top: 4px; background: var(--fond); }

@media (max-width: 720px) {
  .budget-reprendre { align-items: flex-start; text-align: left; }
}

.regles-redaction { margin-top: 28px; }
.regles-redaction summary { cursor: pointer; list-style: none; }
.regles-redaction summary::-webkit-details-marker { display: none; }
.colonnes-regles { columns: 3 160px; column-gap: 24px; }
.colonnes-regles p { break-inside: avoid; margin: 0 0 14px; }

/* --- Pied de page ---------------------------------------------------------------------------- */

.pied { border-top: 1px solid var(--filet); margin-top: 64px; padding-top: 18px; font-size: 0.87rem; color: var(--encre-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.pied p { margin: 0; }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* --- Responsive -------------------------------------------------------------------------------- */

@media (max-width: 980px) {
  :root { --gouttiere: 16px; }
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 { grid-column: span 12; }
  .chiffres-cles { grid-template-columns: 1fr 1fr; }
  .chiffres-cles > div:nth-child(3) { border-left: 0; }
  .chiffres-cles > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .filtres { grid-template-columns: 1fr 1fr; }
  .filtres .filtre-recherche { grid-column: span 2; }
}

@media (max-width: 640px) {
  .entete { gap: 10px; padding: 12px 0; }
  .entete .a-droite { margin-left: auto; }
  .logo { font-size: 0.95rem; gap: 8px; line-height: 1.1; flex: 0 0 auto; }
  .logo-nom { display: inline-block; max-width: 7.6em; }
  .logo-marque { height: 28px; }
  .menu a.actif::after { bottom: -3px; }
  .entete .a-droite .bouton { min-height: 32px; padding: 6px 10px; font-size: 0.85rem; }
  .qui { display: none; }
  .navigation-mois a { padding: 7px 6px; font-size: 0.85rem; }
  .navigation-mois strong { font-size: 0.95rem; }
  .menu { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .barres li { grid-template-columns: 1fr auto; }
  .barres .piste { grid-column: span 2; order: 3; }
  .registre .libelle { min-width: 0; }
  .filtres { grid-template-columns: 1fr; }
  .filtres .filtre-recherche { grid-column: auto; }
  .carte, .encadre, .coupon, .panneau, .aplat { padding: 16px; }
}

/* --- Calendrier des charges fixes ----------------------------------------------------------- */

.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendrier-entete { font-size: 0.8rem; font-weight: 600; color: var(--encre-3); text-align: center; padding: 2px 0 6px; text-transform: capitalize; }
.calendrier-entete.week-end { color: var(--encre-3); opacity: .7; }
.case {
  position: relative; min-height: 104px; padding: 6px 6px 22px; border-radius: var(--r-s);
  background: var(--case); display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.case.hors-mois { background: transparent; }
.case.hors-mois .case-jour { color: var(--filet-fort); }
.case.occupee { background: var(--surface-2); }
.case.aujourdhui { outline: 2px solid var(--encre); outline-offset: -2px; }
.case.aujourdhui .case-jour { background: var(--encre); color: var(--inverse); }
.case-jour { font-size: 0.8rem; font-weight: 700; align-self: flex-start; padding: 1px 6px; border-radius: 6px; line-height: 1.4; }
.case.passee .case-jour { color: var(--encre-3); }
.case.passee.aujourdhui .case-jour { color: var(--inverse); }
.case-total { position: absolute; left: 6px; right: 6px; bottom: 4px; font-size: 0.72rem; font-weight: 700; text-align: right; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.puce {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 0.72rem; font-weight: 600; line-height: 1.25;
  background: var(--surface); border-radius: 4px; padding: 3px 5px;
}
.puce .pastille { width: 8px; height: 8px; border-radius: 3px; }
.puce-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce-prelevee { opacity: 0.6; }
.puce-prelevee .puce-nom::after { content: ' ✓'; color: var(--vert); font-weight: 800; }
.puce-manquante { outline: 1px dashed var(--tomate); color: var(--texte-rouge); }
.puce-revenu { background: var(--vert-pale); }

.legende-calendrier { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; color: var(--encre-2); margin: 14px 0 0; }
.temoin { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--surface); border: 1px solid var(--filet-fort); }
.temoin-prelevee { opacity: 0.55; }
.temoin-manquante { border: 1px dashed var(--tomate); }
.temoin-revenu { background: var(--vert-pale); border-color: transparent; }

.etiquette-carte { font-size: 0.86rem; font-weight: 650; color: var(--encre-2); }
.prochain { margin: 6px 0 4px; display: grid; gap: 2px; }
.prochain strong { font-size: 1.15rem; }

.suggestion { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--filet); }
.suggestion strong { display: block; }

.echeancier { list-style: none; padding: 0; margin: 0; }
.echeancier li { display: grid; grid-template-columns: 64px auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.echeancier li:last-child { border-bottom: 0; }
.echeance-date { font-size: 0.84rem; font-weight: 650; color: var(--encre-3); }
.echeance-nom { font-weight: 600; min-width: 0; }
.echeance-nom small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--encre-3); }
.echeance-statut { font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--encre-2); white-space: nowrap; }
.echeance-prelevee .echeance-statut { background: var(--vert-pale); color: var(--texte-vert); }
.echeance-manquante .echeance-statut { background: var(--tomate-pale); color: var(--texte-rouge); }
.echeance-prelevee .echeance-nom, .echeance-prelevee .echeance-montant { color: var(--encre-2); }
.echeance-montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

.a-venir-liste { list-style: none; padding: 0; margin: 8px 0 0; }
.a-venir-liste li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--filet); font-size: 0.9rem; }
.a-venir-liste li:last-child { border-bottom: 0; }
.a-venir-liste .mono { margin-left: auto; }

@media (max-width: 640px) {
  .calendrier { gap: 3px; }
  .case { min-height: 58px; padding: 4px 3px 16px; }
  .case-jour { font-size: 0.72rem; padding: 0 4px; }
  .puce { padding: 2px; justify-content: center; }
  .puce-nom { display: none; }
  .puce .pastille { width: 9px; height: 9px; }
  .case-total { font-size: 0.6rem; bottom: 2px; left: 2px; right: 2px; text-align: center; }
  .echeancier li { grid-template-columns: 52px auto 1fr auto; }
  .echeance-statut { display: none; }
}

.chiffres-cles .par { font-size: 0.9rem; font-weight: 600; margin-left: 3px; letter-spacing: 0; }

/* En-tête de l application : menu long, on cache le prénom et on resserre. */
.app .qui { display: none; }
.app .menu a { padding: 8px 9px; }
.app .menu a.actif::after { left: 9px; right: 9px; }
/* Mettre à jour : soldes, opérations et budgets, après un trait marron à droite d'Optimiser */
:root { --trait-saisie: #8a6339; }
:root[data-theme="sombre"] { --trait-saisie: #b08452; }
.menu-saisie { display: flex; align-items: center; gap: 2px; margin-left: -20px; font-weight: 500; font-size: 0.95rem; }
.menu-saisie::before { content: ''; width: 2px; height: 20px; margin: 0 8px 0 4px; border-radius: 1px; background: var(--trait-saisie); }
.menu-saisie a { position: relative; padding: 8px 9px; border-radius: var(--r-s); text-decoration: none; color: var(--encre-2); }
.menu-saisie a:hover { color: var(--encre); background: var(--surface-2); }
.menu-saisie a.actif { color: var(--encre); font-weight: 650; }
.menu-saisie a.actif::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -17px; height: 2px; background: var(--encre); }
@media (max-width: 640px) {
  .menu-saisie { order: 4; width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; }
  .menu-saisie::before { margin-left: 0; }
  .menu-saisie a.actif::after { bottom: -3px; }
}

/* --- Profil : écrans de bienvenue ------------------------------------------------------------- */

.bienvenue { max-width: 760px; margin: 0 auto; padding: 36px 0 10px; }
.bienvenue-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 26px; }
.bienvenue-progression span { display: block; height: 100%; border-radius: 3px; background: var(--encre); transition: width 0.3s ease; }
.bienvenue-titre { font-size: clamp(1.9rem, 3vw, 2.3rem); }
.bienvenue-formulaire { margin-top: 26px; }
.question { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.question-libelle { font-weight: 650; font-size: 1rem; margin-bottom: 10px; padding: 0; }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.choix {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--filet-fort);
  background: var(--surface); font-weight: 550; transition: border-color 0.15s, background-color 0.15s;
}
.choix:hover { background: var(--survol); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix-coche { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; border: 2px solid var(--filet-fort); display: grid; place-items: center; }
.choix-coche.rond { border-radius: 50%; }
.choix:has(input:checked) { border-color: var(--encre); background: var(--surface-2); box-shadow: 0 0 0 1px var(--encre) inset; }
.choix:has(input:checked) .choix-coche { border-color: var(--encre); background: var(--encre); }
.choix:has(input:checked) .choix-coche::after { content: "✓"; color: var(--inverse); font-size: 0.72rem; font-weight: 900; }
.choix:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.bienvenue-actions { margin-top: 30px; }
.lien-retour { text-decoration: none; font-weight: 600; color: var(--encre-2); margin-right: auto; }
.lien-retour:hover { color: var(--encre); }
.confidentialite { display: flex; gap: 10px; align-items: flex-start; margin: 40px 0 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--surface-2); font-size: 0.84rem; color: var(--encre-2); }
.confidentialite svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--encre-2); stroke-width: 2; margin-top: 1px; }

/* --- Page Profil ------------------------------------------------------------------------------ */

.badge-option { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--jaune-pale); color: var(--or-texte); vertical-align: 2px; margin-left: 6px; }
.groupe-titre { font-family: var(--police); font-size: 0.92rem; font-weight: 650; color: var(--encre-2); margin: 20px 0 6px; }
.liste-rubriques { list-style: none; padding: 0; margin: 0; }
.liste-rubriques li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--filet); }
.liste-rubriques li:last-child { border-bottom: 0; }
.liste-rubriques .nom-rubrique { flex: 1; font-weight: 550; min-width: 0; }
.liste-rubriques .nom-rubrique small { font-weight: 500; font-size: 0.8rem; color: var(--encre-3); margin-left: 4px; }
.liste-rubriques li.masquee .nom-rubrique { color: var(--encre-3); }
.liste-rubriques select { width: auto; min-width: 170px; font-size: 0.84rem; padding: 6px 30px 6px 10px; }
.icone-lien.actif { background: var(--surface-2); color: var(--encre); }

/* Budgets : intertitres de groupe dans le tableau */
.registre .ligne-groupe td { padding-top: 18px; font-size: 0.9rem; font-weight: 650; color: var(--encre-2); border-bottom: 1px solid var(--filet-fort); }

/* Tableau de bord : fixe / variable */
.fixe-variable { margin: 0 0 20px; }
.fixe-variable-barre { height: 10px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.fixe-variable-barre .part-fixe { display: block; height: 100%; background: var(--donnee); border-right: 2px solid var(--surface); }
.fixe-variable-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: 0.86rem; color: var(--encre-2); }
.fixe-variable-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.fixe-variable-legende i.part-fixe { background: var(--donnee); }
.fixe-variable-legende i.part-variable { background: var(--surface-2); outline: 1px solid var(--filet-fort); }
.fixe-variable-legende b { color: var(--encre); margin-left: 3px; }
.fixe-variable-legende small { color: var(--encre-3); }

@media (max-width: 640px) {
  .choix-grille { grid-template-columns: 1fr; }
  .bienvenue-actions .bouton { width: 100%; }
  .liste-rubriques li { flex-wrap: wrap; }
  .liste-rubriques select { width: 100%; }
}

/* Import : historique et solde réel */
.liste-imports { list-style: none; padding: 0; margin: 0; }
.liste-imports li { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.liste-imports li:last-child { border-bottom: 0; }
.import-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.import-tete strong { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-tete form { margin: 0; flex: 0 0 auto; }
.champs-en-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .champs-en-ligne { grid-template-columns: 1fr; } }

/* --- Onglets de la section Opérations (liste, import, saisie) -------------------- */
.onglets { display: flex; gap: 4px; margin-top: 22px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-m); }
.onglets a { padding: 7px 14px; border-radius: var(--r-s); color: var(--encre-2); font-weight: 550; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.onglets a:hover { color: var(--encre); }
.onglets a.actif { background: var(--encre); color: var(--inverse); }

/* --- Tableau de bord : 1. mon argent, 2. mes postes de dépenses ------------------- */
.partie { padding-top: 30px; }
.partie + .partie { margin-top: 26px; padding-top: 30px; border-top: 1px solid var(--filet); }
.partie-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 18px; }
.partie-entete .titre-article { margin-bottom: 0; }
.partie-entete .onglets { margin-top: 0; }
.argent-total { margin: 0; font-weight: 700; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.famille-courant { background: var(--bleu) !important; }
.famille-epargne { background: var(--vert) !important; }
.famille-investissement { background: var(--donnee) !important; }
.famille-immobilier { background: var(--or) !important; }
.repartition-familles { height: 12px; }
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.famille-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--encre-2); }
.famille-titre .pastille { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.famille-total { margin: 6px 0 2px; font-weight: 700; font-size: 1.65rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.famille .note { margin: 0 0 12px; font-size: 0.85rem; color: var(--encre-3); }
.famille .conduite { margin: 0; }

.carte-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.carte-entete .titre-rubrique, .carte-entete p { margin: 0; }
.graphique .point.dernier { fill: var(--donnee); }

/* Bilan façon tableur : rentrées − fixes = reste − variables = mis de côté */
.bilan { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.bilan > li:not(.bilan-operateur) { padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--filet); }
.bilan .etiquette { display: block; font-size: 0.87rem; font-weight: 500; color: var(--encre-3); }
.bilan .chiffre { display: block; margin-top: 4px; font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.bilan .note { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--encre-3); }
.bilan-operateur { align-self: center; font-size: 1.4rem; font-weight: 700; color: var(--encre-3); }
.bilan .bilan-reste { background: var(--jaune-pale); border-color: transparent; }
.bilan .bilan-positif { background: var(--vert-pale); border-color: transparent; }
.bilan .bilan-positif .chiffre { color: var(--texte-vert); }
.bilan .bilan-negatif { background: var(--tomate-pale); border-color: transparent; }
.bilan .bilan-negatif .chiffre { color: var(--texte-rouge); }

.postes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.postes-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.postes-table th { font-size: 0.82rem; font-weight: 600; color: var(--encre-3); text-align: left; padding: 0 0 6px; border-bottom: 1px solid var(--filet); }
.postes-table td { padding: 8px 0; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.postes-table tr:last-child td { border-bottom: 0; }
.postes-table .nom { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.postes-table .nom a { color: inherit; text-decoration: none; }
.postes-table .nom a:hover { text-decoration: underline; }
.postes-table .part { width: 32%; white-space: nowrap; }
.postes-table .part .piste { display: inline-block; position: relative; width: calc(100% - 44px); height: 8px; vertical-align: middle; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.postes-table .part .plein { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.postes-table .part small { display: inline-block; width: 38px; text-align: right; color: var(--encre-3); font-size: 0.82rem; }
.postes-table .montant { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.postes-table .montant.discret { font-weight: 500; color: var(--encre-3); }

@media (max-width: 1100px) {
  .bilan { grid-template-columns: 1fr 1fr; }
  .bilan-operateur { display: none; }
  .bilan > li:last-child { grid-column: span 2; }
  .postes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .familles { grid-template-columns: 1fr; }
  .postes-table .part { display: none; }
}

/* Choix des comptes affichés (Premium : un, plusieurs ou tous) */
.choix-comptes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 22px 0 0; }
.choix-comptes-titre { font-size: 0.87rem; font-weight: 500; color: var(--encre-2); margin-right: 4px; }
.puce-compte { position: relative; display: inline-flex; cursor: pointer; }
.puce-compte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.puce-compte span { padding: 5px 12px; border-radius: var(--r-s); border: 1px solid var(--filet-fort); background: var(--surface); font-size: 0.86rem; font-weight: 600; color: var(--encre-2); }
.puce-compte input:checked + span, .puce-seule span { background: var(--encre); border-color: var(--encre); color: var(--inverse); }
.puce-compte input:checked + span::before { content: '✓ '; }
.puce-compte input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.puce-seule { cursor: default; }

/* Tableau mois par mois, façon tableur */
.tableur-defilant { overflow-x: auto; padding: 0; }
.tableur { border-collapse: collapse; width: 100%; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.tableur th, .tableur td { padding: 7px 10px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tableur thead th { position: sticky; top: 0; background: var(--surface); font-size: 0.82rem; font-weight: 600; color: var(--encre-3); text-align: right; }
.tableur thead th small { display: block; font-weight: 500; }
.tableur td { text-align: right; }
.tableur .tableur-poste { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 550; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tableur .tableur-poste a { color: inherit; text-decoration: none; margin-left: 6px; }
.tableur .tableur-poste a:hover { text-decoration: underline; }
.tableur tbody td { background: color-mix(in srgb, var(--teinte) calc(var(--intensite, 0) * 32%), transparent); }
.tableur .vide { color: var(--encre-3); }
.tableur .tableur-total { font-weight: 700; border-left: 1px solid var(--filet); }
.tableur .tableur-total.discret { font-weight: 500; }
.tableur-revenus { --teinte: var(--vert); }
.tableur-fixes { --teinte: var(--bleu); }
.tableur-variables { --teinte: var(--donnee); }
.tableur .tableur-section th { padding-top: 16px; text-align: left; font-family: var(--police); font-size: 1rem; font-weight: 650; color: var(--encre); background: transparent; position: static; }
.tableur .tableur-total th, .tableur .tableur-total td,
.tableur tr.tableur-total > * { font-weight: 700; background: var(--surface-2); }
.tableur tr.tableur-reste > *, .tableur tr.tableur-solde > * { font-weight: 700; background: var(--jaune-pale); border-bottom: 2px solid var(--filet-fort); }
.tableur tr.tableur-solde > * { background: var(--vert-pale); }

/* Tranche de mois libre (du … au …) */
.tranche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 18px; justify-content: flex-end; }
.tranche label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--encre-2); }
.tranche input[type=month] { width: auto; min-height: 34px; padding: 5px 10px; font-size: 0.9rem; }
.tranche-active input[type=month] { border-color: var(--encre); }

/* --- Pages légales ------------------------------------------------------------------ */
.page-legale { max-width: 860px; padding: 40px 0 80px; }
.page-legale-tete h1 { font-family: var(--titrage); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.1; margin: 0 0 8px; font-variation-settings: 'opsz' 28; font-optical-sizing: none; }
.page-legale-maj { margin: 0; font-size: 0.9rem; color: var(--encre-3); }
.page-legale-chapo { font-size: 1.2rem; line-height: 1.5; margin: 18px 0 0; max-width: 60ch; }
.page-legale-autres { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 8px; padding: 12px 0; font-size: 0.92rem; }
.page-legale-autres a { color: var(--encre-2); text-decoration: none; }
.page-legale-autres a:hover { text-decoration: underline; }
.page-legale-autres a[aria-current="page"] { color: var(--encre); font-weight: 700; }
.page-legale-texte { font-size: 1.1rem; line-height: 1.65; }
.page-legale-texte h2 { font-size: 1.3rem; font-weight: 650; margin: 36px 0 10px; letter-spacing: -0.01em; }
.page-legale-texte p, .page-legale-texte li { max-width: 70ch; }
.page-legale-texte ul { padding-left: 1.2em; }
.page-legale-texte li { margin-bottom: 6px; }
.tableau-legal { overflow-x: auto; margin: 12px 0 8px; }
.tableau-legal table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.95rem; line-height: 1.45; }
.tableau-legal th, .tableau-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--filet); }
.tableau-legal thead th { font-size: 0.85rem; color: var(--encre-2); }
.tableau-legal tbody td { background: var(--surface); }
.modele-retractation { margin: 12px 0 0; padding: 18px 22px; background: var(--surface); border-radius: var(--r-m); font-size: 1rem; }
.modele-retractation p { margin: 0 0 8px; }
.formulaire-legal { margin: 16px 0 8px; max-width: 640px; }

/* Une idée, un bug ? */
.page-ecrire { max-width: 1080px; }
.ecrire-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; margin-top: 28px; }
.formulaire-ecrire { margin: 0; }
.choix-nature { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.choix-nature legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.formulaire .case-nature { display: inline-flex; margin: 0; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border: 1px solid var(--filet-fort); border-radius: 999px; cursor: pointer; font-weight: 500; }
.case-nature:hover { background: var(--surface-2); }
.formulaire .case-nature input { width: 16px; height: 16px; margin: 0; accent-color: var(--encre); }
.case-nature:has(input:checked) { border-color: var(--encre); background: var(--surface-2); }
.case-nature:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
.ecrire-ensuite { border-left: 3px solid var(--or); padding: 2px 0 2px 20px; }
.ecrire-ensuite h2 { font-size: 1.15rem; margin: 0 0 10px; }
.ecrire-ensuite ul { margin: 0 0 16px; padding-left: 1.1em; line-height: 1.55; }
.ecrire-ensuite li { margin-bottom: 6px; }
@media (max-width: 860px) { .ecrire-grille { grid-template-columns: 1fr; gap: 24px; } }
mark.a-completer { background: var(--tomate-pale); color: var(--texte-rouge); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
mark.a-completer::after { content: ' · à compléter'; font-weight: 400; font-size: 0.85em; }

/* Pied commun : liens légaux */
.pied-legal-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; }
.pied-legal-liens a { color: inherit; }

/* Case à cocher des conditions, à l'inscription */
.champ-case .case-conditions { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 0.95rem; line-height: 1.45; }
.champ-case input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--encre); }

/* Suppression du compte */
.carte-danger { border-color: var(--tomate); }
.bouton-danger { background: var(--tomate); border-color: var(--tomate); color: #fff; }
.bouton-danger:hover { background: var(--texte-rouge); border-color: var(--texte-rouge); }

/* Bandeau d'information sur les cookies : petit, en bas, ne bloque rien */
.bandeau-cookies {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--filet-fort); border-radius: var(--r-m);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.25); font-size: 0.92rem; line-height: 1.45; /* il flotte : ombre légère */
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; flex: 1 1 320px; }
.accueil .bandeau-cookies { background: var(--papier); color: var(--encre); }

/* --- Mes soldes : saisie des montants et vérification d'une saisie à l'autre ---------- */
.parcours-etape { margin: 22px 0 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--jaune-pale); color: var(--or-texte); font-size: 0.92rem; }
.saisie-soldes { margin-top: 22px; }
.saisie-soldes-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.saisie-soldes-tete .titre-rubrique { margin: 0; }
.saisie-date { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; }
.saisie-date input { width: auto; min-height: 36px; }
.saisie-montant input { width: 150px; text-align: right; font-variant-numeric: tabular-nums; min-height: 36px; padding: 6px 10px; }
.saisie-apport { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.85rem; font-weight: 500; color: var(--encre-3); }
.saisie-apport input { width: 120px; min-height: 32px; padding: 4px 8px; text-align: right; }
.saisie-soldes-actions { margin-top: 16px; }
.a-faire { color: var(--or-texte); font-weight: 600; }
.verifications { margin-top: 36px; }
.verifications-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.etat { font-size: 0.82rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.etat-ok { background: var(--vert-pale); color: var(--texte-vert); }
.etat-ecart { background: var(--tomate-pale); color: var(--texte-rouge); }
.historique-soldes { list-style: none; margin: 0; padding: 0; }
.historique-soldes li { display: grid; grid-template-columns: 88px auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--filet); font-size: 0.93rem; }
.h-date { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.h-montant { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-verif { color: var(--encre-3); font-size: 0.87rem; }
.v-ecart .h-verif { color: var(--texte-rouge); }
.v-ok .h-verif::before { content: '✓ '; color: var(--vert); font-weight: 700; }
.h-retirer { margin: 0; }
@media (max-width: 640px) {
  .saisie-montant input { width: 110px; }
  .historique-soldes li { grid-template-columns: auto 1fr auto; }
  .h-verif { grid-column: 1 / -1; grid-row: 2; }
}

/* --- Choix « Rentrée / Sortie » : deux boutons accolés --------------------------------- */
.sens-choix { display: inline-flex; border: 1px solid var(--filet-fort); border-radius: var(--r-s); padding: 2px; margin: 0; gap: 2px; background: var(--surface); }
.sens-choix legend { padding: 0; }
.sens-choix label { position: relative; cursor: pointer; margin: 0; }
.sens-choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sens-choix span { display: block; padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; color: var(--encre-3); white-space: nowrap; }
.sens-choix label:hover span { color: var(--encre); }
.sens-choix input[value=rentree]:checked + span { background: var(--vert-pale); color: var(--texte-vert); }
.sens-choix input[value=sortie]:checked + span { background: var(--tomate-pale); color: var(--texte-rouge); }
.sens-choix input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 1px; }
/* Dans la liste, le choix ne sert qu'à filtrer les rubriques : masqué sans JavaScript */
.registre .colonne-sens { width: 1%; }
.registre .sens-choix { display: none; }
.js .registre .sens-choix { display: inline-flex; }
/* Dans le formulaire de saisie, le choix donne le signe du montant */
.sens-choix-grand { display: flex; width: fit-content; padding: 3px; }
.champ-libelle { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.sens-choix-grand span { padding: 8px 18px; font-size: 0.95rem; }
.par-le-commun { color: var(--or-texte); font-weight: 600; }
.partage-classement { margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--filet); }
.partage-classement .case-conditions { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; }
.partage-classement input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--encre); }

/* Comptes affichés : tout prendre / tout retirer, mise à jour sans recharger */
.choix-comptes-actions { display: inline-flex; gap: 12px; margin-left: 4px; }
.choix-comptes-aide { color: var(--or-texte); font-weight: 600; }
.js-seulement { display: none !important; }
.js .js-seulement { display: inline-flex !important; }
#tableau-contenu { transition: opacity .15s ease; }
#tableau-contenu.chargement { opacity: .45; }
.barre-onglets { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 22px; }
.barre-onglets .onglets { margin-top: 0; }
/* Le bouton des soldes et les onglets du tableau de bord : bien visibles */
.bouton-soldes { background: var(--or); border-color: var(--or); color: var(--sombre); font-weight: 700; padding: 10px 20px; }
.bouton-soldes:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--sombre); }
.barre-onglets .onglets a { padding: 9px 18px; font-size: 1rem; font-weight: 600; }

/* Mes soldes : historique repliable par compte */
.historiques { margin-top: 36px; }
.historiques-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 16px; align-items: start; }
.historique-compte { padding: 14px 18px; }
.historique-compte summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.historique-compte[open] summary { margin-bottom: 8px; }

/* Profil : comptes bancaires et rubriques repliées par groupe */
.liste-comptes-profil { list-style: none; margin: 0; padding: 0; }
.liste-comptes-profil li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--filet); }
.liste-comptes-profil li:first-child { border-top: 0; }
.liste-comptes-profil .nom-rubrique { flex: 1; min-width: 0; font-weight: 550; }
.liste-comptes-profil .nom-rubrique small { display: block; font-size: 0.82rem; color: var(--encre-3); font-weight: 400; }
.liste-comptes-profil form { margin: 0; }
.groupes-rubriques { display: grid; gap: 6px; margin-top: 10px; }
.groupe-rubriques { border: 1px solid var(--filet); border-radius: var(--r-m); padding: 0 14px; }
.groupe-rubriques summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0; list-style: none; }
.groupe-rubriques summary::-webkit-details-marker { display: none; }
.groupe-rubriques summary::before { content: '›'; display: inline-block; width: 14px; color: var(--encre-3); transition: transform .15s ease; }
.groupe-rubriques[open] summary::before { transform: rotate(90deg); }
.groupe-rubriques summary .groupe-titre { margin: 0; flex: 1; }
.groupe-rubriques[open] { padding-bottom: 8px; }

/* Évolution : choix de la courbe et infobulle */
.choix-courbe { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); }
.choix-courbe label { position: relative; cursor: pointer; }
.choix-courbe input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-courbe span { display: block; padding: 5px 12px; border-radius: var(--r-s); font-size: 0.88rem; font-weight: 550; color: var(--encre-2); }
.choix-courbe input:checked + span { background: var(--encre); color: var(--inverse); }
.choix-courbe input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 1px; }
.courbe-resume { margin: 0 0 6px; }
.graphique-cadre { position: relative; outline: none; }
.graphique-cadre:focus-visible { box-shadow: 0 0 0 2px var(--encre); border-radius: var(--r-s); }
.graphique .repere { stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.graphique .point { transition: r .12s ease; }
.graphique .point.survole { r: 7px; fill: var(--donnee); stroke: var(--surface); stroke-width: 3; }
.infobulle {
  position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 2px; min-width: 150px;
  padding: 9px 12px; border-radius: var(--r-m); background: var(--encre); color: var(--inverse);
  font-size: 0.85rem; line-height: 1.3; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); white-space: nowrap;
}
.infobulle[hidden] { display: none; }
.infobulle strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.infobulle-mois { opacity: .75; }
.infobulle-ecart { font-weight: 600; font-variant-numeric: tabular-nums; }
.infobulle-ecart.hausse { color: #7fe0a8; }
.infobulle-ecart.baisse { color: #ff9a94; }
:root[data-theme="sombre"] .infobulle-ecart.hausse { color: #1d7a4c; }
:root[data-theme="sombre"] .infobulle-ecart.baisse { color: #b3271b; }
.choix-evolution { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.choix-pas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--surface); }
.choix-pas a { padding: 5px 12px; border-radius: var(--r-s); font-size: 0.88rem; font-weight: 550; color: var(--encre-2); text-decoration: none; }
.choix-pas a:hover { color: var(--encre); background: var(--surface-2); }
.choix-pas a.actif { background: var(--surface-2); color: var(--encre); font-weight: 650; }
.argent-total-centre { text-align: center; margin: 4px 0 18px; font-size: clamp(2.2rem, 3.4vw, 2.8rem); }


/* Comptes affichés : un bouton qui ouvre un panneau, comptes rangés par famille */
.selecteur-comptes { position: relative; }
.selecteur-comptes summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 8px 14px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); background: var(--surface);
}
.selecteur-comptes summary::-webkit-details-marker { display: none; }
.selecteur-comptes summary::after { content: '▾'; color: var(--encre-3); font-size: 0.8rem; }
.selecteur-comptes[open] summary::after { content: '▴'; }
.selecteur-comptes summary:hover { background: var(--survol); }
.selecteur-comptes .choix-comptes-titre { margin: 0; }
.selecteur-resume { font-weight: 650; }
.selecteur-panneau {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(760px, calc(100vw - 32px));
  padding: 14px 18px 16px; background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-l);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25); /* il flotte au-dessus de la page */
}
.selecteur-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.selecteur-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.selecteur-familles fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.selecteur-familles legend { padding: 0; margin-bottom: 4px; font-size: 0.82rem; font-weight: 600; color: var(--encre-3); }
.ligne-compte { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 0.93rem; cursor: pointer; }
.ligne-compte input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--encre); flex: 0 0 auto; }
.ligne-compte span { min-width: 0; line-height: 1.3; }

/* Premium : dates de la courbe d'évolution */
.plage-courbe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.plage-courbe label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--encre-2); }
.plage-courbe input[type=month] { width: auto; min-height: 34px; padding: 5px 10px; font-size: 0.9rem; }
.plage-active input[type=month] { border-color: var(--encre); }

/* Page Comptes : comptes rangés par famille, avec leur courbe des 12 derniers mois */
.comptes-evolution .ligne-famille th, .comptes-evolution .ligne-famille td {
  padding-top: 18px; font-size: 0.82rem; font-weight: 650; color: var(--encre-3); border-bottom: 1px solid var(--filet-fort);
}
.comptes-evolution tbody tr:last-child td { border-bottom: 1px solid var(--filet); }
.cellule-courbe { width: 1%; }
.mini-courbe { display: block; overflow: visible; }
.mini-courbe path { fill: none; stroke: var(--encre-3); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.mini-courbe circle { fill: var(--encre-3); }
.mini-courbe.hausse path { stroke: var(--vert); }
.mini-courbe.hausse circle { fill: var(--vert); }
.mini-courbe.baisse path { stroke: var(--alerte); }
.mini-courbe.baisse circle { fill: var(--alerte); }
.comptes-evolution .variation small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--encre-3); }

/* Comptes, Premium : une carte par compte avec sa courbe des 12 derniers mois */
.famille-comptes { margin-top: 26px; }
.famille-titre { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--filet-fort); font-family: var(--police); font-size: 0.9rem; font-weight: 650; color: var(--encre-3); }
.famille-total { font-variant-numeric: tabular-nums; color: var(--encre); }
.cartes-comptes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.carte-compte { display: flex; flex-direction: column; gap: 6px; }
.carte-compte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.carte-compte-tete h3 { margin: 0; font-family: var(--police); font-size: 1rem; font-weight: 650; }
.carte-compte-tete small { display: block; color: var(--encre-3); font-size: 0.82rem; }
.carte-compte-montant { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-compte-variation { margin: 0 0 4px; }
.carte-compte-variation strong { font-variant-numeric: tabular-nums; margin-right: 4px; }
.mini-detail text { font-size: 11px; }
.mini-detail.hausse .courbe { stroke: var(--vert); }
.mini-detail.hausse .aire { fill: var(--vert-pale); }
.mini-detail.hausse .point { stroke: var(--vert); }
.mini-detail.hausse .point.dernier, .mini-detail.hausse .point.survole { fill: var(--vert); }
.mini-detail.baisse .courbe { stroke: var(--alerte); }
.mini-detail.baisse .aire { fill: var(--tomate-pale, var(--surface-2)); }
.mini-detail.baisse .point { stroke: var(--alerte); }
.mini-detail.baisse .point.dernier, .mini-detail.baisse .point.survole { fill: var(--alerte); }
.mini-detail.stable .courbe { stroke: var(--encre-3); }
.mini-detail.stable .aire { fill: var(--surface-2); }
.mini-detail.stable .point { stroke: var(--encre-3); }
.mini-detail.stable .point.dernier, .mini-detail.stable .point.survole { fill: var(--encre-3); }
.mini-detail .point.survole { r: 5px; }
.total-comptes { display: flex; justify-content: space-between; margin: 22px 0 0; padding-top: 10px; border-top: 1px solid var(--encre); font-weight: 700; }
.total-comptes strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
/* Mes soldes : d'où vient le montant d'aujourd'hui */
.montant-aujourdhui small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--encre-3); white-space: normal; }
.famille-titre span { font-size: 0.9rem; line-height: 1.4; }
.famille-titre .famille-total { font-size: 1rem; font-weight: 700; }
.mini-detail.stable .aire { fill: transparent; }

/* Profil en pages : menu à gauche, une page à la fois */
.profil-mise-en-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding-top: 22px; align-items: start; }
.menu-profil { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.menu-profil a { padding: 9px 12px; border-radius: var(--r-m); color: var(--encre-2); font-weight: 550; text-decoration: none; }
.menu-profil a:hover { background: var(--survol); color: var(--encre); }
.menu-profil a.actif { background: var(--encre); color: var(--papier, var(--surface)); }
.pages-profil { display: grid; gap: 36px; min-width: 0; }
.profil-en-pages .pages-profil { gap: 0; }
.page-profil-chapo { margin: 0 0 18px; }
.pile-profil { display: grid; gap: 18px; align-content: start; max-width: 720px; }
.profil-deux-colonnes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.profil-deux-colonnes .pile-profil { max-width: none; }
@media (max-width: 900px) {
  .profil-mise-en-page { grid-template-columns: 1fr; gap: 16px; }
  .menu-profil { position: static; flex-direction: row; overflow-x: auto; gap: 4px; }
  .menu-profil a { white-space: nowrap; }
  .profil-deux-colonnes { grid-template-columns: 1fr; }
}

/* Fenêtre de confirmation (suppression d'un compte, d'une opération…) */
.fenetre-confirmation {
  width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid var(--filet-fort);
  border-radius: var(--r-l); background: var(--surface); color: var(--encre);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35); /* elle flotte au-dessus de la page */
}
.fenetre-confirmation::backdrop { background: rgba(20, 22, 30, .45); }
.fenetre-confirmation h2 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 650; line-height: 1.3; }
.confirmation-detail { margin: 0; color: var(--encre-2); font-size: 0.93rem; line-height: 1.5; }
.confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fenetre-confirmation[open] { animation: confirmation-entree .14s ease-out; }
@keyframes confirmation-entree { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .fenetre-confirmation[open] { animation: none; } }

/* Opérations : virements reliés et actions de ligne */
.lien-virement { color: var(--encre-2); font-weight: 550; }
.actions-operation { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.actions-operation form { display: inline; }
/* Répartir une opération */
.resume-operation { margin-top: 18px; }
.resume-operation p { margin: 0; }
.resume-libelle { font-weight: 600; margin: 4px 0 !important; }
.resume-montant { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.parts { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.parts th { text-align: left; font-size: 0.82rem; font-weight: 600; color: var(--encre-3); padding: 0 0 6px; }
.parts td { padding: 4px 0; }
.parts td + td, .parts th + th { padding-left: 10px; }
.parts .montant { text-align: right; width: 9rem; }
.parts input { text-align: right; font-variant-numeric: tabular-nums; }
.parts tfoot td { border-top: 1px solid var(--filet-fort); padding-top: 10px; font-weight: 650; }
.reste-a-repartir { font-variant-numeric: tabular-nums; }
.regrouper { margin-top: 12px; }
/* Tableau de bord : rappel des soldes */
.rappel-soldes { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px;
  padding: 9px 14px; border: 1px solid var(--filet-fort); border-radius: var(--r-m); background: var(--surface-2); font-size: 0.92rem; }
.rappel-soldes[hidden] { display: none; }
/* Comptes affichés : dans la barre des onglets, juste après eux ; le bouton des soldes reste à droite */
.barre-onglets { justify-content: flex-start; }
.barre-onglets .choix-comptes { margin: 0; }
.barre-onglets .bouton-soldes { margin-left: auto; }

/* Optimiser : tous les abonnements, rubrique par rubrique, et ce qui existe ailleurs */
.optimiser-total { align-self: end; text-align: right; }
.optimiser-total p { margin: 0; }
.optimiser-total .etiquette { font-size: 0.85rem; color: var(--encre-3); font-weight: 600; }
.optimiser-total .chiffre { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.optimiser-total .note { color: var(--encre-3); font-size: 0.9rem; }

.optimiser-famille { margin-top: 34px; }
.optimiser-famille-entete { align-items: baseline; border-bottom: 1px solid var(--filet-fort); padding-bottom: 8px; }
.par-assureur { margin-top: 16px; }
.par-assureur h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 650; }
.par-assureur ul { list-style: none; margin: 0; padding: 0; }
.par-assureur li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid var(--filet); }
.assureur-nom { display: flex; flex-direction: column; min-width: 0; }
.assureur-nom small { font-size: 0.82rem; color: var(--encre-3); line-height: 1.45; }
.optimiser-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; margin-top: 16px; align-items: start; }
.optimiser-rubrique { display: flex; flex-direction: column; }
.rubrique-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.rubrique-tete h3 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.rubrique-tete .mono { margin: 0; white-space: nowrap; font-weight: 600; }

.abonnements { list-style: none; margin: 0; padding: 0; }
.abonnement { padding: 12px 0; border-top: 1px solid var(--filet); }
.abonnement-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.abonnement-nom { display: flex; flex-direction: column; min-width: 0; }
.abonnement-nom strong { font-weight: 650; font-size: 1rem; }
.abonnement-nom small { font-size: 0.82rem; color: var(--encre-3); }
.abonnement-prix { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.abonnement-prix strong { font-size: 1.05rem; }
.abonnement-prix span { font-size: 0.85rem; color: var(--encre-3); }
.abonnement-prix small { display: block; font-size: 0.82rem; color: var(--encre-3); }
.abonnement-notes { margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--encre-2); line-height: 1.45; }
.abonnement-options { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface-2); font-size: 0.88rem; color: var(--encre-2); line-height: 1.45; }
.options-titre { margin: 0 0 4px; font-size: 0.8rem; font-weight: 650; color: var(--encre-3); }
.abonnement-options ul, .rubrique-possibilites ul { margin: 0 0 8px; padding-left: 18px; }
.abonnement-options li, .rubrique-possibilites li { margin-bottom: 3px; }
.abonnement-options .options-titre + ul:last-child { margin-bottom: 0; }
.abonnement-offres { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--filet-fort); }
.offres { list-style: none; margin: 0; padding: 0; }
.offre { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 7px 0; border-top: 1px solid var(--filet); }
.offre:first-child { border-top: 0; padding-top: 2px; }
.offre-nom { display: flex; flex-direction: column; min-width: 0; font-size: 0.92rem; }
.offre-nom a { color: var(--encre); text-decoration: none; }
.offre-nom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.offre-nom small { font-size: 0.8rem; color: var(--encre-3); line-height: 1.4; }
.offre-condition { color: var(--encre-2); font-weight: 600; }
.offre-prix { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.offre-prix span { font-size: 0.8rem; color: var(--encre-3); }
.offre-prix small { display: block; font-size: 0.8rem; color: var(--texte-vert); font-weight: 600; }
.abonnement-sans-offre { margin: 8px 0 0; font-size: 0.85rem; color: var(--encre-3); }
.rubrique-possibilites { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--filet-fort); font-size: 0.88rem; color: var(--encre-2); line-height: 1.5; }
.rubrique-lien { margin-top: auto; align-self: flex-start; }

@media (max-width: 640px) {
  .optimiser-total { text-align: left; }
  .abonnement-ligne { gap: 10px; }
}

/* Mes dépenses : chaque chiffre mène à ses opérations (sans soulignement) */
a.lien-chiffre { color: inherit; text-decoration: none; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; cursor: pointer; }
a.lien-chiffre:hover { background: var(--survol); color: var(--encre); }
a.lien-chiffre:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
/* Fenêtre des opérations d'un chiffre */
.fenetre-apercu {
  width: min(620px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 22px 24px 18px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-l); background: var(--surface); color: var(--encre);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35); /* elle flotte au-dessus de la page */
}
.fenetre-apercu::backdrop { background: rgba(20, 22, 30, .45); }
.apercu-tete h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 650; }
.apercu-tete p { margin: 0 0 12px; }
.apercu-liste { list-style: none; margin: 0; padding: 0; }
.apercu-liste li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--filet); }
.apercu-libelle { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.apercu-libelle small { display: block; font-weight: 400; color: var(--encre-3); font-size: 0.8rem; }
.apercu-liste .date { font-size: 0.85rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.apercu-liste .montant { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apercu-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }

/* Inscription : champ piège pour les robots, hors de l'écran (pas display:none, que certains robots repèrent) */
.champ-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Code reçu par e-mail */
.form-code-premium { margin: 16px 0 0; }
.ligne-code-premium { display: flex; gap: 8px; align-items: stretch; }
.ligne-code-premium input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.ligne-code-premium input::placeholder { text-transform: none; letter-spacing: 0; }
.champ-code { font-family: var(--police-chiffres, inherit); font-size: 1.6rem; letter-spacing: 0.35em; max-width: 12ch; }
.renvoi-code { margin-top: 14px; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Page Importer : les étapes pour exporter le relevé depuis la banque */
.etapes-export { margin: 0 0 16px; padding-left: 1.3em; font-size: 0.95rem; line-height: 1.5; }
.etapes-export li { margin-bottom: 10px; padding-left: 4px; }
.etapes-export li::marker { font-weight: 700; color: var(--or-fonce, var(--encre)); }

/* Lien vers le pilotage, visible de l'équipe seulement */
.lien-pilotage { font-size: 0.87rem; font-weight: 600; color: var(--or-texte); text-decoration: none; padding: 5px 10px; border: 1px solid var(--filet-fort); border-radius: var(--r-s); }
.lien-pilotage:hover { background: var(--surface-2); }
.ligne-abonnement { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* --- Téléphone : en-tête de l'application sur trois lignes nettes ---------------------------
   1. prénom à gauche, réglages à droite ; 2. consulter ; 3. mettre à jour (trait marron).
   Chaque menu tient en quatre cases égales : rien ne se cache hors de l'écran. */
.libelle-court, .libelle-court-texte { display: none; }
@media (max-width: 640px) {
  .app .entete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 0 6px; }
  .app .entete .a-droite { justify-self: end; gap: 4px; }
  .app .entete .a-droite .icone-lien, .app .bouton-deconnexion { min-width: 36px; min-height: 36px; }
  .app .menu, .app .menu-saisie {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    width: auto; margin: 0; overflow: visible; white-space: nowrap; font-size: 0.86rem;
  }
  .app .menu a, .app .menu-saisie a { padding: 9px 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .app .menu a.actif::after, .app .menu-saisie a.actif::after { left: 22%; right: 22%; bottom: 2px; }
  .app .menu-saisie { position: relative; padding-left: 8px; }
  .app .menu-saisie::before { position: absolute; left: 0; top: 50%; height: 18px; margin: -9px 0 0; }
  .app .menu .libelle-long, .app .bouton-deconnexion .libelle-long { display: none; }
  .app .menu .libelle-court { display: inline; }
  .app .bouton-deconnexion { display: inline-flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; }
  .app .bouton-deconnexion svg.libelle-court { display: block; width: 20px; height: 20px; }
}

/* Budgets : une seule colonne sur téléphone, fixes puis variables */
@media (max-width: 760px) { .budget-colonnes { grid-template-columns: 1fr; } }

/* Tableaux en fiches sur téléphone : chaque ligne devient un bloc, rien ne déborde.
   Les cellules portant data-titre affichent leur titre de colonne au-dessus de la valeur. */
@media (max-width: 640px) {
  .registre-fiches thead { display: none; }
  .registre-fiches, .registre-fiches tbody { display: block; width: 100%; }
  .registre-fiches tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .registre-fiches tbody tr:last-child { border-bottom: 0; }
  .registre-fiches td { display: block; padding: 0; border: 0; min-width: 0; }
  .registre-fiches tbody tr:hover td { background: none; }
  .registre-fiches td[data-titre]::before { content: attr(data-titre); display: block; margin-bottom: 2px; font-size: 0.78rem; font-weight: 600; color: var(--encre-3); text-align: left; }
  .registre-fiches .libelle { min-width: 0; }
  .registre-fiches .colonne-action { width: auto; text-align: left; }

  /* Opérations : date et montant, puis libellé, sens, rubrique et actions */
  .registre-operations tr { grid-template-areas: "date montant" "libelle libelle" "sens sens" "rubrique rubrique" "actions actions"; }
  .registre-operations .date { grid-area: date; }
  .registre-operations td.montant { grid-area: montant; }
  .registre-operations td.montant:empty { display: none; }
  .registre-operations .libelle { grid-area: libelle; }
  .registre-operations .colonne-sens { grid-area: sens; width: auto; }
  .registre-operations .colonne-rubrique { grid-area: rubrique; }
  .registre-operations .colonne-rubrique select { width: 100%; min-width: 0; }
  .registre-operations .colonne-action { grid-area: actions; }
  .registre-operations .actions-operation { display: flex; flex-wrap: wrap; gap: 4px 16px; }

  /* Mes soldes : le compte, puis le montant connu à gauche et la saisie à droite */
  .registre-soldes tr { grid-template-areas: "libelle action" "aujourdhui saisie"; align-items: start; }
  .registre-soldes .libelle { grid-area: libelle; }
  .registre-soldes .colonne-action { grid-area: action; text-align: right; }
  .registre-soldes .montant-aujourdhui { grid-area: aujourdhui; text-align: left; }
  .registre-soldes .saisie-montant { grid-area: saisie; text-align: right; }
  .registre-soldes .saisie-montant[data-titre]::before { text-align: right; }
  .registre-soldes .saisie-montant input { width: 130px; }

  /* Compte partagé : date et montant, puis libellé et rubrique */
  .registre-partage tr { grid-template-areas: "date montant" "libelle libelle" "rubrique rubrique"; }
  .registre-partage .date { grid-area: date; }
  .registre-partage td.montant { grid-area: montant; }
  .registre-partage .libelle { grid-area: libelle; }
  .registre-partage .colonne-rubrique { grid-area: rubrique; }
}