/* ============================================================================
   Thème sombre / pastel, dans l'esprit de granet.org (fond très sombre, textes
   pastel) mais avec un accent différent (pas de vert) pour bien distinguer les
   deux sites. Palette centralisée en variables pour rester cohérente partout.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root {
    --bg: #14161c;
    --bg-carte: #1b1e26;
    --bg-entete: #191c24;
    --bordure: #2b2f3b;
    --texte: #e4e1ef;
    --texte-attenue: #8b8fa3;
    --accent-recette: #8ecbe8;   /* pastel bleu — recettes / positif */
    --accent-depense: #f2a2a0;   /* pastel corail — dépenses / négatif */
    --accent-lien: #c3b6ef;      /* pastel lavande — navigation / liens */
    --texte-sur-accent: #1a1a22; /* texte posé sur un fond d'accent (onglet actif, boutons) */
    /* Dérivées du fond des cartes et du texte, pour rester cohérentes quelle
       que soit la palette choisie depuis l'écran Admin (pas de réglage
       séparé pour celles-ci). */
    --ligne-paire: var(--bg-carte);
    --zebre-pct: 15%;           /* intensité des lignes zébrées (réduite automatiquement en thème clair) */
    --survol-pct: 25%;
    --logo-glow: 0 0 2px var(--accent-lien), 0 0 14px color-mix(in srgb, var(--accent-lien) 45%, transparent);
    --ligne-impaire: color-mix(in srgb, var(--bg-carte) calc(100% - var(--zebre-pct)), var(--texte) var(--zebre-pct));
    --ligne-survol: color-mix(in srgb, var(--bg-carte) calc(100% - var(--survol-pct)), var(--texte) var(--survol-pct));
    /* Fond d'une ligne cochée (écran Émargement) : jaune pastel, bien
       distinct des bandes alternées, pour repérer en un coup d'œil ce qui
       est sélectionné. */
    /* Espacement vertical des lignes de listes/tableaux, centralisé : une seule
       valeur à ajuster pour densifier ou aérer toute l'application. */
    --pad-ligne: 3px;
    --fond-coche: color-mix(in srgb, #ffd54f 32%, var(--bg-carte) 68%);
}

html { font-size: var(--taille-police, 100%); }
/* Les contrôles de formulaire n'héritent pas de la taille de texte : on les aligne sur
   leur taille native (13,33 px à 100 %) mais en rem, pour qu'ils suivent le réglage de police. */
button, input, select, textarea { font-size: 0.8333rem; }
* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    margin: 0;
    color: var(--texte);
    background: var(--bg);
}
main { max-width: 760px; margin: 0 auto; padding: 24px; }
main.large { max-width: 1180px; }
main.pleine-largeur { max-width: none; margin: 0; padding: 12px; }
/* Largeur "au contenu" plutôt que pleine largeur ou largeur fixe : le
   conteneur se dimensionne sur sa ligne la plus large (typiquement le
   formulaire d'ajout/modif sur une seule ligne, en largeur naturelle car le
   flex-wrap ne se déclenche pas tant que l'espace dispo est net borné), et
   les marges latérales se répartissent symétriquement autour — adaptées
   d'elles-mêmes à la taille réelle du contenu plutôt qu'une valeur fixe. */
main.serre {
    width: fit-content;
    min-width: min(640px, 100%);
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 12px 20px;
}

a { color: var(--accent-lien); }

.nav-principale {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.nav-principale a {
    color: var(--texte-attenue); text-decoration: none; font-size: 0.9em; font-weight: 500;
    padding: 8px 16px; border-radius: 6px; border: 1px solid var(--bordure);
    background: var(--bg-carte); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nav-principale a:hover { background: var(--ligne-survol); border-color: var(--accent-lien); color: var(--texte); }
.nav-principale a.actif { background: var(--accent-lien); color: var(--texte-sur-accent); border-color: var(--accent-lien); }

.choix-saisie { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bouton-choix {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 12px;
    text-decoration: none; color: var(--texte); background: var(--bg-carte);
}
.bouton-choix:hover { border-color: var(--accent-lien); background: var(--ligne-survol); }
.bouton-choix strong { font-size: 1em; }
.bouton-choix span { font-size: 0.85em; color: var(--texte-attenue); }

.carte {
    background: var(--bg-carte); border: 1px solid var(--bordure); border-radius: 12px;
    padding: 20px 24px; margin-bottom: 20px;
}
.carte h2 { margin-top: 0; font-size: 1.05em; color: var(--texte); }

.entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.entete-carte h2 { flex: 1; min-width: 0; }
.bouton-mini {
    flex-shrink: 0; font-size: 0.8em; font-weight: 600; text-decoration: none;
    color: var(--texte-sur-accent); background: var(--accent-lien); padding: 5px 12px; border-radius: 14px;
    white-space: nowrap;
}
.bouton-mini:hover { filter: brightness(1.1); }

/* En-tête du quadrant mensuel : une ligne de titre à 3 zones (quota
   théorique à gauche / navigation de mois au centre / actions à droite).
   Les flèches sont simplement collées au nom du mois pour l'instant (pas
   de position fixe quelle que soit la longueur du nom — à revoir si
   besoin). */
.entete-carte-mois { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ligne-titre-mois { display: flex; align-items: center; gap: 8px; }
.zone-titre-mois { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.zone-gauche { justify-content: flex-start; }
.zone-centre { justify-content: center; margin: 0; }
.zone-droite { justify-content: flex-end; }
.libelle-mois { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleche-mois {
    color: var(--texte-attenue); text-decoration: none; font-size: 1.3em; line-height: 1;
    padding: 2px 6px; border-radius: 4px;
}
.fleche-mois-an { font-size: 1.05em; }
.fleche-mois:hover { background: var(--ligne-survol); color: var(--texte); }
/* Flèche menant vers un mois clôturé (écran mensuel) : rien n'y étant
   modifiable, la navigation ne doit pas y mener — simple repère visuel. */
.fleche-mois-desactivee { opacity: 0.3; cursor: default; pointer-events: none; }
.fleche-mois-desactivee:hover { background: none; }

/* Lignes calculées (dép. quo. du mois / excédent) : distinctes des postes réels */
.ligne-poste.ligne-calculee {
    border-top: 1px dashed var(--bordure); margin-top: 4px; padding-top: 8px; font-weight: 600;
}
.texte-explicatif-inline { font-size: 0.78em; color: var(--texte-attenue); font-weight: 400; margin-left: 4px; }

.ajustement-quota { display: flex; align-items: center; gap: 6px; }
.bouton-quota {
    width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--bg);
    color: var(--texte); font-size: 0.9em; cursor: pointer; line-height: 1;
}
.bouton-quota:hover { border-color: var(--accent-lien); color: var(--accent-lien); }
.valeur-quota {
    font-size: 1em; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums;
    min-width: 6em; text-align: center;
}
.valeur-quota-figee { color: var(--texte-attenue); font-weight: 600; }

/* Rappel en lecture seule du quota quotidien sur l'accueil (le réglage +/-
   se fait désormais sur l'écran dédié "mensuel"). Plus grand et plus
   contrasté que l'ancien affichage figé, pour rester lisible même sans les
   boutons +/- à côté. */
.quota-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.quota-info-label { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-attenue); }
.quota-info-valeur { font-size: 1.15em; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; }

/* Coche "dépense pivot" (écran mensuel) et son badge dans la liste des lignes */
.case-pivot { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.etiquette-pivot {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
    font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
    background: var(--accent-lien); color: var(--bg-entete);
}

/* Formulaire d'ajout/modification de l'écran mensuel : tout sur une seule
   ligne (libellé / sens / montant / coche pivot / actions), empilé en
   colonne seulement si la largeur ne suffit plus. */
.formulaire-ligne-mensuelle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.formulaire-ligne-mensuelle label {
    display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: var(--texte-attenue);
}
.formulaire-ligne-mensuelle input[type="text"] { min-width: 220px; }
.formulaire-ligne-mensuelle input[type="number"] { width: 110px; }
.formulaire-ligne-mensuelle input[type="text"],
.formulaire-ligne-mensuelle input[type="number"] {
    background: var(--bg); color: var(--texte); border: 1px solid var(--bordure); border-radius: 6px; padding: 8px 10px;
}
.formulaire-ligne-mensuelle .groupe-radio { flex-direction: row; gap: 12px; }
.formulaire-ligne-mensuelle .case-pivot { flex-direction: row; align-items: center; font-size: 0.9em; color: var(--texte); }
.formulaire-ligne-mensuelle .actions-formulaire { margin-left: auto; }

.grille-recap { display: flex; gap: 24px; flex-wrap: wrap; }
.grille-recap > div { display: flex; flex-direction: column; gap: 4px; }
.etiquette { font-size: 0.8em; color: var(--texte-attenue); }
.montant { font-size: 1.15em; font-weight: 600; }
.montant-positif { color: var(--accent-recette); }
.montant-negatif { color: var(--accent-depense); }

.table-simple { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.table-simple th, .table-simple td { text-align: left; padding: var(--pad-ligne) 8px; border-bottom: 1px solid var(--bordure); }
.table-simple th { color: var(--texte-attenue); font-weight: 500; }
.table-simple tbody tr:nth-child(even) { background: var(--ligne-impaire); }
.table-simple td.montant-negatif,
.table-simple td.montant-positif { text-align: right; font-weight: 600; }
.table-simple th:last-child { text-align: right; }

/* Table "compacte" (écran Banque, Visualisation) : chaque champ tient sur une
   seule ligne, jamais de retour à la ligne dans une cellule — y compris le
   libellé, dont la troncature à 80 caractères (côté PHP) garde de toute façon
   une longueur raisonnable ; le texte complet reste consultable au survol via
   l'attribut title. Un conteneur scrollable évite que la page déborde si la
   somme des colonnes dépasse la largeur de l'écran (petit écran, ou colonne
   Émargement affichée en plus). */
.table-scroll { overflow-x: auto; }
.table-scroll table thead th { position: sticky; top: 0; background: var(--bg-carte); z-index: 1; }
.table-compacte { width: auto; }
.table-compacte th, .table-compacte td { white-space: nowrap; }
.libelle-tronque { cursor: help; }

/* Dans les cartes de largeur FIXE (écran Émargement, voir .cartes-emargement
   plus bas) : le tableau remplit toute la largeur de la carte, et c'est
   systématiquement la colonne Libellé qui absorbe le manque de place
   (tronquée avec ellipsis) — jamais les colonnes Date/Compte/Montant, qui
   gardent leur largeur naturelle (nowrap). Ne s'applique pas aux tableaux en
   largeur "au contenu" (carte-ajustee, ex. Visualisation/Historique), qui
   gardent le défilement horizontal en dernier recours. */
.table-largeur-carte { width: 100%; }
.table-largeur-carte .col-libelle-flex { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Ligne cochée : fond jaune pastel, plus visible que l'alternance paire/
   impaire (qu'il écrase volontairement, d'où le !important). */
.table-compacte tbody tr:has(.case-emargement:checked) { background: var(--fond-coche) !important; }

/* Carte qui se dimensionne à son contenu (ici : la largeur du tableau, donc
   sa ligne la plus large) plutôt que de s'étirer sur toute la largeur de
   .pleine-largeur, et se centre dans l'espace laissé libre — même principe
   que main.serre, appliqué à une carte précise plutôt qu'à toute la page. */
.carte-ajustee { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* Bandeau titre + onglets sur une seule ligne (titre d'abord, onglets
   ensuite) : gain de place et uniformisation entre les écrans à onglets
   (Banque, Émargement...). */
.entete-ecran {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 8px;
}
.entete-ecran h1 { margin: 0; white-space: nowrap; }
.entete-ecran .onglets { margin: 0; }

/* Écran Banque : onglets Visualisation / Import */
.onglets { display: flex; gap: 8px; margin-bottom: 16px; }
.onglet {
    color: var(--texte-attenue); text-decoration: none; font-size: 0.9em; font-weight: 500;
    padding: 8px 16px; border-radius: 6px 6px 0 0; border: 1px solid var(--bordure); border-bottom: none;
    background: var(--bg-carte);
}
.onglet:hover { color: var(--texte); }
.onglet.actif { background: var(--accent-lien); color: var(--texte-sur-accent); border-color: var(--accent-lien); }

/* Formulaire de filtres de l'écran Banque : champs sur une ligne, comme
   .formulaire-ligne-mensuelle, mais avec des <select>/<input type="date">
   en plus du texte/nombre. */
.formulaire-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.formulaire-filtres label {
    display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: var(--texte-attenue);
}
.formulaire-filtres input[type="text"],
.formulaire-filtres input[type="date"],
.formulaire-filtres input[type="number"],
.formulaire-filtres select {
    background: var(--bg); color: var(--texte); border: 1px solid var(--bordure); border-radius: 6px; padding: 8px 10px;
}
/* Case à cocher inline dans un formulaire de filtres (ex. "Afficher la
   colonne Émargement") : alignée sur la même ligne de base que les autres
   champs plutôt qu'empilée en colonne comme .formulaire-filtres label. */
.formulaire-filtres label.case-inline {
    flex-direction: row; align-items: center; gap: 8px; font-size: 0.9em; color: var(--texte);
}
.formulaire-filtres input[type="number"] { width: 110px; }
.formulaire-filtres .actions-formulaire { margin-left: auto; }

.texte-explicatif { font-size: 0.85em; color: var(--texte-attenue); margin-top: 0; }
.delta-actuel { font-weight: 600; text-align: right; margin-bottom: 0; }

.grille-accueil {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.grille-accueil .carte { margin-bottom: 0; border-radius: 10px; }
@media (max-width: 900px) {
    .grille-accueil { grid-template-columns: 1fr; }
}

.selecteur-periode { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.selecteur-periode a {
    font-size: 0.8em; color: var(--texte-attenue); text-decoration: none;
    padding: 4px 10px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--bg);
}
.selecteur-periode a:hover { border-color: var(--accent-lien); color: var(--texte); }
.selecteur-periode a.actif { background: var(--accent-lien); color: var(--texte-sur-accent); border-color: var(--accent-lien); }

.liste-vide { color: var(--texte-attenue); font-size: 0.9em; font-style: italic; }

/* Colonnes dépenses / recettes façon "tableau de compta" : lignes zébrées,
   sobres, sans fioritures — réutilisées par plusieurs quadrants. */
.colonnes-dep-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.titre-colonne {
    font-size: 0.75em; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 6px 8px;
}
.titre-depenses { color: var(--accent-depense); }
.titre-recettes { color: var(--accent-recette); }

.ligne-poste {
    display: flex; justify-content: space-between; gap: 8px; padding: var(--pad-ligne) 8px;
    font-size: 0.85em;
}
.ligne-poste:nth-child(even) { background: var(--ligne-impaire); }
.ligne-poste .libelle-poste { color: var(--texte); }
.ligne-poste .montant-poste { font-weight: 600; white-space: nowrap; }

.solde-mois { font-weight: 600; text-align: right; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--bordure); }

.ligne-operation {
    display: flex; align-items: baseline; gap: 8px; padding: var(--pad-ligne) 8px;
    font-size: 0.85em;
}
.ligne-operation:nth-child(even) { background: var(--ligne-impaire); }
.ligne-operation .date-mvt { color: var(--texte-attenue); font-size: 0.85em; width: 3.2em; flex-shrink: 0; }
.ligne-operation .libelle-mvt { flex: 1; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-operation .montant-mvt { font-weight: 600; white-space: nowrap; }

.grille-provisions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ligne-provision {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--pad-ligne) 8px; font-size: 0.9em;
}
.ligne-provision.bande { background: var(--ligne-impaire); }
.total-titre { font-weight: 600; font-size: 0.9em; margin-left: 4px; }
.ligne-provision .nom-provision { color: var(--texte); }
.ligne-provision .solde-provision { font-weight: 600; }
@media (max-width: 480px) {
    .colonnes-dep-rec, .grille-provisions { grid-template-columns: 1fr; }
    /* une seule colonne : bandes une ligne sur deux */
    .ligne-provision.bande { background: transparent; }
    .ligne-provision:nth-child(even) { background: var(--ligne-impaire); }
}

.page-connexion { display: flex; align-items: center; justify-content: center; height: 100vh; }
.carte-connexion {
    background: var(--bg-carte); border: 1px solid var(--bordure); padding: 32px; border-radius: 12px;
    width: 320px;
}
.carte-connexion h1 { margin-top: 0; font-size: 1.3em; color: var(--texte); }
.carte-connexion label { display: block; margin-bottom: 14px; font-size: 0.9em; color: var(--texte-attenue); }
.carte-connexion input {
    display: block; width: 100%; padding: 8px; margin-top: 4px;
    border: 1px solid var(--bordure); border-radius: 4px;
    background: var(--bg); color: var(--texte);
}
.carte-connexion button {
    width: 100%; padding: 10px; background: var(--accent-lien); color: var(--texte-sur-accent);
    border: none; border-radius: 4px; font-size: 1em; font-weight: 600; cursor: pointer;
}
.carte-connexion button:hover { filter: brightness(1.1); }
.erreur { color: var(--accent-depense); font-size: 0.9em; }

.entete {
    background: var(--bg-entete); color: var(--texte); padding: 10px 24px;
    border-bottom: 1px solid var(--bordure);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 14px; font-size: 0.9em;
}
.entete a { color: var(--accent-lien); }

.logo-appli {
    font-family: 'Bungee', cursive, sans-serif;
    font-weight: 400; font-size: 1.8em; line-height: 1; flex-shrink: 0;
    letter-spacing: 0.02em;
    /* Effet "néon" façon granet.org : texte couleur du fond, contour +
       halo dans l'accent lavande. */
    color: var(--bg-entete);
    -webkit-text-stroke: 1.5px var(--accent-lien);
    text-shadow: var(--logo-glow);
}

.entete .nav-principale { flex: 1 1 auto; justify-content: center; }

.compte-utilisateur { flex-shrink: 0; white-space: nowrap; }

/* Écran de saisie */
.message-succes { color: var(--accent-recette); font-size: 0.9em; }

.formulaire-saisie { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.formulaire-saisie label {
    display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--texte-attenue);
}
.formulaire-saisie input[type="text"],
.formulaire-saisie input[type="date"],
.formulaire-saisie input[type="number"],
.formulaire-saisie select {
    padding: 8px; border: 1px solid var(--bordure); border-radius: 4px;
    background: var(--bg); color: var(--texte); font-size: 1em;
}

.groupe-radio { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.groupe-radio label { flex-direction: row; align-items: center; gap: 6px; color: var(--texte); }

.actions-formulaire { display: flex; gap: 10px; align-items: center; }
.actions-formulaire select {
    padding: 8px; border: 1px solid var(--bordure); border-radius: 4px;
    background: var(--bg); color: var(--texte); font-size: 0.95em;
}
.bouton-principal {
    padding: 10px 20px; background: var(--accent-lien); color: var(--texte-sur-accent); border: none;
    border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 0.95em;
}
.bouton-principal:hover { filter: brightness(1.1); }
.bouton-secondaire {
    padding: 10px 20px; background: transparent; color: var(--texte-attenue); border: 1px solid var(--bordure);
    border-radius: 4px; cursor: pointer; font-size: 0.95em; text-decoration: none; display: inline-block;
}
.bouton-secondaire:hover { border-color: var(--accent-lien); color: var(--texte); }

.badge-type-ecriture {
    font-size: 0.7em; padding: 2px 8px; border-radius: 10px;
    background: var(--bordure); color: var(--texte-attenue);
}
.actions-liste { display: flex; gap: 10px; align-items: center; white-space: nowrap; text-align: right; }
.actions-liste a { font-size: 0.85em; }
.form-suppression { display: inline; }
.lien-supprimer {
    background: none; border: none; color: var(--accent-depense); text-decoration: underline;
    cursor: pointer; font-size: 0.85em; padding: 0; font-family: inherit;
}
.badge-emarge { font-size: 0.9em; opacity: 0.7; }

/* Sélecteur de type, à cheval au-dessus des deux colonnes de l'écran de saisie */
.type-selecteur {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--bg-carte); border: 1px solid var(--bordure); border-radius: 12px;
    padding: 14px 20px; margin-bottom: 16px;
}
.type-selecteur .etiquette { font-size: 0.85em; }
.type-selecteur .groupe-radio label {
    padding: 6px 14px; border: 1px solid var(--bordure); border-radius: 16px; margin: 0;
    color: var(--texte);
}
.type-selecteur .groupe-radio input { accent-color: var(--accent-lien); }

.grille-saisie { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) {
    .grille-saisie { grid-template-columns: 1fr; }
}

.filtre-emargement {
    display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--texte-attenue);
    margin-bottom: 12px;
}
.filtre-emargement input { accent-color: var(--accent-lien); }

/* Écran Admin — personnalisation des couleurs */
.grille-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; margin-bottom: 18px; }
.grille-couleurs label {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.9em; color: var(--texte-attenue);
}
.grille-couleurs input[type="color"] {
    width: 48px; height: 32px; padding: 0; border: 1px solid var(--bordure); border-radius: 4px;
    background: var(--bg); cursor: pointer;
}

.etiquette-provisoire {
    font-size: 0.65em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--texte-attenue); border: 1px solid var(--bordure); border-radius: 10px;
    padding: 2px 8px; vertical-align: middle; margin-left: 8px;
}
.resultats-controle { margin-top: 16px; }
.resultats-controle h3 { font-size: 1em; margin: 20px 0 6px; }
.diag-ok { color: var(--accent-recette); font-weight: 600; }
.diag-ko { color: var(--accent-depense); font-weight: 600; }

/* Écran Émargement */
/* 2 colonnes 60 % / 40 % : à gauche la carte Banque (la plus fournie), à
   droite les trois autres cartes empilées. */
.cartes-emargement {
    display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start;
    margin-bottom: 16px;
}
.colonne-emargement { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cartes-emargement .carte { margin-bottom: 0; min-width: 0; }
@media (max-width: 900px) {
    .cartes-emargement { grid-template-columns: 1fr; }
}
.case-emargement { accent-color: var(--accent-lien); cursor: pointer; }
.barre-validation-emargement {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; position: sticky; bottom: 0;
}
.barre-validation-emargement p { margin: 0; }
.barre-validation-emargement button[disabled] { opacity: 0.5; cursor: not-allowed; }

.navigation-emargement { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.navigation-numero { display: flex; align-items: center; gap: 8px; margin: 0 8px; }
.navigation-numero label { display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--texte-attenue); }
.navigation-numero input[type="number"] { width: 6em; }
.form-suppression + .liste-vide, button[disabled].bouton-principal + .liste-vide { margin-top: 8px; }
button.bouton-principal[disabled] { opacity: 0.45; cursor: not-allowed; }
.controles-emargement {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.controles-emargement .texte-explicatif { margin: 0; }
/* Sur la ligne du titre : boutons calés à droite */
.entete-ecran .controles-emargement { margin: 0 0 0 auto; }
.entete-ecran .controles-emargement .bouton-secondaire,
.badge-proposition {
    background: var(--bg-carte); border: 1px solid var(--bordure); border-radius: 6px;
    font-size: 0.9em; padding: 8px 16px; color: var(--texte-attenue);
}
.entete-ecran .controles-emargement .bouton-secondaire { font-weight: 500; text-decoration: none; cursor: pointer; }
.entete-ecran .controles-emargement .bouton-secondaire:hover { color: var(--texte); border-color: var(--accent-lien); }
.badge-proposition[hidden] { display: none; }

/* Pseudo-bouton d'aide : bulle affichée au survol (ou au focus clavier) */
.aide-survol {
    position: relative; display: inline-block; cursor: help; font-size: 0.9em; font-weight: 500;
    color: var(--texte-attenue); padding: 8px 14px; border: 1px solid var(--bordure);
    border-radius: 6px; background: var(--bg-carte);
}
.aide-survol:hover, .aide-survol:focus { color: var(--texte); outline: none; }
.aide-bulle {
    display: none; position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 6px;
    width: 34em; max-width: 90vw; padding: 12px 14px; border-radius: 6px;
    background: var(--bg-carte); color: var(--texte); border: 1px solid var(--accent-lien);
    box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 0.9em; font-weight: 400; line-height: 1.45; cursor: default;
}
.aide-survol:hover .aide-bulle, .aide-survol:focus .aide-bulle { display: block; }

.colonne-provisions { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.colonne-provisions .carte { margin-bottom: 0; }
.diagramme-provision { width: 100%; height: auto; display: block; }

/* Écran Provisions (refonte 09/10) */
.filtre-provisions .ligne-filtre { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.filtre-provisions .ligne-filtre:last-child { margin-bottom: 0; }
.filtre-provisions label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--texte-attenue); }
.filtre-provisions .case-statut { flex-direction: row; align-items: center; gap: 6px; color: var(--texte); }
.filtre-provisions .case-statut input { accent-color: var(--accent-lien); cursor: pointer; }
.filtre-provisions select { flex: 1; min-width: 10em; }

.form-mouvement { display: flex; flex-direction: column; gap: 10px; }
.form-mouvement .ligne-champs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-mouvement label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--texte-attenue); }
.form-mouvement .groupe-radio label { flex-direction: row; align-items: center; gap: 6px; color: var(--texte); }
.form-mouvement .champ-libelle { flex: 1; min-width: 8em; }
/* « Enregistrer » est calé sur la 2ᵉ ligne (libellé / montant) à la hauteur des champs */
.form-mouvement .ligne-champs .bouton-principal { padding-top: 6px; padding-bottom: 6px; }

.periodes-graphe { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.bouton-secondaire.bouton-petit { padding: 5px 14px; font-size: 0.85em; }
.bouton-secondaire.actif { background: var(--accent-lien); color: var(--texte-sur-accent); border-color: var(--accent-lien); }

/* Écran Dépenses quotidiennes (10/2026) : saisie sur une ligne + grille mensuelle façon tableur */
.formulaire-quotidien { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.formulaire-quotidien label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--texte-attenue); }
.formulaire-quotidien .groupe-radio label { flex-direction: row; align-items: center; gap: 6px; color: var(--texte); }
.formulaire-quotidien .champ-libelle { flex: 1; min-width: 12em; }
.ligne-filtre-statut { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ligne-filtre-statut .case-statut { display: flex; align-items: center; gap: 6px; font-size: 0.9em; }
.ligne-filtre-statut .case-statut input { accent-color: var(--accent-lien); cursor: pointer; }

.carte-grille-jours { padding-left: 8px; padding-right: 8px; }
.entete-grille { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; padding: 0 8px; }
.entete-grille h2 { margin: 0; }
.grille-jours {
    --ton-gris-1: color-mix(in srgb, var(--texte) 7%, var(--bg-carte));
    --ton-gris-2: color-mix(in srgb, var(--texte) 14%, var(--bg-carte));
    --ton-gris-3: color-mix(in srgb, var(--texte) 24%, var(--bg-carte));
    --ton-dep-1: color-mix(in srgb, var(--accent-depense) 22%, var(--bg-carte));
    --ton-dep-2: color-mix(in srgb, var(--accent-depense) 36%, var(--bg-carte));
    --ton-dep-3: color-mix(in srgb, var(--accent-depense) 52%, var(--bg-carte));
    --ton-rec-1: color-mix(in srgb, var(--accent-recette) 22%, var(--bg-carte));
    --ton-rec-2: color-mix(in srgb, var(--accent-recette) 36%, var(--bg-carte));
    --ton-rec-3: color-mix(in srgb, var(--accent-recette) 52%, var(--bg-carte));
    width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.8rem;
}
.grille-jours col.col-date { width: 4.8em; }
.grille-jours col.col-var { width: 5.2em; }
.grille-jours col.col-montant { width: 4.6em; }
.grille-jours thead th {
    background: var(--bg-entete); color: var(--texte); font-weight: 600; padding: 4px 6px;
    position: sticky; top: 0; z-index: 2; text-align: center;
}
.grille-jours .entete-sens { display: flex; justify-content: space-between; letter-spacing: 0.04em; }
.grille-jours td { padding: var(--pad-ligne) 5px; border: 1px solid color-mix(in srgb, var(--bg-carte) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte); }
.grille-jours td a { color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; }
.grille-jours td.c-dep a:hover, .grille-jours td.c-rec a:hover { text-decoration: underline; }
.grille-jours .c-montant, .grille-jours .c-var { text-align: right; font-variant-numeric: tabular-nums; }
.grille-jours .c-date { font-weight: 600; }
.grille-jours .c-var { font-weight: 600; }
.grille-jours .c-var.neg { font-style: italic; }
.grille-jours tr.suite-jour td { border-top: 1px dotted color-mix(in srgb, var(--texte) 35%, transparent); }
.grille-jours tr.aujourdhui td.c-date { outline: 2px solid var(--accent-lien); outline-offset: -2px; }
/* teintes : 1 = lun/mer/ven, 2 = mar/jeu, 3 = week-end et jours fériés */
.grille-jours tr.ton-1 .c-vide { background: var(--ton-gris-1); }
.grille-jours tr.ton-2 .c-vide { background: var(--ton-gris-2); }
.grille-jours tr.ton-3 .c-vide { background: var(--ton-gris-3); }
.grille-jours tr.ton-1 .c-dep, .grille-jours tr.ton-1 .c-date, .grille-jours tr.ton-1 .c-var-g { background: var(--ton-dep-1); }
.grille-jours tr.ton-2 .c-dep, .grille-jours tr.ton-2 .c-date, .grille-jours tr.ton-2 .c-var-g { background: var(--ton-dep-2); }
.grille-jours tr.ton-3 .c-dep, .grille-jours tr.ton-3 .c-date, .grille-jours tr.ton-3 .c-var-g { background: var(--ton-dep-3); }
.grille-jours tr.ton-1 .c-rec, .grille-jours tr.ton-1 .c-var-d { background: var(--ton-rec-1); }
.grille-jours tr.ton-2 .c-rec, .grille-jours tr.ton-2 .c-var-d { background: var(--ton-rec-2); }
.grille-jours tr.ton-3 .c-rec, .grille-jours tr.ton-3 .c-var-d { background: var(--ton-rec-3); }

/* Tableaux annexes (11/10) */
.onglet-inactif { opacity: 0.45; cursor: default; }
.badge-attente { font-size: 0.8em; color: var(--accent-depense); }
.table-simple td, .table-simple th { vertical-align: top; }

/* Saisie rapide mobile (14/10) */
.case-rester { display: flex !important; align-items: center; gap: 8px; }
.case-rester input { display: inline-block !important; width: auto !important; margin: 0 !important; }
.page-rapide { margin: 0; background: var(--bg); color: var(--texte); }
.rapide { max-width: 480px; margin: 0 auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }
.rapide-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rapide-entete h1 { margin: 0; font-size: 1.3em; }
.rapide-liens a { margin-left: 14px; color: var(--accent-lien); font-size: 0.95em; }
.rapide .carte { margin-bottom: 14px; }
.rapide-message { background: var(--bg-carte); border: 1px solid var(--accent-recette); color: var(--accent-recette); padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 0.95em; }
.rapide-message.rapide-erreur { border-color: var(--accent-depense); color: var(--accent-depense); }
.rapide-form { display: flex; flex-direction: column; gap: 14px; }
.rapide-sens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rapide-sens input { position: absolute; opacity: 0; pointer-events: none; }
.rapide-sens label {
    text-align: center; padding: 14px 8px; border: 2px solid var(--bordure); border-radius: 10px;
    font-weight: 600; font-size: 1.05em; color: var(--texte-attenue); background: var(--bg); cursor: pointer;
}
.rapide-sens input:checked + .sens-depense { border-color: var(--accent-depense); color: var(--accent-depense); }
.rapide-sens input:checked + .sens-recette { border-color: var(--accent-recette); color: var(--accent-recette); }
.rapide-sens input:focus-visible + label { outline: 2px solid var(--accent-lien); outline-offset: 2px; }
.rapide-champ { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: var(--texte-attenue); }
.rapide-champ input { font-size: 1.15rem; padding: 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--bg); color: var(--texte); }
.rapide-champ #montant { font-size: 1.8rem; font-weight: 600; text-align: right; }
.rapide-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { padding: 8px 12px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--bg); color: var(--texte); font-size: 0.9rem; cursor: pointer; }
.puce:active { background: var(--accent-lien); color: var(--texte-sur-accent); }
.rapide-envoyer { padding: 16px; font-size: 1.15rem; font-weight: 700; border: none; border-radius: 10px; background: var(--accent-lien); color: var(--texte-sur-accent); cursor: pointer; }
.rapide-envoyer:disabled { opacity: 0.6; }
.rapide-liste { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
.rapide-liste li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--bordure); flex-wrap: wrap; }
.rapide-liste .rl-lib { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapide-liste .rl-date { color: var(--texte-attenue); }
.rapide-liste .rl-mt { font-weight: 600; white-space: nowrap; }
@media (min-width: 700px) { .page-rapide .rapide { padding-top: 32px; } }