/*
 * Wudget — thème sombre « premium » : fond noir, surfaces grises, détails or.
 * Toutes les couleurs passent par les variables ci-dessous.
 */
:root {
    color-scheme: dark;

    --fond: #0a0a0b;           /* page */
    --surface: #141416;        /* cartes */
    --surface-2: #1c1c1f;      /* tuiles, champs, survol */
    --surface-3: #26262a;      /* menus, fenêtres */
    --bord: #2a2a2f;
    --bord-fort: #3a3a40;

    --texte: #ececee;
    --discret: #8e8e96;

    --or: #c9a55c;
    --or-clair: #e2c47f;
    --or-fonce: #9c7c3c;
    --or-voile: rgba(201, 165, 92, .12);

    --succes: #6fbf8e;
    --erreur: #e07a6f;

    --rayon: .75rem;
    --rayon-petit: .5rem;
    --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px rgba(0, 0, 0, .45);

    /* compatibilité : ancien nom de l'accent */
    --accent: var(--or);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

::selection { background: var(--or-voile); color: var(--or-clair); }

/* ---------- Typographie ---------- */
a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }
h1 { font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; margin: .75rem 0 1.25rem; }
h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; font-weight: 600; }
small, .form-help, .help-text { color: var(--discret); }
strong { font-weight: 600; }

/* ---------- En-tête ---------- */
nav.entete {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    align-items: center;
    padding: .9rem 1.5rem;
    background: rgba(10, 10, 11, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord);
    position: sticky;
    top: 0;
    z-index: 20;
}
.entete-menu { display: contents; }               /* ordinateur : les liens restent dans la barre */
.entete-titre { display: none; }
.barre-onglets { display: none; }
.entete-menu > a { color: var(--discret); font-size: .92rem; letter-spacing: .02em; padding: .25rem 0; border-bottom: 1px solid transparent; }
.entete-menu > a:hover { color: var(--texte); }
.entete-menu > a[aria-current="page"] { color: var(--or); border-bottom-color: var(--or); }
nav.entete .nav-compte { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
nav.entete .nav-compte small { color: var(--discret); letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }

main { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }
main.large { max-width: none; }

/* ---------- Cartes ---------- */
.indicateurs {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ombre);
    overflow-x: auto;
}
.indicateurs h2 { margin-top: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--discret); font-weight: 600; }
.indicateurs h2 a { color: inherit; }
.indicateurs h2 a.titre-lien { display: inline-block; }
.indicateurs h2 a.titre-lien:hover { color: var(--or); }
.indicateurs h2 a.titre-lien::after { content: " ›"; color: var(--or); }

/* Tableau de bord : tuiles chiffrées */
.indicateurs-principaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.tuile { padding: 1.1rem 1.25rem; border-radius: var(--rayon-petit); background: var(--surface-2); border: 1px solid var(--bord); }
.tuile span { display: block; color: var(--discret); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.tuile strong { display: block; font-size: 1.85rem; line-height: 1.25; margin-top: .25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.indicateurs-principaux .tuile:first-child strong { color: var(--or-clair); }
.indicateurs-secondaires { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1rem; color: var(--discret); font-size: .92rem; }
.indicateurs-secondaires strong { font-variant-numeric: tabular-nums; }

/* Épargne */
.entete-carte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.entete-carte h2 { margin: 0; }
.total-carte { text-align: right; }
.total-carte span { display: block; color: var(--discret); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.total-carte strong { font-size: 1.6rem; font-weight: 500; color: var(--or-clair); font-variant-numeric: tabular-nums; }

.support { border-top: 1px solid var(--bord); padding: 1.1rem 0; }
.support header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.support h3 { margin: 0; font-size: 1rem; }
.support h3 small { font-weight: normal; color: var(--discret); margin-left: .35rem; }
.support-simple { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }

.barre { display: flex; height: .5rem; border-radius: 1rem; overflow: hidden; background: var(--surface-3); margin: .9rem 0; }
.seg-provisions { background: linear-gradient(90deg, var(--or-fonce), var(--or)); }
.seg-budgets { background: #8b7fb8; }
.seg-libre { background: #5fa883; }
.pastille { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; vertical-align: baseline; }

dl.repartition { grid-template-columns: 1fr max-content; max-width: 32rem; padding: 0; border: 0; background: none; box-shadow: none; gap: .3rem 1.5rem; }
dl.repartition dt { color: var(--texte); }
dl.repartition dd { text-align: right; font-variant-numeric: tabular-nums; }
dl.repartition .detail { padding-left: 1.2rem; font-size: .88rem; color: var(--discret); }
dl.repartition dt.detail a { color: var(--discret); }
dl.repartition dt.detail a:hover { color: var(--or); }
dl.repartition .libre { font-weight: 600; border-top: 1px solid var(--bord); padding-top: .4rem; }
dl.total-membre { border-top: 1px solid var(--or-fonce); padding-top: .75rem; margin-top: .5rem; }

/* ---------- Listes de définitions (fiches) ---------- */
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; background: var(--surface); padding: 1.25rem 1.5rem; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
dt { color: var(--discret); }
dd { margin: 0; }

/* ---------- Tableaux ---------- */
table { display: block; overflow-x: auto; border-collapse: collapse; margin-bottom: 1rem; }
.indicateurs table { display: table; width: 100%; margin-bottom: 0; }
th, td { padding: .7rem .75rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; white-space: nowrap; color: var(--texte); }
thead th { font-size: .72rem; font-weight: 600; color: var(--discret); text-transform: uppercase; letter-spacing: .08em; border-bottom-color: var(--bord-fort); }
tbody tr:hover td { background: rgba(255, 255, 255, .015); }
td small, th small { color: var(--discret); }
td.montant, th.montant { text-align: right; font-variant-numeric: tabular-nums; }
tfoot th, tfoot td { font-weight: 600; border-bottom: 0; }
tr.total-reel th, tr.total-reel td { border-top: 1px solid var(--or-fonce); color: var(--or-clair); }

/* ---------- Badges, messages ---------- */
.badge { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 1rem; background: var(--or-voile); color: var(--or-clair); border: 1px solid rgba(201, 165, 92, .3); font-size: .7rem; letter-spacing: .03em; }
.flash { padding: .8rem 1.1rem; border-radius: var(--rayon-petit); background: var(--surface); border: 1px solid var(--bord); border-left: 3px solid var(--succes); margin: 0 0 1rem; }
.flash-erreur, [role=alert] { border-left-color: var(--erreur); color: var(--erreur); }
.positif { color: var(--succes); }
.negatif { color: var(--erreur); }

/* ---------- Formulaires ---------- */
form > div, form fieldset > div { margin-bottom: 1rem; }
label { display: block; font-weight: 500; margin-bottom: .35rem; color: var(--texte); font-size: .92rem; }
input[type=checkbox] + label, label:has(input[type=checkbox]) { display: inline; font-weight: normal; }
input:not([type=checkbox]):not([type=hidden]), select {
    width: 100%;
    max-width: 28rem;
    padding: .6rem .75rem;
    font: inherit;
    color: var(--texte);
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-petit);
    background: var(--surface-2);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px var(--or-voile); }
input[type=checkbox] { accent-color: var(--or); }
form div > div[id] > div { margin: .25rem 0 .5rem; }
form div[id] > div > label { font-weight: normal; }
form ul { color: var(--erreur); padding-left: 1.2rem; margin: .25rem 0; }

/* Erreurs de saisie : sous le champ (serveur et navigateur), champ bordé de rouge */
ul.erreurs-champ { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--erreur); font-size: .85rem; line-height: 1.35; animation: erreur-apparait .2s ease-out; }
ul.erreurs-champ li { display: flex; gap: .45rem; align-items: baseline; }
ul.erreurs-champ li::before { content: ""; flex: none; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; transform: translateY(-.12em); }
form > ul.erreurs-champ, form > div > ul.erreurs-champ:first-child { margin: 0 0 1rem; padding: .6rem .8rem; border: 1px solid rgba(224, 122, 111, .45); border-radius: var(--rayon-petit); background: rgba(224, 122, 111, .08); }
.champ-invalide > label { color: var(--erreur); }
input[aria-invalid="true"]:not([type=checkbox]):not([type=radio]), select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erreur); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(224, 122, 111, .18); }
@keyframes erreur-apparait { from { opacity: 0; transform: translateY(-.2rem); } to { opacity: 1; transform: none; } }

/* ---------- Boutons ---------- */
button {
    padding: .6rem 1.15rem;
    font: inherit;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid var(--or);
    border-radius: var(--rayon-petit);
    background: linear-gradient(180deg, var(--or-clair), var(--or));
    color: #15120a;
    cursor: pointer;
    transition: filter .15s, background .15s;
}
button:hover { filter: brightness(1.08); }
button.secondaire, td form button, li form button { background: transparent; color: var(--or); border-color: rgba(201, 165, 92, .45); font-weight: 500; }
td form button, li form button { padding: .2rem .6rem; font-size: .82rem; }
button.danger { background: transparent; color: var(--erreur); border-color: rgba(224, 122, 111, .5); font-weight: 500; }
button.alerte { padding: .15rem .6rem; font-size: .8rem; font-weight: 500; background: rgba(224, 122, 111, .08); color: var(--erreur); border-color: rgba(224, 122, 111, .45); }

/* Suppression discrète */
.zone-danger { margin-top: 3rem; color: var(--discret); font-size: .9rem; }
.zone-danger summary { cursor: pointer; }

/* Tableau de bord : solde disponible modifiable sur le chiffre lui-même */
form.solde-inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
form.solde-inline > div, form.solde-inline div { margin: 0; display: inline; }
form.solde-inline label { display: inline; font-weight: normal; margin: 0; color: var(--discret); }
form.solde-inline input[type=text] {
    width: 7rem; padding: 0 .2rem; font: inherit; color: var(--texte);
    border: 0; border-bottom: 1px dashed var(--bord-fort); border-radius: 0; background: transparent; box-shadow: none;
}
form.solde-inline input[type=text]:focus { border-bottom: 1px solid var(--or); box-shadow: none; }
form.solde-inline button { display: none; padding: 0 .5rem; font-size: .75rem; }
form.solde-inline:focus-within button { display: inline-block; }

/* ---------- Onglets d'une ligne ---------- */
nav.actions { display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--bord); }
nav.actions a { padding: .6rem 1rem; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .92rem; }
nav.actions a:hover { color: var(--texte); }
nav.actions a[aria-current="page"] { border-bottom-color: var(--or); color: var(--or); }

/* ---------- Fenêtres (alertes) ---------- */
dialog { max-width: 30rem; border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: 1.5rem; color: var(--texte); background: var(--surface-3); white-space: normal; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(2px); }
dialog h3 { margin-top: 0; color: var(--or-clair); }
dialog input:not([type=checkbox]):not([type=hidden]), dialog select { background: var(--surface-2); }

/* ---------- Menu du compte ---------- */
.menu-compte { position: relative; }
.menu-compte summary { cursor: pointer; list-style: none; color: var(--texte); font-size: .92rem; padding: .3rem .8rem; border: 1px solid var(--bord-fort); border-radius: 2rem; }
.menu-compte summary:hover { border-color: var(--or); }
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte summary::after { content: " ▾"; color: var(--or); }
.menu-compte summary[aria-current="page"] { border-color: var(--or); color: var(--or); }
.menu-compte-liste { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 30; display: flex; flex-direction: column; min-width: 11rem; background: var(--surface-3); border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); padding: .35rem 0; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.menu-compte-liste a { padding: .5rem 1rem; color: var(--texte); white-space: nowrap; font-size: .92rem; }
.menu-compte-liste a:hover { background: var(--surface-2); color: var(--or); }

/* ==========================================================================
   Mobile : pas de barre en haut, barre d'onglets fixe en bas (voir plus loin)
   ========================================================================== */
@media (max-width: 40rem) {
    nav.entete { display: none; }
    main { padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Listes (remplacent les tableaux) : colonnes quand la place le permet,
   cartes compactes sinon. Même HTML ; le CSS s'adapte à la largeur de la liste.
   ========================================================================== */
.liste { container-type: inline-size; }
.liste-ligne, .liste-entete, .liste-pied { display: grid; gap: .2rem .75rem; align-items: center; }

/* Étroit (mobile) : carte compacte */
.liste-entete { display: none; }
.liste-ligne {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titre montant" "etat actions" "jauge jauge";
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--bord);
}
.liste-ligne:last-of-type { border-bottom: 0; }
.l-titre { grid-area: titre; min-width: 0; }
.l-montant { grid-area: montant; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-etat { grid-area: etat; color: var(--discret); font-size: .85rem; }
.l-actions { grid-area: actions; justify-self: end; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.l-jauge { grid-area: jauge; display: flex; align-items: center; gap: .6rem; }
.l-jauge:not(:has(.jauge)) { display: none; }
.l-jauge small { color: var(--discret); font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 2.5rem; }

.liste-ligne .l-titre small { display: block; color: var(--discret); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-ligne .l-montant { font-size: 1.05rem; font-weight: 500; }
.l-lien { color: var(--texte); font-weight: 500; }
.l-lien::after { content: ""; position: absolute; inset: 0; } /* toute la ligne est cliquable */
.liste-ligne:hover { background: rgba(255, 255, 255, .02); }
.liste-ligne:hover .l-lien { color: var(--or-clair); }

.jauge { flex: 1; height: .3rem; border-radius: 1rem; background: var(--surface-3); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--or-fonce), var(--or-clair)); }

.liste-pied { grid-template-columns: minmax(0, 1fr) auto; padding: .55rem .25rem; color: var(--discret); }
.liste-pied .l-montant { color: var(--texte); }
.liste-pied.total-reel { margin-top: .25rem; padding-top: .8rem; border-top: 1px solid var(--or-fonce); color: var(--or-clair); font-weight: 600; }
.liste-pied.total-reel .l-montant { color: var(--or-clair); font-size: 1.1rem; }
.liste-vide { color: var(--discret); padding: .75rem .25rem; margin: 0; }

/* Large (ordinateur) : une ligne par élément, colonnes alignées sous les en-têtes */
@container (min-width: 44rem) {
    .liste-depenses .liste-entete, .liste-depenses .liste-ligne, .liste-depenses .liste-pied {
        grid-template-columns: minmax(0, 1fr) 7.5rem 10rem 8.5rem 13rem;
        grid-template-areas: "titre montant jauge etat actions";
    }
    .liste-entete {
        display: grid; padding: 0 .25rem .6rem; border-bottom: 1px solid var(--bord-fort);
        font-size: .72rem; font-weight: 600; color: var(--discret); text-transform: uppercase; letter-spacing: .08em;
    }
    .liste-ligne { padding: .7rem .25rem; }
    .l-etat { font-size: .92rem; color: var(--texte); }
    .l-actions { justify-self: start; justify-content: flex-start; }
    .liste-ligne .l-titre small { font-size: .8rem; }
    .liste-pied { grid-template-areas: "titre montant . . ."; }
}

/* ---------- Liens d'action présentés en boutons ---------- */
a.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.15rem;
    font-weight: 600; letter-spacing: .02em; line-height: 1.2;
    border: 1px solid var(--or); border-radius: var(--rayon-petit);
    background: linear-gradient(180deg, var(--or-clair), var(--or));
    color: #15120a;
    transition: filter .15s, background .15s, border-color .15s;
}
a.bouton:hover { filter: brightness(1.08); color: #15120a; }
a.bouton-secondaire { background: transparent; color: var(--or); border-color: rgba(201, 165, 92, .45); font-weight: 500; }
a.bouton-secondaire:hover { filter: none; background: var(--or-voile); border-color: var(--or); color: var(--or-clair); }
a.bouton-alerte { background: rgba(224, 122, 111, .08); color: var(--erreur); border-color: rgba(224, 122, 111, .45); font-weight: 500; }
a.bouton-alerte:hover { filter: none; background: rgba(224, 122, 111, .16); color: var(--erreur); }
a.bouton-petit, td a.bouton { padding: .2rem .6rem; font-size: .82rem; }
p > a.bouton + a.bouton { margin-left: .5rem; }

/* ---------- Déconnexion : bouton (POST avec jeton) présenté comme un lien du menu ---------- */
form.deconnexion { margin: 0; }
form.deconnexion button {
    all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
    padding: .5rem 1rem; color: var(--texte); white-space: nowrap; font-size: .92rem;
}
form.deconnexion button:hover { background: var(--surface-2); color: var(--or); }
form.deconnexion button:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }

/* ---------- Pages de gestion : sous-titre, actions d'une ligne, ajout replié ---------- */
.sous-titre { margin-top: -.75rem; color: var(--discret); }
.actions-ligne { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; }
.actions-ligne form { display: contents; }
details.ajout { margin-top: 1rem; }
details.ajout > summary {
    list-style: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .45rem 1rem; border: 1px solid rgba(201, 165, 92, .45); border-radius: var(--rayon-petit);
    color: var(--or); font-weight: 500; font-size: .92rem;
}
details.ajout > summary::-webkit-details-marker { display: none; }
details.ajout > summary::before { content: "+"; font-size: 1.1em; line-height: 1; }
details.ajout > summary:hover { background: var(--or-voile); border-color: var(--or); color: var(--or-clair); }
details.ajout[open] > summary { margin-bottom: 1rem; }
details.ajout[open] > summary::before { content: "−"; }

/* ---------- Cartes : contenu sans double encadrement, boutons de formulaire ---------- */
.indicateurs dl { background: none; border: 0; padding: 0; box-shadow: none; }
.indicateurs > :last-child, .indicateurs form > :last-child { margin-bottom: 0; }
.indicateurs h3 { margin: 1.5rem 0 .75rem; }
.indicateurs .l-jauge { margin: .25rem 0 1rem; }
.actions-formulaire { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }

/* ---------- Liste Revenus : libellé à gauche, montant à droite ---------- */
.liste-revenus .liste-ligne { grid-template-areas: "titre montant"; }
.ligne-calculee .l-titre > span { color: var(--texte); }
@container (min-width: 44rem) {
    .liste-revenus .liste-entete, .liste-revenus .liste-ligne, .liste-revenus .liste-pied {
        grid-template-columns: minmax(0, 1fr) 10rem;
        grid-template-areas: "titre montant";
    }
}

/* ---------- Épargne : totaux en tuiles, un support = une carte ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .75rem; }
.tuiles .tuile { padding: .85rem 1rem; }
.tuiles .tuile strong { font-size: 1.35rem; }
.tuiles .tuile-total { border-color: rgba(201, 165, 92, .35); background: linear-gradient(180deg, var(--or-voile), var(--surface-2)); }
.tuiles .tuile-total strong { color: var(--or-clair); }
.tuile .pastille { margin-right: .4rem; }
.indicateurs .tuiles + .barre { margin: 1rem 0 0; }

.supports { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.carte-support {
    position: relative; padding: 1rem 1.15rem;
    background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon-petit);
    transition: border-color .15s;
}
.carte-support:hover { border-color: var(--bord-fort); }
.carte-support:hover .l-lien { color: var(--or-clair); }
.carte-support header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.carte-support .l-titre small { display: block; margin-top: .15rem; color: var(--discret); font-size: .8rem; }
.carte-support .l-montant { font-size: 1.25rem; font-weight: 500; }
.carte-support .barre { margin: .9rem 0 .8rem; }
.carte-support dl.repartition { max-width: none; }
.carte-support [role=alert] { margin: .6rem 0 0; }
.support-libre { margin: .75rem 0 0; color: var(--discret); font-size: .88rem; }
.l-detail { position: relative; z-index: 1; } /* liens du détail cliquables au-dessus du lien de la carte */

/* ---------- Liste des dépenses : libellé, par mois, état du mois (✓, date ou ⚠) ---------- */
.liste-depenses .liste-entete, .liste-depenses .liste-ligne {
    grid-template-columns: minmax(0, 1fr) auto 3.75rem;
    grid-template-areas: "titre montant etat";
}
.liste-depenses .l-etat { display: flex; justify-content: center; align-items: center; gap: .15rem; }
.liste-depenses .liste-entete .l-etat { justify-content: center; }
@container (min-width: 44rem) {
    .liste-depenses .liste-entete, .liste-depenses .liste-ligne {
        grid-template-columns: minmax(0, 1fr) 9rem 6.5rem;
        grid-template-areas: "titre montant etat";
    }
}
.liste-ligne .badge { vertical-align: 1px; }

.etat-date { color: var(--or); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .92rem; }
.etat-ok { display: inline-flex; color: var(--or); }
.etat-ok svg, button.alerte svg {
    width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Alerte : icône ⚠ cliquable (au-dessus du lien de la ligne), ligne légèrement rouge */
button.alerte {
    position: relative; z-index: 1; display: inline-flex; padding: .25rem; line-height: 0;
    border: 0; border-radius: 50%; background: none; color: var(--erreur); cursor: pointer;
}
button.alerte:hover { filter: none; background: rgba(224, 122, 111, .14); }
button.alerte:focus-visible { outline: 2px solid var(--erreur); outline-offset: 1px; }
.liste-ligne.ligne-alerte { background: rgba(224, 122, 111, .07); box-shadow: inset 3px 0 0 rgba(224, 122, 111, .55); }
.liste-ligne.ligne-alerte:hover { background: rgba(224, 122, 111, .11); }

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Ajustements communs ---------- */
.liste-pied { grid-template-areas: "titre montant"; }
.tuiles + .liste, .tuiles + .liste-vide { margin-top: 1rem; }
.l-titre small .badge { margin: 0 .4rem 0 0; vertical-align: 0; }

/* ---------- Mobile : marges, tuiles, barre d'actions, tableaux en cartes ---------- */
@media (max-width: 40rem) {
    .indicateurs { padding: 1rem; border-radius: var(--rayon-petit); }
    h1 { margin-bottom: .5rem; }
    .sous-titre { margin-top: 0; font-size: .92rem; }

    /* Totaux : le total sur toute la largeur, les autres tuiles par deux */
    .tuiles, .indicateurs-principaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .tuiles .tuile-total, .indicateurs-principaux .tuile:first-child { grid-column: 1 / -1; }
    .tuiles > .tuile:nth-child(even):last-child, .indicateurs-principaux > .tuile:nth-child(even):last-child { grid-column: 1 / -1; }
    .tuile, .tuiles .tuile { padding: .7rem .85rem; }
    .tuile span { font-size: .66rem; letter-spacing: .06em; }
    .tuile strong, .tuiles .tuile strong { font-size: 1.15rem; }
    .tuiles .tuile-total strong, .indicateurs-principaux .tuile:first-child strong { font-size: 1.5rem; }

    /* En-tête de carte : titre puis total, alignés à gauche */
    .entete-carte { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .total-carte { text-align: left; }

    /* Barre d'actions : une seule ligne qui défile */
    nav.actions { flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.25rem; }
    nav.actions::-webkit-scrollbar { display: none; }
    nav.actions a { white-space: nowrap; padding: .6rem .45rem; }

    /* Fiches : première colonne plus étroite */
    dl { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); gap: .45rem 1rem; }

    /* Listes */
    .liste-ligne { padding: .8rem .5rem; }
    .carte-support { padding: .9rem 1rem; }

    /* Tableaux en cartes : une ligne = un bloc, chaque valeur précédée de son intitulé */
    .indicateurs table, .indicateurs tbody, .indicateurs tr, .indicateurs td { display: block; width: auto; }
    .indicateurs thead { display: none; }
    .indicateurs tr { padding: .75rem 0; border-bottom: 1px solid var(--bord); }
    .indicateurs tbody tr:last-child { border-bottom: 0; }
    .indicateurs td { padding: .1rem 0; border: 0; white-space: normal; text-align: left; }
    .indicateurs td.montant { text-align: left; }
    .indicateurs td:first-child { font-weight: 600; margin-bottom: .15rem; }
    .indicateurs td:empty { display: none; }
    .indicateurs td[data-label]::before { content: attr(data-label) " : "; color: var(--discret); font-size: .85rem; font-weight: 400; }
    .indicateurs td .actions-ligne { justify-content: flex-start; margin-top: .45rem; }
    .indicateurs tbody tr:hover td { background: none; }
}

/* Montants : le symbole « € » reste à côté du champ */
form:not(.solde-inline) input[inputmode=decimal] { width: calc(100% - 1.75rem); margin-right: .4rem; }

/* Fenêtres (alertes) : toujours une marge autour sur petit écran */
dialog { width: min(30rem, calc(100vw - 2rem)); max-width: none; }
/* Boutons des fenêtres : centrés, pleine largeur, les uns sous les autres, faciles à toucher */
dialog button { display: block; width: 100%; padding: .85rem 1.15rem; font-size: 1rem; text-align: center; }
dialog form button, dialog p > button { margin-top: .6rem; }
dialog p:has(> button) { margin: .6rem 0 0; }

/* Bouton sur toute la largeur du contenu (même largeur que les cartes) */
a.bouton-large { display: flex; width: 100%; padding: .8rem 1.15rem; font-size: 1rem; }

/* ---------- Tableau de bord : « Restera » en tête, bouton du solde disponible ---------- */
.indicateurs-principaux .tuile-restera { border-color: rgba(201, 165, 92, .35); background: linear-gradient(180deg, var(--or-voile), var(--surface-2)); }
.indicateurs-principaux .tuile:first-child strong.positif { color: var(--succes); }
.indicateurs-principaux .tuile:first-child strong.negatif { color: var(--erreur); }
.indicateurs-principaux .tuile:first-child strong { color: var(--texte); }
.solde { margin-top: 1rem; }
button.bouton-solde {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .85rem 1rem; text-align: left; font-weight: 400;
    background: var(--surface-2); color: var(--texte);
    border: 1px solid rgba(201, 165, 92, .35); border-radius: var(--rayon-petit);
}
button.bouton-solde:hover { filter: none; border-color: var(--or); background: var(--or-voile); }
button.bouton-solde span { flex: 1; color: var(--discret); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
button.bouton-solde strong { font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
button.bouton-solde svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--or); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indicateurs h2 a.titre-lien { color: var(--or); }
.indicateurs h2 a.titre-lien:hover { color: var(--or-clair); }
.indicateurs-principaux .tuile-restera span { color: var(--or); }

/* ---------- Historique des montants : une carte par montant ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin-top: 1rem; }
.carte-montant {
    display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem;
    background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon-petit);
}
.carte-montant header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--discret); font-size: .85rem; }
.carte-montant header .badge { margin: 0; }
.carte-montant > strong { font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.carte-montant > p { margin: 0; color: var(--discret); font-size: .88rem; }
.carte-montant .actions-ligne { justify-content: flex-start; margin-top: .5rem; }
.actions-ligne button { padding: .2rem .6rem; font-size: .82rem; }

/* ---------- Formulaire en plusieurs groupes de champs (cartes) ---------- */
.groupe-champs > div { margin-bottom: 1rem; }
.groupe-champs > div:last-child { margin-bottom: 0; }
.aide-groupe { margin: -.25rem 0 1.1rem; color: var(--discret); font-size: .88rem; line-height: 1.5; }
.aide-groupe strong { color: var(--texte); font-weight: 600; }
/* Jours de débit / de virement des participants : même graisse que le jour du débit du payeur */
form div[id] > div[data-ligne-form-target=jourPart] > label, form[name^=jour_virement] label { font-weight: 500; }
.ecart { margin: 0; padding-top: .75rem; border-top: 1px solid var(--bord); color: var(--discret); font-size: .92rem; }
.ecart strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Boutons d'action sous le titre (ex. Renommer / Supprimer le foyer) */
.actions-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.25rem; }
dialog .avertissement { margin-top: 0; padding: .5rem .75rem; border-left: 3px solid var(--erreur); color: var(--erreur); background: rgba(224, 122, 111, .08); border-radius: var(--rayon-petit); }
dialog label strong { color: var(--or-clair); }

/* ---------- Détails d'une dépense : provision en tête, journal discret ---------- */
.provision-entete { padding-top: 1rem; padding-bottom: 1rem; }
.provision-chiffres { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .6rem; color: var(--discret); }
.provision-chiffres strong { color: var(--or-clair); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.provision-chiffres .provision-pct { font-size: 1.1rem; color: var(--or); }
.provision-entete .jauge { display: block; height: .45rem; }
.provision-parts { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 0; padding: 0; color: var(--discret); font-size: .88rem; }
.provision-parts strong { color: var(--texte); font-weight: 500; }

.journal { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bord); color: var(--discret); font-size: .85rem; }
.journal h3 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--discret); }
.journal ul { list-style: none; margin: 0; padding: 0; }
.journal li {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "date libelle montant" ". libelle solde";
    gap: 0 .75rem; padding: .45rem 0; border-bottom: 1px solid var(--bord);
}
.journal li:last-child { border-bottom: 0; }
.j-date { grid-area: date; font-variant-numeric: tabular-nums; }
.j-libelle { grid-area: libelle; color: var(--texte); }
.j-libelle small { display: block; }
.j-montant { grid-area: montant; text-align: right; color: var(--texte); font-variant-numeric: tabular-nums; }
.j-solde { grid-area: solde; text-align: right; font-size: .78rem; font-variant-numeric: tabular-nums; }
.journal details { margin-top: .25rem; }
.journal summary { cursor: pointer; color: var(--or); padding: .35rem 0; }
.journal summary:hover { color: var(--or-clair); }

/* ---------- Tableau de bord : en-tête du foyer, cartes cliquables, carte du foyer ---------- */
.entete-foyer { text-align: center; margin: .5rem 0 1.75rem; }
.entete-foyer h1 {
    margin: 0; font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: .02em;
    background: linear-gradient(100deg, var(--or-fonce), var(--or-clair) 45%, var(--or) 70%, var(--or-clair));
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: reflet-or 6s ease-in-out infinite alternate;
}
@keyframes reflet-or { from { background-position: 0% center; } to { background-position: 100% center; } }
@media (prefers-reduced-motion: reduce) { .entete-foyer h1 { animation: none; } }
.date-situation {
    display: inline-block; margin: .6rem 0 0; padding: .3rem .9rem; border-radius: 2rem;
    background: var(--surface-2); border: 1px solid var(--bord-fort); color: var(--discret); font-size: .9rem;
}
.date-situation strong { color: var(--texte); font-weight: 600; }

.carte-cliquable { position: relative; transition: border-color .15s, background .15s; }
.carte-cliquable h2 a.titre-lien::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.carte-cliquable:hover { border-color: rgba(201, 165, 92, .45); }
.carte-cliquable .solde { position: relative; z-index: 1; }

.carte-foyer, .carte-cumul { border-color: rgba(201, 165, 92, .55); }

/* ==========================================================================
   En-tête v2 — ordinateur : barre flottante en verre, liens en pastilles,
   compte avec initiale. Mobile : bouton « Menu » plus large à toucher.
   ========================================================================== */
@media (min-width: 40.0625rem) {
    nav.entete {
        position: sticky; top: .75rem;
        width: calc(100% - 1.5rem); max-width: 72rem; margin: .75rem auto 0;
        flex-wrap: nowrap; gap: .35rem; padding: .45rem .5rem .45rem 1.25rem;
        border: 1px solid rgba(255, 255, 255, .08); border-radius: 2rem;
        background: rgba(24, 24, 27, .7);
        backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 40px rgba(0, 0, 0, .45);
    }
    .entete-titre { display: flex; flex: 1 1 0; align-items: baseline; gap: .6rem; min-width: 0; color: var(--texte); }
    .entete-marque { font-weight: 700; letter-spacing: .05em; color: var(--or-clair); }

    /* Liens au centre, en pastilles */
    .entete-menu > a {
        padding: .5rem 1rem; border: 0; border-radius: 2rem;
        color: var(--discret); font-size: .92rem; transition: background .15s, color .15s;
    }
    .entete-menu > a:hover { color: var(--texte); background: rgba(255, 255, 255, .05); }
    .entete-menu > a[aria-current="page"] { color: var(--or-clair); background: var(--or-voile); box-shadow: 0 0 0 1px rgba(201, 165, 92, .3) inset; }

    /* Compte à droite : initiale dans un rond doré + prénom */
    nav.entete .nav-compte { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
    .menu-compte summary { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .3rem; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
    .avatar {
        display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
        background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #15120a; font-weight: 700; font-size: .85rem;
    }
    main { padding-top: 2rem; }
}


/* ==========================================================================
   Mobile — barre d'onglets en bas (style iOS) et feuille « Compte »
   ========================================================================== */
@media (max-width: 40rem) {
    .barre-onglets {
        display: flex; justify-content: space-around; align-items: stretch;
        position: fixed; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 20;
        padding: .35rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: 1.6rem;
        background: rgba(24, 24, 27, .78);
        backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 36px rgba(0, 0, 0, .55);
    }
    .barre-onglets > a, .barre-onglets > button {
        all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
        min-height: 3.4rem; border-radius: 1.2rem; color: var(--discret);
        font-size: .68rem; font-weight: 500; letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
        transition: color .15s, background .15s;
    }
    .barre-onglets svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .barre-onglets > a[aria-current="page"], .barre-onglets > button.actif { color: var(--or-clair); background: var(--or-voile); }
    .barre-onglets > a:active, .barre-onglets > button:active { background: rgba(255, 255, 255, .06); }
    .barre-onglets > :focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }

    /* Feuille « Compte » : s'ouvre depuis le bas */
    dialog.feuille {
        width: 100%; max-width: none; margin: auto 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 1.5rem 1.5rem 0 0; border-bottom: 0; background: #18181b;
        animation: feuille-monte .22s ease-out;
    }
    @keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } }
    .feuille-entete { display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem 1rem; border-bottom: 1px solid var(--bord); margin-bottom: .5rem; }
    .feuille-entete .avatar { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
    .feuille-entete strong { display: block; font-size: 1.05rem; }
    .feuille-entete small { color: var(--discret); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
    dialog.feuille > a, dialog.feuille form.deconnexion button {
        display: block; padding: .9rem 1rem; border-radius: 1rem; color: var(--texte); font-size: 1rem;
    }
    dialog.feuille > a[aria-current="page"] { background: var(--or-voile); color: var(--or-clair); }
    dialog.feuille form.deconnexion button { color: var(--erreur); }
}
/* Initiale du compte (barre du haut et feuille mobile) */
.avatar {
    display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #15120a; font-weight: 700; font-size: .85rem;
}
/* Dev : la barre de débogage Symfony occupe le bas de l'écran, la barre d'onglets passe au-dessus */
@media (max-width: 40rem) { body:has(.sf-toolbar) .barre-onglets { bottom: calc(2.9rem + env(safe-area-inset-bottom)); } }
.feuille-entete:focus { outline: none; }
.l-montant .badge-part { display: block; width: fit-content; margin: .2rem 0 0 auto; font-weight: 500; }
.groupe-champs > h2 { color: var(--or); }
/* Titres de toutes les cartes en or */
.indicateurs h2 { color: var(--or); }

/* ---------- Signature « WUDGET by Charles DC » : discrète, toujours en haut ---------- */
.signature {
    position: sticky; top: 0; z-index: 25;
    display: flex; justify-content: center; align-items: baseline; gap: .45rem;
    padding: calc(.45rem + env(safe-area-inset-top)) 1rem .45rem;
    background: rgba(10, 10, 11, .72);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(201, 165, 92, .12);
    font-size: .68rem; line-height: 1; user-select: none;
}
.signature-marque {
    font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--or-fonce), var(--or-clair), var(--or));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signature-auteur { color: var(--discret); letter-spacing: .08em; font-style: italic; }
.entete-auteur { margin-left: -.25rem; color: var(--discret); font-size: .7rem; font-style: italic; letter-spacing: .06em; }
/* Ordinateur connecté : la marque est déjà dans la barre du haut */
@media (min-width: 40.0625rem) { body:has(nav.entete) .signature { display: none; } }

/* ---------- Grands titres de page (Tableau de bord, Dépenses, Épargne, Revenus) ---------- */
.titre-page { text-align: center; margin: .75rem 0 1.75rem; }
.titre-surtitre { margin: 0 0 .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--or); }
.titre-page h1 {
    margin: 0; font-size: clamp(2.1rem, 7.5vw, 3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
    background: linear-gradient(180deg, #f3e2b8 0%, var(--or-clair) 45%, var(--or) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: none;
}
.titre-page h1::after {
    content: ""; display: block; width: 2.75rem; height: 3px; margin: .8rem auto 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--or-fonce), var(--or-clair));
}
.titre-page .sous-titre { max-width: 34rem; margin: .9rem auto 0; }
.titre-page .date-situation { margin-top: .9rem; }

/* ==========================================================================
   Notifications (« toasts ») — en haut à droite sur ordinateur, au-dessus des onglets sur mobile
   ========================================================================== */
.toasts {
    position: fixed; z-index: 60; top: 5.25rem; right: 1.25rem; left: auto;
    display: flex; flex-direction: column; gap: .6rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
    pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem;
    margin: 0; padding: .8rem .75rem .8rem .9rem; border: 1px solid var(--bord-fort); border-left: 3px solid var(--succes);
    border-radius: var(--rayon-petit); background: rgba(30, 30, 34, .92); color: var(--texte);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(-.5rem) scale(.98); transition: opacity .25s, transform .25s;
}
.toast.visible { opacity: 1; transform: none; }
.toast.sortie { opacity: 0; transform: translateX(1rem); }
.toast p { margin: .1rem 0 0; font-size: .92rem; line-height: 1.45; }
.toast.flash-erreur { border-left-color: var(--erreur); color: var(--texte); }
.toast-icone svg, .toast-fermer svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast-icone { color: var(--succes); line-height: 0; }
.toast.flash-erreur .toast-icone { color: var(--erreur); }
.toast-fermer { all: unset; cursor: pointer; line-height: 0; padding: .2rem; border-radius: 50%; color: var(--discret); }
.toast-fermer:hover { color: var(--texte); background: rgba(255, 255, 255, .08); }
.toast-fermer:focus-visible { outline: 2px solid var(--or); }
@media (max-width: 40rem) {
    .toasts { top: auto; bottom: calc(6.4rem + env(safe-area-inset-bottom)); right: .75rem; left: .75rem; width: auto; flex-direction: column-reverse; }
    body:has(.sf-toolbar) .toasts { bottom: calc(8.7rem + env(safe-area-inset-bottom)); }
    .toast { transform: translateY(.5rem) scale(.98); }
    .toast.sortie { transform: translateY(.5rem); }
}
@media (prefers-reduced-motion: reduce) { .toast, .toast.visible, .toast.sortie { transition: none; transform: none; } }

/* Fenêtre de confirmation (créée par le contrôleur « confirmation ») */
dialog.dialogue-confirmation h3 { margin-bottom: .5rem; }
dialog.dialogue-confirmation p { margin: 0 0 1rem; line-height: 1.5; }
dialog.dialogue-confirmation button + button { margin-top: .6rem; }
.zone-danger > button, .zone-danger > form button { width: auto; }

/* ---------- Envoi en cours : bouton désactivé avec indicateur, barre de progression Turbo dorée ---------- */
form[aria-busy="true"] button:disabled { cursor: progress; opacity: .8; filter: none; }
form[aria-busy="true"] button:disabled::before {
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: .5em;
    vertical-align: -.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: envoi-tourne .7s linear infinite;
}
@keyframes envoi-tourne { to { transform: rotate(360deg); } }
html .turbo-progress-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--or-fonce), var(--or), var(--or-clair));
    box-shadow: 0 0 10px rgba(201, 165, 92, .55);
}
@media (prefers-reduced-motion: reduce) {
    form[aria-busy="true"] button:disabled::before { animation-duration: 2s; }
    ul.erreurs-champ { animation: none; }
}

/* ---------- Pages d'erreur (403, 404, 500…) ---------- */
.page-erreur { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 0; }
.page-erreur .code-erreur {
    margin: 0; font-size: clamp(4.5rem, 20vw, 7.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em;
    background: linear-gradient(180deg, #f3e2b8 0%, var(--or-clair) 45%, var(--or-fonce) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-erreur h1 { margin: .9rem 0 0; font-size: 1.5rem; }
.page-erreur h1::after {
    content: ""; display: block; width: 2.75rem; height: 3px; margin: .8rem auto 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--or-fonce), var(--or-clair));
}
.page-erreur > p:not(.code-erreur) { max-width: 30rem; margin: 1rem auto 0; color: var(--discret); line-height: 1.55; }
.page-erreur .actions-erreur { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.page-erreur .actions-erreur a.bouton + a.bouton { margin-left: 0; }
@media (max-width: 40rem) {
    .page-erreur .actions-erreur { flex-direction: column-reverse; width: 100%; max-width: 20rem; }
    .page-erreur .actions-erreur a.bouton { justify-content: center; padding: .75rem 1rem; }
}

/* ---------- Texte secondaire, page Confidentialité ---------- */
p.discret { color: var(--discret); font-size: .88rem; }
.page-texte { max-width: 44rem; margin: 0 auto; }
.page-texte section { margin-bottom: 1.25rem; }
.page-texte h2 { margin: 0 0 .6rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--or); font-weight: 600; }
.page-texte p, .page-texte li { line-height: 1.6; }
.page-texte ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.page-texte li + li { margin-top: .3rem; }

/* ==========================================================================
   Pages d'accès (connexion, mot de passe, inscription, invitation) : pleine page, centrées
   ========================================================================== */
main.acces {
    max-width: none;
    min-height: calc(100dvh - 1.6rem - env(safe-area-inset-top));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem;
    padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
    background: radial-gradient(38rem 24rem at 50% 22%, rgba(201, 165, 92, .09), transparent 70%);
}

/* Cadran des 12 mois avec le nom de l'application au centre */
.acces-marque { display: grid; justify-items: center; text-align: center; }
.acces-marque .cadran, .acces-nom { grid-area: 1 / 1; align-self: center; }
.cadran { width: 12.5rem; height: 12.5rem; overflow: visible; }
.cadran circle { fill: none; }
.cadran-piste { stroke: rgba(201, 165, 92, .14); stroke-width: 1.5; }
.cadran-mois {
    stroke: var(--or); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: var(--mois) 12;
    filter: drop-shadow(0 0 6px rgba(201, 165, 92, .45));
    animation: cadran-trace 1.4s cubic-bezier(.2, .7, .2, 1) .15s both;
}
.cadran-graduation { stroke: var(--bord-fort); stroke-width: 1.2; stroke-linecap: round; }
.cadran-graduation.passee { stroke: var(--or-fonce); }
.cadran .cadran-repere { fill: var(--or-clair); animation: cadran-repere .4s ease-out 1.45s both; }
@keyframes cadran-trace { from { stroke-dasharray: 0 12; } }
@keyframes cadran-repere { from { opacity: 0; } }
.acces-nom {
    margin: 0; font-size: 1.95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; padding-bottom: .1em;
    background: linear-gradient(180deg, #f3e2b8 0%, var(--or-clair) 45%, var(--or) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acces-devise { margin: .9rem 0 0; color: var(--discret); font-size: .95rem; }

/* Carte du formulaire */
.acces-carte {
    width: 100%; max-width: 24rem;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 1.25rem;
    background: rgba(20, 20, 22, .78);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px rgba(0, 0, 0, .45);
}
.acces-carte h1 { margin: 0 0 1.25rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.acces-carte form { margin: 0; }
.acces-carte input:not([type=checkbox]):not([type=hidden]) { padding: .75rem .85rem; font-size: 1rem; }
.acces-carte button[type=submit], .acces-carte > a.bouton { width: 100%; padding: .85rem 1rem; font-size: 1rem; }
.acces-carte > a.bouton { display: flex; }
.acces-carte .acces-texte { margin: -.5rem 0 1.25rem; color: var(--discret); line-height: 1.55; }
.acces-carte .acces-texte + .acces-texte { margin-top: -.6rem; }
.acces-carte p.discret { margin: 1rem 0 0; }
.acces-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; font-size: .9rem; }
.acces-options label { margin: 0; color: var(--texte); }
.acces-erreur {
    margin: 0 0 1.25rem; padding: .65rem .85rem;
    border: 1px solid rgba(224, 122, 111, .45); border-radius: var(--rayon-petit);
    background: rgba(224, 122, 111, .08); color: var(--erreur); font-size: .9rem;
}
.acces-actions { display: flex; flex-direction: column; gap: .6rem; }
.acces-actions a.bouton { width: 100%; padding: .8rem 1rem; }
.acces-actions a.bouton + a.bouton { margin-left: 0; }

.acces-pied { max-width: 24rem; text-align: center; color: var(--discret); font-size: .85rem; line-height: 1.5; }
.acces-pied p { margin: 0; }
.acces-pied p + p { margin-top: .6rem; }

@media (max-width: 40rem) {
    main.acces { gap: 1.25rem; padding-top: 1.5rem; }
    .cadran { width: 10.5rem; height: 10.5rem; }
    .acces-nom { font-size: 1.65rem; }
    .acces-devise { margin-top: .6rem; font-size: .9rem; }
    .acces-carte { padding: 1.4rem 1.2rem 1.25rem; border-radius: 1.1rem; }
}
/* Écrans peu hauts (portable, téléphone à l'horizontale) : le formulaire reste visible sans défiler */
@media (max-height: 52rem) {
    main.acces { gap: 1.1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .cadran { width: 9.5rem; height: 9.5rem; }
    .acces-nom { font-size: 1.5rem; }
    .acces-devise { margin-top: .5rem; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cadran-mois, .cadran .cadran-repere { animation: none; }
}