:root{
  --bg:#f4f6fb; --carte:#ffffff; --texte:#18202f; --doux:#66708a; --ligne:#e3e8f2;
  --marque:#0f3f4f; --accent:#2f6fed; --ok:#17a34a; --alerte:#e08a00; --danger:#d93636;
  --ok-bg:#e3f6ea; --alerte-bg:#fdf0d8; --danger-bg:#fde6e6; --accent-bg:#e6eefe;
  --ombre:0 1px 3px rgba(20,30,60,.08),0 4px 16px rgba(20,30,60,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1420; --carte:#18202f; --texte:#e8ecf5; --doux:#97a1b8; --ligne:#27314a;
    --marque:#0a2a36; --accent:#6b9bff; --ok:#4ade80; --alerte:#fbbf24; --danger:#f87171;
    --ok-bg:#12301f; --alerte-bg:#3a2d0c; --danger-bg:#3b1616; --accent-bg:#182848;
    --ombre:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--texte);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.appli{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
nav.lateral{background:var(--marque);color:#fff;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
nav.lateral .logo{font-weight:700;font-size:1.05rem;padding:6px 12px 18px;display:flex;align-items:center;gap:10px;letter-spacing:.02em}
nav.lateral .logo img{width:38px;height:38px;border-radius:10px;flex:none}
#ecranPin .logo-gros{width:84px;height:84px;border-radius:20px;margin:0 auto 6px;display:block}
nav.lateral button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;color:#cdd7ee;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:.98rem}
nav.lateral button:hover{background:rgba(255,255,255,.08)}
nav.lateral button.actif{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
main{padding:22px 24px 90px;max-width:1100px;width:100%;margin:0 auto}
.entete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.entete h1{font-size:1.45rem}
.entete .date{color:var(--doux);font-size:.9rem}
.btn{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600}
.btn.sec{background:var(--accent-bg);color:var(--accent)}
.btn.danger{background:var(--danger-bg);color:var(--danger)}
.btn.petit{padding:6px 10px;font-size:.85rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default}
.grille{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--carte);border-radius:16px;padding:16px;box-shadow:var(--ombre);border:1px solid var(--ligne)}
.carte h2{font-size:1.02rem;margin-bottom:10px}
.kpi .lib{color:var(--doux);font-size:.82rem}
.kpi .val{font-size:1.45rem;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.val.ok{color:var(--ok)} .val.alerte{color:var(--alerte)} .val.danger{color:var(--danger)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--accent-bg);color:var(--accent)}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.alerte{background:var(--alerte-bg);color:var(--alerte)} .badge.danger{background:var(--danger-bg);color:var(--danger)}
.barre{height:9px;border-radius:9px;background:var(--ligne);overflow:hidden}
.barre>i{display:block;height:100%;border-radius:9px;background:var(--accent)}
.barre.ok>i{background:var(--ok)}
.ligne{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--ligne)}
.ligne:last-child{border-bottom:0}
.ligne .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ligne .montant{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ligne .sous{color:var(--doux);font-size:.8rem}
.cliquable{cursor:pointer}
.inter{position:relative;width:46px;height:26px;flex:none}
.inter input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:2}
.inter span{position:absolute;inset:0;border-radius:26px;background:var(--ligne);transition:.15s}
.inter span:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.inter input:checked+span{background:var(--ok)}
.inter input:checked+span:after{left:23px}
.champ{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],input[type=search]{
  background:var(--bg);border:1px solid var(--ligne);border-radius:10px;padding:10px 12px;min-width:0;flex:1}
input:focus{outline:2px solid var(--accent);outline-offset:0}
.puce{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--ligne);border-radius:99px;padding:5px 11px;margin:3px;font-size:.88rem;cursor:pointer;user-select:none}
.puce.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.puce .x{color:var(--danger);font-weight:700;margin-left:2px}
.semaines{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
.sem{border:1px solid var(--ligne);background:var(--bg);border-radius:12px;padding:8px 4px;text-align:center;cursor:pointer;user-select:none}
.sem b{display:block;font-size:.72rem;color:var(--doux);font-weight:500}
.sem.fait{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:700}
.anneau{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--ligne) 0);display:grid;place-items:center;flex:none}
.anneau>div{width:70px;height:70px;border-radius:50%;background:var(--carte);display:grid;place-items:center;font-weight:700;font-size:1.1rem}
.rang{display:flex;gap:16px;align-items:center}
.vide{color:var(--doux);text-align:center;padding:18px}
.verrou{text-align:center;padding:22px 10px}
.verrou .gros{font-size:2.4rem}
nav.bas{display:none}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);background:#1d2536;color:#fff;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:120;max-width:90vw;text-align:center}
#toast.vu{opacity:1;transform:translateX(-50%)}
#toast.err{background:var(--danger)}
#chargement{position:fixed;inset:0;background:rgba(10,16,30,.35);display:none;place-items:center;z-index:40}
#chargement.vu{display:grid}
.rond{width:42px;height:42px;border-radius:50%;border:4px solid #fff;border-top-color:transparent;animation:t .8s linear infinite}
@keyframes t{to{transform:rotate(360deg)}}
.modal{position:fixed;inset:0;background:rgba(10,16,30,.5);display:none;align-items:center;justify-content:center;z-index:110;padding:16px}
.modal.vu{display:flex}
.modal .boite{background:var(--carte);border-radius:18px;padding:20px;width:100%;max-width:380px}
.modal h3{margin-bottom:10px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.apercu{max-width:100%;max-height:260px;border-radius:12px;margin-top:10px}
.plus-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.plus-grille button{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:18px 10px;font-size:1rem;cursor:pointer;box-shadow:var(--ombre)}
.plus-grille .ic{font-size:1.8rem;display:block;margin-bottom:4px}
@media (max-width:860px){
  .appli{grid-template-columns:1fr}
  nav.lateral{display:none}
  main{padding:14px 14px 96px}
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  nav.bas{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--carte);border-top:1px solid var(--ligne);z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  nav.bas button{flex:1;background:none;border:0;padding:6px 2px;font-size:.68rem;color:var(--doux);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
  nav.bas button .ic{font-size:1.3rem}
  nav.bas button.actif{color:var(--accent);font-weight:700}
}
/* ---- Ajouts de la version autonome ---- */
#ecranPin{position:fixed;inset:0;background:var(--marque);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
#ecranPin.vu{display:flex}
#ecranPin .boite{background:var(--carte);color:var(--texte);border-radius:20px;padding:26px 22px;width:100%;max-width:380px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
#ecranPin .gros{font-size:2.6rem}
#ecranPin h1{font-size:1.3rem;margin:6px 0 4px}
#ecranPin p{color:var(--doux);font-size:.9rem;margin:4px 0 14px}
#ecranPin input[type=password],#ecranPin input[type=text],#ecranPin input[type=email]{width:100%;flex:none;text-align:center;font-size:1.4rem;letter-spacing:.35em;margin-bottom:10px}
#ecranPin .btn{width:100%;margin-top:4px}
#ecranPin .lien{background:none;border:0;color:var(--accent);cursor:pointer;margin-top:12px;font-size:.9rem;text-decoration:underline}
#ecranPin .err{color:var(--danger);min-height:1.3em;font-size:.9rem;margin:4px 0}
.bandeau{background:var(--alerte-bg);color:var(--alerte);border:1px solid var(--alerte);border-radius:14px;padding:12px 14px;margin-bottom:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.champ label{display:block;font-size:.82rem;color:var(--doux);margin-bottom:3px}
.formulaire .groupe{margin-bottom:10px}
.formulaire label{display:block;font-size:.82rem;color:var(--doux);margin-bottom:3px}
.formulaire input,.formulaire select{width:100%;background:var(--bg);border:1px solid var(--ligne);border-radius:10px;padding:10px 12px}
.modal .boite{max-height:90vh;overflow:auto}
select{background:var(--bg);border:1px solid var(--ligne);border-radius:10px;padding:10px 12px}
.vignette{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--ligne);flex:none}
.pied{color:var(--doux);font-size:.8rem;text-align:center;margin-top:22px}
pre.texte{white-space:pre-wrap;background:var(--bg);border:1px solid var(--ligne);border-radius:10px;padding:10px;font:inherit;font-size:.92rem}
.titre-groupe{font-size:.82rem;color:var(--doux);margin:12px 0 2px;text-transform:uppercase;letter-spacing:.04em}
@media print{nav,.btn,#btnActu{display:none!important}}

/* alertes */
nav button{position:relative}
.pastille{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--alerte);color:#fff;font-style:normal;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.pastille.danger{background:var(--danger)}

/* comptes + alarme */
#ecranPin .compte{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin:0 0 8px;border:1px solid var(--ligne);border-radius:14px;background:var(--fond);color:var(--texte);font-size:1rem;cursor:pointer}
#ecranPin .compte b{flex:1}
#ecranPin .avatar{width:38px;height:38px;border-radius:50%;background:var(--marque);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
#ecranPin .nomcompte{letter-spacing:normal !important;font-size:1rem !important}
.sous-logo{display:block;font-size:.72rem;font-weight:400;opacity:.8;margin-top:2px}
#alarme{margin-bottom:12px}
#alarme .bandeau{margin-bottom:0;cursor:pointer}
#alarme .bandeau.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
#ecranPin .cloud{margin-top:16px;padding:12px;border:1px dashed var(--ligne);border-radius:14px;font-size:.88rem;color:var(--doux)}
#ecranPin .cloud b{color:var(--texte)}
#ecranPin .cloud .btn{margin-top:8px}
#ecranPin .cloud .lien{margin-top:6px}
#ecranPin .cloud .conf{margin-top:8px;font-size:.8rem}
#ecranPin .cloud .conf a,.carte .sous a{color:var(--doux)}
.majDispo{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:130;display:flex;align-items:center;gap:10px;background:var(--carte);color:var(--texte);border:1px solid var(--ligne);border-radius:14px;padding:8px 8px 8px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);width:min(420px,calc(100vw - 24px));font-size:.92rem}
.majDispo span{flex:1;line-height:1.3}
.majDispo .btn{padding:8px 12px;white-space:nowrap}
.majFermer{background:none;border:0;color:var(--doux);font-size:1rem;cursor:pointer;padding:6px}
#ecranPin .guide-points{display:flex;gap:6px;justify-content:center;margin:4px 0 6px}
#ecranPin .guide-points i{width:8px;height:8px;border-radius:50%;background:var(--ligne)}
#ecranPin .guide-points i.actif{background:var(--accent);width:22px;border-radius:4px}
#ecranPin .guide-liste{text-align:left;margin:12px 0 16px;display:flex;flex-direction:column;gap:12px}
#ecranPin .guide-ligne{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--doux)}
#ecranPin .guide-ligne b{color:var(--texte)}
#ecranPin .guide-ligne>span{flex:none;width:34px;height:34px;border-radius:10px;background:var(--bg);border:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:var(--texte)}
#ecranPin .guide-devises{max-height:46vh;overflow:auto;margin:8px -4px 0;padding:0 4px}
#ecranPin .compte.choisi{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}

/* Inviter un proche */
.partage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.partage a { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-decoration: none; }
.partage a span { font-size: 1.15em; width: 1.4em; text-align: center; }
.bouton-inviter { display: block; width: 100%; margin-top: 14px; }
.carte.invite { border: 2px solid var(--accent, #ffc24b); }

/* Coco, le compagnon */
.koko-carte { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 16px; overflow: visible; }
.koko { flex: 0 0 auto; width: 92px; height: 95px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.koko svg { width: 100%; height: 100%; overflow: visible; display: block; }
.koko-bulle { position: relative; flex: 1; background: var(--accent-bg); border-radius: 16px; padding: 10px 14px; font-size: .95rem; line-height: 1.35; }
.koko-bulle::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-left: 0; border-right-color: var(--accent-bg); }
.koko-bulle b { display: block; font-size: .78rem; color: var(--doux); margin-bottom: 2px; }
.koko-joyeux .koko-bulle { background: var(--ok-bg); } .koko-joyeux .koko-bulle::before { border-right-color: var(--ok-bg); }
.koko-inquiet .koko-bulle { background: var(--alerte-bg); } .koko-inquiet .koko-bulle::before { border-right-color: var(--alerte-bg); }
.koko-panique .koko-bulle { background: var(--danger-bg); } .koko-panique .koko-bulle::before { border-right-color: var(--danger-bg); }
.koko-modal { width: 80px; height: 83px; margin: -4px auto 4px; }
.koko-modal svg { width: 100%; height: 100%; overflow: visible; }
.k-corps { transform-origin: 60px 106px; transform-box: view-box; }
.k-yeux { transform-origin: 60px 55px; transform-box: view-box; animation: k-cligne 4.5s infinite; }
.koko-joyeux .k-corps { animation: k-sautille 1.1s ease-in-out infinite; }
.koko-content .k-corps { animation: k-respire 3s ease-in-out infinite; }
.koko-inquiet .k-corps { animation: k-hesite 2.4s ease-in-out infinite; }
.koko-panique .k-corps { animation: k-tremble .35s linear infinite; }
.koko-joyeux .k-ombre { transform-origin: 60px 116px; transform-box: view-box; animation: k-ombre 1.1s ease-in-out infinite; }
.k-bras-g { transform-origin: 22px 64px; transform-box: view-box; animation: k-salut-g .55s ease-in-out infinite alternate; }
.k-bras-d { transform-origin: 98px 64px; transform-box: view-box; animation: k-salut-d .55s ease-in-out infinite alternate; }
.k-goutte { animation: k-goutte 1.8s ease-in infinite; }
.k-larme { animation: k-larme 1.2s ease-in infinite; } .k-l2 { animation-delay: .6s; }
.k-cri { transform-origin: 60px 79px; transform-box: view-box; animation: k-cri .5s ease-in-out infinite alternate; }
.koko.saute svg { animation: k-saut .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes k-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes k-sautille { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .94); } 50% { transform: translateY(-10px) scale(.97, 1.03); } }
@keyframes k-ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.8); opacity: .6; } }
@keyframes k-respire { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes k-hesite { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes k-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }
@keyframes k-salut-g { from { transform: rotate(0); } to { transform: rotate(18deg); } }
@keyframes k-salut-d { from { transform: rotate(0); } to { transform: rotate(-18deg); } }
@keyframes k-goutte { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes k-larme { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes k-cri { from { transform: scale(1, .8); } to { transform: scale(1, 1.15); } }
@keyframes k-saut { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) rotate(-8deg); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .koko svg *, .koko-modal svg *, .koko.saute svg { animation: none !important; } }

/* Nouveautés */
.nouveautes { max-height: 55vh; overflow: auto; }
.nv-bloc { margin: 10px 0 14px; }
.nv-titre { font-weight: 700; margin-bottom: 4px; }
.nv-pastille { display: inline-block; background: var(--accent); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.nouveautes ul { margin: 0; padding-left: 4px; list-style: none; }
.nouveautes li { margin: 6px 0; line-height: 1.4; }

/* Boîte à idées */
#idTexte { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); color: inherit; resize: vertical; }
.idees-liste { max-height: 42vh; overflow: auto; margin-top: 12px; }
.idee { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 6px 4px; border-radius: 12px; border: 1px solid var(--ligne); background: none; color: inherit; cursor: pointer; font-size: 1rem; }
.vote b { font-size: .85rem; }
.vote.actif { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.idee-texte { flex: 1; line-height: 1.4; word-break: break-word; }
.statut { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 9px; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.statut.prevue { background: var(--alerte-bg); color: var(--alerte); }
.idee-sup { background: none; border: 0; color: var(--doux); cursor: pointer; font-size: 1rem; }
.carte.soutien { border: 2px solid #ff5e5b; }
.carte.soutien a.btn, .partage a.btn { text-decoration: none; display: inline-flex; }

/* Accroche sur les écrans de connexion */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
.accroche { display: flex; align-items: flex-end; gap: 6px; margin: 4px auto 14px; max-width: 330px; text-align: left; }
.accroche-koko { flex: 0 0 auto; width: 46px; height: 48px; }
.accroche-koko svg { width: 100%; height: 100%; overflow: visible; display: block; }
.accroche-bulle { position: relative; flex: 1; background: var(--accent-bg); border-radius: 16px 16px 16px 4px; padding: 9px 13px 10px; color: var(--texte); }
.accroche-bulle .ac-1 { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: .84rem; line-height: 1.32; letter-spacing: -.005em; }
.accroche-bulle .ac-2 { margin-top: 4px; font-family: "Poppins", system-ui, sans-serif; font-style: italic; font-weight: 400; font-size: .78rem; line-height: 1.35; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .accroche-koko svg * { animation: none !important; } }

/* Coffre d'infos */
.coffre-alerte { background: var(--alerte-bg); border-color: transparent; font-size: .9rem; line-height: 1.4; }
.cf-fiche { padding: 10px 0; border-top: 1px solid var(--ligne); }
.cf-fiche:first-of-type { border-top: 0; padding-top: 0; }
.cf-titre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cf-ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lib actions" "val actions"; column-gap: 8px; align-items: center; padding: 4px 0; }
.cf-ligne .sous { grid-area: lib; color: var(--doux); font-size: .78rem; }
.cf-ligne b { grid-area: val; font-weight: 600; word-break: break-all; font-variant-numeric: tabular-nums; }
.cf-actions { grid-area: actions; display: flex; gap: 6px; }
.cf-actions .btn { text-decoration: none; }
.cf-note { margin-top: 4px; color: var(--doux); white-space: pre-wrap; }
.cf-mdp { letter-spacing: .06em; font-family: ui-monospace, Menlo, monospace; }
#cf_note { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--carte); color: inherit; }
.formulaire .champ input { flex: 1; min-width: 0; }

/* Budget : réel / prévu */
.montant-bloc { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.montant-bloc .montant { text-align: right; }
.montant-bloc .montant .sous { display: block; font-size: .7rem; color: var(--doux); font-weight: 400; }
.plus-reel { min-width: 38px; height: 38px; padding: 0; font-size: 1.15rem; border-radius: 12px; }
.reel { margin-top: 6px; }
.reel-barre { height: 6px; border-radius: 3px; background: var(--ligne); overflow: hidden; max-width: 220px; }
.reel-barre span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.reel.ok .reel-barre span { background: var(--ok); }
.reel.danger .reel-barre span { background: var(--danger); }
.reel-txt { font-size: .8rem; color: var(--doux); margin-top: 3px; }
.reel-txt b { color: var(--texte); }

/* Coco en mini (en-tête) et mode discret */
.mini-coco { position: relative; width: 44px; padding: 2px 4px; display: inline-flex; align-items: center; justify-content: center; }
#btnCoco:empty { display: none; }
.mini-coco svg { width: 30px; height: 31px; overflow: visible; display: block; }
.mini-pastille { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--alerte); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.mini-pastille.danger { background: var(--danger); }
#btnDiscret.actif { background: var(--accent); color: #fff; }
.bio-btn { width: 100%; font-size: 1.05rem; padding: 14px; }

/* Coco intelligent */
.koko-compte { font-weight: 600; font-size: .72rem; color: var(--doux); margin-left: 4px; }
.koko-suite { display: block; font-style: normal; font-size: .72rem; color: var(--doux); margin-top: 4px; }
.koko-bulle.niv-danger { background: var(--danger-bg) !important; } .koko-bulle.niv-danger::before { border-right-color: var(--danger-bg) !important; }
.koko-bulle.niv-alerte { background: var(--alerte-bg) !important; } .koko-bulle.niv-alerte::before { border-right-color: var(--alerte-bg) !important; }
.koko-bulle.niv-bravo { background: var(--ok-bg) !important; } .koko-bulle.niv-bravo::before { border-right-color: var(--ok-bg) !important; }
.koko-bulle.niv-info { background: var(--accent-bg) !important; } .koko-bulle.niv-info::before { border-right-color: var(--accent-bg) !important; }
.conseils-coco { margin-top: 10px; }
.conseil { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ligne); line-height: 1.4; font-size: .92rem; }
.conseil:first-of-type { border-top: 0; }
.coco-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 125;
  display: flex; align-items: flex-end; gap: 6px; width: min(92vw, 420px); transition: opacity .25s, transform .25s; }
.coco-toast.vu { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.coco-toast-tete { flex: 0 0 auto; width: 48px; height: 50px; } .coco-toast-tete svg { width: 100%; height: 100%; overflow: visible; }
.coco-toast-bulle { flex: 1; background: var(--carte); color: var(--texte); border-radius: 16px 16px 16px 4px; padding: 9px 13px; box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: .9rem; line-height: 1.35; }
.coco-toast-bulle b { display: block; font-size: .75rem; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .coco-toast { transition: none; } .coco-toast svg * { animation: none !important; } }
.ligne.mvt { gap: 10px; align-items: center; } .ligne.mvt b { font-variant-numeric: tabular-nums; }

/* Lien vers le mode d'emploi (écran de connexion) */
.coin-guide { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 3; padding: 7px 12px; border-radius: 18px; background: #fff; color: #1f5fe0; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 3px 12px rgba(0,0,0,.18); font-size: .8rem; font-weight: 700; text-decoration: none; }
.coin-guide:hover, .coin-guide:focus-visible { background: #eef3ff; }

/* Accueil : grande case « Reste à dépenser » */
.reste-depenser { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; border-left: 6px solid var(--ok); }
.reste-depenser.alerte { border-left-color: var(--alerte); } .reste-depenser.danger { border-left-color: var(--danger); }
.reste-depenser .val { font-size: 2rem; line-height: 1.15; margin: 2px 0 4px; }
.reste-depenser .rd-calc { font-size: .78rem; color: var(--doux); }
.reste-depenser .rd-calc b { color: var(--texte); font-weight: 600; white-space: nowrap; }
.reste-depenser .rd-droite { text-align: right; padding-left: 14px; border-left: 1px solid var(--ligne); flex: 0 0 auto; }
.reste-depenser .rd-jour { font-size: 1.25rem; font-weight: 700; margin: 2px 0; }
@media (max-width: 380px) { .reste-depenser { flex-direction: column; align-items: stretch; } .reste-depenser .rd-droite { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--ligne); padding-top: 8px; } }

/* Dépenses rapides */
.carte.rapides { margin-bottom: 14px; }
.bouton-rapide { font-size: 1rem; padding: 12px 18px; white-space: nowrap; }
.rapides-total { text-align: right; } .rapides-total .sous { display: block; color: var(--doux); font-size: .75rem; } .rapides-total b { font-size: 1.15rem; }
.ligne.rapide { gap: 10px; align-items: center; } .ligne.rapide .montant { font-variant-numeric: tabular-nums; }
.puces-montants { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.liste-rapides { max-height: 55vh; overflow: auto; }
.carte.rapides { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulle-rapides { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 26px; border: 1px solid var(--ligne); background: var(--accent-bg); color: var(--texte); cursor: pointer; font: inherit; }
.bulle-rapides .bulle-icone { font-size: 1.3rem; }
.bulle-rapides .bulle-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.bulle-rapides .bulle-txt .sous { font-size: .7rem; color: var(--doux); }
.bulle-rapides .bulle-txt b { font-size: 1rem; }
.bulle-rapides .bulle-nb { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; box-sizing: border-box; box-shadow: 0 0 0 2px var(--carte); }
.bulle-rapides.vide { opacity: .65; } .bulle-rapides.vide .bulle-nb { background: var(--doux); }