/* FinanceEBC v2 — Bibliothèque de composants (§5 du plan UI V1).
   Reprend les classes fin-* existantes (jamais renommées) et les complète.
   Aucune couleur en dur : uniquement var(--fin-*). */

/* ============================================================
   1. BOUTONS
   ============================================================ */
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--fin-space-2);
  border: 1px solid transparent; border-radius: var(--fin-radius-sm);
  padding: 0 18px; min-height: 40px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--fin-transition), box-shadow var(--fin-transition),
              border-color var(--fin-transition);
}
.fin-btn-primary { background: var(--fin-primary); color: var(--fin-text-invert); }
.fin-btn-primary:hover { background: var(--fin-primary-600); color: var(--fin-text-invert); }
.fin-btn-accent { background: var(--fin-accent); color: var(--fin-primary-700); }
.fin-btn-accent:hover { background: var(--fin-accent-600); color: var(--fin-primary-700); }
.fin-btn-ghost { background: transparent; border-color: var(--fin-border-strong); color: var(--fin-text); }
.fin-btn-ghost:hover { background: var(--fin-surface-2); color: var(--fin-text); }
.fin-btn-danger { background: var(--fin-danger); color: var(--fin-text-invert); }
.fin-btn-danger:hover { background: var(--fin-danger); color: var(--fin-text-invert); filter: brightness(.92); }
/* Variante claire pour fond sombre (hero) — évite les couleurs en dur dans les vues. */
.fin-btn-ghost-invert { background: transparent; border: 1px solid rgba(255,255,255,.45); color: var(--fin-text-invert); }
.fin-btn-ghost-invert:hover { background: rgba(255,255,255,.12); color: var(--fin-text-invert); }
.fin-btn-sm { min-height: 32px; padding: 0 12px; font-size: .85rem; }
.fin-btn-icone { min-height: 40px; width: 40px; padding: 0; }
.fin-btn-bloc { width: 100%; }
.fin-btn[disabled], .fin-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Barre d'actions d'en-tête de page */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--fin-space-4);
  margin-bottom: var(--fin-space-5);
}
.page-header .page-titre { min-width: 0; }
.page-header h1 { font-size: 1.5rem; margin: 0 0 var(--fin-space-1); }
.page-header .page-soustitre { color: var(--fin-text-muted); margin: 0; max-width: 68ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--fin-space-2); }

/* ============================================================
   2. CARTES
   ============================================================ */
.fin-card {
  background: var(--fin-surface); border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-sm);
}
.fin-card-pad { padding: var(--fin-space-5); }
.fin-card-titre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fin-space-3);
  padding: var(--fin-space-4) var(--fin-space-5);
  border-bottom: 1px solid var(--fin-border);
  font-size: 1rem; font-weight: 700; margin: 0;
}

/* ============================================================
   3. KPI
   ============================================================ */
.fin-kpi {
  background: var(--fin-surface); border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-sm);
  padding: var(--fin-space-4) var(--fin-space-5);
  display: flex; flex-direction: column; gap: var(--fin-space-1);
  container-type: inline-size;
}
.fin-kpi-libelle {
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fin-text-muted);
}
/* Taille indexée sur la largeur de la carte (container query) : un montant FCFA
   à 11 chiffres doit tenir sur une seule ligne, quelle que soit la grille. */
.fin-kpi-valeur {
  font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 11cqw, 1.7rem); font-weight: 700; line-height: 1.2;
  color: var(--fin-text); overflow-wrap: anywhere;
}
.fin-kpi-suffixe { font-size: .8rem; font-weight: 500; color: var(--fin-text-muted); margin-left: 4px; }
.fin-kpi-delta { font-size: .82rem; color: var(--fin-text-muted); }
.fin-kpi-delta.est-positif { color: var(--fin-success); }
.fin-kpi-delta.est-negatif { color: var(--fin-danger); }
.fin-kpi-accent { border-left: 3px solid var(--fin-accent); }

/* ============================================================
   4. TABLES
   ============================================================ */
.fin-table-wrap {
  background: var(--fin-surface); border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-sm);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.fin-table { width: 100%; border-collapse: collapse; background: var(--fin-surface); }
.fin-table th, .fin-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--fin-border); text-align: left;
}
.fin-table th {
  background: var(--fin-surface-2); font-weight: 700; color: var(--fin-text-muted);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.fin-table-wrap .fin-table thead th { position: sticky; top: 0; z-index: 2; }
.fin-table tbody tr:last-child td { border-bottom: 0; }
.fin-table tbody tr:hover td { background: var(--fin-surface-2); }
.fin-table td.num, .fin-table th.num {
  text-align: right; font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums;
}
.fin-table caption {
  caption-side: top; text-align: left; padding: var(--fin-space-3) var(--fin-space-4);
  color: var(--fin-text-muted); font-size: .85rem;
}
.fin-table-total td, .fin-table tr.fin-table-total td {
  font-weight: 700; background: var(--fin-surface-2); border-top: 2px solid var(--fin-border-strong);
}
.fin-table-dense th, .fin-table-dense td { padding: 6px 10px; font-size: .82rem; }
.fin-table tr.est-inactif td { opacity: .55; }

/* En-tête triable */
.fin-table th[data-tri] { cursor: pointer; user-select: none; }
.fin-table th[data-tri]:hover { color: var(--fin-text); }
.fin-table th[data-tri]::after { content: " ↕"; opacity: .4; font-size: .8em; }
.fin-table th[data-tri][aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
.fin-table th[data-tri][aria-sort="descending"]::after { content: " ↓"; opacity: 1; }

/* Bascule en cartes sous 720 px — listes SIMPLES uniquement (jamais les états financiers). */
@media (max-width: 719.98px) {
  .fin-table--cartes { display: block; }
  .fin-table--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fin-table--cartes tbody, .fin-table--cartes tr, .fin-table--cartes td { display: block; width: auto; }
  .fin-table--cartes tr {
    border: 1px solid var(--fin-border); border-radius: var(--fin-radius);
    margin: var(--fin-space-3); padding: var(--fin-space-2) var(--fin-space-3);
  }
  .fin-table--cartes td { border-bottom: 0; padding: 6px 0; display: flex; gap: var(--fin-space-3); justify-content: space-between; align-items: baseline; }
  .fin-table--cartes td::before {
    content: attr(data-th); flex: 0 0 42%;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--fin-text-muted);
  }
  .fin-table--cartes td:empty { display: none; }
  .fin-table--cartes tbody tr:hover td { background: transparent; }
}

/* ============================================================
   5. CHAMPS
   ============================================================ */
.fin-champ { margin-bottom: var(--fin-space-4); }
.fin-champ > label, .fin-champ .fin-champ-label {
  display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--fin-text);
}
.fin-champ-obligatoire { color: var(--fin-danger); margin-left: 2px; }
.fin-champ-aide { display: block; font-size: .82rem; color: var(--fin-text-muted); margin-top: 5px; }
.fin-champ-inline { display: flex; align-items: center; gap: var(--fin-space-2); }
.fin-fieldset { border: 0; padding: 0; margin: 0 0 var(--fin-space-5); }
.fin-fieldset > legend {
  font-size: 1rem; font-weight: 700; padding: 0; margin-bottom: var(--fin-space-3);
  border-bottom: 1px solid var(--fin-border); padding-bottom: var(--fin-space-2); width: 100%;
}
.fin-form-pied {
  display: flex; flex-wrap: wrap; gap: var(--fin-space-3);
  padding-top: var(--fin-space-4); margin-top: var(--fin-space-4);
  border-top: 1px solid var(--fin-border);
}

/* Carte-radio (type d'organisation) */
.fin-radio-carte {
  display: block; border: 2px solid var(--fin-border); border-radius: var(--fin-radius);
  padding: var(--fin-space-4); cursor: pointer; transition: border-color var(--fin-transition), background var(--fin-transition);
}
.fin-radio-carte:hover { border-color: var(--fin-border-strong); }
.fin-radio-carte input { margin-right: var(--fin-space-2); }
.fin-radio-carte:has(input:checked) { border-color: var(--fin-primary); background: var(--fin-primary-bg); }
.fin-radio-carte:has(input:focus-visible) { outline: 3px solid var(--fin-accent); outline-offset: 2px; }

/* Champ mot de passe + bouton afficher/masquer */
.fin-mdp { position: relative; }
.fin-mdp .form-control { padding-right: 46px; }
.fin-mdp button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; background: transparent;
  color: var(--fin-text-muted); cursor: pointer; border-radius: var(--fin-radius-sm);
}
.fin-mdp button:hover { background: var(--fin-surface-2); color: var(--fin-text); }

/* ============================================================
   6. BADGES, PASTILLES, CHIPS
   ============================================================ */
.fin-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.fin-badge-success { background: var(--fin-success-bg); color: var(--fin-success); }
.fin-badge-warning { background: var(--fin-warning-bg); color: var(--fin-warning); }
.fin-badge-danger  { background: var(--fin-danger-bg); color: var(--fin-danger); }
.fin-badge-info    { background: var(--fin-info-bg); color: var(--fin-info); }
.fin-badge-neutre  { background: var(--fin-surface-2); color: var(--fin-text-muted); border: 1px solid var(--fin-border); }
.fin-badge-accent  { background: var(--fin-accent-bg); color: var(--fin-primary-700); }
/* En sombre, --fin-accent-bg est foncé : le texte doit passer en or pour rester lisible. */
html[data-theme="sombre"] .fin-badge-accent { color: var(--fin-accent); }

.fin-pastille { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fin-pastille::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--fin-text-muted);
}
.fin-pastille-neutre::before { background: var(--fin-border-strong); }
.fin-pastille-vert::before { background: var(--fin-success); }
.fin-pastille-orange::before { background: var(--fin-warning); }
.fin-pastille-rouge::before { background: var(--fin-danger); }

.fin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fin-surface-2); border: 1px solid var(--fin-border);
  border-radius: 999px; padding: 4px 12px; font-size: .84rem; color: var(--fin-text-muted);
}
.fin-chip strong { color: var(--fin-text); font-weight: 600; }

.fin-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--fin-primary); color: var(--fin-text-invert);
  font-weight: 700; letter-spacing: .02em;
}
.fin-initiales-sm { width: 32px; height: 32px; font-size: .8rem; }

/* ============================================================
   7. AIDE / GLOSSAIRE
   ============================================================ */
.fin-aide-hote { position: relative; display: inline-block; }
.fin-aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 5px; padding: 0;
  border: 1px solid var(--fin-border-strong); border-radius: 50%;
  background: var(--fin-surface); color: var(--fin-text-muted);
  font-size: .68rem; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle;
}
.fin-aide:hover { background: var(--fin-primary-bg); color: var(--fin-primary); border-color: var(--fin-primary); }
.fin-aide-bulle {
  display: none; position: absolute; z-index: 60; left: 0; top: calc(100% + 8px);
  width: max-content; max-width: 300px;
  background: var(--fin-surface); color: var(--fin-text);
  border: 1px solid var(--fin-border-strong); border-radius: var(--fin-radius);
  box-shadow: var(--fin-shadow-lg); padding: var(--fin-space-3) var(--fin-space-4);
  font-size: .85rem; font-weight: 400; line-height: 1.45; text-transform: none;
  letter-spacing: normal; white-space: normal; text-align: left;
}
.fin-aide-bulle.est-ouverte { display: block; }
@media (max-width: 719.98px) {
  .fin-aide-hote { position: static; }
  .fin-aide-bulle { left: var(--fin-space-4); right: var(--fin-space-4); width: auto; max-width: none; }
}

/* ============================================================
   8. FIL D'ARIANE
   ============================================================ */
.fin-ariane { font-size: .82rem; color: var(--fin-text-muted); margin-bottom: var(--fin-space-3); }
.fin-ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.fin-ariane li { display: flex; align-items: center; gap: 6px; }
.fin-ariane li + li::before { content: "›"; color: var(--fin-border-strong); }
.fin-ariane a { color: var(--fin-text-muted); text-decoration: none; }
.fin-ariane a:hover { color: var(--fin-primary); text-decoration: underline; }
.fin-ariane [aria-current="page"] { color: var(--fin-text); font-weight: 600; }

/* ============================================================
   9. ONGLETS
   ============================================================ */
.fin-onglets {
  display: flex; gap: var(--fin-space-1); overflow-x: auto;
  border-bottom: 1px solid var(--fin-border); margin-bottom: var(--fin-space-5);
  scrollbar-width: thin;
}
.fin-onglet {
  display: inline-flex; align-items: center; gap: var(--fin-space-2);
  padding: 10px 16px; min-height: 44px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--fin-text-muted); font-family: inherit; font-size: .92rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.fin-onglet:hover { color: var(--fin-text); }
.fin-onglet[aria-selected="true"], .fin-onglet.est-actif {
  color: var(--fin-text); border-bottom-color: var(--fin-accent);
}
[data-panneau][hidden] { display: none; }

/* ============================================================
   10. DIALOGUE DE CONFIRMATION
   ============================================================ */
.fin-dialogue {
  border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg);
  box-shadow: var(--fin-shadow-pop); padding: 0;
  width: min(440px, calc(100vw - 32px));
  background: var(--fin-surface); color: var(--fin-text);
}
.fin-dialogue::backdrop { background: rgba(11, 37, 64, .55); }
.fin-dialogue-corps { padding: var(--fin-space-5); }
.fin-dialogue h2 { font-size: 1.1rem; margin: 0 0 var(--fin-space-3); }
.fin-dialogue p { margin: 0; color: var(--fin-text-muted); }
.fin-dialogue-pied {
  display: flex; justify-content: flex-end; gap: var(--fin-space-3);
  padding: var(--fin-space-4) var(--fin-space-5);
  background: var(--fin-surface-2); border-top: 1px solid var(--fin-border);
  border-radius: 0 0 var(--fin-radius-lg) var(--fin-radius-lg);
}

/* ============================================================
   11. FLASH ET TOASTS
   ============================================================ */
.fin-flash {
  border-radius: var(--fin-radius); padding: var(--fin-space-3) var(--fin-space-4);
  margin-bottom: var(--fin-space-4); border: 1px solid transparent;
}
.fin-flash-success { background: var(--fin-success-bg); color: var(--fin-success); border-color: var(--fin-success); }
.fin-flash-error   { background: var(--fin-danger-bg); color: var(--fin-danger); border-color: var(--fin-danger); }
.fin-flash-info    { background: var(--fin-info-bg); color: var(--fin-info); border-color: var(--fin-info); }
.fin-flash-warning { background: var(--fin-warning-bg); color: var(--fin-warning); border-color: var(--fin-warning); }

.fin-toast-zone {
  position: fixed; right: var(--fin-space-5); bottom: var(--fin-space-5); z-index: 90;
  display: flex; flex-direction: column; gap: var(--fin-space-2);
  max-width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.fin-toast {
  background: var(--fin-surface); color: var(--fin-text);
  border: 1px solid var(--fin-border); border-left: 4px solid var(--fin-success);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-lg);
  padding: var(--fin-space-3) var(--fin-space-4); font-size: .92rem;
  pointer-events: auto;
  animation: fin-toast-entree 180ms ease;
}
.fin-toast-erreur { border-left-color: var(--fin-danger); }
@keyframes fin-toast-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 719.98px) {
  .fin-toast-zone { left: var(--fin-space-4); right: var(--fin-space-4); bottom: var(--fin-space-4); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-toast { animation: none; }
}

/* ============================================================
   12. ÉTAT VIDE
   ============================================================ */
.fin-vide { text-align: center; padding: var(--fin-space-7) var(--fin-space-4); color: var(--fin-text-muted); }
.fin-vide i, .fin-vide .fin-vide-icone { font-size: 40px; color: var(--fin-border-strong); display: block; margin-bottom: var(--fin-space-3); }
.fin-vide h2, .fin-vide .fin-vide-titre { font-size: 1.05rem; color: var(--fin-text); margin: 0 auto var(--fin-space-2); }
.fin-vide p { margin: 0 auto var(--fin-space-4); max-width: 46ch; }

/* ============================================================
   13. ÉTAPES
   ============================================================ */
.fin-etapes { display: flex; align-items: flex-start; gap: var(--fin-space-2); list-style: none; margin: 0 0 var(--fin-space-5); padding: 0; }
.fin-etape { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; min-width: 0; }
.fin-etape::before {
  content: attr(data-numero);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fin-surface); border: 2px solid var(--fin-border-strong);
  color: var(--fin-text-muted); font-weight: 700; font-size: .85rem; z-index: 1;
}
.fin-etape::after {
  content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 2px; background: var(--fin-border);
}
.fin-etape:last-child::after { display: none; }
.fin-etape-libelle { font-size: .84rem; color: var(--fin-text-muted); font-weight: 600; }
.fin-etape.faite::before { background: var(--fin-success); border-color: var(--fin-success); color: var(--fin-text-invert); content: "✓"; }
.fin-etape.faite::after { background: var(--fin-success); }
.fin-etape.faite .fin-etape-libelle { color: var(--fin-text); }
.fin-etape.active::before { background: var(--fin-primary); border-color: var(--fin-primary); color: var(--fin-text-invert); }
.fin-etape.active .fin-etape-libelle { color: var(--fin-text); }

/* ============================================================
   14. PROGRESSION
   ============================================================ */
.fin-progression { display: block; height: 10px; border-radius: 999px; background: var(--fin-surface-2); border: 1px solid var(--fin-border); overflow: hidden; }
.fin-progression-barre { display: block; height: 100%; background: var(--fin-accent); width: var(--v, 0%); transition: width var(--fin-transition); }
.fin-progression-legende { font-size: .84rem; color: var(--fin-text-muted); margin-top: 6px; }

/* ============================================================
   15. GRAPHIQUES MAISON (aucune librairie — V-08)
   ============================================================ */
.fin-barres { display: flex; flex-direction: column; gap: var(--fin-space-3); margin: 0; }
.fin-barres-ligne { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; align-items: center; gap: var(--fin-space-3); }
.fin-barres-libelle { font-size: .86rem; color: var(--fin-text-muted); }
.fin-barres-piste { height: 14px; border-radius: 999px; background: var(--fin-surface-2); border: 1px solid var(--fin-border); overflow: hidden; }
.fin-barres-remplissage { display: block; height: 100%; width: var(--v, 0%); background: var(--fin-primary); }
.fin-barres-ligne.est-negatif .fin-barres-remplissage { background: var(--fin-danger); }
.fin-barres-valeur { font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums; font-size: .86rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 719.98px) {
  .fin-barres-ligne { grid-template-columns: 1fr auto; }
  .fin-barres-libelle { grid-column: 1 / -1; }
}

.fin-jauge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--fin-space-2); }
.fin-jauge svg { width: 160px; height: 88px; }
.fin-jauge-piste { fill: none; stroke: var(--fin-surface-2); stroke-width: 14; }
.fin-jauge-valeur { fill: none; stroke: var(--fin-success); stroke-width: 14; stroke-linecap: round; }
.fin-jauge.est-negatif .fin-jauge-valeur { stroke: var(--fin-danger); }
.fin-jauge-texte { font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ============================================================
   16. SHELL : SIDEBAR, DRAWER, TOPBAR
   ============================================================ */
.fin-app { display: flex; min-height: 100vh; }
.fin-sidebar {
  width: var(--fin-sidebar-w); background: var(--fin-primary-700); color: var(--fin-on-primary);
  flex-shrink: 0; display: flex; flex-direction: column;
  padding: var(--fin-space-4); gap: var(--fin-space-2);
}
.fin-sidebar-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--fin-space-3); margin-bottom: var(--fin-space-2); }
.fin-sidebar .brand { color: var(--fin-text-invert); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.fin-sidebar-fermer { display: none; border-color: rgba(255,255,255,.28); background: transparent; color: var(--fin-on-primary); }
.fin-sidebar-fermer:hover { background: rgba(255,255,255,.1); color: var(--fin-text-invert); }
.fin-sidebar .brand .dot { color: var(--fin-accent); }
.fin-nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.fin-nav-section {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.45); padding: var(--fin-space-4) 12px 6px;
}
.fin-nav a {
  display: flex; align-items: center; gap: var(--fin-space-3);
  color: var(--fin-on-primary-muted); text-decoration: none; padding: 10px 12px; min-height: 44px;
  border-radius: var(--fin-radius-sm); margin-bottom: 2px; font-weight: 500;
  transition: background var(--fin-transition);
}
.fin-nav a:hover { background: rgba(255,255,255,.07); color: var(--fin-text-invert); }
.fin-nav a.active { background: var(--fin-accent); color: var(--fin-primary-700); font-weight: 700; }
.fin-sidebar-pied { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--fin-space-3); margin-top: var(--fin-space-3); }
.fin-sidebar-profil { display: flex; align-items: center; gap: var(--fin-space-3); padding: var(--fin-space-2) 4px var(--fin-space-3); }
.fin-sidebar-profil .fin-initiales { background: var(--fin-accent); color: var(--fin-primary-700); }
.fin-sidebar-profil-nom { color: var(--fin-text-invert); font-weight: 600; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.fin-sidebar-profil-role { color: rgba(255,255,255,.6); font-size: .78rem; }
.fin-sidebar .fin-btn-ghost { border-color: rgba(255,255,255,.28); color: var(--fin-on-primary-muted); width: 100%; }
.fin-sidebar .fin-btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--fin-text-invert); }

.fin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fin-topbar {
  height: var(--fin-topbar-h); background: var(--fin-surface);
  border-bottom: 1px solid var(--fin-border); display: flex; align-items: center;
  justify-content: space-between; gap: var(--fin-space-4);
  padding: 0 var(--fin-space-5); position: sticky; top: 0; z-index: 30;
}
.fin-topbar-gauche { display: flex; align-items: center; gap: var(--fin-space-3); min-width: 0; }
.fin-topbar-droite { display: flex; align-items: center; gap: var(--fin-space-3); }
.fin-topbar .fin-ariane { margin-bottom: 0; }
.fin-content { padding: var(--fin-space-5); flex: 1; min-width: 0; }
.fin-burger { display: none; }
.fin-theme-bascule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--fin-radius-sm);
  border: 1px solid var(--fin-border); background: var(--fin-surface);
  color: var(--fin-text-muted); cursor: pointer;
}
.fin-theme-bascule:hover { background: var(--fin-surface-2); color: var(--fin-text); }
.fin-theme-bascule .icone-sombre { display: none; }
html[data-theme="sombre"] .fin-theme-bascule .icone-sombre { display: inline; }
html[data-theme="sombre"] .fin-theme-bascule .icone-clair { display: none; }

/* Drawer sous 1024 px */
.fin-voile {
  position: fixed; inset: 0; z-index: 40; background: rgba(11, 37, 64, .5);
  border: 0; padding: 0; display: none;
}
.fin-voile.est-ouvert { display: block; }
@media (max-width: 1023.98px) {
  .fin-burger { display: inline-flex; }
  .fin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%); transition: transform var(--fin-transition);
    box-shadow: var(--fin-shadow-lg); overflow-y: auto;
  }
  .fin-sidebar.est-ouvert { transform: none; }
  .fin-sidebar-fermer { display: inline-flex; }
  .fin-topbar { height: var(--fin-topbar-h-mobile); padding: 0 var(--fin-space-4); }
  .fin-content { padding: var(--fin-space-4); }
}

/* ============================================================
   17. NAVIGATION D'EXERCICE (§7.3)
   ============================================================ */
.fin-nav-exercice {
  background: var(--fin-surface); border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-sm);
  margin-bottom: var(--fin-space-5); overflow: hidden;
}
.fin-nav-exercice-contexte {
  display: flex; align-items: center; gap: var(--fin-space-2); flex-wrap: wrap;
  padding: var(--fin-space-3) var(--fin-space-4);
  border-bottom: 1px solid var(--fin-border); background: var(--fin-surface-2);
  font-size: .88rem;
}
.fin-nav-exercice-contexte a { text-decoration: none; font-weight: 600; }
.fin-nav-exercice-liens { display: flex; overflow-x: auto; scrollbar-width: thin; }
.fin-nav-exercice-liens a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; min-height: 44px;
  color: var(--fin-text-muted); text-decoration: none; font-size: .9rem; font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.fin-nav-exercice-liens a:hover { color: var(--fin-text); }
.fin-nav-exercice-liens a[aria-current="page"] { color: var(--fin-text); border-bottom-color: var(--fin-accent); }

/* ============================================================
   18. MENU D'ACTIONS (<details> stylé — fonctionne sans JS)
   ============================================================ */
.fin-actions-menu { position: relative; display: inline-block; }
.fin-actions-menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--fin-radius-sm);
  border: 1px solid var(--fin-border-strong); background: var(--fin-surface);
  color: var(--fin-text); cursor: pointer;
}
.fin-actions-menu > summary::-webkit-details-marker { display: none; }
.fin-actions-menu > summary:hover { background: var(--fin-surface-2); }
.fin-actions-menu-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px;
  background: var(--fin-surface); border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-lg); padding: 6px;
}
.fin-actions-menu-liste a,
.fin-actions-menu-liste button {
  display: flex; align-items: center; gap: var(--fin-space-3);
  width: 100%; padding: 9px 12px; min-height: 40px;
  border: 0; background: transparent; border-radius: var(--fin-radius-sm);
  color: var(--fin-text); font-family: inherit; font-size: .9rem; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
}
.fin-actions-menu-liste a:hover,
.fin-actions-menu-liste button:hover { background: var(--fin-surface-2); }
.fin-actions-menu-liste .est-destructif { color: var(--fin-danger); }
.fin-actions-menu-liste form { margin: 0; }

/* ============================================================
   18 bis. LISTES ET GROUPES D'ACTIONS (hub dossier, A3)
   ============================================================ */
.fin-ligne-liste { padding: 6px 0; border-bottom: 1px solid var(--fin-border); }
.fin-ligne-liste:last-child { border-bottom: 0; }

.fin-groupe-titre {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fin-text-muted); margin: 0 0 var(--fin-space-2);
}
.fin-lien-action {
  display: flex; align-items: center; gap: var(--fin-space-3);
  min-height: 44px; padding: 8px 12px; border-radius: var(--fin-radius-sm);
  color: var(--fin-text); text-decoration: none; font-weight: 500;
  transition: background var(--fin-transition);
}
.fin-lien-action:hover { background: var(--fin-primary-bg); color: var(--fin-primary); }
.fin-lien-action i { color: var(--fin-text-muted); }
.fin-lien-action:hover i { color: var(--fin-primary); }
.fin-exercice .fin-card-titre span { gap: var(--fin-space-3); }

/* ============================================================
   19. SQUELETTE DE CHARGEMENT
   ============================================================ */
.fin-squelette { background: var(--fin-surface-2); border-radius: var(--fin-radius-sm); height: 1em; animation: fin-pulse 1.4s ease-in-out infinite; }
@keyframes fin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.fin-spinner {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: fin-rotation .7s linear infinite;
}
@keyframes fin-rotation { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fin-squelette, .fin-spinner { animation: none; }
}

/* ============================================================
   20. VITRINE
   ============================================================ */
.fin-hero {
  background: linear-gradient(135deg, var(--fin-primary-700), var(--fin-primary));
  color: var(--fin-text-invert); padding: 96px 24px; text-align: center;
}
.fin-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; margin: 0 0 var(--fin-space-4); color: var(--fin-text-invert); }
.fin-hero p { font-size: 1.15rem; color: var(--fin-on-primary-muted); max-width: 640px; margin: 0 auto var(--fin-space-5); }
.fin-container { max-width: 1120px; margin: 0 auto; padding: 0 var(--fin-space-4); }
.fin-container-etroit { max-width: 760px; margin: 0 auto; padding: 0 var(--fin-space-4); }
.fin-lecture { max-width: 720px; }
.fin-public-header { display: flex; align-items: center; justify-content: space-between; gap: var(--fin-space-4); padding: var(--fin-space-4) 0; flex-wrap: wrap; }
.fin-public-header .brand { font-weight: 800; font-size: 1.25rem; color: var(--fin-link); text-decoration: none; }
.fin-public-header .brand .dot { color: var(--fin-accent); }
.fin-public-footer { border-top: 1px solid var(--fin-border); padding: var(--fin-space-6) 0; color: var(--fin-text-muted); margin-top: var(--fin-space-7); background: var(--fin-surface); }
.fin-public-footer .brand { font-weight: 800; font-size: 1.1rem; color: var(--fin-link); text-decoration: none; }
.fin-public-footer .brand .dot { color: var(--fin-accent); }
.fin-public-footer a:hover { color: var(--fin-link); }
.fin-public-footer-bas { border-top: 1px solid var(--fin-border); padding-top: var(--fin-space-4); }
.fin-section { padding: var(--fin-space-7) 0; }
.fin-section-alt { background: var(--fin-surface); border-block: 1px solid var(--fin-border); }
.fin-hero-actions { justify-content: center; }
.fin-lecture-centree { max-width: 760px; margin: 0 auto; }
.fin-icone-atout { font-size: 1.8rem; color: var(--fin-accent); display: inline-block; }
.fin-puce-ok { color: var(--fin-success); margin-right: 4px; }
.fin-etape-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fin-accent-bg); color: var(--fin-primary-700);
  font-family: var(--fin-font-mono); font-weight: 700;
}
html[data-theme="sombre"] .fin-etape-numero { color: var(--fin-accent); }

/* Section alternée : texte d'un côté, maquette de l'autre */
.fin-duo { display: grid; gap: var(--fin-space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .fin-duo { grid-template-columns: 1fr 1fr; gap: var(--fin-space-7); }
  .fin-duo-inverse > :first-child { order: 2; }
}

/* Bande d'appel à l'action finale */
.fin-cta-final {
  background: linear-gradient(135deg, var(--fin-primary-700), var(--fin-primary));
  color: var(--fin-text-invert);
}
.fin-cta-final h2 { color: var(--fin-text-invert); margin-bottom: var(--fin-space-3); }
.fin-cta-final p { color: var(--fin-on-primary-muted); }
.fin-section-titre { text-align: center; max-width: 62ch; margin: 0 auto var(--fin-space-6); }
.fin-section-titre h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 var(--fin-space-3); }
.fin-section-titre p { color: var(--fin-text-muted); margin: 0; }

/* FAQ en <details> */
.fin-faq { border: 1px solid var(--fin-border); border-radius: var(--fin-radius); background: var(--fin-surface); margin-bottom: var(--fin-space-3); }
.fin-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fin-space-3);
  padding: var(--fin-space-4); min-height: 44px; cursor: pointer; font-weight: 600; list-style: none;
}
.fin-faq > summary::-webkit-details-marker { display: none; }
.fin-faq > summary::after { content: "+"; font-size: 1.3rem; color: var(--fin-text-muted); font-weight: 400; }
.fin-faq[open] > summary::after { content: "−"; }
.fin-faq-corps { padding: 0 var(--fin-space-4) var(--fin-space-4); color: var(--fin-text-muted); }

/* Maquette-produit CSS (aucune image lourde) */
.fin-maquette {
  background: var(--fin-surface); border: 1px solid var(--fin-border-strong);
  border-radius: var(--fin-radius-lg); box-shadow: var(--fin-shadow-pop);
  overflow: hidden; text-align: left; max-width: min(720px, 100%); margin: 0 auto;
  min-width: 0;
}
/* Le tableau d'illustration défile DANS la maquette : jamais de scroll de page (§10.2). */
.fin-maquette-corps { overflow-x: auto; }
.fin-maquette-barre { display: flex; align-items: center; gap: 6px; padding: 10px var(--fin-space-4); background: var(--fin-surface-2); border-bottom: 1px solid var(--fin-border); }
.fin-maquette-point { width: 10px; height: 10px; border-radius: 50%; background: var(--fin-border-strong); }
.fin-maquette-corps { padding: var(--fin-space-4); }

/* Carte de plan tarifaire */
.fin-plan { display: flex; flex-direction: column; height: 100%; padding: var(--fin-space-5); }
.fin-plan-prix { font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; margin: var(--fin-space-2) 0; }
.fin-plan-prix small { font-family: var(--fin-font); font-size: .85rem; font-weight: 500; color: var(--fin-text-muted); }
.fin-plan ul { list-style: none; padding: 0; margin: var(--fin-space-4) 0; display: flex; flex-direction: column; gap: var(--fin-space-2); flex: 1; }
.fin-plan li { display: flex; align-items: flex-start; gap: var(--fin-space-2); font-size: .92rem; }
.fin-plan li i { color: var(--fin-success); }
.fin-plan-recommande { border-color: var(--fin-accent); box-shadow: var(--fin-shadow); }

/* Page d'authentification */
.fin-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--fin-space-5) var(--fin-space-4);
  background:
    radial-gradient(ellipse at 50% 0%, var(--fin-primary-bg), transparent 60%),
    var(--fin-bg);
}
.fin-auth-carte { width: 100%; max-width: 420px; padding: var(--fin-space-6); }
.fin-auth-carte-large { max-width: 560px; }
.fin-auth-marque { text-align: center; font-weight: 800; font-size: 1.35rem; color: var(--fin-link); text-decoration: none; display: block; margin-bottom: var(--fin-space-5); }
.fin-auth-marque .dot { color: var(--fin-accent); }
.fin-auth .form-control { min-height: 46px; }
.fin-auth-carte h1 { margin-bottom: var(--fin-space-1); }
.fin-auth-carte h1 + p { margin-bottom: var(--fin-space-5); }

/* Page d'erreur */
.fin-erreur { text-align: center; padding: var(--fin-space-8) var(--fin-space-4); }
.fin-erreur-code {
  font-family: var(--fin-font-mono); font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 700;
  line-height: 1; color: var(--fin-primary); margin: 0 0 var(--fin-space-4);
}
.fin-erreur h1 { font-size: clamp(1.3rem, 4vw, 1.8rem); margin-bottom: var(--fin-space-3); }
.fin-erreur p { color: var(--fin-text-muted); max-width: 46ch; margin: 0 auto var(--fin-space-5); }

/* ============================================================
   21. SAISIE D'ÉCRITURE (A4)
   ============================================================ */

.fin-saisie-entete {
  display: grid; gap: var(--fin-space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fin-saisie-entete .fin-champ { margin-bottom: 0; }

#lignes .col-compte { width: 18%; }
#lignes .col-montant { width: 16%; }
#lignes .col-action { width: 48px; }
#lignes td { padding: 6px 8px; }
#lignes .form-control-sm { min-height: 36px; }

/* Pied de saisie : collant en bas d'écran, il porte l'indicateur d'équilibre. */
.fin-saisie-pied {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fin-space-3);
  margin: var(--fin-space-4) calc(-1 * var(--fin-space-5)) calc(-1 * var(--fin-space-5));
  padding: var(--fin-space-4) var(--fin-space-5);
  background: var(--fin-surface-2);
  border-top: 1px solid var(--fin-border);
  border-radius: 0 0 var(--fin-radius) var(--fin-radius);
}

.fin-equilibre {
  margin: 0; font-family: var(--fin-font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.1rem; font-weight: 700; color: var(--fin-text-muted);
}
.fin-equilibre.est-equilibree { color: var(--fin-success); }
.fin-equilibre.est-desequilibree { color: var(--fin-danger); }