/* ==========================================================================
   TdB Finance — main.css
   Thème : sobre, professionnel, bleu/gris épuré
   Typographie : IBM Plex Sans (corps) + IBM Plex Mono (chiffres/codes)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bleu-profond:   #1a2e45;
  --bleu-moyen:     #2b5278;
  --bleu-accent:    #3a7bd5;
  --bleu-pale:      #e8f0fb;
  --bleu-pale-2:    #f0f5fc;

  --gris-900:       #1c1f26;
  --gris-700:       #3d4452;
  --gris-500:       #6b7280;
  --gris-300:       #c8cdd6;
  --gris-100:       #f4f6f9;
  --blanc:          #ffffff;

  --positif:        #1a6b3a;
  --positif-fond:   #eaf5ef;
  --negatif:        #b91c1c;
  --negatif-fond:   #fef2f2;
  --prevue:         #6b7280;
  --prevue-fond:    #f4f6f9;
  --engagee:        #b45309;
  --engagee-fond:   #fffbeb;
  --pointee:        #1a6b3a;
  --pointee-fond:   #eaf5ef;

  --font-corps:     'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  --espace-xs:      4px;
  --espace-sm:      8px;
  --espace-md:      16px;
  --espace-lg:      24px;
  --espace-xl:      40px;

  --nav-hauteur:    56px;
  --contenu-max:    1200px;
  --rayon:          4px;
  --rayon-md:       6px;

  --ombre-sm:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --ombre-md:       0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

  --transition:     150ms ease;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-corps);
  font-weight: 400;
  color: var(--gris-900);
  background: var(--gris-100);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--bleu-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.nav-principale {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-hauteur);
  background: var(--bleu-profond);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  padding: 0 var(--espace-lg);
  gap: var(--espace-lg);
  box-shadow: var(--ombre-md);
}

.nav-marque { flex-shrink: 0; }

.nav-logo {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blanc);
  letter-spacing: .03em;
  text-decoration: none;
}
.nav-logo:hover { text-decoration: none; color: #a8c8f0; }

.nav-liens {
  display: flex;
  list-style: none;
  gap: 2px;
  flex: 1;
}

.nav-lien {
  display: block;
  padding: 6px 12px;
  border-radius: var(--rayon);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.nav-lien:hover { background: rgba(255,255,255,.1); color: var(--blanc); text-decoration: none; }
.nav-lien.actif { background: rgba(58,123,213,.35); color: var(--blanc); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  flex-shrink: 0;
}

.badge-lecture-seule {
  font-size: .75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(180,83,9,.3);
  color: #fcd34d;
  border: 1px solid rgba(180,83,9,.4);
}

.nav-deconnexion {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  padding: 5px 10px;
  border-radius: var(--rayon);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.nav-deconnexion:hover { color: var(--blanc); background: rgba(255,255,255,.08); text-decoration: none; }

/* ── Contenu principal ────────────────────────────────────────────────────── */
.contenu-principal {
  flex: 1;
  width: 100%;
  max-width: var(--contenu-max);
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-lg);
}

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied-page {
  text-align: center;
  padding: var(--espace-md);
  font-size: .75rem;
  color: var(--gris-500);
  border-top: 1px solid var(--gris-300);
  background: var(--blanc);
}

/* ── En-tête de page ──────────────────────────────────────────────────────── */
.page-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espace-lg);
  padding-bottom: var(--espace-md);
  border-bottom: 2px solid var(--bleu-pale);
}

.page-entete h1 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--bleu-profond);
  letter-spacing: -.01em;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 7px 16px;
  border-radius: var(--rayon);
  font-family: var(--font-corps);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primaire { background: var(--bleu-accent); color: var(--blanc); border-color: var(--bleu-accent); }
.btn-primaire:hover { background: var(--bleu-moyen); border-color: var(--bleu-moyen); color: var(--blanc); }

.btn-secondaire { background: var(--blanc); color: var(--bleu-accent); border-color: var(--bleu-accent); }
.btn-secondaire:hover { background: var(--bleu-pale); color: var(--bleu-moyen); }

.btn-neutre { background: var(--blanc); color: var(--gris-700); border-color: var(--gris-300); }
.btn-neutre:hover { background: var(--gris-100); color: var(--gris-900); }

.btn-danger { background: var(--blanc); color: var(--negatif); border-color: #fca5a5; }
.btn-danger:hover { background: var(--negatif-fond); border-color: var(--negatif); }

/* ── Tableaux comptes / opérations ───────────────────────────────────────── */
.tableau-conteneur {
  background: var(--blanc);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  border: 1px solid var(--gris-300);
}

.tableau-comptes,
.tableau-operations {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.tableau-comptes thead th,
.tableau-operations thead th {
  background: var(--bleu-profond);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
}

.tableau-comptes thead th.col-montant,
.tableau-operations thead th.col-montant { text-align: right; }

.tableau-comptes tbody tr,
.tableau-operations tbody tr {
  border-bottom: 1px solid var(--gris-100);
  transition: background var(--transition);
}

.tableau-comptes tbody tr:hover,
.tableau-operations tbody tr:hover { background: var(--bleu-pale-2); }

.tableau-comptes tbody td,
.tableau-operations tbody td { padding: 11px 16px; vertical-align: middle; }

.tableau-comptes tfoot tr { background: var(--bleu-pale); border-top: 2px solid var(--bleu-accent); }
.tableau-comptes tfoot td { padding: 12px 16px; font-size: .875rem; }

.col-montant { text-align: right; font-family: var(--font-mono); font-size: .84rem; white-space: nowrap; }
.col-date { font-family: var(--font-mono); font-size: .82rem; color: var(--gris-500); white-space: nowrap; }
.col-libelle { min-width: 200px; }
.col-libelle small { display: block; font-size: .75rem; color: var(--gris-500); }
.col-libelle small.reference { font-family: var(--font-mono); }
.col-libelle small.notes-op { font-style: italic; }
.col-categorie, .col-mode { white-space: nowrap; }
.col-statut { white-space: nowrap; }
.col-actions { width: 40px; text-align: center; }

.tableau-comptes .nom-compte a { font-weight: 500; color: var(--bleu-profond); }
.tableau-comptes .nom-compte a:hover { color: var(--bleu-accent); }
.tableau-comptes .nom-compte small.institution { display: block; font-size: .75rem; color: var(--gris-500); font-weight: 400; }

.ligne-compte { cursor: pointer; }

/* ── Montants ─────────────────────────────────────────────────────────────── */
.montant-positif { color: var(--positif); }
.montant-negatif { color: var(--negatif); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge-type {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bleu-pale);
  color: var(--bleu-moyen);
  border: 1px solid #c5d8f0;
  white-space: nowrap;
}

.badge-categorie {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--gris-100);
  color: var(--gris-700);
  border: 1px solid var(--gris-300);
}

.statut-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.statut-prevue  { background: var(--prevue-fond);  color: var(--prevue);  border: 1px solid var(--gris-300); }
.statut-engagee { background: var(--engagee-fond); color: var(--engagee); border: 1px solid #fcd34d; }
.statut-pointee { background: var(--pointee-fond); color: var(--pointee); border: 1px solid #86efac; }

.btn-statut {
  cursor: pointer;
  border: none;
  font-family: var(--font-corps);
  transition: opacity var(--transition), transform var(--transition);
  background: none;
  padding: 3px 9px;
}
.btn-statut:hover { opacity: .75; transform: scale(1.04); }

/* ── Détail compte ────────────────────────────────────────────────────────── */
.compte-entete {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-lg);
  margin-bottom: var(--espace-lg);
  box-shadow: var(--ombre-sm);
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
  flex-wrap: wrap;
}

.compte-info h1 { font-size: 1.25rem; font-weight: 600; color: var(--bleu-profond); margin-bottom: 4px; }
.compte-info .institution { font-size: .8rem; color: var(--gris-500); margin-left: 8px; }

.soldes-bandeau {
  display: flex;
  gap: var(--espace-xl);
  flex: 1;
  justify-content: center;
}

.solde-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--espace-sm) var(--espace-lg);
  border-radius: var(--rayon);
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  min-width: 160px;
}

.solde-libelle {
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-500);
}

.solde-valeur {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
}

.compte-actions { display: flex; gap: var(--espace-sm); flex-shrink: 0; }

/* ── Section opérations ───────────────────────────────────────────────────── */
.operations-section {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
}

.operations-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-md) var(--espace-lg);
  border-bottom: 1px solid var(--gris-100);
  background: var(--gris-100);
}

.operations-entete h2 { font-size: 1rem; font-weight: 600; color: var(--bleu-profond); }

.operations-barre {
  padding: var(--espace-sm) var(--espace-lg);
  border-bottom: 1px solid var(--gris-100);
  background: var(--bleu-pale-2);
}

.operations-filtres-statut { display: flex; gap: var(--espace-xs); flex-wrap: wrap; }

.filtre-btn {
  font-size: .78rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--gris-300);
  color: var(--gris-700);
  background: var(--blanc);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.filtre-btn:hover { border-color: var(--bleu-accent); color: var(--bleu-accent); text-decoration: none; }
.filtre-btn.actif { background: var(--bleu-accent); color: var(--blanc); border-color: var(--bleu-accent); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
  padding: var(--espace-md);
  border-top: 1px solid var(--gris-100);
}

.pagination-info { font-size: .82rem; color: var(--gris-500); }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.compte-contexte { display: flex; gap: var(--espace-lg); margin-bottom: var(--espace-lg); font-size: .875rem; color: var(--gris-700); }

.formulaire {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-xl);
  box-shadow: var(--ombre-sm);
  max-width: 820px;
}

.champ { margin-bottom: var(--espace-lg); }

.champs-ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espace-md);
  margin-bottom: var(--espace-lg);
}

.champ label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--gris-700);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.champ input[type="text"],
.champ input[type="date"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon);
  font-family: var(--font-corps);
  font-size: .875rem;
  color: var(--gris-900);
  background: var(--blanc);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu-accent);
  box-shadow: 0 0 0 3px rgba(58,123,213,.12);
}

.champ input[type="text"]#montant,
.champ input[type="text"]#montant_origine { font-family: var(--font-mono); }

.champ small { display: block; margin-top: 4px; font-size: .75rem; color: var(--gris-500); }

.statut-choix { display: flex; gap: var(--espace-md); flex-wrap: wrap; }

.statut-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  padding: var(--espace-sm) var(--espace-md);
  border: 2px solid var(--gris-300);
  border-radius: var(--rayon-md);
  background: var(--blanc);
  transition: border-color var(--transition), background var(--transition);
  min-width: 150px;
}
.statut-option:hover { border-color: var(--bleu-accent); background: var(--bleu-pale-2); }
.statut-option input[type="radio"] { display: none; }
.statut-option:has(input:checked) { border-color: var(--bleu-accent); background: var(--bleu-pale); }
.statut-option small { font-size: .72rem; color: var(--gris-500); font-weight: 400; }

.formulaire-actions {
  display: flex;
  gap: var(--espace-sm);
  padding-top: var(--espace-lg);
  border-top: 1px solid var(--gris-100);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.page-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  padding: var(--espace-lg);
}

.login-carte {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--ombre-md);
}

.login-titre { text-align: center; margin-bottom: var(--espace-xl); }
.login-titre h1 { font-size: 1.4rem; font-weight: 600; color: var(--bleu-profond); margin-bottom: 4px; }
.login-titre p { font-size: .82rem; color: var(--gris-500); }

.login-erreur {
  background: var(--negatif-fond);
  border: 1px solid #fca5a5;
  color: var(--negatif);
  border-radius: var(--rayon);
  padding: var(--espace-sm) var(--espace-md);
  font-size: .85rem;
  margin-bottom: var(--espace-md);
}

.login-info {
  background: var(--engagee-fond);
  border: 1px solid #fcd34d;
  color: var(--engagee);
  border-radius: var(--rayon);
  padding: var(--espace-sm) var(--espace-md);
  font-size: .82rem;
  margin-bottom: var(--espace-md);
}

.login-carte .btn-primaire { width: 100%; justify-content: center; padding: 10px; font-size: .95rem; margin-top: var(--espace-sm); }

/* ── État vide ────────────────────────────────────────────────────────────── */
.etat-vide { text-align: center; padding: var(--espace-xl) var(--espace-lg); color: var(--gris-500); }
.etat-vide p { margin-bottom: var(--espace-md); font-size: .9rem; }

/* ── Chargement HTMX ──────────────────────────────────────────────────────── */
.chargement { text-align: center; padding: var(--espace-xl); font-size: .875rem; color: var(--gris-500); }

/* ── Bouton action icône ──────────────────────────────────────────────────── */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rayon);
  font-size: .85rem;
  color: var(--gris-500);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.btn-action:hover { background: var(--bleu-pale); color: var(--bleu-accent); text-decoration: none; }

/* ── Coloration bord gauche par statut ────────────────────────────────────── */
.ligne-statut-pointee td:first-child { border-left: 3px solid var(--pointee); }
.ligne-statut-engagee td:first-child { border-left: 3px solid var(--engagee); }
.ligne-statut-prevue  td:first-child { border-left: 3px solid var(--gris-300); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-liens { display: none; }
  .contenu-principal { padding: var(--espace-md); }
  .compte-entete { flex-direction: column; align-items: flex-start; gap: var(--espace-md); }
  .soldes-bandeau { flex-direction: column; width: 100%; }
  .solde-item { flex-direction: row; justify-content: space-between; min-width: unset; }
  .tableau-comptes thead th:nth-child(2),
  .tableau-comptes tbody td:nth-child(2) { display: none; }
  .tableau-operations .col-categorie,
  .tableau-operations .col-mode { display: none; }
  .champs-ligne { grid-template-columns: 1fr; }
  .statut-choix { flex-direction: column; }
  .page-entete { flex-direction: column; align-items: flex-start; gap: var(--espace-sm); }
}

@media (max-width: 480px) {
  .soldes-bandeau { gap: var(--espace-sm); }
  .formulaire { padding: var(--espace-lg); }
}

/* ── Administration ───────────────────────────────────────────────────────── */
.admin-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espace-lg);
  margin-top: var(--espace-lg);
}

.admin-carte {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-lg);
  box-shadow: var(--ombre-sm);
  text-decoration: none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  color: inherit;
}
.admin-carte:hover {
  box-shadow: var(--ombre-md);
  border-color: var(--bleu-accent);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.admin-carte-icone {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bleu-pale);
  border-radius: var(--rayon);
  flex-shrink: 0;
  color: var(--bleu-moyen);
}

.admin-carte-corps h2 { font-size: .95rem; font-weight: 600; color: var(--bleu-profond); margin-bottom: 2px; }
.admin-carte-corps p  { font-size: .82rem; color: var(--gris-700); margin-bottom: 2px; }
.admin-carte-corps small { font-size: .73rem; color: var(--gris-500); }

/* Layout admin détail : tableau + formulaire latéral */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--espace-lg);
  align-items: start;
}

.tableau-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.tableau-admin thead th {
  background: var(--bleu-profond);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 14px;
  text-align: left;
}

.tableau-admin tbody tr {
  border-bottom: 1px solid var(--gris-100);
  transition: background var(--transition);
}
.tableau-admin tbody tr:hover { background: var(--bleu-pale-2); }
.tableau-admin tbody td { padding: 10px 14px; vertical-align: middle; }

.col-compteur { text-align: center; font-family: var(--font-mono); font-size: .82rem; color: var(--gris-500); }
.col-actions-admin { width: 70px; text-align: right; white-space: nowrap; }
.col-notes-admin { font-size: .8rem; color: var(--gris-500); max-width: 200px; }
.etat-vide-inline { text-align: center; padding: var(--espace-xl); color: var(--gris-500); font-size: .875rem; }

/* Formulaire latéral admin */
.admin-form-lateral {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-lg);
  box-shadow: var(--ombre-sm);
  position: sticky;
  top: calc(var(--nav-hauteur) + var(--espace-md));
}

.admin-form-lateral h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--bleu-profond);
  margin-bottom: var(--espace-md);
  padding-bottom: var(--espace-sm);
  border-bottom: 1px solid var(--gris-100);
}

.admin-form-lateral.actif {
  border-color: var(--bleu-accent);
  box-shadow: 0 0 0 3px rgba(58,123,213,.1);
}

.formulaire-compact .champ { margin-bottom: var(--espace-md); }

/* Badges admin */
.badge-famille { display: inline-block; font-size: .72rem; font-weight: 500; padding: 2px 8px; border-radius: 3px; }
.badge-famille-bancaire   { background: #dbeafe; color: #1e40af; }
.badge-famille-epargne    { background: #d1fae5; color: #065f46; }
.badge-famille-credit     { background: #fee2e2; color: #991b1b; }
.badge-famille-placement  { background: #fef3c7; color: #92400e; }
.badge-famille-crypto     { background: #ede9fe; color: #5b21b6; }
.badge-famille-autre      { background: var(--gris-100); color: var(--gris-700); }

.badge-type-cat { display: inline-block; font-size: .72rem; font-weight: 500; padding: 2px 8px; border-radius: 3px; }
.badge-type-cat-depense { background: var(--negatif-fond); color: var(--negatif); }
.badge-type-cat-recette { background: var(--positif-fond); color: var(--positif); }
.badge-type-cat-les_deux { background: var(--bleu-pale); color: var(--bleu-moyen); }

.badge-differe { display: inline-block; font-size: .72rem; padding: 2px 7px; border-radius: 3px; background: var(--engagee-fond); color: var(--engagee); }

/* Checkbox dans formulaire */
.champ-checkbox { display: flex; align-items: center; }
.label-checkbox { display: flex; align-items: center; gap: var(--espace-sm); font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gris-900); cursor: pointer; }
.label-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* Lien retour */
.lien-retour { font-size: .8rem; color: var(--gris-500); display: block; margin-bottom: 4px; }
.lien-retour:hover { color: var(--bleu-accent); }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-form-lateral { position: static; }
}

/* ── Opérations récurrentes ───────────────────────────────────────────────── */
.recurrentes-filtres {
  display: flex;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-md);
}

.tableau-recurrentes {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.tableau-recurrentes thead th {
  background: var(--bleu-profond);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
}
.tableau-recurrentes tbody tr {
  border-bottom: 1px solid var(--gris-100);
  transition: background var(--transition);
}
.tableau-recurrentes tbody tr:hover { background: var(--bleu-pale-2); }
.tableau-recurrentes tbody td { padding: 11px 16px; vertical-align: middle; }
.tableau-recurrentes .ligne-inactive { opacity: .55; }
.col-periodicite { font-size: .82rem; color: var(--gris-700); white-space: nowrap; }

.badge-actif    { display:inline-block; font-size:.72rem; font-weight:500; padding:2px 9px; border-radius:20px; background:var(--positif-fond); color:var(--positif); border:1px solid #86efac; }
.badge-suspendu { display:inline-block; font-size:.72rem; font-weight:500; padding:2px 9px; border-radius:20px; background:var(--gris-100); color:var(--gris-500); border:1px solid var(--gris-300); }

/* Panneau génération */
.panneau-generation {
  background: var(--bleu-pale-2);
  border: 1px solid #c5d8f0;
  border-radius: var(--rayon-md);
  padding: var(--espace-md) var(--espace-lg);
  margin-bottom: var(--espace-lg);
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
  flex-wrap: wrap;
}
.panneau-generation-titre strong { font-size: .9rem; color: var(--bleu-profond); display: block; }
.panneau-generation-titre small  { font-size: .78rem; color: var(--gris-500); }
.generation-form { display: flex; align-items: center; }
.generation-controles { display: flex; align-items: center; gap: var(--espace-sm); }
.generation-controles label { font-size: .82rem; font-weight: 500; color: var(--gris-700); }
.select-compact { padding: 6px 10px; border: 1px solid var(--gris-300); border-radius: var(--rayon); font-size: .85rem; font-family: var(--font-corps); outline: none; }
.select-compact:focus { border-color: var(--bleu-accent); }

/* Résultat génération */
.resultat-generation {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  margin-top: var(--espace-sm);
  font-size: .85rem;
  color: var(--gris-700);
  flex-wrap: wrap;
}
.resultat-ok { color: var(--positif); }
.resultat-icone { font-size: 1rem; }

/* ── Import TCF ───────────────────────────────────────────────────────────── */
.import-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--espace-lg);
  align-items: start;
}

.input-fichier {
  width: 100%;
  padding: 8px 0;
  font-family: var(--font-corps);
  font-size: .875rem;
  color: var(--gris-900);
}

.import-options {
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon);
  padding: var(--espace-md);
  margin-bottom: var(--espace-lg);
}
.import-options h3 { font-size: .88rem; font-weight: 600; color: var(--bleu-profond); margin-bottom: var(--espace-sm); }
.import-options .champ { margin-bottom: var(--espace-sm); }
.import-options .champ:last-child { margin-bottom: 0; }
.import-options small { display: block; margin-top: 2px; font-size: .73rem; color: var(--gris-500); padding-left: 24px; }

.import-aide {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-md);
  padding: var(--espace-lg);
  position: sticky;
  top: calc(var(--nav-hauteur) + var(--espace-md));
}
.import-aide h3 { font-size: .9rem; font-weight: 600; color: var(--bleu-profond); margin-bottom: var(--espace-md); }

.aide-etapes { padding-left: var(--espace-lg); margin-bottom: var(--espace-md); }
.aide-etapes li { font-size: .82rem; color: var(--gris-700); margin-bottom: 6px; line-height: 1.4; }
.aide-etapes kbd { font-family: var(--font-mono); font-size: .75rem; background: var(--gris-100); border: 1px solid var(--gris-300); border-radius: 3px; padding: 1px 5px; }

.aide-note { margin-top: var(--espace-md); padding: var(--espace-sm) var(--espace-md); background: var(--bleu-pale-2); border-left: 3px solid var(--bleu-accent); border-radius: 0 var(--rayon) var(--rayon) 0; }
.aide-note strong { font-size: .8rem; display: block; margin-bottom: 4px; color: var(--bleu-profond); }
.aide-note p, .aide-note ul { font-size: .78rem; color: var(--gris-700); }
.aide-note ul { padding-left: var(--espace-md); }
.aide-note ul li { margin-bottom: 2px; }
.aide-note-attention { background: var(--engagee-fond); border-left-color: var(--engagee); }
.aide-note-attention strong { color: var(--engagee); }

.alerte-erreur-import { background: var(--negatif-fond); border: 1px solid #fca5a5; color: var(--negatif); border-radius: var(--rayon); padding: var(--espace-sm) var(--espace-md); font-size: .85rem; margin-bottom: var(--espace-lg); }

/* Stats résultat d'import */
.import-stats {
  display: flex;
  gap: var(--espace-lg);
  margin-bottom: var(--espace-lg);
  flex-wrap: wrap;
}
.stat-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espace-lg) var(--espace-xl);
  border-radius: var(--rayon-md);
  border: 1px solid var(--gris-300);
  min-width: 160px;
  background: var(--blanc);
}
.stat-valeur { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 500; line-height: 1; }
.stat-libelle { font-size: .78rem; color: var(--gris-500); margin-top: 4px; text-align: center; }
.stat-carte-ok     { border-color: #86efac; background: var(--positif-fond); }
.stat-carte-ok .stat-valeur { color: var(--positif); }
.stat-carte-info   { border-color: #c5d8f0; background: var(--bleu-pale); }
.stat-carte-info .stat-valeur { color: var(--bleu-moyen); }
.stat-carte-erreur { border-color: #fca5a5; background: var(--negatif-fond); }
.stat-carte-erreur .stat-valeur { color: var(--negatif); }
.stat-carte-neutre { border-color: var(--gris-300); background: var(--gris-100); }
.stat-carte-neutre .stat-valeur { color: var(--gris-500); }

.import-detail { font-size: .875rem; color: var(--gris-700); margin-bottom: var(--espace-md); }

.import-avertissements { background: var(--engagee-fond); border: 1px solid #fcd34d; border-radius: var(--rayon); padding: var(--espace-md) var(--espace-lg); margin-bottom: var(--espace-md); }
.import-avertissements h3 { font-size: .88rem; font-weight: 600; color: var(--engagee); margin-bottom: var(--espace-sm); }
.import-avertissements ul { padding-left: var(--espace-lg); }
.import-avertissements li { font-size: .82rem; color: var(--gris-900); margin-bottom: 4px; }

@media (max-width: 900px) {
  .import-layout { grid-template-columns: 1fr; }
  .import-aide { position: static; }
  .import-stats { flex-direction: column; }
  .stat-carte { flex-direction: row; justify-content: space-between; min-width: unset; padding: var(--espace-md); }
  .stat-valeur { font-size: 1.5rem; }
}