/* ==========================================================================
   VIGIE - Base

   AUCUNE FEUILLE DE STYLE TIERCE. Bootstrap a ete retire : ses classes .modal,
   .modal-backdrop, .btn-primary et .btn-secondary portaient les memes noms que les
   notres, et son « .modal { display: none } » masquait silencieusement TOUTES les
   fenetres de saisie de l'application. Les regles du gabarit de projet qui en
   dependaient (.btn:focus, .form-control, .form-floating, --bs-*) sont parties avec.
   ========================================================================== */

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

html, body {
    margin: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--vigie-texte);
    background: var(--vigie-fond);
    -webkit-text-size-adjust: 100%;   /* Pas de grossissement surprise en paysage sur iOS. */
}

h1:focus { outline: none; }           /* FocusOnNavigate cible le h1 : pas de halo visible. */

/* ---------- Validation des formulaires Blazor ---------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--vigie-erreur); }
.validation-message { color: var(--vigie-erreur); font-size: .875rem; }

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    color: #fff;
    background: var(--vigie-erreur);
}

.blazor-error-boundary::after { content: "Une erreur est survenue."; }

/* ==========================================================================
   VIGIE — Authentification et portail
   Conception responsive : une seule colonne fluide, aucune largeur fixe.
   Les unites relatives et les grilles auto-ajustables couvrent mobile,
   tablette et poste fixe sans requete media dediee.
   ========================================================================== */

:root {
    --vigie-fond: #f4f6f9;
    --vigie-surface: #ffffff;
    --vigie-texte: #1b2430;
    --vigie-texte-doux: #5b6675;
    --vigie-accent: #1b5e8f;
    --vigie-accent-fonce: #14486e;
    --vigie-erreur: #a3241f;
    --vigie-erreur-fond: #fdecea;
    --vigie-alerte: #8a5d00;
    --vigie-alerte-fond: #fdf4e3;
    --vigie-bordure: #dde3ea;
    --vigie-rayon: 10px;
}

/* ---------- Ecrans d'authentification ---------- */

.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--vigie-fond);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    box-shadow: 0 1px 3px rgba(27, 36, 48, .08);
}

.auth-card--wide { max-width: 32rem; }

.auth-title {
    margin: 0 0 .35rem;
    font-size: 1.6rem;
    color: var(--vigie-texte);
}

.auth-subtitle {
    margin: 0 0 1.5rem;
    color: var(--vigie-texte-doux);
    font-size: .95rem;
    line-height: 1.5;
}

.auth-form { display: flex; flex-direction: column; gap: .35rem; }

.auth-form label {
    margin-top: .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--vigie-texte);
}

.auth-form input {
    padding: .7rem .8rem;
    font-size: 1rem;          /* 16px minimum : evite le zoom automatique sur iOS */
    color: var(--vigie-texte);
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: 6px;
}

.auth-form input:focus-visible {
    outline: 2px solid var(--vigie-accent);
    outline-offset: 1px;
    border-color: var(--vigie-accent);
}

.auth-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: .4em;
    text-align: center;
}

.auth-submit {
    margin-top: 1.5rem;
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--vigie-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.auth-submit:hover { background: var(--vigie-accent-fonce); }

.auth-error {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    color: var(--vigie-erreur);
    background: var(--vigie-erreur-fond);
    border-left: 3px solid var(--vigie-erreur);
    border-radius: 4px;
    font-size: .9rem;
}

.auth-secondary { margin-top: 1rem; text-align: center; }

.auth-link {
    background: none;
    border: none;
    color: var(--vigie-texte-doux);
    font-size: .875rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Enrolement du second facteur ---------- */

.mfa-secret {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--vigie-fond);
    border: 1px dashed var(--vigie-bordure);
    border-radius: 6px;
    text-align: center;
}

.mfa-secret-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--vigie-texte-doux);
}

.mfa-secret-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    letter-spacing: .05em;
    color: var(--vigie-texte);
    word-break: break-all;   /* La cle ne doit jamais deborder sur petit ecran. */
}

.mfa-hint {
    margin: 0 0 1.25rem;
    font-size: .85rem;
    color: var(--vigie-texte-doux);
    line-height: 1.5;
}

/* ---------- Portail ---------- */

.portal {
    max-width: 68rem;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.portal-header { margin-bottom: 2rem; }
.portal-header h1 { margin: 0 0 .25rem; font-size: clamp(1.5rem, 4vw, 2rem); }
.portal-subtitle { margin: 0; color: var(--vigie-texte-doux); }

/* auto-fit + minmax : 1 colonne sur mobile, 2 sur tablette, 3 sur grand ecran,
   sans une seule requete media. */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

.portal-tile {
    display: block;
    padding: 1.5rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.portal-tile:hover {
    border-color: var(--vigie-accent);
    box-shadow: 0 2px 8px rgba(27, 36, 48, .1);
}

.portal-tile h2 { margin: .75rem 0 .4rem; font-size: 1.15rem; }
.portal-tile p { margin: 0 0 .9rem; font-size: .9rem; color: var(--vigie-texte-doux); line-height: 1.5; }
.portal-tile i { font-size: 1.6rem; color: var(--vigie-accent); }

.portal-tile--disabled {
    opacity: .65;
    cursor: not-allowed;
    background: var(--vigie-fond);
}

.portal-tile--disabled:hover { border-color: var(--vigie-bordure); box-shadow: none; }

.portal-role {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--vigie-accent);
    background: #e8f1f8;
    border-radius: 999px;
}

.portal-badge {
    display: inline-block;
    padding: .3rem .7rem;
    font-size: .78rem;
    color: var(--vigie-texte-doux);
    background: var(--vigie-fond);
    border-radius: 6px;
    line-height: 1.4;
}

.portal-badge--warning { color: var(--vigie-alerte); background: var(--vigie-alerte-fond); }

.portal-empty { padding: 2.5rem; text-align: center; background: var(--vigie-surface);
                border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); }
.portal-hint { color: var(--vigie-texte-doux); font-size: .9rem; }
.portal-loading { padding: 2rem; text-align: center; color: var(--vigie-texte-doux); }

.app-icon { color: var(--vigie-accent); display: block; }
.portal-tile--disabled .app-icon { color: var(--vigie-texte-doux); }

.auth-recovery {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
}

/* ---------- Codes de recuperation ---------- */

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    background: var(--vigie-fond);
    border: 1px dashed var(--vigie-bordure);
    border-radius: 6px;
}

.recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    text-align: center;
    color: var(--vigie-texte);
}

.recovery-warning {
    padding: .8rem .9rem;
    margin-bottom: 1rem;
    color: var(--vigie-alerte);
    background: var(--vigie-alerte-fond);
    border-left: 3px solid var(--vigie-alerte);
    border-radius: 4px;
    font-size: .9rem;
    line-height: 1.5;
}

/* ---------- Passkeys ---------- */

.auth-submit--primary { margin-top: 0; }

.auth-separator {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 .25rem;
    color: var(--vigie-texte-doux);
    font-size: .85rem;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vigie-bordure);
}

.auth-success {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    color: #1b5e20;
    background: #e8f5e9;
    border-left: 3px solid #2e7d32;
    border-radius: 4px;
    font-size: .9rem;
}

.passkey-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.passkey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--vigie-bordure);
    /* wrap : sur mobile, le bouton passe sous le libelle au lieu de le comprimer. */
    flex-wrap: wrap;
}

.passkey-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.passkey-name { font-weight: 600; color: var(--vigie-texte); }
.passkey-meta { font-size: .8rem; color: var(--vigie-texte-doux); }

.passkey-remove {
    padding: .4rem .8rem;
    font-size: .85rem;
    color: var(--vigie-erreur);
    background: none;
    border: 1px solid var(--vigie-bordure);
    border-radius: 6px;
    cursor: pointer;
}

.passkey-remove:hover { border-color: var(--vigie-erreur); background: var(--vigie-erreur-fond); }

/* ==========================================================================
   MODULE — Gestion de Comptes
   ========================================================================== */

.accounts, .statement { max-width: 68rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }

.accounts-header, .statement-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;      /* Sur mobile, le bouton passe sous le titre. */
    margin-bottom: 1.75rem;
}

.accounts-header h1, .statement-header h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.accounts-subtitle { margin: 0; color: var(--vigie-texte-doux); font-size: .92rem; }
.accounts-loading, .accounts-hint { color: var(--vigie-texte-doux); }

.accounts-empty {
    padding: 2.5rem; text-align: center;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
}

.account-card {
    display: block; padding: 1.35rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.account-card:hover { border-color: var(--vigie-accent); box-shadow: 0 2px 8px rgba(27,36,48,.1); }

.account-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.account-label { font-weight: 600; font-size: 1.05rem; }
.account-type { font-size: .78rem; color: var(--vigie-texte-doux); }

.account-balances, .statement-balances { display: flex; gap: 1.5rem; margin: 1rem 0 .5rem; flex-wrap: wrap; }
.balance { display: flex; flex-direction: column; gap: .15rem; }
.balance-name { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vigie-texte-doux); }

.balance-value {
    font-size: 1.25rem; font-weight: 600;
    /* Chiffres a largeur fixe : les montants s alignent verticalement. */
    font-variant-numeric: tabular-nums;
}

.balance--real .balance-value { font-size: 1.45rem; }

/* La couleur ne porte JAMAIS seule l information : le signe reste affiche,
   pour rester lisible par une personne daltonienne. */
.is-negative { color: var(--vigie-erreur); }
.is-positive { color: #1b5e20; }

.account-pending, .statement-pending {
    margin: .5rem 0 0; padding: .5rem .75rem;
    font-size: .82rem; color: var(--vigie-alerte);
    background: var(--vigie-alerte-fond); border-radius: 6px;
}

.account-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.account-count { font-size: .78rem; color: var(--vigie-texte-doux); }

.account-badge {
    padding: .15rem .55rem; font-size: .72rem; font-weight: 600;
    color: var(--vigie-texte-doux); background: var(--vigie-fond); border-radius: 999px;
}

.account-badge--joint { color: var(--vigie-accent); background: #e8f1f8; }

/* ---------- Releve ---------- */

.statement-back { font-size: .85rem; color: var(--vigie-texte-doux); text-decoration: none; }
.statement-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.statement-bulk { display: flex; gap: .5rem; align-items: center; font-size: .88rem; }

/* Le tableau defile dans SON conteneur : la page ne deborde jamais. */
.statement-scroll { overflow-x: auto; border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); }

.statement-table { width: 100%; border-collapse: collapse; background: var(--vigie-surface); font-size: .9rem; }
.statement-table th { text-align: left; padding: .7rem .8rem; font-size: .76rem; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--vigie-texte-doux); border-bottom: 1px solid var(--vigie-bordure); }
.statement-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--vigie-bordure); }
.statement-table tr:last-child td { border-bottom: none; }
.statement-table tr.is-reconciled { background: #fafbfc; }

.col-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.col-check { width: 2.5rem; text-align: center; }

/* L'EN-TETE SUIT SA COLONNE. Sans ces deux regles, « .statement-table th » (specificite
   0,1,1) l'emporte sur « .col-amount » (0,1,0) : l'intitule reste a gauche pendant que
   les montants s'alignent a droite. Un en-tete qui ne surplombe pas ses valeurs oblige
   a chercher a quelle colonne il appartient. */
.statement-table th.col-amount { text-align: right; }
.statement-table th.col-check { text-align: center; }
.col-label { min-width: 12rem; }

/* ---------- Formulaires et boutons ---------- */

.btn-primary, .btn-secondary {
    padding: .6rem 1.1rem; font-size: .92rem; font-weight: 600;
    border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}

.btn-primary { color: #fff; background: var(--vigie-accent); }
.btn-primary:hover { background: var(--vigie-accent-fonce); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-secondary { color: var(--vigie-texte); background: var(--vigie-surface); border-color: var(--vigie-bordure); }
.btn-secondary:hover { border-color: var(--vigie-accent); }

.modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(27, 36, 48, .45);
    overflow-y: auto;      /* Formulaire long sur petit ecran : le fond defile. */
}

.modal {
    width: 100%; max-width: 28rem; padding: 1.75rem;
    background: var(--vigie-surface); border-radius: var(--vigie-rayon);
    box-shadow: 0 8px 32px rgba(27,36,48,.2);
}

.modal h2 { margin: 0 0 1.25rem; font-size: 1.25rem; }
.modal label { display: block; margin-top: .9rem; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }

.modal input, .modal select {
    width: 100%; padding: .65rem .75rem;
    font-size: 1rem;       /* 16px minimum : evite le zoom automatique sur iOS. */
    border: 1px solid var(--vigie-bordure); border-radius: 6px;
    background: var(--vigie-surface); color: var(--vigie-texte);
}

.modal input:focus-visible, .modal select:focus-visible {
    outline: 2px solid var(--vigie-accent); outline-offset: 1px;
}

.field-hint { display: block; font-weight: 400; font-size: .8rem; color: var(--vigie-texte-doux); }
.field-optional { font-weight: 400; color: var(--vigie-texte-doux); }
.checkbox-row { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 400; }
.checkbox-row input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }

/* Bascule Debit / Credit : deux cibles larges, pensees pour le pouce. */
.direction-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }

.direction-option {
    padding: .75rem; font-size: .95rem; font-weight: 600;
    background: var(--vigie-fond); color: var(--vigie-texte-doux);
    border: 2px solid var(--vigie-bordure); border-radius: 8px; cursor: pointer;
}

.direction-option.is-selected.is-debit  { color: var(--vigie-erreur); border-color: var(--vigie-erreur); background: var(--vigie-erreur-fond); }
.direction-option.is-selected.is-credit { color: #1b5e20; border-color: #2e7d32; background: #e8f5e9; }

.amount-input { font-size: 1.4rem !important; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.form-error   { margin-top: 1rem; padding: .7rem .85rem; font-size: .88rem; color: var(--vigie-erreur); background: var(--vigie-erreur-fond); border-left: 3px solid var(--vigie-erreur); border-radius: 4px; }
.form-warning { margin-top: 1rem; padding: .7rem .85rem; font-size: .88rem; color: var(--vigie-alerte); background: var(--vigie-alerte-fond); border-left: 3px solid var(--vigie-alerte); border-radius: 4px; }
.form-success { margin-bottom: 1rem; padding: .7rem .85rem; font-size: .88rem; color: #1b5e20; background: #e8f5e9; border-left: 3px solid #2e7d32; border-radius: 4px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Virements, edition, partage ---------- */

/* Le libelle devient un bouton pour ouvrir l edition : cible large, sans icone
   supplementaire a chercher du regard. */
.row-edit {
    padding: 0;
    font: inherit;
    color: var(--vigie-accent);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s;
}

.row-edit:hover { text-decoration-color: currentColor; }

.transfer-tag {
    display: block;
    margin-top: .15rem;
    font-size: .74rem;
    color: var(--vigie-texte-doux);
}

.btn-danger {
    padding: .6rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--vigie-erreur);
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: 6px;
    cursor: pointer;
}

.btn-danger:hover { border-color: var(--vigie-erreur); background: var(--vigie-erreur-fond); }

/* ---------- Zone dangereuse ---------- */

/* Separee par un filet PLEIN et decalee vers le bas : elle ne doit jamais se lire
   comme la suite naturelle du formulaire. */
.danger-zone {
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--vigie-erreur-fond);
}

.danger-zone h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--vigie-erreur); }
.danger-zone p { margin: 0 0 .75rem; font-size: .875rem; color: var(--vigie-texte-doux); }

.danger-warning {
    padding: .7rem .9rem;
    background: var(--vigie-erreur-fond);
    border-radius: 6px;
    color: var(--vigie-texte) !important;
}

/* Le champ de confirmation n'est pas un champ de formulaire ordinaire : il porte le
   nom exact du compte, et sa bordure rouge le rappelle a chaque frappe. */
.danger-input {
    width: 100%;
    margin-top: .3rem;
    padding: .55rem .7rem;
    font: inherit;
    border: 1px solid var(--vigie-erreur);
    border-radius: 6px;
}

.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Categories ---------- */

.accounts-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Pastille de couleur : le repere se lit avant le mot, et sert de rappel dans les
   listes de saisie. Elle ne porte JAMAIS seule une information — le libelle est la. */
.category-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .5rem;
    border-radius: 50%;
    vertical-align: -.05em;
}

/* Le retrait dit la hierarchie sans repeter le nom du parent a chaque ligne. */
.category-child { padding-left: 2.2rem !important; }

.category-empty { margin: 0; padding: .9rem 1.1rem; }

.row-edit--danger { margin-left: .9rem; color: var(--vigie-erreur); }

/* Le selecteur natif ne montre pas la valeur retenue : on l'ecrit a cote. */
.color-field { display: flex; align-items: center; gap: .6rem; }
.color-field input[type="color"] { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--vigie-bordure); border-radius: 6px; background: none; cursor: pointer; }
.color-value { font-variant-numeric: tabular-nums; color: var(--vigie-texte-doux); }
.btn-danger:disabled { opacity: .6; cursor: not-allowed; }

/* Suppression a gauche, actions ordinaires a droite : la distance reduit le risque
   de clic malencontreux. */
.modal-actions--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.modal-actions--split .modal-actions { margin-top: 0; }

/* Le lien de partage prend l apparence d un bouton secondaire. */
a.btn-secondary { display: inline-block; text-decoration: none; }

.sharing-list {
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    overflow: hidden;
}

.sharing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--vigie-bordure);
    flex-wrap: wrap;
}

.sharing-row:last-child { border-bottom: none; }
.sharing-name { font-weight: 600; }

.sharing-level {
    padding: .5rem .7rem;
    font-size: .92rem;
    color: var(--vigie-texte);
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: 6px;
}

.sharing-level:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; }

/* ---------- Duplication en lot ---------- */

.modal-intro {
    margin: -.4rem 0 1rem;
    font-size: .95rem;
    color: var(--vigie-texte-doux);
}

/* L echeancier projete : il doit se lire avant le bouton, pas apres. */
.duplicate-plan {
    padding: .8rem 1rem;
    margin: 1rem 0 .4rem;
    font-size: .95rem;
    background: var(--vigie-fond);
    border-left: 3px solid var(--vigie-accent);
    border-radius: 4px;
}

.modal-actions--danger {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 0;
}

/* ---------- Import de releve bancaire ---------- */

a.btn-primary { display: inline-block; text-decoration: none; }

.import-drop {
    padding: 1.6rem;
    background: var(--vigie-surface);
    border: 1px dashed var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
}

.import-drop input[type="file"] { margin: 1rem 0; font: inherit; }

.import-help { margin-top: 1rem; font-size: .9rem; color: var(--vigie-texte-doux); }
.import-help summary { cursor: pointer; font-weight: 600; color: var(--vigie-texte); }
.import-help p { margin: .6rem 0; }
.import-help code { padding: .1rem .3rem; background: var(--vigie-fond); border-radius: 3px; }

/* Le compte des lignes est la premiere chose lue : il resume ce que la validation
   va reellement ecrire. */
.import-summary {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.import-chip {
    padding: .45rem .8rem;
    font-size: .92rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: 999px;
}

.import-chip--match { color: var(--vigie-alerte); background: var(--vigie-alerte-fond); border-color: transparent; }
.import-chip--dup { color: var(--vigie-texte-doux); }

.import-errors { margin: .8rem 0; font-size: .9rem; color: var(--vigie-texte-doux); }
.import-errors summary { cursor: pointer; }
.import-errors ul { margin: .6rem 0 0 1.2rem; }

.import-table .sharing-level { padding: .35rem .5rem; font-size: .88rem; }

/* Une ligne ecartee reste VISIBLE mais en retrait : la masquer empecherait de revenir
   sur le choix. */
.import-row--skipped { opacity: .45; }
.import-row--matched { background: var(--vigie-alerte-fond); }

.import-report {
    padding: 1.4rem 1.6rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
}

.import-report h2 { margin-top: 0; }
.import-report ul { margin: 0 0 1rem 1.2rem; }
.import-report li { margin: .3rem 0; }

/* ==========================================================================
   Coque applicative — en-tete et corps

   En-tete HORIZONTAL et non colonne laterale : une seule application au catalogue,
   et 250 px reserves en permanence a un seul lien sont 250 px de moins pour un
   tableau d operations sur mobile.
   ========================================================================== */

.shell-header {
    position: sticky;
    top: 0;
    z-index: 40;              /* Sous les fenetres modales (z-index 50). */
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .75rem 1.25rem;
    background: var(--vigie-surface);
    border-bottom: 1px solid var(--vigie-bordure);
}

.shell-brand {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--vigie-accent);
    text-decoration: none;
}

.shell-brand:hover { color: var(--vigie-accent-fonce); }

.shell-nav {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.shell-nav a {
    padding: .45rem .75rem;
    font-size: .95rem;
    color: var(--vigie-texte-doux);
    text-decoration: none;
    border-radius: 6px;
}

.shell-nav a:hover { color: var(--vigie-texte); background: var(--vigie-fond); }

/* NavLink pose « active » sur la page courante : le repere doit etre lisible
   autrement que par la couleur seule. */
.shell-nav a.active {
    color: var(--vigie-accent);
    font-weight: 600;
    background: var(--vigie-fond);
    box-shadow: inset 0 -2px 0 var(--vigie-accent);
}

/* Pousse le bloc utilisateur a droite sans marge fixe : sur mobile, le bloc passe
   simplement a la ligne. */
.shell-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.shell-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--vigie-texte);
}

.shell-user form { margin: 0; }

.shell-logout {
    padding: .45rem .8rem;
    font: inherit;
    font-size: .9rem;
    color: var(--vigie-texte-doux);
    background: none;
    border: 1px solid var(--vigie-bordure);
    border-radius: 6px;
    cursor: pointer;
}

.shell-logout:hover { color: var(--vigie-texte); border-color: var(--vigie-texte-doux); }
.shell-logout:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; }

/* Largeur de lecture bornee : une ligne de texte qui traverse un ecran de 27 pouces
   est penible a suivre. Le tableau du releve deborde dans son propre conteneur. */
.shell-body {
    display: block;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

@media (max-width: 30rem) {
    .shell-header { gap: .6rem; padding: .6rem .9rem; }
    .shell-body { padding: 1rem .9rem 2.5rem; }
    .shell-name { display: none; }   /* Le nom cede la place au bouton de deconnexion. */
}

/* Bandeau du framework, affiche si le circuit est perdu. Masque par defaut : c'est
   Blazor qui le revele. */
#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    padding: .7rem 1.25rem;
    color: var(--vigie-texte);
    background: var(--vigie-alerte-fond);
    border-top: 2px solid var(--vigie-alerte);
    box-shadow: 0 -1px 4px rgba(27, 36, 48, .12);
    color-scheme: light only;
}

#blazor-error-ui .reload { color: var(--vigie-accent); }
#blazor-error-ui .dismiss { position: absolute; top: .5rem; right: .9rem; cursor: pointer; }

/* ---------- Mon compte ---------- */

.account-hub-header h1 { margin: 0 0 .25rem; font-size: 1.75rem; }

.account-hub-subtitle { margin: 0 0 1.75rem; color: var(--vigie-texte-doux); }

.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.account-hub-card {
    display: block;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    transition: border-color .15s, box-shadow .15s;
}

.account-hub-card:hover {
    border-color: var(--vigie-accent);
    box-shadow: 0 2px 10px rgba(27, 36, 48, .08);
}

.account-hub-card:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 2px; }
.account-hub-card h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--vigie-accent); }
.account-hub-card p { margin: 0; font-size: .92rem; color: var(--vigie-texte-doux); }

/* ==========================================================================
   Periode et groupement par moyen de paiement
   ========================================================================== */

.period-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 .75rem;
}

.period-picker {
    display: flex;
    align-items: center;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: 8px;
    overflow: hidden;
}

.period-step {
    padding: .55rem .8rem;
    font: inherit;
    line-height: 1;
    color: var(--vigie-texte-doux);
    background: none;
    border: none;
    cursor: pointer;
}

.period-step:hover:not(:disabled) { color: var(--vigie-texte); background: var(--vigie-fond); }
.period-step:disabled { opacity: .3; cursor: not-allowed; }

.period-label {
    min-width: 11rem;
    padding: .55rem .9rem;
    font: inherit;
    font-weight: 600;
    color: var(--vigie-texte);
    background: none;
    border: none;
    border-left: 1px solid var(--vigie-bordure);
    border-right: 1px solid var(--vigie-bordure);
    cursor: pointer;
}

/* Le mode actif se signale par un trait, pas seulement par une teinte : la couleur
   seule est illisible pour une personne daltonienne. */
.period-label.is-selected,
.btn-secondary.is-selected {
    color: var(--vigie-accent);
    box-shadow: inset 0 -2px 0 var(--vigie-accent);
}

.period-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .75rem;
    padding: .9rem 1.1rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
}

.period-total { display: flex; flex-direction: column; gap: .15rem; }

.period-total-name {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vigie-texte-doux);
}

.period-total-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La variation est le chiffre qu'on cherche : elle se detache des deux autres. */
.period-total--net .period-total-value { font-size: 1.25rem; }

/* ---------- Groupes ---------- */

.op-group {
    margin-top: 1.5rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
    overflow: hidden;
}

.op-group-header {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .85rem 1.1rem;
    background: var(--vigie-fond);
    border-bottom: 1px solid var(--vigie-bordure);
}

.op-group-header h2 { margin: 0; font-size: 1rem; }

.op-group-count { font-size: .85rem; color: var(--vigie-texte-doux); }

/* Le total du groupe porte sur TOUTE la periode, jamais sur les lignes affichees. */
.op-group-amount {
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.op-group-detail {
    margin: 0;
    padding: .5rem 1.1rem;
    font-size: .85rem;
    color: var(--vigie-texte-doux);
    border-bottom: 1px solid var(--vigie-bordure);
}

.op-group .statement-scroll { overflow-x: auto; }
.op-group .statement-table tr:last-child td { border-bottom: none; }

.op-group-more {
    display: block;
    width: 100%;
    padding: .7rem;
    font: inherit;
    font-size: .9rem;
    color: var(--vigie-accent);
    background: var(--vigie-fond);
    border: none;
    border-top: 1px solid var(--vigie-bordure);
    cursor: pointer;
}

.op-group-more:hover { background: var(--vigie-bordure); }

/* ---------- Pli des groupes et pictogrammes ---------- */

/* <details>/<summary> NATIF : voir le commentaire de AccountStatement.razor. Ici, on
   ne fait que masquer le marqueur par defaut du navigateur et rendre le bandeau
   cliquable sur toute sa largeur. */
.op-group-details > .op-group-header {
    align-items: center;              /* Remplace le baseline : les glyphes s'alignent au centre. */
    cursor: pointer;
    list-style: none;                 /* Retire le triangle par defaut (Firefox). */
}

.op-group-details > .op-group-header::-webkit-details-marker { display: none; }   /* Safari. */

.op-group-details > .op-group-header:hover { background: var(--vigie-bordure); }

/* Le bandeau est un element interactif : son focus doit se voir au clavier. */
.op-group-details > .op-group-header:focus-visible {
    outline: 2px solid var(--vigie-accent);
    outline-offset: -2px;
}

/* Replie, le bandeau est le dernier element du bloc : plus de filet en bas. */
.op-group-details:not([open]) > .op-group-header { border-bottom: none; }

/* Le chevron PIVOTE, il ne change pas de forme : une fleche qui tourne se suit du
   regard, une fleche remplacee par une autre se relit. */
.op-group-chevron {
    display: inline-flex;
    color: var(--vigie-texte-doux);
    transition: transform .15s ease;
}

.op-group-details[open] > .op-group-header .op-group-chevron { transform: rotate(90deg); }

.op-group-icon {
    display: inline-flex;
    color: var(--vigie-texte-doux);
}

/* Pictogramme de ligne : discret, il accompagne le libelle sans lui voler l'oeil. */
.op-row-icon {
    display: inline-flex;
    margin-right: .45rem;
    vertical-align: -.2em;
    color: var(--vigie-texte-doux);
}

.op-icon { flex: 0 0 auto; }

/* Une ligne pointee est deja grisee : son pictogramme suit, sans quoi il ressortirait
   plus que le texte qu'il accompagne. */
.statement-table tr.is-reconciled .op-row-icon { opacity: .55; }

/* Respect du reglage systeme : pas d'animation du chevron si l'utilisateur l'a demande. */
@media (prefers-reduced-motion: reduce) {
    .op-group-chevron { transition: none; }
}

/* ---------- Colonnes alignees entre groupes ---------- */

/* « table-layout: fixed » n'est applique QUE dans .op-group : .statement-table sert
   aussi a l'import de releve et a la liste des tenants, qui n'ont ni le meme nombre
   ni les memes colonnes. */
.op-group .statement-table { table-layout: fixed; min-width: 47rem; }

/* La colonne « Libelle » n'a pas de largeur : elle absorbe l'espace restant. C'est la
   seule dont le contenu est de longueur imprevisible. */
.op-group .cw-select { width: 2.75rem; }
.op-group .cw-date { width: 7rem; }
.op-group .cw-category { width: 11rem; }
.op-group .cw-amount { width: 8.5rem; }
.op-group .cw-reconciled { width: 5.5rem; }

/* En largeur fixe, une cellule ne s'elargit plus pour son contenu : un libelle long
   deborderait. On le coupe proprement — le libelle entier reste lisible dans la
   fenetre d'edition, ouverte d'un clic sur ce meme libelle. */
.op-group .col-label .row-edit,
.op-group .col-label > span:not(.op-row-icon) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-group .col-label .row-edit { display: inline-block; vertical-align: bottom; }

/* ---------- Saisie unifiee ---------- */

.direction-toggle--three { grid-template-columns: 1fr 1fr 1.3fr; }

.direction-option.is-selected.is-transfert {
    color: var(--vigie-accent);
    border-color: var(--vigie-accent);
    background: #e8f0f6;
}

.direction-option:disabled { opacity: .45; cursor: not-allowed; }

/* Le bloc de repetition est visuellement en retrait : il ne concerne qu'une minorite
   de saisies, et ne doit pas peser sur les autres. */
.repeat-panel {
    margin-top: .75rem;
    padding: .9rem 1rem 1rem;
    background: var(--vigie-fond);
    border-radius: 8px;
}

.repeat-panel label:first-child { margin-top: 0; }
.repeat-panel .duplicate-plan { margin-bottom: .4rem; }

/* ---------- Solde projete et solde de fin de periode ---------- */

/* Une phrase sous chaque montant : trois mots suffisent a lever l ambiguite, et
   coutent moins qu une infobulle que personne n ouvre. */
.balance-hint {
    display: block;
    max-width: 14rem;
    margin-top: .2rem;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--vigie-texte-doux);
}

.period-closing-figures {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Chiffres cales a DROITE : dans un groupe pousse contre le bord droit de la carte,
   des valeurs calees a gauche laisseraient un peigne irregulier sous l'intitule. */
.period-closing-figure { display: flex; flex-direction: column; gap: .1rem; text-align: right; }

/* Le solde reel est le chiffre qu on vient chercher : il se detache du solde banque
   sans que celui-ci disparaisse. */
.period-closing-figure--main .period-closing-value { font-size: 1.5rem; }

/* DATE A GAUCHE, SOLDES A DROITE, SUR LA MEME LIGNE. Empiles, ces deux elements
   occupaient quatre lignes pour trois informations, et repoussaient les operations
   sous la ligne de flottaison. La colonne « auto » se dimensionne sur les montants,
   la colonne « 1fr » absorbe le reste : l'intitule ne pousse jamais les chiffres. */
.period-closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: .4rem;
    margin-top: .75rem;
    padding: .9rem 1.1rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-left: 3px solid var(--vigie-accent);
    border-radius: var(--vigie-rayon);
}

/* La phrase court sous les deux colonnes : la tronquer a la moitie de la carte
   lui ferait perdre trois lignes de plus qu'elle n'en fait gagner. */
.period-closing-note { grid-column: 1 / -1; }

/* Sous 40 rem, les montants et l'intitule ne tiennent plus cote a cote : on repile,
   plutot que de laisser les chiffres se rogner. */
@media (max-width: 40rem) {
    .period-closing { grid-template-columns: minmax(0, 1fr); }
    .period-closing-figure { text-align: left; }
}

.period-closing-name {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--vigie-texte-doux);
}

.period-closing-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.period-closing-note {
    margin: .5rem 0 0;
    font-size: .875rem;
    color: var(--vigie-texte-doux);
}

/* Un mois entierement rapproche est une bonne nouvelle : elle merite d etre dite,
   pas seulement l absence de mauvaise nouvelle. */
.period-closing-note.is-positive { color: #1b5e20; }

/* ---------- Back-office ---------- */

.admin-header h1 { margin: .2rem 0 .25rem; font-size: 1.75rem; }
.admin-subtitle { margin: 0 0 1.5rem; color: var(--vigie-texte-doux); max-width: 46rem; }

.admin-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.4rem;
    background: var(--vigie-surface);
    border: 1px solid var(--vigie-bordure);
    border-radius: var(--vigie-rayon);
}

.admin-card h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.admin-card label { display: block; margin-top: .9rem; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }

/* Le statut se lit au fond, pas a la seule couleur du texte : un badge reste
   identifiable pour une personne daltonienne. */
.admin-badge {
    display: inline-block;
    padding: .15rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
}

.admin-badge--ok   { color: #1b5e20; background: #e8f5e9; }
.admin-badge--warn { color: var(--vigie-alerte); background: var(--vigie-alerte-fond); }
.admin-badge--stop { color: var(--vigie-erreur); background: var(--vigie-erreur-fond); }