/*
 * home-anim.css - Animations et menu de l'app maison
 * ==================================================
 * Chargé par home_page_start() sur toutes les pages. Ne touche qu'à transform,
 * opacity et quelques couleurs, pour rester fluide sur un téléphone. Tout est
 * coupé quand l'appareil demande moins de mouvement (voir la fin du fichier).
 *
 * Accroches pour les pages (aucune n'est obligatoire) :
 *   .is-today                       jour courant : halo qui respire
 *   .anim-check + input.anim-box    ligne cochable : case, trait, rebond
 *   [data-anim-list]                liste de lignes .anim-check : barre [data-anim-progress] et confettis
 *   [data-countup="76"]             nombre qui compte jusqu'à sa valeur
 *   [data-fill="72"]                barre qui se remplit (en %) quand elle apparaît
 *   [data-ring="0.84"]              cercle SVG (circle.fg) qui se trace à cette part
 */
:root {
    --ease: cubic-bezier(.22, 1, .36, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --acc-d: #3f7a62;
    --card2: #1e222b;
    --warn: #e3b66b;
}

/* ── Changement de page : fondu court ───────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-in both fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ── Ouverture d'une page : les blocs montent l'un après l'autre ─────────── */
main > * { animation: rise .5s var(--ease) backwards; }
main > :nth-child(2) { animation-delay: 50ms; }
main > :nth-child(3) { animation-delay: 100ms; }
main > :nth-child(4) { animation-delay: 150ms; }
main > :nth-child(5) { animation-delay: 200ms; }
main > :nth-child(6) { animation-delay: 250ms; }
main > :nth-child(7) { animation-delay: 300ms; }
main > :nth-child(8) { animation-delay: 340ms; }
main > :nth-child(n+9) { animation-delay: 380ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Cartes, boutons, champs ─────────────────────────────────────────────── */
.card { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
/* Une carte qui contient des champs de saisie ne bouge pas : sinon elle sautillerait sous la souris pendant qu'on écrit. */
@media (hover: hover) {
    .card:hover:where(:not(:focus-within):not(:has(input:not([type=hidden]), select, textarea))) { transform: translateY(-2px); border-color: var(--acc-d); box-shadow: 0 10px 24px -16px #000; }
}
button { position: relative; overflow: hidden; transition: transform .15s var(--ease), filter .2s, box-shadow .25s, color .2s, border-color .2s; }
button:hover { filter: brightness(1.08); }
button:not(.ghost):hover { box-shadow: 0 6px 18px -8px var(--acc); }
button:active { transform: scale(.95); }
button.ghost:hover { color: var(--txt); border-color: var(--acc-d); }
input, select, textarea { transition: border-color .2s, box-shadow .2s; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px #7cc4a42b; }
.ripple { position: absolute; border-radius: 50%; background: #fff; opacity: .35; transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
button.is-busy { pointer-events: none; background: linear-gradient(90deg, var(--acc) 25%, #a6e0c4 50%, var(--acc) 75%); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
button.ghost.is-busy { background: linear-gradient(90deg, transparent 25%, #7cc4a41f 50%, transparent 75%); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Message d'information ou d'erreur : petit rebond à l'arrivée. */
p.ok, p.err { animation: pop .45s var(--spring) both; transform-origin: left center; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── Barre du haut et menu ───────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topnav { display: flex; align-items: center; border-bottom: 0; padding: 10px 16px; max-width: 1040px; margin: 0 auto; gap: 6px; }
.brand { font-weight: 700; color: var(--txt); text-decoration: none; margin-right: 10px; }
.nav-main { display: flex; gap: 2px; min-width: 0; }
.nav-main a, .menu-panel a { color: var(--mut); text-decoration: none; position: relative; border-radius: 8px; padding: 6px 10px; transition: color .2s, background .2s; }
.nav-main a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 2px; background: var(--acc); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-main a:hover, .menu-panel a:hover { color: var(--txt); }
.nav-main a:hover::after, .nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.nav-main a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--txt); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; }
.burger { width: 16px; height: 12px; position: relative; display: block; }
.burger i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease); }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 5px; }
.burger i:nth-child(3) { top: 10px; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px #000;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
.menu-panel.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu-inner { max-width: 1040px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 24px; }
.menu-inner section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-inner h2 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0 0 6px; }
.menu-panel a { padding: 9px 10px; }
.menu-panel a:hover { background: var(--card2); }
.menu-panel a[aria-current="page"] { color: var(--acc); background: #7cc4a41a; }
.menu-user { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-panel .menu-inner section > * { opacity: 0; transform: translateY(6px); }
.menu-panel.is-open .menu-inner section > * { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
.menu-scrim { position: fixed; inset: 0; z-index: 20; background: #0009; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.menu-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 719px) {
    .nav-main { display: none; }
    .topnav .menu-btn { margin-left: auto; }
}

/* ── Jour courant ────────────────────────────────────────────────────────── */
.is-today { border-color: var(--acc); animation: glow 2.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 #7cc4a400; } 50% { box-shadow: 0 0 0 4px #7cc4a42b; } }

/* ── Ligne cochable ──────────────────────────────────────────────────────── */
.anim-check { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 6px; color: var(--txt); cursor: pointer; user-select: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; transition: transform .2s var(--ease), opacity .4s, border-color .25s; }
.anim-check:hover { border-color: var(--acc-d); }
.anim-check:active { transform: scale(.98); }
input.anim-box { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; padding: 0; margin: 0; border: 2px solid var(--mut); border-radius: 7px; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
input.anim-box::after { content: ""; width: 5px; height: 10px; border: solid #0f1115; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--spring); margin-top: -2px; }
input.anim-box:checked { background: var(--acc); border-color: var(--acc); animation: pop-box .4s var(--spring); }
input.anim-box:checked::after { transform: rotate(45deg) scale(1); }
@keyframes pop-box { 0% { transform: scale(.8); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.anim-label { position: relative; flex: 1; min-width: 0; transition: color .25s; }
.anim-label::after { content: ""; position: absolute; left: 0; top: 55%; height: 2px; width: 100%; background: var(--mut); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.anim-check:has(input:checked) { opacity: .6; }
.anim-check:has(input:checked) .anim-label { color: var(--mut); }
.anim-check:has(input:checked) .anim-label::after { transform: scaleX(1); }
.anim-progress { height: 6px; background: var(--card2); border-radius: 99px; overflow: hidden; margin: 6px 0 12px; }
.anim-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-d), var(--acc)); border-radius: 99px; transition: width .6s var(--ease); }
.confetti { position: fixed; width: 6px; height: 6px; border-radius: 2px; pointer-events: none; z-index: 40; animation: burst .75s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) rotate(240deg); opacity: 0; } }

/* ── Budget : barres et cercle ───────────────────────────────────────────── */
[data-fill] { width: 0; transition: width .9s var(--ease); }
[data-fill].is-in { width: calc(var(--to) * 1%); }
[data-ring] circle.fg { stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.2s var(--ease), stroke .4s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    @view-transition { navigation: none; }
}

.sp { flex: 1; }