/* ============================================================
   ComptAsso -- CSS Commun
   Design v4 -- Conventions Design v2 -- Option B
   Open Sans | Sidebar 180px (sections) | Subnav (pages)
   ============================================================ */

/* --- VARIABLES --- */
:root {
  /* Palette principale */
  --primary: #805050;
  --primary-light: #F0DDD6;
  --primary-dark: #5C3A3A;
  --primary-hover: #966060;

  /* Accent = actions utilisateur UNIQUEMENT */
  --accent: #33A6AA;
  --accent-light: #E8F6F6;
  --accent-dark: #2B8E92;

  /* Rose doux (badges, decoratif) */
  --rose: #CE8F8A;
  --rose-light: #F5DCD9;

  /* Fond et bordures */
  --bg: #FBF0E9;
  --surface: #FFFFFF;
  --border: #E8D8D0;
  --border-light: #F3ECE7;
  --grid-border: #DBC4BA;

  /* Texte */
  --text: #3D2020;
  --text-secondary: #6B5548;
  --text-muted: #B09090;

  /* Semantiques */
  --success: #5E8C61;
  --success-bg: #F0F5EE;
  --warning: #C4883A;
  --warning-bg: #FDF6EC;
  --danger: #B84040;
  --danger-bg: #FDF0F0;
  --info: #33A6AA;
  --info-bg: #E8F6F6;

  /* Typographie */
  --font-sans: 'Open Sans', -apple-system, sans-serif;
  --font-mono: 'Open Sans', -apple-system, sans-serif;
  /* Note : --font-mono est identique a --font-sans aujourd'hui.
     Les chiffres utilisent en plus font-variant-numeric: tabular-nums
     pour s'aligner en colonne. */

  /* Layout */
  --sw: 210px;
  --pw: 300px;
  --sidebar-width: 210px; /* alias compatibilite */
  --radius: 10px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(61,32,32,0.05);
  --shadow: 0 1px 3px rgba(61,32,32,0.08), 0 1px 2px rgba(61,32,32,0.04);
  --shadow-md: 0 4px 6px -1px rgba(61,32,32,0.08), 0 2px 4px -1px rgba(61,32,32,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(61,32,32,0.08), 0 4px 6px -2px rgba(61,32,32,0.04);

  /* Compatibilite anciens noms (CSS de pages existantes) */
  --rose-50: #F5DCD9;  --rose-100: #F5DCD9;  --rose-200: #E8B8B3;
  --rose-300: #CE8F8A;  --rose-400: #CE8F8A;  --rose-500: #CE8F8A;
  --rose-600: #A06A65;  --rose-700: #805050;
  --teal-50: #E8F6F6;   --teal-100: #D0ECEC;  --teal-200: #A0D8DA;
  --teal-400: #33A6AA;  --teal-500: #33A6AA;  --teal-600: #2B8E92;
  --teal-700: #237578;
  --slate-50: #FBF0E9;   --slate-100: #F3ECE7;  --slate-200: #E8D8D0;
  --slate-300: #D0C0B8;  --slate-400: #B09090;  --slate-500: #805050;
  --slate-600: #6B4545;  --slate-700: #5C3A3A;  --slate-800: #3D2020;
  --slate-900: #5C3A3A;
  --violet-50: #FBF0E9;  --violet-100: #FBF0E9; --violet-400: #966060;
  --violet-500: #805050; --violet-600: #6B4545;  --violet-700: #5C3A3A;
  --amber-50: #FDF6EC;   --amber-100: #FDF6EC;  --amber-300: #E8B86A;
  --amber-400: #D4A04C;  --amber-500: #C4883A;  --amber-600: #A87030;
}

/* --- RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.4;
}


/* ============================================================
   SIDEBAR 180px -- Sections seulement
   ============================================================ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sw);
  background: var(--primary-dark);
  color: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

/* Logo */
.sb-logo {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-logo a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-logo-i {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #966060, #805050);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(92,58,58,0.4);
  flex-shrink: 0;
}
.sb-logo-t { font-size: 14px; font-weight: 700; color: #fff; }
.sb-logo-s { font-size: 10px; color: rgba(255,255,255,0.5); }

/* Navigation sections */
.sb-nav {
  flex: 1;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Items de section = boutons */
.sb-it {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.12s;
  background: rgba(255,255,255,0.04);
}
.sb-it:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.sb-it.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.sb-it.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
  background: transparent;
}
.sb-it-i {
  width: 22px;
  text-align: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Utilisateur */
.sb-u {
  margin-top: auto;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 10px;
}
.sb-u-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), #E0A8A3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sb-u-n { font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 600; }
.sb-u-r { font-size: 10px; color: rgba(255,255,255,0.4); }
.sb-u-logout {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.sb-u-logout:hover { color: rgba(255,255,255,0.8); }

/* Compatibilite anciennes classes */
.sidebar-logo { display: none; }
.sidebar-nav  { display: none; }
.sidebar-footer { display: none; }
.nav-item     { display: none; }
.nav-section  { display: none; }
.nav-label-full  { display: none; }
.nav-label-short { display: none; }
.badge-soon      { display: none; }
.sidebar-user { display: none; }
.sidebar-user-name { display: none; }
.sidebar-logout { display: none; }
.sidebar-version { display: none; }


/* ============================================================
   SOUS-NAVIGATION HORIZONTALE -- Pages
   ============================================================ */
.subnav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.subnav:empty { display: none; }

.subnav a {
  padding: 10px 14px;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.subnav a:hover { color: var(--text); }

.subnav a.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.subnav a.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}


/* ============================================================
   MAIN & TOPBAR
   ============================================================ */
.main {
  /* margin-left supprime : la topbar (refonte v5) prend la largeur totale.
     L'ancienne sidebar gauche est neutralisee. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   PAGE-HEADER : bandeau de titre d'une page (titre + filtres + actions)
   ============================================================
   ATTENTION : a ne pas confondre avec .app-topbar (navigation globale).
   - .app-topbar  = barre de navigation globale (logo + sections + Quitter)
   - .page-header = bandeau de titre INTERNE a chaque page

   Structure HTML attendue :
     <div class="page-header">
       <div class="page-header-left">
         <h2>Titre</h2>
         <p>Sous-titre optionnel</p>
         <!-- ou : -->
         <div class="page-header-filters">
           <select>...</select>
           ...
         </div>
       </div>
       <div class="page-header-right">
         <button>Action</button>
         ...
       </div>
     </div>

   Pour les vues avec bouton retour (ex: detail d'evenement) :
     <div class="page-header">
       <div class="page-header-left">
         <div class="page-header-title-group">
           <button class="page-header-back">&larr;</button>
           <div>
             <h2>Titre</h2>
             <p>Sous-titre</p>
           </div>
         </div>
       </div>
       <div class="page-header-right">...</div>
     </div>
   ============================================================ */

.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* Permet le wrap en largeur reduite */
  gap: 12px;                /* Espace propre quand ca wrap */
}

.page-header-left {
  display: flex;
  flex-direction: column;
  min-width: 0;             /* Permet aux enfants de retrecir */
  flex: 1 1 auto;
}

.page-header-left h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.page-header-left p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;          /* Permet aux boutons de wrap aussi */
}

/* Ligne de filtres sous le titre */
.page-header-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Bouton retour (utilise dans les vues detail) */
.page-header-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
}
.page-header-back:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text-muted);
}

/* Bouton retour + titre (groupe horizontal) */
.page-header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); width: auto;
}

/* Boutons d'action en ligne */
.row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  font-size: 17px;
  transition: all 0.12s; vertical-align: middle;
}
.row-btn:hover { background: rgba(128,80,80,0.1); }
.row-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }


/* ============================================================
   CONTENU
   ============================================================ */
.content {
  padding: 24px;
  flex: 1;
}


/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-primary { background: rgba(128,80,80,0.1); color: var(--primary); }
.badge-success { background: var(--success-bg);    color: var(--success); }
.badge-accent  { background: var(--accent-light);  color: var(--accent); }
.badge-info    { background: var(--info-bg);        color: var(--info); }
.badge-warning { background: var(--warning-bg);     color: var(--warning); }


/* ============================================================
   TAG ANALYTIQUE (activite / secteur)
   Reference : modale-ecriture-v5.html (22/02/2026) -- VALIDE
   Utilise par : journal, grand livre, modale correction
   -- En lecture : badge colore cliquable
   -- En edition : clic transforme en contenteditable + autocomplete
   -- Vide : texte "+ activite" cliquable
   -- Pas de croix, backspace dans autocomplete pour vider
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .1s;
  max-width: 100%;
}
.tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-activite { background: var(--accent-light); color: var(--accent); }
.tag-activite:hover { background: rgba(51,166,170,.2); }
.tag-secteur  { background: var(--primary-light); color: var(--primary); }
.tag-secteur:hover  { background: rgba(128,80,80,.15); }
.tag-empty { color: var(--text-muted); font-weight: 400; font-style: italic; font-size: 11px; cursor: pointer; }
.tag-empty:hover { color: var(--accent); }


/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row.single { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; }

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.label-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

input, select, textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51,166,170,0.12);
}

input::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 60px; }

.input-montant {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
}


/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px rgba(51,166,170,0.25);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--border-light); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--border-light); color: var(--text); }

.btn-sm { font-size: 13px; padding: 6px 14px; }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 7px; border: none;
  background: transparent; cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s;
  color: var(--text-muted);
}
.icon-btn:hover { background: var(--border-light); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }


/* ============================================================
   TABLEAUX
   ============================================================ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead { position: sticky; top: 0; z-index: 10; }
tfoot { position: sticky; bottom: 0; z-index: 10; }
tfoot td {
  background: var(--primary-light);
  border-top: 2px solid var(--primary);
  padding: 7px 8px; font-weight: 700; font-size: 13px;
}

th {
  padding: 7px 8px;
  font-size: 10px; font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--grid-border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  text-align: left;
  background: var(--primary-light);
}
th.text-right { text-align: right; }

td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  height: 32px;
  vertical-align: middle;
}
td.mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
td.text-right { text-align: right; }
td.text-muted { color: var(--text-muted); }
td.text-primary { color: var(--primary); font-weight: 600; }

tr:hover { background: var(--primary-light); }

tr.row-new { background: rgba(128,80,80,0.04); cursor: pointer; }
tr.row-new td { color: var(--text-muted); font-style: italic; }
tr.row-new:hover { background: rgba(128,80,80,0.07) !important; }


/* ============================================================
   COMPOSANT TABLEAU COMPTABLE (.jnl)
   Reference : composant-tableau-comptable.md (22/02/2026)
   Utilise par : journal, grand livre, analytique
   ============================================================ */

/* --- Workspace layout --- */
.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}
.table-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* --- Table .jnl (mode normal = defaut) --- */
.jnl { width: 100%; border-collapse: collapse; font-size: 14px; }

/* En-tetes (thead) */
.jnl thead { position: sticky; top: 0; z-index: 10; }
.jnl thead th {
  font-size: 10px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .4px; text-align: left;
  padding: 7px 8px; background: var(--primary-light);
  border-bottom: 2px solid var(--grid-border);
  border-right: 1px solid rgba(128,80,80,.1);
}
.jnl thead th:last-child { border-right: none; }
.jnl thead th.r { text-align: right; }

/* Cellules (tbody) */
.jnl tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: middle;
  height: 32px;
  cursor: default;
}
.jnl tbody td:last-child { border-right: none; }

/* Separation entre ecritures */
.jnl tbody tr.ecr-start td {
  border-top: 2px solid var(--grid-border);
}

/* Hover : ligne seule, CSS pur, --primary-light */
.jnl tbody tr:hover { background: transparent; }
.jnl tbody tr[data-ecr]:hover td {
  background: var(--primary-light);
}

/* Selection : rose soutenu + trait brun a gauche */
.jnl tbody tr.line-sel td,
.jnl tbody tr.line-sel:hover td {
  background: #E8CFC4;
}
.jnl tbody tr.line-sel > td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Espace de confort en bas du tableau : laisse a la ligne en cours de saisie
   la possibilite de remonter au milieu de l'ecran quand l'utilisateur scrolle.
   Reste invisible (pas de bordure, fond transparent). */
.jnl tbody tr.scroll-spacer { pointer-events: none; }
.jnl tbody tr.scroll-spacer:hover td { background: transparent !important; }
.jnl tbody tr.scroll-spacer td {
  height: 30vh;
  background: transparent !important;
  border: none !important;
  padding: 0;
}

/* Footer (tfoot) */
.jnl tfoot { position: sticky; bottom: 0; z-index: 10; }
.jnl tfoot td {
  background: var(--primary-light);
  border-top: 2px solid var(--primary);
  padding: 7px 8px; font-weight: 700; font-size: 14px;
}
.foot-montant {
  text-align: right; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Variante compact (.jnl.compact) --- */
.jnl.compact { font-size: 13px; }
.jnl.compact thead th {
  padding: 4px 10px;
  border-bottom-width: 1px;
  color: var(--text-muted);
}
.jnl.compact tbody td {
  padding: 4px 10px;
  height: 28px;
}
.jnl.compact tfoot td {
  padding: 5px 10px;
  font-size: 13px;
}
.jnl.compact .c-date,
.jnl.compact .c-piece { font-size: 12px; }
.jnl.compact .c-compte { font-size: 14px; }
.jnl.compact .c-montant { font-size: 14px; }
.jnl.compact .c-libelle { font-size: 13px; }


/* --- Classes de cellules --- */
.c-date { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.c-piece { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-compte { font-size: 15px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.c-libelle { font-size: 14px; color: var(--text); }
.c-montant { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.c-muted { color: var(--text-muted); font-weight: 400; }
.c-activite { font-size: 11px; font-weight: 600; color: var(--accent); }
.c-secteur { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.c-solde { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }


/* --- Largeurs de colonnes --- */
.w-margin { width: 28px; min-width: 28px; padding: 0 !important; border-right: none !important; text-align: center; vertical-align: middle; }
.w-date { min-width: 100px; }
.w-piece { min-width: 105px; }
.w-compte { min-width: 72px; }
.w-debit { min-width: 90px; }
.w-credit { min-width: 90px; }
.w-activite { min-width: 120px; }
.w-secteur { min-width: 95px; }
.w-pj { width: 26px; min-width: 26px; text-align: center; }
.w-del { width: 32px; min-width: 32px; padding: 0 !important; text-align: center; vertical-align: middle; }
.jnl thead th.w-margin { border-right: none; }

/* La colonne Libelle (5e td, sans classe par convention spec) prend l'espace restant.
   Sans cette regle, le navigateur peut donner trop d'espace aux autres colonnes
   et tronquer le libelle, surtout en ecran partage. */
.jnl thead th:nth-child(5),
.jnl tbody td:nth-child(5),
.jnl tfoot td:nth-child(5) {
  width: 100%;
}


/* --- Mode edition (journal) --- */

/* Bouton + (marge gauche) -- visible au survol */
.m-ins {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; margin: 0 auto;
  background: transparent; color: var(--text-muted);
  border-radius: 4px; cursor: pointer; transition: all .08s;
}
.m-ins svg { width: 14px; height: 14px; }
.m-ins:hover { color: var(--accent); background: var(--accent-light); }
tr[data-ecr]:hover .m-ins { display: flex; }

/* Bouton x (colonne droite) -- visible au survol ou selection */
.m-del {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; margin: 0 auto;
  background: transparent; color: var(--text-muted);
  border-radius: 4px; cursor: pointer; transition: all .08s;
}
.m-del svg { width: 14px; height: 14px; }
.m-del:hover { color: var(--danger); background: var(--danger-bg); }
tr[data-ecr]:hover .m-del { display: flex; }
tr.line-sel .m-del { display: flex; }

/* Piece jointe */
.pj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; background: transparent;
  cursor: pointer; border-radius: 4px;
}
.pj-btn svg { width: 13px; height: 13px; stroke-width: 2; fill: none; }
.pj-btn.empty svg { stroke: var(--text-muted); opacity: .25; }
.pj-btn.has-pj svg { stroke: var(--accent); }
.pj-btn:hover { background: var(--accent-light); }
.pj-btn:hover svg { stroke: var(--accent); opacity: 1; }

/* Ghost row (nouvelle ecriture) */
.ghost td { background: #FEFCFA; cursor: pointer; }
.ghost:hover td { background: var(--accent-light); }
.c-ph { color: var(--text-muted); font-style: italic; font-size: 13px; }

/* Filler rows (remplissage visuel) */
.filler td {
  border-bottom: 1px solid var(--border-light) !important;
  border-right: 1px solid var(--border-light);
  height: 32px !important; background: var(--surface);
}
.filler td:last-child { border-right: none; }

/* ============================================================
   VARIANTE EDITION -- .jnl-edit
   Inputs permanents dans les cellules (journal uniquement)
   Les cellules contiennent des <input> au lieu de texte.
   Tab fonctionne nativement.
   ============================================================ */

/* Cellule : pas de padding, l'input gere tout */
.jnl-edit tbody td { padding: 0; }

/* L'input EST la cellule : meme taille, meme police, transparent */
.jnl-edit tbody td input {
  display: block; width: 100%; height: 32px;
  padding: 5px 8px;
  border: none !important; outline: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  font-family: var(--font-sans); font-size: 14px; color: var(--text);
}

/* Focus : fond tres leger, AUCUN cadre */
.jnl-edit tbody td input:focus {
  background: #FFFDF8;
  border: none !important; outline: none !important;
  box-shadow: none !important; border-radius: 0 !important;
}

/* Hover : le fond de la ligne passe aussi sur les inputs */
.jnl-edit tbody tr:hover td input { background: var(--primary-light); }
.jnl-edit tbody tr:hover td input:focus { background: #FFFDF8; }

/* Disabled (ligne lettree) */
.jnl-edit tbody td input:disabled { color: var(--text-muted); cursor: default; }

/* Cellule lecture seule (piece) */
.jnl-edit tbody td.cell-ro { padding: 5px 8px; cursor: default; }

/* Styles par type d'input */
.jnl-edit .inp-date { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.jnl-edit .inp-compte { font-size: 15px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.jnl-edit .inp-libelle { font-size: 14px; }
.jnl-edit .inp-debit,
.jnl-edit .inp-credit { text-align: right; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.jnl-edit .inp-activite { font-size: 11px; font-weight: 600; color: var(--accent); }

/* Placeholders debit/credit : tiret gris */
.jnl-edit .inp-debit::placeholder,
.jnl-edit .inp-credit::placeholder { color: var(--text-muted); font-weight: 400; opacity: 1; }

/* Ghost row (nouvelle ecriture) */
.jnl-edit .ghost td { background: #FEFCFA; }
.jnl-edit .ghost:hover td { background: var(--primary-light); }
.jnl-edit .ghost:hover td input { background: var(--primary-light); }
.jnl-edit .ghost input:focus { background: #FFFDF8 !important; }

/* Colonne marge : bouton + */
.col-margin { width: 28px; min-width: 28px; padding: 0 !important; border-right: none !important; text-align: center; vertical-align: middle; }
.jnl-edit thead th.col-margin { border-right: none !important; }
.btn-add {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; margin: 0 auto;
  background: transparent; color: var(--text-muted);
  border-radius: 4px; cursor: pointer;
}
.btn-add svg { width: 14px; height: 14px; }
.btn-add:hover { color: var(--accent); background: var(--accent-light); }
tr[data-ecr]:hover .btn-add { display: flex; }

/* Bouton x (suppression ligne) dans .jnl-edit */
.btn-del {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; margin: 0 auto;
  background: transparent; color: var(--text-muted);
  border-radius: 4px; cursor: pointer; transition: all .08s;
}
.btn-del svg { width: 14px; height: 14px; }
.btn-del:hover { color: var(--danger); background: var(--danger-bg); }
tr[data-ecr]:hover .btn-del { display: flex; }

/* PJ bouton */
.pj-btn svg { width: 13px; height: 13px; stroke-width: 2; }


/* Dropdown autocomplete -- element global positionne en fixed */
/* z-index 400 : au-dessus du panneau lateral (z-index 10-300) - ref maquette v5 */
.dd-list {
  display: none; position: fixed; z-index: 400;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(61,32,32,.12);
  max-height: 240px; overflow-y: auto; min-width: 280px;
}
.dd-list.show { display: block; }
.dd-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 12px;
}
.dd-opt:hover { background: var(--primary-light); }
.dd-opt.dd-opt-hl { background: var(--primary-light) !important; }
.opt-num { font-weight: 700; color: var(--primary); min-width: 55px; font-variant-numeric: tabular-nums; }
.opt-lib { color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-act-name { font-weight: 600; color: var(--text); }
.opt-act-grp { font-size: 11px; color: var(--text-muted); margin-left: auto; }


/* ============================================================
   PANNEAU LATERAL (detail ecriture selectionnee)
   Integre dans le layout flex (pas overlay)
   ============================================================ */
.side-panel {
  width: var(--pw, 280px);
  min-width: var(--pw, 280px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.side-panel #pnl { flex: 1; }

.pnl-header {
  padding: 10px 16px; border-bottom: 1px solid var(--border-light);
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .5px;
}
.pnl-body { padding: 12px 16px; }
.pnl-section { margin-bottom: 14px; }
.pnl-section-t {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}

.pnl-empty { text-align: center; padding: 40px 16px; color: var(--text-muted); font-size: 13px; }
.pnl-empty-ico { font-size: 28px; margin-bottom: 8px; opacity: .4; }

.pnl-eq {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
}
.pnl-eq.ok { background: var(--success-bg); color: var(--success); }
.pnl-eq.warn { background: var(--warning-bg); color: var(--warning); }

.pnl-detail { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.pnl-detail-line { display: flex; align-items: center; padding: 2px 0; font-size: 12px; }
.pnl-detail-c { font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; min-width: 50px; }
.pnl-detail-lb { flex: 1; margin: 0 6px; }
.pnl-detail-m { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

.pnl-ana { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; }
.pnl-ana-d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pnl-ana-l { flex: 1; }

.pnl-pj {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg); border-radius: 6px;
  font-size: 12px; cursor: pointer; margin-bottom: 4px;
}
.pnl-pj:hover { background: var(--border-light); }
.pnl-pj-n { font-weight: 600; }
.pnl-pj-s { color: var(--text-muted); font-size: 11px; }
.pnl-pj-del {
  margin-left: auto; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 14px;
  padding: 2px 4px; border-radius: 4px;
}
.pnl-pj-del:hover { color: var(--danger); background: var(--danger-bg); }

.pnl-upload {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 12px; text-align: center; font-size: 12px;
  color: var(--text-muted); cursor: pointer;
}
.pnl-upload:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-light);
}

.pnl-del-ecr {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  font-weight: 600; color: var(--danger); cursor: pointer;
  border: 1px solid var(--danger); background: transparent;
  font-family: var(--font-sans); width: 100%; transition: all .1s;
}
.pnl-del-ecr:hover { background: var(--danger-bg); }
.pnl-del-ecr svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }

.pnl-keys {
  margin-top: auto; padding: 6px 16px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 10px; color: var(--text-muted);
}
.pk { display: inline-flex; align-items: center; gap: 3px; }
.pk kbd {
  display: inline-block; padding: 1px 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; font-family: var(--font-sans);
  font-size: 9px; font-weight: 600; color: var(--text-secondary);
}


/* ============================================================
   BARRE DE RESUME (bas de la zone tableau)
   ============================================================ */
.page-summary {
  padding: 8px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-secondary);
  flex-shrink: 0; white-space: nowrap; overflow: hidden;
}
.summary-eq {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 8px; font-weight: 700; font-size: 11px;
}
.summary-eq.ok { background: var(--success-bg); color: var(--success); }
.summary-eq.ko { background: var(--danger-bg); color: var(--danger); }


/* ============================================================
   BADGE PIECE JOINTE (reutilisable)
   ============================================================ */
.doc-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 10px;
  background: var(--info-bg); color: var(--info);
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
  margin-left: 6px; vertical-align: middle;
}
.doc-badge:hover { background: rgba(51,166,170,0.18); }


/* ============================================================
   PANNEAU DOCUMENTS (modale, reutilisable)
   ============================================================ */
.modal-docs { max-width: 480px; width: 90%; }
.modal-docs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-docs-header h3 { margin: 0; font-size: 16px; }
.docs-list { margin-bottom: 16px; max-height: 300px; overflow-y: auto; }
.docs-list-empty {
  padding: 24px; text-align: center; color: var(--text-muted);
  font-size: 13px; font-style: italic;
}
.doc-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-light); border-radius: 8px; margin-bottom: 6px;
  transition: background 0.1s;
}
.doc-item:hover { background: rgba(128,80,80,0.02); }
.doc-icon { font-size: 22px; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.doc-actions { display: flex; gap: 4px; flex-shrink: 0; }
.doc-actions .row-btn { width: 32px; height: 32px; font-size: 15px; }

.status-bar {
  display: flex; gap: 24px; align-items: center;
  padding: 10px 20px;
  background: var(--surface);
  border-top: 2px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.status-bar .label { color: var(--text-secondary); }
.status-bar .value {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.status-equilibre {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-weight: 700; font-size: 12px;
}
.status-equilibre.ok { background: var(--success-bg); color: var(--success); }
.status-equilibre.ko { background: var(--danger-bg); color: var(--danger); }


/* ============================================================
   CARDS & STAT CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--text);
}
.card-body { padding: 20px; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.stat-card-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: rgba(128,80,80,0.08);
}
.stat-card-value { font-size: 26px; font-weight: 800; color: var(--text); }
.stat-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }


/* ============================================================
   ALERTES
   ============================================================ */
.alert {
  padding: 12px 16px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
}
.alert-warning { background: var(--warning-bg); border: 1px solid #EDD5AE; color: var(--warning); }
.alert-info    { background: var(--info-bg);    border: 1px solid #C4D6E8; color: var(--info); }
.alert-success { background: var(--success-bg); border: 1px solid #B8D4BA; color: var(--success); }
.alert-danger  { background: var(--danger-bg);  border: 1px solid #E8C4C4; color: var(--danger); }


/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(92, 58, 58, 0.4);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(61,32,32,0.2);
  padding: 28px; width: 440px; max-width: 90vw;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal h3 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.modal .form-group { margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 18px; font-weight: 800; margin-bottom: 0; }
.modal-body { padding: 20px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--border-light);
  background: var(--bg); border-radius: 0 0 16px 16px;
}
.modal-close {
  width: 30px; height: 30px; border-radius: 6px; border: none;
  background: var(--border-light); color: var(--text-muted);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.modal-close:hover { background: var(--border); color: var(--text); }
body.modal-open { overflow: hidden; }

/* Lignes de la modale Documents (pieces jointes accessible depuis le trombone) */
.docs-modal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.docs-modal-row:last-child { border-bottom: none; }
.docs-modal-icon { font-size: 18px; width: 22px; text-align: center; }
.docs-modal-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.docs-modal-type {
  font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px;
}
.docs-modal-open {
  color: var(--accent); font-size: 12px; font-weight: 600;
  text-decoration: none; padding: 5px 10px; border-radius: 4px;
  background: var(--accent-light); transition: all 0.1s;
}
.docs-modal-open:hover { background: var(--accent); color: #fff; }
.docs-modal-del {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 18px; width: 26px; height: 26px; border-radius: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.1s;
}
.docs-modal-del:hover { background: var(--danger-bg); color: var(--danger); }


/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 32px; right: 32px;
  background: var(--primary-dark); color: white;
  padding: 14px 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateY(100px); opacity: 0;
  transition: all 0.3s ease;
  z-index: 400;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translateY(0); opacity: 1; }


/* ============================================================
   UTILITAIRES
   ============================================================ */
.font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.text-right   { text-align: right; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }

.page { display: none; }
.page.active { display: block; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-in { animation: slideIn 0.3s ease; }
.nowrap { white-space: nowrap; }

/* ============================================================
/* ============================================================
   RESPONSIVE
   <= 1280px : sidebar compacte (icones), panneau detail toujours visible
   <= 1024px : sidebar compacte + panneau detail cache (trop juste pour les deux)
   ============================================================ */
.sidebar, .main {
  transition: width 0.2s ease, margin-left 0.2s ease;
}

@media (max-width: 1100px) {
  :root { --sw: 60px; --sidebar-width: 60px; }
  .sidebar { width: 60px; }
  .sb-logo-t, .sb-logo-s { display: none; }
  .sb-it {
    padding: 12px 0; justify-content: center; gap: 0; border-radius: 0;
    font-size: 0; position: relative;
  }
  .sb-it-i { font-size: 20px; width: auto; }
  /* Tooltip au survol */
  .sb-it::after {
    content: attr(title);
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(61,32,32,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 200;
  }
  .sb-it:hover::after {
    opacity: 1;
  }
  .sb-u { flex-direction: column; padding: 8px 4px; gap: 4px; }
  .sb-u-n, .sb-u-r { display: none; }

  .main { /* margin-left: 60px; -- neutralise par la refonte topbar v5 */ }
  .subnav { padding: 0 12px; overflow-x: auto; }
  .subnav a { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
  .content { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }

  /* Workspace responsive */
  .table-area { padding: 10px 12px; }

  /* Sous 1280px, le panneau lateral est cache : la modale ouverte par le trombone
     remplace son role pour les fichiers joints. */
  .side-panel { display: none; }

  /* Largeurs de colonnes resserrees pour gagner de la place sur le libelle */
  .w-date { min-width: 85px; }
  .w-activite { min-width: 100px; }
}


/* ============================================================
   ============================================================
   REFONTE NAVIGATION v7 -- TOPBAR + SUBNAV (wrap, sans burger)
   ============================================================
   Comportement : 1 ligne par defaut, wrap automatique sur 2+ lignes
   si la largeur ne suffit plus. Pas de menu burger : la nav s'adapte.

   PERSONNALISATION : tout est dans les variables CSS ci-dessous.
   Pour changer la couleur de fond de la topbar, modifie une seule
   variable et tout suit. Idem pour la typo, les tailles, les paddings.
   ============================================================ */

:root {
  /* ---- TOPBAR (ligne du haut : logo + sections + Admin + Quitter) ---- */
  --nav-topbar-bg: var(--surface);
  --nav-topbar-color: var(--text);
  --nav-topbar-border: var(--border);
  --nav-topbar-min-h: 60px;
  --nav-topbar-padding-x: 24px;
  --nav-topbar-padding-y: 8px;       /* utilise quand la nav wrap */
  --nav-topbar-gap: 16px;
  --nav-topbar-shadow: none;          /* mettre une ombre douce ici si voulu */

  /* ---- MARQUE (pastille + textes empiles) ---- */
  --nav-brand-gap: 12px;                              /* espace entre pastille et textes */
  --nav-brand-logo-size: 40px;                        /* taille de la pastille (agrandie pour 3 lettres) */
  --nav-brand-logo-radius: 10px;
  --nav-brand-logo-bg: linear-gradient(135deg, var(--primary-hover), var(--primary-dark));
  --nav-brand-logo-color: #fff;
  --nav-brand-logo-font-size: 13px;                   /* font dans la pastille (reduite pour 3 lettres) */
  --nav-brand-logo-font-weight: 800;
  --nav-brand-logo-letter-spacing: 0.3px;             /* leger ecart entre lettres */

  /* Nom de l'application (ligne du haut, ex: "ComptAsso") */
  --nav-brand-app-size: 14px;
  --nav-brand-app-weight: 800;
  --nav-brand-app-color: var(--text);

  /* Nom de l'association (ligne du bas, ex: "Les Battements d'Elles") */
  --nav-brand-asso-size: 11px;
  --nav-brand-asso-weight: 500;
  --nav-brand-asso-color: var(--text-muted);

  /* ---- SECTIONS (boutons metier au centre-gauche) ---- */
  --nav-section-bg: transparent;
  --nav-section-color: var(--text-secondary);
  --nav-section-font-size: 13.5px;
  --nav-section-font-weight: 600;
  --nav-section-padding: 8px 12px;
  --nav-section-radius: 8px;
  --nav-section-gap-inner: 7px;       /* espace entre icone et label */
  --nav-section-gap-outer: 4px;       /* espace entre 2 sections */
  --nav-section-icon-size: 16px;

  /* Section au survol */
  --nav-section-bg-hover: var(--bg);
  --nav-section-color-hover: var(--text);

  /* Section active */
  --nav-section-bg-active: var(--primary-light);
  --nav-section-color-active: var(--primary-dark);
  --nav-section-weight-active: 700;

  /* Section desactivee (a venir) */
  --nav-section-opacity-disabled: 0.4;

  /* ---- ACTIONS DROITE (Admin icone + Quitter) ---- */
  --nav-actions-gap: 4px;
  --nav-action-icon-only-size: 36px;  /* taille du carre d'Admin */

  /* ---- BOUTON QUITTER ---- */
  --nav-logout-color: var(--text-secondary);
  --nav-logout-bg-hover: var(--danger-bg);
  --nav-logout-color-hover: var(--danger);
  --nav-logout-padding: 7px 12px;
  --nav-logout-radius: 8px;
  --nav-logout-font-size: 13px;
  --nav-logout-icon-size: 15px;

  /* ---- SUBNAV (pages de la section active) ---- */
  --nav-subnav-bg: var(--bg);
  --nav-subnav-border: var(--border);
  --nav-subnav-min-h: 42px;
  --nav-subnav-padding-x: 24px;
  --nav-subnav-padding-y: 4px;        /* utilise quand la subnav wrap */
  --nav-subnav-gap: 2px;

  /* ---- PAGES dans la subnav ---- */
  --nav-page-color: var(--text-secondary);
  --nav-page-font-size: 13px;
  --nav-page-font-weight: 500;
  --nav-page-padding: 10px 14px;
  --nav-page-border-width: 2px;

  /* Page au survol */
  --nav-page-color-hover: var(--text);

  /* Page active */
  --nav-page-color-active: var(--accent);
  --nav-page-weight-active: 700;
  --nav-page-border-active: var(--accent);

  /* Page desactivee */
  --nav-page-opacity-disabled: 0.4;
}

/* ============================================================
   APP-TOPBAR : 1 ligne par defaut, wrap si necessaire
   ============================================================ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-topbar-bg);
  color: var(--nav-topbar-color);
  border-bottom: 1px solid var(--nav-topbar-border);
  min-height: var(--nav-topbar-min-h);
  padding: var(--nav-topbar-padding-y) var(--nav-topbar-padding-x);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--nav-topbar-gap);
  box-shadow: var(--nav-topbar-shadow);
}

/* ============================================================
   MARQUE
   ============================================================ */
.app-topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--nav-brand-gap);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.app-topbar .brand-logo {
  width: var(--nav-brand-logo-size);
  height: var(--nav-brand-logo-size);
  border-radius: var(--nav-brand-logo-radius);
  background: var(--nav-brand-logo-bg);
  color: var(--nav-brand-logo-color);
  font-weight: var(--nav-brand-logo-font-weight);
  font-size: var(--nav-brand-logo-font-size);
  letter-spacing: var(--nav-brand-logo-letter-spacing);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(92, 58, 58, 0.20);
  flex-shrink: 0;
}

.app-topbar .brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  min-width: 0;
}

.app-topbar .brand-app {
  font-size: var(--nav-brand-app-size);
  font-weight: var(--nav-brand-app-weight);
  color: var(--nav-brand-app-color);
  letter-spacing: -0.2px;
}

.app-topbar .brand-asso {
  font-size: var(--nav-brand-asso-size);
  font-weight: var(--nav-brand-asso-weight);
  color: var(--nav-brand-asso-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* ============================================================
   SECTIONS (boutons metier, alignees a gauche, wrap autorise)
   ============================================================ */
.app-topbar .sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nav-section-gap-outer);
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.app-topbar .section-btn {
  background: var(--nav-section-bg);
  color: var(--nav-section-color);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--nav-section-font-size);
  font-weight: var(--nav-section-font-weight);
  padding: var(--nav-section-padding);
  border-radius: var(--nav-section-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--nav-section-gap-inner);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.app-topbar .section-btn:hover {
  background: var(--nav-section-bg-hover);
  color: var(--nav-section-color-hover);
}

.app-topbar .section-btn.active {
  background: var(--nav-section-bg-active);
  color: var(--nav-section-color-active);
  font-weight: var(--nav-section-weight-active);
}

.app-topbar .section-btn.disabled {
  opacity: var(--nav-section-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.app-topbar .section-btn-icon {
  width: var(--nav-section-icon-size);
  height: var(--nav-section-icon-size);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-topbar .section-btn-icon svg {
  width: var(--nav-section-icon-size);
  height: var(--nav-section-icon-size);
}

/* ---- VARIANTE icon-only : utilisee pour Administration (roue crantee) ---- */
.app-topbar .section-btn--icon-only {
  width: var(--nav-action-icon-only-size);
  height: var(--nav-action-icon-only-size);
  padding: 0;
  justify-content: center;
  gap: 0;
}

/* ============================================================
   ACTIONS DROITE : Admin + Quitter
   ============================================================ */
.app-topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--nav-actions-gap);
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================================
   LIEN QUITTER
   Le texte "Quitter" est cache en permanence : seule l'icone reste.
   Le tooltip natif (attribut title) affiche "Se deconnecter" au survol.
   ============================================================ */
.app-topbar .logout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--nav-logout-padding);
  border-radius: var(--nav-logout-radius);
  font-family: var(--font-sans);
  font-size: var(--nav-logout-font-size);
  font-weight: 600;
  color: var(--nav-logout-color);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.app-topbar .logout-link span {
  display: none;
}

.app-topbar .logout-link:hover {
  background: var(--nav-logout-bg-hover);
  color: var(--nav-logout-color-hover);
}

.app-topbar .logout-link svg {
  width: var(--nav-logout-icon-size);
  height: var(--nav-logout-icon-size);
}

/* ============================================================
   SUBNAV : pages de la section active (wrap autorise, pas sticky)
   ============================================================ */
.subnav {
  background: var(--nav-subnav-bg);
  border-bottom: 1px solid var(--nav-subnav-border);
  min-height: var(--nav-subnav-min-h);
  padding: var(--nav-subnav-padding-y) var(--nav-subnav-padding-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nav-subnav-gap);
  row-gap: 4px;
}

.subnav:empty {
  display: none;
}

.subnav a {
  font-family: var(--font-sans);
  font-size: var(--nav-page-font-size);
  font-weight: var(--nav-page-font-weight);
  color: var(--nav-page-color);
  padding: var(--nav-page-padding);
  text-decoration: none;
  border-bottom: var(--nav-page-border-width) solid transparent;
  margin-bottom: calc(-1 * var(--nav-page-border-width));
  white-space: nowrap;
  transition: color 0.12s;
}

.subnav a:hover {
  color: var(--nav-page-color-hover);
}

.subnav a.active {
  color: var(--nav-page-color-active);
  border-bottom-color: var(--nav-page-border-active);
  font-weight: var(--nav-page-weight-active);
}

.subnav a.disabled {
  opacity: var(--nav-page-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   AJUSTEMENTS RESPONSIVE
   - Sous 1024px : on cache le nom de l'application et le nom de l'asso
     (seule la pastille avec les initiales reste). Ils prennent trop de
     place en demi-ecran.
   - Sous 480px : on reduit aussi les paddings horizontaux.

   Note : le texte "Quitter" est cache en permanence (regle non-responsive
   plus haut). Seule l'icone reste, avec tooltip au survol.
   ============================================================ */
@media (max-width: 1024px) {
  /* Les noms (appli + asso) disparaissent, seule la pastille initiales reste */
  .app-topbar .brand-text { display: none; }
}

@media (max-width: 480px) {
  .app-topbar {
    padding: 8px 12px;
    gap: 10px;
  }
  .subnav {
    padding: 4px 12px;
  }
}