/* Mobile first : les styles de base visent les petits écrans, les media queries élargissent. */
/* Couleurs, rayon et police : variables définies par la marque (brands/<marque>/brand.yaml, voir base.html.twig) */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 16px; /* 16px minimum : évite le zoom automatique d'iOS sur les champs */
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: var(--color-primary);
}

/* En-tête ancré en haut de l'écran : reste visible quand on fait défiler (relevé d'opérations…).
   Au-dessus des menus déroulants du contenu (z-index 10). */
.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* Ancres et focus clavier : ne pas finir sous l'en-tête ancré */
html {
    scroll-padding-top: 88px;
}

.app-brand {
    min-width: 0; /* la marque se réduit avant que le header ne déborde */
    overflow: hidden;
    color: var(--color-on-primary);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hauteur fixe, largeur selon les proportions (un SVG sans dimensions n'a pas de taille propre) */
.app-logo {
    display: block;
    width: auto;
    height: 32px;
    max-width: 100%;
}

.app-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

/* Menu déroulant du compte (_account_menu.html.twig) */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px; /* cible tactile confortable */
    padding: 0 8px;
    color: var(--color-on-primary);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.dropdown-toggle::-webkit-details-marker {
    display: none;
}

.dropdown-toggle:hover,
.dropdown[open] .dropdown-toggle {
    background: color-mix(in srgb, var(--color-on-primary) 15%, transparent);
}

/* Petits écrans : icône seule */
.dropdown-label {
    display: none;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown[open] .dropdown-caret {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    /* Écran peu haut (mobile) : le menu défile au lieu de dépasser l'écran (Déconnexion inaccessible) */
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 15%, transparent);
}

/* En-tête du menu du compte : identité à gauche, déconnexion à droite */
.dropdown-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding: 4px 8px 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.dropdown-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dropdown-logout {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px; /* cible tactile confortable */
    min-height: 44px;
    padding: 4px 6px;
    color: var(--color-muted);
    font-size: 0.75rem;
    text-decoration: none;
    border-radius: var(--radius);
}

.dropdown-logout:hover,
.dropdown-logout:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.dropdown-logout .dropdown-icon {
    color: inherit;
}

.dropdown-identity strong {
    color: var(--color-text);
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--color-text);
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: var(--color-primary-light);
}

.dropdown-item[aria-current] {
    color: var(--color-primary);
    font-weight: 600;
}

.dropdown-item-separated {
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}

/* Menu du compte : entrées groupées par thème, avec pictogramme */
.dropdown-group + .dropdown-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
}

.dropdown-group-title {
    margin: 0;
    padding: 6px 16px 2px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dropdown-item-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-icon {
    flex-shrink: 0;
    color: var(--color-muted);
}

.dropdown-item-icon:hover .dropdown-icon,
.dropdown-item-icon[aria-current] .dropdown-icon {
    color: var(--color-primary);
}

.dropdown-item-icon .premium-badge {
    margin-left: auto;
}

/* Pictogramme d'une page du menu dans son titre (_page_icon.html.twig) */
.page-icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: var(--color-primary);
    vertical-align: -4px;
}

@media (min-width: 480px) {
    .dropdown-label {
        display: inline;
    }
}

.locale-switcher {
    display: flex;
    gap: 4px;
}

/* Zone cliquable agrandie autour du drapeau pour le tactile */
.locale-link {
    display: flex;
    padding: 6px 4px;
    border-radius: 4px;
    opacity: .6;
}

.locale-link:hover,
.locale-link:focus-visible,
.locale-link[aria-current] {
    opacity: 1;
}

.locale-link svg {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-on-primary) 50%, transparent);
}

.locale-link[aria-current] svg {
    box-shadow: 0 0 0 2px var(--color-on-primary);
}

.app-main {
    padding: 16px;
}

.card {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 16px;
    background: var(--color-surface);
    border-radius: var(--radius);
}

.card h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.auth-card {
    max-width: 420px;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="number"],
.field input[type="search"],
.field select {
    width: 100%;
    min-height: 44px; /* cible tactile confortable */
    padding: 8px 12px;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.field-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-check label {
    margin: 0;
    font-weight: 400;
}

.field .help-text,
.field [id$="_help"] {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.field ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-error);
    font-size: 0.875rem;
}

.btn {
    display: inline-block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.btn-primary {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.alert {
    padding: 10px 12px;
    border-radius: 8px;
}

.alert-error {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.auth-switch {
    margin-bottom: 0;
    text-align: center;
}

/* Connexion : accroche sous le titre */
.auth-tagline {
    margin-top: -8px;
    color: var(--color-muted);
}

/* Bouton « Se connecter » du header pour un visiteur */
.header-login {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.875rem;
    text-decoration: none;
}

/* Sur le fond du header (couleur primaire) */
.btn-secondary.header-login {
    color: var(--color-on-primary);
    border-color: var(--color-on-primary);
}

.btn-secondary.header-login:hover {
    color: var(--color-primary);
    background: var(--color-on-primary);
}

/* Page de présentation (accueil d'un visiteur, home/landing.html.twig) */
.landing {
    max-width: 1080px;
    margin: 0 auto;
}

.landing-hero {
    display: grid;
    gap: 24px;
    align-items: center;
    padding: 8px 0 16px;
}

.landing-hero h1 {
    margin: 0 0 12px;
    font-size: 1.875rem;
    line-height: 1.2;
}

.landing-lead {
    margin: 0 0 20px;
    font-size: 1.125rem;
    color: var(--color-muted);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-actions .btn + .btn {
    margin-top: 0;
}

.landing-note {
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.landing-preview {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.landing-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.landing-preview-head strong {
    font-size: 1.25rem;
}

.landing-preview-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-preview-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.landing-preview-list li span:nth-of-type(1) {
    flex: 1;
}

.landing-preview-icon {
    flex-shrink: 0;
    padding: 6px;
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 50%;
}

.landing-preview-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--color-gold);
    border-radius: 8px;
}

.landing-section {
    max-width: none;
    margin-top: 32px;
}

.landing-section > h2,
.landing-final h2 {
    margin: 0 0 16px;
    font-size: 1.5rem;
}

.landing-features {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-feature {
    margin: 0;
    max-width: none;
}

.landing-feature h3 {
    margin: 8px 0 4px;
    font-size: 1.0625rem;
}

.landing-feature p {
    margin: 0;
    color: var(--color-muted);
}

.landing-feature-icon {
    color: var(--color-primary);
}

.landing-pricing {
    display: grid;
    gap: 16px;
}

.landing-plan {
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: none;
}

.landing-plan h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.landing-plan-price {
    margin: 8px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.landing-plan .btn {
    margin-top: auto;
}

.landing-final {
    margin-top: 32px;
    padding: 32px 16px;
    text-align: center;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius);
}

.landing-final .btn-primary,
.landing-final .btn-primary:hover {
    color: var(--color-primary);
    background: var(--color-on-primary);
}

@media (min-width: 600px) {
    .landing-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-pricing {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .landing-hero {
        grid-template-columns: 1.1fr 1fr;
        padding: 24px 0 32px;
    }

    .landing-hero h1 {
        font-size: 2.5rem;
    }

    .landing-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .app-header {
        padding: 16px 32px;
    }

    .app-main {
        padding: 32px;
    }

    .card {
        padding: 32px;
    }
}

/* Inscription, mot de passe oublié, SSO */
.btn + .btn {
    margin-top: 12px;
}

.btn-secondary {
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
}

a.btn {
    text-align: center;
    text-decoration: none;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

.field-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.875rem;
}

.text-muted {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.alert {
    margin: 0 auto 16px;
    max-width: 420px;
}

.alert-success,
.alert-info {
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
}

/* Clés d'accès (connexion et page Sécurité) */
.btn-passkey {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-link {
    padding: 8px 0;
    font: inherit;
    color: var(--color-error);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.settings-card {
    max-width: 640px;
}

.settings-card h2 {
    margin-top: 24px;
    font-size: 1.125rem;
}

/* Page Profil : sections séparées */
.settings-section + .settings-section {
    margin-top: 28px;
    border-top: 1px solid var(--color-border);
}

.passkey-list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.passkey-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.passkey-item > svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.passkey-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.passkey-add {
    margin-top: 20px;
}

/* Cérémonie en cours : le contenu de la carte est inerte sous un voile */
[data-controller="passkey"] {
    position: relative;
}

.busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    border-radius: var(--radius);
}

/* Voile de toute la fenêtre : page longue, dont le centre peut être hors de l'écran */
.busy-overlay-page {
    position: fixed;
    z-index: 30; /* au-dessus du header (20) */
    border-radius: 0;
}

.busy-overlay[hidden] {
    display: none;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 2.4s;
    }
}

/* Pied de page et pages légales */
.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding: 16px;
    font-size: 0.875rem;
}

.app-footer a {
    color: var(--color-muted);
}

.legal {
    max-width: 720px;
}

.legal h2 {
    margin-top: 28px;
    font-size: 1.125rem;
}

.legal-details {
    margin: 0;
}

.legal-details > div {
    display: grid;
    gap: 2px 16px;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 600px) {
    .legal-details > div {
        grid-template-columns: 220px 1fr;
    }
}

.legal-details dt {
    font-weight: 600;
}

.legal-details dd {
    margin: 0;
    white-space: pre-line;
}

.legal-missing {
    padding: 0 4px;
    border-radius: 4px;
    background: var(--color-error-bg);
    color: var(--color-error);
    font-weight: 600;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.auth-terms {
    margin-top: 16px;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.cookie-list {
    margin: 0;
}

.cookie-item {
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.cookie-item dt {
    font-weight: 600;
}

.cookie-item dd {
    margin: 4px 0 0;
}

.cookie-meta {
    color: var(--color-muted);
    font-size: 0.875rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

/* Page Badges : grille de cartes, badges à débloquer grisés */
.badge-grid {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.badge-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.badge-card h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.badge-body {
    flex: 1;
    min-width: 0;
}

/* Récapitulatif, filtres et thèmes de la page des badges */
.badge-summary {
    margin-bottom: 16px;
}

.badge-summary-count {
    margin: 0 0 8px;
    color: var(--color-muted);
}

.badge-meter {
    height: 10px;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.badge-meter > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
}

/* Jalons des récompenses : repères dans la jauge, libellés en dessous (le dernier aligné à droite) */
.badge-progress .badge-meter {
    position: relative;
}

.badge-meter-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-surface);
    transform: translateX(-1px);
}

.badge-milestones {
    position: relative;
    height: 1.5em;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.badge-milestone {
    position: absolute;
    top: 0;
    white-space: nowrap;
    transform: translateX(-50%);
}

.badge-milestone-last {
    transform: translateX(-100%);
}

.badge-milestone a {
    color: var(--color-muted);
    text-decoration: none;
}

.badge-milestone a:hover {
    text-decoration: underline;
}

.badge-milestone-obtained a {
    font-weight: 700;
    color: var(--color-primary);
}

.badge-meter-small {
    height: 6px;
    margin: 8px 0 4px;
}

.badge-next {
    font-size: 0.875rem;
}

.badge-medals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}

.retention-trial {
    margin-bottom: 24px;
    padding: 16px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
}

.retention-trial h2 {
    margin-top: 0;
}

.retention-trial ul {
    padding-left: 20px;
}

.badge-rewards {
    margin-bottom: 16px;
}

.badge-rewards h2 {
    margin-bottom: 4px;
}

.badge-reward-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .badge-reward-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.badge-reward {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.badge-reward p {
    margin: 0;
}

.badge-reward-percent {
    flex-shrink: 0;
    min-width: 3.5em;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-muted);
}

.badge-reward-gift {
    font-weight: 600;
}

.badge-reward-obtained {
    border-color: var(--color-primary);
}

.badge-reward-obtained .badge-reward-percent {
    color: var(--color-primary);
}

.badge-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 16px;
}

.badge-filters .field {
    flex: 1 1 180px;
}

.badge-filter-reset {
    margin: -8px 0 8px;
    font-size: 0.875rem;
}

.badge-theme + .badge-theme {
    margin-top: 24px;
}

.badge-theme-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 1.125rem;
}

.badge-theme-count {
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.badge-card p {
    margin: 0 0 4px;
}

.badge-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 50%;
}

.badge-card-locked .badge-icon {
    color: var(--color-muted);
    background: var(--color-bg);
    border: 2px dashed var(--color-border);
}

@media (min-width: 640px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Comptes bancaires */
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card-header h1 {
    margin: 0;
}

.btn-inline {
    width: auto;
}

.btn-danger {
    color: var(--color-on-primary);
    background: var(--color-error);
}

a.btn-danger {
    display: inline-block;
    width: auto;
}

.account-folder {
    margin: 24px 0 4px;
    color: var(--color-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--color-border);
}

.account-link {
    flex: 1;
    min-width: 0;
}

.account-link,
.account-item-archived {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}

.account-link {
    color: var(--color-text);
    text-decoration: none;
}

.account-link:hover strong,
.account-link:focus-visible strong {
    color: var(--color-primary);
}

.account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-balance {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amount-negative {
    color: var(--color-negative);
}

/* Solde négatif (découvert, dette, budget dépassé) : alerte, en rouge quelle que soit la marque */
.balance-negative {
    color: var(--color-error);
}

/* Roue crantée d'une ligne (_actions.html.twig) : réutilise le menu déroulant du header */
.row-menu {
    flex-shrink: 0;
}

.row-menu-toggle {
    display: grid;
    place-items: center;
    width: 44px; /* cible tactile confortable */
    height: 44px;
    color: var(--color-muted);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.row-menu-toggle::-webkit-details-marker {
    display: none;
}

.row-menu-toggle:hover,
.row-menu[open] .row-menu-toggle {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.row-menu .dropdown-menu {
    top: calc(100% + 4px);
    min-width: 180px;
}

/* Actions envoyées en POST : boutons présentés comme les liens du menu */
button.dropdown-item {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.dropdown-item-danger {
    color: var(--color-error);
}

.account-archives {
    margin-top: 24px;
}

.account-archives summary {
    padding: 8px 0;
    color: var(--color-muted);
    cursor: pointer;
}

/* Boutons radio côte à côte (type de compte) */
.field-choices > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.field-choices > div label {
    display: inline;
    margin-left: 4px;
    font-weight: 400;
}

/* Choix aux libellés longs : un par ligne, libellé aligné à côté de son bouton */
.field-choices-stacked > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 8px 8px;
}

.field-choices-stacked > div label {
    margin-left: 0;
}

/* Un par ligne sur mobile (un libellé ne se sépare pas de son bouton), en ligne au-delà */
.field-choices-stacked-mobile > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 8px 8px;
}

.field-choices-stacked-mobile > div label {
    margin-left: 0;
}

@media (min-width: 640px) {
    .field-choices-stacked-mobile > div {
        display: flex;
        gap: 8px 20px;
    }

    .field-choices-stacked-mobile > div label {
        margin-left: 4px;
    }
}

.field textarea {
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.field input:disabled,
.field select:disabled {
    color: var(--color-muted);
    background: var(--color-bg);
}

/* Étoile des favoris (liste des comptes) */
.favorite-toggle {
    display: grid;
    place-items: center;
    width: 44px; /* cible tactile confortable */
    height: 44px;
    padding: 0;
    color: var(--color-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.favorite-toggle[aria-pressed="true"] {
    color: var(--color-primary);
}

/* Accueil : widgets (ordre et masquage choisis par l'utilisateur), deux colonnes sur grand écran */
.home {
    max-width: 960px;
    margin: 0 auto;
}

.home-widgets {
    display: grid;
    gap: 16px;
    align-items: start;
}

.home .card {
    max-width: none;
    margin: 0;
}

.home-widget .card-header {
    margin-bottom: 8px;
}

.home-widget h2,
.home-hidden-widgets h2 {
    margin: 0;
    font-size: 1.125rem;
}

@media (min-width: 900px) {
    .home-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Sans trous (masonry_controller.js) : rangées de 4 px, l'espacement est compté dans l'étendue
       de chaque widget */
    .home-widgets.masonry {
        grid-auto-rows: 4px;
        row-gap: 0;
    }
}

.home-customize-link {
    margin: 0 0 8px;
    text-align: right;
    font-size: 0.875rem;
}

/* Mode « Personnaliser » : bandeau, barre de chaque widget, widgets masqués */
.home .home-customize-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.home-customize-bar p {
    flex: 1 1 240px;
    margin: 0;
}

.home-customizing .home-widget {
    outline: 2px dashed var(--color-border);
    outline-offset: -2px;
}

.home-widget-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -8px -4px 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.home-widget-tools [data-move="up"] {
    margin-left: auto;
}

.home-widget-handle:not([hidden]) {
    display: grid;
    place-items: center;
    width: 44px; /* cible tactile confortable */
    height: 44px;
    color: var(--color-muted);
    cursor: grab;
    touch-action: none;
}

.home-widget-move {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.home-widget-move:hover:not(:disabled),
.home-widget-move:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.home-widget-move:disabled {
    color: var(--color-border);
    cursor: default;
}

.home-widget-hide {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.875rem;
}

.home-widget-ghost {
    opacity: .4;
}

.home .home-hidden-widgets {
    margin-top: 16px;
}

.home-hidden-widgets ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.home-hidden-widgets li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.home-hidden-widgets li + li {
    border-top: 1px solid var(--color-border);
}

/* Widget du bilan du mois : totaux, tendance (flèche orientée et colorée selon le niveau), balance */
.home-month-nav {
    margin: 0 0 4px;
}

.home-summary + .home-summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.home-summary-currency {
    margin: 8px 0 4px;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.home-summary-totals {
    margin: 8px 0 0;
}

.home-summary-totals div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
}

.home-summary-totals dt {
    font-weight: 400;
}

.home-summary-totals dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.home-trend {
    --trend-color: var(--color-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    text-align: center;
}

.home-trend-1 { --trend-color: var(--color-error); --trend-angle: 90deg; }
.home-trend-2 { --trend-color: color-mix(in srgb, var(--color-error) 60%, var(--color-muted)); --trend-angle: 45deg; }
.home-trend-3 { --trend-color: var(--color-muted); --trend-angle: 0deg; }
.home-trend-4 { --trend-color: color-mix(in srgb, var(--color-positive) 60%, var(--color-muted)); --trend-angle: -45deg; }
.home-trend-5 { --trend-color: var(--color-positive); --trend-angle: -90deg; }

.home-trend-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--trend-color);
    background: color-mix(in srgb, var(--trend-color) 14%, var(--color-surface));
    border: 3px solid var(--trend-color);
    border-radius: 50%;
}

.home-trend-icon svg {
    transform: rotate(var(--trend-angle, 0deg));
}

.home-trend figcaption {
    display: grid;
    gap: 2px;
}

.home-trend strong {
    color: var(--trend-color);
}

.home-trend .text-muted {
    font-size: 0.75rem;
}

.home-summary-empty {
    margin: 16px 0;
    text-align: center;
}

.home-summary-balance {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

.home-summary-balance strong {
    margin-left: 8px;
    white-space: nowrap;
}

/* Widget des premiers pas : étapes numérotées, cochées une fois leur badge obtenu */
.first-steps {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.first-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.first-step-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
}

.first-step-done .first-step-check {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.first-step-body {
    display: flex;
    flex-direction: column;
}

.first-step-done .first-step-body > span:first-child {
    color: var(--color-muted);
    text-decoration: line-through;
}

.first-step-badge {
    font-size: 0.8125rem;
}

.first-steps-hide {
    margin: 12px 0 0;
    text-align: right;
}

/* Widget des derniers badges */
.home-badge-reward {
    margin: 0 0 12px;
    font-weight: 600;
}

.home-badge-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-badge {
    padding: 12px;
}

.home-badge h3 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.home-badge p {
    margin: 0 0 2px;
    font-size: 0.875rem;
}

.home-badge .badge-icon {
    width: 44px;
    height: 44px;
}

.home-badge .badge-icon svg {
    width: 22px;
    height: 22px;
}

/* Badges à niveaux : paliers et icône à la couleur du niveau atteint */
.badge-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}

.badge-tier {
    padding: 2px 8px;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.badge-tier-reached {
    color: var(--color-text);
    border-color: transparent;
    font-weight: 600;
}

.badge-tier-reached.badge-tier-bronze,
.badge-card-bronze .badge-icon {
    background: var(--color-bronze);
}

.badge-tier-reached.badge-tier-silver,
.badge-card-silver .badge-icon {
    background: var(--color-silver);
}

.badge-tier-reached.badge-tier-gold,
.badge-card-gold .badge-icon {
    background: var(--color-gold);
}

.badge-tier-reached.badge-tier-platinum,
.badge-card-platinum .badge-icon {
    background: var(--color-platinum);
}

.badge-card-bronze .badge-icon,
.badge-card-silver .badge-icon,
.badge-card-gold .badge-icon,
.badge-card-platinum .badge-icon {
    color: var(--color-text);
}

/* Page Dossiers */
.folder-add {
    margin-bottom: 24px;
}

.folder-item {
    gap: 12px;
}

.folder-item > svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.folder-item .account-info {
    flex: 1;
    padding: 12px 0;
}

/* Page d'un compte : soldes, navigation par mois et opérations */
.breadcrumb {
    margin: 0 0 8px;
    font-size: 0.875rem;
}

.breadcrumb a::before {
    content: "‹ ";
}

.account-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-bottom: 16px;
}

.account-summary > div {
    display: flex;
    flex-direction: column;
}

/* Aide du solde pointé : le libellé est trop étroit pour elle, elle prend la largeur de l'encart
   (top: auto : elle reste juste sous la pastille) */
.account-summary {
    position: relative;
}

.account-summary .field-label {
    position: static;
}

.account-summary .hint-content {
    top: auto;
    margin-top: 4px;
}

.account-summary strong {
    font-variant-numeric: tabular-nums;
}

.account-summary-balance {
    font-size: 1.75rem;
}

.amount-positive {
    color: var(--color-positive);
}

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 24px;
}

.month-nav h2 {
    margin: 0;
    font-size: 1.125rem;
    text-align: center;
}

.month-nav-link {
    display: grid;
    place-items: center;
    width: 44px; /* cible tactile confortable */
    height: 44px;
    font-size: 1.5rem;
    text-decoration: none;
    border-radius: 8px;
}

.month-nav-link:hover,
.month-nav-link:focus-visible {
    background: var(--color-primary-light);
}

.month-nav-today {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
}

.month-totals {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 12px 0;
    font-size: 0.875rem;
}

.month-totals-note {
    margin: -8px 0 12px;
    font-size: 0.75rem;
    text-align: center;
}

.month-totals div {
    display: flex;
    gap: 6px;
}

.month-totals dt {
    color: var(--color-muted);
}

.month-totals dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Recherche et filtres du relevé */
.operation-filters {
    margin-top: 16px;
}

.operation-search {
    display: flex;
    gap: 8px;
}

.operation-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.operation-search .btn {
    flex: none;
    width: auto;
}

.operation-search input {
    width: 100%;
    min-height: 44px; /* cible tactile confortable */
    padding: 8px 44px 8px 12px; /* à droite, place de la croix */
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.operation-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 0.875rem;
}

.operation-filter-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Croix native masquée : elle viderait le champ sans relancer la recherche */
.operation-search input::-webkit-search-cancel-button {
    appearance: none;
}

.operation-search-clear {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    color: var(--color-muted);
    border-radius: 8px;
}

.operation-search-clear:hover,
.operation-search-clear:focus-visible {
    color: var(--color-text);
}

.search-summary {
    margin: 24px 0 0;
    font-size: 1.125rem;
}

.operation-list-month {
    padding: 12px 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
}

.operation-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.operation-item,
.operation-initial {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--color-border);
}

.operation-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--color-text);
    text-decoration: none;
}

.operation-link:hover strong,
.operation-link:focus-visible strong {
    color: var(--color-primary);
}

.operation-date {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    width: 40px;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.operation-date span:first-child {
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.operation-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.operation-amounts {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.operation-amount {
    font-weight: 600;
}

/* Opération future : pas encore dans le solde du jour */
.operation-upcoming .operation-link {
    opacity: .7;
}

.tag {
    display: inline-block;
    padding: 0 6px;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.operation-empty {
    padding: 24px 0;
    color: var(--color-muted);
    text-align: center;
}

.field input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Pastille d'aide « ? » à côté d'un libellé (_hint.html.twig) */
.field-label {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.field .field-label label {
    margin-bottom: 0;
}

.hint-toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.hint-toggle::-webkit-details-marker {
    display: none;
}

.hint[open] .hint-toggle {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

/* Aide affichée sous le libellé, sur toute la largeur du champ */
.hint-content {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    padding: 10px 12px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 15%, transparent);
    font-size: 0.875rem;
    font-weight: 400;
}

.tag-muted {
    color: var(--color-muted);
    background: var(--color-bg);
}

/* Bouton « Haut de page » en bas à gauche (back_to_top_controller.js), sous l'en-tête ancré */
.back-to-top {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: calc(16px + env(safe-area-inset-left));
    z-index: 15;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 25%, transparent);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--color-primary-dark);
}

.back-to-top-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
}

/* Bouton flottant « + » du relevé (saisie rapide d'une opération), en bas à droite */
.fab {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 25%, transparent);
}

.fab:hover,
.fab:focus-visible {
    color: var(--color-on-primary);
    background: var(--color-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
}

/* Texte réservé aux lecteurs d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Historique limité sans premium (relevé d'un compte) */
.month-nav-locked {
    color: var(--color-muted);
    cursor: not-allowed;
}

.month-nav-locked:hover {
    background: none;
}

.history-locked {
    max-width: none;
    margin-top: 16px;
}

.history-note {
    margin: 16px 0 0;
    text-align: center;
}

/* Compte verrouillé (offre gratuite dépassée) : grisé, non cliquable */
.account-item-locked .account-link,
.account-item-locked .account-info {
    color: var(--color-muted);
    cursor: not-allowed;
}

.account-item-locked .account-balance {
    color: var(--color-muted);
}

.account-item-locked strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-lock {
    flex-shrink: 0;
}

/* Pages d'erreur (templates/bundles/TwigBundle/Exception) */
.error-page {
    text-align: center;
}

.error-code {
    margin: 0;
    color: var(--color-primary-light);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}

/* Catégories : pictogramme d'une opération, liste des paramètres, choix du pictogramme */
.operation-category {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 50%;
}

.operation-category-none {
    background: var(--color-bg);
    border: 1px dashed var(--color-muted);
}

.settings-link a {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--color-text);
    text-decoration: none;
}

.settings-link a > svg,
.category-group > summary > svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.settings-link a:hover strong,
.settings-link a:focus-visible strong {
    color: var(--color-primary);
}

.category-item {
    align-items: flex-start;
}

.category-group {
    flex: 1;
    min-width: 0;
}

.category-group > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}

.category-group > summary::-webkit-details-marker {
    display: none;
}

.category-group[open] > summary strong {
    color: var(--color-primary);
}

.category-children {
    margin-left: 32px;
}

.category-child .account-info {
    flex: 1;
    padding: 8px 0;
}

.category-add-sub {
    margin: 4px 0 12px 32px;
    font-size: 0.875rem;
}

.category-archived .account-info,
.category-archived .category-group > summary > svg {
    opacity: .6;
}

.payee-item .account-link {
    justify-content: flex-start;
}

.payee-item .account-link > svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.payee-archived .account-info,
.payee-archived .account-link > svg {
    opacity: .6;
}

.icon-picker {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.icon-picker legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
}

.icon-picker .icon-picker-choice {
    margin: 0;
    display: grid;
    place-items: center;
    height: 44px;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.icon-picker-choice:hover {
    color: var(--color-primary);
}

.icon-picker-choice:has(input:checked) {
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.icon-picker-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

a.operation-category {
    text-decoration: none;
}

a.operation-category:hover,
a.operation-category:focus-visible {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.operation-category-none {
    color: var(--color-muted);
}

.operation-item .operation-link,
.operation-initial .operation-link {
    flex: 1;
    min-width: 0;
}

/* Popin (<dialog>) centrée, fond assombri */
.modal {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 20px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--color-text) 25%, transparent);
    overflow: visible;
}

.modal::backdrop {
    background: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.modal turbo-frame:empty::before {
    content: "…";
    display: block;
    padding: 24px;
    color: var(--color-muted);
    text-align: center;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h1 {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--color-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.modal .modal-close {
    display: grid;
}

.modal-close:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Choix de la catégorie avec pictogrammes (category_select_controller.js) */
.category-picker-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.category-picker-toggle::-webkit-details-marker {
    display: none;
}

.category-picker[open] .category-picker-toggle,
.category-picker-toggle:focus-visible {
    border-color: var(--color-primary);
}

.category-picker-current,
.category-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.category-picker-current > svg,
.category-picker-option > svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.category-picker .category-picker-menu {
    right: auto;
    left: 0;
    width: 100%;
    max-height: min(360px, 50dvh);
    overflow-y: auto;
}

.category-picker-group {
    margin: 8px 16px 4px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.category-picker-option[aria-current] {
    background: var(--color-primary-light);
}

.category-picker-option:hover,
.category-picker-option:focus-visible {
    color: var(--color-primary);
}

/* Pointage des opérations : coche du relevé, mode pointage, barre d'enregistrement */
.field-check {
    position: relative; /* aide « ? » sous la case */
}

/* Pointage d'une opération depuis sa ligne : bouton rond, coché une fois pointée ; marque fixe
   (rapprochée, lecture seule) de même largeur pour aligner les montants */
.operation-point {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    margin: 0;
    color: var(--color-primary);
}

.operation-point-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-primary);
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
}

.operation-point-button:hover,
.operation-point-button:focus-visible {
    border-color: var(--color-primary);
}

.operation-point-button[aria-pressed="true"] {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-actions .btn + .btn,
.pointing-actions .btn + .btn {
    margin-top: 0;
}

.operation-pointing-check {
    flex-shrink: 0;
    width: 22px; /* cible tactile : toute la ligne (label) coche aussi */
    height: 22px;
    margin: 0;
    accent-color: var(--color-primary);
}

label.operation-link {
    cursor: pointer;
}

.operation-item:has(.operation-pointing-check:checked) {
    background: var(--color-primary-light);
}

.pointing-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 0 -16px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.pointing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pointing-actions .btn {
    flex: 1 1 140px;
    width: auto;
    text-align: center;
}

@media (min-width: 640px) {
    .account-actions {
        flex-direction: row;
    }

    .account-actions .btn {
        width: auto;
    }
}

@media (min-width: 768px) {
    .pointing-bar {
        margin: 0 -32px;
        padding: 12px 32px;
    }
}

/* Solde initial : ligne du relevé non modifiable */
.operation-initial .operation-category {
    color: var(--color-muted);
    background: var(--color-bg);
}

.operation-initial .operation-pointing-check {
    opacity: .6;
}

/* Rapprochement bancaire : relevé saisi, écart, historique */
.reconciliation-statement {
    display: grid;
    gap: 0 16px;
}

.reconciliation-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0 0 16px;
}

.reconciliation-summary div {
    display: flex;
    flex-direction: column;
}

.reconciliation-summary dt {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.reconciliation-summary dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reconciliation-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reconciliation-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.reconciliation-history li > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.reconciliation-history form {
    margin: 0;
}

@media (min-width: 640px) {
    .reconciliation-statement {
        grid-template-columns: 1fr 1fr;
    }
}

/* Import d'un relevé (rapprochement, premium) */
.statement-import {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}

.statement-import h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.statement-import-form input[type="file"] {
    max-width: 100%;
}

.statement-import-report {
    margin-bottom: 16px;
    padding: 12px 16px;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: 8px;
}

.statement-import-report p {
    margin: 0 0 8px;
}

.statement-import-report strong {
    margin-right: 6px;
}

.statement-import-details summary {
    font-weight: 600;
    cursor: pointer;
}

.statement-import-details ul {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.statement-import-details li {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid var(--color-border);
}

/* Import d'opérations : total des lignes cochées et option de pointage, au-dessus des boutons */
.operation-import-total,
.operation-import-option {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
}

.operation-import-total {
    justify-content: space-between;
}

.operation-import-guess {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

.operation-import-option input {
    accent-color: var(--color-primary);
}

.statement-line-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Pastille « Premium » : fonctions réservées à Premium (templates/_premium_badge.html.twig) */
.premium-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    color: var(--color-text);
    background: var(--color-gold);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.premium-badge-compact {
    padding: 3px;
}

/* Pastille cliquable : mène à la page Premium */
a.premium-badge {
    text-decoration: none;
}

a.premium-badge:hover,
a.premium-badge:focus-visible {
    background: color-mix(in srgb, var(--color-gold) 80%, var(--color-text));
}

h1 .premium-badge,
h2 .premium-badge,
strong .premium-badge {
    margin-left: 6px;
}

.alert .premium-badge {
    margin-right: 6px;
}

/* Compte à débit différé : paramètres de la carte (formulaire), prélèvements générés (relevé) */
.deferred-debit-fields {
    margin: 0 0 16px;
    padding: 12px 16px 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.deferred-debit-fields legend {
    padding: 0 4px;
    font-weight: 600;
}

.deferred-debit-fields[hidden] {
    display: none;
}

.operation-deferred .operation-category {
    color: var(--color-muted);
    background: var(--color-bg);
}

.account-card-info {
    margin: 0 0 16px;
    font-size: 0.875rem;
}

/* Ventilation d'une opération (operation_split_controller.js) : lien discret sous le montant */
.operation-amount-field {
    margin-bottom: 4px;
}

.operation-split {
    margin-bottom: 16px;
}

.operation-split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--color-primary);
    font-size: 0.875rem;
    cursor: pointer;
    list-style: none;
}

.operation-split-toggle::-webkit-details-marker {
    display: none;
}

.operation-split-toggle:hover {
    text-decoration: underline;
}

.operation-split-body {
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.operation-split-body > .text-muted {
    margin-top: 0;
}

.operation-split-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.operation-split-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.operation-split-line {
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.operation-split-line .field:last-child {
    margin-bottom: 0;
}

.operation-split-head {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.operation-split-amount {
    flex: 1;
}

.operation-split-remove {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    color: var(--color-muted);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.operation-split-remove[hidden] {
    display: none;
}

.operation-split-remove:hover {
    color: var(--color-error);
}

.operation-split-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.operation-split-footer [hidden] {
    display: none;
}

.operation-split-remaining {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.operation-split-remaining[data-state="over"] {
    color: var(--color-error);
}

.operation-split-remaining[data-state="done"] {
    color: var(--color-primary);
}

/* Décors d'une marque dans le header (templates/brand_effects/) : derrière son contenu ; le calque
   coupe les éléments qui tombent, pas le header (ses menus déroulants en débordent) */
.header-effect {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.header-effect-defs {
    position: absolute;
}

.header-effect-item {
    position: absolute;
    top: calc(-1 * var(--size));
    left: var(--left);
    width: var(--size);
    height: var(--size);
    opacity: var(--opacity);
}

/* « snow » : flocons qui tombent en tournant */
.snowflake {
    color: var(--color-on-primary);
    animation: snowfall var(--duration) linear var(--delay) infinite;
}

@keyframes snowfall {
    to {
        top: 100%;
        transform: translateX(var(--drift)) rotate(180deg);
    }
}

/* « leaves » : feuilles qui tombent en se balançant (couleur propre à chaque feuille) */
.leaf {
    color: var(--color);
    animation:
        leaf-fall var(--duration) linear var(--delay) infinite,
        leaf-sway calc(var(--duration) / 3) ease-in-out var(--delay) infinite alternate;
}

@keyframes leaf-fall {
    to {
        top: 100%;
    }
}

@keyframes leaf-sway {
    from {
        transform: translateX(calc(-1 * var(--drift))) rotate(-40deg);
    }
    to {
        transform: translateX(var(--drift)) rotate(40deg);
    }
}

/* « bloom » : une fleur au milieu du header, animée une fois (état final = style par défaut,
   l'animation part de l'état initial) */
.bloom {
    position: absolute;
    top: calc(50% - 22px);
    left: calc(50% - 22px);
    width: 44px;
    height: 44px;
}

.bloom-petal,
.bloom-heart {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

.bloom-petal {
    animation: bloom-open 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--i) * 0.15s) both;
}

.bloom-heart {
    animation: bloom-open 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

@keyframes bloom-open {
    from {
        transform: scale(0) rotate(-45deg);
    }
}

/* « windsurf » : la planche traverse le header (10 s), puis repasse après une pause, en gîtant
   doucement ; le sillage scintille */
.windsurf {
    position: absolute;
    bottom: -2px;
    left: -64px;
    width: 58px;
    height: 54px;
    animation: windsurf-ride 16s linear 1s infinite;
}

.windsurf-rig {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: windsurf-heel 2.4s ease-in-out infinite alternate;
}

.windsurf-wake {
    animation: windsurf-wake 0.8s ease-in-out infinite alternate;
}

@keyframes windsurf-ride {
    62%,
    100% {
        left: 100%;
    }
}

@keyframes windsurf-heel {
    from {
        transform: translateY(0.5px) rotate(-1deg);
    }
    to {
        transform: translateY(-1.5px) rotate(3deg);
    }
}

@keyframes windsurf-wake {
    from {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-effect {
        display: none;
    }

    /* Motif sans mouvement : affiché dans son état final */
    .header-effect-still {
        display: block;
    }

    .header-effect-still * {
        animation: none;
    }
}

/* Échéances */
.schedule-repeat {
    display: grid;
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    gap: 0 12px;
}

.schedule-inactive .account-info,
.schedule-inactive .account-link > svg,
.schedule-inactive .account-balance {
    opacity: .6;
}

.schedule-item .account-link > svg {
    flex-shrink: 0;
}

/* Infos collées au pictogramme, montant poussé à droite */
.schedule-item .account-info {
    flex: 1;
}

.schedule-item .account-info > .text-muted {
    display: block;
}

/* Jours de la semaine sur deux colonnes sur mobile */
.schedule-weekdays > div {
    grid-template-columns: auto 1fr auto 1fr;
}

.schedule-monthly {
    font-weight: 600;
}

.schedule-dates {
    padding-left: 1.2em;
}

/* Échéances du mois : case, montant modifiable et bouton Ignorer / Rétablir sur chaque ligne */
.schedule-occurrences .account-link {
    justify-content: flex-start;
}

.schedule-occurrences .account-info {
    flex: 1;
}

.schedule-occurrences .account-link > svg {
    flex-shrink: 0;
}

label.account-link {
    cursor: pointer;
}

.schedule-occurrence:has(.operation-pointing-check:checked) {
    background: var(--color-primary-light);
}

.schedule-occurrence-skipped .account-info,
.schedule-occurrence-skipped .account-link > svg,
.schedule-occurrence-skipped .account-balance,
.schedule-occurrence-unavailable .account-info,
.schedule-occurrence-unavailable .account-balance {
    opacity: .6;
}

.schedule-amount {
    flex-shrink: 0;
    width: 6.5rem;
    min-height: 40px;
    padding: 6px 8px;
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.schedule-report .account-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.schedule-report .account-balance .text-muted {
    font-size: 0.8125rem;
    font-weight: normal;
}

/* Part du coût annuel total */
.schedule-report-bar {
    display: block;
    height: 4px;
    margin-top: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.schedule-report-bar span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}

.schedule-suggestions {
    margin-bottom: 1.5rem;
}

.schedule-suggestions .account-list {
    margin-top: 0.5rem;
}

.schedule-skip-button {
    flex-shrink: 0;
    min-height: 40px;
    padding: 6px 4px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-muted);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.schedule-skip-button:hover,
.schedule-skip-button:focus-visible {
    color: var(--color-primary);
}

.schedule-apply-intro {
    margin: 0 0 8px;
    font-size: 0.875rem;
}

.schedule-pending {
    max-width: none;
    margin-top: 16px;
}

/* Opération générée par une échéance : pictogramme discret après le libellé */
.operation-schedule-mark {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -2px;
    color: var(--color-muted);
}

/* Prévisionnel : échéance à appliquer dans le relevé, grisée */
/* Échéance pas encore inscrite : ligne surlignée (fond teinté hachuré, filet à gauche), pour la
   distinguer nettement des opérations saisies sans nuire à la lisibilité */
.operation-forecast {
    margin-inline: -8px;
    padding-inline: 8px;
    background:
        repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--color-primary) 5%, transparent) 8px 16px),
        color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.operation-forecast strong {
    font-style: italic;
}

.operation-forecast .operation-category {
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px dashed var(--color-primary);
}

.operation-forecast .tag-muted {
    color: var(--color-primary-dark);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.schedule-overdraft {
    max-width: none;
    margin-top: 16px;
}

.schedule-overdraft a {
    color: inherit;
}

.home-upcoming .account-link {
    justify-content: flex-start;
}

.home-upcoming .account-info {
    flex: 1;
}

.home-upcoming-more {
    margin: 0.75rem 0 0;
    text-align: right;
}

/* Calendrier des échéances du mois : grand écran seulement (la liste suffit sur mobile) */
.schedule-calendar {
    display: none;
}

@media (min-width: 768px) {
    .schedule-calendar {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        margin: 16px 0;
    }

    .schedule-calendar-weekday {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-muted);
        text-align: center;
    }

    .schedule-calendar-day {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 72px;
        padding: 4px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
    }

    .schedule-calendar-outside {
        opacity: .4;
    }

    .schedule-calendar-today {
        border-color: var(--color-primary);
    }

    .schedule-calendar-number {
        font-size: 0.75rem;
        font-weight: 600;
    }

    .schedule-chip {
        overflow: hidden;
        padding: 0 4px;
        font-size: 0.7rem;
        color: var(--color-primary-dark);
        background: var(--color-primary-light);
        border-radius: 4px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .schedule-chip-applied {
        color: var(--color-muted);
        background: var(--color-bg);
    }

    .schedule-chip-skipped,
    .schedule-chip-unavailable {
        color: var(--color-muted);
        background: none;
        text-decoration: line-through;
    }
}

/* Vue du mois plus large : place pour le calendrier */
.settings-card.schedule-month-card {
    max-width: 960px;
}

/* Statistiques : filtres, chiffres du mois, catégories (barre à l'échelle de la plus grosse) */
.statistics-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 16px;
}

.statistics-filters .field {
    flex: 1 1 200px;
}

.statistics-filters .field-check {
    flex: 1 1 100%;
}

.statistics-heading {
    margin: 32px 0 12px;
    font-size: 1.125rem;
}

/* Titre de l'évolution et choix de la période sur une ligne */
.statistics-evolution-header {
    margin: 32px 0 0;
}

.statistics-evolution-header .statistics-heading {
    margin: 0;
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

.stat-tile {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.stat-tile dt {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.stat-tile dd {
    margin: 0;
}

.stat-tile-value {
    font-size: 1.375rem;
    font-weight: 600;
    white-space: nowrap;
}

.stat-delta {
    font-size: 0.8125rem;
    font-weight: 600;
}

.stat-delta-good {
    color: var(--color-positive);
}

.stat-delta-bad {
    color: var(--color-error);
}

.stat-list,
.stat-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-item + .stat-item {
    border-top: 1px solid var(--color-border);
}

.stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 10px 0;
}

summary.stat-row {
    cursor: pointer;
    list-style: none;
}

summary.stat-row::-webkit-details-marker {
    display: none;
}

/* Catégorie dépliable : chevron après le nom */
summary.stat-row .stat-label strong::after {
    content: " ▸";
    color: var(--color-muted);
}

details[open] > summary.stat-row .stat-label strong::after {
    content: " ▾";
}

.stat-children {
    margin: 0 0 8px 40px;
}

.stat-icon-small {
    width: 22px;
    height: 22px;
}

.stat-children .stat-row {
    padding: 6px 0;
    font-size: 0.9375rem;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stat-label > span:last-child {
    display: grid;
}

.stat-label .text-muted {
    font-size: 0.8125rem;
}

.stat-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: 50%;
}

.stat-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 8px;
    text-align: right;
    white-space: nowrap;
}

.stat-values .text-muted {
    font-size: 0.8125rem;
}

/* Barres du mois et du mois comparé (plus fine, teinte atténuée) */
.stat-bars {
    display: grid;
    grid-column: 1 / -1;
    gap: 3px;
}

.stat-row .stat-bar-compared {
    height: 5px;
}

.stat-row .stat-bar-compared > span,
.stat-key-compared {
    background: color-mix(in srgb, var(--color-primary) 40%, var(--color-surface));
}

.stat-key-month {
    background: var(--color-primary);
}

.stat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 24px 0 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.stat-compared {
    flex-basis: 100%;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.stat-compared .stat-delta {
    margin-left: 6px;
}

.stat-tile-compared {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

/* Barre : piste discrète, remplissage arrondi au bout, carré à la base */
.stat-bar {
    display: block;
    height: 8px;
    background: var(--color-bg);
    border-radius: 0 4px 4px 0;
}

.stat-bar > span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
}

/* Catégories : une seule teinte (la grandeur) ; évolution : revenus et dépenses distingués, légende en tête */
.stat-row .stat-bar > span,
.stat-bar-income > span,
.stat-key-income {
    background: var(--color-primary);
}

.stat-evolution .stat-bar-expenses > span,
.stat-key-expenses {
    background: var(--color-error);
}

.stat-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
}

/* Évolution : tableau, barres dans les cellules */
.stat-evolution-scroll {
    overflow-x: auto;
}

.stat-evolution {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.stat-evolution th,
.stat-evolution td {
    padding: 8px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.stat-evolution th:first-child {
    text-align: left;
}

.stat-evolution thead th {
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.stat-evolution td .stat-bar {
    width: 100%;
    min-width: 80px;
    margin-bottom: 4px;
}

.stat-evolution tr[aria-current] {
    background: var(--color-primary-light);
}

/* Budgets : jauge dont le remplissage porte l'état (piste = teinte claire du même ton) */
.budget-list {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.budget-meter {
    --budget-color: var(--color-positive);
}

.budget-warning {
    --budget-color: color-mix(in srgb, var(--color-gold) 55%, var(--color-error));
}

.budget-over {
    --budget-color: var(--color-error);
}

/* Objectifs d'épargne : jauge de budget, couleur de la marque tant que l'objectif est en cours */
.savings-goal-list {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.savings-goal-meter {
    --budget-color: var(--color-primary);
    margin: 16px 0;
}

.savings-goal-list .savings-goal-meter {
    margin: 0;
}

.savings-goal-meter.savings-goal-reached {
    --budget-color: var(--color-positive);
}

.savings-goal-meter.budget-over {
    --budget-color: var(--color-error);
}

.savings-goal-meter .budget-meter-name .page-icon {
    flex-shrink: 0;
}

.budget-meter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.budget-meter-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.budget-meter-amounts {
    white-space: nowrap;
}

.budget-meter-track {
    height: 10px;
    margin: 6px 0 4px;
    background: color-mix(in srgb, var(--budget-color) 15%, var(--color-surface));
    border-radius: 0 5px 5px 0;
}

.budget-meter-track > span {
    display: block;
    height: 100%;
    background: var(--budget-color);
    border-radius: 0 5px 5px 0;
}

.budget-meter-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 0.875rem;
}

.budget-warning .budget-meter-state > span:first-of-type,
.budget-over .budget-meter-state > span:first-of-type {
    font-weight: 600;
}

.budget-over .budget-meter-state svg,
.budget-over .budget-meter-state > span:first-of-type {
    color: var(--color-error);
}

.budget-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    font-size: 0.875rem;
}

.budget-actions form {
    margin: 0;
}

.budget-scope {
    margin-top: 16px;
    font-size: 0.8125rem;
}

.home-statistics-link {
    margin: 12px 0 0;
    font-size: 0.875rem;
}

/* Catégorie citée dans un texte : pictogramme + nom */
.category-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: bottom;
}

.category-label .category-icon {
    flex-shrink: 0;
}

/* Budgets : seuils des alertes par e-mail */
.budget-alerts {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.budget-alerts h2 {
    margin: 0 0 4px;
    font-size: 1.125rem;
}

.budget-alerts-thresholds {
    padding: 0;
    border: 0;
}


.budget-alerts-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 4px 0;
}

.budget-alerts-choices .field-check label {
    min-height: 44px; /* cible tactile confortable */
    display: flex;
    align-items: center;
}

/* Aide : FAQ (help/index.html.twig, faq_search_controller.js), message et signalement de bug */
.help .card + .card {
    margin-top: 16px;
}

.faq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.faq-toc a {
    padding: 4px 12px;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 999px;
    font-size: 0.875rem;
    text-decoration: none;
}

.faq-section {
    scroll-margin-top: 16px;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    flex-shrink: 0;
    color: var(--color-muted);
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-answer {
    padding: 0 0 16px;
    color: var(--color-text);
}

.faq-empty {
    color: var(--color-muted);
}

.help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.help-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-decoration: none;
}

.btn-icon {
    flex-shrink: 0;
}

.bug-context {
    margin-bottom: 16px;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.bug-context summary {
    cursor: pointer;
}

.bug-context dt {
    margin-top: 8px;
    font-weight: 600;
}

.bug-context dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Message après une erreur serveur (help/_error_report_form.html.twig) */
.error-report-card {
    margin-top: 16px;
}

.error-report-note {
    font-size: 0.875rem;
}

/* Crédits : jauge du capital remboursé, conditions, tableau d'amortissement par année */
.loan-icon {
    flex-shrink: 0;
    color: var(--color-primary);
}

.loan-progress {
    display: block;
    height: 8px;
    margin: 6px 0 2px;
    overflow: hidden;
    background: var(--color-primary-light);
    border-radius: 999px;
}

.loan-progress > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
}

.loan-repaid {
    margin: 16px 0;
}

.loan-repaid .loan-progress {
    height: 10px;
}

.loan-terms {
    margin: 0 0 16px;
}

.loan-terms summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
}

.loan-terms dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 16px;
    margin: 12px 0 0;
}

.loan-terms dt {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.loan-terms dd {
    margin: 0;
}

.loan-section {
    margin-top: 32px;
}

.loan-schedules {
    margin: 0 0 12px;
    padding-left: 20px;
}

.loan-outdated p {
    margin: 0 0 8px;
}

.loan-event-form {
    margin-top: 12px;
}

.loan-event-form > summary {
    list-style: none;
}

.loan-event-form > summary::-webkit-details-marker {
    display: none;
}

.loan-event-form[open] > summary {
    margin-bottom: 16px;
}

.loan-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.loan-year {
    border-top: 1px solid var(--color-border);
}

.loan-year > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 12px 0;
    cursor: pointer;
}

.loan-table th[scope="row"] {
    font-weight: 400;
}

.loan-table th[scope="row"] .tag {
    margin-left: 4px;
}

.loan-row-date {
    margin-right: 4px;
    font-weight: 600;
}

.loan-row-past {
    color: var(--color-muted);
}

.loan-row-extra th,
.loan-row-extra td {
    color: var(--color-primary-dark);
    font-style: italic;
}

.loan-footnote {
    font-size: 0.875rem;
}

/* Patrimoine */
.wealth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.wealth-actions form {
    margin: 0;
}

.wealth-actions .btn + .btn {
    margin-top: 0;
}

.wealth-net-tile {
    border-color: var(--color-primary);
}

.wealth-side {
    margin-top: 24px;
}

.wealth-share {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    text-align: right;
}

.wealth-note {
    margin-top: 16px;
    font-size: 0.875rem;
}

.wealth-history td form {
    margin: 0;
}

.home-wealth-total + .home-wealth-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.home-wealth-net {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
}

.home-wealth-net strong {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.home-wealth-sides {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 0;
}

.home-wealth-sides dt {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.home-wealth-sides dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Patrimoine : courbe d'évolution (ligne et étiquettes en couleurs de texte, grille discrète) */
.evolution-chart-filter {
    margin: 0;
}

.evolution-chart-filter select {
    width: auto;
    min-height: 44px; /* cible tactile confortable */
    padding: 8px 12px;
    font: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.evolution-chart-currency {
    margin: 16px 0 0;
    font-size: 1rem;
}

.evolution-chart {
    margin: 24px 0 0;
}

.evolution-chart-plot {
    position: relative;
    height: 200px;
    touch-action: pan-y;
}

.evolution-chart-plot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.evolution-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.evolution-chart-area {
    fill: var(--color-primary-light);
    opacity: 0.7;
}

.evolution-chart-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Graduation : trait sur toute la largeur, valeur posée au-dessus, à gauche */
.evolution-chart-tick {
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px solid var(--color-border);
}

.evolution-chart-tick-zero {
    border-top-color: var(--color-muted);
}

.evolution-chart-tick > span {
    position: absolute;
    bottom: 2px;
    z-index: 1; /* au-dessus de la zone colorée */
    left: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.evolution-chart-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.evolution-chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--color-muted);
    pointer-events: none;
}

.evolution-chart-tooltip {
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    color: var(--color-text);
    font-size: 0.8125rem;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--color-border);
    pointer-events: none;
}

.evolution-chart-tooltip[hidden] {
    display: none;
}

.evolution-chart-tooltip-value {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.evolution-chart-tooltip-detail {
    color: var(--color-muted);
}

.evolution-chart-axis {
    position: relative;
    height: 1.5em;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.evolution-chart-axis > span {
    position: absolute;
    white-space: nowrap;
    transform: translateX(-50%);
}

.evolution-chart-axis > .evolution-chart-axis-first {
    transform: none;
}

.evolution-chart-axis > .evolution-chart-axis-last {
    transform: translateX(-100%);
}

.evolution-chart-note {
    margin: 12px 0 0;
    font-size: 0.875rem;
}

.evolution-chart-table {
    margin-top: 12px;
    font-size: 0.875rem;
}

.evolution-chart-table summary {
    cursor: pointer;
    color: var(--color-primary);
}

/* Page Premium : offres, puis comparatif gratuit / Premium par thème */
.premium-page .card + .card {
    margin-top: 16px;
}

.premium-offers {
    display: grid;
    gap: 12px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .premium-offers {
        grid-template-columns: 1fr 1fr;
    }
}

.premium-offer {
    position: relative;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.premium-offer-featured {
    border: 2px solid var(--color-gold);
}

.premium-offer h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
}

.premium-offer-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--color-text);
    background: var(--color-gold);
}

.premium-price {
    margin: 0 0 8px;
}

.premium-price strong {
    font-size: 2rem;
    line-height: 1.1;
}

.premium-offer-note {
    margin: 0;
    font-size: 0.875rem;
}

.premium-offer-subscribe {
    margin-top: 16px;
}

.premium-checkout-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.premium-checkout-consent input {
    margin-top: 3px;
    flex-shrink: 0;
}

.premium-portal {
    margin-bottom: 16px;
}

.premium-portal p {
    margin: 8px 0 0;
    font-size: 0.875rem;
}

.premium-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.premium-actions .btn {
    margin: 0;
    text-align: center;
    text-decoration: none;
}

.premium-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.premium-table caption {
    padding-bottom: 6px;
    font-weight: 700;
    text-align: left;
}

.premium-table th,
.premium-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.premium-table thead th {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.premium-table tbody th {
    font-weight: 400;
    text-align: left;
}

.premium-table td,
.premium-table thead th:not(:first-child) {
    width: 28%;
    text-align: center;
}

.premium-access {
    vertical-align: middle;
}

.premium-access-yes {
    color: var(--color-primary);
}

.premium-access-no {
    color: var(--color-muted);
}

/* Pots communs */
.pot-tabs {
    display: flex;
    gap: 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--color-border);
}

.pot-tabs a {
    padding: 8px 0;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.pot-tabs a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

.pot-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pot-section {
    margin-top: 24px;
}

.pot-transfers {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pot-transfer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.pot-transfer-mine {
    padding-inline: 8px;
    background: var(--color-primary-light);
    border-radius: var(--radius);
}

.pot-balances summary {
    cursor: pointer;
    color: var(--color-primary);
}

.pot-entry-note {
    font-style: italic;
}

.pot-split {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.pot-split[hidden] {
    display: none;
}

.pot-split legend {
    padding: 0 4px;
    font-weight: 600;
}

.pot-split-lines {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.pot-split-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    border-top: 1px solid var(--color-border);
}

.pot-split-check label {
    display: inline;
    margin-left: 6px;
    font-weight: 400;
}

.pot-split-amount input {
    width: 8em;
    text-align: right;
}

.pot-split-equal {
    font-variant-numeric: tabular-nums;
}

.pot-split-remaining {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.pot-split-remaining[data-state="over"] {
    color: var(--color-error);
}

.pot-split-remaining[data-state="done"] {
    color: var(--color-primary);
}

/* Parrainage : lien à copier, QR code (noir sur blanc, fond et marge dans le SVG, lisible par un appareil photo) */
.referral-link input {
    width: 100%;
}

.referral-link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.referral-link-actions:not(:has(button:not([hidden]))) {
    display: none;
}

.referral-qr {
    margin: 16px 0 0;
    text-align: center;
}

.referral-qr svg {
    width: min(240px, 100%);
    height: auto;
    border-radius: var(--radius);
}

/* Premium offert (essai du filleul, jours du parrain) : bandeau d'expiration sur toutes les pages ;
   offre de retour en attente */
.gift-banner {
    max-width: none;
    color: var(--color-text);
    background: var(--color-gold);
}

.gift-banner a {
    color: inherit;
    font-weight: 600;
}

/* Application installable : bandeau « Hors ligne » (offline_controller.js) et envois bloqués sans réseau */
.offline-banner {
    margin: 0 auto 16px;
    max-width: 420px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px dashed var(--color-muted);
}

.is-offline .fab {
    display: none;
}

.is-offline form[method="post"] :is(button[type="submit"], button:not([type])) {
    opacity: .5;
}

.pwa-steps li + li {
    margin-top: 8px;
}

/* Notifications push (page « Application mobile ») */
.push-topics .field-check + .field-check {
    margin-top: 6px;
}

.push-topics .btn {
    margin-top: 16px;
}