/* Base (reprise de l'enveloppe de l'artefact d'origine, dont l'application dépend) */
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; padding: 0; }
img { max-width: 100%; }
[hidden]:not([hidden=until-found i]) { display: none !important; }

/* Concept : la feuille reste calme et chaude ; toute la couleur vient de l'argent, posé en mosaïque.
   Trois familles, un coucher de soleil : aubergine (l'essentiel), corail (la vie), safran (demain). */
:root {
  --fond: #FFF8F4; --surface: #FFFFFF; --creux: #F8ECE6; --trait: #EFDFD8;
  --encre: #26142B; --doux: #6E5A70; --pale: #8F7C90; --action: #26142B; --action-txt: #FFF8F4;
  --a: #7A3A94; --b: #EC5B38; --c: #E8A317;
  --a1: #4A2356; --a2: #7A3A94; --a3: #9A62AE; --a4: #C8A8D3;
  --b1: #C93F1C; --b2: #EC5B38; --b3: #F58A6B; --b4: #F9BCA6;
  --c1: #C98A08; --c2: #E8A317; --c3: #F2C55E; --c4: #F8E0A0;
  --d: #2E8B6B; --d1: #1F6B52; --d2: #2E8B6B; --d3: #6CBFA2; --d4: #B4E0D0;
  --e: #2F7FC1; --e1: #1F5E99; --e2: #2F7FC1; --e3: #79B3E3; --e4: #BCDAF2;
  --g: #D6417F; --g1: #A82A60; --g2: #D6417F; --g3: #EC87AE; --g4: #F6C3D7;
  --h: #C8283C; --h1: #9E1C2E; --h2: #C8283C; --h3: #E56B7A; --h4: #F4B3BB;
  --i: #EF8A17; --i1: #C96E0A; --i2: #EF8A17; --i3: #F6B367; --i4: #FBD7AB;
  --j: #7E8C2A; --j1: #5F6B1C; --j2: #7E8C2A; --j3: #AAB85E; --j4: #D3DCA3;
  --k: #14A3A8; --k1: #0E7C80; --k2: #14A3A8; --k3: #6CCBCE; --k4: #B5E6E7;
  --l: #4B4FC4; --l1: #363A9A; --l2: #4B4FC4; --l3: #8C8FE0; --l4: #C7C8F2;
  --m: #7B5237; --m1: #5C3B26; --m2: #7B5237; --m3: #A98469; --m4: #D6BFAE;
  --n: #5B6675; --n1: #434C58; --n2: #5B6675; --n3: #94A0AE; --n4: #CAD1D9;
  --o: #F2A7B8; --o1: #E88FA5; --o2: #F2A7B8; --o3: #F7C4CF; --o4: #FBDDE3;
  --q: #F8B896; --q1: #F3A077; --q2: #F8B896; --q3: #FBD0B8; --q4: #FDE5D8;
  --r: #F2D98A; --r1: #EACB68; --r2: #F2D98A; --r3: #F7E6AE; --r4: #FBF1D2;
  --s: #C5DC97; --s1: #B1CE78; --s2: #C5DC97; --s3: #D8E8B8; --s4: #EAF3D7;
  --t: #9FDCC4; --t1: #7FCEB0; --t2: #9FDCC4; --t3: #BEE9D8; --t4: #DBF4EA;
  --u: #A5D2F0; --u1: #86C1E9; --u2: #A5D2F0; --u3: #C2E0F5; --u4: #DDEEFA;
  --v: #B4BDF0; --v1: #9AA5E9; --v2: #B4BDF0; --v3: #CBD2F5; --v4: #E2E6FA;
  --w: #D3B6EA; --w1: #C29DE1; --w2: #D3B6EA; --w3: #E1CDF1; --w4: #EFE3F8;
  --x: #DCC8AE; --x1: #CDB596; --x2: #DCC8AE; --x3: #E8DAC7; --x4: #F2EADF;
  --sur-sombre: #FFFFFF; --sur-clair: #26142B;
  --bon: #1F7A58; --bon-fond: #E2F3EC; --alerte: #B23A1E; --alerte-fond: #FDE6DF; --info-fond: #F3E9F6;
  --plus: #7A3A94; --moins: #EC5B38;
  --titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --texte: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ombre: 0 1px 2px rgba(38, 20, 43, .05), 0 12px 32px rgba(38, 20, 43, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #1B1120; --surface: #281A2E; --creux: #33233A; --trait: #40304A;
    --encre: #F9EFEA; --doux: #C2AFC4; --pale: #A18FA5; --action: #F9EFEA; --action-txt: #1B1120;
    --a: #A765C4; --b: #C93A2E; --c: #BC9418; --d: #3F9E7E; --e: #4A92CF; --g: #D9568C; --h: #DA4A5C; --i: #E58A22; --j: #94A338; --k: #1FA9AE; --l: #7478DE; --m: #A67C5F; --n: #8491A1;
    --a1: #6B3A80; --a2: #8A55A0; --a3: #AE82C0; --a4: #CFB2DA;
    --b1: #C93F1C; --b2: #EC5B38; --b3: #F58A6B; --b4: #F9BCA6;
    --c1: #C98A08; --c2: #E8A317; --c3: #F2C55E; --c4: #F8E0A0;
    --bon: #6FD3AE; --bon-fond: #173A2E; --alerte: #FF9B80; --alerte-fond: #472016; --info-fond: #3A2843;
    --plus: #BE8AD4; --moins: #F27A5C;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #1B1120; --surface: #281A2E; --creux: #33233A; --trait: #40304A;
  --encre: #F9EFEA; --doux: #C2AFC4; --pale: #A18FA5; --action: #F9EFEA; --action-txt: #1B1120;
  --a: #A765C4; --b: #C93A2E; --c: #BC9418; --d: #3F9E7E; --e: #4A92CF; --g: #D9568C; --h: #DA4A5C; --i: #E58A22; --j: #94A338; --k: #1FA9AE; --l: #7478DE; --m: #A67C5F; --n: #8491A1;
  --a1: #6B3A80; --a2: #8A55A0; --a3: #AE82C0; --a4: #CFB2DA;
  --b1: #C93F1C; --b2: #EC5B38; --b3: #F58A6B; --b4: #F9BCA6;
  --c1: #C98A08; --c2: #E8A317; --c3: #F2C55E; --c4: #F8E0A0;
  --bon: #6FD3AE; --bon-fond: #173A2E; --alerte: #FF9B80; --alerte-fond: #472016; --info-fond: #3A2843;
  --plus: #BE8AD4; --moins: #F27A5C;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--fond); color: var(--encre); font: 400 16px/1.5 var(--texte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2.5px solid var(--b); outline-offset: 2px; border-radius: 6px; }
.doux { color: var(--doux); }
.petit { font-size: 14px; }
.masque-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Coquille */
.coquille { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 104px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.marque { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--titre); letter-spacing: -.02em; }
.marque svg { width: 26px; height: 26px; display: block; }
.onglets { display: flex; gap: 4px; background: var(--creux); padding: 4px; border-radius: 999px; }
.onglet { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--doux); }
.onglet svg { width: 18px; height: 18px; flex: none; }
.onglet:hover { color: var(--encre); }
.onglet[aria-current="page"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgba(38, 20, 43, .12); }
@media (max-width: 719px) {
  .onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 0; background: var(--surface); border-top: 1px solid var(--trait); justify-content: space-around; padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .onglet { flex: 1; flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 4px; justify-content: center; border-radius: 12px; }
  .onglet svg { width: 22px; height: 22px; }
  .onglet[aria-current="page"] { background: var(--creux); box-shadow: none; }
}

/* Bandeau d'exemple */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; background: var(--info-fond); border-radius: 14px; font-size: 14px; margin-bottom: 20px; }
.lien { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px; font-weight: 600; transition: transform .12s ease, opacity .12s ease; text-align: center; }
.btn:active { transform: scale(.98); }
.btn-plein { background: var(--action); color: var(--action-txt); }
.btn-plein:disabled { opacity: .35; cursor: not-allowed; }
.btn-creux { background: var(--creux); color: var(--encre); }
.btn-creux:hover { background: var(--trait); }
.btn-danger { background: var(--alerte-fond); color: var(--alerte); }
.puce { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--creux); font-size: 14px; font-weight: 500; }
button.puce:hover { background: var(--trait); }
.etat { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.etat svg { width: 15px; height: 15px; flex: none; }
.etat-bon { background: var(--bon-fond); color: var(--bon); }
.etat-alerte { background: var(--alerte-fond); color: var(--alerte); }
.etat-neutre { background: var(--creux); color: var(--encre); }

/* Mon mois */
.tete-mois { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.colonne-mois { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.nav-mois { display: flex; align-items: center; gap: 4px; margin-left: -8px; }
.fleche { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: var(--doux); }
.fleche:hover:not(:disabled) { background: var(--creux); color: var(--encre); }
.fleche:disabled { opacity: .25; cursor: default; }
.titre-mois { font-size: clamp(38px, 6vw, 56px); text-transform: capitalize; font-weight: 700; min-width: 0; }
.annee { font: 500 15px var(--texte); color: var(--pale); letter-spacing: 0; }
.chiffre { font: 700 clamp(34px, 5vw, 44px)/1 var(--titre); letter-spacing: -.03em; }
.etiquette { font-size: 14px; color: var(--doux); }
.pile { display: flex; flex-direction: column; gap: 4px; }
.ligne-etats { display: flex; flex-wrap: wrap; gap: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Mosaïque */
.mosaique { position: relative; width: 100%; height: 440px; min-width: 0; }
.mosaique-compacte { height: 280px; }
.tuile { position: absolute; display: block; padding: 8px 10px; border-radius: 12px; text-align: left; overflow: hidden; line-height: 1.2; transition: transform .15s ease; }
button.tuile:hover { transform: scale(1.012); z-index: 2; }
.tuile-nom { display: block; font-size: 14px; font-weight: 500; }
.tuile-val { display: block; font: 700 17px/1.2 var(--titre); letter-spacing: -.01em; margin-top: 2px; }
.tuile-reste { background: repeating-linear-gradient(135deg, var(--creux), var(--creux) 7px, var(--trait) 7px, var(--trait) 14px); color: var(--encre); }
.apparait .tuile { animation: pose .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes pose { from { opacity: .15; transform: scale(.92); } }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--doux); }
.legende i, .pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; flex: none; }
.pastille, .legende i { background: var(--f); }

/* Listes par famille */
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; margin-top: 40px; }
.famille-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--f); margin-bottom: 4px; }
.famille-tete h3 { font-size: 20px; }
.famille-tete b { font: 700 18px var(--titre); }
.rangee { display: block; width: 100%; padding: 10px 0 11px; border-bottom: 1px solid var(--trait); text-align: left; }
button.rangee:hover .rangee-nom { text-decoration: underline; text-underline-offset: 3px; }
.rangee-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rangee-nom { min-width: 0; overflow-wrap: anywhere; }
.rangee-val { font-weight: 600; white-space: nowrap; }
.ecart { font-size: 13px; font-weight: 500; color: var(--doux); margin-right: 8px; }
.jauge { position: relative; height: 4px; background: var(--creux); border-radius: 2px; margin-top: 6px; }
.jauge i { display: block; height: 100%; background: var(--f); border-radius: 2px; }
.salaires { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.salaires h2, .bloc h2 { font-size: 24px; }
.part-ligne { display: flex; height: 44px; gap: 2px; border-radius: 12px; overflow: hidden; }
.part { display: flex; align-items: center; padding-inline: 12px; min-width: 0; font-size: 14px; font-weight: 600; background: var(--creux); white-space: nowrap; overflow: hidden; }
.part:nth-child(2) { background: var(--trait); }
.part-noms { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--doux); }

/* Accueil vide */
.accueil { max-width: 560px; padding-block: 40px; display: flex; flex-direction: column; gap: 20px; }
.accueil h1 { font-size: clamp(36px, 7vw, 56px); font-weight: 700; }
.accueil ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Parcours guidé */
.flux { position: fixed; inset: 0; z-index: 40; background: var(--fond); overflow-y: auto; display: flex; flex-direction: column; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.flux-haut { position: sticky; top: 0; z-index: 3; background: var(--fond); padding-block: 12px 10px; width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.flux-rang { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.fermer { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--creux); font-size: 18px; flex: none; }
.bande { display: flex; gap: 2px; height: 26px; width: 100%; }
.seg { flex: 0 0 0; min-width: 0; border-radius: 3px; transition: flex-grow .3s ease, opacity .2s ease; }
.seg:first-child { border-radius: 8px 3px 3px 8px; }
.seg:last-child { border-radius: 3px 8px 8px 3px; }
.bande-active .seg:not(.actif):not(.seg-reste) { opacity: .32; }
.seg-reste { background: repeating-linear-gradient(135deg, var(--creux), var(--creux) 5px, var(--trait) 5px, var(--trait) 10px); }
.flux-corps { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding-block: 20px 24px; display: flex; flex-direction: column; gap: 24px; }
.glisse { animation: glisse .25s ease; }
@keyframes glisse { from { opacity: .4; transform: translateY(6px); } }
.flux-titre { font-size: clamp(32px, 7vw, 44px); font-weight: 700; }
.flux-bas { position: sticky; bottom: 0; background: var(--fond); padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.fam-chip { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--doux); }
.saisie-geante { display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--f, var(--encre)); padding-bottom: 6px; }
.saisie-geante span { font: 500 22px var(--titre); color: var(--doux); }
.saisie-geante input { width: 100%; min-width: 0; border: 0; background: none; outline: none; font: 700 clamp(56px, 16vw, 88px)/1 var(--titre); letter-spacing: -.04em; padding: 0; }
.curseur-bloc { position: relative; padding-bottom: 22px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0; display: block; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--creux); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--creux); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--f, var(--encre)); border: 4px solid var(--surface); box-shadow: 0 1px 5px rgba(38, 20, 43, .35); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--f, var(--encre)); border: 4px solid var(--surface); box-shadow: 0 1px 5px rgba(38, 20, 43, .35); }
.repere { position: absolute; top: 26px; transform: translateX(-50%); font-size: 12px; color: var(--doux); white-space: nowrap; }
.repere::before { content: ""; display: block; width: 2px; height: 7px; background: var(--pale); margin: 0 auto 1px; }
.pas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pas button { min-height: 48px; border-radius: 14px; background: var(--creux); font-weight: 600; }
.pas button:hover { background: var(--trait); }
.reperes { display: flex; flex-wrap: wrap; gap: 8px; }
.resume-ligne { font-size: 17px; min-height: 26px; }

/* Salaires */
.revenu { display: grid; grid-template-columns: minmax(0, 1fr) 130px 36px; gap: 8px; align-items: center; }
.champ { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--trait); border-radius: 12px; min-width: 0; }
.champ:focus { outline: none; border-color: var(--encre); }
.champ-num { text-align: right; font-weight: 600; }
.retirer { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); font-size: 18px; }
.retirer:hover { background: var(--creux); color: var(--encre); }
.liste-revenus { display: flex; flex-direction: column; gap: 8px; }
.erreur { color: var(--alerte); font-size: 14px; font-weight: 500; }
.cartes-fam { display: flex; flex-direction: column; gap: 12px; }
.carte-fam-tete { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 4px; }
.carte-fam-tete b { font-weight: 600; }
.jauge-grande { height: 10px; border-radius: 5px; }
.jauge-grande i { border-radius: 5px; }
.changements { display: flex; flex-direction: column; }
.changements .rangee-haut { padding-block: 9px; border-bottom: 1px solid var(--trait); }

/* Vision */
.vision-titre { font-size: clamp(36px, 6vw, 52px); font-weight: 700; margin-bottom: 8px; }
.tuiles-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); }
.kpi .chiffre { font-size: clamp(26px, 4vw, 36px); }
.bloc { margin-top: 48px; display: flex; flex-direction: column; gap: 14px; }
.bloc-sous { color: var(--doux); max-width: 62ch; }
.graph { position: relative; height: 300px; padding-left: 46px; margin-top: 6px; }
.grille { position: absolute; inset: 0 0 26px 46px; }
.grille div { position: absolute; left: 0; right: 0; border-top: 1px solid var(--trait); }
.grille span { position: absolute; left: -46px; top: -9px; width: 40px; text-align: right; font-size: 12px; color: var(--pale); }
.colonnes { position: absolute; inset: 0 0 0 46px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 26px; height: 100%; border-radius: 8px; }
.col:hover, .col:focus-visible { background: color-mix(in srgb, var(--creux) 60%, transparent); }
.col-pile { width: min(68%, 36px); display: flex; flex-direction: column; gap: 2px; height: 100%; justify-content: flex-end; position: relative; }
.col-pile i { display: block; background: var(--f); min-height: 0; }
.col-pile i:first-of-type { border-radius: 4px 4px 0 0; }
.col-revenu { position: absolute; left: -5px; right: -5px; height: 3px; border-radius: 2px; background: var(--encre); transform: translateY(1.5px); }
.col-nom { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 12px; color: var(--doux); text-align: center; }
.col-courant .col-nom { color: var(--encre); font-weight: 700; }
.bulle { position: absolute; z-index: 5; pointer-events: none; background: var(--action); color: var(--action-txt); padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; min-width: 170px; }
.bulle-ligne { display: flex; justify-content: space-between; gap: 14px; }
.bulle b { font-weight: 700; }
details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--doux); }
.table-scroll { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--trait); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; text-transform: capitalize; }
.objectifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.objectif { padding: 18px 20px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.objectif-haut { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.objectif b { font: 600 19px var(--titre); }
.divergent { display: flex; flex-direction: column; }
.div-rang { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; padding-block: 7px; font-size: 15px; }
.div-nom { min-width: 0; overflow-wrap: anywhere; }
.div-axe { position: relative; height: 16px; }
.div-axe::before { content: ""; position: absolute; left: 50%; top: -7px; bottom: -7px; width: 1px; background: var(--pale); }
.div-axe i { position: absolute; top: 0; bottom: 0; }
.div-plus { background: var(--plus); border-radius: 0 4px 4px 0; left: 50%; }
.div-moins { background: var(--moins); border-radius: 4px 0 0 4px; right: 50%; }
.div-val { text-align: right; font-weight: 600; }

/* Dettes */
.dettes-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; }
.dette { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); min-width: 0; }
.dette h3 { font-size: 20px; overflow-wrap: anywhere; min-width: 0; }
.dette .objectif-haut { align-items: center; }
.dette-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dette-chiffres b { font: 600 18px/1.2 var(--titre); overflow-wrap: anywhere; }
.dette .etat { width: fit-content; max-width: 100%; }
.deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.deux-champs label { min-width: 0; }
.tl-rang.tl-deux { grid-template-columns: 52px minmax(0, 1fr) auto; }
@media (max-width: 719px) { .onglets-six .onglet { font-size: 11px; padding-inline: 1px; min-width: 0; } }
@media (max-width: 480px) { .dette-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deux-champs { grid-template-columns: minmax(0, 1fr); } }

/* Réglages */
.reglage-ligne { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); cursor: pointer; }
.reglage-ligne .pile { min-width: 0; max-width: 62ch; }
.reglage-ligne b { font-weight: 600; }
.interrupteur { position: relative; flex: none; width: 52px; height: 30px; }
.interrupteur input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.interrupteur i { position: absolute; inset: 0; border-radius: 15px; background: var(--trait); transition: background .15s ease; pointer-events: none; }
.interrupteur i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(38, 20, 43, .3); transition: transform .15s ease; }
.interrupteur input:checked + i { background: var(--action); }
.interrupteur input:checked + i::after { transform: translateX(22px); }
.interrupteur input:focus-visible + i { outline: 2.5px solid var(--b); outline-offset: 2px; }

/* Groupes */
.groupe-nom { display: inline-flex; align-items: center; gap: 8px; text-align: left; min-width: 0; color: inherit; }
.groupe-nom h3 { overflow-wrap: anywhere; }
.groupe-nom svg { width: 15px; height: 15px; color: var(--pale); flex: none; }
.groupe-nom:hover svg { color: var(--encre); }
.couleurs-titre { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--doux); margin: 10px 0 6px; }
.couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; }
.forme .couleurs label { display: block; cursor: pointer; position: relative; }
.couleurs input { position: absolute; opacity: 0; }
.couleurs .pastille-couleur { display: block; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 10px; }
.couleurs input:checked + .pastille-couleur { outline: 3px solid var(--encre); outline-offset: 2px; }
.couleurs input:focus-visible + .pastille-couleur { outline: 3px solid var(--b); outline-offset: 2px; }
.couleur-choisie { font-size: 14px; font-weight: 400; color: var(--doux); }

/* Comptes suivis */
.compte-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; margin-top: 8px; }
.compte-haut { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chiffre-grand { font-size: clamp(42px, 8vw, 60px); }
.carte-depense { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); min-width: 0; }
.carte-depense h2 { font-size: 20px; }
.depense-champs { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.depense-champs label, .sr-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dep-montant { font-size: 20px; }
.depense-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.bande-haute { height: 30px; }
.tete-liste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.jour { margin-top: 8px; }
.jour + .jour { margin-top: 20px; }
.rangee-nom small { font-size: 13px; }
.forme label.case { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.case input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
@media (max-width: 760px) { .compte-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Dépenses annuelles */
.champ-solde { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-weight: 500; }
.champ-avec-unite { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--doux); }
.champ-avec-unite input { width: 150px; color: var(--encre); font-size: 20px; }
.carte-versement { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface); border-radius: 18px; box-shadow: var(--ombre); }
.choix-payee { display: inline-flex; cursor: pointer; }
.choix-payee input, .mois-grille input { position: absolute; opacity: 0; }
.choix-payee span, .mois-grille span { display: block; padding: 7px 13px; border-radius: 999px; background: var(--creux); font-size: 14px; font-weight: 500; text-align: center; }
.choix-payee input:checked + span, .mois-grille input:checked + span { background: var(--action); color: var(--action-txt); }
.choix-payee input:focus-visible + span, .mois-grille input:focus-visible + span { outline: 2.5px solid var(--b); outline-offset: 2px; }
.mois-choix { border: 0; padding: 0; margin: 0; }
.mois-choix legend { font-size: 14px; font-weight: 500; padding: 0 0 6px; }
.mois-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mois-grille label { display: block; position: relative; cursor: pointer; }
.tl { display: flex; flex-direction: column; }
.tl-rang { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(112px, 38%); gap: 10px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--trait); font-size: 15px; }
.tl-tete { font-size: 13px; color: var(--doux); padding-block: 0 6px; }
.tl-mois { font-weight: 600; }
.tl-fact { min-width: 0; overflow-wrap: anywhere; }
.tl-fact b { font-weight: 600; }
.tl-solde { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; align-items: center; }
.tl-barre { display: block; height: 8px; background: var(--creux); border-radius: 4px; overflow: hidden; }
.tl-barre i { display: block; height: 100%; background: var(--a); border-radius: 4px; }
.tl-val { display: inline-flex; justify-content: flex-end; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.tl-val svg { width: 14px; height: 14px; }
.tl-neg .tl-val { color: var(--alerte); }
.tl-neg .tl-barre i { background: var(--alerte); }

/* Catégories */
.cat-total { text-align: right; }
@media (max-width: 560px) { .cat-total { text-align: left; } }
.cat-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 8px; }
.cat-rang { display: grid; grid-template-columns: minmax(0, 1fr) 112px 40px; gap: 8px; align-items: center; padding-block: 6px; border-bottom: 1px solid var(--trait); }
.cat-rang .champ { min-height: 42px; padding: 7px 12px; }
.cat-nom { text-align: left; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.cat-nom small { display: block; font-size: 13px; font-weight: 400; color: var(--doux); }
.ajouter { display: flex; gap: 8px; margin-top: 10px; }
.ajouter .champ { min-height: 42px; padding: 7px 12px; }
.ajouter .puce { flex: none; min-height: 42px; }
.reglage-icone { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--doux); }
.reglage-icone:hover { background: var(--creux); color: var(--encre); }
.reglage-icone svg { width: 18px; height: 18px; }
textarea.champ { min-height: 110px; font-size: 13px; font-family: ui-monospace, monospace; }

dialog { border: 0; border-radius: 22px; padding: 24px; background: var(--surface); color: var(--encre); width: min(440px, calc(100vw - 32px)); box-shadow: var(--ombre); }
dialog::backdrop { background: rgba(27, 17, 32, .45); }
.forme { display: flex; flex-direction: column; gap: 14px; }
.forme h2 { font-size: 26px; }
.forme label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
.forme-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 6px; }
.conflit { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; width: min(440px, calc(100vw - 32px)); background: var(--surface); padding: 18px 20px; border-radius: 18px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--action); color: var(--action-txt); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; max-width: calc(100vw - 32px); text-align: center; animation: glisse .25s ease; }

@media (max-width: 860px) {
  .tete-mois { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mosaique { height: 380px; }
  .familles { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .objectifs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kpi.kpi-nature { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .tuiles-kpi { grid-template-columns: minmax(0, 1fr); }
  .kpi { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 14px 16px; }
  .graph { padding-left: 38px; }
  .grille { left: 38px; } .colonnes { left: 38px; }
  .grille span { left: -40px; width: 36px; }
  .col-nom { font-size: 10px; }
  .revenu { grid-template-columns: minmax(0, 1fr) 104px 32px; gap: 6px; }
  .div-rang { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 54px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   Accès et foyers (connexion, invitation, panneau du foyer, administration)
   Mêmes jetons de couleur, mêmes formes que le reste de l'application.
   ------------------------------------------------------------------ */
.entete { flex-wrap: wrap; }
.chip-foyer { order: 3; display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--creux); font-weight: 600; font-size: 14px; }
.chip-foyer:hover { background: var(--trait); }
.chip-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--a); color: #fff; font: 700 14px/1 var(--titre); }
.membres .chip-avatar { width: 28px; height: 28px; font-size: 13px; background: var(--b); }
@media (max-width: 719px) { .chip-foyer { max-width: 55vw; } }

.pied { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--pale); text-align: center; }

.acces { max-width: 460px; padding-block: 32px 8px; display: flex; flex-direction: column; gap: 16px; }
.acces h1 { font-size: clamp(36px, 8vw, 52px); font-weight: 700; }
.carte-acces { padding: 22px 20px; background: var(--surface); border-radius: 22px; box-shadow: var(--ombre); }
.onglets-acces { display: flex; flex-wrap: wrap; gap: 6px; }
.onglets-acces button.puce.actif, .onglets-acces button.puce.actif:hover { background: var(--action); color: var(--action-txt); cursor: default; }
.liste-foyers { display: flex; flex-direction: column; gap: 8px; }
.choix-foyer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px; background: var(--surface); border-radius: 16px; box-shadow: var(--ombre); text-align: left; font-size: 17px; }
.choix-foyer:hover { outline: 2px solid var(--trait); }
.choix-foyer b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

dialog.dialog-large { width: min(640px, calc(100vw - 32px)); }
.panneau { gap: 18px; }
.panneau-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panneau-tete h2 { overflow-wrap: anywhere; min-width: 0; }
.panneau-bloc { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--trait); }
.panneau-bloc h3 { font-size: 18px; }
.panneau-bloc .liste-foyers .choix-foyer { box-shadow: none; background: var(--creux); min-height: 48px; font-size: 16px; }
.membres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.membres li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.membres .lien { margin-left: auto; }
.lien-cree { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--info-fond); }
.lien-cree .champ { font-size: 14px; min-height: 42px; }
.admin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-foyer { display: flex; flex-direction: column; gap: 4px; padding-block: 10px; border-bottom: 1px solid var(--trait); }
.admin-foyer .rangee-haut b { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.admin-foyer .actions { margin-top: 4px; }
.puce-danger { background: var(--alerte-fond); color: var(--alerte); }
.zone-lien:empty { display: none; }
#journal-corps table { font-size: 13px; }
#journal-corps td:first-child { text-transform: none; }
@media (min-width: 720px) and (max-width: 1040px) { .chip-nom { display: none; } .chip-foyer { padding-right: 4px; } }