body {
    background: #f7f7f5;
    padding-bottom: 24px;
}

/* "Enregistrer" placed in the top action row (next to "← Retour", right-aligned)
   so Maman voit toujours le bouton sans faire défiler toute la grille. */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.action-row .uk-button-primary {
    font-size: 1.1rem;
}
/* Page header — a big, high-contrast title so Maman always knows which screen
   she is on, with a short reassuring line underneath. Used on every page. */
.page-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2b2b2b;
    margin: 0 0 2px;
}
.page-subtitle {
    font-size: 1.05rem;
    color: #6b6b6b;
    margin: 0 0 20px;
}
.page-subtitle:empty {
    display: none;
}

.tile {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.tile:active {
    transform: scale(0.96);
}
/* Sélection (B+C) : la tuile choisie se soulève + pastille coche,
   les autres s'estompent pour faire ressortir le choix. */
.tile.selected,
.tile.added {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.tile.selected::after,
.tile.added::after {
    content: "\2713";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#simpleTiles:has(.tile.selected) .tile:not(.selected),
#ticketTiles:has(.tile.added) .tile:not(.added) {
    opacity: 0.4;
}
/* Bouton « i » (bas-gauche) : ouvre les exemples de la catégorie. Miroir
   visuel de la pastille ✓, mais toujours visible et cliquable. */
/* Ligne / carte « à payer » : une facture manuelle échue à confirmer. Fond
   ambré discret + liseré à gauche pour la distinguer du réel déjà dépensé. */
.a-payer {
    background: #fff7e6;
    border-left: 4px solid #faa05a;
    padding: 6px 8px;
    border-radius: 4px;
}

/* Ligne « annulée » : présente (le frais fixe la régénère) mais neutralisée. */
.cancelled-line {
    opacity: 0.6;
}

/* Panneau d'édition (crayon) d'une ligne de frais fixe. */
.ff-edit {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 8px 10px;
    margin: -2px 8px 10px;
}

.tile-info {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.proportional-bar {
    display: flex;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
}
.proportional-bar .segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    position: relative;
}
.proportional-bar .handle {
    width: 28px;
    background: rgba(0,0,0,0.2);
    cursor: ew-resize;
    touch-action: none;
}

/* Compact framed table for Statistiques / Budget breakdowns */
.stat-table {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.stat-row:last-child { border-bottom: none; }
.stat-row.total { font-weight: 600; border-top: 1px solid #e5e5e5; background: #fafafa; }
.stat-row .cat { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Pastille « i » inline (Totaux / Budget) — pendant du .tile-info des tuiles */
.cat-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ececec;
    color: #555;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 12px;
    font-weight: 700;
    flex: none;
    cursor: pointer;
}
.stat-row .cat .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.stat-row .amount { white-space: nowrap; }
.stat-bar {
    height: 6px;
    border-radius: 3px;
    background: #f0f0f0;
    margin: -2px 12px 7px;
    overflow: hidden;
}
.stat-bar > span { display: block; height: 100%; }

/* ---------- Espace « Ma santé » ---------- */
/* Hero vert : le nombre-moteur « encore à récupérer des PC » + la barre de
   progression (plein = déjà récupéré, hachuré = encore à venir). */
.sante-hero {
    background: #eaf6f0;
    border: 1px solid #b9e0cd;
    border-radius: 18px;
    padding: 18px 16px;
    margin-bottom: 14px;
}
.sante-hero-label { font-size: 1.05rem; color: #1f5c46; }
.sante-hero-amount {
    font-size: 2.6rem;
    font-weight: 800;
    color: #1f7a5a;
    line-height: 1.1;
    margin: 2px 0 14px;
}
.sante-progress {
    position: relative;
    height: 24px;
    border-radius: 8px;
    overflow: hidden;
    background: #dfe9e3;
}
.sante-progress .done { position: absolute; left: 0; top: 0; bottom: 0; background: #2f9e73; }
.sante-progress .todo {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, #a8dcc4, #a8dcc4 5px, #8fd0b3 5px, #8fd0b3 10px);
}
.sante-progress-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #5c7a6d;
    margin-top: 3px;
}
.sante-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: #3d6b56; margin-top: 6px; }
.sante-legend .swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Payé de ma poche : vert sous le plafond PC, orange au-dessus (zone à risque). */
.sante-paid {
    background: #fff;
    border: 1px solid #eee2cd;
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sante-paid.over { background: #fdf1e3; border-color: #f0c894; }
.sante-paid-label { font-size: 0.95rem; color: #6b6252; }
.sante-paid-amount { font-size: 1.5rem; font-weight: 800; color: #3a3428; }
.sante-paid-note { margin-left: auto; text-align: right; font-size: 0.85rem; color: #1f7a5a; max-width: 150px; line-height: 1.35; }
.sante-paid.over .sante-paid-note { color: #b05e12; }

.sante-nudge {
    background: #fff4e0;
    border: 1px solid #f0dcb4;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: #7a5a1e;
    line-height: 1.4;
}

/* Les deux gros gestes. */
.sante-btn {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border-radius: 14px;
    margin-bottom: 9px;
    text-decoration: none;
}
.sante-btn:hover { text-decoration: none; }
.sante-btn-out { color: #fff; background: #c0392b; }
.sante-btn-out:hover { color: #fff; }
.sante-btn-in { color: #1f7a5a; background: #eaf6f0; border: 1px solid #b9e0cd; }
.sante-btn-in:hover { color: #1f7a5a; }

/* Liste « Déjà noté » : sorties rouges (−), retours verts (+) avec pastille
   de source PC/CSS — le repère anti-doublon de Maman. */
.sante-list { background: #fff; border-radius: 16px; border: 1px solid #eee2cd; overflow: hidden; }
.sante-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f2ead9; }
.sante-row:last-child { border-bottom: none; }
.sante-row.retour { background: #f4faf6; }
.sante-row .who { flex: 1; min-width: 0; }
.sante-row .label { font-size: 1rem; font-weight: 600; }
.sante-row .when { font-size: 0.85rem; color: #9a8f79; }
.sante-row .amount { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.sante-row .amount.neg { color: #c0392b; }
.sante-row .amount.pos { color: #1f7a5a; }
.sante-src {
    font-size: 0.75rem;
    padding: 1px 7px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
}
.sante-src.pc { background: #dcefe4; color: #1f7a5a; }
.sante-src.css { background: #e7eef2; color: #37637d; }

/* Saisie santé : grand champ montant + boutons de source CSS/PC. */
.sante-amount-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: #fff;
    border: 2px solid #2f9e73;
    border-radius: 14px;
    padding: 10px 16px;
}
.sante-amount-wrap .chf { font-size: 1rem; color: #9a8f79; }
.sante-amount-wrap input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 2rem;
    font-weight: 800;
    color: #1f7a5a;
    background: transparent;
}
.sante-source-btn {
    width: calc(50% - 4px);
    padding: 14px 0;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid #ddd;
    background: #fff;
    color: #555;
}
.sante-source-btn.selected { border-color: #2f9e73; background: #eaf6f0; color: #1f7a5a; }
.sante-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    background: #f1ede4;
    color: #6b6252;
    font-size: 0.9rem;
    margin: 4px 4px 0 0;
    cursor: pointer;
}
.sante-success { text-align: center; }
.sante-success .emoji { font-size: 2.8rem; margin-top: 10px; }
.sante-success .headline { font-size: 1.4rem; font-weight: 800; color: #1f7a5a; margin: 6px 0 2px; }
.sante-cagnotte {
    background: #fff;
    border-radius: 18px;
    padding: 18px 16px;
    margin: 18px 0;
    border: 1px solid #eee2cd;
}
.sante-cagnotte .old { font-size: 0.95rem; color: #9a8f79; text-decoration: line-through; }
.sante-cagnotte .new { font-size: 2.4rem; font-weight: 800; color: #1f7a5a; line-height: 1.1; }

/* ---------- Budget « enveloppes » (page budget.html) ---------- */
/* Hero vert : « il te reste ce mois », les rentes en appui discret dessous. */
.budget-hero {
    background: linear-gradient(180deg, #eef7ee, #e2f1e2);
    border: 1px solid #cfe6cf;
    border-radius: 18px;
    padding: 20px 18px 16px;
    text-align: center;
    margin-bottom: 20px;
}
.budget-hero .hero-amount { font-size: 2.6rem; font-weight: 800; color: #2f7d32; line-height: 1.1; }
.budget-hero .hero-amount.negative { color: #c0392b; }
.budget-hero .hero-label { font-size: 1.05rem; color: #4a6a4a; margin-top: 4px; font-weight: 600; }
.budget-splitbar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; margin: 16px 0 9px; }
.budget-splitbar > span { display: block; height: 100%; }
.budget-splitbar .fixe { background: #b98b56; }
.budget-splitbar .env { background: #6aa9d8; }
.budget-splitbar .reste { background: #7cc47f; }
.budget-legend { display: flex; justify-content: center; gap: 16px; font-size: 0.9rem; color: #5c6b5c; flex-wrap: wrap; }
.budget-legend b { color: #333; }
.budget-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.budget-legend .dot.fixe { background: #b98b56; }
.budget-legend .dot.env { background: #6aa9d8; }
.budget-source { font-size: 0.95rem; color: #6b8a6d; margin-top: 12px; }
.budget-source b { color: #2f5c31; }

.env-section-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 0.85rem;
    color: #9a9a9a;
    font-weight: 700;
    margin: 22px 4px 10px;
}

/* Carte enveloppe : nom + solde en gros, une barre de remplissage, le détail
   du mois en pied de carte. Le « rabat » évoque une enveloppe papier. */
.envelope-card {
    position: relative;
    background: #fff;
    border: 1px solid #ece7db;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.envelope-card:hover,
.envelope-card:focus-visible {
    background: #fbf9f2;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}
.envelope-card:active {
    transform: scale(0.98);
}
.envelope-card .flap {
    position: absolute;
    top: 0;
    right: 18px;
    width: 30px;
    height: 18px;
    background: #f3eee0;
    border: 1px solid #ece7db;
    border-top: 0;
    border-radius: 0 0 9px 9px;
}
.envelope-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-right: 22px; }
.envelope-name { display: flex; align-items: center; gap: 7px; font-size: 1.15rem; font-weight: 700; color: #2b2b2b; }
/* Chevron « creuser » : indique que la carte s'ouvre sur le détail (Historique). */
.envelope-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: #c3bca8;
    pointer-events: none;
}
.envelope-name .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.envelope-balance { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.envelope-balance.negative { color: #c0392b; }
.envelope-balance small { color: #a0a0a0; font-weight: 600; font-size: 0.8rem; }
.envelope-fill { height: 9px; border-radius: 6px; background: #efe9dc; overflow: hidden; margin: 10px 0 8px; }
.envelope-fill > span { display: block; height: 100%; border-radius: 6px; background: #6aa9d8; }
.envelope-fill.low > span { background: #e0a13a; }
.envelope-foot { font-size: 0.9rem; color: #8a8a8a; }
.envelope-foot b { color: #5c5c5c; }

/* Encadré santé « un peu à part » : reprend les couleurs de la maquette,
   distinct des classes .sante-* (celles-ci habillent la page Ma santé). */
.budget-health { background: #fdf2f5; border: 1px solid #f4d3dd; border-radius: 14px; padding: 16px 18px; }
.budget-health-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.budget-health-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 1.05rem; }
.budget-health-row.green { color: #2e9e6b; }
.budget-health-row.total { border-top: 1px solid #f0cdd8; margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 1.15rem; }
.budget-health-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-health-bar { height: 9px; border-radius: 6px; background: #f2dbe2; overflow: hidden; margin-top: 10px; }
.budget-health-bar > span { display: block; height: 100%; background: #d0554f; }
.budget-health-foot { margin-top: 9px; }