/* ============================================================
   DailyBudget — CSS Global
   ============================================================ */

/* --- Variables -------------------------------------------- */
:root {
    --primary:      #6366f1;
    --primary-dark: #4f46e5;
    --primary-glow: rgba(99,102,241,.25);
    --success:      #22c55e;
    --danger:       #ef4444;
    --warning:      #f59e0b;
    --bg:           #0f172a;
    --surface:      #1e293b;
    --surface-2:    #263348;
    --border:       #334155;
    --text:         #f1f5f9;
    --muted:        #94a3b8;
    --radius:       .75rem;
    --radius-sm:    .375rem;
    --shadow:       0 8px 32px rgba(0,0,0,.4);
    --transition:   .2s ease;
    --max-w:        1100px;
}

/* --- Thème Neo-Brutalism ----------------------------------- */
[data-theme="pastel"] {
    --primary:      #FF2B9D;   /* rose choc */
    --primary-dark: #D4008A;
    --primary-glow: rgba(255,43,157,.25);
    --success:      #00B341;   /* vert néon */
    --danger:       #FF2020;   /* rouge vif */
    --warning:      #FF8C00;   /* orange saturé */
    --bg:           #F5F5F5;
    --surface:      #FFFFFF;
    --surface-2:    #FFF9C3;   /* jaune pâle */
    --border:       #000000;
    --text:         #000000;
    --muted:        #525252;
    --shadow:       4px 4px 0 #000000;
}

/* ── Panneaux : bordure 2px + ombre décalée ─────────────── */
[data-theme="pastel"] .modal-box,
[data-theme="pastel"] .ob-card,
[data-theme="pastel"] .budget-hero,
[data-theme="pastel"] .expense-form-section,
[data-theme="pastel"] .expense-list-section,
[data-theme="pastel"] .chart-card,
[data-theme="pastel"] .period-nav,
[data-theme="pastel"] .user-dropdown {
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
}

/* ── Budget hero : fond jaune électrique ─────────────────── */
[data-theme="pastel"] .budget-hero {
    background: #FFF9C2;
}
[data-theme="pastel"] .budget-amount.warning { color: #C45000; } /* orange foncé sur jaune */

/* ── Boutons : bordure noire + lift effect ───────────────── */
[data-theme="pastel"] .btn {
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    font-weight: 700;
    transition: transform .1s ease, box-shadow .1s ease;
}
[data-theme="pastel"] .btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #000;
}
[data-theme="pastel"] .btn:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}

/* ── Inputs : bordure 2px noire ──────────────────────────── */
[data-theme="pastel"] .form-input,
[data-theme="pastel"] .form-group input,
[data-theme="pastel"] .form-group select,
[data-theme="pastel"] .expense-form-row input,
[data-theme="pastel"] .expense-form-row select {
    border: 2px solid #000;
}
[data-theme="pastel"] .form-input:focus,
[data-theme="pastel"] .form-group input:focus,
[data-theme="pastel"] .form-group select:focus {
    border-color: #FF2B9D;
    box-shadow: 3px 3px 0 #FF2B9D;
}

/* ── Barres de progression : couleurs vives sans dégradé ─── */
[data-theme="pastel"] .budget-progress-fill.positive { background: #00B341; }
[data-theme="pastel"] .budget-progress-fill.warning  { background: #FF8C00; }
[data-theme="pastel"] .budget-progress-fill.danger   { background: #FF2020; }

/* ── Badge Premium : rose choc ───────────────────────────── */
[data-theme="pastel"] .badge-premium {
    background: linear-gradient(135deg, #FF2B9D, #FF8C00);
}

/* ── Couleur de la section dépenses selon la vue ─────────── */
[data-theme="pastel"] .expense-list-section[data-view="day"] {
    background: #BBF7D0;   /* vert pastel */
}
[data-theme="pastel"] .expense-list-section[data-view="period"] {
    background: #FED7AA;   /* orange pastel */
}

/* ── Background dégradé (landing : data-theme sur html / app : sur body) */
[data-theme="pastel"] body {
    background: linear-gradient(135deg, #fff0f9 0%, #f5f0ff 50%, #f0faff 100%);
    min-height: 100vh;
}
body[data-theme="pastel"] {
    background: linear-gradient(135deg, #fffafd 0%, #faf8ff 50%, #f7fdff 100%);
    min-height: 100vh;
}

/* Lignes individuelles : fond blanc + cadre noir */
/* ── Navbar : fond clair en thème pastel ─────────────────── */
[data-theme="pastel"] .navbar {
    background: rgba(255,255,255,.90);
    border-bottom: 2px solid #000;
}

[data-theme="pastel"] .expense-item {
    background: #FFFFFF;
    border: 2px solid #000;
    border-bottom: 2px solid #000;
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: .4rem;
}

/* ============================================================
   Thème Nature — Photo plein écran + Glassmorphism
   ============================================================ */
[data-theme="nature"],
body[data-theme="nature"] {
    --primary:      #C2610F;   /* ambre canyon */
    --primary-dark: #9A4D0C;
    --primary-glow: rgba(194,97,15,.25);
    --success:      #16a34a;
    --danger:       #dc2626;
    --warning:      #d97706;
    --bg:           #FAF6F0;   /* fallback crème */
    --surface:      rgba(255,255,255,.70);
    --surface-2:    rgba(255,255,255,.50);
    --border:       rgba(180,140,100,.30);
    --text:         #1C1008;   /* brun très foncé */
    --muted:        #7A5C3A;
    --shadow:       0 8px 32px rgba(0,0,0,.12);
    --radius:       .75rem;
    --radius-sm:    .375rem;
}

/* Photo plein écran */
body[data-theme="nature"],
[data-theme="nature"] body {
    background-color: #FAF6F0;
    background-image: linear-gradient(rgba(250,246,240,.85), rgba(250,246,240,.85)),
                      url('../img/bg-nature.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

/* ── Panneaux glassmorphism ──────────────────────────────── */
body[data-theme="nature"] .modal-box,
body[data-theme="nature"] .ob-card,
body[data-theme="nature"] .budget-hero,
body[data-theme="nature"] .expense-form-section,
body[data-theme="nature"] .expense-list-section,
body[data-theme="nature"] .chart-card,
body[data-theme="nature"] .period-nav,
[data-theme="nature"] .modal-box,
[data-theme="nature"] .ob-card,
[data-theme="nature"] .budget-hero,
[data-theme="nature"] .expense-form-section,
[data-theme="nature"] .expense-list-section,
[data-theme="nature"] .chart-card,
[data-theme="nature"] .period-nav {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(180,140,100,.25);
    box-shadow: 0 4px 24px rgba(100,60,20,.10);
}

/* ── Navbar ──────────────────────────────────────────────── */
body[data-theme="nature"] .navbar,
[data-theme="nature"] .navbar {
    background: rgba(250,246,240,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(180,140,100,.25);
}

/* ── Dropdown ────────────────────────────────────────────── */
body[data-theme="nature"] .user-dropdown,
[data-theme="nature"] .user-dropdown {
    background: rgba(255,252,248,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(180,140,100,.25);
    box-shadow: 0 8px 32px rgba(100,60,20,.15);
}

/* ── Lignes de dépense ───────────────────────────────────── */
body[data-theme="nature"] .expense-item,
[data-theme="nature"] .expense-item {
    background: transparent;
    border-bottom: 1px solid rgba(180,140,100,.20);
    border-radius: 0;
    padding: .85rem 0;
    margin-bottom: 0;
}

/* ── Inputs ──────────────────────────────────────────────── */
body[data-theme="nature"] .form-input,
body[data-theme="nature"] .form-group input,
body[data-theme="nature"] .form-group select,
body[data-theme="nature"] .expense-form-row input,
body[data-theme="nature"] .expense-form-row select,
[data-theme="nature"] .form-input,
[data-theme="nature"] .form-group input,
[data-theme="nature"] .form-group select {
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(180,140,100,.30);
    color: #1C1008;
}
body[data-theme="nature"] .form-input::placeholder,
[data-theme="nature"] .form-input::placeholder { color: rgba(100,70,40,.45); }

/* ── Section dépenses : fond blanc pour les deux vues ───── */
body[data-theme="nature"] .expense-list-section[data-view="day"],
body[data-theme="nature"] .expense-list-section[data-view="period"],
[data-theme="nature"] .expense-list-section[data-view="day"],
[data-theme="nature"] .expense-list-section[data-view="period"] {
    background: rgba(255,255,255,.72);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; }
body  { font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background: var(--bg); color: var(--text); line-height: 1.6; }
a     { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img   { max-width: 100%; display: block; }
ul    { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* --- Container -------------------------------------------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

/* --- Buttons ---------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.4rem; border-radius: var(--radius-sm);
    font-size: .9375rem; font-weight: 600; transition: var(--transition);
    white-space: nowrap; border: 2px solid transparent;
}
.btn-primary {
    background: var(--primary); color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--primary-glow); }
.btn-ghost  { color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-lg { padding: .8rem 2rem; font-size: 1rem; border-radius: var(--radius); }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* --- Navbar ----------------------------------------------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15,23,42,.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    /* Décale la nav sous la status bar iOS quand la landing est ouverte
       en mode PWA standalone (ex: user déconnecté depuis la PWA). */
    padding-top: env(safe-area-inset-top);
}
.navbar .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; gap: 1rem;
}
.nav-logo {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.2rem; font-weight: 700; color: var(--text); text-decoration: none;
}
.nav-logo img { border-radius: 6px; }
.topbar-logo img { border-radius: 5px; }
/* Desktop : liens + actions alignés, séparés, occupant la largeur restante */
.nav-menu {
    display: flex; align-items: center; justify-content: space-between;
    flex: 1; gap: 1.75rem;
}
.nav-links { display: flex; gap: 1.75rem; }
/* Les liens ne se cassent jamais en plusieurs lignes (sinon débordement
   vertical de la navbar dans la zone juste avant la bascule burger). */
.nav-links a { color: var(--muted); font-size: .9375rem; white-space: nowrap; transition: color var(--transition); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-actions { display: flex; gap: .75rem; align-items: center; }
.nav-settings { display: flex; gap: .75rem; align-items: center; }
.nav-toggle { display: none; color: var(--text); font-size: 1.5rem; padding: .25rem; }

/* --- Language switcher ------------------------------------ */
.lang-switcher { position: relative; }
.lang-switcher__btn {
    display: flex; align-items: center; gap: .35rem;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font-size: .8125rem; font-weight: 500;
    padding: .35rem .65rem; border-radius: 6px; cursor: pointer;
    transition: border-color var(--transition);
}
.lang-switcher__btn:hover { border-color: var(--primary); }
.lang-switcher__menu {
    display: none; position: fixed;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; min-width: 150px; z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    list-style: none; padding: .35rem 0; margin: 0;
}
.lang-switcher__menu.is-open { display: block; }
.lang-switcher__menu li a {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem;
    color: var(--text); font-size: .875rem; text-decoration: none;
    transition: background var(--transition);
    white-space: nowrap;
}
.lang-switcher__menu li a:hover { background: rgba(255,255,255,.06); }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(99,102,241,.15); color: var(--primary); }

/* --- Hero ------------------------------------------------- */
.hero {
    padding: 6rem 0 4rem;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.12) 0%, transparent 70%);
    overflow: hidden;
}
.hero .container { display: flex; align-items: center; gap: 4rem; }
.hero-content { flex: 1; min-width: 0; }
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface); border: 1px solid var(--border);
    padding: .35rem .9rem; border-radius: 999px;
    font-size: .8125rem; font-weight: 500; color: var(--muted); margin-bottom: 1.5rem;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; }
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p { font-size: 1.125rem; color: var(--muted); max-width: 480px; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-preview { flex: 0 0 380px; }

/* Mockup app */
.app-mockup {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1.25rem; padding: 1.5rem; box-shadow: var(--shadow);
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.app-mockup:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.mockup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.mockup-header span:first-child { font-size: .8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mockup-header span:last-child  { font-size: .8125rem; color: var(--muted); }
.mockup-amount { margin-bottom: 1.25rem; }
.mockup-amount-label { font-size: .8125rem; color: var(--muted); margin-bottom: .35rem; }
.mockup-value { font-size: 2.5rem; font-weight: 800; color: var(--success); line-height: 1; margin-bottom: .75rem; }
.mockup-progress-wrap { background: var(--bg); border-radius: 999px; height: 6px; margin-bottom: .5rem; overflow: hidden; }
.mockup-progress-bar  { height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--success), #86efac); transition: width .6s ease; }
.mockup-sub { font-size: .8rem; color: var(--muted); }
.mockup-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.mockup-expense {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.mockup-expense:last-child { border-bottom: none; }
.mockup-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mockup-expense-cat  { font-size: .8125rem; color: var(--muted); }
.mockup-expense-lbl  { font-size: .875rem; color: var(--text); flex: 1; }
.mockup-expense-amt  { font-size: .875rem; font-weight: 600; color: var(--danger); margin-left: auto; }

/* --- Features --------------------------------------------- */
.features { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; margin-bottom: .75rem; }
.section-header p  { color: var(--muted); font-size: 1.0625rem; max-width: 520px; margin: 0 auto; }
.features-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem;
}
.features-grid .feature-card { grid-column: span 2; }
.features-grid .feature-card:nth-child(4),
.features-grid .feature-card:nth-child(5) { grid-column: span 3; }
@media (max-width: 700px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid .feature-card,
    .features-grid .feature-card:nth-child(4),
    .features-grid .feature-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 480px) {
    .features-grid { grid-template-columns: 1fr; }
}
.feature-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.75rem; transition: var(--transition);
}
.feature-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px var(--primary-glow); }
.feature-icon { font-size: 2rem; margin-bottom: 1rem; }
.feature-card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.feature-card p  { color: var(--muted); font-size: .9375rem; line-height: 1.65; }

/* --- How it works ----------------------------------------- */
.how-it-works { padding: 5rem 0; background: var(--surface); }
.steps { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.step { flex: 1; min-width: 200px; max-width: 280px; text-align: center; padding: 1.5rem 1rem; }
.step-number {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; margin: 0 auto 1.25rem;
}
.step h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.step p  { color: var(--muted); font-size: .9375rem; }
.step-arrow { font-size: 1.5rem; color: var(--border); flex-shrink: 0; }

/* --- Pricing ---------------------------------------------- */
.pricing { padding: 5rem 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 680px; margin: 0 auto; }
.pricing-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem; position: relative;
}
.pricing-card--featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); }
.pricing-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700;
    padding: .25rem .85rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
}
.pricing-plan  { font-size: .875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.pricing-currency-switcher { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.currency-btn { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: .85rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.currency-btn:hover { border-color: var(--primary); color: var(--primary); }
.currency-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pricing-price { font-size: 2.5rem; font-weight: 800; margin-bottom: .4rem; }
.pricing-price .pricing-per { font-size: 1rem; font-weight: 400; color: var(--muted); }
.pricing-currency-note { font-size: .78rem; color: var(--muted); margin-bottom: 1.35rem; min-height: 1em; font-style: italic; }
.pricing-features { margin-bottom: 2rem; display: flex; flex-direction: column; gap: .65rem; }
.pricing-features li { font-size: .9375rem; display: flex; align-items: center; gap: .6rem; }
.pricing-features li.off { color: var(--muted); }
.pricing-features .check { color: var(--success); font-weight: 700; }
.pricing-features .cross  { color: var(--muted); }

/* --- Footer ----------------------------------------------- */
/* ── Bannière apps mobiles ───────────────────────────────── */
.mobile-apps-banner {
    padding: 1.25rem 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mobile-apps-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.mobile-apps-icons {
    font-size: 1.75rem;
    flex-shrink: 0;
}
.mobile-apps-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.mobile-apps-text strong {
    color: var(--text);
    font-size: .95rem;
}
.mobile-apps-text span {
    color: var(--muted);
    font-size: .85rem;
}

footer {
    padding: 2.5rem 0; border-top: 1px solid var(--border);
    text-align: center; color: var(--muted); font-size: .875rem;
}
footer .footer-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; color: var(--text); margin-bottom: .5rem; }
footer .footer-logo img { border-radius: 6px; }
/* Conteneur des badges install (PWA, Play Store…) — placé au-dessus du
   logo dans le footer, avec un peu d'espace en bas pour respirer.
   align-items: center → badges centrés verticalement même s'ils n'ont
   pas exactement la même hauteur visible (zone de protection interne
   différente selon les SVG officiels). */
footer .footer-stores {
    display: flex; align-items: center; justify-content: center;
    gap: 2.5rem; flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
/* Badge Google Play — utilisé quand le bloc HTML du footer sera activé */
.footer-store { display: inline-block; margin: 0; transition: opacity var(--transition); }
.footer-store:hover { opacity: .85; }
.footer-store img { display: block; }
/* Bouton PWA install : look identique à un lien store (.footer-store)
   mais c'est un <button> donc on neutralise les styles natifs. */
button.footer-store { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.footer-store:hover { opacity: .85; }
/* Liste numérotée des étapes d'install PWA dans la modale. */
.pwa-install-steps { margin: 1rem 0 0; padding-left: 1.5rem; line-height: 1.7; }
.pwa-install-steps li { margin-bottom: .5rem; }
.footer-legal { margin-top: .5rem; }
.footer-legal a { color: var(--muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--text); }
.footer-legal span { margin: 0 .4rem; }

/* --- Pages légales (/cgv, /confidentialite) --------------- */
.legal-page { max-width: 800px; padding: 3rem 1.5rem; margin: 0 auto; }
.legal-page h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: .4rem; }
.legal-date { color: var(--muted); font-size: .8rem; margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1rem; font-weight: 600; margin: 2rem 0 .6rem; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.legal-page p, .legal-page li { line-height: 1.75; color: var(--muted); margin-bottom: .75rem; }
.legal-page ul { padding-left: 1.4rem; }
.legal-page a { color: var(--primary); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .875rem; }
.legal-page th, .legal-page td { padding: .55rem .8rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal-page th { background: var(--surface); font-weight: 600; color: var(--text); }
@media (max-width: 600px) {
    .legal-page { padding: 2rem 1rem; }
    .legal-page table { font-size: .8rem; }
}

/* --- Modals ----------------------------------------------- */
.modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center; padding: 1rem;
}
.modal.active { display: flex; }
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px); cursor: pointer;
}
.modal-box {
    position: relative; z-index: 1;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 440px;
    box-shadow: var(--shadow);
    animation: slideUp .25s ease;
    /* Modal long : ne jamais dépasser l'écran, défilement interne */
    max-height: calc(100vh - 2rem); overflow-y: auto;
}
.modal-box--center { text-align: center; }
.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    color: var(--muted); font-size: 1.25rem; padding: .25rem .5rem;
    border-radius: var(--radius-sm); transition: var(--transition);
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-box h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: .5rem; }
.modal-box > p { color: var(--muted); font-size: .9375rem; margin-bottom: 1.75rem; }
.modal-footer-text { text-align: center; color: var(--muted); font-size: .875rem; margin-top: 1.25rem; }
/* Blocs de boutons en pied de modal */
.modal-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.modal-actions--tight { gap: .5rem; margin-top: .75rem; }
.modal-actions--end { justify-content: flex-end; margin-top: 1rem; }
.magic-sent-icon { font-size: 3rem; margin-bottom: 1rem; }
.magic-sent-email { color: var(--text); }

/* Dev link (dev mode uniquement) */
.dev-link-box {
    background: var(--bg); border: 1px dashed var(--warning);
    border-radius: var(--radius-sm); padding: .75rem 1rem; margin-top: 1rem;
}
.dev-link-box p { color: var(--warning); font-size: .75rem; font-weight: 700; margin-bottom: .35rem; }
.dev-link-box a { color: var(--primary); font-size: .8125rem; word-break: break-all; }

/* --- Forms ------------------------------------------------ */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; }
.form-group input,
.form-group select {
    width: 100%; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem 1rem;
    color: var(--text); font-size: .9375rem; transition: var(--transition);
    font-family: inherit;
}
.form-group select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
}
.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.form-group input::placeholder { color: var(--muted); }
.form-group select option { background: var(--surface); color: var(--text); }
.form-error { color: var(--danger); font-size: .875rem; min-height: 1.2rem; margin-bottom: .5rem; }

/* --- Utilities -------------------------------------------- */
.text-muted  { color: var(--muted); }
.text-center { text-align: center; }
.text-sm     { font-size: .875rem; }

/* --- Animations ------------------------------------------- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-content { animation: fadeIn .6s ease; }
.hero-preview { animation: slideUp .7s .1s ease both; }

/* --- Responsive ------------------------------------------- */
/* Navbar : bascule en menu burger dès 1100px — la navbar complète
   (logo + 3 liens + langue + thème + 2 boutons) ne tient plus en
   dessous sans que les liens se compriment et débordent. */
@media (max-width: 1100px) {
    /* Menu fermé : caché, seul le burger est visible */
    .nav-menu     { display: none; }
    .nav-toggle   { display: block; }
    /* Menu ouvert : panneau sous la navbar, hauteur = contenu. */
    .navbar.open .nav-menu {
        display: flex; flex-direction: column;
        position: fixed; top: 64px; left: 0; right: 0;
        background: var(--bg); border-bottom: 1px solid var(--border);
        padding: 1.25rem; gap: 0;
        max-height: calc(100vh - 64px); overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0,0,0,.25);
    }
    /* Liens de navigation masqués en mobile : l'utilisateur scrolle la page
       pour atteindre les sections. Le burger ne garde que les actions. */
    .navbar.open .nav-links { display: none; }
    /* Bloc actions : seul contenu du burger, empilé proprement */
    .navbar.open .nav-actions {
        display: flex; flex-direction: column;
        gap: .6rem; align-items: stretch;
    }
    /* Langue + thème : une seule ligne, langue extensible, thème carré */
    .navbar.open .nav-settings {
        display: flex; flex-direction: row;
        gap: .6rem; align-items: stretch;
    }
    .navbar.open .lang-switcher { flex: 1; }
    .navbar.open .lang-switcher__btn {
        width: 100%; justify-content: center;
        padding: .6rem .75rem; font-size: .9375rem;
    }
    .navbar.open #btn-landing-theme {
        flex: 0 0 auto; padding: .6rem .85rem; font-size: 1.1rem;
        border: 1px solid var(--border); border-radius: 6px;
    }
    /* Les deux boutons d'action : pleine largeur, taille homogène */
    .navbar.open #btn-login,
    .navbar.open #btn-register {
        width: 100%; padding: .7rem 1rem; font-size: .9375rem;
    }
    /* "Se connecter" (ghost) : bordure pour qu'il lise comme un bouton */
    .navbar.open #btn-login { border: 1px solid var(--border); }
}

@media (max-width: 768px) {
    .hero .container { flex-direction: column; }
    .hero-preview { flex: none; width: 100%; }
    .app-mockup   { transform: none; }
    .steps { flex-direction: column; }
    .step-arrow  { transform: rotate(90deg); }
}

/* ============================================================
   Onboarding
   ============================================================ */
.onboarding-wrap {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; padding: 1.5rem 1rem 4rem;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99,102,241,.1) 0%, transparent 60%);
}
.ob-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 680px; margin-bottom: 2.5rem;
}
.ob-logo  { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.ob-logo svg { color: var(--primary); }
.ob-user  { font-size: .875rem; color: var(--muted); }

/* Progress steps */
.ob-progress {
    display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem;
    width: 100%; max-width: 340px;
}
.ob-step { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1; }
.ob-step-dot {
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 700; color: var(--muted);
    background: var(--surface); transition: var(--transition);
}
.ob-step.active .ob-step-dot  { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); }
.ob-step.done   .ob-step-dot  { border-color: var(--success); color: #fff; background: var(--success); }
.ob-step-back {
    all: unset; box-sizing: border-box; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--success);
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 700; color: #fff;
    background: var(--success); transition: var(--transition);
}
.ob-step-back:hover { border-color: var(--primary); background: var(--primary-glow); color: var(--primary); }
.ob-step-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ob-step span { font-size: .8125rem; color: var(--muted); }
.ob-step.active span { color: var(--text); font-weight: 600; }
.ob-progress-line { flex: 1; height: 2px; background: var(--border); margin: 0 .5rem; margin-bottom: 1.5rem; }

/* Card */
.ob-card {
    width: 100%; max-width: 680px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2.5rem;
    animation: slideUp .3s ease;
}
.ob-card h1   { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; }
.ob-sub       { color: var(--muted); font-size: .9375rem; margin-bottom: 2rem; line-height: 1.6; }
.ob-error     { color: var(--danger); font-size: .875rem; min-height: 1.2rem; margin: .5rem 0; }
.ob-actions   { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }

/* Grille catégories */
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem; margin-bottom: 1.5rem;
}
.cat-loading { color: var(--muted); font-size: .9rem; grid-column: 1/-1; padding: 1rem 0; }
.cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: 1rem .75rem; border-radius: var(--radius);
    border: 2px solid var(--border); background: var(--bg);
    cursor: pointer; transition: var(--transition); position: relative;
    text-align: center;
}
.cat-btn:hover  { border-color: var(--primary); background: var(--primary-glow); }
.cat-btn.selected { border-color: var(--primary); background: var(--primary-glow); }
.cat-dot  { width: 10px; height: 10px; border-radius: 50%; }
.cat-icon { font-size: 1.5rem; }
.cat-name { font-size: .8125rem; font-weight: 600; color: var(--text); }
.cat-check {
    position: absolute; top: .5rem; right: .5rem;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: .7rem; display: none;
    align-items: center; justify-content: center; font-weight: 700;
}
.cat-btn.selected .cat-check { display: flex; }

/* Catégories custom */
.custom-cat-section { margin-top: .5rem; }
.btn-add-cat {
    display: flex; align-items: center; gap: .5rem;
    font-size: .875rem; color: var(--primary); font-weight: 600;
    padding: .5rem 0; background: none; border: none; cursor: pointer;
    transition: opacity var(--transition);
}
.btn-add-cat:hover { opacity: .75; }
.custom-cat-form {
    display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
    margin: .75rem 0; padding: 1rem; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.custom-cat-form input[type="text"] {
    flex: 1; min-width: 140px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .55rem .9rem; color: var(--text); font-size: .9375rem;
}
.custom-cat-form input[type="text"]:focus { outline: none; border-color: var(--primary); }
.custom-cat-form input[type="color"] {
    width: 38px; height: 38px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 2px; cursor: pointer; background: none;
}
.custom-cat-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .75rem; margin-top: .4rem;
    background: var(--bg); border-radius: var(--radius-sm);
    font-size: .875rem; color: var(--text);
}
.remove-custom {
    margin-left: auto; color: var(--muted); font-size: .75rem; padding: .2rem .4rem;
    border-radius: var(--radius-sm); background: none; border: none; cursor: pointer;
}
.remove-custom:hover { color: var(--danger); background: rgba(239,68,68,.1); }
.hidden { display: none !important; }

/* Formulaire période */
.period-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.period-dates  { display: flex; align-items: flex-end; gap: 1rem; }
.currency-select {
    width: 100%;
    padding: .7rem 2.5rem .7rem 1rem;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9375rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.currency-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.currency-select option {
    background: var(--surface);
    color: var(--text);
}
.period-arrow  { color: var(--muted); font-size: 1.25rem; padding-bottom: .75rem; flex-shrink: 0; }
.input-prefix  { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: var(--transition); }
.input-prefix:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.input-prefix span { padding: .7rem 1rem; background: var(--surface-2); color: var(--muted); font-size: .9375rem; border-right: 1px solid var(--border); }
.input-prefix input { flex: 1; border: none; background: var(--bg); padding: .7rem 1rem; color: var(--text); font-size: .9375rem; }
.input-prefix input:focus { outline: none; }

/* Estimé budget */
.budget-estimate {
    margin-top: 1.5rem; padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
    border: 1px solid rgba(99,102,241,.3); border-radius: var(--radius);
    text-align: center;
}
.estimate-label  { font-size: .8125rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.estimate-amount { font-size: 2rem; font-weight: 800; color: var(--text); }
.estimate-detail { font-size: .875rem; color: var(--muted); margin-top: .25rem; }

/* ============================================================
   App shell (post-onboarding)
   ============================================================ */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; height: 60px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.topbar-logo   { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--primary); }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.topbar-user   { font-size: .875rem; color: var(--muted); }
.btn-sm { padding: .35rem .85rem; font-size: .8125rem; }
.badge-free    { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.badge-free:hover { border-color: var(--primary); color: var(--primary); }
.badge-premium { background: linear-gradient(135deg,#6366f1,#a855f7); color:#fff; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
button.badge-premium { cursor: pointer; transition: opacity var(--transition); }
button.badge-premium:hover { opacity: .85; }

/* ── Page success Stripe ────────────────────────────────────── */
.success-wrap {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem; padding: 2rem; text-align: center;
}
.success-icon    { font-size: 3.5rem; }
.success-wrap h1 { font-size: 1.75rem; font-weight: 800; }
.success-wrap p  { color: var(--muted); max-width: 28rem; }
.success-redirect { font-size: .875rem; margin-top: -.25rem; }
.app-main { flex: 1; padding: 1.5rem; max-width: 860px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; }

/* ── Onglets ────────────────────────────────────────────────── */
.app-tabs { display: flex; border-bottom: 2px solid var(--border); gap: 0; }
.tab-btn {
    padding: .55rem 1.25rem; background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    color: var(--muted); font-size: .9375rem; font-weight: 600;
    transition: var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-panel--hidden { display: none; }

/* ── Budget Hero ────────────────────────────────────────────── */
.budget-hero {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem 2rem 1.5rem;
    text-align: center;
}
.budget-hero-loading { color: var(--muted); padding: 2rem; }
.budget-period-label { font-size: .8125rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.budget-label  { font-size: .9375rem; color: var(--muted); margin-bottom: .35rem; }
.budget-amount { font-size: 3.5rem; font-weight: 800; line-height: 1; margin-bottom: 1.25rem; }
.budget-amount.positive { color: var(--success); }
.budget-amount.warning  { color: var(--warning); }
.budget-amount.danger   { color: var(--danger); }
.budget-progress-wrap   { background: var(--bg); border-radius: 999px; height: 8px; margin-bottom: 1rem; overflow: hidden; }
.budget-progress-fill   { height: 100%; border-radius: 999px; transition: width .6s ease; }
.budget-progress-fill.positive { background: linear-gradient(90deg, var(--success), #86efac); }
.budget-progress-fill.warning  { background: linear-gradient(90deg, var(--warning), #fcd34d); }
.budget-progress-fill.danger   { background: linear-gradient(90deg, var(--danger),  #fca5a5); }
.budget-stats  { display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; color: var(--muted); }
.budget-stat-sep { color: var(--border); }
.budget-period-meta { display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.dash-error { color: var(--danger); padding: 1rem; }

/* ── Navigation entre périodes ──────────────────────────────── */
.period-nav {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .625rem 1rem;
}
.btn-period-nav {
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text); border-radius: var(--radius-sm);
    padding: .3rem .9rem; font-size: 1rem; line-height: 1;
    transition: var(--transition);
}
.btn-period-nav:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn-period-nav:disabled { opacity: .35; cursor: not-allowed; }
.period-nav-label {
    font-size: .9375rem; font-weight: 600;
    min-width: 12rem; text-align: center;
}
.period-nav-badge {
    display: inline-block; background: var(--primary); color: #fff;
    font-size: .6875rem; font-weight: 700; padding: .1rem .5rem;
    border-radius: 9999px; margin-left: .4rem;
    text-transform: uppercase; letter-spacing: .04em;
    vertical-align: middle;
}

/* ── Formulaire dépense ─────────────────────────────────────── */
.expense-form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.section-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.expense-form-row {
    display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end;
}
#btn-add-expense { margin-left: auto; }
.expense-amount-wrap { flex: 0 0 140px; }
.expense-form-row select {
    flex: 0 0 180px; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem 2.5rem .7rem 1rem; color: var(--text);
    font-size: .9375rem; cursor: pointer; transition: var(--transition);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center;
}
.expense-form-row select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.expense-form-row input[type="text"] {
    flex: 1; min-width: 140px; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem 1rem; color: var(--text); font-size: .9375rem;
    transition: var(--transition);
}
.expense-form-row input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.expense-form-row input[type="date"] {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .7rem .85rem; color: var(--text);
    font-size: .9375rem; cursor: pointer; transition: var(--transition);
}
.expense-form-row input[type="date"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

/* ── Liste dépenses ─────────────────────────────────────────── */
.expense-list-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.day-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.day-label { font-size: 1rem; font-weight: 700; }
.btn-day-nav {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .4rem .9rem;
    font-size: .875rem; color: var(--muted); cursor: pointer; transition: var(--transition);
}
.btn-day-nav:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn-day-nav:disabled { opacity: .35; cursor: not-allowed; }
.expenses-empty   { color: var(--muted); text-align: center; padding: 2rem; font-size: .9375rem; }
.expenses-loading { color: var(--muted); padding: 1rem; }

/* ── Toolbar & toggle vue ───────────────────────────────────── */
.expense-list-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.view-toggle {
    display: flex; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .2rem; gap: .2rem;
}
.view-toggle-btn {
    padding: .3rem .9rem; border-radius: calc(var(--radius-sm) - 2px);
    font-size: .875rem; font-weight: 600; color: var(--muted); transition: var(--transition);
}
.view-toggle-btn.active { background: var(--surface-2); color: var(--text); }
.view-toggle-btn:hover:not(.active) { color: var(--text); }

/* ── Groupes de dépenses (vue période) ──────────────────────── */
.expense-group { margin-bottom: 1.25rem; }
.expense-group:last-of-type { margin-bottom: 0; }
.expense-group-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: .4rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.expense-group-date  { font-size: .875rem; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.expense-group-total { font-size: .875rem; font-weight: 700; color: var(--text); }
.expense-period-total {
    margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--border);
    text-align: right; font-size: .9375rem; color: var(--muted);
}
.expense-period-total strong { color: var(--text); }

.expense-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.expense-item:last-of-type { border-bottom: none; }
.exp-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.exp-icon { font-size: 1.1rem; flex-shrink: 0; }
.exp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.exp-cat  { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.exp-label { font-size: .9375rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-amount { font-size: 1rem; font-weight: 700; color: var(--danger); flex-shrink: 0; }
.exp-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.exp-btn { background: none; border: none; cursor: pointer; padding: .3rem .4rem; border-radius: var(--radius-sm); font-size: .9rem; opacity: .5; transition: opacity var(--transition), background var(--transition); }
.exp-btn:hover { opacity: 1; background: var(--bg); }
.expense-day-total { text-align: right; padding: .75rem 0 0; font-size: .875rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: .5rem; }

/* ── Vue Période : calendrier + liste du jour ───────────────────
   Desktop : calendrier à gauche, liste à droite (2 colonnes).
   Mobile (≤720px) : empilé (cf. responsive.css).
   L'attribut HTML [hidden] doit gagner sur display:grid → !important. */
.period-view-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.5rem;
    align-items: start;
}
.period-view-wrap[hidden] { display: none !important; }
/* min-width: 0 sur les cellules grid empêche les enfants (longue ligne
   de dépense, montant à plusieurs chiffres) de pousser la colonne et de
   faire déborder tout l'écran. */
.period-view-wrap > * { min-width: 0; }
.period-day-pane { min-width: 0; }
.period-calendar { min-width: 0; }
.period-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}
.period-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.period-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.period-calendar-grid--heads {
    margin-bottom: 6px;
}
.period-calendar-head {
    text-align: center;
    font-size: .7rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 0;
}
.period-calendar-cell {
    /* Reset complet pour neutraliser le rendu natif du <button> (notamment
       padding interne 2-6px et focus halo sur Firefox Android qui faisait
       grandir la cellule au clic et cassait l'aspect-ratio de la grille). */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    transition: background var(--transition), border-color var(--transition);
}
.period-calendar-cell:focus { outline: none; }
.period-calendar-cell:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.period-calendar-cell:hover {
    background: var(--surface);
    border-color: var(--primary);
}
.period-calendar-cell--blank {
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
    pointer-events: none;
}
.period-calendar-cell--today .period-calendar-num {
    font-weight: 700;
    color: var(--primary);
}
.period-calendar-cell--selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary, #fff);
}
.period-calendar-cell--selected .period-calendar-num { color: #fff; }
.period-calendar-num {
    line-height: 1;
}
/* Pastille en bas indiquant les dépenses du jour. L'opacité est passée
   dynamiquement via la variable CSS --cal-dot-opacity (proportionnelle au
   montant du jour vs. le max de la période). */
.period-calendar-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: var(--cal-dot-opacity, 0);
}
.period-calendar-cell--selected .period-calendar-dot {
    background: #fff;
    opacity: 1;
}

/* Pane de droite : liste des dépenses du jour sélectionné */
.period-day-pane {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    min-height: 200px;
}
.period-day-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.period-day-pane-date {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}
.period-day-pane-total {
    font-weight: 700;
    color: var(--danger);
    font-variant-numeric: tabular-nums;
}

/* Responsive dashboard */
@media (max-width: 600px) {
    .expense-form-row { flex-direction: column; }
    .expense-amount-wrap, .expense-form-row select { flex: 1; }
    .budget-amount { font-size: 2.5rem; }
}

/* ── Graphiques ─────────────────────────────────────────────── */
.charts-section { margin-top: 2rem; }

.charts-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.chart-title {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 1.25rem;
}

.chart-wrap {
    position: relative;
    max-width: 220px;
    margin: 0 auto 1.25rem;
}

.chart-wrap--bar {
    max-width: 100%;
    height: 200px;
    margin-bottom: 0;
}

/* Légende donut */
.chart-legend { display: flex; flex-direction: column; gap: .5rem; }
.legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-name  { flex: 1; color: var(--text); }
.legend-amount { font-weight: 600; color: var(--text); }
.legend-pct   { font-size: .75rem; color: var(--muted); min-width: 2.5rem; text-align: right; }
.chart-empty  { color: var(--muted); font-size: .875rem; text-align: center; padding: 1rem 0; margin: 0; }

/* Section verrouillée (plan gratuit) */
.charts-locked {
    margin-top: 2rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
}
.charts-locked-inner {
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.charts-locked-icon { font-size: 2.5rem; filter: grayscale(1); opacity: .4; }
.charts-locked h3   { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0; }
.charts-locked p    { font-size: .9rem; color: var(--muted); margin: 0; }

/* Responsive graphiques */
@media (max-width: 768px) {
    .charts-grid { grid-template-columns: 1fr; }
    .chart-card--wide { order: -1; }
    .chart-wrap { max-width: 180px; }
    .chart-wrap--bar { height: 160px; }
}

/* ══════════════════════════════════════════════════════════════
   USER DROPDOWN MENU
══════════════════════════════════════════════════════════════ */
.topbar-user-wrap {
    position: relative;
}
.topbar-user-btn {
    background: none;
    border: none;
    color: var(--text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    padding: .35rem .5rem;
    border-radius: 6px;
    transition: background .15s;
    white-space: nowrap;
}
.topbar-user-btn:hover { background: var(--surface-hover, rgba(255,255,255,.07)); }
.user-menu-caret { opacity: .6; font-size: .75rem; }
.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 200;
    overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .65rem 1rem;
    font-size: .875rem;
    color: var(--text);
    cursor: pointer;
    transition: background .12s;
}
.user-dropdown-item:hover { background: var(--surface-hover, rgba(255,255,255,.07)); }
.user-dropdown-divider {
    border-top: 1px solid var(--border);
    margin: .25rem 0;
}
.user-dropdown-item--danger { color: var(--danger, #ef4444); }
.user-dropdown-item--locked { color: var(--muted); cursor: default; opacity: .65; }
.user-dropdown-offline-banner {
    padding: .4rem .75rem;
    font-size: .72rem;
    color: #f59e0b;
    background: rgba(245,158,11,.1);
    border-bottom: 1px solid rgba(245,158,11,.2);
}
.user-dropdown-item--disabled {
    opacity: .4;
    cursor: not-allowed;
}
.user-dropdown-item--disabled:hover { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   SETTINGS MODALS
══════════════════════════════════════════════════════════════ */
.modal-box--wide { max-width: 560px; }

/* Modales "Mes catégories" / "Mes périodes" : remplissent l'espace
   vertical disponible plutôt que de coller à la hauteur de leur
   contenu. La liste interne devient scrollable, ce qui permet de
   voir beaucoup plus d'éléments sans devoir scroller la modale
   entière. Cohérent avec l'app Android où ces écrans occupent
   tout l'espace utile. */
#modal-categories .modal-box,
#modal-periods .modal-box {
    min-height: min(80vh, 760px);
    display: flex; flex-direction: column;
}
/* Le titre h2 reste fixe en haut, le contenu scrolle. */
#modal-categories .settings-section,
#modal-periods .settings-section {
    flex: 1 1 auto;
    min-height: 0;       /* indispensable pour que flex:1 permette le scroll */
}
/* La liste des catégories scrolle de manière autonome dans son section. */
#modal-categories #cat-settings-list {
    overflow-y: auto;
    max-height: calc(80vh - 200px);
}

/* Bandeau période expirée */
.period-expired-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    font-size: .875rem;
}
.period-expired-msg { color: #fbbf24; flex: 1; }

.settings-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }

/* ── Danger zone (suppression de compte) ─────────────────── */
.settings-danger-zone { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--danger, #ef4444); }
.settings-danger-zone h4 { color: var(--danger, #ef4444); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.settings-danger-zone > p { font-size: .875rem; color: var(--muted); margin-bottom: .75rem; }
.settings-danger-zone #delete-account-confirm { margin-top: 1rem; }
.settings-danger-zone #delete-account-confirm p { font-size: .875rem; color: var(--muted); margin-bottom: .4rem; }
#delete-confirm-email { width: 100%; margin-bottom: .25rem; }
.delete-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.settings-danger-zone .btn-danger { background: #ef4444; color: #fff; border: none; }
.settings-danger-zone .btn-danger:hover:not(:disabled) { background: #dc2626; }
.settings-danger-zone .btn-danger:disabled { opacity: .5; cursor: not-allowed; }

.settings-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, var(--muted));
    margin-bottom: .9rem;
}

/* Period history */
.settings-loading { color: var(--muted); font-size: .875rem; }
.settings-empty   { color: var(--muted); font-size: .875rem; margin: 0; }
.period-history-list { display: flex; flex-direction: column; gap: .5rem; }
.period-history-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .75rem; border-radius: var(--radius);
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    font-size: .875rem;
}
.period-history-info { flex: 1; min-width: 0; }
.period-history-info strong { font-weight: 600; }
.period-history-dates { color: var(--muted); font-size: .8rem; display: block; margin-top: .1rem; }
.period-history-budget { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; }
/* Métadonnées droites de la ligne période : budget + badge statut. */
.period-history-meta {
    display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
    flex-shrink: 0;
}
/* Badge statut période (current / upcoming / ended) — même logique que
   l'app Flutter mobile : indigo / orange / gris. */
.period-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.6;
}
.period-badge--current  { background: rgba(99, 102, 241, .18); color: var(--primary); }
.period-badge--upcoming { background: rgba(249, 115, 22, .18); color: #f97316; }
.period-badge--ended    { background: rgba(148, 163, 184, .15); color: var(--muted); }
/* Surligne discrètement la période EN COURS dans la liste. */
.period-history-row--current { border-color: var(--primary); }
/* Boutons d'action sur chaque ligne période (✏️ / 🗑). */
.period-history-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.period-action {
    background: transparent; border: 0; padding: .35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem; line-height: 1;
    opacity: .65;
    transition: opacity var(--transition), background-color var(--transition);
}
.period-action:hover { opacity: 1; background: rgba(255,255,255,.06); }

/* Profile form grids */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr .7fr .9fr;
    gap: .75rem;
}
@media (max-width: 520px) {
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

/* Categories list */
.cat-settings-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: .75rem;
}
.cat-settings-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    background: var(--surface-alt, rgba(255,255,255,.04));
}
.cat-settings-icon { font-size: 1.1rem; flex-shrink: 0; }
.cat-settings-name { flex: 1; font-size: .9rem; }
.cat-settings-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.cat-edit-icon {
    flex-shrink: 0; font-size: 1rem; padding: .25rem;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cat-premium-lock {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--muted);
    margin-top: .5rem;
}
.cat-premium-lock .cat-lock-icon { font-size: 1rem; flex-shrink: 0; }
.cat-premium-lock span:nth-child(2) { flex: 1; }
.export-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.export-select { flex: 1; min-width: 180px; padding: .45rem .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; }
.export-select:disabled { opacity: .45; cursor: not-allowed; }
.export-locked { display: flex; gap: .75rem; align-items: center; opacity: .55; flex-wrap: wrap; }
.export-locked-note { margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; }
.cat-add-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.cat-add-row input[type="text"] { flex: 1; }
.cat-add-row input[type="color"] {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.cat-edit-color {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: 4px;
    font-size: .85rem;
    opacity: .7;
    transition: opacity .15s, background .15s;
}
.btn-icon:hover { opacity: 1; background: var(--surface-hover, rgba(255,255,255,.08)); }
.btn-icon--danger:hover { color: var(--danger, #ef4444); }

/* Reassign UI (suppression catégorie avec dépenses) */
.reassign-ui {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .5rem 0;
}
.reassign-ui--active {
    background: var(--surface-2, #1e1e2e);
    border: 2px solid var(--primary);
    border-radius: .75rem;
    padding: .75rem;
    animation: reassign-pulse 0.4s ease;
}
@keyframes reassign-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
    100% { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
.reassign-msg { font-size: .85rem; color: var(--text); margin: 0; }
.reassign-select {
    width: 100%;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .75rem center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .55rem 2rem .55rem .75rem;
    color: var(--text);
    font-size: .875rem;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
}
.reassign-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.reassign-new-cat {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.reassign-new-cat input[type="color"] {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.reassign-new-cat input[type="text"] {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    color: var(--text);
    font-size: .875rem;
    font-family: inherit;
}
.reassign-new-cat input[type="text"]:focus { outline: none; border-color: var(--primary); }
.reassign-actions { display: flex; gap: .5rem; }

/* Period form */
.period-form-row {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .75rem;
}
.period-form-row .period-arrow {
    padding-bottom: .6rem;
    color: var(--muted);
    flex-shrink: 0;
}
.period-form-row .form-group { flex: 1; margin-bottom: 0; }
.period-warning {
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 8px;
    padding: .85rem 1rem;
    font-size: .875rem;
    color: var(--text);
    margin-top: .75rem;
}
.btn-danger {
    background: var(--danger, #ef4444);
    color: #fff;
    border: none;
}
.btn-danger:hover { opacity: .85; }

/* Subscription modal */
.sub-plan-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .95rem;
    margin-bottom: .25rem;
}
.sub-currency-badge { font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); letter-spacing: .05em; }
.sub-dates {
    display: flex;
    gap: 1.5rem;
    margin: .9rem 0 1.25rem;
    padding: .85rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.sub-date-item { display: flex; flex-direction: column; gap: .2rem; }
.sub-date-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sub-date-value { font-size: .95rem; font-weight: 600; color: var(--text); }
.sub-cancel-notice { margin: .75rem 0 0; padding: .6rem .85rem; background: rgba(239,68,68,.1); border-left: 3px solid #f87171; border-radius: 6px; font-size: .85rem; color: #f87171; }

/* ══════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
══════════════════════════════════════════════════════════════ */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding: .75rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.3);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.pwa-install-banner--visible {
    transform: translateY(0);
}
.pwa-install-inner {
    display: flex;
    align-items: center;
    gap: .85rem;
    max-width: 600px;
    margin: 0 auto;
}
.pwa-install-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}
.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.pwa-install-text strong {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}
.pwa-install-text span {
    font-size: .8rem;
    color: var(--muted);
}
.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.btn-pwa-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: 6px;
    line-height: 1;
    transition: color .15s, background .15s;
}
.btn-pwa-dismiss:hover {
    color: var(--text);
    background: var(--surface-hover, rgba(255,255,255,.07));
}

/* ── Offline / Sync indicators ──────────────────────────────── */
.offline-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #ef4444;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    letter-spacing: .02em;
    animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}
.pending-badge {
    display: inline-flex;
    align-items: center;
    background: #f59e0b;
    color: #000;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    cursor: default;
}

/* ── Sync toast ─────────────────────────────────────────────── */
.sync-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 1.5rem));
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    color: var(--text, #f1f5f9);
    font-size: .875rem;
    font-weight: 500;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 300;
    transition: transform .25s ease;
    white-space: nowrap;
}
.sync-toast--visible {
    transform: translateX(-50%) translateY(0);
}

/* ── Conflict modal ─────────────────────────────────────────── */
.conflict-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 250;
    padding: 1.5rem;
}
.conflict-modal {
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 16px;
    padding: 1.75rem;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 25px 50px rgba(0,0,0,.5);
}
.conflict-modal h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #fbbf24;
}
.conflict-desc {
    font-size: .875rem;
    color: var(--muted, #94a3b8);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.conflict-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.conflict-col {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 10px;
    padding: .875rem;
}
.conflict-col-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #94a3b8);
    margin-bottom: .75rem;
}
.conflict-field {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .5rem;
}
.conflict-field span {
    font-size: .72rem;
    color: var(--muted, #94a3b8);
}
.conflict-field strong {
    font-size: .9rem;
    color: var(--text, #f1f5f9);
    font-weight: 500;
}
.conflict-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.btn-ghost {
    background: none;
    border: 1px solid transparent;
    color: var(--muted, #94a3b8);
    padding: .6rem 1rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.btn-ghost:hover {
    color: var(--text, #f1f5f9);
    background: rgba(255,255,255,.06);
}
@media (max-width: 480px) {
    .conflict-cols { grid-template-columns: 1fr; }
    .conflict-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN
   ══════════════════════════════════════════════════════════════ */
.badge-admin {
    background: #ef4444; color: #fff;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}

/* ── Admin tabs ──────────────────────────────────────────────── */
.admin-tabs {
    display: flex; border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}
.admin-tab {
    padding: .7rem 1.4rem; font-size: .9rem; font-weight: 500;
    color: var(--muted); background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.admin-tab-panel.hidden { display: none; }

.admin-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px); padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}
.admin-section-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem;
    color: var(--text); padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.admin-count { font-size: .85rem; font-weight: 400; color: var(--muted); }
.admin-loading { color: var(--muted); padding: .5rem 0; }

/* Form row: grid for reliable horizontal layout */
.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(130px, 180px) auto;
    gap: .75rem;
    align-items: end;
}
.admin-form-row .form-group { margin-bottom: 0; }
.admin-form-row .form-group--btn { display: flex; align-items: flex-end; }
@media (max-width: 640px) {
    .admin-form-row { grid-template-columns: 1fr 1fr; }
    .admin-form-row .form-group--btn { grid-column: span 2; }
}

/* Table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%; border-collapse: collapse; font-size: .8rem; min-width: 580px;
}
.admin-table th {
    text-align: left; padding: .5rem .7rem;
    border-bottom: 2px solid var(--border);
    color: var(--muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.admin-table td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,.03); }
.admin-table .col-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table .col-date { white-space: nowrap; color: var(--muted); font-size: .78rem; }
.admin-table .col-actions { white-space: nowrap; }
.btn-xs { padding: .2rem .45rem; font-size: .72rem; line-height: 1.4; }

.admin-plan-badge {
    display: inline-block; padding: .2rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    background: rgba(148,163,184,.15); color: var(--muted);
}
.admin-plan-badge--premium {
    background: linear-gradient(135deg,rgba(99,102,241,.25),rgba(168,85,247,.25));
    color: #a78bfa; border: 1px solid rgba(99,102,241,.3);
}
.admin-actions { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: nowrap; }

/* Section header avec recherche */
.admin-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-section-header .admin-section-title { margin-bottom: 0; }
.admin-search-input {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); padding: .4rem .75rem; font-size: .875rem;
    width: 220px; outline: none; transition: border-color .15s;
}
.admin-search-input:focus { border-color: var(--primary); }

/* Badge statut abonnement Stripe */
.admin-sub-badge {
    display: inline-block; padding: .15rem .5rem; border-radius: 99px;
    font-size: .75rem; font-weight: 600;
    background: rgba(255,255,255,.06); color: var(--muted);
}
.admin-sub-badge.sub-active   { background: rgba(34,197,94,.15);  color: #22c55e; }
.admin-sub-badge.sub-canceled { background: rgba(239,68,68,.12);  color: #f87171; }
.admin-sub-badge.sub-pastdue  { background: rgba(245,158,11,.15); color: #fbbf24; }
.admin-sub-end { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }

/* Bouton warning (force logout) */
.btn-warning {
    background: rgba(245,158,11,.15); color: #fbbf24;
    border: 1px solid rgba(245,158,11,.3);
    border-radius: var(--radius); padding: .3rem .75rem;
    font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-warning:hover { background: rgba(245,158,11,.28); }
.btn-warning:disabled { opacity: .5; cursor: default; }

/* Modal magic link */
.admin-magic-link-box { display: flex; gap: .5rem; align-items: center; }
.admin-magic-link-box .form-input { flex: 1; min-width: 0; }

.btn-danger {
    background: rgba(239,68,68,.15); color: #f87171;
    border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--radius); padding: .3rem .75rem;
    font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-danger:hover { background: rgba(239,68,68,.28); }

/* ── Admin login ─────────────────────────────────────────────── */
.admin-login-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 60px);
}
.admin-login-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px); padding: 2.5rem;
    width: 100%; max-width: 400px;
}
.admin-login-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.admin-login-sub   { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
.admin-login-sent  { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: var(--radius); background: rgba(34,197,94,.1); color: #22c55e; margin-bottom: 1rem; }
.admin-login-sent-icon { font-size: 1.4rem; }
.btn-full { width: 100%; margin-top: .75rem; }

/* ── Paywall overlay ─────────────────────────────────────────── */
.paywall-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 11, 20, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: paywall-in .25s ease;
}
.paywall-overlay--block { background: rgba(10, 11, 20, .92); }
@keyframes paywall-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.paywall-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px); padding: 2.5rem 2rem;
    width: 100%; max-width: 440px; text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    animation: paywall-slide .3s cubic-bezier(.34,1.3,.64,1);
}
@keyframes paywall-slide {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.paywall-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.paywall-title {
    font-size: 1.25rem; font-weight: 700; margin-bottom: .6rem; color: var(--text);
}
.paywall-sub {
    color: var(--muted); font-size: .9rem; line-height: 1.5; margin-bottom: 1.5rem;
}
.paywall-features {
    list-style: none; padding: 0; margin: 0 0 1.75rem;
    display: flex; flex-direction: column; gap: .4rem; text-align: left;
}
.paywall-features li {
    font-size: .875rem; color: var(--text); padding-left: 1.4rem; position: relative;
}
.paywall-features li::before {
    content: '✓'; position: absolute; left: 0;
    color: var(--primary); font-weight: 700;
}
.paywall-btn { width: 100%; font-size: 1rem; padding: .85rem 1.5rem; }
.paywall-dismiss {
    display: block; margin-top: 1rem; font-size: .8rem; color: var(--muted);
    background: none; border: none; cursor: pointer; text-decoration: underline;
}
.paywall-dismiss:hover { color: var(--text); }
.paywall-delete-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.paywall-delete-link {
    background: none; border: none; cursor: pointer; font-size: .8rem;
    color: var(--danger, #ef4444); text-decoration: underline; padding: 0;
}
.paywall-delete-link:hover { color: #dc2626; }
.paywall-delete-hint { font-size: .8rem; color: var(--muted); margin: .5rem 0 .4rem; }
#paywall-delete-email { width: 100%; margin-bottom: .25rem; }
.paywall-btn-danger {
    background: #ef4444; color: #fff; border: none;
    padding: .45rem .9rem; border-radius: var(--radius, 8px); cursor: pointer; font-size: .85rem;
}
.paywall-btn-danger:hover:not(:disabled) { background: #dc2626; }
.paywall-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cookie Consent Banner ──────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    transform: translateY(100%);
    transition: transform .3s ease;
    padding: 1rem 1.5rem;
}
.cookie-banner--visible { transform: translateY(0); }
.cookie-banner-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner-text {
    flex: 1;
    font-size: .875rem;
    color: var(--text);
    margin: 0;
    min-width: 200px;
}
.cookie-banner-link {
    color: var(--primary);
    text-decoration: underline;
    white-space: nowrap;
}
.cookie-banner-actions {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

/* Thème Pastel : bordure noire */
[data-theme="pastel"] .cookie-banner,
body[data-theme="pastel"] .cookie-banner {
    border-top: 2px solid #000;
    box-shadow: 0 -4px 0 #000;
}

/* Thème Nature : glassmorphism */
[data-theme="nature"] .cookie-banner,
body[data-theme="nature"] .cookie-banner {
    background: rgba(255,252,248,.95);
    backdrop-filter: blur(12px);
}

@media (max-width: 600px) {
    .cookie-banner-inner { flex-direction: column; align-items: stretch; }
    .cookie-banner-actions { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   Banner d'installation PWA
   ════════════════════════════════════════════════════════════
   Affiché aux utilisateurs connectés qui n'ont pas encore installé
   l'app. Piloté par pwa-install-prompt.js. Style cohérent avec
   le banner cookies au-dessus. Position : bas centré, max 460 px.
   ════════════════════════════════════════════════════════════ */
.pwa-prompt {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 460px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
    padding: 1rem 1.1rem;
    padding-right: 2.5rem;          /* laisse la place au ✕ en absolute */
    z-index: 1080;
    animation: pwa-prompt-up .35s ease;
    color: var(--text);
    /* Évite tout débordement vertical si le contenu est long
       (texte iOS multi-lignes + 3 boutons). */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
@keyframes pwa-prompt-up {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pwa-prompt[hidden] { display: none !important; }
.pwa-prompt-body {
    display: flex; align-items: flex-start; gap: .75rem;
}
.pwa-prompt-icon {
    font-size: 1.8rem; line-height: 1;
    flex-shrink: 0;
}
.pwa-prompt-text {
    flex: 1; min-width: 0;
    font-size: .85rem; line-height: 1.45;
    color: var(--muted);
}
.pwa-prompt-text strong {
    display: block;
    color: var(--text);
    font-size: .95rem;
    margin-bottom: .15rem;
}
.pwa-prompt-close {
    position: absolute;
    top: .5rem; right: .6rem;
    background: transparent; border: 0;
    color: var(--muted); font-size: 1.1rem;
    cursor: pointer;
    padding: .15rem .4rem;
    border-radius: 4px;
    line-height: 1;
}
.pwa-prompt-close:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.pwa-prompt-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .85rem; justify-content: flex-end;
}
.pwa-prompt-never {
    background: transparent;
    color: var(--muted);
    text-decoration: none;
}
.pwa-prompt-never:hover { color: var(--text); }
/* Sur la PWA mobile, le banner ne doit pas chevaucher la tab bar bas.
   On le pousse plus haut quand le viewport est étroit. La hauteur max
   tient aussi compte de la tab bar et de la safe-area. */
@media (max-width: 720px) {
    .pwa-prompt {
        bottom: calc(var(--mob-tabbar-height, 70px) + 1rem + env(safe-area-inset-bottom));
        left: .75rem; right: .75rem;
        max-height: calc(100vh - var(--mob-tabbar-height, 70px) - 3rem - env(safe-area-inset-bottom));
    }
    /* Boutons plus compacts et stack vertical si nécessaire. */
    .pwa-prompt-actions {
        gap: .35rem;
    }
}

/* ════════════════════════════════════════════════════════════
   Responsive app mobile — corrige les débordements horizontaux
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Empêche tout débordement horizontal global */
    html, body { overflow-x: hidden; }

    /* Topbar : resserrer, autoriser le retour à la ligne */
    .app-topbar   { padding: 0 .85rem; height: auto; min-height: 56px; flex-wrap: wrap; gap: .5rem; }
    .topbar-actions { gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
    .topbar-user  { font-size: .8rem; }

    /* Conteneur principal : padding réduit */
    .app-main     { padding: 1rem .85rem; gap: 1rem; }

    /* Formulaire dépense : tout en colonne, pleine largeur */
    .expense-form-row            { flex-direction: column; align-items: stretch; gap: .75rem; }
    .expense-amount-wrap         { flex: 1 1 auto; }
    .expense-form-row select,
    .expense-form-row input[type="text"],
    .expense-form-row input[type="date"] { flex: 1 1 auto; width: 100%; }
    #btn-add-expense             { margin-left: 0; width: 100%; }

    /* Formulaire période : dates Début → Fin empilées */
    .period-dates { flex-direction: column; align-items: stretch; gap: 1rem; }
    .period-dates .period-arrow,
    .period-dates > span { display: none; }

    /* Inputs date / number : ne jamais dépasser la largeur dispo */
    input[type="date"], input[type="number"], select, .currency-select { max-width: 100%; }

    /* Ligne d'ajout de catégorie : empilée */
    .cat-add-row { flex-wrap: wrap; }
    .cat-add-row input[type="text"] { flex: 1 1 100%; order: 2; }

    /* Boutons de formulaire (Enregistrer / Annuler) : pleine largeur empilés */
    .form-actions,
    .settings-form-actions,
    .delete-actions { flex-direction: column; align-items: stretch; gap: .6rem; }
    .form-actions .btn,
    .settings-form-actions .btn,
    .delete-actions .btn { width: 100%; }

    /* Modals : aligné en haut avec un espace, contenu défilable */
    .modal { padding: 1.25rem .75rem; align-items: flex-start; }
    .modal-box { padding: 1.75rem 1.25rem; max-width: 100%; max-height: calc(100vh - 2.5rem); }
    /* Boutons des modals : empilés en pleine largeur */
    .modal-actions { flex-direction: column; align-items: stretch; }
    .modal-actions .btn { width: 100%; }

    /* Sécurité : aucun bloc ne dépasse le viewport */
    .expense-form-section,
    .expense-list-section,
    .budget-hero,
    .settings-section,
    .period-nav { max-width: 100%; }
}