/* ============================================================================
   HENDERSON v7 — style-accounting.css
   Spécifique aux pages /accounting.html, /journal-entries.html, etc.
   Charte v3 : mint var(--accent), cream var(--cream), texte var(--charcoal-warm).
   Charger APRÈS style.css + style-memory.css (tokens v3). ≤500 lignes.
   ============================================================================ */

/* ===== Entity selector ===== */
.acct-entity-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 16px 0 24px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
}
.acct-entity-bar label {
  font-weight: 600;
  color: var(--charcoal-warm);
  margin-right: 4px;
}
.acct-entity-bar select {
  flex: 1;
  max-width: 600px;
  padding: 8px 12px;
  border: 1px solid var(--warm-grey);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--charcoal-warm);
  cursor: pointer;
}
.acct-entity-bar select:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

/* ===== Hub tiles ===== */
.acct-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.acct-hub-tile {
  display: block;
  padding: 24px;
  background: var(--ivory);
  border: 1px solid var(--warm-grey);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.acct-hub-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.acct-hub-tile .icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.acct-hub-tile h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--charcoal-warm);
}
.acct-hub-tile p {
  margin: 0;
  color: var(--mocha);
  font-size: 13px;
}
.acct-hub-tile .kpi {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--warm-grey);
  font-size: 13px;
  color: var(--mint-deep);
  font-weight: 600;
}
.acct-hub-tile .badge-new {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--warning-soft);
  color: var(--warning-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Filters bar ===== */
/* Bandeau vert fonce, texte blanc -- meme traitement que le bandeau annee
   de documents.html (.mem-year-summary, var(--mint-deeper)->var(--mint-darker))
   pour que la periode filtree se remarque au premier coup d'oeil (retour
   Remi, 2026-09-24). Tokens de base, pas --et-* : ce fichier reste
   autonome, que la page charge ou non style-eurotrade-theme.css -- les 6
   pages qui partagent .acct-filters (balance-sheet/general-ledger/journal-
   entries/payroll/profit-loss/trial-balance) ne l'ont pas toutes. */
.acct-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--mint-deeper) 0%, var(--mint-darker) 100%);
  border: none;
  border-radius: 16px;
  margin: 16px 0;
  box-shadow: 0 4px 14px rgba(42, 89, 64, 0.18);
}
/* Rémi, 2026-09-24 : « coller les tabs à la section du calendrier [...] pour
   que ça fasse un bloc plus cohérent ». Scopé au frère direct des onglets de
   classe (seule general-ledger.html les a) : les 5 autres pages qui partagent
   .acct-filters sans onglets au-dessus gardent leur espacement normal. Coins
   hauts aplatis pour que le bandeau reprenne visuellement là où le bas plat
   des onglets s'arrête -- sinon un arrondi ici aurait recreé un décalage
   visuel juste en dessous de l'onglet actif. */
.acct-class-tabs + .acct-filters {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.acct-filters .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acct-filters label,
.acct-filters.acct-filters label {
  font-size: 12px;
  /* !important + classe repetee : henderson-charte.css definit `label {
     color: ... !important }` en dur (regle generique partagee par 63+
     pages), mais ce n'est PAS ce qui gagnait -- mesure via cascade reelle
     (Playwright + CSSOM, 2026-09-24) : style-eurotrade-theme.css porte
     `html[data-theme="light"] body label { color: var(--et-text)
     !important }`, specificite (0,1,3), qui bat `.acct-filters label
     !important` seul ((0,1,1)) MEME les deux etant !important -- la
     specificite reste le departage entre deux regles !important, l'ordre
     de chargement ne joue qu'a specificite EGALE. `.acct-filters.acct-filters`
     (la classe repetee, deux fois la meme, une technique standard) porte
     la notre a (0,2,3) : elle gagne quel que soit l'ordre des feuilles,
     sans dependre de charger ce fichier en dernier. Premiere version
     (juste !important, sans le doublement) confirmee insuffisante par la
     meme mesure -- From/To restaient sombre sur fond vert fonce malgre elle. */
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.acct-filters input, .acct-filters select {
  padding: 7px 10px;
  border: 1px solid var(--warm-grey);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--charcoal-warm);
  background: var(--ivory);
  min-width: 120px;
}
/* Retour Rémi, 2026-09-25 : "encore des textes écrits en police sombre sur
   fond sombre [...] edit et le nom de l'employé, et 'must match the group
   specified in the rate set above' [...] c'est encore en gris, ce n'est pas
   lisible". Les <input>/<select>/<label> de .acct-filters sont déjà couverts
   (fond ivoire, texte blanc) -- deux familles d'éléments ne l'étaient pas :
   un TITRE de formulaire sans classe dédiée (#employeeFormTitle, payroll.html,
   le seul .acct-filters de ce dépôt réutilisé comme conteneur de formulaire
   plutôt que comme barre de filtres) et le texte .muted (le lien "modifier"
   du tableau employés n'est PAS concerné, il vit hors de .acct-filters --
   mais journal-entries.html porte le même défaut, non signalé, sur
   #selectionCount : même classe, même fond, même absence de règle). Les
   deux retombaient sur le texte charcoal par défaut de la page, illisible
   sur le dégradé mint-deeper/mint-darker.
   0.75 (pas 0.92 comme les labels, en gras/majuscules) : un texte SECONDAIRE
   doit rester visuellement en retrait des labels, tout en restant lisible --
   ratio de contraste mesuré >= 4.5:1 sur les deux bornes du dégradé. */
.acct-filters .muted { color: rgba(255, 255, 255, 0.75); }
.acct-filters .acct-form-title { color: var(--ivory); font-weight: 600; }
.acct-filters .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.acct-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.acct-btn-primary {
  /* --accent (mint #7BB89A) donnait texte blanc 2,29:1 (échec AA). mint-deep = 5,1:1. */
  background: var(--mint-deep, #3D7A5A);
  color: #fff;
}
.acct-btn-primary:hover { background: var(--mint-darker, #1F4A33); }
.acct-btn-secondary {
  background: var(--ivory);
  border-color: var(--warm-grey);
  color: var(--charcoal-warm);
}
.acct-btn-secondary:hover { background: var(--cream); }
.acct-btn-danger {
  background: var(--ivory);
  border-color: var(--coral-pastel);
  color: var(--coral-deep);
}
.acct-btn-danger:hover { background: var(--coral-light); }

/* ===== Tables ===== */
.acct-table-wrap {
  background: var(--ivory);
  border: 1px solid var(--warm-grey);
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body, 15px);
}
/* En-tete vert fonce, texte blanc -- meme traitement que le bandeau annee de
   documents.html (retour Remi, 2026-09-24). Tokens de base (pas --et-*) :
   les 9 pages qui chargent ce fichier ne chargent pas toutes le theme
   eurotrade. Les sous-en-tetes du tableau par tiers (Дт/Кт, le detail
   deplie) restent volontairement clairs -- deux niveaux de gris n'auraient
   plus de hierarchie si tout etait fonce. */
.acct-table thead th {
  background: linear-gradient(180deg, var(--mint-deeper) 0%, var(--mint-darker) 100%);
  padding: 14px 20px;
  text-align: left;
  font-weight: 700;
  /* !important : henderson-charte.css pose `th { color: ... !important }` en
     dur sur les 63+ pages qui la chargent -- sans le meme poids ici, l'encre
     sombre par defaut gagnait toujours contre le blanc sur ce fond vert fonce
     (retour Remi, 2026-09-24, "Code/Account/Class/Debit/Credit illisibles"). */
  color: #fff !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: none;
}
.acct-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--warm-grey);
  vertical-align: middle;
}
.acct-table tbody tr:hover { background: var(--cream); cursor: pointer; }
.acct-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono', 'Menlo', monospace; }
.acct-table .pos { color: var(--mint-deep); }
.acct-table .neg { color: var(--coral-deep); }
.acct-table .muted { color: var(--taupe); }
.acct-table tfoot td {
  background: var(--cream);
  padding: 14px 20px;
  font-weight: 700;
  color: var(--charcoal-warm);
  border-top: 2px solid var(--warm-grey);
}

/* ===== Status / review badges ===== */
.acct-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ===== Pagination ===== */
.acct-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--cream);
  border-top: 1px solid var(--warm-grey);
}
.acct-pagination .info { color: var(--mocha); font-size: 13px; }
.acct-pagination .nav-buttons { display: flex; gap: 8px; }

/* ===== Balance par tiers (oborotna vedomost, general-ledger.html) ===== */
/* Sous-en-tete Дт/Кт : plus discret que l'en-tete de groupe au-dessus --
   reste sur fond clair a dessein, EXPLICITEMENT (sans ce rappel, il
   heriterait du vert fonce de la regle de base juste au-dessus).
   MESURE (Playwright + CSSOM, 2026-09-24) : la premiere version de ce bloc
   (`.acct-tiers-subheader th`, specificite 0-1-1) perdait le fond ET la
   couleur contre `.acct-table thead th` (specificite 0-1-2, UN element de
   plus -- "thead th" contre "th" seul) -- computed le confirmait (fond
   transparent laissant voir le vert fonce de l'ancetre, texte blanc et
   non mocha). Prefixer par `.acct-table thead tr` porte la specificite a
   0-2-3, qui gagne quel que soit l'ordre de chargement des feuilles. */
.acct-table thead tr.acct-tiers-subheader th {
  background: var(--cream);
  /* !important : meme raison que .acct-table thead th juste au-dessus --
     henderson-charte.css`th{color:...!important}` gagnerait sinon. */
  color: var(--mocha) !important;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11px;
  border-bottom: 1px solid var(--warm-grey);
}
/* Дт/Кт : sans centrage, henderson-charte.css `th{text-align:left}` les
   alignait a gauche sous des colonnes numeriques alignees a droite --
   lecture bancale (retour Remi, 2026-09-24). Le mot seul est centre, pas
   les valeurs (deja alignees a droite via .num, convention comptable).
   Meme mesure que ci-dessus : `.acct-table .num { text-align: right }`
   (0-2-0) battait une premiere version non prefixee (0-1-1 ou 0-1-2) --
   `.acct-table thead tr.acct-tiers-subheader th.num` (0-3-3) gagne. */
.acct-table thead tr.acct-tiers-subheader th.num {
  text-align: center;
}
.acct-tiers-expand {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
}
/* ── Separateurs entre les trois groupes (ouverture | periode | cloture) et
   entre Debit/Credit, demandes par Remi (retour Anton, 2026-09-24) ────────
   Colonnes FIXES de #tiersTable (voir renderTiersSummary/le tbody genere) :
   1=bouton 2=nom 3=ouv-Dt 4=ouv-Kt 5=periode-Dt 6=periode-Kt 7=clo-Dt 8=clo-Kt.
   La ligne d'en-tete de GROUPE n'a que 5 <th> (colspan=2 x3) -- nth-child y
   compte les CELLULES, pas les colonnes rendues -- donc deux jeux de regles
   distincts pour cette ligne et pour le sous-en-tete/corps (8 cellules). */
#tiersTable thead tr:first-child th:nth-child(3),
#tiersTable thead tr:first-child th:nth-child(4),
#tiersTable thead tr:first-child th:nth-child(5) {
  text-align: center; /* le groupe couvre 2 colonnes : centre, pas aligne a droite */
}
#tiersTable thead tr:first-child th:nth-child(3),
#tiersTable thead tr:first-child th:nth-child(4) {
  border-left: 2px solid rgba(255, 255, 255, 0.35); /* frontiere de GROUPE, fond fonce */
}
#tiersTable thead tr.acct-tiers-subheader th:nth-child(3),
#tiersTable thead tr.acct-tiers-subheader th:nth-child(5),
#tiersTable thead tr.acct-tiers-subheader th:nth-child(7),
#tiersTable tbody td:nth-child(3),
#tiersTable tbody td:nth-child(5),
#tiersTable tbody td:nth-child(7) {
  border-left: 2px solid var(--warm-grey); /* frontiere de GROUPE, fond clair */
}
#tiersTable thead tr.acct-tiers-subheader th:nth-child(4),
#tiersTable thead tr.acct-tiers-subheader th:nth-child(6),
#tiersTable thead tr.acct-tiers-subheader th:nth-child(8),
#tiersTable tbody td:nth-child(4),
#tiersTable tbody td:nth-child(6),
#tiersTable tbody td:nth-child(8) {
  border-left: 1px dashed var(--warm-grey); /* frontiere Debit/Credit, plus discrete */
}
/* La teinte alternee ouverture/cloture (posee le 2026-09-23) est retiree --
   "un peu bizarre" (retour Remi, 2026-09-24). Les separateurs (bordures
   pleines entre groupes, pointillees entre Debit/Credit, juste au-dessus)
   suffisent deja a distinguer les groupes sans dupliquer un second signal. */
/* Ligne resume : cliquable seulement via son bouton "+", pas la ligne entiere
   -- contrairement aux autres tableaux ou la ligne complete navigue. */
.acct-table tbody tr.acct-tiers-row:hover { background: transparent; cursor: default; }
.acct-table tbody tr.acct-tiers-totals { background: var(--cream); font-weight: 700; }
.acct-table tbody tr.acct-tiers-totals:hover { background: var(--cream); cursor: default; }
.acct-tiers-detail-row:hover { background: transparent; cursor: default; }
/* Rémi, 2026-09-24 : « si possible, essayez d'ajouter une animation
   lorsqu'on clique sur plus et moins ». Fondu seul (pas de translate) : un
   <tr> transforme (translateY) ne fait pas reculer ses voisins pendant
   l'animation -- ligne suivante et detail se chevauchent brievement, un
   defaut plus genant que l'absence d'animation. L'opacite, elle, est sure
   sur un <tr> dans tous les moteurs courants. L'ouverture anime via
   @keyframes (se declenche seule a l'insertion du noeud, aucun JS requis) ;
   la fermeture anime via .acct-tiers-detail-closing (classe posee par
   closeTiersDetail(), qui attend la meme duree avant de retirer le noeud --
   sinon rien ne serait jamais visible a fondre). */
@keyframes acctTiersDetailIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.acct-tiers-detail-row {
  animation: acctTiersDetailIn 0.18s ease-out;
}
.acct-tiers-detail-row.acct-tiers-detail-closing {
  animation: none;
  opacity: 0;
  transition: opacity 0.14s ease-in;
}
/* Le filet vertical rattache visuellement le detail au bouton "+" de la ligne
   au-dessus : sans lui, l'indentation se lisait comme une bande vide sans
   raison (retour Remi, 2026-09-24) plutot que comme un niveau imbrique.
   PROFONDEUR -- corrige le 2026-09-24 (round 2) : la premiere version posait
   une ombre PORTEE (sans inset) sur .acct-tiers-inner-table, qui souleve
   l'element VERS l'avant, comme une carte qui flotte au-dessus de la page --
   Remi voulait l'inverse ("plus enfonce, plus en profondeur vers le fond, pas
   plus proche de l'utilisateur"). Toutes les ombres sont desormais INSET
   (aucun depassement vers l'exterieur) : celle de la cellule simule un
   sillon a la jonction avec la ligne resume au-dessus, celle du tableau
   interne creuse ses quatre bords -- le detail se lit comme un creux dans
   la page, pas comme une feuille posee dessus. */
.acct-tiers-detail-cell {
  /* padding-top a 0 (retour Remi, 2026-09-24 : "coller le tableau beige a la
     ligne correspondante") -- le sillon d'ouverture (box-shadow ci-dessous)
     reste seul responsable de marquer la jonction, plus un vide visuel. */
  padding: 0 20px 16px 44px !important;
  background: var(--cream-light);
  border-left: 3px solid var(--mint-pastel);
  box-shadow: inset 0 6px 8px -8px rgba(45, 40, 32, 0.22);
}
.acct-tiers-inner-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(45, 40, 32, 0.12), inset 0 -1px 3px rgba(45, 40, 32, 0.06);
}
.acct-tiers-inner-table thead th {
  background: var(--cream);
  padding: 10px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  /* !important : meme henderson-charte.css `th{color:...!important}` --
     specificite plus haute que .acct-table thead th, donc gagne quand meme
     une fois les deux en !important (ce tableau porte aussi .acct-table). */
  color: var(--mocha) !important;
  border-bottom: 1px solid var(--warm-grey);
  /* Retour Remi, 2026-09-24 : "tous les headers doivent etre centres" --
     Date/N° ecriture/Journal/Libelle/Document (sans .num) etaient a gauche,
     Debit/Credit/Solde cumule (.num) a droite via `.acct-table .num`
     (0-2-0, gagnait deja contre le `left` ci-dessous a 0-1-2) : rien n'etait
     centre. Le `.num` juste apres regagne sur `.acct-table .num` grace a
     `thead th.num` (0-2-2, deux elements de plus a classes egales). */
  text-align: center;
  /* Ombre interne du HEADER lui-meme, pas seulement du <table> parent :
     celle posee sur .acct-tiers-inner-table (juste au-dessus) est PEINTE
     PAR-DESSOUS par le fond opaque de ce th (var(--cream)) -- un box-shadow
     inset d'un ANCETRE ne peut pas traverser le fond OPAQUE d'un enfant qui
     le recouvre entierement. Sans cette ligne, le "creux" du tableau est
     donc invisible pile la ou l'oeil s'arrete en premier : sur l'en-tete.
     Retour Remi, 2026-09-24 : "vous avez oublie d'appliquer l'ombre interne
     au header". */
  box-shadow: inset 0 3px 4px -2px rgba(45, 40, 32, 0.15);
}
.acct-tiers-inner-table thead th.num {
  text-align: center;
}
.acct-tiers-inner-table tbody td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--warm-grey); }
.acct-tiers-inner-table tbody tr:hover { background: var(--cream); cursor: pointer; }

/* ===== Class tabs (general-ledger) ===== */
/* Onglets de NAVIGATEUR (retour Remi, 2026-09-24, apres un premier essai en
   piste/pastille jugee pas assez "onglet") : coins arrondis en haut, et qui
   "partent vers l'exterieur" en bas -- gauche vers la gauche, droite vers la
   droite -- comme un onglet Chrome. Technique du "corner flare" : chaque
   pseudo-element est un carre de --tab-r cote, rempli de la couleur DE
   L'ONGLET (--tab-bg, variable CSS -- heritee par les pseudo-elements), dont
   un quart de cercle centre sur son coin interieur est rendu transparent --
   ce qui laisse voir le fond de la PAGE (meme --cream que le corps, donc le
   raccord est invisible) et dessine la courbe qui flare vers l'exterieur.
   gap:16px = 2x --tab-r EXACTEMENT : les deux flares de deux onglets voisins
   se touchent sans jamais se chevaucher (calcul, pas au pif). */
.acct-class-tabs {
  /* --tab-r definie ICI (pas seulement sur .acct-class-tab) pour que le
     padding du conteneur puisse s'y referer : le flare de coin du PREMIER/
     DERNIER onglet a besoin d'exactement --tab-r de degagement pour ne pas
     depasser du bloc filtres juste en dessous. Retour Remi, 2026-09-24 :
     "l'angle du bas a gauche depasse de la section de quelques pixels" --
     mesure : padding valait 4px, le flare en demande 8, d'ou un depassement
     de 4px a gauche du premier onglet (et symetriquement a droite du dernier). */
  --tab-r: 8px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0 var(--tab-r);
  background: transparent;
  border: none;
  border-radius: 0;
}
.acct-class-tab {
  --tab-bg: var(--ivory);
  position: relative;
  padding: 10px 20px;
  border: none;
  background: var(--tab-bg);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--mocha);
  border-radius: var(--tab-r) var(--tab-r) 0 0;
  transition: background 0.15s, color 0.15s;
}
.acct-class-tab::before,
.acct-class-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--tab-r);
  height: var(--tab-r);
  background: radial-gradient(circle at 0 0, transparent var(--tab-r), var(--tab-bg) calc(var(--tab-r) + 1px));
  pointer-events: none;
}
.acct-class-tab::before { left: calc(-1 * var(--tab-r)); }
.acct-class-tab::after { right: calc(-1 * var(--tab-r)); transform: scaleX(-1); }
/* Retour Rémi, 2026-09-25 : "pas fan de la couleur au hover [...] utiliser
   un peu plus le meme style que la section Entity [...] un hybride entre le
   style actuel et l'autre". L'onglet de l'Entity switcher (header.js) est
   un mint-tint + bordure mint pleine (border:1px solid var(--mint)) --
   IMPOSSIBLE de reprendre tel quel ICI : `border` casserait le raccord des
   pseudo-elements ::before/::after (le flare de coin, commentaire plus
   haut), qui n'ont eux-memes aucune bordure a assortir. L'hybride : le
   TEINT mint de l'Entity switcher (au lieu du cream neutre d'avant), et
   l'ANNEAU mint via box-shadow inset (meme technique deja en place sur
   .acct-class-tab:not(.active), qui NE casse PAS le flare) plutot qu'une
   vraie bordure -- voir la regle :not(.active):hover juste apres. */
.acct-class-tab:hover { --tab-bg: rgba(123, 184, 154, 0.16); color: var(--mint-deep); }
.acct-class-tab:not(.active):hover {
  box-shadow: 0 1px 3px rgba(45, 40, 32, 0.10), 0 0 0 1.5px var(--mint-medium) inset;
}
/* Rémi, 2026-09-24 : « les onglets qui ne sont pas actifs ne sont pas très
   visibles ». Une ombre portée plutot qu'une bordure : une vraie bordure
   casserait le raccord des pseudo-elements ::before/::after (le "flare" de
   coin de navigateur, calibre au pixel pres sur --tab-r) qui n'ont eux-memes
   aucune bordure a assortir. L'ombre, elle, suit juste le contour du bouton
   et donne une legere elevation par rapport au fond de page, sans toucher
   au calcul du flare. */
.acct-class-tab:not(.active) {
  box-shadow: 0 1px 3px rgba(45, 40, 32, 0.10), 0 0 0 1px rgba(45, 40, 32, 0.06) inset;
}
.acct-class-tab.active {
  /* mint-deeper, PAS mint-darker (retour Remi, 2026-09-24 : "j'ai l'impression
     qu'il y a un degrade" entre l'onglet et la section juste en dessous).
     .acct-filters degrade de mint-deeper (haut, 0%) vers mint-darker (bas,
     100%) -- un onglet en mint-darker PLAT cree donc une VRAIE rupture de
     couleur a la jonction (#1F4A33 contre #2A5940). En mint-deeper, l'onglet
     et le sommet du degrade sont la MEME couleur : la jonction est invisible,
     seule la partie basse du bandeau fonce ensuite -- lecture d'un seul bloc. */
  --tab-bg: var(--mint-deeper, #2A5940);
  color: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 -1px 4px rgba(42, 89, 64, 0.2);
}

/* ===== Two-column layout (bilan) ===== */
.acct-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
.acct-col-section {
  background: var(--ivory);
  border: 1px solid var(--warm-grey);
  border-radius: 12px;
  overflow: hidden;
}
.acct-col-section h3 {
  margin: 0;
  padding: 12px 16px;
  background: var(--cream);
  font-size: 14px;
  color: var(--charcoal-warm);
  border-bottom: 1px solid var(--warm-grey);
}

/* ===== Result indicator (P&L, bilan) ===== */
.acct-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0;
}
.acct-result-positive { background: var(--mint-light); color: var(--mint-darker); }
.acct-result-negative { background: var(--coral-light); color: var(--coral-darker); }
.acct-result-neutral  { background: var(--cream); color: var(--charcoal-warm); }

/* ===== Modal entry detail ===== */
.acct-modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay, rgba(45, 40, 32, 0.5));
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  overflow-y: auto;
  padding: 40px 16px;
}
.acct-modal-overlay.open { display: flex; }
.acct-modal {
  background: var(--ivory);
  border-radius: 14px;
  width: 100%;
  max-width: 900px;
  box-shadow: var(--shadow-lg);
}
.acct-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--warm-grey);
}
.acct-modal-header h3 { margin: 0; font-size: 18px; color: var(--charcoal-warm); }
.acct-modal-header .close-btn {
  background: none; border: none; font-size: 24px; cursor: pointer; color: var(--mocha);
  /* Une cible, pas un glyphe (ERGO-B-18) : la croix mesurait 11x15 px à
     l'écran, sous le minimum de 24 px — il fallait viser le « × » lui-même.
     38 px CSS = 32 px à l'écran : la page est affichée à zoom 0,85. */
  min-width: 38px; min-height: 38px; padding: 0 6px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.acct-modal-header .close-btn:hover { background: var(--cream); }
.acct-modal-body { padding: 24px; }
.acct-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--warm-grey);
  background: var(--cream);
}

/* ===== Upload zone (confrontation) ===== */
.acct-upload-zone {
  border: 2px dashed var(--warm-grey);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  background: var(--cream);
  margin: 16px 0;
  transition: all 0.2s;
}
.acct-upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.acct-upload-zone .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.acct-upload-zone p { color: var(--mocha); margin: 4px 0; }
.acct-upload-zone input[type=file] { display: none; }

/* ===== Empty state ===== */
.acct-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--taupe);
}
.acct-empty .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .acct-two-col { grid-template-columns: 1fr; }
  .acct-filters { flex-direction: column; align-items: stretch; }
  .acct-filters .actions { margin-left: 0; }
}

@media (max-width: 720px) {
  /* G13-18 (audit 2026-10-18) : à 390 px, les champs de date (min-width 120 px
     + padding du bandeau) dépassaient le panneau de filtres, et un tableau
     plus large que l'écran perdait ses colonnes Débit / Crédit / Solde, coupées
     par overflow:hidden. Les champs suivent la colonne ; le tableau défile. */
  .acct-filters .field,
  .acct-filters input,
  .acct-filters select { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .acct-table-wrap { overflow-x: auto; }
  /* Le thème (style-eurotrade-theme.css) pose `overflow: hidden !important` sur
     tout [class*="table-wrap"] d'une page .memory-page : une spécificité plus
     haute, au téléphone seulement, laisse le tableau défiler. */
  html body.memory-page .acct-table-wrap.acct-table-wrap { overflow-x: auto !important; }
  .acct-hub-grid { grid-template-columns: 1fr; }
  .acct-table { font-size: 13px; }
  .acct-table thead th, .acct-table tbody td { padding: 10px 10px; }
}

/* LE NUMÉRO D'ÉCRITURE SE LIT D'UN COUP D'ŒIL (ECRITURES-24). Mesuré à
   1440 px sur journal-entries.html : « VEN- / 2026- / 10- / 0003 » sur quatre
   lignes, ~100 px par ligne, 28 écritures sur trois écrans. Sur une ligne, la
   colonne Description absorbe la place. Pas au téléphone : le tableau y
   coupe ce qui dépasse (.acct-table-wrap, overflow hidden). */
@media (min-width: 721px) {
  .acct-table td.acct-numero { white-space: nowrap; }
}