:root {
  --fond: #05090f; --carte: #0d1622; --ligne: #1b2a3a; --texte: #e6f1f8; --pale: #8aa3b5;
  --cyan: #29d3ff; --cyan-fonce: #0e8fb5; --rouge: #ff5d6c; --vert: #4fe3a1; --jaune: #ffc65c;
  --haut: env(safe-area-inset-top); --bas: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.4 Inter, system-ui, sans-serif; }
body { min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
.chargement { text-align: center; color: var(--pale); padding-top: 40vh; }
.marque { font-family: Rajdhani, sans-serif; font-weight: 700; letter-spacing: .28em; color: var(--cyan); }
h1 { font-family: Rajdhani, sans-serif; font-size: 1.8rem; margin: 0; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pale); margin: 20px 4px 8px; font-weight: 600; }
.aide { color: var(--pale); font-size: .82rem; margin: 10px 4px; }
.vide { color: var(--pale); text-align: center; padding: 30px 16px; }
.msg { color: var(--rouge); margin: 10px 4px; }

/* réacteur (logo animé) */
.reacteur { position: relative; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 18px #29d3ff66, inset 0 0 18px #29d3ff44; display: grid; place-items: center; flex: none; }
.reacteur::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed #29d3ffaa; }
.reacteur span { width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(#fff, #bff6ff 45%, #29d3ff); box-shadow: 0 0 20px #7fe9ff; }
.reacteur.petit { width: 26px; height: 26px; border-width: 1.5px; }
.reacteur.petit::before { border-width: 1px; }
.reacteur.grand { width: 110px; height: 110px; margin: 0 auto 18px; }
.reacteur.geant { width: 170px; height: 170px; }

/* connexion */
.login { max-width: 380px; margin: 0 auto; padding: calc(60px + var(--haut)) 16px 40px; text-align: center; }
.login .marque { font-size: 2.6rem; margin: 0; }
.sous { color: var(--pale); margin: 4px 0 28px; }
.login .carte { text-align: left; }

/* structure */
.haut { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--haut)) 16px 10px; background: #05090fee; backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.haut .marque { font-size: 1.25rem; flex: 1; }
.page { max-width: 560px; margin: 0 auto; padding: 14px 16px calc(96px + var(--bas)); }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: #0a121ccc; backdrop-filter: blur(14px); border-top: 1px solid var(--ligne); padding-bottom: var(--bas); }
.onglets button { flex: 1; position: relative; background: none; border: 0; padding: 8px 0 7px; font-size: .68rem; color: var(--pale); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.onglets .ico { font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.onglets .actif { color: var(--cyan); }
.pastille { position: absolute; top: 3px; left: 54%; background: var(--rouge); color: #fff; font-size: .62rem; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }

/* éléments communs */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 4px 14px; }
.login .carte, .reponse { padding: 16px; }
label { display: block; font-size: .8rem; color: var(--pale); margin: 12px 0 5px; }
input, select, textarea { width: 100%; background: #071019; border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; font-size: 16px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan-fonce); }
textarea { resize: none; }
.primaire, .secondaire { display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px; font-weight: 600; text-align: center; text-decoration: none; margin-top: 12px; }
.primaire { background: var(--cyan); color: #00202c; }
.primaire:disabled { opacity: .5; }
.secondaire { background: #12202e; color: var(--cyan); border: 1px solid var(--ligne); margin-top: 16px; }
.lien { background: none; border: 0; color: var(--cyan); padding: 6px; font-size: .9rem; }
.lien.rouge { color: var(--rouge); }
.rang { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rang h2 { margin-bottom: 8px; }
.rang2 { display: flex; gap: 8px; }
.titre { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; }
.plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--carte); color: var(--cyan); font-size: 1.3rem; }

/* parler */
.micro-zone { text-align: center; padding: 18px 0 6px; }
.micro { background: none; border: 0; padding: 0; border-radius: 50%; }
.micro .reacteur { transition: transform .2s; }
.micro:active .reacteur { transform: scale(.96); }
.micro.ecoute .reacteur { animation: pulse 1.1s ease-in-out infinite; border-color: #7fe9ff; }
.micro.ecoute .reacteur::before { animation: tourne 3s linear infinite; }
.micro.pense .reacteur::before { animation: tourne .9s linear infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 50px #29d3ffaa, inset 0 0 30px #29d3ff77; transform: scale(1.04); } }
@keyframes tourne { to { transform: rotate(360deg); } }
.etat { color: var(--pale); margin: 14px 0 4px; min-height: 1.4em; }
.dire { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.dire textarea { flex: 1; }
.dire .primaire { width: auto; margin: 0; padding: 12px 16px; }
.reponse { margin-top: 16px; border-color: #1d4a60; }
.dit { color: var(--pale); font-style: italic; margin: 0 0 6px; font-size: .9rem; }
.rep { margin: 0 0 8px; font-weight: 600; color: var(--cyan); }
.mini { list-style: none; margin: 0 0 6px; padding: 0; }
.mini li { padding: 8px 0; border-top: 1px solid var(--ligne); }
.mini em { color: var(--pale); font-style: normal; font-size: .85rem; }
.tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; background: #12202e; }
.tag.rappel { color: var(--jaune); } .tag.achat { color: var(--vert); } .tag.note { color: var(--cyan); } .tag.depense { color: #c9a7ff; }

/* listes */
.ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ligne); }
.carte > .ligne:first-child { border-top: 0; }
.ligne .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ligne small { display: block; color: var(--pale); font-size: .8rem; margin-top: 2px; }
.ligne small.retard, .retard { color: var(--rouge); }
.ligne.fait .txt { color: var(--pale); text-decoration: line-through; }
.case { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cyan-fonce); background: none; color: #00202c; font-weight: 700; flex: none; padding: 0; }
.ligne.fait .case { background: var(--cyan); border-color: var(--cyan); }
.cal { text-decoration: none; font-size: 1.3rem; padding: 4px; }
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totaux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.totaux div { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 12px; }
.totaux span { display: block; font-size: .78rem; color: var(--pale); }
.totaux b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
#mois { margin-top: 6px; }

/* feuille du bas */
.voile { position: fixed; inset: 0; z-index: 10; background: #000a; display: flex; align-items: flex-end; }
.feuille { width: 100%; max-width: 560px; margin: 0 auto; background: var(--carte); border-radius: 20px 20px 0 0; border: 1px solid var(--ligne); padding: 16px 16px calc(20px + var(--bas)); max-height: 92dvh; overflow-y: auto; }
.feuille h2 { margin: 0; color: var(--texte); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.feuille .lien.rouge { display: block; margin: 12px auto 0; }

#toast { position: fixed; left: 50%; bottom: calc(86px + var(--bas)); transform: translateX(-50%); z-index: 20; background: #e6f1f8; color: #05090f; padding: 10px 16px; border-radius: 12px; font-weight: 600; max-width: 90vw; }