/* ============================================
   ASSISTANT BELLES & BÂTISSEUSES — V1
   Design : clair, aéré, TDAH-friendly
   Palette : rose poudré + terracotta + blanc
   ============================================ */

:root {
  --rose:       #E8A0A8;
  --rose-light: #FDF0F1;
  --rose-dark:  #C4717C;
  --terra:      #C4785A;
  --terra-light:#FDF3EF;
  --bleu:       #5A7FA8;
  --bleu-light: #EEF4FA;
  --vert:       #5A9A6F;
  --vert-light: #EEF8F2;
  --gris:       #6B7280;
  --gris-light: #F9FAFB;
  --blanc:      #FFFFFF;
  --texte:      #1F2937;
  --texte-doux: #4B5563;
  --bordure:    #E5E7EB;
  --ombre:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --ombre-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --rayon:      12px;
  --rayon-sm:   8px;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Variables manquantes — correctifs */
  --surface:    #FFFFFF;
  --fond:       #F9FAFB;
  --accent:     #C4717C;
}

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

input, select, textarea {
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--font);
}

body {
  font-family: var(--font);
  background: var(--gris-light);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ---- HEADER ---- */
header {
  background: var(--blanc);
  border-bottom: 2px solid var(--rose);
  padding: 0 20px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--ombre);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  gap: 16px;
}
.logo { white-space: nowrap; }
.logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
}
.logo-assistant {
  position: absolute;
  bottom: 2px;
  right: -2px;
  background: var(--rose-dark);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

nav { display: flex; gap: 4px; flex-wrap: wrap; }

.header-right { display: flex; align-items: center; gap: 10px; }
.btn-logout {
  background: none; border: 1px solid var(--bordure);
  border-radius: 8px; padding: 5px 10px; font-size: 16px;
  cursor: pointer; color: var(--gris); transition: all .15s;
}
.btn-logout:hover { background: var(--rose-light); border-color: var(--rose); }
nav button {
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
nav button:hover { background: var(--rose-light); color: var(--rose-dark); }
nav button.active { background: var(--rose-light); color: var(--rose-dark); font-weight: 600; }

.header-date {
  font-size: 12px;
  color: var(--gris);
  white-space: nowrap;
}

/* ---- LAYOUT ---- */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---- ALERTES PRIORITAIRES ---- */
.alertes-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.alerte {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--rayon-sm);
  border-left: 4px solid;
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.alerte.urgente { border-color: #EF4444; background: #FFF5F5; }
.alerte.normale  { border-color: #F97316; background: #FFF8F5; }
.alerte.info     { border-color: var(--bleu); background: var(--bleu-light); }
.alerte-icone   { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alerte-corps   { flex: 1; }
.alerte-titre   { font-weight: 600; font-size: 14px; color: var(--texte); }
.alerte-detail  { font-size: 13px; color: var(--texte-doux); margin-top: 2px; }
.alerte-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--texte-doux);
  transition: all .15s;
}
.alerte-btn:hover { background: var(--rose-light); border-color: var(--rose); color: var(--rose-dark); }

/* ---- PILOTE DE JOURNÉE ---- */
.pilote-journee {
  background: var(--blanc);
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-md);
  margin-bottom: 20px;
  overflow: hidden;
}
.pilote-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pilote-greeting {
  font-weight: 700;
  font-size: 15px;
  color: var(--texte);
  text-transform: capitalize;
}
.pilote-subtitle {
  font-size: 12px;
  color: var(--gris);
}
.pilote-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.routine-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bordure);
  transition: background .12s;
  border-left: 4px solid transparent;
}
.routine-item:last-child { border-bottom: none; }
.routine-item:hover { background: var(--gris-light); }
.routine-item.prio-rouge { border-left-color: #EF4444; background: #FFF9F9; }
.routine-item.prio-rouge:hover { background: #FFF0F0; }
.routine-item.prio-orange { border-left-color: #F97316; background: #FFFAF5; }
.routine-item.prio-orange:hover { background: #FFF5EB; }
.routine-item.prio-jaune { border-left-color: #EAB308; background: #FFFDF0; }
.routine-item.prio-jaune:hover { background: #FFFAE0; }
.routine-item.prio-bleu { border-left-color: var(--bleu); background: var(--bleu-light); }
.routine-item.prio-bleu:hover { background: #E4EEF8; }
.routine-item.prio-vert { border-left-color: var(--vert); background: var(--vert-light); }
.routine-icone { font-size: 16px; flex-shrink: 0; }
.routine-texte { flex: 1; font-size: 13.5px; color: var(--texte); line-height: 1.4; }
.routine-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--texte-doux);
  transition: all .15s;
  white-space: nowrap;
}
.routine-btn:hover { background: var(--rose-light); border-color: var(--rose-dark); color: var(--rose-dark); }
.pilote-routines {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--bordure);
  background: var(--gris-light);
  flex-wrap: wrap;
}
.routine-section-btn {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--texte-doux);
  transition: all .15s;
}
.routine-section-btn:hover { background: var(--rose-light); border-color: var(--rose); color: var(--rose-dark); }
.routine-panel {
  padding: 0 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pilote-vide {
  padding: 18px;
  text-align: center;
  color: var(--vert);
  font-weight: 600;
  font-size: 14px;
}

/* ---- SECTIONS ---- */
.section { display: none; }
.section.active { display: block; }

.section-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--texte);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- GRILLE ---- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.grille-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 680px) { .grille-large { grid-template-columns: 1fr; } }

/* ---- CARTE ---- */
.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
  border: 1px solid var(--bordure);
}
.carte-titre {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gris);
  margin-bottom: 12px;
}
.carte-numero {
  font-size: 28px;
  font-weight: 700;
  color: var(--texte);
  line-height: 1;
}
.carte-label { font-size: 12px; color: var(--gris); margin-top: 4px; }

/* ---- TÂCHES ---- */
.taches-liste { display: flex; flex-direction: column; gap: 6px; }
.tache {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  transition: all .15s;
}
.tache:hover { border-color: var(--rose); }
.tache.faite { opacity: .5; }
.tache.faite .tache-titre { text-decoration: line-through; }
/* Checkbox custom */
.tache-checkbox-wrap {
  display: flex; align-items: flex-start; cursor: pointer; flex-shrink: 0; margin-top: 2px;
}
.tache-checkbox { display: none; }
.tache-checkmark {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bordure);
  flex-shrink: 0;
  background: none;
  transition: all .15s;
  display: inline-block;
}
.tache-checkbox-wrap:hover .tache-checkmark { border-color: var(--vert); background: var(--vert-light); }
.tache-checkbox:checked + .tache-checkmark {
  background: var(--vert); border-color: var(--vert);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.tache.faite { opacity: .55; }
.tache.faite .tache-titre { text-decoration: line-through; color: var(--gris); }
.tache-corps { flex: 1; }
.tache-titre { font-size: 14px; font-weight: 500; color: var(--texte); }
.tache-meta  { font-size: 11px; color: var(--gris); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tache-semaine { font-size: 10px; color: var(--bleu); background: var(--bleu-light); padding: 1px 7px; border-radius: 10px; }
.taches-faites-titre { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; padding: 12px 0 4px; border-top: 1px solid var(--bordure); margin-top: 8px; }
.badge-cat { background: var(--rose-light); color: var(--rose-dark); }
.badge-urgente { background: #FEE2E2; color: #991B1B; }
.badge-haute   { background: #FEF3C7; color: #92400E; }

/* Pills catégorie / priorité tâches */
.ajouter-tache-bloc { margin-bottom: 16px; }
.tache-options {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px; padding: 8px 0;
}
.tache-opt-label { font-size: 11px; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.opt-pill {
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--bordure);
  background: var(--blanc); color: var(--gris); font-size: 12px; cursor: pointer; transition: all .15s;
}
.opt-pill:hover { border-color: var(--rose); color: var(--rose-dark); }
.opt-pill.active { background: var(--rose); border-color: var(--rose); color: white; font-weight: 600; }
.opt-pill.opt-urgente.active { background: #DC2626; border-color: #DC2626; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.badge-urgente  { background: #FEE2E2; color: #991B1B; }
.badge-normale  { background: #FEF3C7; color: #92400E; }
.badge-basse    { background: var(--gris-light); color: var(--gris); }
.badge-email    { background: var(--bleu-light); color: var(--bleu); }
.badge-finance  { background: var(--vert-light); color: var(--vert); }
.badge-admin    { background: var(--terra-light); color: var(--terra); }
.badge-chantier { background: var(--rose-light); color: var(--rose-dark); }

/* Ajouter tâche */
.ajouter-tache {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ajouter-tache input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-size: 14px;
  font-family: var(--font);
  background: var(--blanc);
  color: var(--texte);
  outline: none;
  transition: border-color .15s;
}
.ajouter-tache input:focus { border-color: var(--rose-dark); }
.btn-ajouter {
  padding: 10px 18px;
  background: var(--rose-dark);
  color: white;
  border: none;
  border-radius: var(--rayon-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-ajouter:hover { background: var(--rose); }

/* ---- EMAILS ---- */
.email-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
}
.email-item:hover { border-color: var(--rose); }
.email-item.non_traite { border-left: 3px solid var(--rose-dark); }
.email-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rose-light);
  color: var(--rose-dark);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.email-corps { flex: 1; min-width: 0; }
.email-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.email-nom { font-weight: 600; font-size: 14px; }
.email-date { font-size: 11px; color: var(--gris); margin-left: auto; white-space: nowrap; }
.email-sujet { font-size: 13px; color: var(--texte-doux); margin-bottom: 2px; }
.email-preview { font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-badges { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

/* ---- CHANTIERS ---- */
.chantier-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
  margin-bottom: 12px;
}
.chantier-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.chantier-nom { font-weight: 700; font-size: 15px; }
.chantier-client { font-size: 13px; color: var(--texte-doux); }
.chantier-montants {
  display: flex;
  gap: 16px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.montant-item { font-size: 13px; }
.montant-item strong { font-size: 15px; }
.chantier-alertes { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.chantier-alerte {
  font-size: 12px;
  color: #92400E;
  background: #FEF3C7;
  padding: 4px 10px;
  border-radius: 6px;
}

/* statuts */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  flex-shrink: 0;
}
.statut-prospect     { background: #F3F4F6; color: var(--gris); }
.statut-devis_signe  { background: #FEF3C7; color: #92400E; }
.statut-acompte_recu { background: var(--bleu-light); color: var(--bleu); }
.statut-en_cours     { background: #D1FAE5; color: #065F46; }
.statut-termine      { background: #F3F4F6; color: var(--gris); }

/* ---- ÉPARGNE ---- */
.epargne-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.epargne-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
.epargne-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.epargne-nom { font-weight: 700; font-size: 15px; }
.epargne-barre-fond {
  height: 8px;
  background: var(--gris-light);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}
.epargne-barre-rempli {
  height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
.epargne-chiffres { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; }
.epargne-manquant { font-size: 12px; color: var(--gris); margin-top: 4px; }
.epargne-effort   { font-size: 12px; color: var(--texte-doux); margin-top: 8px; background: var(--gris-light); padding: 6px 10px; border-radius: 6px; }

/* ---- MARKETING ---- */
.pub-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px;
  box-shadow: var(--ombre);
  margin-bottom: 12px;
}
.pub-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.pub-titre { font-weight: 600; font-size: 14px; }
.pub-idee { font-size: 13px; color: var(--texte-doux); margin-bottom: 6px; }
.pub-hashtags { font-size: 12px; color: var(--bleu); }
.pub-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.btn-sm {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--bordure);
  background: none;
  transition: all .15s;
  color: var(--texte-doux);
}
.btn-sm:hover { background: var(--rose-light); border-color: var(--rose); color: var(--rose-dark); }
.btn-sm.valider { background: var(--vert-light); border-color: var(--vert); color: var(--vert); }

/* ---- TRÉSORERIE ---- */
.treo-comptes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.compte-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px;
  box-shadow: var(--ombre);
}
.compte-nom { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.compte-role { font-size: 12px; color: var(--gris); margin-bottom: 8px; }
.compte-solde { font-size: 20px; font-weight: 700; color: var(--texte); }
.compte-note { font-size: 11px; color: var(--gris); margin-top: 4px; font-style: italic; }

/* ---- STATS BAR ---- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-item {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px 16px;
  box-shadow: var(--ombre);
}
.stat-val { font-size: 22px; font-weight: 700; color: var(--texte); }
.stat-lbl { font-size: 12px; color: var(--gris); margin-top: 2px; }
.stat-val.rose  { color: var(--rose-dark); }
.stat-val.vert  { color: var(--vert); }
.stat-val.terra { color: var(--terra); }

/* ---- DIVIDER ---- */
.divider { height: 1px; background: var(--bordure); margin: 20px 0; }

/* ---- LOADER ---- */
.loader {
  text-align: center;
  padding: 40px;
  color: var(--gris);
  font-size: 14px;
}

/* ---- VIDE ---- */
.vide {
  text-align: center;
  padding: 30px;
  color: var(--gris);
  font-size: 13px;
}

/* ---- RESPONSIVE MOBILE ---- */
@media (max-width: 480px) {
  header { padding: 0 12px; }
  .header-inner { height: auto; flex-wrap: wrap; padding: 8px 0; gap: 8px; }
  nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .header-date { display: none; }
  main { padding: 12px 10px 60px; }
  .grille { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .epargne-grid { grid-template-columns: 1fr; }
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bordure); border-radius: 3px; }

/* ══════════════════════════════════════════════
   FINANCES — KPI CARDS
══════════════════════════════════════════════ */
.finances-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid var(--bordure);
}
.kpi-card.kpi-green  { border-left-color: #27ae60; }
.kpi-card.kpi-red    { border-left-color: #e74c3c; }
.kpi-card.kpi-blue   { border-left-color: #3498db; }
.kpi-card.kpi-orange { border-left-color: #f39c12; }
.kpi-label { font-size: 12px; color: var(--gris); margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--texte); margin-bottom: 4px; }
.kpi-sub   { font-size: 12px; color: var(--gris); }

/* FINANCE ROWS */
.finance-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--bordure);
}
.finance-row:last-child { border-bottom: none; }
.finance-nom  { font-size: 13px; font-weight: 500; color: var(--texte); }
.finance-cat  { font-size: 11px; color: var(--gris); margin-top: 2px; }
.finance-montant { font-size: 13px; font-weight: 600; white-space: nowrap; margin-left: 12px; }
.finance-montant.depense      { color: #e74c3c; }
.finance-montant.encaissement { color: #27ae60; }

/* CATÉGORIES BAR */
.cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-nom  { font-size: 12px; width: 200px; flex-shrink: 0; color: var(--texte); }
.cat-bar-wrap { flex: 1; background: var(--bordure); border-radius: 4px; height: 8px; overflow: hidden; }
.cat-bar  { height: 8px; background: #3498db; border-radius: 4px; transition: width .4s; }
.cat-total { font-size: 12px; font-weight: 600; width: 90px; text-align: right; color: var(--texte); }

/* BOUTON IMPORT */
.btn-import-doc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  background: var(--rose-dark); color: white;
  border: none; border-radius: 10px; padding: 10px 18px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(196,113,124,.35);
  transition: transform .15s, box-shadow .15s;
}
.btn-import-doc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(196,113,124,.45); }
.btn-import-doc:active { transform: translateY(0); }

/* ══════════════════════════════════════════════
   MODAL IMPORT
══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--surface); border-radius: 16px;
  width: 100%; max-width: 820px; max-height: 90vh;
  overflow-y: auto; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.modal-header h2 { font-size: 18px; font-weight: 700; margin: 0; }
.modal-close {
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--gris); padding: 4px;
}
.import-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--texte); }
.import-select {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--bordure); background: var(--fond);
  color: var(--texte); font-size: 14px;
}
.import-file {
  width: 100%; padding: 18px; border-radius: 12px;
  border: 2px dashed var(--rose-dark); background: var(--rose-light);
  color: var(--texte); font-size: 14px; cursor: pointer;
  text-align: center; transition: background .2s;
}
.import-file:hover { background: #fde8eb; }
.btn-valider {
  background: var(--accent); color: white; border: none;
  border-radius: 8px; padding: 12px 20px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.btn-valider:hover { opacity: .88; }
.btn-valider:disabled { opacity: .5; cursor: not-allowed; }
.btn-annuler {
  background: var(--fond); color: var(--texte); border: 1px solid var(--bordure);
  border-radius: 8px; padding: 12px 20px; font-size: 14px; cursor: pointer;
}

/* TABLE PREVIEW */
.import-table {
  width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px;
}
.import-table th {
  background: var(--fond); padding: 8px 10px; text-align: left;
  border-bottom: 2px solid var(--bordure); font-weight: 600; color: var(--gris);
}
.import-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--bordure); color: var(--texte);
}
.import-table tr:hover td { background: var(--fond); }
.badge-high   { background: #d4edda; color: #155724; padding: 2px 7px; border-radius: 10px; font-size: 11px; }
.badge-medium { background: #fff3cd; color: #856404; padding: 2px 7px; border-radius: 10px; font-size: 11px; }
.badge-low    { background: #f8d7da; color: #721c24; padding: 2px 7px; border-radius: 10px; font-size: 11px; }

@media (max-width: 480px) {
  .finances-kpis { grid-template-columns: 1fr 1fr; }
  .cat-nom { width: 120px; }
  .modal-box { padding: 16px; }
}

/* ══════════════════════════════════════════════
   STOCK INTELLIGENT
══════════════════════════════════════════════ */
.stock-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.stock-filtres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.filtre-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--blanc);
  color: var(--gris);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.filtre-btn:hover { border-color: var(--rose); color: var(--rose-dark); }
.filtre-btn.active { background: var(--rose); border-color: var(--rose); color: white; }

.stock-search {
  width: 100%;
  max-width: 360px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--bordure);
  background: var(--blanc);
  color: var(--texte);
  font-size: 14px;
}

.stock-groupe { margin-bottom: 24px; }
.stock-groupe-titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--bordure);
}

.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.stock-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px;
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}
.stock-carte:hover { box-shadow: var(--ombre-md); transform: translateY(-1px); }
.stock-carte.carte-rupture { border-left: 4px solid #e74c3c; }
.stock-carte.carte-alerte  { border-left: 4px solid #f39c12; }

.stock-carte-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stock-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-ok      { background: #d4edda; color: #155724; }
.badge-alerte  { background: #fff3cd; color: #856404; }
.badge-rupture { background: #f8d7da; color: #721c24; }

.stock-carte-actions {
  display: flex;
  gap: 4px;
}

.btn-mini {
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12px;
  cursor: pointer;
  color: var(--gris);
  transition: all .1s;
}
.btn-mini:hover { border-color: var(--rose); color: var(--rose-dark); background: var(--rose-light); }

.stock-carte-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
  margin-bottom: 6px;
  line-height: 1.3;
}

.stock-carte-qty {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.qty-vert   { color: var(--vert); }
.qty-orange { color: var(--terra); }
.qty-rouge  { color: var(--rose-dark); }

.stock-carte-seuil { font-size: 11px; color: var(--gris); }
.stock-carte-info  { font-size: 11px; color: var(--bleu); margin-top: 4px; }
.stock-carte-notes { font-size: 11px; color: var(--gris); margin-top: 4px; font-style: italic; }

.detail-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

@media (max-width: 480px) {
  .stock-grid { grid-template-columns: 1fr 1fr; }
  .stock-kpis { grid-template-columns: 1fr 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   COMPTES BANCAIRES
══════════════════════════════════════════════ */
.comptes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.compte-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
.compte-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.compte-icone { font-size: 20px; flex-shrink: 0; }
.compte-nom { font-weight: 600; font-size: 13px; flex: 1; color: var(--texte); }
.compte-badge-auto {
  font-size: 10px; font-weight: 700; background: var(--bleu-light);
  color: var(--bleu); padding: 2px 7px; border-radius: 10px; letter-spacing: .04em;
}
.compte-solde { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.solde-positif { color: var(--vert); }
.solde-negatif { color: var(--rose-dark); }
.compte-op    { font-size: 11px; color: var(--texte-doux); margin-bottom: 6px; font-style: italic; }
.compte-synchro { font-size: 11px; color: var(--gris); }
.synchro-ancienne { color: var(--terra); font-weight: 600; }
.compte-notes { font-size: 11px; color: var(--gris); margin-top: 6px; }

/* ══════════════════════════════════════════════
   LOGIN MODAL
══════════════════════════════════════════════ */
#modal-login { z-index: 2000; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
#modal-login .modal-box {
  border-top: 4px solid var(--rose);
  padding: 36px 28px;
}
#login-pwd {
  font-size: 16px !important;
  letter-spacing: 2px;
  text-align: center;
}