/* Pico agrandit sa taille de police avec la largeur d'écran (pensé pour du
   contenu éditorial). On fige une taille raisonnable pour une appli dense. */
/* IMPORTANT : Pico définit ses couleurs par défaut dans
   ":root:not([data-theme=dark]), [data-theme=light]", plus spécifique qu'un
   simple ":root". Sans reproduire ce même sélecteur ici, nos variables
   perdent silencieusement face à celles de Pico malgré l'ordre de chargement. */
:root:not([data-theme=dark]),
[data-theme=light],
:root {
  font-size: 87.5%;
  --pico-background-color: #f7f8fa;
  --couleur-orange-clair: #fdead9;
  --pico-card-background-color: #fff;

  /* Palette : bleu clair pour les actions principales et la navigation,
     orange conservé pour son usage sémantique (dépenses), gris pour les
     fonds neutres. */
  --couleur-orange: #ea580c;
  --couleur-orange-hover: #c2410c;
  --couleur-bleu: #3b82f6;
  --couleur-bleu-hover: #2563eb;
  --couleur-bleu-clair: #eaf1fe;
  --couleur-gris: #eef1f5;
  --couleur-gris-texte: #556;
  --couleur-texte-fonce: #1f2937;
  --couleur-orange-badge-texte: #b45309;
  --couleur-vert: #15803d;
  --couleur-vert-clair: #dcfce7;

  /* Boutons/liens/focus Pico dans le même bleu que la navigation */
  --pico-primary: var(--couleur-bleu);
  --pico-primary-background: var(--couleur-bleu);
  --pico-primary-border: var(--couleur-bleu);
  --pico-primary-hover: var(--couleur-bleu-hover);
  --pico-primary-hover-background: var(--couleur-bleu-hover);
  --pico-primary-hover-border: var(--couleur-bleu-hover);
  --pico-primary-focus: rgba(59, 130, 246, 0.35);
  --pico-primary-inverse: #fff;
  --pico-primary-underline: rgba(59, 130, 246, 0.5);
  --pico-primary-hover-underline: var(--couleur-bleu-hover);
}

body {
  background: var(--pico-background-color);
}

main.container {
  padding-block: 0.75rem;
}

.positif {
  color: #1b7a3d;
}

.negatif {
  color: var(--couleur-orange-hover);
}

.text-muted {
  color: var(--pico-muted-color);
}

/* Barre de navigation pleine largeur, blanche, façon barre d'appli classique */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pico-background-color);
  border-bottom: 1px solid #e5e9f0;
  margin-bottom: 0.5rem;
}

/* La nav étant collante (position: sticky), un lien vers une ancre (#operation-12,
   #echeance-5, #compte-3...) amènerait sinon la ligne visée juste sous elle,
   masquée. On réserve la hauteur de la nav comme marge de défilement. */
[id] {
  scroll-margin-top: 2.9rem;
}

.topbar nav {
  padding: 0.15rem 0;
}

/* Logo : pastille dégradé bleu → orange + nom de l'appli */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--couleur-texte-fonce);
}

.brand-mark {
  display: block;
  height: 4.5rem;
  width: auto;
  object-fit: contain;
}

/* Liens de nav : texte simple, accent bleu au survol/actif, soulignement actif */
.nav-links {
  gap: 0.4rem;
}

/* Centrage vertical forcé au niveau du <li> lui-même, indépendamment du
   contenu (<a> ou <form><button> pour la déconnexion) : Pico traite les
   deux différemment en interne (négatif de marge pour "a", juste un reset
   partiel pour "button"), ce qui les faisait légèrement décaler l'un par
   rapport à l'autre malgré la reconstruction de button.nav-link plus bas.
   display:flex + align-items:center ici s'affranchit de cette différence
   au lieu d'essayer de la reproduire à l'identique. */
.nav-links li {
  display: flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 2.2rem;
  color: var(--couleur-gris-texte);
  font-weight: 600;
  font-size: 0.9em;
  text-decoration: none;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
}

.nav-link:hover {
  color: var(--couleur-bleu);
  background: var(--couleur-bleu-clair);
}

/* Focus clavier (Tab) ou juste après un clic sur un <button> (Mon compte,
   Déconnexion) : même traitement visuel que le survol, plutôt que l'anneau
   bleu de Pico qui casse l'alignement avec les icônes voisines. Pico
   l'applique via box-shadow (pas outline), sur :focus — il faut neutraliser
   les deux mécanismes et cibler le même sélecteur pour bien l'emporter. */
.nav-link:focus,
.nav-link:focus-visible {
  outline: none;
  box-shadow: none;
  color: var(--couleur-bleu);
  background: var(--couleur-bleu-clair);
}

.nav-link.active {
  color: #fff;
  background: var(--couleur-bleu);
  height: 2.6rem;
}

.nav-link.active:hover {
  color: #fff;
  background: var(--couleur-bleu);
}

.nav-link-muted {
  color: var(--pico-muted-color);
  font-weight: 500;
}

/* Liens de nav réduits à une icône (Paramètres, Déconnexion) */
.nav-icon {
  padding: 0 0.5rem;
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Le bouton de déconnexion (désormais un <button> dans un <form>, pas un
   <a>, pour forcer un vrai POST protégé par CSRF) doit se fondre
   visuellement avec les autres liens de nav. */
.form-logout {
  display: contents;
}

/* Filet de sécurité : display:contents devrait déjà faire disparaître la
   boîte du <form> (marges comprises), mais certains navigateurs le gèrent
   de façon incomplète — on force explicitement zéro marge sur le
   formulaire et tout ce qu'il contient, pour garantir un espacement
   identique aux autres icônes de la nav (gap de .nav-links, rien de plus). */
.form-logout,
.form-logout * {
  margin: 0;
}

/* Reconstruction complète et autonome des boutons de nav (Mon compte,
   Déconnexion), plutôt que d'empiler des resets ciblés contre les styles
   par défaut du navigateur sur <button> (source du décalage persistant
   face aux <a> voisins). all:unset neutralise tout d'un coup, puis on
   redéclare explicitement uniquement ce qui est nécessaire, dans cette
   même règle à forte spécificité (élément + classe) pour ne dépendre
   d'aucune autre règle. */
button.nav-link {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  padding: 0 0.5rem !important;
  color: var(--couleur-gris-texte);
  font-weight: 600;
  font-size: 0.9em;
  border-radius: 0.4rem;
  cursor: pointer;
}

button.nav-link.nav-link-muted {
  color: var(--pico-muted-color);
  font-weight: 500;
}

/* Cartes (tableau de bord, sections Paramètres...) : léger relief */
article {
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Tableaux plus aérés, sans grille trop marquée */
table {
  border-collapse: collapse;
}

table thead th {
  color: var(--couleur-bleu);
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fff;
  border-bottom: 2px solid var(--couleur-bleu);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

table thead th:first-child {
  border-top-left-radius: 0.5rem;
}

table thead th:last-child {
  border-top-right-radius: 0.5rem;
}

table tbody tr:hover {
  background: rgba(15, 23, 42, 0.025);
}

/* Sur un écran étroit (mobile), le tableau garde sa mise en page normale
   (colonnes lisibles) et défile horizontalement au doigt, plutôt que de
   s'écraser sous table-layout:fixed jusqu'à faire passer chaque lettre
   d'un en-tête à la ligne. */
.table-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-x table {
  min-width: 900px;
}

/* Sans table-layout:fixed, un <colgroup> n'est qu'une suggestion : le
   navigateur recalcule les largeurs réelles selon le contenu et ignore le
   %, surtout pour les colonnes étroites (une date ne rétrécit jamais sous
   sa largeur naturelle). Avec "fixed", le % est respecté strictement, et
   le contenu trop large passe à la ligne au lieu d'agrandir la colonne. */
.table-operations,
.table-echeancier {
  table-layout: fixed !important;
}

.table-operations td,
.table-echeancier td {
  overflow-wrap: break-word;
}

.table-operations tbody tr td:first-child {
  border-left: 4px solid transparent;
}

.row-kind-depense td:first-child {
  border-left-color: var(--couleur-orange);
}

.row-kind-recette td:first-child {
  border-left-color: var(--couleur-vert);
}

.row-kind-mixte td:first-child,
.row-kind-aucune td:first-child {
  border-left-color: var(--couleur-gris-texte);
  opacity: 1;
}

/* Échéance à venir ce mois-ci, pas encore matérialisée en vraie opération :
   distincte visuellement (italique, fond légèrement teinté), et sans les
   actions d'une opération réelle (pas de case Pointée, pas de suppression —
   ça n'existe pas encore en tant que transaction). */
.row-prevue {
  font-style: italic;
  color: var(--pico-muted-color);
  background: rgba(15, 23, 42, 0.015);
}

.row-prevue td {
  border-bottom-style: dashed;
}

.badge-prevu {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--couleur-gris);
  color: var(--couleur-gris-texte);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table td, table th {
  vertical-align: middle;
}

.table-operations td:nth-child(7),
.table-operations th:nth-child(7) {
  text-align: right;
}

.table-operations td:nth-child(8),
.table-operations th:nth-child(8),
.table-operations td:nth-child(9) {
  text-align: center;
}

/* Espace resserré entre Pointé et Actions : par défaut, le padding standard
   de chaque cellule s'additionne et laisse un vide trop large entre les deux. */
.table-operations td:nth-child(8) {
  padding-right: 0.25rem;
}

.table-operations td:nth-child(9) {
  padding-left: 0.25rem;
}

.table-echeancier td:nth-child(7),
.table-echeancier th:nth-child(7) {
  text-align: right;
}

.table-echeancier td:nth-child(8),
.table-echeancier th:nth-child(8),
.table-echeancier td:nth-child(11),
.table-echeancier th:nth-child(11),
.table-echeancier td:nth-child(12) {
  text-align: center;
}

.table-echeancier tfoot td {
  border-top: 2px solid var(--couleur-bleu);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.input-jour {
  width: 4rem;
}

/* Tableau de bord compact : tout tenir dans un écran sans scroll (FHD) */
.dashboard-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.dashboard-entete h1 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.dashboard-filtre-compte label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0;
  font-size: 0.85em;
}

.dashboard-filtre-compte select {
  height: 2.2rem;
  box-sizing: border-box;
  padding: 0.3rem 0.6rem;
  min-width: 200px;
}

.dashboard h2 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.dashboard .grid {
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

.dashboard article {
  padding: 0.6rem 1rem;
  margin-bottom: 0;
}

/* Bloc soldes pointé/théorique : un seul article compact, les deux valeurs
   côte à côte plutôt que deux cartes empilées avec leur propre <header>
   Pico (bien plus haut) — l'objectif étant de libérer de la hauteur pour
   la liste de rappels juste en dessous. */
.dashboard-soldes {
  display: flex;
  padding: 0.55rem 1rem;
}

.dashboard-solde-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dashboard-solde-item + .dashboard-solde-item {
  padding-left: 1.25rem;
  margin-left: 1.25rem;
  border-left: 1px solid #e5e9f0;
}

.dashboard-solde-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--couleur-gris-texte);
}

.dashboard-solde-montant {
  font-size: 1.15rem;
}

/* Widget "Rappels" : liste compacte, les dépassés ressortent en rouge. */
.dashboard-rappels {
  margin-top: 0.6rem;
}

.dashboard-rappels ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-rappels li {
  /* Pico définit "li { list-style: square }" au niveau élément — une règle
     directement sur <li> l'emporte toujours sur le "list-style: none" hérité
     du <ul> parent, quelle que soit la spécificité. Il faut donc annuler ici,
     sur le <li> lui-même, plutôt que sur le <ul>. */
  list-style: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid #e5e9f0;
  font-size: 0.9em;
}

.dashboard-rappels li:last-child {
  border-bottom: none;
}

.dashboard-rappels li a {
  color: inherit;
  text-decoration: none;
}

.dashboard-rappels li a:hover {
  color: var(--couleur-bleu);
}

.dashboard-rappels li.rappel-depasse strong {
  color: #b91c1c;
}

.dashboard table {
  margin-bottom: 0.5rem;
}

.dashboard-columns {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.dashboard-charts-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard-left-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chart-container {
  position: relative;
  height: 220px;
}

/* Barre d'outils de la page Opérations : sélecteur de compte + recherche */
/* Panneau "Filtres avancés" : replié par défaut, s'ouvre sous la barre
   d'outils sans pousser les soldes ni le champ de recherche. */
.filtres-avances {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid #e5e9f0;
  border-radius: 0.6rem;
}

.filtres-avances label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85em;
  margin-bottom: 0;
}

.filtres-avances label input[type="date"],
.filtres-avances label input[type="number"],
.filtres-avances label select {
  margin-bottom: 0;
  height: 2.2rem;
  padding: 0.3rem 0.6rem;
  box-sizing: border-box;
}

/* Bouton "Réinitialiser" plaqué à droite du panneau plutôt que collé aux
   champs : sans ça, sur un écran large, il reste un grand vide entre lui et
   le bord droit du panneau (les champs ne s'étirent pas pour le combler,
   volontairement — un champ date ou montant élargi n'aurait aucun sens). */
.filtres-avances > button {
  margin-left: auto;
}

.filtres-avances .filtre-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.operations-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.operations-toolbar form {
  margin-bottom: 0;
}

.operations-toolbar .operations-label-recherche {
  flex: 1 1 auto;
  max-width: 420px;
}

/* Structure identique et explicite pour chaque libellé (texte + contrôle),
   plutôt que de compter sur les hauteurs par défaut différentes de Pico
   entre un <input> et un <a role="button"> — cause du décalage persistant. */
.operations-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0;
}

.operations-toolbar input[type="text"],
.operations-toolbar a[role="button"] {
  height: 2.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

/* Croix d'effacement à l'intérieur du champ recherche : positionnée en
   absolu par-dessus l'input (le conteneur devient le point de référence),
   avec un padding-right sur l'input pour que le texte tapé ne passe jamais
   sous la croix. */
.champ-avec-effacement {
  position: relative;
}

.champ-avec-effacement input {
  padding-right: 2.2rem;
}

.btn-effacer-recherche {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--couleur-gris-texte);
  font-size: 0.8em;
  line-height: 1;
  cursor: pointer;
}

.btn-effacer-recherche:hover {
  background: var(--couleur-gris);
  color: var(--couleur-texte-fonce);
}

/* Un <select> natif gère mal display:flex/line-height forcé pour son propre
   texte interne (c'était la cause du texte tronqué/invisible). On fixe
   seulement la hauteur et un padding vertical raisonnable, et on laisse le
   rendu natif du navigateur centrer le texte — c'est ce qu'il sait faire. */
.operations-toolbar select {
  height: 2.4rem;
  box-sizing: border-box;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0;
}

/* Soldes du compte : sur la même ligne que Compte/Recherche, poussés à
   droite, alignés avec le bas des champs (comme les autres éléments de la
   barre d'outils) plutôt qu'avec le titre. */
.operations-soldes {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  height: 2.4rem;
  align-items: center;
}

.operations-soldes div {
  white-space: nowrap;
}

.operations-soldes strong {
  font-size: 1.1rem;
  margin-left: 0.4rem;
}

.operations-toolbar a[role="button"] {
  padding: 0 1rem;
  width: fit-content;
  white-space: nowrap;
}

/* Page Paramètres : mini-menu d'ancrage + liste des Tiers à défilement
   interne (peut compter des dizaines d'entrées après un import CSV). */
/* Page Paramètres : 3 colonnes côte à côte (Catégories / Moyens / Tiers),
   chacune avec sa liste à hauteur limitée et défilement interne, pour que
   tout tienne à l'écran sans avoir à empiler puis scroller les sections. */
.params-columns {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: start;
  gap: 1.1rem;
}

/* Page Paramètres : un onglet à la fois plutôt que 4 colonnes serrées côte
   à côte (illisible, rien n'était visible en entier). */
.params-tabs-bar {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e9f0;
  flex-wrap: wrap;
}

.params-tab-btn {
  border: none;
  background: none;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--couleur-gris-texte);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.params-tab-btn:hover {
  color: var(--couleur-bleu);
}

.params-tab-btn.active {
  color: var(--couleur-bleu);
  border-bottom-color: var(--couleur-bleu);
}

.params-tab-panel .param-list-scroll {
  max-height: 60vh;
}

/* Onglet Catégories : la liste à gauche, le formulaire d'ajout à droite,
   plutôt qu'empilés l'un sous l'autre (ce qu'on avait avant, mauvaise
   visibilité) — pas la liste elle-même scindée en 2. */
.params-categories-liste-form {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Même liseret que l'en-tête du tableau (NOM/TYPE), pour que le titre du
   formulaire de création s'accorde visuellement avec la liste à côté. */
/* Titre "Créer une catégorie" : un vrai <table><th>, pas un <h3> stylé à la
   main — la tentative de reproduire à l'identique le rendu d'un <th> via
   une autre balise s'est heurtée à un écart sub-pixel de padding difficile
   à tracer (contexte em/rem). Réutiliser le même élément que la vraie liste
   supprime le problème à la racine : c'est littéralement la même règle CSS
   (table thead th) qui s'applique aux deux. */
.params-form-titre-table {
  margin-bottom: 1rem;
}

.params-categories-liste-form .params-add-form {
  margin-top: 0;
}

@media (max-width: 960px) {
  .params-categories-liste-form {
    grid-template-columns: 1fr;
  }
}

/* Page "Mon compte" : deux sections côte à côte (infos perso / mot de
   passe), chacune avec son propre formulaire indépendant. */
.params-columns-2 {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1.1rem;
  max-width: 900px;
}

.params-columns-2 form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.param-list-scroll {
  max-height: 46vh;
  overflow-y: auto;
}

.param-list-scroll table {
  margin-bottom: 0;
}

.param-list-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.params-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Hiérarchie catégorie / sous-catégorie dans Paramètres : la catégorie
   parente ressort en gras avec une séparation au-dessus, ses sous-catégories
   sont indentées juste en dessous avec un connecteur visuel "↳" et un fond
   légèrement teinté pour rattacher visuellement l'ensemble du groupe. */
.row-categorie-parent td {
  border-top: 2px solid var(--pico-muted-border-color);
}

.row-categorie-parent:first-child td {
  border-top: none;
}

.row-categorie-parent input[type="text"] {
  font-weight: 700;
}

.row-categorie-enfant {
  background: rgba(15, 23, 42, 0.02);
}

.row-categorie-enfant td:first-child {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 1.5rem;
}

.connecteur-hierarchie {
  color: var(--couleur-gris-texte);
  font-weight: 700;
  flex-shrink: 0;
}

/* 3 icônes d'action par ligne ici (📁 ⇄ ✕) contre 2 ailleurs dans l'appli :
   on les resserre pour éviter le débordement horizontal dans une colonne
   plus étroite qu'un tableau plein écran. */
.params-columns .icon-btn {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.85em;
}

.params-columns .row-actions {
  gap: 0.25rem;
}

.params-columns .badge {
  padding: 0.1rem 0.5rem;
  font-size: 0.8em;
}

#filtre-tiers {
  margin-bottom: 0.5rem;
}

/* Pastilles de catégorie / moyen de paiement, façon "Actual" */
.badge {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  line-height: 1.6;
  box-sizing: border-box;
}

.badge-depense {
  background: var(--couleur-orange-clair);
  color: var(--couleur-orange-badge-texte);
}

.badge-recette {
  background: var(--couleur-vert-clair);
  color: var(--couleur-vert);
}

.badge-mixte {
  background: var(--couleur-gris);
  color: var(--couleur-gris-texte);
}

.badge-neutral {
  background: var(--couleur-gris);
  color: var(--couleur-gris-texte);
}

.badge-alerte {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 700;
}

/* Bouton statut "pointée" / "active" : même gabarit qu'un badge, cliquable */
.badge-toggle {
  display: inline-block;
  width: auto;
  border: none;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 0;
  cursor: pointer;
}

.badge-toggle.is-pointed {
  background: var(--couleur-vert-clair);
  color: var(--couleur-vert);
}

.badge-toggle.is-unpointed {
  background: var(--couleur-gris);
  color: var(--couleur-gris-texte);
}

/* Case à cocher "pointée" (liste des opérations) : simple, verte si cochée */
input.check-pointe[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-bottom: 0;
  cursor: pointer;
}

/* Pico ne dessine pas une case native : il désactive l'apparence native
   (appearance:none) et peint lui-même le fond via --pico-background-color /
   --pico-border-color, qui valent --pico-primary (orange) par défaut.
   accent-color n'a donc aucun effet ici — il faut cibler ces variables. */
input.check-pointe[type="checkbox"]:checked {
  --pico-background-color: #16a34a;
  --pico-border-color: #16a34a;
}

/* Formulaires utilitaires dans les cellules de tableau (pointer, supprimer,
   renommer...) : par défaut Pico met les <form>/<input>/<button> en
   width:100%, ce qui les fait exploser dans une cellule. */
.form-inline {
  display: inline;
}

.form-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.form-flex input,
.form-flex select {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 2.25rem;
  margin-bottom: 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.9em;
}

/* Le bouton ✓ (icône seule) doit garder le même gabarit carré que les
   boutons icône ailleurs dans l'appli, pas s'étirer avec le select/input
   voisin (flex: 1 1 auto par défaut d'un <button> Pico dans un conteneur
   flex) — et rester à la même hauteur que l'input/select, qu'il porte ou
   non la classe .btn-compact (parametres.php utilise .form-flex avec de
   simples boutons ".outline", sans .btn-compact). */
.form-flex button {
  flex: 0 0 auto;
  height: 2.25rem;
}

table form {
  margin-bottom: 0;
}

table button:not(.badge-toggle) {
  width: auto;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0;
}

/* Page de connexion : carte étroite centrée plutôt qu'un formulaire pleine largeur */
.login-box {
  max-width: 380px;
  margin: 4rem auto 0;
}

.login-logo {
  display: block;
  max-width: 260px;
  margin: 0 auto 1.5rem;
}

/* Ligne de saisie rapide en tête de tableau (opérations), façon Actual :
   champs compacts alignés sur les colonnes plutôt qu'un formulaire séparé. */
.row-ajout {
  background: rgba(15, 23, 42, 0.02);
}

.row-ajout td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.row-ajout input,
.row-ajout select {
  height: 2.25rem;
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.95em;
}

.row-ajout .input-montant {
  width: 6rem;
}

.row-ajout button {
  height: 2.25rem;
  width: auto;
  margin-bottom: 0;
  padding: 0.35rem 0.9rem;
}

.row-ajout .checkbox-pointe {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.9em;
}

/* Groupe d'actions (icônes ou boutons texte) alignées sur une seule ligne,
   de même gabarit, qu'il s'agisse de <button> ou de <a role="button">. */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* Boutons texte compacts (Enregistrer / Annuler...) : même taille des deux
   côtés, qu'ils soient portés par un <button> ou un <a role="button">. */
.btn-compact {
  height: 2.25rem;
  width: auto;
  margin-bottom: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.9em;
  white-space: nowrap;
  line-height: 1.4;
}

/* Renforce la spécificité face à "table button:not(.badge-toggle)" plus haut,
   pour que le bouton "Enregistrer" (un <button>) garde le même padding que
   le lien "Annuler" (un <a role="button">, non concerné par cette règle). */
table button.btn-compact {
  height: 2.25rem;
  padding: 0.35rem 0.9rem;
}

/* Boutons icône carrés (crayon, croix...) : même gabarit pour tous,
   indépendamment de la balise utilisée. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  margin-bottom: 0;
  line-height: 1;
}

.icon-btn svg {
  display: block;
}

/* Pico impose "a[role=button]{display:inline-block}" avec une spécificité
   supérieure à .icon-btn seul, ce qui annulait le centrage flexbox sur les
   icônes portées par un lien (le crayon). Sélecteur renforcé pour gagner. */
a.icon-btn[role="button"] {
  display: inline-flex;
}

/* Renforce la spécificité face à "table button:not(.badge-toggle)" plus haut,
   qui sinon écraserait le padding:0 voulu pour un bouton icône carré. */
table button.icon-btn {
  padding: 0;
  width: 2.1rem;
}

/* Pico met tout button[type="submit"] en width:100% (pensé pour un vrai
   bouton de formulaire pleine largeur). Un bouton icône de suppression est
   justement type="submit" (pour que son <form> s'envoie), contrairement à
   son voisin "Modifier" en type="button" (jamais concerné) — d'où un écart
   de largeur entre les deux, sans lien avec .outline/.contrast. !important
   pour trancher sans dépendre d'un calcul de spécificité fragile face à une
   règle Pico ciblant précisément [type=submit] (même logique que
   table-layout:fixed !important plus haut dans ce fichier). */
.icon-btn[type="submit"] {
  width: 2.1rem !important;
}


/* Surlignage temporaire de la ligne visée par une ancre (#operation-X...)
   après un enregistrement, pour la repérer même si elle a changé de place
   (tri par date, par exemple). */
@keyframes surbrillance-ligne {
  0% {
    background-color: var(--couleur-bleu-clair);
  }
  100% {
    background-color: transparent;
  }
}

.ligne-surlignee {
  animation: surbrillance-ligne 2s ease-out;
}

/* Fenêtre de fusion (catégories/moyens/tiers), <dialog> natif */
#dialog-fusion {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  padding: 1.25rem 1.5rem;
  width: min(90vw, 420px);
}

#dialog-fusion::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

#dialog-fusion select {
  width: 100%;
}

/* En-tête compact de Paramètres : titre + accès discret à "Mon compte",
   au lieu d'une carte pleine largeur en permanence. */
.params-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.params-entete h1 {
  margin-bottom: 0;
}

#dialog-mon-compte {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  padding: 1.25rem 1.5rem;
  width: min(90vw, 420px);
}

#dialog-mon-compte::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

#dialog-mon-compte label {
  display: block;
  margin-top: 0.75rem;
}

#dialog-mon-compte label:first-of-type {
  margin-top: 0;
}

/* Page Notes : rupture de mois, cellule de note, textarea compacte */
.note-groupe-mois td {
  background: var(--couleur-bleu-clair);
  color: var(--couleur-bleu);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
}

.cellule-note {
  white-space: pre-wrap;
  line-height: 1.4;
}

.table-notes textarea {
  width: 100%;
  min-height: 2.25rem;
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.95em;
  resize: vertical;
}

/* ==========================================================================
   Page Statistiques
   ========================================================================== */

.stats-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid #e5e9f0;
  border-radius: 0.6rem;
}

.stats-filtres label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0;
  font-size: 0.85em;
}

.stats-filtres select {
  height: 2.2rem;
  box-sizing: border-box;
  padding: 0.3rem 0.6rem;
  min-width: 180px;
}

.stats-dates-perso {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.stats-dates-perso input[type="date"] {
  height: 2.2rem;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Cartes chiffres clés : 4 colonnes égales, une valeur bien visible sous un
   petit libellé, façon tableaux de bord financiers. */
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 1rem;
  margin-bottom: 0;
}

.stats-kpi-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--couleur-gris-texte);
}

.stats-kpi-valeur {
  font-size: 1.3rem;
}

.stats-columns {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin-top: 0.75rem;
}

/* Les deux cartes d'une même ligne (camembert/tableau, tiers/moyens) doivent
   afficher la même hauteur : le grid stretch aligne déjà les <article>
   entre eux sur la hauteur du contenu le plus haut, mais il faut aussi que
   le contenu de chaque carte (graphique, tableau, liste) s'étire jusqu'en
   bas de sa propre carte plutôt que de laisser un vide sous un <header>
   suivi d'un canvas resté à sa hauteur minimale.*/
.stats-columns article {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
}

.stats-columns .chart-container {
  flex: 1;
  height: auto;
  min-height: 220px;
}

.stats-columns .stats-table-scroll,
.stats-columns .stats-mini-bars {
  flex: 1;
}


/* Tableau détaillé catégorie / sous-catégorie : lignes parentes en gras,
   sous-catégories indentées visuellement via le préfixe "↳" déjà présent
   dans le texte (pas de padding-left ajouté, pour rester aligné avec la
   colonne "Montant" des lignes parentes). */
.stats-table-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.stats-table-categories {
  margin-bottom: 0;
}

.stats-table-categories th {
  position: sticky;
  top: 0;
  background: var(--pico-card-background-color);
}

.stats-ligne-parent td {
  font-weight: 700;
}

.stats-ligne-parent.stats-ligne-active td:first-child {
  color: var(--couleur-bleu);
}

.stats-ligne-enfant td {
  color: var(--couleur-gris-texte);
  font-size: 0.95em;
}

.stats-ligne-enfant td:first-child {
  padding-left: 1.5rem;
}

/* Répartition par moyen de paiement / véhicule : mini barres horizontales en
   CSS pur (pas besoin d'un canvas Chart.js pour une liste aussi simple). */
.stats-mini-bars {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-mini-bars li {
  list-style: none;
  padding: 0.4rem 0;
}

.stats-mini-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  margin-bottom: 0.3rem;
}

.stats-mini-bar-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--couleur-gris);
  overflow: hidden;
}

.stats-mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--couleur-bleu);
}

.stats-mini-bar-fill-orange {
  background: var(--couleur-orange);
}

/* ==========================================================================
   Responsive mobile (< 960px)

   Seuil volontairement plus large que les ~768px habituels : un grand
   smartphone récent (ex. Redmi Note 14 Pro 5G) atteint ~900-915px de large
   CSS une fois tourné en paysage. Un seuil à 700px le faisait retomber sur
   la mise en page "bureau" complète (nav en texte, grilles 2 colonnes) —
   bien trop serré sur un écran aussi large que haut. 960px laisse une
   marge de sécurité tout en gardant les vraies tablettes (iPad paysage
   1024px et plus) sur la mise en page complète, plus confortable à cette
   largeur.
   ========================================================================== */

/* Bouton hamburger : masqué en desktop, icône hamburger/croix togglée par
   la classe .is-open (posée en JS, voir includes/nav.php). */
.btn-menu-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--couleur-texte-fonce);
  cursor: pointer;
}

.icone-menu-fermer {
  display: none;
}

.btn-menu-mobile.is-open .icone-menu-ouvrir {
  display: none;
}

.btn-menu-mobile.is-open .icone-menu-fermer {
  display: block;
}

/* Libellé texte à côté des icônes (Notes, Paramètres, Mon compte...) :
   invisible en desktop (l'icône + le title="" suffisent, comme discuté),
   affiché uniquement dans le menu mobile déplié où la place verticale ne
   manque plus — le meilleur des deux affichages selon le contexte. */
.nav-icon-label {
  display: none;
}

@media (max-width: 960px) {
  /* Neutralise la mise à l'échelle automatique de Pico (100% -> 106,25% ->
     112,5%... selon la largeur d'écran) : pensée pour un desktop classique
     où "plus large" veut dire "vu de plus loin", elle grossissait aussi le
     texte sur un smartphone en paysage (~900px de large) alors qu'il est
     tenu près du visage. Idem pour le plafond de largeur de .container
     (700px dès 768px de large) : sur ce même écran, ~200px de large
     restaient inutilisés de chaque côté. Les deux sont désormais
     surchargés ici (chargé après pico.min.css, donc prioritaire à
     spécificité égale) plutôt que dans le fichier Pico lui-même, qu'on ne
     touche jamais. */
  :root {
    --pico-font-size: 90%;
  }

  .container,
  .container-fluid {
    max-width: 100%;
  }

  .btn-menu-mobile {
    display: inline-flex;
  }

  .topbar nav {
    flex-wrap: wrap;
  }

  /* Liste de liens repliée par défaut : devient un panneau plein largeur,
     empilé verticalement, sous la barre logo + hamburger. */
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid #e5e9f0;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.5rem;
    border-radius: 0.3rem;
  }

  .nav-icon-label {
    display: inline;
  }

  /* Tableau de bord : soldes/comptes et graphiques en une seule colonne
     plutôt que deux colonnes trop étroites pour être lisibles. */
  .dashboard-columns {
    grid-template-columns: 1fr;
  }

  /* Statistiques : 4 cartes chiffres clés sur 2 colonnes (au lieu de 4)
     pour rester lisible, et les paires graphique/tableau en une colonne. */
  .stats-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .stats-columns {
    grid-template-columns: 1fr;
  }

  /* Mon compte : les deux formulaires (infos perso / mot de passe) empilés
     plutôt que côte à côte. */
  .params-columns-2 {
    grid-template-columns: 1fr;
  }

  /* Tableaux (Opérations, Échéancier, Notes) : à 900px, le tableau forcé à
     min-width:900px tombait quasiment pile à la largeur de l'écran — donc
     presque aucune marge de défilement, mais des colonnes (Catégorie,
     Véhicule, Moyen...) trop étroites pour leur texte, qui se cassait sur
     plusieurs lignes et donnait un rendu tassé/imposant. On élargit
     franchement le tableau pour que chaque colonne garde une largeur
     confortable — et donc une vraie marge à parcourir au balayage —, on
     réduit un peu texte/espacement pour alléger le rendu, et on ajoute un
     indice visuel (ombre sur le bord droit) pour signaler qu'il reste du
     contenu à découvrir. */
  .table-scroll-x table {
    min-width: 1150px;
  }

  .table-scroll-x thead th,
  .table-scroll-x td {
    padding: 0.5rem 0.6rem;
    font-size: 0.92em;
  }

  .table-scroll-x {
    position: relative;
    /* display:flex (plutôt que le block par défaut) : l'indice visuel
       ci-dessous doit s'étirer sur toute la hauteur du tableau sans lui
       fixer une hauteur en dur (qui varie selon le nombre de lignes) —
       l'étirement automatique des éléments flex (align-items:stretch par
       défaut) s'en charge tout seul. */
    display: flex;
  }

  .table-scroll-x::after {
    content: '';
    position: sticky;
    top: 0;
    right: 0;
    flex-shrink: 0;
    display: block;
    width: 22px;
    margin-left: -22px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.14));
  }
}

/* ==========================================================================
   Écran de blocage "tournez votre appareil" (portrait, petit/moyen écran)
   ========================================================================== */

.overlay-rotation {
  display: none;
}

/* max-width 960px (même seuil que la mise en page compacte ci-dessus) :
   cible tablette/smartphone, jamais un écran de bureau qu'on aurait tourné
   en portrait (rarissime, et sa largeur dépasserait de toute façon très
   largement ce seuil même une fois pivoté). */
@media (orientation: portrait) and (max-width: 960px) {
  .overlay-rotation {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: var(--pico-background-color);
    padding: 2rem;
  }
}

.overlay-rotation-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 320px;
  text-align: center;
  color: var(--couleur-texte-fonce);
}

.overlay-rotation-contenu svg {
  color: var(--couleur-bleu);
  animation: rotation-icone 2.5s ease-in-out infinite;
}

@keyframes rotation-icone {
  0%, 15% { transform: rotate(0deg); }
  50%, 65% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}

/* Page Admin : ligne grisée pour un utilisateur désactivé. */
.ligne-inactive td {
  opacity: 0.55;
}

.ligne-inactive .badge-alerte {
  opacity: 1;
}

/* Page Import bancaire : aperçu modifiable avant confirmation, mêmes
   dimensions d'input/select compactes que la ligne d'ajout des autres
   tableaux (évite le bug de hauteur mal alignée déjà rencontré ailleurs). */
.table-import input,
.table-import select {
  height: 2.25rem;
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.95em;
  box-sizing: border-box;
}

.table-import input[type="date"] {
  min-width: 9.5rem;
}

.table-import input[type="number"] {
  width: 7rem;
}

.table-import input[type="text"] {
  min-width: 10rem;
}